applicatif 3M, user, chart

components/dashboard/real-time-stats.tsx

@@ -1,13 +1,19 @@
 "use client";
 
 import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useStats } from "@/hooks/useStats";
 import { SimpleStatsChart } from "./charts/simple-stats-chart";
+import { UserConnectionsChart } from "./charts/user-connections-chart";
 import { ModelDistributionChart } from "./charts/model-distribution-chart";
 import { AlertCircle } from "lucide-react";
 
 export function RealTimeStats() {
   const { stats, loading, error } = useStats();
+  
+  console.log("RealTimeStats - stats:", stats);
+  console.log("RealTimeStats - loading:", loading);
+  console.log("RealTimeStats - error:", error);
 
   if (loading) {
     return (
@@ -67,16 +73,35 @@ export function RealTimeStats() {
   }
 
   return (
-    <div className="space-y-6">
-      <SimpleStatsChart
-        title="Tokens consommés par jour"
-        data={stats.dailyTokens}
-        color="hsl(var(--primary))"
-      />
-      <ModelDistributionChart
-        title="Répartition par modèle"
-        data={stats.modelDistribution}
-      />
-    </div>
+    <Tabs defaultValue="connections" className="space-y-6">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="connections">Nombre de connexions par utilisateur/par jour</TabsTrigger>
+        <TabsTrigger value="tokens">Tokens consommés par jour</TabsTrigger>
+      </TabsList>
+      
+      <TabsContent value="connections" className="space-y-6">
+        <UserConnectionsChart
+          title="Nombre de connexions par utilisateur/par jour"
+          data={stats.dailyConnections || []}
+          color="hsl(var(--chart-2))"
+        />
+        <ModelDistributionChart
+          title="Répartition par modèle"
+          data={stats.modelDistribution}
+        />
+      </TabsContent>
+      
+      <TabsContent value="tokens" className="space-y-6">
+        <SimpleStatsChart
+          title="Tokens consommés par jour"
+          data={stats.dailyTokens}
+          color="hsl(var(--primary))"
+        />
+        <ModelDistributionChart
+          title="Répartition par modèle"
+          data={stats.modelDistribution}
+        />
+      </TabsContent>
+    </Tabs>
   );
 }