Reconciliation Ledger Stats Integration Block for React

They are typed example data in DAYS: a day name, the units Shopify reported, the units Tallybin counted and, for a day that was recounted, the day it was closed. Everything else is worked out from that list: each gap, the totals, the units reconciled in the headline, how many days were recounted and the state words. Wire the list to your own daily counts and nothing else needs editing.

They are units that left stock, the stock movements a sync sees, not orders or customers: the product never asks Shopify for either. The block does not claim anything about how Shopify reports them. The comparison is the fictional product's own reconciliation, and the figures are an example.

The ledger keeps the original difference so the history is honest: the gap column is what the two counts were, and the state column is what was done about it. The headline counts a recounted day as reconciled, and says how many days that was.

It is a real table with a caption, column headers, a row header per day and a total row in a footer. The scroll region around it is focusable with a visible ring, so a keyboard can reach it on a narrow screen, and it is named. The gap uses a minus sign or an equals sign, never colour. Below md the state folds into the day's cell so nothing needs sideways scrolling at common phone widths.

On a phone the table keeps the day, the two counts and the gap in four columns, with the state under the day. In a right-to-left layout the columns mirror with the page, and every number sits in its own isolate so it keeps its own direction. The only motion is the header's fade-up on load, and reduced motion turns it off. The block has no state.