feat: extend task management with new statuses and centralized configuration

- Added `cancelled` and `freeze` statuses to `TasksResponse`, `HomePageClientProps`, and `useTasks` for comprehensive task tracking.
- Updated task forms to dynamically load statuses using `getAllStatuses`, enhancing maintainability and reducing hardcoded values.
- Refactored Kanban components to utilize centralized status configuration, improving consistency across the application.
- Adjusted visibility toggle and swimlanes to reflect new status options, ensuring a seamless user experience.

components/kanban/Column.tsx

@@ -6,11 +6,10 @@ import { Badge } from '@/components/ui/Badge';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { useState } from 'react';
 import { useDroppable } from '@dnd-kit/core';
+import { getStatusConfig, getTechStyle, getBadgeVariant } from '@/lib/status-config';
 
 interface KanbanColumnProps {
   id: TaskStatus;
-  title: string;
-  color: string;
   tasks: Task[];
   onCreateTask?: (data: CreateTaskData) => Promise<void>;
   onDeleteTask?: (taskId: string) => Promise<void>;
@@ -19,52 +18,18 @@ interface KanbanColumnProps {
   compactView?: boolean;
 }
 
-export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, compactView = false }: KanbanColumnProps) {
+export function KanbanColumn({ id, tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, compactView = false }: KanbanColumnProps) {
   const [showQuickAdd, setShowQuickAdd] = useState(false);
   
   // Configuration de la zone droppable
   const { setNodeRef, isOver } = useDroppable({
     id: id,
   });
-  // Couleurs tech/cyberpunk
-  const techStyles = {
-    gray: {
-      border: 'border-slate-700',
-      glow: 'shadow-slate-500/20',
-      accent: 'text-slate-400',
-      badge: 'bg-slate-800 text-slate-300 border border-slate-600'
-    },
-    blue: {
-      border: 'border-cyan-500/30',
-      glow: 'shadow-cyan-500/20',
-      accent: 'text-cyan-400',
-      badge: 'bg-cyan-950 text-cyan-300 border border-cyan-500/30'
-    },
-    green: {
-      border: 'border-emerald-500/30',
-      glow: 'shadow-emerald-500/20',
-      accent: 'text-emerald-400',
-      badge: 'bg-emerald-950 text-emerald-300 border border-emerald-500/30'
-    },
-    red: {
-      border: 'border-red-500/30',
-      glow: 'shadow-red-500/20',
-      accent: 'text-red-400',
-      badge: 'bg-red-950 text-red-300 border border-red-500/30'
-    }
-  };
 
-  const style = techStyles[color as keyof typeof techStyles];
-
-  // Icônes tech
-  const techIcons = {
-    todo: '⚡',
-    in_progress: '🔄',
-    done: '✓',
-    cancelled: '✕'
-  };
-
-  const badgeVariant = color === 'green' ? 'success' : color === 'blue' ? 'primary' : color === 'red' ? 'danger' : 'default';
+  // Récupération de la config du statut
+  const statusConfig = getStatusConfig(id);
+  const style = getTechStyle(statusConfig.color);
+  const badgeVariant = getBadgeVariant(statusConfig.color);
 
   return (
     <div className="flex-shrink-0 w-80 md:w-1/4 md:flex-1 h-full">
@@ -80,7 +45,7 @@ export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTa
             <div className="flex items-center gap-3">
               <div className={`w-2 h-2 rounded-full ${style.accent.replace('text-', 'bg-')} animate-pulse`}></div>
               <h3 className={`font-mono text-sm font-bold ${style.accent} uppercase tracking-wider`}>
-                {title}
+                {statusConfig.label} {statusConfig.icon}
               </h3>
             </div>
             <div className="flex items-center gap-2">
@@ -117,7 +82,7 @@ export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTa
             {tasks.length === 0 && !showQuickAdd ? (
               <div className="text-center py-20">
                 <div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800 border-2 border-dashed ${style.border} flex items-center justify-center`}>
-                  <span className={`text-2xl ${style.accent} opacity-50`}>{techIcons[id]}</span>
+                  <span className={`text-2xl ${style.accent} opacity-50`}>{statusConfig.icon}</span>
                 </div>
                 <p className="text-xs font-mono text-slate-500 uppercase tracking-wide">NO DATA</p>
                 <div className="mt-2 flex justify-center">