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.
This commit is contained in:
Julien Froidefond
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user