e6d24f2693
- Added `cancelled` and `freeze` statuses to `TasksResponse`, `HomePageClientProps`, and `useTasks` for comprehensive task tracking. - Updated task forms to dynamically load statuses using `getAllStatuses`, enhancing maintainability and reducing hardcoded values. - Refactored Kanban components to utilize centralized status configuration, improving consistency across the application. - Adjusted visibility toggle and swimlanes to reflect new status options, ensuring a seamless user experience.
117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
import { TaskStatus } from './types';
|
|
|
|
export interface StatusConfig {
|
|
key: TaskStatus;
|
|
label: string;
|
|
icon: string;
|
|
color: 'gray' | 'blue' | 'green' | 'red' | 'purple';
|
|
order: number;
|
|
}
|
|
|
|
export const STATUS_CONFIG: Record<TaskStatus, StatusConfig> = {
|
|
todo: {
|
|
key: 'todo',
|
|
label: 'À faire',
|
|
icon: '⚡',
|
|
color: 'gray',
|
|
order: 1
|
|
},
|
|
in_progress: {
|
|
key: 'in_progress',
|
|
label: 'En cours',
|
|
icon: '🔄',
|
|
color: 'blue',
|
|
order: 2
|
|
},
|
|
freeze: {
|
|
key: 'freeze',
|
|
label: 'Gelé',
|
|
icon: '🧊',
|
|
color: 'purple',
|
|
order: 3
|
|
},
|
|
done: {
|
|
key: 'done',
|
|
label: 'Terminé',
|
|
icon: '✓',
|
|
color: 'green',
|
|
order: 4
|
|
},
|
|
cancelled: {
|
|
key: 'cancelled',
|
|
label: 'Annulé',
|
|
icon: '✕',
|
|
color: 'red',
|
|
order: 5
|
|
}
|
|
} as const;
|
|
|
|
// Utilitaires pour récupérer facilement les infos
|
|
export const getStatusConfig = (status: TaskStatus): StatusConfig => {
|
|
return STATUS_CONFIG[status];
|
|
};
|
|
|
|
export const getAllStatuses = (): StatusConfig[] => {
|
|
return Object.values(STATUS_CONFIG).sort((a, b) => a.order - b.order);
|
|
};
|
|
|
|
export const getStatusLabel = (status: TaskStatus): string => {
|
|
return STATUS_CONFIG[status].label;
|
|
};
|
|
|
|
export const getStatusIcon = (status: TaskStatus): string => {
|
|
return STATUS_CONFIG[status].icon;
|
|
};
|
|
|
|
export const getStatusColor = (status: TaskStatus): StatusConfig['color'] => {
|
|
return STATUS_CONFIG[status].color;
|
|
};
|
|
|
|
// Configuration des couleurs tech/cyberpunk
|
|
export const TECH_STYLES = {
|
|
gray: {
|
|
border: 'border-slate-700',
|
|
glow: 'shadow-slate-500/20',
|
|
accent: 'text-slate-400',
|
|
badge: 'bg-slate-800 text-slate-300 border border-slate-600'
|
|
},
|
|
blue: {
|
|
border: 'border-cyan-500/30',
|
|
glow: 'shadow-cyan-500/20',
|
|
accent: 'text-cyan-400',
|
|
badge: 'bg-cyan-950 text-cyan-300 border border-cyan-500/30'
|
|
},
|
|
green: {
|
|
border: 'border-emerald-500/30',
|
|
glow: 'shadow-emerald-500/20',
|
|
accent: 'text-emerald-400',
|
|
badge: 'bg-emerald-950 text-emerald-300 border border-emerald-500/30'
|
|
},
|
|
red: {
|
|
border: 'border-red-500/30',
|
|
glow: 'shadow-red-500/20',
|
|
accent: 'text-red-400',
|
|
badge: 'bg-red-950 text-red-300 border border-red-500/30'
|
|
},
|
|
purple: {
|
|
border: 'border-purple-500/30',
|
|
glow: 'shadow-purple-500/20',
|
|
accent: 'text-purple-400',
|
|
badge: 'bg-purple-950 text-purple-300 border border-purple-500/30'
|
|
}
|
|
} as const;
|
|
|
|
export const getTechStyle = (color: StatusConfig['color']) => {
|
|
return TECH_STYLES[color];
|
|
};
|
|
|
|
export const getBadgeVariant = (color: StatusConfig['color']): 'success' | 'primary' | 'danger' | 'default' => {
|
|
switch (color) {
|
|
case 'green': return 'success';
|
|
case 'blue':
|
|
case 'purple': return 'primary';
|
|
case 'red': return 'danger';
|
|
default: return 'default';
|
|
}
|
|
};
|