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/app/globals.css

@@ -24,6 +24,30 @@
   --gray-light: #e5e7eb; /* gray-200 */
 }
 
+.light {
+  /* Light theme explicit */
+  --background: #f1f5f9; /* slate-100 */
+  --foreground: #0f172a; /* slate-900 */
+  --card: #ffffff; /* white */
+  --card-hover: #f8fafc; /* slate-50 */
+  --card-column: #f8fafc; /* slate-50 */
+  --border: #cbd5e1; /* slate-300 */
+  --input: #ffffff; /* white */
+  --primary: #0891b2; /* cyan-600 */
+  --primary-foreground: #ffffff; /* white */
+  --muted: #94a3b8; /* slate-400 */
+  --muted-foreground: #64748b; /* slate-500 */
+  --accent: #d97706; /* amber-600 */
+  --destructive: #dc2626; /* red-600 */
+  --success: #059669; /* emerald-600 */
+  --purple: #8b5cf6; /* purple-500 */
+  --yellow: #eab308; /* yellow-500 */
+  --green: #059669; /* emerald-600 */
+  --blue: #2563eb; /* blue-600 */
+  --gray: #6b7280; /* gray-500 */
+  --gray-light: #e5e7eb; /* gray-200 */
+}
+
 .dark {
   /* Dark theme override */
   --background: #1e293b; /* slate-800 - encore plus clair */

src/components/dashboard/DashboardStats.tsx

@@ -2,6 +2,7 @@
 
 import { TaskStats } from '@/lib/types';
 import { Card } from '@/components/ui/Card';
+import { StatCard, ProgressBar } from '@/components/ui';
 import { getDashboardStatColors } from '@/lib/status-config';
 
 interface DashboardStatsProps {
@@ -18,78 +19,56 @@ export function DashboardStats({ stats }: DashboardStatsProps) {
       title: 'Total Tâches',
       value: stats.total,
       icon: '📋',
-      type: 'total' as const,
+      color: 'default' as const
-      ...getDashboardStatColors('total')
     },
     {
       title: 'À Faire',
       value: stats.todo,
       icon: '⏳',
-      type: 'todo' as const,
+      color: 'warning' as const
-      ...getDashboardStatColors('todo')
     },
     {
       title: 'En Cours',
       value: stats.inProgress,
       icon: '🔄',
-      type: 'inProgress' as const,
+      color: 'primary' as const
-      ...getDashboardStatColors('inProgress')
     },
     {
       title: 'Terminées',
       value: stats.completed,
       icon: '✅',
-      type: 'completed' as const,
+      color: 'success' as const
-      ...getDashboardStatColors('completed')
     }
   ];
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
       {statCards.map((stat, index) => (
-        <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
+        <StatCard
-          <div className="flex items-center justify-between">
+          key={index}
-            <div>
+          title={stat.title}
-              <p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">
+          value={stat.value}
-                {stat.title}
+          icon={stat.icon}
-              </p>
+          color={stat.color}
-              <p className={`text-3xl font-bold ${stat.textColor}`}>
+        />
-                {stat.value}
-              </p>
-            </div>
-            <div className="text-3xl">
-              {stat.icon}
-            </div>
-          </div>
-        </Card>
       ))}
       
       {/* Cartes de pourcentage */}
       <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-2 lg:col-span-2">
         <h3 className="text-lg font-semibold mb-4">Taux de Completion</h3>
         <div className="space-y-4">
-          <div className="flex items-center justify-between">
+          <ProgressBar
-            <span className="text-sm font-medium">Terminées</span>
+            value={completionRate}
-            <span className={`font-bold ${getDashboardStatColors('completed').textColor}`}>{completionRate}%</span>
+            label="Terminées"
-          </div>
+            color="success"
-          <div className="w-full bg-gray-200 rounded-full h-2">
-            <div 
-              className={`h-2 rounded-full transition-all duration-300 ${getDashboardStatColors('completed').progressColor}`}
-              style={{ width: `${completionRate}%` }}
           />
-          </div>
           
-          <div className="flex items-center justify-between">
+          <ProgressBar
-            <span className="text-sm font-medium">En Cours</span>
+            value={inProgressRate}
-            <span className={`font-bold ${getDashboardStatColors('inProgress').textColor}`}>{inProgressRate}%</span>
+            label="En Cours"
-          </div>
+            color="primary"
-          <div className="w-full bg-gray-200 rounded-full h-2">
-            <div 
-              className={`h-2 rounded-full transition-all duration-300 ${getDashboardStatColors('inProgress').progressColor}`}
-              style={{ width: `${inProgressRate}%` }}
           />
         </div>
-        </div>
       </Card>
       
       {/* Insights rapides */}

src/components/dashboard/ProductivityAnalytics.tsx

@@ -4,7 +4,7 @@ import { CompletionTrendChart } from '@/components/charts/CompletionTrendChart';
 import { VelocityChart } from '@/components/charts/VelocityChart';
 import { PriorityDistributionChart } from '@/components/charts/PriorityDistributionChart';
 import { WeeklyStatsCard } from '@/components/charts/WeeklyStatsCard';
-import { Card } from '@/components/ui/Card';
+import { Card, MetricCard } from '@/components/ui';
 import { DeadlineOverview } from '@/components/deadline/DeadlineOverview';
 
 interface ProductivityAnalyticsProps {
@@ -71,42 +71,33 @@ export function ProductivityAnalytics({ metrics, deadlineMetrics }: Productivity
       <Card className="p-6">
         <h3 className="text-lg font-semibold mb-4">💡 Insights</h3>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--primary)]/50 transition-colors">
+          <MetricCard
-            <div className="text-[var(--primary)] font-medium text-sm mb-1">
+            title="Vélocité Moyenne"
-              Vélocité Moyenne
+            value={`${metrics.velocityData.length > 0 
-            </div>
-            <div className="text-2xl font-bold text-[var(--foreground)]">
-              {metrics.velocityData.length > 0 
               ? Math.round(metrics.velocityData.reduce((acc, item) => acc + item.completed, 0) / metrics.velocityData.length)
               : 0
-              } <span className="text-sm font-normal text-[var(--muted-foreground)]">tâches/sem</span>
+            } tâches/sem`}
-            </div>
+            color="primary"
-          </div>
+          />
           
-          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--success)]/50 transition-colors">
+          <MetricCard
-            <div className="text-[var(--success)] font-medium text-sm mb-1">
+            title="Priorité Principale"
-              Priorité Principale
+            value={metrics.priorityDistribution.reduce((max, item) => 
-            </div>
-            <div className="text-lg font-bold text-[var(--foreground)]">
-              {metrics.priorityDistribution.reduce((max, item) => 
               item.count > max.count ? item : max, 
               metrics.priorityDistribution[0]
             )?.priority || 'N/A'}
-            </div>
+            color="success"
-          </div>
+          />
           
-          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--accent)]/50 transition-colors">
+          <MetricCard
-            <div className="text-[var(--accent)] font-medium text-sm mb-1">
+            title="Taux de Completion"
-              Taux de Completion
+            value={`${(() => {
-            </div>
-            <div className="text-2xl font-bold text-[var(--foreground)]">
-              {(() => {
               const completed = metrics.statusFlow.find(s => s.status === 'Terminé')?.count || 0;
               const total = metrics.statusFlow.reduce((acc, s) => acc + s.count, 0);
               return total > 0 ? Math.round((completed / total) * 100) : 0;
-              })()}%
+            })()}%`}
-            </div>
+            color="warning"
-          </div>
+          />
         </div>
       </Card>
     </div>

