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

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { Button } from './Button';
+import { cn } from '@/lib/utils';
+
+interface ActionCardProps {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  href?: string;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  className?: string;
+}
+
+export function ActionCard({ 
+  title, 
+  description, 
+  icon, 
+  onClick, 
+  href,
+  variant = 'secondary',
+  className 
+}: ActionCardProps) {
+  const content = (
+    <Button
+      variant={variant}
+      onClick={onClick}
+      className={cn("flex items-center gap-3 p-6 h-auto text-left justify-start w-full", className)}
+    >
+      {icon && (
+        <div className="flex-shrink-0">
+          {icon}
+        </div>
+      )}
+      <div className="flex-1 min-w-0">
+        <div className={`font-semibold ${
+          variant === 'primary' 
+            ? 'text-[var(--primary-foreground)]' 
+            : 'text-[var(--foreground)]'
+        }`}>
+          {title}
+        </div>
+        {description && (
+          <div className={`text-sm ${
+            variant === 'primary' 
+              ? 'text-[var(--primary-foreground)] opacity-60' 
+              : 'text-[var(--muted-foreground)]'
+          }`}>
+            {description}
+          </div>
+        )}
+      </div>
+    </Button>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className="block">
+        {content}
+      </a>
+    );
+  }
+
+  return content;
+}

src/components/ui/Badge.tsx

