openship 0.1.1 → 0.1.7

package/apps/dashboard/src/components/overview/EmptyState.tsx

@@ -1,126 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { Plus, GitBranch, Zap, Globe, Eye, RotateCcw } from 'lucide-react';
-import { useI18n } from '@/components/i18n-provider';
-
-const EmptyState: React.FC = () => {
-  const { t } = useI18n();
-  const emptyState = t.dashboard.pages.projects.emptyState;
-
-  return (
-    <div className="py-16 text-center">
-      {/* SVG Illustration - using theme variables */}
-      <div className="relative mx-auto w-64 h-44 mb-8">
-        <svg className="absolute inset-0 w-full h-full" viewBox="0 0 260 180" fill="none">
-          {/* Background card stack effect */}
-          <rect x="75" y="45" width="130" height="95" rx="14" fill="var(--th-sf-04)" />
-          <rect x="65" y="35" width="130" height="95" rx="14" fill="var(--th-sf-03)" stroke="var(--th-bd-subtle)" strokeWidth="1" />
-          <rect x="55" y="25" width="130" height="95" rx="14" fill="var(--th-card-bg)" stroke="var(--th-bd-default)" strokeWidth="1" />
-          
-          {/* Card content - header bar */}
-          <rect x="55" y="25" width="130" height="28" rx="14" fill="var(--th-sf-05)" />
-          <circle cx="72" cy="39" r="4" fill="#ef4444" fillOpacity="0.6" />
-          <circle cx="84" cy="39" r="4" fill="#eab308" fillOpacity="0.6" />
-          <circle cx="96" cy="39" r="4" fill="#22c55e" fillOpacity="0.6" />
-          
-          {/* Content placeholder lines */}
-          <rect x="70" y="65" width="50" height="5" rx="2.5" fill="var(--th-on-12)" />
-          <rect x="70" y="76" width="85" height="4" rx="2" fill="var(--th-on-08)" />
-          <rect x="70" y="85" width="65" height="4" rx="2" fill="var(--th-on-08)" />
-          
-          {/* Folder/Project icon */}
-          <rect x="70" y="100" width="28" height="22" rx="5" fill="var(--th-on-05)" stroke="var(--th-on-10)" strokeWidth="1" />
-          <path d="M74 105h8l2.5 2.5h9.5v11H74V105z" fill="var(--th-on-10)" />
-          
-          {/* Plus button */}
-          <circle cx="210" cy="90" r="22" fill="var(--th-on-05)" />
-          <circle cx="210" cy="90" r="16" fill="var(--th-card-bg)" stroke="var(--th-on-20)" strokeWidth="2" strokeDasharray="4 3" />
-          <path d="M210 82v16M202 90h16" stroke="var(--th-on-40)" strokeWidth="2" strokeLinecap="round" />
-          
-          {/* Decorative elements */}
-          <circle cx="30" cy="60" r="4" fill="var(--th-on-10)" />
-          <circle cx="40" cy="140" r="6" fill="var(--th-on-08)" />
-          <circle cx="230" cy="40" r="3" fill="var(--th-on-12)" />
-          <circle cx="245" cy="130" r="5" fill="var(--th-on-06)" />
-          
-          {/* Sparkle accents */}
-          <path d="M25 100l2-4 2 4-4-2 4 0-4 2z" fill="var(--th-on-16)" />
-          <path d="M220 150l1.5-3 1.5 3-3-1.5 3 0-3 1.5z" fill="var(--th-on-12)" />
-          
-          {/* Connecting line */}
-          <path d="M185 95 Q 192 92 195 90" stroke="var(--th-on-12)" strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
-        </svg>
-      </div>
-      
-      <h3 className="text-2xl font-medium text-foreground/80 mb-2" style={{ letterSpacing: "-0.2px" }}>
-        {emptyState.title}
-      </h3>
-      <p className="text-sm text-muted-foreground/70 max-w-sm mx-auto mb-8 leading-relaxed">
-        {emptyState.description}
-      </p>
-      
-      <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mb-10">
-        <Link
-          href="/library"
-          className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground text-sm font-medium rounded-xl hover:bg-primary/90 transition-all hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-0.5"
-        >
-          <Plus className="size-4" />
-          {emptyState.createProject}
-        </Link>
-        <Link
-          href="/library"
-          className="inline-flex items-center gap-2 px-6 py-3 bg-muted/50 text-foreground text-sm font-medium rounded-xl hover:bg-muted transition-colors"
-        >
-          <GitBranch className="size-4" />
-          {emptyState.browseTemplates}
-        </Link>
-      </div>
-
-      {/* Feature highlights - Clean minimal cards */}
-      <div className="max-w-2xl mx-auto">
-        <p className="text-xs text-muted-foreground/60 uppercase tracking-wider mb-4">
-          {emptyState.zeroConfig}
-        </p>
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-          <div className="bg-card border border-border/50 rounded-xl p-4 text-left">
-            <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-              <Zap className="size-4 text-muted-foreground" />
-            </div>
-            <p className="text-sm font-medium text-foreground">{emptyState.instant}</p>
-            <p className="text-xs text-muted-foreground mt-0.5">{emptyState.instantDesc}</p>
-          </div>
-          <div className="bg-card border border-border/50 rounded-xl p-4 text-left">
-            <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-              <Globe className="size-4 text-muted-foreground" />
-            </div>
-            <p className="text-sm font-medium text-foreground">{emptyState.global}</p>
-            <p className="text-xs text-muted-foreground mt-0.5">{emptyState.globalDesc}</p>
-          </div>
-          <div className="bg-card border border-border/50 rounded-xl p-4 text-left">
-            <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-              <Eye className="size-4 text-muted-foreground" />
-            </div>
-            <p className="text-sm font-medium text-foreground">{emptyState.previews}</p>
-            <p className="text-xs text-muted-foreground mt-0.5">{emptyState.previewsDesc}</p>
-          </div>
-          <div className="bg-card border border-border/50 rounded-xl p-4 text-left">
-            <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-              <RotateCcw className="size-4 text-muted-foreground" />
-            </div>
-            <p className="text-sm font-medium text-foreground">{emptyState.rollbacks}</p>
-            <p className="text-xs text-muted-foreground mt-0.5">{emptyState.rollbacksDesc}</p>
-          </div>
-        </div>
-      </div>
-
-      <p className="text-xs text-muted-foreground/60 mt-8">
-        {emptyState.commandPalette.replace('{key}', '')}
-        <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono">⌘ K</kbd>
-      </p>
-    </div>
-  );
-};
-
-export default EmptyState;