src/components/dashboard/QuickActions.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import { useState } from 'react';
-import { Button } from '@/components/ui/Button';
+import { ActionCard } from '@/components/ui';
 import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
 import { CreateTaskData } from '@/clients/tasks-client';
-import Link from 'next/link';
 
 interface QuickActionsProps {
   onCreateTask: (data: CreateTaskData) => Promise<void>;
@@ -21,65 +20,54 @@ export function QuickActions({ onCreateTask }: QuickActionsProps) {
   return (
     <>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-        <Button
+        <ActionCard
-          variant="primary"
+          title="Nouvelle Tâche"
-          onClick={() => setIsCreateModalOpen(true)}
+          description="Créer une nouvelle tâche"
-          className="flex items-center gap-2 p-6 h-auto"
+          icon={
-        >
             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
             </svg>
-          <div className="text-left">
+          }
-            <div className="font-semibold">Nouvelle Tâche</div>
+          onClick={() => setIsCreateModalOpen(true)}
-            <div className="text-sm opacity-80">Créer une nouvelle tâche</div>
+          variant="primary"
-          </div>
+        />
-        </Button>
 
-        <Link href="/kanban">
+        <ActionCard
-          <Button
+          title="Kanban Board"
-            variant="secondary"
+          description="Gérer les tâches"
-            className="flex items-center gap-2 p-6 h-auto w-full"
+          icon={
-          >
             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 0V5a2 2 0 012-2h2a2 2 0 002-2" />
             </svg>
-            <div className="text-left">
+          }
-              <div className="font-semibold">Kanban Board</div>
+          href="/kanban"
-              <div className="text-sm opacity-80">Gérer les tâches</div>
-            </div>
-          </Button>
-        </Link>
-
-        <Link href="/daily">
-          <Button
           variant="secondary"
-            className="flex items-center gap-2 p-6 h-auto w-full"
+        />
-          >
+
+        <ActionCard
+          title="Daily"
+          description="Checkboxes quotidiennes"
+          icon={
             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
-            <div className="text-left">
+          }
-              <div className="font-semibold">Daily</div>
+          href="/daily"
-              <div className="text-sm opacity-80">Checkboxes quotidiennes</div>
-            </div>
-          </Button>
-        </Link>
-
-        <Link href="/settings">
-          <Button
           variant="secondary"
-            className="flex items-center gap-2 p-6 h-auto w-full"
+        />
-          >
+
+        <ActionCard
+          title="Paramètres"
+          description="Configuration"
+          icon={
             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
             </svg>
-            <div className="text-left">
+          }
-              <div className="font-semibold">Paramètres</div>
+          href="/settings"
-              <div className="text-sm opacity-80">Configuration</div>
+          variant="secondary"
-            </div>
+        />
-          </Button>
-        </Link>
       </div>
 
       <CreateTaskForm

src/components/dashboard/RecentTasks.tsx

@@ -4,9 +4,9 @@ import { Task } from '@/lib/types';
 import { Card } from '@/components/ui/Card';
 import { TagDisplay } from '@/components/ui/TagDisplay';
 import { formatDateShort } from '@/lib/date-utils';
-import { Badge } from '@/components/ui/Badge';
+import { TaskCard } from '@/components/ui';
 import { useTasksContext } from '@/contexts/TasksContext';
-import { getPriorityConfig, getPriorityColorHex, getStatusBadgeClasses, getStatusLabel } from '@/lib/status-config';
+import { getPriorityConfig, getStatusLabel } from '@/lib/status-config';
 import { TaskPriority } from '@/lib/types';
 import Link from 'next/link';
 
@@ -22,17 +22,6 @@ export function RecentTasks({ tasks }: RecentTasksProps) {
     .sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())
     .slice(0, 5);
 
-  // Fonctions simplifiées utilisant la configuration centralisée
-
-  const getPriorityStyle = (priority: string) => {
-    try {
-      const config = getPriorityConfig(priority as TaskPriority);
-      const hexColor = getPriorityColorHex(config.color);
-      return { color: hexColor };
-    } catch {
-      return { color: '#6b7280' }; // gray-500 par défaut
-    }
-  };
 
   return (
     <Card className="p-6 mt-8">
@@ -56,70 +45,35 @@ export function RecentTasks({ tasks }: RecentTasksProps) {
       ) : (
         <div className="space-y-3">
           {recentTasks.map((task) => (
-            <div
+            <TaskCard
               key={task.id}
-              className="p-3 border border-[var(--border)] rounded-lg hover:bg-[var(--card)]/50 transition-colors"
+              title={task.title}
-            >
+              description={task.description}
-              <div className="flex items-start justify-between gap-3">
+              status={getStatusLabel(task.status)}
-                <div className="flex-1 min-w-0">
+              priority={task.priority ? (() => {
-                  <div className="flex items-center gap-2 mb-1">
-                    <h4 className="font-medium text-sm truncate">{task.title}</h4>
-                    {task.source === 'jira' && (
-                      <Badge variant="outline" className="text-xs">
-                        Jira
-                      </Badge>
-                    )}
-                  </div>
-                  
-                  {task.description && (
-                    <p className="text-xs text-[var(--muted-foreground)] mb-2 line-clamp-1">
-                      {task.description}
-                    </p>
-                  )}
-                  
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <Badge className={`text-xs ${getStatusBadgeClasses(task.status)}`}>
-                      {getStatusLabel(task.status)}
-                    </Badge>
-                    
-                    {task.priority && (
-                      <span 
-                        className="text-xs font-medium"
-                        style={getPriorityStyle(task.priority)}
-                      >
-                        {(() => {
                 try {
                   return getPriorityConfig(task.priority as TaskPriority).label;
                 } catch {
                   return task.priority;
                 }
-                        })()}
+              })() : undefined}
-                      </span>
+              tags={task.tags && task.tags.length > 0 ? [
-                    )}
-                    
-                    {task.tags && task.tags.length > 0 && (
-                      <div className="flex gap-1">
                 <TagDisplay 
+                  key="tags"
                   tags={task.tags.slice(0, 2)} 
                   availableTags={availableTags}
                   size="sm" 
                   maxTags={2}
                   showColors={true}
-                        />
+                />,
-                        {task.tags.length > 2 && (
+                ...(task.tags.length > 2 ? [
-                          <span className="text-xs text-[var(--muted-foreground)]">
+                  <span key="more" className="text-xs text-[var(--muted-foreground)]">
                     +{task.tags.length - 2}
                   </span>
-                        )}
+                ] : [])
-                      </div>
+              ] : undefined}
-                    )}
+              metadata={formatDateShort(task.updatedAt)}
-                  </div>
+              actions={
-                </div>
-                
-                <div className="flex items-center gap-2">
-                  <div className="text-xs text-[var(--muted-foreground)] whitespace-nowrap">
-                    {formatDateShort(task.updatedAt)}
-                  </div>
                 <Link 
                   href={`/kanban?taskId=${task.id}`}
                   className="p-1 rounded hover:bg-[var(--muted)]/50 transition-colors"
@@ -129,9 +83,8 @@ export function RecentTasks({ tasks }: RecentTasksProps) {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                   </svg>
                 </Link>
-                </div>
+              }
-              </div>
+            />
-            </div>
           ))}
         </div>
       )}

src/components/ui-showcase/UIShowcaseClient.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
 'use client';
 
 import { useState } from 'react';
@@ -7,6 +8,7 @@ import { Alert, AlertTitle, AlertDescription } from '@/components/ui/Alert';
 import { Input } from '@/components/ui/Input';
 import { StyledCard } from '@/components/ui/StyledCard';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
+import { StatCard, ProgressBar, ActionCard, TaskCard, MetricCard } from '@/components/ui';
 import { ThemeSelector } from '@/components/ThemeSelector';
 
 export function UIShowcaseClient() {
@@ -315,6 +317,251 @@ export function UIShowcaseClient() {
           </div>
         </section>
 
+        {/* Dashboard Components Section */}
+        <section className="space-y-8">
+          <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
+            Dashboard Components
+          </h2>
+          
+          {/* Stat Cards */}
+          <div className="space-y-6">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">Stat Cards</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="default"
+                </div>
+                <StatCard
+                  title="Total Tâches"
+                  value={42}
+                  icon="📋"
+                  color="default"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="primary"
+                </div>
+                <StatCard
+                  title="En Cours"
+                  value={8}
+                  icon="🔄"
+                  color="primary"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="success"
+                </div>
+                <StatCard
+                  title="Terminées"
+                  value={28}
+                  icon="✅"
+                  color="success"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="warning"
+                </div>
+                <StatCard
+                  title="En Attente"
+                  value={6}
+                  icon="⏳"
+                  color="warning"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Progress Bars */}
+          <div className="space-y-6">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">Progress Bars</h3>
+            <div className="space-y-4 max-w-md">
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="success"
+                </div>
+                <ProgressBar
+                  value={75}
+                  label="Completion Rate"
+                  color="success"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="primary"
+                </div>
+                <ProgressBar
+                  value={45}
+                  label="En Cours"
+                  color="primary"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="warning"
+                </div>
+                <ProgressBar
+                  value={20}
+                  label="En Attente"
+                  color="warning"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="default"
+                </div>
+                <ProgressBar
+                  value={90}
+                  label="Performance"
+                  color="default"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Action Cards */}
+          <div className="space-y-6">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">Action Cards</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  variant="primary"
+                </div>
+                <ActionCard
+                  title="Nouvelle Tâche"
+                  description="Créer une nouvelle tâche"
+                  icon={
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                    </svg>
+                  }
+                  onClick={() => alert('Action clicked!')}
+                  variant="primary"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  variant="secondary"
+                </div>
+                <ActionCard
+                  title="Kanban Board"
+                  description="Gérer les tâches"
+                  icon={
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 0V5a2 2 0 012-2h2a2 2 0 002-2" />
+                    </svg>
+                  }
+                  href="#"
+                  variant="secondary"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  variant="ghost"
+                </div>
+                <ActionCard
+                  title="Paramètres"
+                  description="Configuration"
+                  icon={
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  }
+                  href="#"
+                  variant="ghost"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Task Cards */}
+          <div className="space-y-6">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">Task Cards</h3>
+            <div className="space-y-3 max-w-2xl">
+              <TaskCard
+                title="Refactoriser le système de thèmes"
+                description="Améliorer la gestion des thèmes avec CSS variables"
+                status="En Cours"
+                priority="Haute"
+                tags={[
+                  <Badge key="tag1" variant="primary" className="text-xs">Frontend</Badge>,
+                  <Badge key="tag2" variant="success" className="text-xs">UI</Badge>
+                ]}
+                metadata="Il y a 2h"
+                actions={
+                  <button className="p-1 rounded hover:bg-[var(--muted)]/50 transition-colors">
+                    <svg className="w-3 h-3 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                  </button>
+                }
+              />
+              
+              <TaskCard
+                title="Créer les composants UI réutilisables"
+                description="Développer une bibliothèque de composants cohérente"
+                status="Terminé"
+                priority="Moyenne"
+                tags={[
+                  <Badge key="tag1" variant="accent" className="text-xs">Design</Badge>
+                ]}
+                metadata="Hier"
+                actions={
+                  <button className="p-1 rounded hover:bg-[var(--muted)]/50 transition-colors">
+                    <svg className="w-3 h-3 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                  </button>
+                }
+              />
+            </div>
+          </div>
+
+          {/* Metric Cards */}
+          <div className="space-y-6">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">Metric Cards</h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="primary"
+                </div>
+                <MetricCard
+                  title="Vélocité Moyenne"
+                  value="12 tâches/sem"
+                  color="primary"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="success"
+                </div>
+                <MetricCard
+                  title="Priorité Principale"
+                  value="Haute"
+                  color="success"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
+                  color="warning"
+                </div>
+                <MetricCard
+                  title="Taux de Completion"
+                  value="85%"
+                  color="warning"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* Footer */}
         <div className="text-center pt-8 border-t border-[var(--border)]">
           <p className="text-[var(--muted-foreground)]">

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';

src/services/core/user-preferences.ts

@@ -5,6 +5,7 @@ import {
   ColumnVisibility,
   UserPreferences,
   JiraConfig,
+  Theme,
 } from '@/lib/types';
 import { TfsConfig } from '@/services/integrations/tfs';
 import { prisma } from './database';
@@ -213,7 +214,7 @@ class UserPreferencesService {
   /**
    * Récupère uniquement le thème pour le SSR (optimisé)
    */
-  async getTheme(): Promise<'light' | 'dark'> {
+  async getTheme(): Promise<Theme> {
     try {
       const userPrefs = await this.getOrCreateUserPreferences();
       const viewPrefs = userPrefs.viewPreferences as ViewPreferences;