Usage Limits Settings Block for React

Edit RESOURCES. Each has an id, a name, a unit for the figures ("seats", "GB", "calls a month"), how much is used, the range its limit may take, and three sentences: what Block, Throttle and Bill extra do at the limit, with {limit} and {next} (the next ordinal, as in 11th) filled in. SAVED is what the account has stored: the default policy, each limit and each row's policy. The sentences, the bars and the counts are all worked out from those.

A row on Default follows the select in the header: its sentence ends with the default in brackets ("default: block") and changes when you change the select. Choosing Block, Throttle or Bill extra on a row pins it, and the select no longer affects it. The select's own choices are the three policies; Default is only a row's way of saying it follows it.

The bar fills, the count in the header says the resource has reached its limit, and the row's sentence starts with what is true now ("Already over by 2.") before it says what the policy does from here. Nothing is refused: the field accepts any value in its range, so an admin can lower a limit ahead of a clean-up.

Everything: the usage figures and prices are typed, nothing is enforced and nothing is billed. Save keeps the settings in this page and says so. To make it real, load each resource's usage from your metering, send the saved limits and policies to the service that enforces them, and take the prices in the "Bill extra" sentences from your price list rather than typing them.

Each row is an item in a labelled list. The usage bar is decorative and named with the same words as the text beside it ("Seats: 7 of 10 seats"); the limit field is named "Seats limit" and the policy group "Seats, at the limit", with the arrow keys moving between its segments. Save and Discard stay focusable while nothing changed, marked aria-disabled, and say so when pressed.

Each resource becomes a stack: its name and use with the bar, the limit field at full width, the four policies across the width, and the sentence, which reserves three lines so a longer one never moves the rows under it. The header's select drops under the sentence and the foot stays pinned to the bottom of the screen.