feat: add clsx and tailwind-merge dependencies, enhance Kanban components

- Added `clsx` and `tailwind-merge` to `package.json` and `package-lock.json` for improved class management and utility merging.
- Updated `Column` and `TaskCard` components to utilize new UI components (`Card`, `Badge`) for a more cohesive design.
- Refactored styles in `Header` and Kanban components to align with the new design system.
- Marked several tasks as completed in `TODO.md` reflecting progress on UI enhancements.

components/ui/Header.tsx

@@ -1,3 +1,5 @@
+import { Card, CardContent } from '@/components/ui/Card';
+
 interface HeaderProps {
   title: string;
   subtitle: string;
@@ -69,49 +71,25 @@ interface StatCardProps {
 }
 
 function StatCard({ label, value, color }: StatCardProps) {
-  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 textColors = {
+    blue: 'text-cyan-300',
+    green: 'text-emerald-300',
+    yellow: 'text-yellow-300', 
+    gray: 'text-slate-300',
+    purple: 'text-purple-300'
   };
 
-  const style = techStyles[color];
-
   return (
-    <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-mono font-bold ${style.text}`}>
-        {value}
-      </div>
-    </div>
+    <Card variant="elevated" className="px-3 py-2 hover:border-opacity-75 transition-all duration-300">
+      <CardContent className="p-0">
+        <div className={`text-xs font-mono font-bold ${textColors[color]} opacity-75 uppercase tracking-wider`}>
+          {label}
+        </div>
+        <div className={`text-lg font-mono font-bold ${textColors[color]}`}>
+          {value}
+        </div>
+      </CardContent>
+    </Card>
   );
 }