feat: implement drag & drop functionality using @dnd-kit

- Added drag & drop capabilities to the Kanban board with @dnd-kit for task status updates.
- Integrated DndContext in `KanbanBoard` and utilized `useDroppable` in `KanbanColumn` for drop zones.
- Enhanced `TaskCard` with draggable features and visual feedback during dragging.
- Updated `TODO.md` to reflect the completion of drag & drop tasks and optimistically update task statuses.
- Introduced optimistic updates in `useTasks` for smoother user experience during drag & drop operations.

components/kanban/Column.tsx

@@ -5,6 +5,7 @@ import { Card, CardHeader, CardContent } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { useState } from 'react';
+import { useDroppable } from '@dnd-kit/core';
 
 interface KanbanColumnProps {
   id: TaskStatus;
@@ -19,6 +20,11 @@ interface KanbanColumnProps {
 
 export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle }: KanbanColumnProps) {
   const [showQuickAdd, setShowQuickAdd] = useState(false);
+  
+  // Configuration de la zone droppable
+  const { setNodeRef, isOver } = useDroppable({
+    id: id,
+  });
   // Couleurs tech/cyberpunk
   const techStyles = {
     gray: {
@@ -61,7 +67,13 @@ export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTa
 
   return (
     <div className="flex-shrink-0 w-80 h-full">
-      <Card variant="elevated" className="h-full flex flex-col">
+      <Card 
+        ref={setNodeRef}
+        variant="elevated" 
+        className={`h-full flex flex-col transition-all duration-200 ${
+          isOver ? 'ring-2 ring-cyan-400/50 bg-slate-800/60' : ''
+        }`}
+      >
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">