feat: update package dependencies and integrate Recharts

- Changed project name from "towercontrol-temp" to "towercontrol" in package-lock.json and package.json.
- Added Recharts library for data visualization in the dashboard.
- Updated TODO.md to reflect completion of analytics and metrics integration tasks.
- Enhanced RecentTasks component to utilize TaskPriority type for better type safety.
- Minor layout adjustments in RecentTasks for improved UI.

components/charts/VelocityChart.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Line, ComposedChart } from 'recharts';
+import { Card } from '@/components/ui/Card';
+
+interface VelocityData {
+  week: string;
+  completed: number;
+  average: number;
+}
+
+interface VelocityChartProps {
+  data: VelocityData[];
+  title?: string;
+}
+
+export function VelocityChart({ data, title = "Vélocité Hebdomadaire" }: VelocityChartProps) {
+  // Tooltip personnalisé
+  const CustomTooltip = ({ active, payload, label }: { 
+    active?: boolean; 
+    payload?: Array<{ dataKey: string; value: number; color: string }>; 
+    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="text-sm font-medium mb-2">{label}</p>
+          {payload.map((entry, index: number) => (
+            <p key={index} className="text-sm" style={{ color: entry.color }}>
+              {entry.dataKey === 'completed' ? 'Terminées' : 'Moyenne'}: {entry.value}
+              {entry.dataKey === 'completed' ? ' tâches' : ' tâches/sem'}
+            </p>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold mb-4">{title}</h3>
+      <div className="h-64">
+        <ResponsiveContainer width="100%" height="100%">
+          <ComposedChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+            <CartesianGrid 
+              strokeDasharray="3 3" 
+              stroke="var(--border)" 
+              opacity={0.3}
+            />
+            <XAxis 
+              dataKey="week" 
+              stroke="var(--muted-foreground)"
+              fontSize={12}
+              tick={{ fill: 'var(--muted-foreground)' }}
+            />
+            <YAxis 
+              stroke="var(--muted-foreground)"
+              fontSize={12}
+              tick={{ fill: 'var(--muted-foreground)' }}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Bar 
+              dataKey="completed" 
+              fill="#3b82f6"
+              radius={[4, 4, 0, 0]}
+              opacity={0.8}
+            />
+            <Line 
+              type="monotone" 
+              dataKey="average" 
+              stroke="#f59e0b" 
+              strokeWidth={3}
+              dot={{ fill: '#f59e0b', strokeWidth: 2, r: 5 }}
+              activeDot={{ r: 7, stroke: '#f59e0b', strokeWidth: 2 }}
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
+      
+      {/* Légende */}
+      <div className="flex items-center justify-center gap-6 mt-4 text-sm">
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 bg-blue-500 rounded-sm opacity-80"></div>
+          <span className="text-[var(--muted-foreground)]">Tâches terminées</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-0.5 bg-amber-500"></div>
+          <span className="text-[var(--muted-foreground)]">Moyenne mobile</span>
+        </div>
+      </div>
+    </Card>
+  );
+}