feat: add new dashboard components and enhance UI

- Introduced new CSS variables for light theme in `globals.css` to improve visual consistency.
- Replaced `Card` component with `StatCard`, `ProgressBar`, and `MetricCard` in `DashboardStats`, `ProductivityAnalytics`, and `RecentTasks` for better modularity and reusability.
- Updated `QuickActions` to use `ActionCard` for a more cohesive design.
- Enhanced `Badge` and `Button` components with new variants for improved styling options.
- Added new UI showcase section in `UIShowcaseClient` to demonstrate the new dashboard components.

src/components/ui/TaskCard.tsx

@@ -0,0 +1,83 @@
+import { ReactNode } from 'react';
+import { Badge } from './Badge';
+import { cn } from '@/lib/utils';
+
+interface TaskCardProps {
+  title: string;
+  description?: string;
+  status?: string;
+  priority?: string;
+  tags?: ReactNode[];
+  metadata?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function TaskCard({ 
+  title, 
+  description, 
+  status, 
+  priority, 
+  tags, 
+  metadata,
+  actions,
+  className 
+}: TaskCardProps) {
+  return (
+    <div
+      className={cn(
+        "p-3 border border-[var(--border)] rounded-lg hover:bg-[var(--card)]/50 transition-colors",
+        className
+      )}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <h4 className="font-medium text-sm truncate text-[var(--foreground)]">
+              {title}
+            </h4>
+          </div>
+          
+          {description && (
+            <p className="text-xs text-[var(--muted-foreground)] mb-2 line-clamp-1">
+              {description}
+            </p>
+          )}
+          
+          <div className="flex items-center gap-2 flex-wrap">
+            {status && (
+              <Badge variant="outline" className="text-xs">
+                {status}
+              </Badge>
+            )}
+            
+            {priority && (
+              <span className="text-xs font-medium text-[var(--muted-foreground)]">
+                {priority}
+              </span>
+            )}
+            
+            {tags && tags.length > 0 && (
+              <div className="flex gap-1">
+                {tags}
+              </div>
+            )}
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {metadata && (
+            <div className="text-xs text-[var(--muted-foreground)] whitespace-nowrap">
+              {metadata}
+            </div>
+          )}
+          {actions && (
+            <div className="flex items-center gap-1">
+              {actions}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}