feat: refactor color management in charts and dashboard

- Replaced hardcoded priority colors in `PriorityDistributionChart` and `DashboardStats` with centralized configuration functions for better maintainability.
- Updated `RecentTasks` to utilize new status badge classes and labels from the centralized configuration.
- Enhanced `status-config.ts` with new functions for retrieving colors and styles, ensuring consistency across components.
- Marked the task for refactoring priority colors in TODO.md as complete.

components/dashboard/DashboardStats.tsx

@@ -2,6 +2,7 @@
 
 import { TaskStats } from '@/lib/types';
 import { Card } from '@/components/ui/Card';
+import { getDashboardStatColors } from '@/lib/status-config';
 
 interface DashboardStatsProps {
   stats: TaskStats;
@@ -17,29 +18,29 @@ export function DashboardStats({ stats }: DashboardStatsProps) {
       title: 'Total Tâches',
       value: stats.total,
       icon: '📋',
-      color: 'bg-blue-500',
-      textColor: 'text-blue-600'
+      type: 'total' as const,
+      ...getDashboardStatColors('total')
     },
     {
       title: 'À Faire',
       value: stats.todo,
       icon: '⏳',
-      color: 'bg-gray-500',
-      textColor: 'text-gray-600'
+      type: 'todo' as const,
+      ...getDashboardStatColors('todo')
     },
     {
       title: 'En Cours',
       value: stats.inProgress,
       icon: '🔄',
-      color: 'bg-orange-500',
-      textColor: 'text-orange-600'
+      type: 'inProgress' as const,
+      ...getDashboardStatColors('inProgress')
     },
     {
       title: 'Terminées',
       value: stats.completed,
       icon: '✅',
-      color: 'bg-green-500',
-      textColor: 'text-green-600'
+      type: 'completed' as const,
+      ...getDashboardStatColors('completed')
     }
   ];
 
@@ -69,22 +70,22 @@ export function DashboardStats({ stats }: DashboardStatsProps) {
         <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>
+            <span className={`font-bold ${getDashboardStatColors('completed').textColor}`}>{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"
+              className={`h-2 rounded-full transition-all duration-300 ${getDashboardStatColors('completed').progressColor}`}
               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>
+            <span className={`font-bold ${getDashboardStatColors('inProgress').textColor}`}>{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"
+              className={`h-2 rounded-full transition-all duration-300 ${getDashboardStatColors('inProgress').progressColor}`}
               style={{ width: `${inProgressRate}%` }}
             />
           </div>
@@ -96,19 +97,19 @@ export function DashboardStats({ stats }: DashboardStatsProps) {
         <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={`w-2 h-2 rounded-full ${getDashboardStatColors('completed').dotColor}`}></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={`w-2 h-2 rounded-full ${getDashboardStatColors('inProgress').dotColor}`}></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={`w-2 h-2 rounded-full ${getDashboardStatColors('todo').dotColor}`}></span>
             <span className="text-sm">
               {stats.todo} tâches en attente
             </span>