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,35 +1,155 @@
 '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 (
+    <DndContext
+      id="objectives-board"
+      sensors={sensors}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
       <div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
         <div className="container mx-auto px-6 py-4">
           <Card variant="column" className="border-[var(--accent)]/30 shadow-[var(--accent)]/10">
@@ -92,80 +212,47 @@ export function ObjectivesBoard({
               <CardContent className="pt-0">
                 {(() => {
                 // Séparer les tâches par statut
-              const activeTasks = tasks.filter(task => task.status === 'todo' || task.status === 'in_progress');
+                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-2 gap-6">
+                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                  {/* Colonne En cours / À faire */}
+                    <DroppableColumn
-                  <div className="space-y-3">
+                      status="todo"
-                    <div className="flex items-center gap-2 pt-2 pb-2 border-b border-[var(--accent)]/20">
+                      tasks={todoTasks}
-                      <div className="w-2 h-2 bg-[var(--primary)] rounded-full"></div>
+                      title="À faire"
-                      <h3 className="text-sm font-mono font-medium text-[var(--primary)] uppercase tracking-wider">
+                      color="bg-[var(--primary)]"
-                        En cours / À faire
+                      icon="📋"
-                      </h3>
+                      onDeleteTask={onDeleteTask}
-                      <div className="flex-1"></div>
+                      onEditTask={onEditTask}
-                      <span className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
-                        {activeTasks.length}
-                      </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é */}
+                    <DroppableColumn
-                  <div className="space-y-3">
+                      status="in_progress"
-                    <div className="flex items-center gap-2 pt-2 pb-2 border-b border-[var(--accent)]/20">
+                      tasks={inProgressTasks}
-                      <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+                      title="En cours"
-                      <h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
+                      color="bg-yellow-400"
-                        Terminé
+                      icon="🔄"
-                      </h3>
+                      onDeleteTask={onDeleteTask}
-                      <div className="flex-1"></div>
+                      onEditTask={onEditTask}
-                      <span className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                      onUpdateTitle={onUpdateTitle}
-                        {completedTasks.length}
+                      compactView={compactView}
-                      </span>
+                    />
-                    </div>
+                    
-                    
+                    <DroppableColumn
-                    {completedTasks.length === 0 ? (
+                      status="done"
-                      <div className="text-center py-8 text-[var(--muted-foreground)] text-sm">
+                      tasks={completedTasks}
-                        <div className="text-2xl mb-2">✅</div>
+                      title="Terminé"
-                        Aucun objectif terminé
+                      color="bg-green-400"
-                      </div>
+                      icon="✅"
-                    ) : (
+                      onDeleteTask={onDeleteTask}
-                      <div className="space-y-3">
+                      onEditTask={onEditTask}
-                        {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>
                 );
                 })()}
@@ -174,5 +261,21 @@ export function ObjectivesBoard({
           </Card>
         </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>
   );
 }