Swimlane Projects Team Block for React

Edit PROJECTS, WEEKS and NOW at the top of the file. A project is a name, the person's part in it, the first and last week it runs (start, end), the allocation it takes while it runs and a state (active, done or planned). The bars' places, every week's total, the busiest stretch in the header and the table are computed from those, so adding a project adds a lane and a row.

A dated plan goes stale the day after it is installed. The weeks are "1 to 12" of the plan and NOW says which one it is; the shaded column and the "Now" label follow it. Replace the labels with your own calendar if you want dates.

The drawing is hidden from assistive technology; the table holds the same facts (project, role, weeks, time and status, with the busiest stretch as its last line). From md the table is visually hidden but in the page, so screen readers always read it; below md it is the visible version, with the role under the project name and the time under the weeks.

For each week it adds the allocation of every project that is running in it. Under 80% is a light tint, 80% to 100% a step darker, and anything over 100% is solid with a warning triangle and the number in bold. The header says in words which weeks those are, so the lane never has to be decoded by tone alone.

Bars keep to foreground tones: a solid bar is work in progress, a light one is finished, a dashed outline is planned. Each also says its status in a word with an icon at its end (a check in a circle, a check, a clock), so the status reads in greyscale and in every theme.

The block fades up once when the page loads, with a CSS transition that is off under reduced motion. There is no script: the lanes, totals and table are drawn once from the data, so the block works the same on every target.