Update app/admin/client/[id]/page.tsx

app/admin/client/[id]/page.tsx

@@ -1,130 +1,364 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { ArrowLeft, Clock, Activity, Zap, Sparkles, SearchCode, Globe, Layers, FileText, ExternalLink } from 'lucide-react'
-import Link from 'next/link'
-import { useParams, useRouter } from 'next/navigation'
-import { useAuth } from '@/lib/auth'
-
-export default function ClientDetailPage() {
-  const params = useParams()
-  const id = params?.id
-  const router = useRouter()
-  const { profile } = useAuth()
-  const [data, setData] = useState<any>(null)
-  const [loading, setLoading] = useState(true)
-  const [activeTab, setActiveTab] = useState<'content' | 'veille' | 'sources'>('content')
-
-  useEffect(() => {
-    if (!profile) return
-    if (profile.role !== 'admin') { router.push('/'); return; }
-    const fetchData = async () => {
-      try {
-        const res = await fetch(`/api/admin/client/${id}`)
-        const json = await res.json()
-        setData(json)
-      } catch (err) { console.error(err) } finally { setLoading(false) }
-    }
-    if (id) fetchData()
-  }, [id, profile, router])
-
-  if (loading) return <div className="min-h-screen bg-black flex items-center justify-center font-black italic">CHARGEMENT...</div>
-  const avgSeo = data?.jobs?.length > 0 ? Math.round(data.jobs.reduce((a:number,j:any)=>a+(j.seo_score||0),0)/data.jobs.length) : 0
-
-  return (
-    <div className="min-h-screen bg-[#050505] text-white p-6 font-sans">
-      <div className="max-w-[1400px] mx-auto">
-        <Link href="/admin/dashboard" className="flex items-center gap-2 text-white/20 hover:text-white mb-6 transition-colors uppercase font-black text-[9px] tracking-[0.2em]">
-          <ArrowLeft size={14} /> Retour Dashboard
-        </Link>
-
-        <div className="flex items-center justify-between mb-8">
-          <h1 className="text-3xl font-black uppercase italic tracking-tighter text-white/90">{data.client.name}</h1>
-          <div className="px-3 py-1 bg-white/5 border border-white/10 rounded-lg text-[9px] font-black uppercase tracking-widest text-white/30 truncate max-w-[200px]">{id}</div>
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { 
+    ArrowLeft, 
+    Globe, 
+    Calendar, 
+    BarChart3, 
+    FileText, 
+    Search, 
+    Zap, 
+    Activity,
+    ExternalLink,
+    Clock,
+    CheckCircle2,
+    XCircle,
+    Loader2,
+    LayoutDashboard,
+    Database,
+    Cpu,
+    ShieldCheck,
+    Key,
+    TrendingUp,
+    Briefcase
+} from 'lucide-react';
+
+interface ClientDetail {
+    id: string;
+    name: string;
+    description?: string;
+    plan_type: string;
+    siteCount: number;
+    sources: any[];
+    jobs: any[];
+    scans: any[];
+    quotas: {
+        today: QuotaStats;
+        week: QuotaStats;
+        month: QuotaStats;
+        year: QuotaStats;
+        currentKey: string;
+    };
+}
+
+interface QuotaStats {
+    openai: number;
+    serper: number;
+    firecrawl: number;
+    cost: number;
+}
+
+export default function ClientPage() {
+    const params = useParams();
+    const router = useRouter();
+    const [client, setClient] = useState<ClientDetail | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [activeTab, setActiveTab] = useState('content');
+
+    useEffect(() => {
+        fetchClientDetail();
+    }, [params.id]);
+
+    const fetchClientDetail = async () => {
+        try {
+            const res = await fetch(`/api/admin/client/${params.id}`);
+            const data = await res.json();
+            if (data.client) {
+                setClient(data.client);
+            }
+        } catch (err) {
+            console.error("Erreur fetch client:", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (loading) return (
+        <div className="flex-1 flex items-center justify-center min-h-screen bg-[var(--bg-main)]">
+            <Loader2 className="animate-spin theme-accent" size={32} />
         </div>
-        
-        <div className="grid grid-cols-4 gap-4 mb-8">
-          <StatC title="Optimisations" value={data.jobs.filter((j:any)=>j.mode==='OPTIMIZATION').length} color="cyan" />
-          <StatC title="Briefs Stratégiques" value={data.jobs.filter((j:any)=>j.is_brief).length} color="amber" />
-          <StatC title="Sources Veille" value={data.sites.length} color="indigo" />
-          <StatC title="Moyenne SEO" value={`${avgSeo}%`} color="emerald" />
+    );
+
+    if (!client) return <div>Client non trouvé</div>;
+
+    return (
+        <div className="flex-1 flex flex-col min-h-screen bg-[var(--bg-main)] font-sans">
+            {/* Header / Navigation */}
+            <div className="w-full border-b border-[var(--border-subtle)] bg-[var(--bg-card)]/30 backdrop-blur-md sticky top-0 z-10">
+                <div className="max-w-[1400px] mx-auto px-6 py-4 flex items-center justify-between">
+                    <div className="flex items-center gap-6">
+                        <button 
+                            onClick={() => router.push('/admin/dashboard')}
+                            className="p-2 hover:bg-white/5 rounded-xl transition-all border border-transparent hover:border-white/10 group"
+                        >
+                            <ArrowLeft size={20} className="theme-metadata group-hover:theme-title" />
+                        </button>
+                        <div>
+                            <h1 className="text-2xl font-black theme-title tracking-tighter italic uppercase">{client.name}</h1>
+                            <div className="flex items-center gap-2 mt-1">
+                                <span className="text-[10px] theme-metadata font-bold opacity-60 uppercase tracking-widest leading-none">{client.id}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="w-full max-w-[1400px] mx-auto p-6 space-y-8">
+                {/* Stats Summary Cards */}
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+                    <SummaryCard title="Optimisations" value={client.jobs.filter(j => j.mode === 'OPTIMIZATION').length} icon={<Activity size={18} />} color="text-sky-400" />
+                    <SummaryCard title="Briefs Stratégiques" value={client.jobs.filter(j => j.isBrief).length} icon={<BarChart3 size={18} />} color="text-amber-400" />
+                    <SummaryCard title="Sources Veille" value={client.siteCount} icon={<Globe size={18} />} color="text-indigo-400" />
+                    <SummaryCard title="Moyenne SEO" value="54%" icon={<TrendingUp size={18} />} color="text-emerald-400" />
+                </div>
+
+                {/* Main Content Area */}
+                <div className="theme-card border border-[var(--border-subtle)] rounded-3xl overflow-hidden shadow-2xl">
+                    {/* Tabs */}
+                    <div className="flex border-b border-[var(--border-subtle)] bg-[var(--bg-card)]/50 p-2 gap-2">
+                        <TabButton id="content" label="Travaux de Contenu" icon={<FileText size={16} />} active={activeTab} onClick={setActiveTab} />
+                        <TabButton id="scans" label="Événements de Veille" icon={<Clock size={16} />} active={activeTab} onClick={setActiveTab} />
+                        <TabButton id="sources" label="Sources & Flux RSS" icon={<Database size={16} />} active={activeTab} onClick={setActiveTab} />
+                        <TabButton id="quotas" label="Quotas API" icon={<Zap size={16} />} active={activeTab} onClick={setActiveTab} />
+                    </div>
+
+                    <div className="p-6">
+                        {activeTab === 'content' && (
+                            <table className="w-full">
+                                <thead>
+                                    <tr className="border-b border-[var(--border-subtle)]">
+                                        <th className="text-left py-4 px-4 text-[10px] font-black theme-metadata uppercase tracking-widest">Date / Heure</th>
+                                        <th className="text-left py-4 px-4 text-[10px] font-black theme-metadata uppercase tracking-widest">Type / Libellé</th>
+                                        <th className="text-right py-4 px-4 text-[10px] font-black theme-metadata uppercase tracking-widest">État</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-[var(--border-subtle)]/30">
+                                    {client.jobs.map((job) => (
+                                        <tr key={job.id} className="hover:bg-white/[0.02] transition-colors group">
+                                            <td className="py-4 px-4 text-xs font-mono theme-metadata">
+                                                {new Date(job.created_at).toLocaleString('fr-FR')}
+                                            </td>
+                                            <td className="py-4 px-4">
+                                                <div className="flex items-center gap-3">
+                                                    <span className="font-bold theme-title uppercase tracking-tighter text-xs group-hover:theme-accent transition-colors">
+                                                        {job.target_keyword}
+                                                    </span>
+                                                    {job.isBrief && (
+                                                        <span className="px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-500 border border-amber-500/20 text-[8px] font-black uppercase">Brief</span>
+                                                    )}
+                                                </div>
+                                            </td>
+                                            <td className="py-4 px-4 text-right">
+                                                <span className={`px-2 py-1 rounded-lg text-[9px] font-black uppercase tracking-widest border ${
+                                                    job.mode === 'CREATION' ? 'bg-purple-500/10 text-purple-400 border-purple-500/20' : 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
+                                                }`}>
+                                                    {job.mode}
+                                                </span>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        )}
+
+                        {activeTab === 'scans' && (
+                            <table className="w-full">
+                                <thead>
+                                    <tr className="border-b border-[var(--border-subtle)]">
+                                        <th className="text-left py-4 px-4 text-[10px] font-black theme-metadata uppercase tracking-widest">Horodateur</th>
+                                        <th className="text-left py-4 px-4 text-[10px] font-black theme-metadata uppercase tracking-widest">Type de Scan</th>
+                                        <th className="text-right py-4 px-4 text-[10px] font-black theme-metadata uppercase tracking-widest">Statut</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-[var(--border-subtle)]/30">
+                                    {client.scans.map((scan) => (
+                                        <tr key={scan.id} className="hover:bg-white/[0.02] transition-colors group">
+                                            <td className="py-4 px-4 text-xs font-mono theme-metadata">
+                                                {new Date(scan.created_at).toLocaleString('fr-FR')}
+                                            </td>
+                                            <td className="py-4 px-4">
+                                                <span className="font-bold theme-title uppercase tracking-tighter text-xs">
+                                                    {scan.label}
+                                                </span>
+                                            </td>
+                                            <td className="py-4 px-4 text-right">
+                                                <div className="flex items-center justify-end gap-2">
+                                                    <span className={`text-[9px] font-black uppercase tracking-widest ${
+                                                        scan.status === 'completed' ? 'text-emerald-400' : scan.status === 'error' ? 'text-red-400' : 'text-amber-400'
+                                                    }`}>
+                                                        {scan.status}
+                                                    </span>
+                                                    {scan.status === 'completed' ? <CheckCircle2 size={12} className="text-emerald-500" /> : <Clock size={12} className="text-amber-500" />}
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        )}
+
+                        {activeTab === 'sources' && (
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                {client.sources.map((source) => (
+                                    <div key={source.id} className="p-5 theme-card border border-[var(--border-subtle)] rounded-2xl bg-white/[0.02] hover:bg-white/[0.04] transition-all group">
+                                        <div className="flex items-start justify-between">
+                                            <div className="flex gap-4">
+                                                <div className="p-3 rounded-xl bg-indigo-500/10 border border-indigo-500/20 group-hover:scale-110 transition-transform">
+                                                    <Globe size={20} className="text-indigo-400" />
+                                                </div>
+                                                <div>
+                                                    <h4 className="font-bold theme-title uppercase tracking-tighter italic">{source.name}</h4>
+                                                    <p className="text-[10px] theme-metadata font-mono opacity-60 truncate max-w-[200px] mt-1">{source.url || 'Aucune URL'}</p>
+                                                    <div className="flex items-center gap-2 mt-3">
+                                                        <span className="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-[8px] font-black theme-metadata uppercase tracking-widest">
+                                                            {source.pole_semantic || 'Non classé'}
+                                                        </span>
+                                                        <span className="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[8px] font-black uppercase tracking-widest">Actif</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            {source.url && (
+                                                <a href={source.url} target="_blank" rel="noopener noreferrer" className="p-2 text-white/20 hover:text-white transition-colors">
+                                                    <ExternalLink size={14} />
+                                                </a>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+
+                        {activeTab === 'quotas' && (
+                            <div className="space-y-8 animate-in fade-in slide-in-from-bottom-2 duration-500">
+                                {/* Key Source Info */}
+                                <div className="flex items-center justify-between p-6 rounded-3xl theme-card-sec border border-indigo-500/20 bg-indigo-500/[0.02]">
+                                    <div className="flex items-center gap-4">
+                                        <div className="p-3 rounded-2xl bg-indigo-500/20 text-indigo-400">
+                                            <Key size={24} />
+                                        </div>
+                                        <div>
+                                            <p className="text-[10px] font-black theme-metadata uppercase tracking-widest">Source des clés API</p>
+                                            <h3 className="text-xl font-black theme-title italic tracking-tighter uppercase">{client.quotas.currentKey}</h3>
+                                        </div>
+                                    </div>
+                                    <div className="text-right">
+                                        <div className="px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[10px] font-black text-emerald-400 uppercase tracking-widest flex items-center gap-2">
+                                            <ShieldCheck size={14} /> Connexion Sécurisée
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Period Breakdown */}
+                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                                    <QuotaPeriodCard label="Aujourd'hui" stats={client.quotas.today} />
+                                    <QuotaPeriodCard label="Cette Semaine" stats={client.quotas.week} />
+                                    <QuotaPeriodCard label="Ce Mois" stats={client.quotas.month} icon={<Calendar size={18} />} highlight />
+                                    <QuotaPeriodCard label="Cette Année" stats={client.quotas.year} />
+                                </div>
+
+                                {/* Detailed Visualisation */}
+                                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                                    <div className="lg:col-span-2 p-8 theme-card border border-[var(--border-subtle)] rounded-3xl">
+                                        <h4 className="text-[10px] font-black theme-metadata uppercase tracking-widest mb-8 flex items-center gap-2">
+                                            <Activity size={14} className="theme-accent" /> Détail Consommation Mensuelle
+                                        </h4>
+                                        <div className="space-y-8">
+                                            <ProgressBarItem label="OpenAI (Tokens)" value={client.quotas.month.openai} max={500000} color="bg-purple-500" unit="tokens" />
+                                            <ProgressBarItem label="Serper (Recherches)" value={client.quotas.month.serper} max={500} color="bg-sky-500" unit="requêtes" />
+                                            <ProgressBarItem label="Firecrawl (Crédits)" value={client.quotas.month.firecrawl} max={200} color="bg-emerald-500" unit="crédits" />
+                                        </div>
+                                    </div>
+                                    
+                                    <div className="flex flex-col gap-6">
+                                        <div className="p-6 theme-card border border-[var(--border-subtle)] rounded-3xl flex-1 flex flex-col justify-center">
+                                            <div className="text-center">
+                                                <p className="text-[10px] font-black theme-metadata uppercase tracking-widest mb-2">Coût Infrastructure Est. (Mois)</p>
+                                                <div className="text-5xl font-black theme-title italic tracking-tighter">
+                                                    ${client.quotas.month.cost.toFixed(2)}
+                                                </div>
+                                                <p className="text-[9px] font-bold text-emerald-400/60 uppercase tracking-widest mt-4">Paiement stable</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
         </div>
+    );
+}
 
-        <div className="flex gap-6 border-b border-white/5 mb-6 font-black uppercase text-[9px] tracking-[0.2em]">
-          <button onClick={()=>setActiveTab('content')} className={`pb-3 px-1 transition-all ${activeTab==='content'?'text-indigo-400 border-b-2 border-indigo-400':'opacity-30 hover:opacity-100'}`}>Travaux de Contenu</button>
-          <button onClick={()=>setActiveTab('veille')} className={`pb-3 px-1 transition-all ${activeTab==='veille'?'text-rose-400 border-b-2 border-rose-400':'opacity-30 hover:opacity-100'}`}>Événements de Veille</button>
-          <button onClick={()=>setActiveTab('sources')} className={`pb-3 px-1 transition-all ${activeTab==='sources'?'text-amber-400 border-b-2 border-amber-400':'opacity-30 hover:opacity-100'}`}>Sources & Flux RSS</button>
+function SummaryCard({ title, value, icon, color }: { title: string, value: any, icon: any, color: string }) {
+    return (
+        <div className="p-6 theme-card border border-[var(--border-subtle)] rounded-3xl hover:border-white/20 transition-all group">
+            <div className={`p-2 w-fit rounded-lg bg-white/5 border border-white/10 mb-4 ${color} group-hover:scale-110 transition-transform`}>
+                {icon}
+            </div>
+            <h3 className="text-[10px] font-black theme-metadata uppercase tracking-widest mb-1">{title}</h3>
+            <div className="text-4xl font-black theme-title italic tracking-tighter leading-none">{value}</div>
         </div>
+    );
+}
+
+function TabButton({ id, label, icon, active, onClick }: { id: string, label: string, icon: any, active: string, onClick: any }) {
+    const isActive = active === id;
+    return (
+        <button 
+            onClick={() => onClick(id)}
+            className={`flex items-center gap-2 px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all ${
+                isActive ? 'bg-[var(--accent)] text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent-glow)]/20' : 'theme-metadata hover:bg-white/5 hover:theme-title'
+            }`}
+        >
+            {icon}
+            {label}
+        </button>
+    );
+}
 
-        {activeTab === 'sources' ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-            {data.sites.length > 0 ? data.sites.map((site:any) => (
-              <div key={site.id} className="p-4 bg-white/[0.02] border border-white/5 rounded-2xl flex items-center justify-between group">
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 rounded-lg bg-amber-500/10 text-amber-500 flex items-center justify-center"><Globe size={16}/></div>
-                  <div>
-                    <div className="text-[10px] font-black uppercase tracking-tight text-white/90">{site.name}</div>
-                    <div className="text-[8px] text-white/20 font-bold truncate max-w-[200px]">{site.url}</div>
-                  </div>
+function QuotaPeriodCard({ label, stats, icon = <Clock size={18} />, highlight = false }: { label: string, stats: QuotaStats, icon?: any, highlight?: boolean }) {
+    return (
+        <div className={`p-5 rounded-3xl border transition-all ${
+            highlight ? 'bg-white/[0.04] border-white/20 scale-105 shadow-xl' : 'theme-card border-[var(--border-subtle)]'
+        }`}>
+            <div className="flex items-center justify-between mb-4">
+                <span className="text-[10px] font-black theme-metadata uppercase tracking-widest">{label}</span>
+                <div className="theme-metadata opacity-40">{icon}</div>
+            </div>
+            <div className="space-y-4">
+                <div>
+                    <div className="text-[8px] font-black theme-metadata uppercase tracking-widest mb-1 opacity-60">OpenAI</div>
+                    <div className="text-xl font-black theme-title tracking-tighter italic">{stats.openai.toLocaleString()}</div>
+                </div>
+                <div>
+                    <div className="text-[8px] font-black theme-metadata uppercase tracking-widest mb-1 opacity-60">Scrap / Search</div>
+                    <div className="text-xl font-black theme-title tracking-tighter italic">{stats.serper + stats.firecrawl}</div>
                 </div>
-                <Link href={site.url} target="_blank" className="p-2 opacity-0 group-hover:opacity-100 transition-opacity text-white/20 hover:text-white"><ExternalLink size={14}/></Link>
-              </div>
-            )) : <div className="col-span-full py-20 text-center text-white/10 font-black uppercase text-xs">Aucune source configurée</div>}
-          </div>
-        ) : (
-          <div className="bg-[#0a0a0a] border border-white/5 rounded-[1.5rem] overflow-hidden">
-            <table className="w-full text-left">
-              <thead>
-                <tr className="bg-white/5 text-[9px] uppercase font-black text-white/30 tracking-[0.15em]">
-                  <th className="px-6 py-3">Date / Heure</th>
-                  <th className="px-6 py-3">Type / Libellé</th>
-                  <th className="px-6 py-3 text-center">État</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-white/5">
-                {activeTab === 'content' ? data.jobs.map((j:any)=>(
-                  <tr key={j.id} className="hover:bg-white/[0.01] transition-colors">
-                    <td className="px-6 py-3 text-[10px] font-black text-white/40">{new Date(j.created_at).toLocaleString('fr-FR', { hour12: false })}</td>
-                    <td className="px-6 py-3 text-xs font-black uppercase tracking-tight flex items-center gap-3">
-                      {j.target_keyword}
-                      {j.is_brief && <span className="px-2 py-0.5 rounded bg-amber-500/10 text-amber-500 text-[8px] border border-amber-500/20">BRIEF</span>}
-                    </td>
-                    <td className="px-6 py-3 text-center">
-                      <span className={`text-[9px] font-black uppercase px-2 py-0.5 rounded ${j.mode === 'CREATION' ? 'bg-purple-500/10 text-purple-400' : 'bg-cyan-500/10 text-cyan-400'}`}>{j.mode}</span>
-                    </td>
-                  </tr>
-                )) : data.scans.map((s:any)=>(
-                  <tr key={s.id} className="hover:bg-white/[0.01] transition-colors">
-                    <td className="px-6 py-3 text-[10px] font-black text-white/40">{new Date(s.created_at).toLocaleString('fr-FR', { hour12: false })}</td>
-                    <td className="px-6 py-3 text-xs font-black uppercase text-white/70 italic flex items-center gap-2">
-                        <Activity size={10} className="text-white/20" />
-                        {s.type_label} 
-                    </td>
-                    <td className="px-6 py-3 text-center">
-                        <span className={`text-[9px] font-black uppercase ${s.status === 'done' || s.status === 'completed' ? 'text-emerald-500' : 'text-amber-500'}`}>{s.status}</span>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-    </div>
-  )
+                <div className="pt-2 border-t border-white/5 flex items-center justify-between">
+                    <span className="text-[9px] font-black theme-metadata uppercase">Dépense</span>
+                    <span className="text-xs font-black theme-title">${stats.cost.toFixed(3)}</span>
+                </div>
+            </div>
+        </div>
+    );
 }
 
-function StatC({title, value, color}:any) {
-  const colors:any = { 
-      cyan: 'text-cyan-400 bg-cyan-400/5', 
-      amber: 'text-amber-500 bg-amber-500/5', 
-      indigo: 'text-indigo-400 bg-indigo-400/5',
-      emerald: 'text-emerald-400 bg-emerald-400/5'
-  }
-  return (
-    <div className={`border border-white/5 p-4 rounded-2xl hover:bg-white/[0.01] transition-all ${colors[color]}`}>
-      <div className="text-[8px] uppercase font-black opacity-40 mb-1 tracking-widest">{title}</div>
-      <div className="text-xl font-black italic">{value}</div>
-    </div>
-  )
+function ProgressBarItem({ label, value, max, color, unit }: { label: string, value: number, max: number, color: string, unit: string }) {
+    const pc = Math.min((value / max) * 100, 100);
+    return (
+        <div className="space-y-3">
+            <div className="flex justify-between items-end">
+                <span className="text-xs font-black theme-title uppercase tracking-wider">{label}</span>
+                <span className="text-[10px] font-black theme-metadata uppercase tracking-widest">
+                    <span className="theme-title">{value.toLocaleString()}</span> / {max.toLocaleString()} {unit}
+                </span>
+            </div>
+            <div className="h-3 w-full bg-white/5 rounded-full overflow-hidden border border-white/5">
+                <div className={`h-full ${color} rounded-full transition-all duration-1000 ease-out shadow-lg`} style={{ width: `${pc}%` }} />
+            </div>
+        </div>
+    );
 }