Progress Tracker Table Block for React

From the task counts: the done share is done / (done + review + todo) rounded to a whole percent, the review share likewise, and the rest of the track is empty. The three parts are widths set from CSS variables on the bar, so the bar is plain CSS with no chart code. The last-week line and the plan diamond use the same scale, so they sit exactly where their percentages say.

When the plan's percentage minus the done percentage is more than BEHIND (ten points). The flag is a warning glyph and two words, and the line it sits on is always there, hidden when not needed, so rows never change height. Status carried by colour alone fails for many readers and for greyscale printing; here the words, a sign and an icon carry it and the whole table works in one tone.

Edit INITIATIVES: a name, an owner, the tasks done, in review and not started, the percent done a week ago, the percent the plan wants today and the due date. Progress, change and the flag are derived from those numbers. The array is in due-date order, which is also what a third press on a head returns to.

Progress and Change start with the most first, the second press reverses and the third restores due-date order. The sorted head has aria-sort, the others say none, ties fall to the name and a polite line reads out the order. The rows are rebuilt for each order, so nothing animates under the pointer.

The counts are constants and the sort is one useState; nothing is requested or saved. To use real data, map your tracker's tasks to the three counts and store the previous week's percentage in a weekly snapshot, then pass INITIATIVES in. Nothing else in the table needs to change.

The Owner and Due columns fold into a line under the initiative's name ("Tamsin Okafor, due Nov 6") and the bar keeps its own column with a short caption under it. The change keeps its icon, sign and words. Nothing scrolls sideways at 320 pixels.