Spend by Project Billing Block for React

Everything comes from two constants at the top of the file. ACCOUNT holds the hard cap in dollars, the period's first and last day, the day the spend runs through and the same day of the period before (all ISO dates, written in UTC so they read the same in every time zone). PROJECTS lists each project's name, team, spend so far, prior (what it had spent on the same days last period, which is what the trend compares with), its budget and its alert as a percent of the budget. Replace them with your own metering, and pass them in as props if the page fetches them.

It marks the alert threshold: the share of the budget at which you want a warning. The bar fills in your foreground color up to it, takes the warning tone from the tick on and the destructive tone once spend passes the budget. The tick moves as soon as you change the alert, so you can see what an 80% alert means in dollars before you save; the dollar value is written in the line under the bar too.

"Edit budget" opens the budget and the alert for that row and moves focus to the budget field; the same button becomes "Done". Nothing is sent yet. Done closes the row and keeps your changes, which show as "Budget $1,800 (was $1,500)", and the footer counts the unsaved changes. "Save budgets" applies all of them in one step. Typed values are held between the limits in LIMITS (a budget from $50 up to the hard cap, an alert from 50 to 100%), and an empty or out of range value falls back to the saved one.

The Data List shows the budgets set so far and says "over the cap" when they pass it. Saving then refuses: the footer says by how much the budgets overshoot, and focus moves to the first row you changed, so you can lower it. The cap itself isn't edited here; it belongs on its own account screen, because lifting it changes what you can be billed. The line under the total says what happens when spend reaches it, so write what your product really does.

The section is headed by an h2 and each project by an h3, followed by its team and any state badge. The spend is read as "Spent $1,285", the trend as "+18% on the same days last period, to Sep 12", and the line under the bar as the budget and the alert in dollars. The bars repeat what the text says, so they're hidden from assistive technology. The edit button is named for its project ("Edit budget for Edge gateway") and reports aria-expanded, each field is named for its project, and a polite status line in the footer reads out what was set, saved or refused.

Each row becomes a card: the project and its "Edit budget" button on one line, then the spend and its trend, then the bar and its line. The steppers hide below the sm breakpoint so both fields fit on one line; the number keypad still opens. The footer rides at the bottom of the panel while you scroll, with the status and "Save budgets". Nothing scrolls sideways at 320 px.