From 23e3c3012698c74a4f73f6cde1c07f097ccab62c Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Thu, 18 Sep 2025 13:36:07 +0200 Subject: [PATCH] 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 | 2 +- .../charts/PriorityDistributionChart.tsx | 12 +-- components/dashboard/DashboardStats.tsx | 31 ++++---- components/dashboard/RecentTasks.tsx | 24 +----- lib/status-config.ts | 79 +++++++++++++++++-- 5 files changed, 96 insertions(+), 52 deletions(-) diff --git a/TODO.md b/TODO.md index f965b5a..69f05f3 100644 --- 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 diff --git a/components/charts/PriorityDistributionChart.tsx b/components/charts/PriorityDistributionChart.tsx index 738b086..e070eb2 100644 --- 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) => ( ))} diff --git a/components/dashboard/DashboardStats.tsx b/components/dashboard/DashboardStats.tsx index e2f492e..717e834 100644 --- 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) {
Terminées - {completionRate}% + {completionRate}%
En Cours - {inProgressRate}% + {inProgressRate}%
@@ -96,19 +97,19 @@ export function DashboardStats({ stats }: DashboardStatsProps) {

Aperçu Rapide

- + {stats.completed} tâches terminées sur {totalTasks}
- + {stats.inProgress} tâches en cours de traitement
- + {stats.todo} tâches en attente diff --git a/components/dashboard/RecentTasks.tsx b/components/dashboard/RecentTasks.tsx index be0b79a..bb19b29 100644 --- 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) { )}
- - {getStatusText(task.status)} + + {getStatusLabel(task.status)} {task.priority && ( diff --git a/lib/status-config.ts b/lib/status-config.ts index 5589675..e6a8814 100644 --- 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]; };