package/apps/dashboard/src/components/overview/LoadingSkeleton.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import React from 'react';
-
-export const OverviewSkeleton: React.FC = () => {
-  return (
-    <div className="space-y-6 animate-pulse">
-      {/* Header skeleton */}
-      <div className="flex justify-between items-start">
-        <div className="space-y-2">
-          <div className="h-8 w-48 bg-black/5 rounded-lg" />
-          <div className="h-4 w-72 bg-black/5 rounded" />
-        </div>
-        <div className="h-5 w-32 bg-black/5 rounded" />
-      </div>
-
-      {/* Stats grid skeleton */}
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-        {Array(6).fill(0).map((_, i) => (
-          <div key={i} className="bg-white rounded-[20px] border border-black/5 p-5">
-            <div className="flex items-start justify-between mb-4">
-              <div className="w-11 h-11 rounded-xl bg-black/5" />
-            </div>
-            <div className="space-y-2">
-              <div className="h-7 w-20 bg-black/5 rounded" />
-              <div className="h-4 w-28 bg-black/5 rounded" />
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Quick links skeleton */}
-      <div className="bg-white rounded-[20px] border border-black/5 p-6">
-        <div className="flex items-center gap-3 mb-5">
-          <div className="w-10 h-10 bg-black/5 rounded-xl" />
-          <div className="space-y-2">
-            <div className="h-5 w-32 bg-black/5 rounded" />
-            <div className="h-3 w-24 bg-black/5 rounded" />
-          </div>
-        </div>
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
-          {Array(6).fill(0).map((_, i) => (
-            <div key={i} className="flex flex-col items-center p-4 rounded-xl border border-black/5">
-              <div className="w-11 h-11 rounded-xl bg-black/5 mb-3" />
-              <div className="h-4 w-20 bg-black/5 rounded mb-1" />
-              <div className="h-3 w-16 bg-black/5 rounded" />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Charts skeleton */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {Array(2).fill(0).map((_, i) => (
-          <div key={i} className="bg-white rounded-[20px] border border-black/5 overflow-hidden">
-            <div className="px-6 py-4 border-b border-black/5">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 bg-black/5 rounded-xl" />
-                <div className="space-y-2">
-                  <div className="h-5 w-28 bg-black/5 rounded" />
-                  <div className="h-4 w-20 bg-black/5 rounded" />
-                </div>
-              </div>
-            </div>
-            <div className="p-6">
-              <div className="h-36 bg-black/5 rounded-xl" />
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Cards skeleton */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        {Array(4).fill(0).map((_, i) => (
-          <div key={i} className="bg-white rounded-[20px] border border-black/5 p-6">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 bg-black/5 rounded-xl" />
-              <div className="space-y-2">
-                <div className="h-5 w-24 bg-black/5 rounded" />
-                <div className="h-3 w-16 bg-black/5 rounded" />
-              </div>
-            </div>
-            <div className="h-24 bg-black/5 rounded-xl" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default OverviewSkeleton;
-

package/apps/dashboard/src/components/overview/OverviewHeader.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { Wallet, Plus, TrendingUp } from 'lucide-react';
-
-interface OverviewHeaderProps {
-  userName?: string;
-  creditsBalance?: string | number;
-}
-
-const OverviewHeader: React.FC<OverviewHeaderProps> = ({ 
-  userName,
-  creditsBalance = 0,
-}) => {
-  const getGreeting = () => {
-    const hour = new Date().getHours();
-    if (hour < 12) return 'Good morning';
-    if (hour < 18) return 'Good afternoon';
-    return 'Good evening';
-  };
-
-  const formatCredits = (value: string | number): string => {
-    // If already formatted string (with K/M), just add $
-    if (typeof value === 'string') {
-      return `$${value}`;
-    }
-    // If number, format with 2 decimals
-    return `$${value.toFixed(2)}`;
-  };
-
-  return (
-    <div className="mb-8">
-      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
-        {/* Left: Greeting */}
-        <div>
-          <h1 className="text-3xl font-bold text-black mb-1.5" style={{ letterSpacing: '-0.5px' }}>
-            {userName ? `${getGreeting()}, ${userName}` : 'Overview'}
-          </h1>
-          <p className="text-sm text-black/50">
-            Monitor your platform usage and manage resources
-          </p>
-        </div>
-        
-        {/* Right: Credits Card */}
-        <div className="bg-white rounded-[20px] border border-black/5 p-5 min-w-[320px]">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="w-11 h-11 bg-black/[0.04] rounded-xl flex items-center justify-center">
-                <Wallet className="w-5 h-5 text-black/60" />
-              </div>
-              <div>
-                <p className="text-xs text-black/40 mb-0.5">Credits Balance</p>
-                <span className="text-2xl font-bold text-black">
-                  {formatCredits(creditsBalance)}
-                </span>
-              </div>
-            </div>
-            
-            <Link
-              href="/billing"
-              className="flex items-center gap-1.5 px-4 py-2.5 bg-black text-white text-sm font-medium rounded-xl hover:bg-black/80 transition-colors ml-4"
-            >
-              <Plus className="w-4 h-4" />
-              Top Up
-            </Link>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OverviewHeader;

package/apps/dashboard/src/components/overview/OverviewHeroChart.tsx

@@ -1,344 +0,0 @@
-'use client';
-
-import React from 'react';
-import { TrendingUp, TrendingDown, Bot, Activity } from 'lucide-react';
-import { Doughnut } from 'react-chartjs-2';
-import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip,
-  Legend,
-} from 'chart.js';
-import { DailyMetric, TimePeriod } from './types';
-
-ChartJS.register(ArcElement, Tooltip, Legend);
-
-interface OverviewHeroChartProps {
-  tokenData: DailyMetric[];
-  requestData: DailyMetric[];
-  agentData: DailyMetric[];
-  totalTokens: number;
-  totalRequests: number;
-  totalAgents: number;
-  productionAgents: number;
-  testingAgents: number;
-  tokenTrend: number;
-  requestTrend: number;
-  agentTrend: number;
-  isLoading?: boolean;
-  period?: TimePeriod;
-  onPeriodChange?: (period: TimePeriod) => void;
-}
-
-const OverviewHeroChart: React.FC<OverviewHeroChartProps> = ({
-  tokenData,
-  requestData,
-  totalTokens,
-  totalRequests,
-  totalAgents,
-  productionAgents,
-  testingAgents,
-  tokenTrend,
-  requestTrend,
-  agentTrend,
-  isLoading = false,
-  period = 7,
-  onPeriodChange,
-}) => {
-  const formatNumber = (num: number): string => {
-    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
-    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
-    return num.toLocaleString();
-  };
-
-  if (isLoading) {
-    return (
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-        {/* Main Chart Skeleton */}
-        <div className="lg:col-span-3 bg-white rounded-[24px] border border-black/5 overflow-hidden">
-          {/* Header */}
-          <div className="px-6 py-4 border-b border-black/5 flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-black/5 rounded-xl animate-pulse" />
-              <div className="space-y-2">
-                <div className="h-4 w-32 bg-black/5 rounded animate-pulse" />
-                <div className="h-3 w-24 bg-black/5 rounded animate-pulse" />
-              </div>
-            </div>
-            <div className="h-8 w-32 bg-black/5 rounded-full animate-pulse" />
-          </div>
-          {/* Chart Area */}
-          <div className="px-6 pt-4 pb-3">
-            <div className="h-28 bg-black/5 rounded-xl animate-pulse mb-4" />
-          </div>
-          {/* Footer */}
-          <div className="px-6 py-3.5 bg-white border-t border-black/5">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-6">
-                <div className="h-4 w-32 bg-black/5 rounded animate-pulse" />
-                <div className="h-4 w-32 bg-black/5 rounded animate-pulse" />
-              </div>
-              <div className="h-3 w-20 bg-black/5 rounded animate-pulse" />
-            </div>
-          </div>
-        </div>
-        
-        {/* Agents Card Skeleton */}
-        <div className="bg-white rounded-[24px] border border-black/5 p-5 flex flex-col">
-          <div className="flex items-center justify-between mb-3">
-            <div className="flex items-center gap-2.5">
-              <div className="w-9 h-9 bg-black/5 rounded-lg animate-pulse" />
-              <div className="space-y-1.5">
-                <div className="h-3.5 w-16 bg-black/5 rounded animate-pulse" />
-                <div className="h-2.5 w-20 bg-black/5 rounded animate-pulse" />
-              </div>
-            </div>
-          </div>
-          <div className="flex-1 flex items-center justify-center py-2">
-            <div className="w-[110px] h-[110px] rounded-full bg-black/5 animate-pulse" />
-          </div>
-          <div className="pt-3 border-t border-black/5">
-            <div className="flex items-center justify-center gap-5">
-              <div className="h-3 w-20 bg-black/5 rounded animate-pulse" />
-              <div className="h-3 w-20 bg-black/5 rounded animate-pulse" />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const hasTokenData = tokenData.length > 0 && tokenData.some(d => d.value > 0);
-  const hasRequestData = requestData.length > 0 && requestData.some(d => d.value > 0);
-
-  // Main combined area chart
-  const renderMainChart = () => {
-    const maxTokens = Math.max(...tokenData.map(d => d.value), 1);
-    const maxRequests = Math.max(...requestData.map(d => d.value), 1);
-    
-    const tokenPoints = tokenData.map((day, index) => {
-      const height = hasTokenData && maxTokens > 0 ? (day.value / maxTokens) * 75 : 0;
-      const x = tokenData.length > 1 ? (index / (tokenData.length - 1)) * 100 : 50;
-      const y = hasTokenData ? (92 - height) : 90;
-      return `${x},${y}`;
-    }).join(' ');
-
-    const requestPoints = requestData.map((day, index) => {
-      const height = hasRequestData && maxRequests > 0 ? (day.value / maxRequests) * 60 : 0;
-      const x = requestData.length > 1 ? (index / (requestData.length - 1)) * 100 : 50;
-      const y = hasRequestData ? (92 - height) : 88;
-      return `${x},${y}`;
-    }).join(' ');
-
-    return (
-      <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
-        <defs>
-          <linearGradient id="tokenAreaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="#8b5cf6" stopOpacity={hasTokenData ? "0.2" : "0.03"} />
-            <stop offset="100%" stopColor="#8b5cf6" stopOpacity="0" />
-          </linearGradient>
-          <linearGradient id="requestAreaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="#06b6d4" stopOpacity={hasRequestData ? "0.15" : "0.02"} />
-            <stop offset="100%" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-        
-        {/* Token area - purple */}
-        <polygon points={`0,100 ${tokenPoints} 100,100`} fill="url(#tokenAreaGradient)" />
-        <polyline 
-          points={tokenPoints} 
-          fill="none" 
-          stroke="#8b5cf6"
-          strokeOpacity={hasTokenData ? "1" : "0.2"}
-          strokeWidth="2.5" 
-          vectorEffect="non-scaling-stroke" 
-          strokeLinecap="round" 
-          strokeLinejoin="round" 
-        />
-        
-        {/* Request area - cyan */}
-        <polygon points={`0,100 ${requestPoints} 100,100`} fill="url(#requestAreaGradient)" />
-        <polyline 
-          points={requestPoints} 
-          fill="none" 
-          stroke="#06b6d4"
-          strokeOpacity={hasRequestData ? "1" : "0.2"}
-          strokeWidth="2" 
-          vectorEffect="non-scaling-stroke" 
-          strokeLinecap="round" 
-          strokeLinejoin="round" 
-          strokeDasharray="6 4"
-        />
-      </svg>
-    );
-  };
-
-  // Chart.js doughnut for agents
-  const doughnutData = {
-    labels: ['Production', 'Testing'],
-    datasets: [
-      {
-        data: [productionAgents, testingAgents],
-        backgroundColor: ['#06b6d4', '#8b5cf6'],
-        hoverBackgroundColor: ['#0891b2', '#7c3aed'],
-        borderWidth: 0,
-        cutout: '70%',
-      },
-    ],
-  };
-
-  const doughnutOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: false,
-      },
-      tooltip: {
-        backgroundColor: '#1e293b',
-        titleFont: { size: 12, weight: 500 as const },
-        bodyFont: { size: 11 },
-        padding: 10,
-        cornerRadius: 8,
-        displayColors: true,
-        boxWidth: 8,
-        boxHeight: 8,
-        boxPadding: 4,
-      },
-    },
-  };
-
-  const periodOptions: { value: TimePeriod; label: string }[] = [
-    { value: 7, label: '7d' },
-    { value: 14, label: '14d' },
-    { value: 30, label: '30d' },
-  ];
-
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-      {/* Main Chart */}
-      <div className="lg:col-span-3 bg-white rounded-[24px] border border-black/5 overflow-hidden flex flex-col">
-        {/* Header */}
-        <div className="px-6 py-4 border-b border-black/5">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
-                <Activity className="w-5 h-5 text-purple-600" />
-              </div>
-              <div>
-                <h3 className="font-semibold text-black">Platform Activity</h3>
-                <p className="text-xs text-black/40">Token usage & API requests</p>
-              </div>
-            </div>
-            
-            {onPeriodChange && (
-              <div className="flex items-center gap-1 bg-black/[0.03] rounded-full p-1">
-                {periodOptions.map((option) => (
-                  <button
-                    key={option.value}
-                    onClick={() => onPeriodChange(option.value)}
-                    className={`px-3 py-1.5 text-xs font-medium rounded-full transition-all ${
-                      period === option.value
-                        ? 'bg-white text-black shadow-sm'
-                        : 'text-black/50 hover:text-black'
-                    }`}
-                  >
-                    {option.label}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Chart */}
-        <div className="px-6 pt-4 pb-3 flex-1">
-          <div className="h-28">
-            {renderMainChart()}
-          </div>
-        </div>
-
-        {/* Stats Row */}
-        <div className="px-6 py-3.5 bg-white border-t border-black/5">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-6">
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-purple-500" />
-                <span className="text-xs text-black/50">Tokens</span>
-                <span className="text-sm font-semibold text-black">{formatNumber(totalTokens)}</span>
-                {tokenTrend !== 0 && (
-                  <span className={`flex items-center text-xs font-medium ${tokenTrend > 0 ? 'text-emerald-600' : 'text-rose-500'}`}>
-                    {tokenTrend > 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
-                    {Math.abs(tokenTrend)}%
-                  </span>
-                )}
-              </div>
-              
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-cyan-500" />
-                <span className="text-xs text-black/50">Requests</span>
-                <span className="text-sm font-semibold text-black">{formatNumber(totalRequests)}</span>
-                {requestTrend !== 0 && (
-                  <span className={`flex items-center text-xs font-medium ${requestTrend > 0 ? 'text-emerald-600' : 'text-rose-500'}`}>
-                    {requestTrend > 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
-                    {Math.abs(requestTrend)}%
-                  </span>
-                )}
-              </div>
-            </div>
-            
-            <span className="text-xs text-black/30">Last {period} days</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Agents Card */}
-      <div className="bg-white rounded-[24px] border border-black/5 p-5 flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-3">
-          <div className="flex items-center gap-2.5">
-            <div className="w-9 h-9 bg-cyan-100 rounded-lg flex items-center justify-center">
-              <Bot className="w-4 h-4 text-cyan-600" />
-            </div>
-            <div>
-              <h4 className="text-sm font-semibold text-black">Agents</h4>
-              <p className="text-[11px] text-black/40">Environments</p>
-            </div>
-          </div>
-          {agentTrend !== 0 && (
-            <span className={`flex items-center text-xs font-medium px-2 py-1 rounded-full ${agentTrend > 0 ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-500'}`}>
-              {agentTrend > 0 ? <TrendingUp className="w-3 h-3 mr-0.5" /> : <TrendingDown className="w-3 h-3 mr-0.5" />}
-              {Math.abs(agentTrend)}%
-            </span>
-          )}
-        </div>
-
-        {/* Chart */}
-        <div className="flex-1 flex items-center justify-center relative py-2">
-          <div className="w-[110px] h-[110px]">
-            <Doughnut data={doughnutData} options={doughnutOptions} />
-          </div>
-          {/* Center label */}
-          <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
-            <span className="text-2xl font-bold text-black">{totalAgents}</span>
-            <span className="text-[10px] text-black/40 uppercase tracking-wide">Total</span>
-          </div>
-        </div>
-
-        {/* Legend */}
-        <div className="flex items-center justify-center gap-4 pt-3 border-t border-black/5">
-          <div className="flex items-center gap-1.5">
-            <div className="w-2 h-2 rounded-full bg-cyan-500" />
-            <span className="text-xs text-black/60">{productionAgents} prod</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <div className="w-2 h-2 rounded-full bg-purple-500" />
-            <span className="text-xs text-black/60">{testingAgents} test</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OverviewHeroChart;