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/kanban/Column.tsx

@@ -0,0 +1,57 @@
+import { Task, TaskStatus } from '@/lib/types';
+import { TaskCard } from './TaskCard';
+
+interface KanbanColumnProps {
+  id: TaskStatus;
+  title: string;
+  color: string;
+  tasks: Task[];
+}
+
+export function KanbanColumn({ id, title, color, tasks }: KanbanColumnProps) {
+  const colorClasses = {
+    gray: 'border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800',
+    blue: 'border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-900/20',
+    green: 'border-green-300 bg-green-50 dark:border-green-600 dark:bg-green-900/20',
+    red: 'border-red-300 bg-red-50 dark:border-red-600 dark:bg-red-900/20'
+  };
+
+  const headerColorClasses = {
+    gray: 'text-gray-700 dark:text-gray-300',
+    blue: 'text-blue-700 dark:text-blue-300',
+    green: 'text-green-700 dark:text-green-300',
+    red: 'text-red-700 dark:text-red-300'
+  };
+
+  return (
+    <div className="flex-shrink-0 w-80">
+      {/* En-tête de colonne */}
+      <div className={`rounded-t-lg border-2 border-b-0 p-4 ${colorClasses[color as keyof typeof colorClasses]}`}>
+        <div className="flex items-center justify-between">
+          <h3 className={`font-semibold text-lg ${headerColorClasses[color as keyof typeof headerColorClasses]}`}>
+            {title}
+          </h3>
+          <span className={`px-2 py-1 rounded-full text-xs font-medium ${headerColorClasses[color as keyof typeof headerColorClasses]} bg-white/50 dark:bg-black/20`}>
+            {tasks.length}
+          </span>
+        </div>
+      </div>
+
+      {/* Zone de contenu */}
+      <div className={`border-2 border-t-0 rounded-b-lg min-h-96 p-4 ${colorClasses[color as keyof typeof colorClasses]}`}>
+        <div className="space-y-3">
+          {tasks.length === 0 ? (
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+              <div className="text-4xl mb-2">📝</div>
+              <p className="text-sm">Aucune tâche</p>
+            </div>
+          ) : (
+            tasks.map((task) => (
+              <TaskCard key={task.id} task={task} />
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}