Project progress is a gradient bar and a row of dots

The client portal shows project progress with two visual elements — a gradient progress bar and a row of coloured dots. The MilestoneTimeline component counts how many milestones are marked DONE, divides by the total, and renders a percentage-width bar with a cyan-to-emerald gradient. Below the bar, each milestone is a dot and a label. Emerald for done. Cyan with a glow shadow for the active milestone. Dim white for milestones that have not started. The same pattern carries through to deliverables. The DeliverableTimeline uses a vertical connector line with four status colours — dim white for pending, glowing cyan for in progress, orange for delivered, emerald for approved. Each deliverable shows its title, description, due date, and whether a file is attached. The ProjectCard on the dashboard wraps the MilestoneTimeline inside a link, so tapping a project shows at-a-glance progress before you even open it. The status badge in the corner uses the same colour language — cyan for active, orange for in review, emerald for completed, dim for on hold. Every status has a Record mapping it to a dot class, a badge class, and a label. Adding a new status means adding one entry to the record. The entire visual system for tracking project progress across all five service types is built from two timeline components, a few coloured dots, and one gradient bar.