doc

import React, { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { Clock, GitBranch, Box, Check, X } from 'lucide-react';

const DeploymentDashboard = () => {
  const [selectedEnv, setSelectedEnv] = useState('production');
  
  // Sample data - in real app, this would come from your API
  const deploymentHistory = [
    { id: 1, date: '2025-02-15', status: 'success', branch: 'main', duration: '45s', env: 'production' },
    { id: 2, date: '2025-02-14', status: 'failed', branch: 'feature/auth', duration: '32s', env: 'staging' },
    { id: 3, date: '2025-02-14', status: 'success', branch: 'main', duration: '38s', env: 'production' }
  ];

  const successRate = [
    { name: 'Feb 10', rate: 90 },
    { name: 'Feb 11', rate: 95 },
    { name: 'Feb 12', rate: 85 },
    { name: 'Feb 13', rate: 100 },
    { name: 'Feb 14', rate: 92 }
  ];

  return (
    <div className="p-6 max-w-6xl mx-auto">
      {/* Environment Selector */}
      <div className="flex gap-4 mb-6">
        {['production', 'staging', 'development'].map((env) => (
          <button
            key={env}
            onClick={() => setSelectedEnv(env)}
            className={`px-4 py-2 rounded-lg font-medium ${
              selectedEnv === env 
                ? 'bg-blue-500 text-white' 
                : 'bg-gray-100 hover:bg-gray-200'
            }`}
          >
            {env.charAt(0).toUpperCase() + env.slice(1)}
          </button>
        ))}
      </div>

      {/* Stats Overview */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-white p-4 rounded-lg shadow">
          <h3 className="text-gray-500 mb-2">Total Deployments</h3>
          <p className="text-2xl font-bold">156</p>
        </div>
        <div className="bg-white p-4 rounded-lg shadow">
          <h3 className="text-gray-500 mb-2">Success Rate</h3>
          <p className="text-2xl font-bold text-green-500">94.2%</p>
        </div>
        <div className="bg-white p-4 rounded-lg shadow">
          <h3 className="text-gray-500 mb-2">Avg Duration</h3>
          <p className="text-2xl font-bold">41s</p>
        </div>
      </div>

      {/* Success Rate Chart */}
      <div className="bg-white p-4 rounded-lg shadow mb-6">
        <h3 className="text-lg font-medium mb-4">Deployment Success Rate</h3>
        <div className="h-64">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={successRate}>
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="rate" fill="#3b82f6" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Deployment History */}
      <div className="bg-white rounded-lg shadow">
        <h3 className="text-lg font-medium p-4 border-b">Deployment History</h3>
        <div className="divide-y">
          {deploymentHistory.map((deploy) => (
            <div key={deploy.id} className="p-4 flex items-center justify-between">
              <div className="flex items-center gap-4">
                {deploy.status === 'success' ? (
                  <Check className="text-green-500" size={20} />
                ) : (
                  <X className="text-red-500" size={20} />
                )}
                <div>
                  <div className="font-medium">{deploy.branch}</div>
                  <div className="text-sm text-gray-500">{deploy.date}</div>
                </div>
              </div>
              <div className="flex items-center gap-6">
                <div className="flex items-center gap-2">
                  <Clock size={16} className="text-gray-400" />
                  <span>{deploy.duration}</span>
                </div>
                <div className="flex items-center gap-2">
                  <GitBranch size={16} className="text-gray-400" />
                  <span>{deploy.branch}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Box size={16} className="text-gray-400" />
                  <span>{deploy.env}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default DeploymentDashboard;