feat: revamp HomePageClient and dashboard layout

- Updated HomePageClient to replace Kanban board with a modern dashboard layout.
- Integrated DashboardStats, QuickActions, and RecentTasks components for enhanced user experience.
- Marked several tasks as complete in TODO.md, including the creation of a new dashboard and quick action features.
- Added navigation link for the new dashboard in the Header component.

components/dashboard/DashboardStats.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { TaskStats } from '@/lib/types';
+import { Card } from '@/components/ui/Card';
+
+interface DashboardStatsProps {
+  stats: TaskStats;
+}
+
+export function DashboardStats({ stats }: DashboardStatsProps) {
+  const totalTasks = stats.total;
+  const completionRate = totalTasks > 0 ? Math.round((stats.completed / totalTasks) * 100) : 0;
+  const inProgressRate = totalTasks > 0 ? Math.round((stats.inProgress / totalTasks) * 100) : 0;
+
+  const statCards = [
+    {
+      title: 'Total Tâches',
+      value: stats.total,
+      icon: '📋',
+      color: 'bg-blue-500',
+      textColor: 'text-blue-600'
+    },
+    {
+      title: 'À Faire',
+      value: stats.todo,
+      icon: '⏳',
+      color: 'bg-gray-500',
+      textColor: 'text-gray-600'
+    },
+    {
+      title: 'En Cours',
+      value: stats.inProgress,
+      icon: '🔄',
+      color: 'bg-orange-500',
+      textColor: 'text-orange-600'
+    },
+    {
+      title: 'Terminées',
+      value: stats.completed,
+      icon: '✅',
+      color: 'bg-green-500',
+      textColor: 'text-green-600'
+    }
+  ];
+
+  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">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">
+                {stat.title}
+              </p>
+              <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">
+            <span className="text-sm font-medium">Terminées</span>
+            <span className="text-green-600 font-bold">{completionRate}%</span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-2">
+            <div 
+              className="bg-green-500 h-2 rounded-full transition-all duration-300"
+              style={{ width: `${completionRate}%` }}
+            />
+          </div>
+          
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">En Cours</span>
+            <span className="text-orange-600 font-bold">{inProgressRate}%</span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-2">
+            <div 
+              className="bg-orange-500 h-2 rounded-full transition-all duration-300"
+              style={{ width: `${inProgressRate}%` }}
+            />
+          </div>
+        </div>
+      </Card>
+      
+      {/* Insights rapides */}
+      <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">Aperçu Rapide</h3>
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+            <span className="text-sm">
+              {stats.completed} tâches terminées sur {totalTasks}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
+            <span className="text-sm">
+              {stats.inProgress} tâches en cours de traitement
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="w-2 h-2 bg-gray-500 rounded-full"></span>
+            <span className="text-sm">
+              {stats.todo} tâches en attente
+            </span>
+          </div>
+          {totalTasks > 0 && (
+            <div className="pt-2 border-t border-[var(--border)]">
+              <span className="text-sm font-medium text-[var(--muted-foreground)]">
+                Productivité: {completionRate}% de completion
+              </span>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}

components/dashboard/QuickActions.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
+import { CreateTaskData } from '@/clients/tasks-client';
+import Link from 'next/link';
+
+interface QuickActionsProps {
+  onCreateTask: (data: CreateTaskData) => Promise<void>;
+}
+
+export function QuickActions({ onCreateTask }: QuickActionsProps) {
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
+  const handleCreateTask = async (data: CreateTaskData) => {
+    await onCreateTask(data);
+    setIsCreateModalOpen(false);
+  };
+
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        <Button
+          variant="primary"
+          onClick={() => setIsCreateModalOpen(true)}
+          className="flex items-center gap-2 p-6 h-auto"
+        >
+          <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>
+            <div className="text-sm opacity-80">Créer une nouvelle tâche</div>
+          </div>
+        </Button>
+
+        <Link href="/kanban">
+          <Button
+            variant="secondary"
+            className="flex items-center gap-2 p-6 h-auto w-full"
+          >
+            <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>
+              <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"
+          >
+            <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>
+              <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"
+          >
+            <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>
+              <div className="text-sm opacity-80">Configuration</div>
+            </div>
+          </Button>
+        </Link>
+      </div>
+
+      <CreateTaskForm
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onSubmit={handleCreateTask}
+        loading={false}
+      />
+    </>
+  );
+}

components/dashboard/RecentTasks.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { Task } from '@/lib/types';
+import { Card } from '@/components/ui/Card';
+import { TagDisplay } from '@/components/ui/TagDisplay';
+import { Badge } from '@/components/ui/Badge';
+import { useTasksContext } from '@/contexts/TasksContext';
+import { getPriorityConfig, getPriorityColorHex } from '@/lib/status-config';
+import Link from 'next/link';
+
+interface RecentTasksProps {
+  tasks: Task[];
+}
+
+export function RecentTasks({ tasks }: RecentTasksProps) {
+  const { tags: availableTags } = useTasksContext();
+  
+  // Prendre les 5 tâches les plus récentes (créées ou modifiées)
+  const recentTasks = tasks
+    .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+    .slice(0, 5);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'todo': return 'bg-gray-100 text-gray-800';
+      case 'inProgress': return 'bg-orange-100 text-orange-800';
+      case 'done': return 'bg-green-100 text-green-800';
+      default: return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'todo': return 'À faire';
+      case 'inProgress': return 'En cours';
+      case 'done': return 'Terminé';
+      default: return status;
+    }
+  };
+
+  const getPriorityStyle = (priority: string) => {
+    try {
+      const config = getPriorityConfig(priority as any);
+      const hexColor = getPriorityColorHex(config.color);
+      return { color: hexColor };
+    } catch {
+      return { color: '#6b7280' }; // gray-500 par défaut
+    }
+  };
+
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold">Tâches Récentes</h3>
+        <Link href="/kanban">
+          <button className="text-sm text-[var(--primary)] hover:underline">
+            Voir toutes
+          </button>
+        </Link>
+      </div>
+      
+      {recentTasks.length === 0 ? (
+        <div className="text-center py-8 text-[var(--muted-foreground)]">
+          <svg className="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+          </svg>
+          <p>Aucune tâche disponible</p>
+          <p className="text-sm">Créez votre première tâche pour commencer</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {recentTasks.map((task) => (
+            <div
+              key={task.id}
+              className="p-3 border border-[var(--border)] rounded-lg hover:bg-[var(--card)]/50 transition-colors"
+            >
+              <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">{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 ${getStatusColor(task.status)}`}>
+                      {getStatusText(task.status)}
+                    </Badge>
+                    
+                    {task.priority && (
+                      <span 
+                        className="text-xs font-medium"
+                        style={getPriorityStyle(task.priority)}
+                      >
+                        {(() => {
+                          try {
+                            return getPriorityConfig(task.priority as any).label;
+                          } catch {
+                            return task.priority;
+                          }
+                        })()}
+                      </span>
+                    )}
+                    
+                    {task.tags && task.tags.length > 0 && (
+                      <div className="flex gap-1">
+                        <TagDisplay 
+                          tags={task.tags.slice(0, 2)} 
+                          availableTags={availableTags}
+                          size="sm" 
+                          maxTags={2}
+                          showColors={true}
+                        />
+                        {task.tags.length > 2 && (
+                          <span className="text-xs text-[var(--muted-foreground)]">
+                            +{task.tags.length - 2}
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                
+                <div className="text-xs text-[var(--muted-foreground)] whitespace-nowrap">
+                  {new Date(task.updatedAt).toLocaleDateString('fr-FR', {
+                    day: 'numeric',
+                    month: 'short'
+                  })}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}