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.

TODO.md

@@ -146,7 +146,7 @@
 
 ## Autre Todo
 - [x] Avoir un bouton pour réduire/agrandir la font des taches dans les kanban (swimlane et classique)
-- [ ] Refactorer les couleurs des priorités dans un seul endroit
+- [x] Refactorer les couleurs des priorités dans un seul endroit
 - [x] Settings synchro Jira : ajouter une liste de projet à ignorer, doit etre pris en compte par le service bien sur
 - [ ] faire des pages à part entière dpour les sous-pages de la page config + SSR
 - [ ] Système de sauvegarde automatique base de données

components/charts/PriorityDistributionChart.tsx

@@ -2,6 +2,7 @@
 
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend, PieLabelRenderProps } from 'recharts';
 import { Card } from '@/components/ui/Card';
+import { getPriorityChartColor } from '@/lib/status-config';
 
 interface PriorityData {
   priority: string;
@@ -15,14 +16,7 @@ interface PriorityDistributionChartProps {
   title?: string;
 }
 
-// Couleurs pour chaque priorité
+// Couleurs importées depuis la configuration centralisée
-const PRIORITY_COLORS = {
-  'Faible': '#10b981',     // green-500
-  'Moyenne': '#f59e0b',    // amber-500  
-  'Élevée': '#8b5cf6',     // violet-500
-  'Urgente': '#ef4444',    // red-500
-  'Non définie': '#6b7280' // gray-500
-};
 
 export function PriorityDistributionChart({ data, title = "Distribution des Priorités" }: PriorityDistributionChartProps) {
   // Tooltip personnalisé
@@ -86,7 +80,7 @@ export function PriorityDistributionChart({ data, title = "Distribution des Prio
               {data.map((entry, index) => (
                 <Cell 
                   key={`cell-${index}`} 
-                  fill={PRIORITY_COLORS[entry.priority as keyof typeof PRIORITY_COLORS] || '#6b7280'} 
+                  fill={getPriorityChartColor(entry.priority)} 
                 />
               ))}
             </Pie>

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',
+      type: 'total' as const,
-      textColor: 'text-blue-600'
+      ...getDashboardStatColors('total')
     },
     {
       title: 'À Faire',
       value: stats.todo,
       icon: '⏳',
-      color: 'bg-gray-500',
+      type: 'todo' as const,
-      textColor: 'text-gray-600'
+      ...getDashboardStatColors('todo')
     },
     {
       title: 'En Cours',
       value: stats.inProgress,
       icon: '🔄',
-      color: 'bg-orange-500',
+      type: 'inProgress' as const,
-      textColor: 'text-orange-600'
+      ...getDashboardStatColors('inProgress')
     },
     {
       title: 'Terminées',
       value: stats.completed,
       icon: '✅',
-      color: 'bg-green-500',
+      type: 'completed' as const,
-      textColor: 'text-green-600'
+      ...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>

components/dashboard/RecentTasks.tsx

@@ -5,7 +5,7 @@ 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 { getPriorityConfig, getPriorityColorHex, getStatusBadgeClasses, getStatusLabel } from '@/lib/status-config';
 import { TaskPriority } from '@/lib/types';
 import Link from 'next/link';
 
@@ -21,23 +21,7 @@ export function RecentTasks({ tasks }: RecentTasksProps) {
     .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
     .slice(0, 5);
 
-  const getStatusColor = (status: string) => {
+  // Fonctions simplifiées utilisant la configuration centralisée
-    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 {
@@ -93,8 +77,8 @@ export function RecentTasks({ tasks }: RecentTasksProps) {
                   )}
                   
                   <div className="flex items-center gap-2 flex-wrap">
-                    <Badge className={`text-xs ${getStatusColor(task.status)}`}>
+                    <Badge className={`text-xs ${getStatusBadgeClasses(task.status)}`}>
-                      {getStatusText(task.status)}
+                      {getStatusLabel(task.status)}
                     </Badge>
                     
                     {task.priority && (

lib/status-config.ts

@@ -190,12 +190,77 @@ export const getPriorityColor = (priority: TaskPriority): PriorityConfig['color'
   return PRIORITY_CONFIG[priority].color;
 };
 
+// Configuration des couleurs HEX pour les priorités (cohérente avec le design)
+export const PRIORITY_COLOR_MAP = {
+  blue: '#60a5fa',    // blue-400 (low priority)
+  yellow: '#fbbf24',  // amber-400 (medium priority) 
+  purple: '#a78bfa',  // violet-400 (high priority)
+  red: '#f87171'      // red-400 (urgent priority)
+} as const;
+
+// Couleurs alternatives pour les graphiques et charts
+export const PRIORITY_CHART_COLORS = {
+  'Faible': '#10b981',     // green-500 (plus lisible dans les charts)
+  'Moyenne': '#f59e0b',    // amber-500
+  'Élevée': '#8b5cf6',     // violet-500
+  'Urgente': '#ef4444',    // red-500
+  'Non définie': '#6b7280' // gray-500
+} as const;
+
 export const getPriorityColorHex = (color: PriorityConfig['color']): string => {
-  const colorMap = {
+  return PRIORITY_COLOR_MAP[color];
-    blue: '#60a5fa',
+};
-    yellow: '#fbbf24', 
+
-    purple: '#a78bfa',
+// Fonction pour récupérer la couleur d'un chart basée sur le label
-    red: '#f87171'
+export const getPriorityChartColor = (priorityLabel: string): string => {
-  };
+  return PRIORITY_CHART_COLORS[priorityLabel as keyof typeof PRIORITY_CHART_COLORS] || PRIORITY_CHART_COLORS['Non définie'];
-  return colorMap[color];
+};
+
+// Configuration des couleurs pour les badges de statut
+export const STATUS_BADGE_COLORS = {
+  backlog: 'bg-gray-100 text-gray-800',
+  todo: 'bg-gray-100 text-gray-800', 
+  in_progress: 'bg-orange-100 text-orange-800',
+  freeze: 'bg-purple-100 text-purple-800',
+  done: 'bg-green-100 text-green-800',
+  cancelled: 'bg-red-100 text-red-800',
+  archived: 'bg-gray-100 text-gray-600'
+} as const;
+
+// Fonction pour récupérer les classes CSS d'un badge de statut
+export const getStatusBadgeClasses = (status: TaskStatus): string => {
+  return STATUS_BADGE_COLORS[status] || STATUS_BADGE_COLORS.todo;
+};
+
+// Configuration des couleurs pour les cartes de statistiques du dashboard
+export const DASHBOARD_STAT_COLORS = {
+  total: {
+    color: 'bg-blue-500',
+    textColor: 'text-blue-600',
+    progressColor: 'bg-blue-500',
+    dotColor: 'bg-blue-500'
+  },
+  todo: {
+    color: 'bg-gray-500', 
+    textColor: 'text-gray-600',
+    progressColor: 'bg-gray-500',
+    dotColor: 'bg-gray-500'
+  },
+  inProgress: {
+    color: 'bg-orange-500',
+    textColor: 'text-orange-600', 
+    progressColor: 'bg-orange-500',
+    dotColor: 'bg-orange-500'
+  },
+  completed: {
+    color: 'bg-green-500',
+    textColor: 'text-green-600',
+    progressColor: 'bg-green-500', 
+    dotColor: 'bg-green-500'
+  }
+} as const;
+
+// Fonction pour récupérer les couleurs d'une stat du dashboard
+export const getDashboardStatColors = (statType: keyof typeof DASHBOARD_STAT_COLORS) => {
+  return DASHBOARD_STAT_COLORS[statType];
 };