124e8baee8
- Updated TODO.md to reflect the new project structure and phases, marking several tasks as completed. - Enhanced Kanban components with a tech-inspired design, including new styles for columns and task cards. - Removed the obsolete reminders service and task processor, streamlining the codebase for better maintainability. - Introduced a modern API for task management, including CRUD operations and improved error handling. - Updated global styles for a cohesive dark theme and added custom scrollbar styles.
90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import { Task, TaskStatus } from '@/lib/types';
|
|
import { TaskCard } from './TaskCard';
|
|
|
|
interface KanbanColumnProps {
|
|
id: TaskStatus;
|
|
title: string;
|
|
color: string;
|
|
tasks: Task[];
|
|
}
|
|
|
|
export function KanbanColumn({ id, title, color, tasks }: KanbanColumnProps) {
|
|
// Couleurs tech/cyberpunk
|
|
const techStyles = {
|
|
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'
|
|
}
|
|
};
|
|
|
|
const style = techStyles[color as keyof typeof techStyles];
|
|
|
|
// Icônes tech
|
|
const techIcons = {
|
|
todo: '⚡',
|
|
in_progress: '🔄',
|
|
done: '✓',
|
|
cancelled: '✕'
|
|
};
|
|
|
|
return (
|
|
<div className="flex-shrink-0 w-80 h-full">
|
|
{/* Header tech avec glow */}
|
|
<div className={`bg-slate-900 ${style.border} border rounded-t-lg p-4 ${style.glow} shadow-lg`}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-2 h-2 rounded-full ${style.accent.replace('text-', 'bg-')} animate-pulse`}></div>
|
|
<h3 className={`font-mono text-sm font-bold ${style.accent} uppercase tracking-wider`}>
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
<span className={`${style.badge} px-3 py-1 rounded-full text-xs font-mono font-bold`}>
|
|
{String(tasks.length).padStart(2, '0')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Zone de contenu tech */}
|
|
<div className={`bg-slate-900/80 backdrop-blur-sm ${style.border} border-t-0 border rounded-b-lg p-4 h-[calc(100vh-220px)] overflow-y-auto ${style.glow} shadow-lg`}>
|
|
<div className="space-y-3">
|
|
{tasks.length === 0 ? (
|
|
<div className="text-center py-20">
|
|
<div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800 border-2 border-dashed ${style.border} flex items-center justify-center`}>
|
|
<span className={`text-2xl ${style.accent} opacity-50`}>{techIcons[id]}</span>
|
|
</div>
|
|
<p className="text-xs font-mono text-slate-500 uppercase tracking-wide">NO DATA</p>
|
|
<div className="mt-2 flex justify-center">
|
|
<div className={`w-8 h-0.5 ${style.accent.replace('text-', 'bg-')} opacity-30`}></div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
tasks.map((task) => (
|
|
<TaskCard key={task.id} task={task} />
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|