Utilisation Bars Team Block for React

Edit PEOPLE and THRESHOLD at the top of the file. A person is a name, a role, their tasks, the points they carry now and their capacity in points; utilisation is points over that person's own capacity, so a part-timer with less capacity is measured fairly. The team average, the count over the line, each bar and the line itself all follow from these.

Each row draws a one-pixel segment at the threshold across its own bar and a little past it, so the segments join into one continuous line down the list; the line passes behind the percentage and status text rather than through it. A label above the first row names it. The bars and the line are hidden from assistive technology, and the percentage and status are written as text.

The control is a radio group named Sort by, with Load and Name: Tab moves into it and the arrow keys move between the options, choosing as they go. A polite status line says what happened ("Sorted by load, Devi Kapoor first"). Load puts the heaviest first; Name is A to Z. Re-sorting moves the rows but the block keeps its height.

Colour is kept for the page's one call to action. A bar over the threshold is the full foreground tone with a warning-triangle icon and the words "Over 85%"; one within it is a lighter tone with a check and "Within". The numbers are written too, so nothing relies on seeing the bar.

The block fades up once on load and the team average rolls to its number once when it comes into view; the bars are drawn at their values. With reduced motion the fade is off and the average shows its final number.

The band stacks its facts above the sort control. Each row keeps the avatar, the name block (role, tasks and points) and the percentage with its status at the end, and the bar spans the full width under the name. The 85% line and its label stay aligned from row to row, and nothing scrolls sideways at 320 pixels.