@@ -2,11 +2,12 @@ import { HTMLAttributes, forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
 interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
-  variant?: 'default' | 'primary' | 'success' | 'destructive' | 'accent' | 'purple' | 'yellow' | 'green' | 'blue' | 'gray';
+  variant?: 'default' | 'primary' | 'success' | 'destructive' | 'accent' | 'purple' | 'yellow' | 'green' | 'blue' | 'gray' | 'outline' | 'danger' | 'warning';
+  size?: 'sm' | 'md' | 'lg';
 }
 
 const Badge = forwardRef<HTMLDivElement, BadgeProps>(
-  ({ className, variant = 'default', ...props }, ref) => {
+  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
     const variants = {
       default: 'bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)]',
       primary: 'bg-[color-mix(in_srgb,var(--primary)_10%,transparent)] text-[var(--primary)] border border-[color-mix(in_srgb,var(--primary)_25%,var(--border))]',
@@ -17,15 +18,25 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
       yellow: 'bg-[color-mix(in_srgb,var(--yellow)_10%,transparent)] text-[var(--yellow)] border border-[color-mix(in_srgb,var(--yellow)_25%,var(--border))]',
       green: 'bg-[color-mix(in_srgb,var(--green)_10%,transparent)] text-[var(--green)] border border-[color-mix(in_srgb,var(--green)_25%,var(--border))]',
       blue: 'bg-[color-mix(in_srgb,var(--blue)_10%,transparent)] text-[var(--blue)] border border-[color-mix(in_srgb,var(--blue)_25%,var(--border))]',
-      gray: 'bg-[color-mix(in_srgb,var(--gray)_10%,transparent)] text-[var(--gray)] border border-[color-mix(in_srgb,var(--gray)_25%,var(--border))]'
+      gray: 'bg-[color-mix(in_srgb,var(--gray)_10%,transparent)] text-[var(--gray)] border border-[color-mix(in_srgb,var(--gray)_25%,var(--border))]',
+      outline: 'bg-transparent text-[var(--foreground)] border border-[var(--border)]',
+      danger: 'bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] text-[var(--destructive)] border border-[color-mix(in_srgb,var(--destructive)_25%,var(--border))]',
+      warning: 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] text-[var(--accent)] border border-[color-mix(in_srgb,var(--accent)_25%,var(--border))]'
+    };
+
+    const sizes = {
+      sm: 'px-2 py-0.5 text-xs',
+      md: 'px-2.5 py-0.5 text-xs',
+      lg: 'px-3 py-1 text-sm'
     };
 
     return (
       <div
         ref={ref}
         className={cn(
-          'inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium transition-colors',
+          'inline-flex items-center rounded-md font-medium transition-colors',
           variants[variant],
+          sizes[size],
           className
         )}
         {...props}

src/components/ui/Button.tsx

@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes, forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'success' | 'selected';
+  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'success' | 'selected' | 'danger';
   size?: 'sm' | 'md' | 'lg';
 }
 
@@ -14,7 +14,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ghost: 'text-[var(--foreground)] hover:bg-[var(--card-hover)]',
       destructive: 'bg-[var(--destructive)] text-white hover:bg-[color-mix(in_srgb,var(--destructive)_90%,transparent)]',
       success: 'bg-[var(--success)] text-white hover:bg-[color-mix(in_srgb,var(--success)_90%,transparent)]',
-      selected: 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)] hover:bg-[color-mix(in_srgb,var(--primary)_20%,transparent)]'
+      selected: 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)] hover:bg-[color-mix(in_srgb,var(--primary)_20%,transparent)]',
+      danger: 'bg-[var(--destructive)] text-white hover:bg-[color-mix(in_srgb,var(--destructive)_90%,transparent)]'
     };
 
     const sizes = {

src/components/ui/Input.tsx

@@ -3,6 +3,8 @@ import { cn } from '@/lib/utils';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   variant?: 'default' | 'error';
+  label?: string;
+  error?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(

src/components/ui/MetricCard.tsx

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { Card } from './Card';
+import { cn } from '@/lib/utils';
+
+interface MetricCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon?: ReactNode;
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';
+  className?: string;
+}
+
+const colorVariants = {
+  default: {
+    title: 'text-[var(--foreground)]',
+    value: 'text-[var(--foreground)]',
+    border: 'border-[var(--border)] hover:border-[var(--primary)]/50'
+  },
+  primary: {
+    title: 'text-[var(--primary)]',
+    value: 'text-[var(--foreground)]',
+    border: 'border-[var(--border)] hover:border-[var(--primary)]/50'
+  },
+  success: {
+    title: 'text-[var(--success)]',
+    value: 'text-[var(--foreground)]',
+    border: 'border-[var(--border)] hover:border-[var(--success)]/50'
+  },
+  warning: {
+    title: 'text-[var(--accent)]',
+    value: 'text-[var(--foreground)]',
+    border: 'border-[var(--border)] hover:border-[var(--accent)]/50'
+  },
+  destructive: {
+    title: 'text-[var(--destructive)]',
+    value: 'text-[var(--foreground)]',
+    border: 'border-[var(--border)] hover:border-[var(--destructive)]/50'
+  }
+};
+
+export function MetricCard({ 
+  title, 
+  value, 
+  subtitle,
+  icon,
+  color = 'default',
+  className 
+}: MetricCardProps) {
+  const colors = colorVariants[color];
+  
+  return (
+    <Card className={cn(
+      "p-4 rounded-lg border transition-colors",
+      colors.border,
+      className
+    )}>
+      <div className="space-y-2">
+        <div className={cn("font-medium text-sm", colors.title)}>
+          {title}
+        </div>
+        <div className={cn("text-2xl font-bold", colors.value)}>
+          {value}
+        </div>
+        {subtitle && (
+          <div className="text-sm text-[var(--muted-foreground)]">
+            {subtitle}
+          </div>
+        )}
+        {icon && (
+          <div className="text-lg">
+            {icon}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

src/components/ui/ProgressBar.tsx

@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils';
+
+interface ProgressBarProps {
+  value: number; // 0-100
+  label?: string;
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';
+  showPercentage?: boolean;
+  className?: string;
+}
+
+const colorVariants = {
+  default: 'bg-[var(--primary)]',
+  primary: 'bg-[var(--primary)]',
+  success: 'bg-[var(--success)]',
+  warning: 'bg-[var(--accent)]',
+  destructive: 'bg-[var(--destructive)]'
+};
+
+export function ProgressBar({ 
+  value, 
+  label, 
+  color = 'default',
+  showPercentage = true,
+  className 
+}: ProgressBarProps) {
+  const clampedValue = Math.min(Math.max(value, 0), 100);
+  
+  return (
+    <div className={cn("space-y-2", className)}>
+      {(label || showPercentage) && (
+        <div className="flex items-center justify-between">
+          {label && (
+            <span className="text-sm font-medium text-[var(--foreground)]">
+              {label}
+            </span>
+          )}
+          {showPercentage && (
+            <span className="text-sm font-medium text-[var(--muted-foreground)]">
+              {Math.round(clampedValue)}%
+            </span>
+          )}
+        </div>
+      )}
+      
+      <div className="w-full bg-[var(--border)] rounded-full h-2">
+        <div 
+          className={cn(
+            "h-2 rounded-full transition-all duration-300",
+            colorVariants[color]
+          )}
+          style={{ width: `${clampedValue}%` }}
+        />
+      </div>
+    </div>
+  );
+}

src/components/ui/StatCard.tsx

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { Card } from './Card';
+import { cn } from '@/lib/utils';
+
+interface StatCardProps {
+  title: string;
+  value: number | string;
+  icon?: ReactNode;
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';
+  className?: string;
+}
+
+const colorVariants = {
+  default: 'text-[var(--foreground)]',
+  primary: 'text-[var(--primary)]',
+  success: 'text-[var(--success)]',
+  warning: 'text-[var(--accent)]',
+  destructive: 'text-[var(--destructive)]'
+};
+
+export function StatCard({ 
+  title, 
+  value, 
+  icon, 
+  color = 'default',
+  className 
+}: StatCardProps) {
+  return (
+    <Card className={cn("p-6 hover:shadow-lg transition-shadow", className)}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">
+            {title}
+          </p>
+          <p className={cn("text-3xl font-bold", colorVariants[color])}>
+            {value}
+          </p>
+        </div>
+        {icon && (
+          <div className="text-3xl">
+            {icon}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

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>
+  );
+}

src/components/ui/index.ts

@@ -5,6 +5,13 @@ export { Alert, AlertTitle, AlertDescription } from './Alert';
 export { Input } from './Input';
 export { StyledCard } from './StyledCard';
 
+// Composants Dashboard
+export { StatCard } from './StatCard';
+export { ProgressBar } from './ProgressBar';
+export { ActionCard } from './ActionCard';
+export { TaskCard } from './TaskCard';
+export { MetricCard } from './MetricCard';
+
 // Composants existants
 export { Card, CardHeader, CardTitle, CardContent, CardFooter } from './Card';
 export { Header } from './Header';