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.
118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
interface HeaderProps {
|
|
title: string;
|
|
subtitle: string;
|
|
stats: {
|
|
total: number;
|
|
completed: number;
|
|
inProgress: number;
|
|
todo: number;
|
|
completionRate: number;
|
|
};
|
|
}
|
|
|
|
export function Header({ title, subtitle, stats }: HeaderProps) {
|
|
return (
|
|
<header className="bg-slate-900/80 backdrop-blur-sm border-b border-slate-700/50 shadow-lg shadow-slate-900/20">
|
|
<div className="container mx-auto px-6 py-4">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
|
|
{/* Titre tech avec glow */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-3 h-3 bg-cyan-400 rounded-full animate-pulse shadow-cyan-400/50 shadow-lg"></div>
|
|
<div>
|
|
<h1 className="text-2xl font-mono font-bold text-slate-100 tracking-wider">
|
|
{title}
|
|
</h1>
|
|
<p className="text-slate-400 mt-1 font-mono text-sm">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats tech dashboard */}
|
|
<div className="flex flex-wrap gap-3">
|
|
<StatCard
|
|
label="TOTAL"
|
|
value={String(stats.total).padStart(2, '0')}
|
|
color="blue"
|
|
/>
|
|
<StatCard
|
|
label="DONE"
|
|
value={String(stats.completed).padStart(2, '0')}
|
|
color="green"
|
|
/>
|
|
<StatCard
|
|
label="ACTIVE"
|
|
value={String(stats.inProgress).padStart(2, '0')}
|
|
color="yellow"
|
|
/>
|
|
<StatCard
|
|
label="QUEUE"
|
|
value={String(stats.todo).padStart(2, '0')}
|
|
color="gray"
|
|
/>
|
|
<StatCard
|
|
label="RATE"
|
|
value={`${stats.completionRate}%`}
|
|
color="purple"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
interface StatCardProps {
|
|
label: string;
|
|
value: number | string;
|
|
color: 'blue' | 'green' | 'yellow' | 'gray' | 'purple';
|
|
}
|
|
|
|
function StatCard({ label, value, color }: StatCardProps) {
|
|
const techStyles = {
|
|
blue: {
|
|
bg: 'bg-slate-800/50',
|
|
border: 'border-cyan-500/30',
|
|
text: 'text-cyan-300',
|
|
glow: 'shadow-cyan-500/20'
|
|
},
|
|
green: {
|
|
bg: 'bg-slate-800/50',
|
|
border: 'border-emerald-500/30',
|
|
text: 'text-emerald-300',
|
|
glow: 'shadow-emerald-500/20'
|
|
},
|
|
yellow: {
|
|
bg: 'bg-slate-800/50',
|
|
border: 'border-yellow-500/30',
|
|
text: 'text-yellow-300',
|
|
glow: 'shadow-yellow-500/20'
|
|
},
|
|
gray: {
|
|
bg: 'bg-slate-800/50',
|
|
border: 'border-slate-500/30',
|
|
text: 'text-slate-300',
|
|
glow: 'shadow-slate-500/20'
|
|
},
|
|
purple: {
|
|
bg: 'bg-slate-800/50',
|
|
border: 'border-purple-500/30',
|
|
text: 'text-purple-300',
|
|
glow: 'shadow-purple-500/20'
|
|
}
|
|
};
|
|
|
|
const style = techStyles[color];
|
|
|
|
return (
|
|
<div className={`${style.bg} ${style.border} border rounded-lg px-3 py-2 ${style.glow} shadow-lg backdrop-blur-sm hover:${style.border.replace('/30', '/50')} transition-all duration-300`}>
|
|
<div className={`text-xs font-mono font-bold ${style.text} opacity-75 uppercase tracking-wider`}>
|
|
{label}
|
|
</div>
|
|
<div className={`text-lg font-mono font-bold ${style.text}`}>
|
|
{value}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|