No Inventory Empty State Block for React

Everything. The three products, their starting quantities and reorder points and the two shelves are typed in the file, and the switches, the numbers and the crates are state in the page: nothing is counted, saved or synced, and the status line says what changed. To wire it for real, start tracking in your stock system where the code says so, read the quantity and the reorder point from it, and list the products your catalog returns.

From the two numbers you can edit: a row says Reorder when its quantity is at or under its reorder point (the mug starts at 6 against a point of 12), In stock when it is above, and Check when a field holds something that is not a whole number up to five digits. The word has a dot and a weight as well, filled and bold for Reorder, hollow for In stock, so it never depends on color. The same words feed the Locations page, which says how many products on a shelf are to reorder.

Because the word beside them has to follow each keystroke on every library, and a text box with a numeric keyboard does that everywhere. They take whole numbers up to five digits, in any digits your keyboard types (an Arabic-Indic digit is read as an ordinary one), and anything else shows Check. Each is named by its product and its role, for example "Enamel mug, reorder at".

No. It is a fixed height, and only the table scrolls inside it. A row is the same height with the switch off (a dash where the numbers will be) and on (two fields), so switching never moves anything, and the drawn crates keep one SVG whose classes change. On a phone each product is a card with its switch beside its name and the two numbers under it, and the table's Location column moves into the line under the name.

It is the catalog Sidebar used the way every window in this set uses it: Products and Locations are links to local state, the current one is marked, and each name carries its count (for example "Products, 2 tracked"). Collapsed it shows icons with tooltips; below the medium breakpoint it is a sheet opened by the button in the top bar, and choosing a place closes it and returns focus to that button.

Tab runs through the rail, Track stock, the table (each row's switch, then its two fields once it is on) and Start over. A switch is named for its product, and the word beside the numbers is tied to the switch and both fields, so it is read with them. One polite status message says each change in a short sentence, and Start over returns focus to Track stock.