diff --git a/src/components/phase-timeline.tsx b/src/components/phase-timeline.tsx new file mode 100644 index 0000000..a7f46fb --- /dev/null +++ b/src/components/phase-timeline.tsx @@ -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 ( + + ); + } + if (status === 'active') { + return ( + + ); + } + return ( + + ); +} + +function TaskStatusIcon({ status }: { status: 'todo' | 'in_progress' | 'done' }) { + if (status === 'done') { + return ( + + ); + } + if (status === 'in_progress') { + return ( + + ); + } + return ( + + ); +} + +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 ( +

+ Nessuna fase ancora configurata. +

+ ); + } + + return ( +
+ {phases.map((phase, index) => { + const doneCount = phase.tasks.filter((t) => t.status === 'done').length; + const isLast = index === phases.length - 1; + + return ( +
+ {/* Colonna sinistra: indicatore timeline */} +
+ {/* Cerchio con icona stato */} +
+ +
+ {/* Linea verticale verso la fase successiva */} + {!isLast && ( +
+ )} +
+ + {/* Colonna destra: contenuto fase */} +
+ + {/* Header fase */} +
+

+ {phase.title} +

+ + {phaseStatusLabel[phase.status]} + +
+ + {/* Barra progresso fase (D-08) */} +
+
+

+ {doneCount} di {phase.tasks.length} task +

+

+ {phase.progress_pct}% +

+
+ +
+ + {/* Lista task */} + {phase.tasks.length === 0 ? ( +

+ Nessun task ancora configurato. +

+ ) : ( +
    + {phase.tasks.map((task) => ( +
  • + +
    +

    + {task.title} +

    + {task.description && ( +

    + {task.description} +

    + )} + + {/* Deliverable annidati */} + {task.deliverables.length > 0 && ( +
      + {task.deliverables.map((d) => ( +
    • + + {d.title} + + {d.status === 'approved' && ( + + Approvato + + )} +
      • + ))} +
    + )} +
    +
    • + ))} +
+ )} + +
+
+ ); + })} +
+ ); +} \ No newline at end of file