first commit

components/dashboard/charts/real-user-activity-chart.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  Legend,
+} from "recharts";
+import { useUserActivity } from "@/hooks/useUserActivity";
+import { AlertCircle } from "lucide-react";
+
+export function RealUserActivityChart() {
+  const { activity, loading, error } = useUserActivity();
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center h-64">
+          <div className="h-64 bg-muted animate-pulse rounded-lg w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error || !activity) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center h-64">
+          <div className="text-center">
+            <AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
+            <p className="text-sm text-muted-foreground">
+              Erreur lors du chargement
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const data = [
+    {
+      name: "Utilisateurs actifs",
+      value: activity.activeUsers,
+      color: "#22c55e", // Vert clair pour actifs
+    },
+    {
+      name: "Utilisateurs inactifs",
+      value: activity.inactiveUsers,
+      color: "#ef4444", // Rouge pour inactifs
+    },
+  ];
+
+  const total = activity.activeUsers + activity.inactiveUsers;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base font-medium">
+          Activité des utilisateurs
+        </CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Actifs = connectés dans les 7 derniers jours
+        </p>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <PieChart>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              innerRadius={60}
+              outerRadius={100}
+              paddingAngle={5}
+              dataKey="value"
+            >
+              {data.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "hsl(var(--background))",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: "8px",
+              }}
+              formatter={(value: number) => [
+                `${value} utilisateurs (${((value / total) * 100).toFixed(
+                  1
+                )}%)`,
+                "",
+              ]}
+            />
+            <Legend
+              formatter={(value, entry) => (
+                <span style={{ color: entry.color }}>
+                  {value}: {entry.payload?.value} (
+                  {((entry.payload?.value / total) * 100).toFixed(1)}%)
+                </span>
+              )}
+            />
+          </PieChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}