feat(01-04): PhaseTimeline — timeline laterale con indicatori, progress bar per fase, task list
- Layout a due colonne: indicatore cerchio (sinistra) + card fase (destra) - Icone SVG inline per stato fase (done/active/upcoming) e task (done/in_progress/todo) - Badge stato fase con colori semantici (verde/blu/grigio) - Progress bar per fase con contatore task done/totale - Task list con line-through per done, testo grigio chiaro - Deliverable annidati sotto ogni task con badge "Approvato" se approved - Linea verticale tra fasi (non sull'ultima)
This commit is contained in:
Simone Cavalli
@@ -0,0 +1,229 @@
|
||||
import type { ClientView } from '@/lib/client-view';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface PhaseTimelineProps {
|
||||
phases: ClientView['phases'];
|
||||
}
|
||||
|
||||
function PhaseStatusIcon({ status }: { status: 'upcoming' | 'active' | 'done' }) {
|
||||
if (status === 'done') {
|
||||
return (
|
||||
<svg
|
||||
className="w-5 h-5 text-[#16a34a]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
if (status === 'active') {
|
||||
return (
|
||||
<svg
|
||||
className="w-5 h-5 text-[#0066cc]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg
|
||||
className="w-5 h-5 text-[#999999]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx={12} cy={12} r={9} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskStatusIcon({ status }: { status: 'todo' | 'in_progress' | 'done' }) {
|
||||
if (status === 'done') {
|
||||
return (
|
||||
<svg
|
||||
className="w-4 h-4 text-[#16a34a] shrink-0 mt-0.5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
if (status === 'in_progress') {
|
||||
return (
|
||||
<svg
|
||||
className="w-4 h-4 text-[#ca8a04] shrink-0 mt-0.5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg
|
||||
className="w-4 h-4 text-[#999999] shrink-0 mt-0.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx={12} cy={12} r={9} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const phaseStatusLabel: Record<'upcoming' | 'active' | 'done', string> = {
|
||||
upcoming: 'In arrivo',
|
||||
active: 'In corso',
|
||||
done: 'Completata',
|
||||
};
|
||||
|
||||
const phaseStatusStyle: Record<'upcoming' | 'active' | 'done', string> = {
|
||||
upcoming: 'border-transparent bg-[#999999] text-white',
|
||||
active: 'border-transparent bg-[#0066cc] text-white',
|
||||
done: 'border-transparent bg-[#16a34a] text-white',
|
||||
};
|
||||
|
||||
export function PhaseTimeline({ phases }: PhaseTimelineProps) {
|
||||
if (phases.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-[#999999] italic">
|
||||
Nessuna fase ancora configurata.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-0">
|
||||
{phases.map((phase, index) => {
|
||||
const doneCount = phase.tasks.filter((t) => t.status === 'done').length;
|
||||
const isLast = index === phases.length - 1;
|
||||
|
||||
return (
|
||||
<div key={phase.id} className="flex gap-5">
|
||||
{/* Colonna sinistra: indicatore timeline */}
|
||||
<div className="flex flex-col items-center">
|
||||
{/* Cerchio con icona stato */}
|
||||
<div className="w-10 h-10 rounded-full bg-white border-2 border-[#e5e5e5] flex items-center justify-center shrink-0 z-10">
|
||||
<PhaseStatusIcon status={phase.status} />
|
||||
</div>
|
||||
{/* Linea verticale verso la fase successiva */}
|
||||
{!isLast && (
|
||||
<div className="flex-1 w-px bg-[#e5e5e5] my-2" style={{ minHeight: '2rem' }} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Colonna destra: contenuto fase */}
|
||||
<div className={`flex-1 ${isLast ? 'pb-0' : 'pb-6'}`}>
|
||||
<Card className="rounded-lg border border-[#e5e5e5] bg-white shadow-none p-5">
|
||||
{/* Header fase */}
|
||||
<div className="flex items-start justify-between gap-3 mb-4">
|
||||
<h3 className="text-base font-bold text-[#1a1a1a] leading-snug">
|
||||
{phase.title}
|
||||
</h3>
|
||||
<Badge className={`text-xs shrink-0 ${phaseStatusStyle[phase.status]}`}>
|
||||
{phaseStatusLabel[phase.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Barra progresso fase (D-08) */}
|
||||
<div className="mb-5">
|
||||
<div className="flex justify-between items-center mb-1.5">
|
||||
<p className="text-xs text-[#666666] font-medium">
|
||||
{doneCount} di {phase.tasks.length} task
|
||||
</p>
|
||||
<p className="text-xs font-semibold text-[#1a1a1a]">
|
||||
{phase.progress_pct}%
|
||||
</p>
|
||||
</div>
|
||||
<Progress value={phase.progress_pct} className="h-1.5" />
|
||||
</div>
|
||||
|
||||
{/* Lista task */}
|
||||
{phase.tasks.length === 0 ? (
|
||||
<p className="text-xs text-[#999999] italic">
|
||||
Nessun task ancora configurato.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{phase.tasks.map((task) => (
|
||||
<li key={task.id} className="flex items-start gap-2.5">
|
||||
<TaskStatusIcon status={task.status} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p
|
||||
className={`text-sm leading-snug ${
|
||||
task.status === 'done'
|
||||
? 'line-through text-[#999999]'
|
||||
: 'text-[#1a1a1a]'
|
||||
}`}
|
||||
>
|
||||
{task.title}
|
||||
</p>
|
||||
{task.description && (
|
||||
<p className="text-xs text-[#999999] mt-0.5 leading-snug">
|
||||
{task.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Deliverable annidati */}
|
||||
{task.deliverables.length > 0 && (
|
||||
<ul className="mt-1.5 space-y-1">
|
||||
{task.deliverables.map((d) => (
|
||||
<li
|
||||
key={d.id}
|
||||
className="flex items-center justify-between gap-2 bg-[#f9f9f9] rounded px-2 py-1"
|
||||
>
|
||||
<span className="text-xs text-[#666666] truncate">
|
||||
{d.title}
|
||||
</span>
|
||||
{d.status === 'approved' && (
|
||||
<Badge className="text-xs border-transparent bg-[#16a34a] text-white shrink-0">
|
||||
Approvato
|
||||
</Badge>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user