new

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

@@ -20,12 +20,12 @@ export function UserActivityChart({ activeUsers, inactiveUsers }: UserActivityCh
     { 
       name: 'Utilisateurs actifs', 
       value: activeUsers, 
-      color: '#22c55e' // Vert clair pour actifs
+      color: '#000000' // Noir pour actifs
     },
     { 
       name: 'Utilisateurs inactifs', 
       value: inactiveUsers, 
-      color: '#ef4444' // Rouge pour inactifs
+      color: '#666666' // Gris pour inactifs
     },
   ];
 
@@ -36,7 +36,7 @@ export function UserActivityChart({ activeUsers, inactiveUsers }: UserActivityCh
       <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
+          Actifs = connectés dans les 30 derniers jours
         </p>
       </CardHeader>
       <CardContent>
@@ -48,8 +48,10 @@ export function UserActivityChart({ activeUsers, inactiveUsers }: UserActivityCh
               cy="50%"
               innerRadius={60}
               outerRadius={100}
-              paddingAngle={5}
+              paddingAngle={2}
               dataKey="value"
+              stroke="#ffffff"
+              strokeWidth={2}
             >
               {data.map((entry, index) => (
                 <Cell key={`cell-${index}`} fill={entry.color} />
@@ -60,16 +62,22 @@ export function UserActivityChart({ activeUsers, inactiveUsers }: UserActivityCh
                 backgroundColor: 'hsl(var(--background))',
                 border: '1px solid hsl(var(--border))',
                 borderRadius: '8px',
+                fontSize: '12px'
               }}
               formatter={(value: number) => [
                 `${value} utilisateurs (${((value / total) * 100).toFixed(1)}%)`,
-                ''
+                '',
               ]}
             />
-            <Legend 
+            <Legend
+              wrapperStyle={{
+                paddingTop: "20px",
+                fontSize: "12px"
+              }}
               formatter={(value, entry) => (
-                <span style={{ color: entry.color }}>
-                  {value}: {entry.payload?.value} ({((entry.payload?.value / total) * 100).toFixed(1)}%)
+                <span style={{ color: entry.color, fontWeight: 500 }}>
+                  {value}: {entry.payload?.value} (
+                  {((entry.payload?.value / total) * 100).toFixed(1)}%)
                 </span>
               )}
             />