Target Ratio Progress Stats Block for React

Edit TEAMS at the top of the file. A team has a name, what it has booked and its quota, both in thousands of dollars. The shares, the gaps, the overall total, the count of teams at quota and the headline are computed from those numbers when the module loads, so nothing else needs editing.

The bar stops at full, because a bar can't be more than whole. The row says so in words, with a check: "Quota met, 18 over". The share at the end still reads the true number, for example 107%.

Whether a team is behind is written in the row ("88 to go"), and a team that has met quota gets a check, so no row relies on colour. The bars use the foreground colour on a muted track, which keeps the block clean in any theme.

The booked half of the ratio rolls up once, when the row scrolls into view, and shows the final figure straight away when motion is reduced. The quota half is plain text. The header fades up once on load.

Each row is a list item with the team as its heading. The bar is a progress bar named with the team, the amount booked, the quota and the share. The ratio keeps its digits left to right in right-to-left layouts.

The ratio stays at display size and the share and the gap stay beside it. Nothing scrolls sideways at 320 pixels.