Minimal KPI Bar Stats Block for React

Edit the INVOICES list at the top of the file: each invoice has an amount, the day of the window it was issued and due, and the day it was paid (or null while it is open). Invoiced is the sum of all of them, paid the sum of the paid ones, overdue the open ones whose due day is behind today (WINDOW), and days to get paid the average wait between sending and payment, rounded to whole days. Nothing is typed twice, so the four cells can't disagree. The window is counted in days, never dated, so the copy doesn't go stale.

Each value is the catalog's Counting Number, which counts up once when its cell scrolls into view. With reduced motion, or with scripting off, it shows the final value at once, and screen readers always read the final value, never the numbers in between. The tabular figures keep the cell from shifting while it counts.

This is the bar for a page that wants the numbers and no commentary. If you want the change on the period before, use the connected KPI bar; if you want a trend in each cell, use the trends variant. Adding a line to a cell here means one more dd in the list.

Yes. The figures are a description list: each label is a term and its value the description. Values sit in bdi elements and the dollar sign is kept left to right, so a right-to-left page doesn't move the currency. The header is a real heading, and the cells have no colour to rely on.

The band ends the block. On a page, the next section draws its own top rule along the band's foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The band's top rule comes from the Guides component. If nothing follows the block, add a bottom border to the list's wrapper.

Below lg the four cells sit two by two, meeting at a hairline cross, with smaller values. Each cell lays its label and value on two rows it shares with the cell beside it (a CSS subgrid), so when "Days to get paid" wraps, the values in that row still line up. Nothing scrolls sideways at 320 pixels.