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.
2025-09-18 13:36:07 +02:00
parent 5d32ba0271
commit 23e3c30126
5 changed files with 96 additions and 52 deletions
--- a/TODO.md
+++ b/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
--- a/components/charts/PriorityDistributionChart.tsx
+++ b/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é
-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
-};
+// Couleurs importées depuis la configuration centralisée

 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>
--- a/components/dashboard/DashboardStats.tsx
+++ b/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>
--- a/components/dashboard/RecentTasks.tsx
+++ b/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) => {
-    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;
-    }
-  };
+  // Fonctions simplifiées utilisant la configuration centralisée

  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)}`}>
-                      {getStatusText(task.status)}
+                    <Badge className={`text-xs ${getStatusBadgeClasses(task.status)}`}>
+                      {getStatusLabel(task.status)}
                    </Badge>
                    
                    {task.priority && (
--- a/lib/status-config.ts
+++ b/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 = {
-    blue: '#60a5fa',
-    yellow: '#fbbf24', 
-    purple: '#a78bfa',
-    red: '#f87171'
-  };
-  return colorMap[color];
+  return PRIORITY_COLOR_MAP[color];
+};
+
+// Fonction pour récupérer la couleur d'un chart basée sur le label
+export const getPriorityChartColor = (priorityLabel: string): string => {
+  return PRIORITY_CHART_COLORS[priorityLabel as keyof typeof PRIORITY_CHART_COLORS] || PRIORITY_CHART_COLORS['Non définie'];
+};
+
+// 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];
 };