feat: revamp HomePageClient and dashboard layout

- Updated HomePageClient to replace Kanban board with a modern dashboard layout.
- Integrated DashboardStats, QuickActions, and RecentTasks components for enhanced user experience.
- Marked several tasks as complete in TODO.md, including the creation of a new dashboard and quick action features.
- Added navigation link for the new dashboard in the Header component.

components/dashboard/DashboardStats.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { TaskStats } from '@/lib/types';
+import { Card } from '@/components/ui/Card';
+
+interface DashboardStatsProps {
+  stats: TaskStats;
+}
+
+export function DashboardStats({ stats }: DashboardStatsProps) {
+  const totalTasks = stats.total;
+  const completionRate = totalTasks > 0 ? Math.round((stats.completed / totalTasks) * 100) : 0;
+  const inProgressRate = totalTasks > 0 ? Math.round((stats.inProgress / totalTasks) * 100) : 0;
+
+  const statCards = [
+    {
+      title: 'Total Tâches',
+      value: stats.total,
+      icon: '📋',
+      color: 'bg-blue-500',
+      textColor: 'text-blue-600'
+    },
+    {
+      title: 'À Faire',
+      value: stats.todo,
+      icon: '⏳',
+      color: 'bg-gray-500',
+      textColor: 'text-gray-600'
+    },
+    {
+      title: 'En Cours',
+      value: stats.inProgress,
+      icon: '🔄',
+      color: 'bg-orange-500',
+      textColor: 'text-orange-600'
+    },
+    {
+      title: 'Terminées',
+      value: stats.completed,
+      icon: '✅',
+      color: 'bg-green-500',
+      textColor: 'text-green-600'
+    }
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      {statCards.map((stat, index) => (
+        <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">
+                {stat.title}
+              </p>
+              <p className={`text-3xl font-bold ${stat.textColor}`}>
+                {stat.value}
+              </p>
+            </div>
+            <div className="text-3xl">
+              {stat.icon}
+            </div>
+          </div>
+        </Card>
+      ))}
+      
+      {/* Cartes de pourcentage */}
+      <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-2 lg:col-span-2">
+        <h3 className="text-lg font-semibold mb-4">Taux de Completion</h3>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">Terminées</span>
+            <span className="text-green-600 font-bold">{completionRate}%</span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-2">
+            <div 
+              className="bg-green-500 h-2 rounded-full transition-all duration-300"
+              style={{ width: `${completionRate}%` }}
+            />
+          </div>
+          
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">En Cours</span>
+            <span className="text-orange-600 font-bold">{inProgressRate}%</span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-2">
+            <div 
+              className="bg-orange-500 h-2 rounded-full transition-all duration-300"
+              style={{ width: `${inProgressRate}%` }}
+            />
+          </div>
+        </div>
+      </Card>
+      
+      {/* Insights rapides */}
+      <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-2 lg:col-span-2">
+        <h3 className="text-lg font-semibold mb-4">Aperçu Rapide</h3>
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+            <span className="text-sm">
+              {stats.completed} tâches terminées sur {totalTasks}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
+            <span className="text-sm">
+              {stats.inProgress} tâches en cours de traitement
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="w-2 h-2 bg-gray-500 rounded-full"></span>
+            <span className="text-sm">
+              {stats.todo} tâches en attente
+            </span>
+          </div>
+          {totalTasks > 0 && (
+            <div className="pt-2 border-t border-[var(--border)]">
+              <span className="text-sm font-medium text-[var(--muted-foreground)]">
+                Productivité: {completionRate}% de completion
+              </span>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}