feat: overhaul TODO.md and enhance Kanban components

- Updated TODO.md to reflect the new project structure and phases, marking several tasks as completed.
- Enhanced Kanban components with a tech-inspired design, including new styles for columns and task cards.
- Removed the obsolete reminders service and task processor, streamlining the codebase for better maintainability.
- Introduced a modern API for task management, including CRUD operations and improved error handling.
- Updated global styles for a cohesive dark theme and added custom scrollbar styles.

components/kanban/Column.tsx

@@ -9,41 +9,73 @@ interface KanbanColumnProps {
 }
 
 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'
+  // 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 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'
+  const style = techStyles[color as keyof typeof techStyles];
+
+  // Icônes tech
+  const techIcons = {
+    todo: '⚡',
+    in_progress: '🔄',
+    done: '✓',
+    cancelled: '✕'
   };
 
   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-shrink-0 w-80 h-full">
+      {/* Header tech avec glow */}
+      <div className={`bg-slate-900 ${style.border} border rounded-t-lg p-4 ${style.glow} shadow-lg`}>
         <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}
+          <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}
+            </h3>
+          </div>
+          <span className={`${style.badge} px-3 py-1 rounded-full text-xs font-mono font-bold`}>
+            {String(tasks.length).padStart(2, '0')}
           </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]}`}>
+      {/* Zone de contenu tech */}
+      <div className={`bg-slate-900/80 backdrop-blur-sm ${style.border} border-t-0 border rounded-b-lg p-4 h-[calc(100vh-220px)] overflow-y-auto ${style.glow} shadow-lg`}>
         <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 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>
+              </div>
+              <p className="text-xs font-mono text-slate-500 uppercase tracking-wide">NO DATA</p>
+              <div className="mt-2 flex justify-center">
+                <div className={`w-8 h-0.5 ${style.accent.replace('text-', 'bg-')} opacity-30`}></div>
+              </div>
             </div>
           ) : (
             tasks.map((task) => (