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/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>