feat: metrics on Manager page

2025-09-19 17:05:13 +02:00
parent 9d0b6da3a0
commit 339661aa13
12 changed files with 1563 additions and 5 deletions
--- a/components/dashboard/charts/DailyStatusChart.tsx
+++ b/components/dashboard/charts/DailyStatusChart.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import { DailyMetrics } from '@/services/metrics';
+
+interface DailyStatusChartProps {
+  data: DailyMetrics[];
+  className?: string;
+}
+
+export function DailyStatusChart({ data, className }: DailyStatusChartProps) {
+  // Transformer les données pour le graphique
+  const chartData = data.map(day => ({
+    day: day.dayName.substring(0, 3), // Lun, Mar, etc.
+    date: new Date(day.date).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' }),
+    'Complétées': day.completed,
+    'En cours': day.inProgress,
+    'Bloquées': day.blocked,
+    'En attente': day.pending,
+    'Nouvelles': day.newTasks
+  }));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: any[]; label?: string }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 shadow-lg">
+          <p className="font-medium mb-2">{`${label} (${payload[0]?.payload?.date})`}</p>
+          {payload.map((entry: { dataKey: string; value: number; color: string }, index: number) => (
+            <p key={index} style={{ color: entry.color }} className="text-sm">
+              {`${entry.dataKey}: ${entry.value}`}
+            </p>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height={300}>
+        <BarChart
+          data={chartData}
+          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+          <XAxis 
+            dataKey="day" 
+            stroke="var(--muted-foreground)"
+            fontSize={12}
+          />
+          <YAxis 
+            stroke="var(--muted-foreground)"
+            fontSize={12}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+          <Bar dataKey="Complétées" fill="#10b981" radius={[2, 2, 0, 0]} />
+          <Bar dataKey="En cours" fill="#3b82f6" radius={[2, 2, 0, 0]} />
+          <Bar dataKey="Bloquées" fill="#ef4444" radius={[2, 2, 0, 0]} />
+          <Bar dataKey="En attente" fill="#94a3b8" radius={[2, 2, 0, 0]} />
+          <Bar dataKey="Nouvelles" fill="#8b5cf6" radius={[2, 2, 0, 0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}