The milestone bar fills with a gradient and glows on the active dot

Every project card in the portal shows a MilestoneTimeline. The component takes a milestones array and renders two things — a progress bar and a dot list. The progress bar is a one-pixel-tall rounded div with a five percent white background. Inside it, a child div fills from left to right with a gradient running from cyan-400 to emerald-400. The width is a percentage calculated from the number of completed milestones divided by the total. Three out of five milestones completed means the bar fills to sixty percent. The bar has role progressbar with aria-valuenow set to the computed percentage, aria-valuemin at zero, aria-valuemax at one hundred, and aria-label reading Project progress followed by the number. Screen readers announce the project's completion state without needing to count dots. Below the bar, each milestone renders as a flex item with a two-pixel dot and a text label. The dot colour comes from a config object keyed by milestone status. Done milestones get emerald-400 — a solid green that matches the right end of the gradient. Active milestones get cyan-400 with a box shadow — zero horizontal, zero vertical, six pixels blur, and the shadow colour at forty percent opacity. That creates the glow. The active dot appears to emit light while the others are flat. Todo milestones get ten percent white — nearly invisible against the dark background, signalling work that has not started. The whole component is forty-nine lines. It takes one prop, computes one percentage, and maps one array. The gradient fill gives a sense of overall momentum. The glowing dot tells you exactly where the work is right now. The dim dots show what is ahead. Three visual signals — fill, glow, dim — from one status field on each milestone record.