first commit

components/dashboard/overview-metrics.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useMetrics } from "@/hooks/useMetrics";
+import { MetricCard } from "@/components/ui/metric-card";
+import { Users, UserCheck, Shield, Coins, MessageSquare, FileText } from "lucide-react";
+
+export function OverviewMetrics() {
+  const { metrics, loading, error } = useMetrics();
+
+  if (loading) {
+    return (
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-32 bg-muted animate-pulse rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error || !metrics) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        Erreur lors du chargement des métriques
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <MetricCard
+        title="Utilisateurs totaux"
+        value={metrics.totalUsers}
+        icon={Users}
+      />
+      <MetricCard
+        title="Utilisateurs actifs"
+        value={metrics.activeUsers}
+        icon={UserCheck}
+      />
+      <MetricCard
+        title="Administrateurs"
+        value={metrics.totalAdmins}
+        icon={Shield}
+      />
+      <MetricCard
+        title="Crédits totaux"
+        value={metrics.totalCredits}
+        icon={Coins}
+      />
+      <MetricCard
+        title="Conversations actives"
+        value={metrics.activeConversations}
+        icon={MessageSquare}
+      />
+      <MetricCard
+        title="Messages totaux"
+        value={metrics.totalMessages}
+        icon={FileText}
+      />
+    </div>
+  );
+}