clean

components/dashboard/overview-metrics.tsx

@@ -2,7 +2,7 @@
 
 import { useMetrics } from "@/hooks/useMetrics";
 import { MetricCard } from "@/components/ui/metric-card";
-import { Users, UserCheck, Shield, Coins, MessageSquare, FileText, Euro } from "lucide-react";
+import { Users, UserCheck, Shield, Coins, MessageSquare, FileText, Euro, Activity } from "lucide-react";
 import { convertCreditsToEuros } from "@/lib/utils/currency";
 
 export function OverviewMetrics() {
@@ -10,8 +10,8 @@ export function OverviewMetrics() {
 
   if (loading) {
     return (
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {Array.from({ length: 6 }).map((_, i) => (
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 7 }).map((_, i) => (
           <div key={i} className="h-32 bg-muted animate-pulse rounded-lg" />
         ))}
       </div>
@@ -30,7 +30,7 @@ export function OverviewMetrics() {
   const creditsInEuros = convertCreditsToEuros(metrics.totalCredits);
 
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
       <MetricCard
         title="Utilisateurs totaux"
         value={metrics.totalUsers}
@@ -46,6 +46,15 @@ export function OverviewMetrics() {
         value={metrics.totalAdmins}
         icon={Shield}
       />
+      
+      {/* Nouvelle carte pour les tokens consommés */}
+      <MetricCard
+        title="Tokens consommés"
+        value={metrics.totalTokensConsumed?.toLocaleString() || "0"}
+        icon={Activity}
+        description={`${Math.round((metrics.totalTokensConsumed || 0) / (metrics.totalUsers || 1))} par utilisateur`}
+      />
+      
       <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>