feat: add date-fns dependency and update HomePage component

- Added `date-fns` as a dependency in `package.json` and `package-lock.json`.
- Refactored `Home` component to `HomePage`, implementing server-side rendering for tasks and stats retrieval.
- Integrated `Header` and `KanbanBoard` components for improved UI structure.
- Marked Kanban components as completed in `TODO.md`.

components/ui/Header.tsx

@@ -0,0 +1,87 @@
+interface HeaderProps {
+  title: string;
+  subtitle: string;
+  stats: {
+    total: number;
+    completed: number;
+    inProgress: number;
+    todo: number;
+    completionRate: number;
+  };
+}
+
+export function Header({ title, subtitle, stats }: HeaderProps) {
+  return (
+    <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
+      <div className="container mx-auto px-4 py-6">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          {/* Titre et sous-titre */}
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              {title}
+            </h1>
+            <p className="text-gray-600 dark:text-gray-400 mt-1">
+              {subtitle}
+            </p>
+          </div>
+
+          {/* Statistiques */}
+          <div className="flex flex-wrap gap-4">
+            <StatCard 
+              label="Total" 
+              value={stats.total} 
+              color="blue"
+            />
+            <StatCard 
+              label="Terminées" 
+              value={stats.completed} 
+              color="green"
+            />
+            <StatCard 
+              label="En cours" 
+              value={stats.inProgress} 
+              color="yellow"
+            />
+            <StatCard 
+              label="À faire" 
+              value={stats.todo} 
+              color="gray"
+            />
+            <StatCard 
+              label="Taux" 
+              value={`${stats.completionRate}%`} 
+              color="purple"
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+interface StatCardProps {
+  label: string;
+  value: number | string;
+  color: 'blue' | 'green' | 'yellow' | 'gray' | 'purple';
+}
+
+function StatCard({ label, value, color }: StatCardProps) {
+  const colorClasses = {
+    blue: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-800',
+    green: 'bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800',
+    yellow: 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-800',
+    gray: 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700',
+    purple: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/20 dark:text-purple-300 dark:border-purple-800'
+  };
+
+  return (
+    <div className={`px-3 py-2 rounded-lg border text-sm font-medium ${colorClasses[color]}`}>
+      <div className="text-xs opacity-75 uppercase tracking-wide">
+        {label}
+      </div>
+      <div className="text-lg font-bold">
+        {value}
+      </div>
+    </div>
+  );
+}