first commit

2025-10-05 16:10:35 +02:00
parent 201fca4e68
commit 13cd637391
70 changed files with 7287 additions and 130 deletions
--- a/components/dashboard/charts/user-activity-chart.tsx
+++ b/components/dashboard/charts/user-activity-chart.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { 
+  PieChart, 
+  Pie, 
+  Cell, 
+  ResponsiveContainer, 
+  Tooltip, 
+  Legend 
+} from "recharts";
+
+interface UserActivityChartProps {
+  activeUsers: number;
+  inactiveUsers: number;
+}
+
+export function UserActivityChart({ activeUsers, inactiveUsers }: UserActivityChartProps) {
+  const data = [
+    { 
+      name: 'Utilisateurs actifs', 
+      value: activeUsers, 
+      color: '#22c55e' // Vert clair pour actifs
+    },
+    { 
+      name: 'Utilisateurs inactifs', 
+      value: inactiveUsers, 
+      color: '#ef4444' // Rouge pour inactifs
+    },
+  ];
+
+  const total = activeUsers + 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>
+  );
+}