Capacity Planner Team Block for React

Edit PROJECTS, PEOPLE, MAX_INCOMING and START_INCOMING at the top of the file. A person has a capacity in points and an allocation array with one number per project, in the order of PROJECTS. Free capacity, the legend's totals, the shared scale of the bars and who fits are all computed, so a new person or project needs no other edit.

It's a labelled slider ("Incoming work (points)") with a step of one: the arrow keys move by one, Page Up and Page Down by more, Home and End to the ends, and its value is read as "12 points". A polite line under it says how many people have room ("1 of 6 people have room for 12 points"), and each row says "Could take it" with a check, or "Short by 8" with a no-entry icon. A hidden sentence on every row reads its allocation by project.

Each segment is a project in a tone of the foreground colour, darkest to lightest, with its points inside; the legend names the three. The muted remainder is free capacity and the hatched piece is the incoming work, in the space that is free. The bars are drawn and hidden from assistive technology; the row's text and its hidden sentence carry the same numbers, so no figure is only visible.

Every track is drawn on one scale, the biggest capacity in the list, so a part-timer's 20 points really is a shorter bar than a full-timer's 32. That also keeps the hatched piece honest: the same number of points is the same length on every row.

The slider is Base UI's, named through aria-labelledby with a hidden label, with its range and thumb in the foreground colour.

Wherever it runs, the value text, the step and the count of who fits behave the same.

The copy and the slider come first, then the legend, then the six rows. Each row keeps the avatar, name and free capacity on one line with the bar under it; the bars shrink to fit and the numbers inside the segments stay readable. Nothing scrolls sideways at 320 pixels.