Usage Meters Billing Block for React

Everything comes from two constants at the top of the file. ACCOUNT holds the plan's name and three ISO dates: the first and last day of the period and the day it resets. METERS lists each quota's label, used, limit, the unit written after a count ("GB", or empty for plain counts), the noun a screen reader hears, and the next line that says what happens at the limit. Replace them with your own usage data, and pass them in as props if the page fetches them.

toneOf compares used with limit. Below 80% the bar is your foreground color and there is no badge. From 80% up to the limit the bar takes the warning tone and the row gets a "Nearly full" badge. Over the limit the bar fills completely in the destructive tone and the badge says "Over limit"; the count still shows the real number, so 1.08M of 1M reads as it is. Change WARN_AT to move the threshold, and the tick on each bar sits at 80%, so move it with start-[80%] too.

A bar alone doesn't tell anyone whether to worry. The line under each one says what the limit does in your product: new logs are dropped after a day, the oldest logs roll off, extra seats cost a set price, requests are rate limited. It is plain text on the page, not a tooltip, so a phone, a keyboard and a screen reader all get it. Keep your own lines true to what your product does at each limit.

The section is headed by an h2 and each quota by an h3. A row reads as its label, any state badge, then its count and limit, for example "API requests, Over limit, 1.08M of 1M requests, 108%", then the line on what happens next. The bars only repeat what the numbers say, so they're hidden from assistive technology rather than announced twice. Dates sit in time elements and are written in UTC, so the reset day is the same on the server and in every time zone.

They're links. "Upgrade plan" is the one primary action and comes first, so it's the first stop for the keyboard and the top button on a phone; point it at your plan picker, and "Export usage" at your usage export. Each is a Button or Shine Button with render set to an a element and nativeButton={false}.

The heading starts near the top and the upgrade button comes within the first screen. The two buttons stack at full width, and each row folds into one column: the label and count, then the bar and its line. Nothing scrolls sideways.