Member Usage Breakdown Billing Block for React

Edit MEMBERS: each has a name, an email and one number per metric (gb, requests, cost). To add a metric, add its field to the members, a line to METRICS with its label, unit and step, its first heavy-user line to FIRST_LIMITS, and a case in amountOf and unitText. Ranking, shares and the sentence are derived, and shares are rounded so that they always add to 100.

Members are ranked from the largest down, and each one's running share is the total of their share and every share above them. The bar draws the earlier members in a light tone and the member's own slice solid, so the bar ends where the running figure says. The sentence counts how many members it takes to pass 80%.

Any member whose amount is above it gets a flag and a text label, and the heading counts them. Each metric remembers its own line, so switching to Requests shows 50,000 and switching back brings your GB figure back. Set a limit per member only notes the figure on this page; in your app, send it to your limits API and show the response in the same status line.

It has a caption that names the ranking, column headers, and each member's name as the row header. A flagged row says "Over" and the line in words, never a colour alone, and unflagged rows keep the space so rows don't change height when you move the line. The bars repeat the numbers and are hidden from assistive technology.

The select is the sort: the table is always ranked by the metric you choose, largest first, and ties are broken by name. That keeps the running share meaningful, since it only makes sense in ranked order.

The toolbar wraps, the table keeps two columns (the member and what they used) with their share and running share written under the name, and the limit button sits in a foot at the bottom of the screen.