clean

app/conversations/page.tsx

@@ -6,10 +6,10 @@ export default function ConversationsPage() {
       <div>
         <h1 className="text-3xl font-bold tracking-tight">Conversations</h1>
         <p className="text-muted-foreground">
-          Gestion des conversations Cercle GPTTT
+          Gestion des conversations Cercle GPTT
         </p>
       </div>
-      
+
       <ConversationsTable />
     </div>
   );

app/page.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { OverviewMetrics } from "@/components/dashboard/overview-metrics";
 import { RealTimeStats } from "@/components/dashboard/real-time-stats";
 import { RealUserActivityChart } from "@/components/dashboard/charts/real-user-activity-chart";
+import { DashboardUsersList } from "@/components/dashboard/dashboard-users-list";
 import {
   Users,
   MessageSquare,
@@ -28,7 +29,7 @@ export default function Dashboard() {
         </p>
       </div>
 
-      {/* Métriques principales */}
+      {/* Métriques principales - maintenant avec tokens consommés */}
       <Suspense
         fallback={<div className="h-32 bg-muted animate-pulse rounded-lg" />}
       >
@@ -49,21 +50,29 @@ export default function Dashboard() {
         </Suspense>
       </div>
 
-      {/* Grille pour activité utilisateurs et actions */}
-      <div className="grid gap-6 md:grid-cols-3">
-        {/* Activité des utilisateurs avec vraies données */}
-        <div className="md:col-span-1">
-          <Suspense
-            fallback={
-              <div className="h-64 bg-muted animate-pulse rounded-lg" />
-            }
-          >
-            <RealUserActivityChart />
-          </Suspense>
-        </div>
+      {/* Grille pour activité utilisateurs et top utilisateurs */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Activité des utilisateurs */}
+        <Suspense
+          fallback={
+            <div className="h-64 bg-muted animate-pulse rounded-lg" />
+          }
+        >
+          <RealUserActivityChart />
+        </Suspense>
 
-        {/* Actions rapides épurées */}
-        <div className="md:col-span-2 grid gap-4 md:grid-cols-2">
+        {/* Top 5 utilisateurs - nouveau composant */}
+        <Suspense
+          fallback={
+            <div className="h-64 bg-muted animate-pulse rounded-lg" />
+          }
+        >
+          <DashboardUsersList />
+        </Suspense>
+      </div>
+
+      {/* Actions rapides */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
           <Card className="hover:shadow-md transition-shadow border-l-4 border-l-blue-500">
             <CardHeader className="pb-3">
               <CardTitle className="text-base flex items-center">
@@ -139,7 +148,6 @@ export default function Dashboard() {
               </Link>
             </CardContent>
           </Card>
-        </div>
       </div>
     </div>
   );

components/dashboard/charts/model-distribution-chart.tsx

@@ -9,7 +9,6 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
-  Cell,
 } from "recharts";
 
 interface ModelDistributionChartProps {
@@ -28,20 +27,27 @@ interface ModelDistributionChartProps {
   totalTokens?: number;
 }
 
-interface TooltipPayload {
+interface ModelData {
+  name: string;
   value: number;
-  payload: {
-    name: string;
-    value: number;
-    color?: string;
-    models?: Array<{
-      name: string;
-      value: number;
-    }>;
-  };
 }
 
-// Couleurs par fournisseur selon l'image
+interface StackedDataEntry {
+  provider: string;
+  total: number;
+  models: ModelData[];
+  baseColor: string;
+  modelColors: string[];
+  [key: string]: string | number | ModelData[] | string[];
+}
+
+interface ModelInfo {
+  color: string;
+  name: string;
+  provider: string;
+}
+
+// Couleurs par fournisseur (couleurs de base)
 const providerColors: { [key: string]: string } = {
   Anthropic: "#7C3AED", // Violet vif
   OpenAI: "#059669", // Vert turquoise vif
@@ -51,8 +57,25 @@ const providerColors: { [key: string]: string } = {
   Cohere: "#0891B2", // Cyan vif
 };
 
-// Fonction pour regrouper les modèles par fournisseur
-const groupByProvider = (modelData: Array<{ name: string; value: number }>) => {
+// Fonction pour générer des variations de couleur pour les modèles d'un même provider
+const generateModelColors = (baseColor: string, modelCount: number) => {
+  const colors = [];
+  for (let i = 0; i < modelCount; i++) {
+    // Créer des variations en ajustant la luminosité
+    const opacity = 1 - i * 0.15; // De 1.0 à 0.4 environ
+    colors.push(
+      `${baseColor}${Math.round(opacity * 255)
+        .toString(16)
+        .padStart(2, "0")}`
+    );
+  }
+  return colors;
+};
+
+// Fonction pour regrouper les modèles par fournisseur et préparer les données pour le graphique empilé
+const prepareStackedData = (
+  modelData: Array<{ name: string; value: number }>
+) => {
   const providerMap: {
     [key: string]: {
       value: number;
@@ -101,40 +124,89 @@ const groupByProvider = (modelData: Array<{ name: string; value: number }>) => {
     providerMap[provider].models.push(model);
   });
 
-  return Object.entries(providerMap).map(([name, data]) => ({
-    name,
-    value: data.value,
-    models: data.models,
-    color: providerColors[name] || "#6B7280",
-  }));
+  // Créer les données pour le graphique empilé
+  const stackedData: StackedDataEntry[] = Object.entries(providerMap).map(
+    ([providerName, data]) => {
+      const baseColor = providerColors[providerName] || "#6B7280";
+      const modelColors = generateModelColors(baseColor, data.models.length);
+
+      // Créer un objet avec le provider comme clé et chaque modèle comme propriété
+      const stackedEntry: StackedDataEntry = {
+        provider: providerName,
+        total: data.value,
+        models: data.models,
+        baseColor,
+        modelColors,
+      };
+
+      // Ajouter chaque modèle comme propriété séparée pour le stacking
+      data.models.forEach((model, index) => {
+        const modelKey = `${providerName}_${model.name}`;
+        stackedEntry[modelKey] = model.value;
+        stackedEntry[`${modelKey}_color`] = modelColors[index];
+        stackedEntry[`${modelKey}_name`] = model.name;
+      });
+
+      return stackedEntry;
+    }
+  );
+
+  // Créer la liste de tous les modèles uniques pour les barres
+  const allModelKeys: string[] = [];
+  const modelInfo: { [key: string]: ModelInfo } = {};
+
+  stackedData.forEach((entry) => {
+    entry.models.forEach((model, index) => {
+      const modelKey = `${entry.provider}_${model.name}`;
+      allModelKeys.push(modelKey);
+      modelInfo[modelKey] = {
+        color: entry.modelColors[index],
+        name: model.name,
+        provider: entry.provider,
+      };
+    });
+  });
+
+  return { stackedData, allModelKeys, modelInfo };
 };
 
-const CustomTooltip = ({
+interface CustomStackedTooltipProps {
+  active?: boolean;
+  payload?: Array<{
+    payload: StackedDataEntry;
+  }>;
+  label?: string;
+}
+
+const CustomStackedTooltip = ({
   active,
   payload,
-}: {
-  active?: boolean;
-  payload?: TooltipPayload[];
-}) => {
+  label,
+}: CustomStackedTooltipProps) => {
   if (active && payload && payload.length) {
-    const data = payload[0].payload;
+    const providerData = payload[0].payload;
+    const totalTokens = providerData.total;
+
     return (
       <div className="bg-white p-3 border rounded-lg shadow-lg">
-        <p className="font-semibold">{data.name}</p>
-        <p className="text-blue-600">Tokens: {data.value.toLocaleString()}</p>
-        {data.models && data.models.length > 0 && (
+        <p className="font-semibold">{label}</p>
+        <p className="text-blue-600 font-medium">
+          Total: {totalTokens.toLocaleString()} tokens
+        </p>
+        {providerData.models && (
           <div className="mt-2 space-y-1">
             <p className="text-sm font-medium text-gray-600">Modèles:</p>
-            {data.models.slice(0, 5).map((model, index) => (
-              <p key={index} className="text-xs text-gray-500">
-                • {model.name}: {model.value.toLocaleString()}
-              </p>
+            {providerData.models.map((model, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <div
+                  className="w-3 h-3 rounded-full"
+                  style={{ backgroundColor: providerData.modelColors[index] }}
+                />
+                <p className="text-xs text-gray-700">
+                  {model.name}: {model.value.toLocaleString()} tokens
+                </p>
+              </div>
             ))}
-            {data.models.length > 5 && (
-              <p className="text-xs text-gray-400">
-                ... et {data.models.length - 5} autres
-              </p>
-            )}
           </div>
         )}
       </div>
@@ -151,17 +223,11 @@ export function ModelDistributionChart({
 }: ModelDistributionChartProps) {
   // Si les données sont déjà groupées par fournisseur, les utiliser directement
   // Sinon, les regrouper automatiquement
-  const groupedData = data[0]?.models ? data : groupByProvider(data);
-
-  // Créer une liste de tous les modèles avec leurs couleurs
-  const allModels = groupedData.flatMap(
-    (provider) =>
-      provider.models?.map((model) => ({
-        name: model.name,
-        color: provider.color,
-        value: model.value,
-      })) || []
-  );
+  const modelData = data[0]?.models
+    ? data.flatMap((d) => d.models || [])
+    : data;
+  const { stackedData, allModelKeys, modelInfo } =
+    prepareStackedData(modelData);
 
   return (
     <Card>
@@ -174,20 +240,20 @@ export function ModelDistributionChart({
         )}
       </CardHeader>
       <CardContent className="pt-0">
-        <ResponsiveContainer width="100%" height={200}>
+        <ResponsiveContainer width="100%" height={300}>
           <BarChart
-            data={groupedData}
-            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+            data={stackedData}
+            margin={{ top: 10, right: 10, left: 10, bottom: 60 }}
           >
             <CartesianGrid strokeDasharray="3 3" className="stroke-muted/20" />
             <XAxis
-              dataKey="name"
+              dataKey="provider"
               axisLine={false}
               tickLine={false}
               className="text-xs fill-muted-foreground"
               angle={-45}
               textAnchor="end"
-              height={60}
+              height={80}
               interval={0}
             />
             <YAxis
@@ -200,23 +266,29 @@ export function ModelDistributionChart({
                 return value.toString();
               }}
             />
-            <Tooltip content={<CustomTooltip />} />
-            <Bar dataKey="value" radius={[2, 2, 0, 0]}>
-              {groupedData.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={entry.color} />
-              ))}
-            </Bar>
+            <Tooltip content={<CustomStackedTooltip />} />
+
+            {/* Créer une barre empilée pour chaque modèle */}
+            {allModelKeys.map((modelKey) => (
+              <Bar
+                key={modelKey}
+                dataKey={modelKey}
+                stackId="models"
+                fill={modelInfo[modelKey].color}
+                radius={0}
+              />
+            ))}
           </BarChart>
         </ResponsiveContainer>
 
-        {/* Petites cartes légères pour chaque provider */}
+        {/* Légende des providers avec leurs couleurs de base */}
         <div className="mt-4 grid grid-cols-2 gap-3">
-          {groupedData.map((item, index) => (
+          {stackedData.map((item, index) => (
             <div
               key={index}
               className="p-3 rounded-lg border border-muted/20 bg-muted/5 hover:bg-muted/10 transition-colors"
               style={{
-                borderLeftColor: item.color,
+                borderLeftColor: item.baseColor,
                 borderLeftWidth: "3px",
                 borderLeftStyle: "solid",
               }}
@@ -224,19 +296,21 @@ export function ModelDistributionChart({
               <div className="flex items-center gap-2 mb-1">
                 <div
                   className="w-2 h-2 rounded-full"
-                  style={{ backgroundColor: item.color }}
+                  style={{ backgroundColor: item.baseColor }}
                 ></div>
                 <h3
                   className="text-sm font-medium"
-                  style={{ color: item.color }}
+                  style={{ color: item.baseColor }}
                 >
-                  {item.name}
+                  {item.provider}
                 </h3>
               </div>
               <p className="text-lg font-semibold text-foreground">
-                {item.value.toLocaleString()}
+                {item.total.toLocaleString()}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {item.models.length} modèle{item.models.length > 1 ? "s" : ""}
               </p>
-              <p className="text-xs text-muted-foreground">tokens</p>
             </div>
           ))}
         </div>
@@ -254,29 +328,37 @@ export function ModelDistributionChart({
           </div>
         )}
 
-        {/* Légende dynamique des modèles */}
-        {allModels.length > 0 && (
-          <div className="mt-4 pt-3 border-t border-muted/20">
-            <h4 className="text-sm font-medium text-muted-foreground mb-3 text-center">
-              Modèles utilisés
-            </h4>
-            <div className="flex flex-wrap justify-center gap-x-4 gap-y-2">
-              {allModels
-                .sort((a, b) => b.value - a.value) // Trier par usage décroissant
-                .map((model, index) => (
-                  <div key={index} className="flex items-center gap-2">
-                    <div
-                      className="w-3 h-3 rounded-full flex-shrink-0"
-                      style={{ backgroundColor: model.color }}
-                    ></div>
-                    <span className="text-xs text-muted-foreground">
-                      {model.name}
-                    </span>
-                  </div>
-                ))}
-            </div>
+        {/* Légende détaillée des modèles avec leurs couleurs spécifiques */}
+        <div className="mt-4 pt-3 border-t border-muted/20">
+          <h4 className="text-sm font-medium text-muted-foreground mb-3 text-center">
+            Modèles par provider
+          </h4>
+          <div className="space-y-3">
+            {stackedData.map((provider) => (
+              <div key={provider.provider} className="space-y-1">
+                <h5
+                  className="text-xs font-medium"
+                  style={{ color: provider.baseColor }}
+                >
+                  {provider.provider}
+                </h5>
+                <div className="flex flex-wrap gap-x-4 gap-y-1 ml-2">
+                  {provider.models.map((model, index) => (
+                    <div key={index} className="flex items-center gap-1">
+                      <div
+                        className="w-2 h-2 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: provider.modelColors[index] }}
+                      ></div>
+                      <span className="text-xs text-muted-foreground">
+                        {model.name} ({model.value.toLocaleString()})
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
           </div>
-        )}
+        </div>
       </CardContent>
     </Card>
   );

components/dashboard/dashboard-users-list.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Users } from "lucide-react";
+import Link from "next/link";
+import { useCollection } from "@/hooks/useCollection";
+import {
+  LibreChatUser,
+  LibreChatConversation,
+  LibreChatTransaction,
+  LibreChatBalance,
+} from "@/lib/types";
+
+interface DashboardUser {
+  userId: string;
+  userName: string;
+  conversations: number;
+  tokens: number;
+  credits: number;
+}
+
+// Fonction utilitaire pour valider et convertir les dates
+const isValidDate = (value: unknown): value is string | number | Date => {
+  if (!value) return false;
+  if (value instanceof Date) return !isNaN(value.getTime());
+  if (typeof value === 'string' || typeof value === 'number') {
+    const date = new Date(value);
+    return !isNaN(date.getTime());
+  }
+  return false;
+};
+
+export function DashboardUsersList() {
+  const [topUsers, setTopUsers] = useState<DashboardUser[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const { data: users, loading: usersLoading } = useCollection<LibreChatUser>('users');
+  const { data: conversations, loading: conversationsLoading } = useCollection<LibreChatConversation>('conversations');
+  const { data: transactions, loading: transactionsLoading } = useCollection<LibreChatTransaction>('transactions');
+  const { data: balances, loading: balancesLoading } = useCollection<LibreChatBalance>('balances');
+
+  const processUsers = useCallback(() => {
+    if (!users?.length || !conversations?.length || !transactions?.length || !balances?.length) {
+      return;
+    }
+
+    console.log("🔄 Processing users data...");
+    console.log("Users:", users.length);
+    console.log("Conversations:", conversations.length);
+    console.log("Transactions:", transactions.length);
+    console.log("Balances:", balances.length);
+
+    const processedUsers: DashboardUser[] = [];
+
+    users.forEach((user: LibreChatUser) => {
+      // Obtenir les conversations de l'utilisateur
+      const userConversations = conversations.filter(
+        (conv: LibreChatConversation) => conv.user === user._id
+      );
+
+      // Obtenir les transactions de l'utilisateur
+      const userTransactions = transactions.filter(
+        (trans: LibreChatTransaction) => trans.user === user._id
+      );
+
+      // Calculer les tokens consommés
+      const totalTokens = userTransactions.reduce(
+        (sum: number, trans: LibreChatTransaction) => sum + (trans.rawAmount || 0),
+        0
+      );
+
+      // Obtenir les balances de l'utilisateur
+      const userBalances = balances.filter(
+        (balance: LibreChatBalance) => balance.user === user._id
+      );
+
+      // Trier par date de mise à jour (plus récent en premier)
+      const sortedBalances = userBalances.sort((a, b) => {
+        const dateA = a.updatedAt || a.createdAt;
+        const dateB = b.updatedAt || b.createdAt;
+        
+        // Vérifier que les dates sont valides avant de les comparer
+        if (isValidDate(dateA) && isValidDate(dateB)) {
+          return new Date(dateB as string | number | Date).getTime() - new Date(dateA as string | number | Date).getTime();
+        }
+        
+        // Si seulement une date existe et est valide, la privilégier
+        if (isValidDate(dateA) && !isValidDate(dateB)) return -1;
+        if (!isValidDate(dateA) && isValidDate(dateB)) return 1;
+        
+        // Si aucune date n'existe ou n'est valide, garder l'ordre actuel
+        return 0;
+      });
+
+      // Prendre la balance la plus récente
+      const latestBalance = sortedBalances[0];
+      const credits = latestBalance ? latestBalance.tokenCredits || 0 : 0;
+
+      // Ajouter l'utilisateur seulement s'il a des données significatives
+      if (userConversations.length > 0 || totalTokens > 0 || credits > 0) {
+        processedUsers.push({
+          userId: user._id,
+          userName: user.name || user.username || user.email || 'Utilisateur inconnu',
+          conversations: userConversations.length,
+          tokens: totalTokens,
+          credits: credits,
+        });
+      }
+    });
+
+    // Trier par tokens consommés (décroissant) et prendre les 5 premiers
+    const sortedUsers = processedUsers
+      .sort((a, b) => b.tokens - a.tokens)
+      .slice(0, 5);
+
+    console.log("✅ Top 5 users processed:", sortedUsers);
+    setTopUsers(sortedUsers);
+    setIsLoading(false);
+  }, [users, conversations, transactions, balances]);
+
+  useEffect(() => {
+    const allDataLoaded = !usersLoading && !conversationsLoading && !transactionsLoading && !balancesLoading;
+    
+    if (allDataLoaded) {
+      processUsers();
+    } else {
+      setIsLoading(true);
+    }
+  }, [usersLoading, conversationsLoading, transactionsLoading, balancesLoading, processUsers]);
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            <Users className="h-5 w-5" />
+            Top 5 utilisateurs
+          </CardTitle>
+          <Button variant="outline" size="sm" disabled>
+            Chargement...
+          </Button>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center justify-between p-3 border rounded-lg">
+                <div className="flex items-center space-x-3">
+                  <div className="w-8 h-8 bg-gray-200 rounded-full animate-pulse"></div>
+                  <div>
+                    <div className="h-4 bg-gray-200 rounded w-24 animate-pulse"></div>
+                    <div className="h-3 bg-gray-200 rounded w-16 mt-1 animate-pulse"></div>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <div className="h-4 bg-gray-200 rounded w-16 animate-pulse"></div>
+                  <div className="h-3 bg-gray-200 rounded w-12 mt-1 animate-pulse"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (topUsers.length === 0) {
+    return (
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            <Users className="h-5 w-5" />
+            Top 5 utilisateurs
+          </CardTitle>
+            <Link href="/users">
+            <Button variant="outline" size="sm">
+              Voir tous
+            </Button>
+          </Link>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center py-8 text-muted-foreground">
+            Aucun utilisateur trouvé
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle className="flex items-center gap-2">
+          <Users className="h-5 w-5" />
+          Top 5 utilisateurs
+        </CardTitle>
+        <Link href="/users">
+          <Button variant="outline" size="sm">
+            Voir tous
+          </Button>
+        </Link>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {topUsers.map((user, index) => (
+            <div
+              key={user.userId}
+              className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <div className="flex items-center space-x-3">
+                <Badge variant="secondary" className="w-6 h-6 rounded-full p-0 flex items-center justify-center text-xs">
+                  {index + 1}
+                </Badge>
+                <div>
+                  <p className="font-medium text-sm">{user.userName}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {user.conversations} conversation{user.conversations !== 1 ? 's' : ''}
+                  </p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p className="font-medium text-sm">
+                  {user.tokens.toLocaleString()} tokens
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {user.credits.toLocaleString()} crédits
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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>

components/layout/sidebar.tsx

@@ -19,7 +19,6 @@ import {
   Bot,
   ChevronLeft,
   ChevronRight,
-  BarChart3,
   LogOut,
   User,
   Mail,
@@ -28,15 +27,10 @@ import type { User as SupabaseUser } from "@supabase/supabase-js";
 
 const topLevelNavigation = [
   {
-    name: "Dashboard",
+    name: "Analytics",
     href: "/",
     icon: LayoutDashboard,
   },
-  {
-    name: "Analytics",
-    href: "/analytics",
-    icon: BarChart3,
-  },
 ];
 
 const navigationGroups = [

components/ui/metric-card.tsx

@@ -7,6 +7,7 @@ interface MetricCardProps {
   title: string;
   value: number | string;
   icon: LucideIcon;
+  description?: string;
   trend?: {
     value: number;
     isPositive: boolean;
@@ -18,6 +19,7 @@ export function MetricCard({
   title, 
   value, 
   icon: Icon, 
+  description,
   trend, 
   className 
 }: MetricCardProps) {
@@ -33,6 +35,11 @@ export function MetricCard({
         <div className="text-2xl font-bold">
           {typeof value === 'number' ? formatNumber(value) : value}
         </div>
+        {description && (
+          <p className="text-xs text-muted-foreground mt-1">
+            {description}
+          </p>
+        )}
         {trend && (
           <Badge 
             variant={trend.isPositive ? "default" : "destructive"}