clean

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>
   );