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/Board.tsx

@@ -56,16 +56,19 @@ export function KanbanBoard({ tasks }: KanbanBoardProps) {
   ];
 
   return (
-    <div className="w-full flex gap-4 overflow-x-auto pb-6">
-      {columns.map((column) => (
-        <KanbanColumn
-          key={column.id}
-          id={column.id}
-          title={column.title}
-          color={column.color}
-          tasks={column.tasks}
-        />
-      ))}
+    <div className="h-full flex flex-col bg-slate-950">
+      {/* Board tech dark */}
+      <div className="flex-1 flex gap-6 overflow-x-auto p-6">
+        {columns.map((column) => (
+          <KanbanColumn
+            key={column.id}
+            id={column.id}
+            title={column.title}
+            color={column.color}
+            tasks={column.tasks}
+          />
+        ))}
+      </div>
     </div>
   );
 }

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) => (

components/kanban/TaskCard.tsx

@@ -27,83 +27,74 @@ export function TaskCard({ task }: TaskCardProps) {
   };
 
   return (
-    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4 hover:shadow-md transition-shadow cursor-pointer">
-      {/* En-tête avec emojis */}
-      {emojis.length > 0 && (
-        <div className="flex gap-1 mb-2">
-          {emojis.map((emoji, index) => (
-            <span key={index} className="text-lg">
-              {emoji}
-            </span>
-          ))}
-        </div>
-      )}
+    <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-lg p-3 hover:bg-slate-800/80 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group">
+      {/* Header tech avec titre et status */}
+      <div className="flex items-start gap-2 mb-2">
+        {emojis.length > 0 && (
+          <div className="flex gap-1 flex-shrink-0">
+            {emojis.slice(0, 2).map((emoji, index) => (
+              <span key={index} className="text-sm opacity-80">
+                {emoji}
+              </span>
+            ))}
+          </div>
+        )}
+        
+        <h4 className="font-mono text-sm font-medium text-slate-100 leading-tight line-clamp-2 flex-1">
+          {titleWithoutEmojis}
+        </h4>
+        
+        {/* Indicateur de priorité tech */}
+        <div className={`w-2 h-2 rounded-full flex-shrink-0 mt-1 animate-pulse ${
+          task.priority === 'high' ? 'bg-red-400 shadow-red-400/50 shadow-sm' :
+          task.priority === 'medium' ? 'bg-yellow-400 shadow-yellow-400/50 shadow-sm' : 
+          'bg-slate-500'
+        }`} />
+      </div>
 
-      {/* Titre */}
-      <h4 className="font-medium text-gray-900 dark:text-white mb-2 line-clamp-2">
-        {titleWithoutEmojis}
-      </h4>
-
-      {/* Description si présente */}
+      {/* Description tech */}
       {task.description && (
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
+        <p className="text-xs text-slate-400 mb-3 line-clamp-1 font-mono">
           {task.description}
         </p>
       )}
 
-      {/* Tags */}
-      <div className="flex flex-wrap gap-1 mb-3">
-        {/* Priorité */}
-        <span className={`px-2 py-1 rounded-full text-xs font-medium ${priorityColors[task.priority]}`}>
-          {task.priority}
-        </span>
-
-        {/* Source */}
-        <span className={`px-2 py-1 rounded-full text-xs font-medium ${sourceColors[task.source as keyof typeof sourceColors]}`}>
-          {task.source}
-        </span>
-
-        {/* Tags personnalisés */}
-        {task.tags && task.tags.length > 0 && (
-          task.tags.slice(0, 2).map((tag, index) => (
+      {/* Tags tech style */}
+      {task.tags && task.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1 mb-3">
+          {task.tags.slice(0, 3).map((tag, index) => (
             <span 
               key={index}
-              className="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+              className="px-2 py-1 rounded text-xs font-mono font-bold bg-cyan-950/50 text-cyan-300 border border-cyan-500/30 hover:bg-cyan-950/80 transition-colors"
             >
-              #{tag}
+              {tag}
             </span>
-          ))
-        )}
-      </div>
-
-      {/* Footer avec dates */}
-      <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-        <div>
-          {task.dueDate && (
-            <span className="flex items-center gap-1">
-              📅 {formatDistanceToNow(new Date(task.dueDate), { 
-                addSuffix: true, 
-                locale: fr 
-              })}
+          ))}
+          {task.tags.length > 3 && (
+            <span className="px-2 py-1 rounded text-xs font-mono text-slate-500 border border-slate-600">
+              +{task.tags.length - 3}
             </span>
           )}
         </div>
-        
-        <div>
-          {task.completedAt ? (
-            <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
-              ✅ {formatDistanceToNow(new Date(task.completedAt), { 
+      )}
+
+      {/* Footer tech avec séparateur néon */}
+      <div className="pt-2 border-t border-slate-700/50">
+        <div className="flex items-center justify-between text-xs">
+          {task.dueDate ? (
+            <span className="flex items-center gap-1 text-slate-400 font-mono">
+              <span className="text-cyan-400">⏰</span>
+              {formatDistanceToNow(new Date(task.dueDate), { 
                 addSuffix: true, 
                 locale: fr 
               })}
             </span>
           ) : (
-            <span>
-              Créé {formatDistanceToNow(new Date(task.createdAt), { 
-                addSuffix: true, 
-                locale: fr 
-              })}
-            </span>
+            <span className="text-slate-600 font-mono">--:--</span>
+          )}
+          
+          {task.completedAt && (
+            <span className="text-emerald-400 font-mono font-bold">✓ DONE</span>
           )}
         </div>
       </div>

components/ui/Header.tsx

@@ -12,43 +12,46 @@ interface HeaderProps {
 
 export function Header({ title, subtitle, stats }: HeaderProps) {
   return (
-    <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
-      <div className="container mx-auto px-4 py-6">
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          {/* Titre et sous-titre */}
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-              {title}
-            </h1>
-            <p className="text-gray-600 dark:text-gray-400 mt-1">
-              {subtitle}
-            </p>
+    <header className="bg-slate-900/80 backdrop-blur-sm border-b border-slate-700/50 shadow-lg shadow-slate-900/20">
+      <div className="container mx-auto px-6 py-4">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
+          {/* Titre tech avec glow */}
+          <div className="flex items-center gap-4">
+            <div className="w-3 h-3 bg-cyan-400 rounded-full animate-pulse shadow-cyan-400/50 shadow-lg"></div>
+            <div>
+              <h1 className="text-2xl font-mono font-bold text-slate-100 tracking-wider">
+                {title}
+              </h1>
+              <p className="text-slate-400 mt-1 font-mono text-sm">
+                {subtitle}
+              </p>
+            </div>
           </div>
 
-          {/* Statistiques */}
-          <div className="flex flex-wrap gap-4">
+          {/* Stats tech dashboard */}
+          <div className="flex flex-wrap gap-3">
             <StatCard 
-              label="Total" 
-              value={stats.total} 
+              label="TOTAL" 
+              value={String(stats.total).padStart(2, '0')} 
               color="blue"
             />
             <StatCard 
-              label="Terminées" 
-              value={stats.completed} 
+              label="DONE" 
+              value={String(stats.completed).padStart(2, '0')} 
               color="green"
             />
             <StatCard 
-              label="En cours" 
-              value={stats.inProgress} 
+              label="ACTIVE" 
+              value={String(stats.inProgress).padStart(2, '0')} 
               color="yellow"
             />
             <StatCard 
-              label="À faire" 
-              value={stats.todo} 
+              label="QUEUE" 
+              value={String(stats.todo).padStart(2, '0')} 
               color="gray"
             />
             <StatCard 
-              label="Taux" 
+              label="RATE" 
               value={`${stats.completionRate}%`} 
               color="purple"
             />
@@ -66,20 +69,47 @@ interface StatCardProps {
 }
 
 function StatCard({ label, value, color }: StatCardProps) {
-  const colorClasses = {
-    blue: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-800',
-    green: 'bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800',
-    yellow: 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-800',
-    gray: 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700',
-    purple: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/20 dark:text-purple-300 dark:border-purple-800'
+  const techStyles = {
+    blue: {
+      bg: 'bg-slate-800/50',
+      border: 'border-cyan-500/30',
+      text: 'text-cyan-300',
+      glow: 'shadow-cyan-500/20'
+    },
+    green: {
+      bg: 'bg-slate-800/50',
+      border: 'border-emerald-500/30',
+      text: 'text-emerald-300',
+      glow: 'shadow-emerald-500/20'
+    },
+    yellow: {
+      bg: 'bg-slate-800/50',
+      border: 'border-yellow-500/30',
+      text: 'text-yellow-300',
+      glow: 'shadow-yellow-500/20'
+    },
+    gray: {
+      bg: 'bg-slate-800/50',
+      border: 'border-slate-500/30',
+      text: 'text-slate-300',
+      glow: 'shadow-slate-500/20'
+    },
+    purple: {
+      bg: 'bg-slate-800/50',
+      border: 'border-purple-500/30',
+      text: 'text-purple-300',
+      glow: 'shadow-purple-500/20'
+    }
   };
 
+  const style = techStyles[color];
+
   return (
-    <div className={`px-3 py-2 rounded-lg border text-sm font-medium ${colorClasses[color]}`}>
-      <div className="text-xs opacity-75 uppercase tracking-wide">
+    <div className={`${style.bg} ${style.border} border rounded-lg px-3 py-2 ${style.glow} shadow-lg backdrop-blur-sm hover:${style.border.replace('/30', '/50')} transition-all duration-300`}>
+      <div className={`text-xs font-mono font-bold ${style.text} opacity-75 uppercase tracking-wider`}>
         {label}
       </div>
-      <div className="text-lg font-bold">
+      <div className={`text-lg font-mono font-bold ${style.text}`}>
         {value}
       </div>
     </div>