feat: metrics on Manager page

components/dashboard/charts/VelocityTrendChart.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import { VelocityTrend } from '@/services/metrics';
+
+interface VelocityTrendChartProps {
+  data: VelocityTrend[];
+  className?: string;
+}
+
+export function VelocityTrendChart({ data, className }: VelocityTrendChartProps) {
+  // 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) {
+      const data = payload[0].payload;
+      return (
+        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 shadow-lg">
+          <p className="font-medium mb-2">{`Semaine du ${label}`}</p>
+          <p className="text-sm text-green-600">
+            Terminées: {data.completed}
+          </p>
+          <p className="text-sm text-blue-600">
+            Créées: {data.created}
+          </p>
+          <p className="text-sm text-purple-600">
+            Vélocité: {data.velocity.toFixed(1)}%
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height={300}>
+        <LineChart
+          data={data}
+          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+          <XAxis 
+            dataKey="date" 
+            stroke="var(--muted-foreground)"
+            fontSize={12}
+          />
+          <YAxis 
+            yAxisId="count"
+            stroke="var(--muted-foreground)"
+            fontSize={12}
+            orientation="left"
+          />
+          <YAxis 
+            yAxisId="velocity"
+            stroke="var(--muted-foreground)"
+            fontSize={12}
+            orientation="right"
+            domain={[0, 100]}
+            tickFormatter={(value) => `${value}%`}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+          <Line 
+            yAxisId="count"
+            type="monotone" 
+            dataKey="completed" 
+            stroke="#10b981" 
+            strokeWidth={2}
+            dot={{ fill: "#10b981", strokeWidth: 2, r: 4 }}
+            name="Terminées"
+          />
+          <Line 
+            yAxisId="count"
+            type="monotone" 
+            dataKey="created" 
+            stroke="#3b82f6" 
+            strokeWidth={2}
+            dot={{ fill: "#3b82f6", strokeWidth: 2, r: 4 }}
+            name="Créées"
+          />
+          <Line 
+            yAxisId="velocity"
+            type="monotone" 
+            dataKey="velocity" 
+            stroke="#8b5cf6" 
+            strokeWidth={3}
+            dot={{ fill: "#8b5cf6", strokeWidth: 2, r: 5 }}
+            name="Vélocité (%)"
+            strokeDasharray="5 5"
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}