shadcn.io is not affiliated with official shadcn/ui
Inventory Updated Success Block for React Aria
A confirmation panel for a stock count: tabs for three locations, each a table of SKUs with the count before, the signed change and the count after and the word Low under the reorder point, equal in height, and four sales channels that each say Synced.
Installation
Overview
Show what a stock count changed, place by place, with this confirmation panel for React with React Aria. It is the panel Shelfstack, inventory software, shows once a count has been applied: a header with one action, the Shine Button that opens the audit log, over one framed card in three bands. The first is Tabs for three locations and, under them, a native Table for the one you pick: each SKU's count before, the change with its sign and the count after, and the word Low on a row whose count fell below its reorder point. The second is four sales channels that each say Synced. The third is the live line. For stock, assets, seats and any count that moves in several places.
FAQ
What stays in the page, and how do I wire it for real?
No stock was changed: the fifteen adjustments and the sync times are typed sample data. To wire it, fill PLACES from your count, with each SKU's count before, the change and its reorder point, and CHANNELS from your integrations; the count after, the Low marks, the totals and the sentences are worked out from those.
Why does the panel not move when I change tabs?
The three tables have different numbers of rows (six, five and four), so each one also sits unseen in the same grid cell as the live panel: the tallest sets the height. The copies are hidden from assistive technology and the keyboard, and every row has one fixed height, so the tables line up whichever tab is open.
When does a row say Low?
When the count after the change is below that SKU's reorder point: 11 against 12, for example, or 12 against 15. It is a word with an icon, not a colour, and it says how low the line sits (Reorder at 12). On a phone the same words sit under the SKU, since the Stock column is hidden there.
How are the changes written?
With their sign: a plus for stock added and a minus for stock taken. The sign is drawn for the eye and written out in words for a screen reader (Minus 12), and the figures are plain digits in a left-to-right span so a right-to-left page keeps them in order.