feat: implement drag-and-drop functionality in ObjectivesBoard

- Added DnD context and handlers for task reordering and status updates.
- Introduced DroppableColumn component for better task organization by status.
- Enhanced task card interaction with visual feedback during drag events.
- Updated KanbanBoardContainer to support new status update prop.

components/kanban/BoardContainer.tsx

@@ -91,6 +91,7 @@ export function KanbanBoardContainer({
           onDeleteTask={deleteTask}
           onEditTask={handleEditTask}
           onUpdateTitle={handleUpdateTitle}
+          onUpdateStatus={handleUpdateStatus}
           compactView={kanbanFilters.compactView}
           pinnedTagName={pinnedTagName}
         />

components/kanban/ObjectivesBoard.tsx

@@ -1,78 +1,175 @@
 'use client';
 
+import { useState } from 'react';
 import { useObjectivesCollapse } from '@/hooks/useObjectivesCollapse';
-import { Task } from '@/lib/types';
+import { Task, TaskStatus } from '@/lib/types';
 import { TaskCard } from './TaskCard';
 import { Card, CardHeader, CardContent } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useDroppable } from '@dnd-kit/core';
 
 interface ObjectivesBoardProps {
   tasks: Task[];
   onDeleteTask?: (taskId: string) => Promise<void>;
   onEditTask?: (task: Task) => void;
   onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
+  onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
   compactView?: boolean;
   pinnedTagName?: string;
 }
 
+// Composant pour les colonnes droppables
+function DroppableColumn({ 
+  status, 
+  tasks, 
+  title,
+  color,
+  icon,
+  onDeleteTask, 
+  onEditTask, 
+  onUpdateTitle, 
+  compactView 
+}: {
+  status: TaskStatus;
+  tasks: Task[];
+  title: string;
+  color: string;
+  icon: string;
+  onDeleteTask?: (taskId: string) => Promise<void>;
+  onEditTask?: (task: Task) => void;
+  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
+  compactView: boolean;
+}) {
+  const { setNodeRef } = useDroppable({
+    id: status,
+  });
+
+  return (
+    <div ref={setNodeRef} className="space-y-3">
+      <div className="flex items-center gap-2 pt-2 pb-2 border-b border-[var(--accent)]/20">
+        <div className={`w-2 h-2 rounded-full ${color}`}></div>
+        <h3 className={`text-sm font-mono font-medium uppercase tracking-wider ${color.replace('bg-', 'text-').replace('400', '300')}`}>
+          {title}
+        </h3>
+        <div className="flex-1"></div>
+        <span className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+          {tasks.length}
+        </span>
+      </div>
+      
+      {tasks.length === 0 ? (
+        <div className="text-center py-8 text-[var(--muted-foreground)] text-sm">
+          <div className="text-2xl mb-2">{icon}</div>
+          Aucun objectif {title.toLowerCase()}
+        </div>
+      ) : (
+        <SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
+          <div className="space-y-3">
+            {tasks.map(task => (
+              <div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200">
+                <TaskCard
+                  task={task}
+                  onDelete={onDeleteTask}
+                  onEdit={onEditTask}
+                  onUpdateTitle={onUpdateTitle}
+                  compactView={compactView}
+                />
+              </div>
+            ))}
+          </div>
+        </SortableContext>
+      )}
+    </div>
+  );
+}
+
 export function ObjectivesBoard({ 
   tasks, 
   onDeleteTask, 
   onEditTask, 
   onUpdateTitle, 
+  onUpdateStatus,
   compactView = false,
   pinnedTagName = "Objectifs"
 }: ObjectivesBoardProps) {
   const { isCollapsed, toggleCollapse } = useObjectivesCollapse();
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+
+  // Configuration des sensors pour le drag & drop
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // Évite les clics accidentels
+      },
+    })
+  );
+
+  // Handlers pour le drag & drop
+  const handleDragStart = (event: DragStartEvent) => {
+    const task = tasks.find(t => t.id === event.active.id);
+    setActiveTask(task || null);
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveTask(null);
+
+    if (!over || !onUpdateStatus) return;
+
+    const taskId = active.id as string;
+    const newStatus = over.id as TaskStatus;
+    
+    // Vérifier si le statut a changé
+    const task = tasks.find(t => t.id === taskId);
+    if (task && task.status !== newStatus) {
+      await onUpdateStatus(taskId, newStatus);
+    }
+  };
   
   if (tasks.length === 0) {
     return null; // Ne rien afficher s'il n'y a pas d'objectifs
   }
 
   return (
-    <div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
+    <DndContext
-      <div className="container mx-auto px-6 py-4">
+      id="objectives-board"
-        <Card variant="column" className="border-[var(--accent)]/30 shadow-[var(--accent)]/10">
+      sensors={sensors}
-          <CardHeader className="pb-3">
+      onDragStart={handleDragStart}
-            <div className="flex items-center justify-between">
+      onDragEnd={handleDragEnd}
-              <button
+    >
-                onClick={toggleCollapse}
+      <div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
-                className="flex items-center gap-3 hover:bg-[var(--accent)]/20 rounded-lg p-2 -m-2 transition-colors group"
+        <div className="container mx-auto px-6 py-4">
-              >
+          <Card variant="column" className="border-[var(--accent)]/30 shadow-[var(--accent)]/10">
-                <div className="w-3 h-3 bg-[var(--accent)] rounded-full animate-pulse shadow-[var(--accent)]/50 shadow-lg"></div>
+            <CardHeader className="pb-3">
-                <h2 className="text-lg font-mono font-bold text-[var(--accent)] uppercase tracking-wider">
+              <div className="flex items-center justify-between">
-                  🎯 Objectifs Principaux
-                </h2>
-                {pinnedTagName && (
-                  <Badge variant="outline" className="border-[var(--accent)]/50 text-[var(--accent)]">
-                    {pinnedTagName}
-                  </Badge>
-                )}
-                
-                {/* Flèche de collapse */}
-                <svg
-                  className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
-                    isCollapsed ? 'rotate-180' : ''
-                  }`}
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                </svg>
-              </button>
-              
-              <div className="flex items-center gap-2">
-                <Badge variant="primary" size="sm" className="bg-[var(--accent)]">
-                  {String(tasks.length).padStart(2, '0')}
-                </Badge>
-                
-                {/* Bouton collapse séparé pour mobile */}
                 <button
                   onClick={toggleCollapse}
-                  className="lg:hidden p-1 hover:bg-[var(--accent)]/20 rounded transition-colors"
+                  className="flex items-center gap-3 hover:bg-[var(--accent)]/20 rounded-lg p-2 -m-2 transition-colors group"
-                  aria-label={isCollapsed ? "Développer" : "Réduire"}
                 >
+                  <div className="w-3 h-3 bg-[var(--accent)] rounded-full animate-pulse shadow-[var(--accent)]/50 shadow-lg"></div>
+                  <h2 className="text-lg font-mono font-bold text-[var(--accent)] uppercase tracking-wider">
+                    🎯 Objectifs Principaux
+                  </h2>
+                  {pinnedTagName && (
+                    <Badge variant="outline" className="border-[var(--accent)]/50 text-[var(--accent)]">
+                      {pinnedTagName}
+                    </Badge>
+                  )}
+                  
+                  {/* Flèche de collapse */}
                   <svg
                     className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
                       isCollapsed ? 'rotate-180' : ''
@@ -84,95 +181,101 @@ export function ObjectivesBoard({
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                   </svg>
                 </button>
-              </div>
+                
-            </div>
+                <div className="flex items-center gap-2">
-          </CardHeader>
+                  <Badge variant="primary" size="sm" className="bg-[var(--accent)]">
-
+                    {String(tasks.length).padStart(2, '0')}
-          {!isCollapsed && (
+                  </Badge>
-            <CardContent className="pt-0">
+                  
-              {(() => {
+                  {/* Bouton collapse séparé pour mobile */}
-              // Séparer les tâches par statut
+                  <button
-              const activeTasks = tasks.filter(task => task.status === 'todo' || task.status === 'in_progress');
+                    onClick={toggleCollapse}
-              const completedTasks = tasks.filter(task => task.status === 'done');
+                    className="lg:hidden p-1 hover:bg-[var(--accent)]/20 rounded transition-colors"
-
+                    aria-label={isCollapsed ? "Développer" : "Réduire"}
-              return (
+                  >
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <svg
-                  {/* Colonne En cours / À faire */}
+                      className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
-                  <div className="space-y-3">
+                        isCollapsed ? 'rotate-180' : ''
-                    <div className="flex items-center gap-2 pt-2 pb-2 border-b border-[var(--accent)]/20">
+                      }`}
-                      <div className="w-2 h-2 bg-[var(--primary)] rounded-full"></div>
+                      fill="none"
-                      <h3 className="text-sm font-mono font-medium text-[var(--primary)] uppercase tracking-wider">
+                      stroke="currentColor"
-                        En cours / À faire
+                      viewBox="0 0 24 24"
-                      </h3>
+                    >
-                      <div className="flex-1"></div>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                      <span className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                    </svg>
-                        {activeTasks.length}
+                  </button>
-                      </span>
-                    </div>
-                    
-                    {activeTasks.length === 0 ? (
-                      <div className="text-center py-8 text-[var(--muted-foreground)] text-sm">
-                        <div className="text-2xl mb-2">🎯</div>
-                        Aucun objectif actif
-                      </div>
-                    ) : (
-                      <div className="space-y-3">
-                        {activeTasks.map(task => (
-                          <div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200">
-                            <TaskCard
-                              task={task}
-                              onDelete={onDeleteTask}
-                              onEdit={onEditTask}
-                              onUpdateTitle={onUpdateTitle}
-                              compactView={compactView}
-                            />
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Colonne Terminé */}
-                  <div className="space-y-3">
-                    <div className="flex items-center gap-2 pt-2 pb-2 border-b border-[var(--accent)]/20">
-                      <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                      <h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
-                        Terminé
-                      </h3>
-                      <div className="flex-1"></div>
-                      <span className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
-                        {completedTasks.length}
-                      </span>
-                    </div>
-                    
-                    {completedTasks.length === 0 ? (
-                      <div className="text-center py-8 text-[var(--muted-foreground)] text-sm">
-                        <div className="text-2xl mb-2">✅</div>
-                        Aucun objectif terminé
-                      </div>
-                    ) : (
-                      <div className="space-y-3">
-                        {completedTasks.map(task => (
-                          <div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200 opacity-75">
-                            <TaskCard
-                              task={task}
-                              onDelete={onDeleteTask}
-                              onEdit={onEditTask}
-                              onUpdateTitle={onUpdateTitle}
-                              compactView={compactView}
-                            />
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
                 </div>
-              );
+              </div>
-              })()}
+            </CardHeader>
-            </CardContent>
+
-          )}
+            {!isCollapsed && (
-        </Card>
+              <CardContent className="pt-0">
+                {(() => {
+                // Séparer les tâches par statut
+                const inProgressTasks = tasks.filter(task => task.status === 'in_progress');
+                const todoTasks = tasks.filter(task => task.status === 'todo' || task.status === 'backlog');
+                const completedTasks = tasks.filter(task => task.status === 'done');
+
+                return (
+                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <DroppableColumn
+                      status="todo"
+                      tasks={todoTasks}
+                      title="À faire"
+                      color="bg-[var(--primary)]"
+                      icon="📋"
+                      onDeleteTask={onDeleteTask}
+                      onEditTask={onEditTask}
+                      onUpdateTitle={onUpdateTitle}
+                      compactView={compactView}
+                    />
+                    
+                    <DroppableColumn
+                      status="in_progress"
+                      tasks={inProgressTasks}
+                      title="En cours"
+                      color="bg-yellow-400"
+                      icon="🔄"
+                      onDeleteTask={onDeleteTask}
+                      onEditTask={onEditTask}
+                      onUpdateTitle={onUpdateTitle}
+                      compactView={compactView}
+                    />
+                    
+                    <DroppableColumn
+                      status="done"
+                      tasks={completedTasks}
+                      title="Terminé"
+                      color="bg-green-400"
+                      icon="✅"
+                      onDeleteTask={onDeleteTask}
+                      onEditTask={onEditTask}
+                      onUpdateTitle={onUpdateTitle}
+                      compactView={compactView}
+                    />
+                  </div>
+                );
+                })()}
+              </CardContent>
+            )}
+          </Card>
+        </div>
       </div>
-    </div>
+
+      {/* Overlay pour le drag & drop */}
+      <DragOverlay>
+        {activeTask ? (
+          <div className="rotate-3 opacity-90">
+            <TaskCard 
+              task={activeTask} 
+              onDelete={undefined}
+              onEdit={undefined}
+              onUpdateTitle={undefined}
+              compactView={compactView}
+            />
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
   );
 }