new

components/dashboard/overview-metrics.tsx

@@ -2,7 +2,8 @@
 
 import { useMetrics } from "@/hooks/useMetrics";
 import { MetricCard } from "@/components/ui/metric-card";
-import { Users, UserCheck, Shield, Coins, MessageSquare, FileText } from "lucide-react";
+import { Users, UserCheck, Shield, Coins, MessageSquare, FileText, Euro } from "lucide-react";
+import { convertCreditsToEuros } from "@/lib/utils/currency";
 
 export function OverviewMetrics() {
   const { metrics, loading, error } = useMetrics();
@@ -25,6 +26,9 @@ export function OverviewMetrics() {
     );
   }
 
+  // Conversion des crédits en euros
+  const creditsInEuros = convertCreditsToEuros(metrics.totalCredits);
+
   return (
     <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
       <MetricCard
@@ -42,11 +46,27 @@ export function OverviewMetrics() {
         value={metrics.totalAdmins}
         icon={Shield}
       />
-      <MetricCard
-        title="Crédits totaux"
-        value={metrics.totalCredits}
-        icon={Coins}
-      />
+      <div className="bg-white rounded-lg border p-6">
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-sm font-medium text-gray-600">Crédits totaux</h3>
+          <div className="flex items-center gap-1">
+            <Coins className="h-4 w-4 text-gray-400" />
+            <Euro className="h-4 w-4 text-green-600" />
+          </div>
+        </div>
+        <div className="text-2xl font-bold mb-1">
+          {metrics.totalCredits.toLocaleString()}
+        </div>
+        <div className="text-sm text-gray-500 mb-2">crédits disponibles</div>
+        <div className="p-2 bg-green-50 rounded border border-green-200">
+          <div className="text-sm font-semibold text-green-800">
+            {creditsInEuros.formatted.eur}
+          </div>
+          <div className="text-xs text-green-600">
+            {creditsInEuros.formatted.usd} USD
+          </div>
+        </div>
+      </div>
       <MetricCard
         title="Conversations actives"
         value={metrics.activeConversations}