shadcn.io is not affiliated with official shadcn/ui
Inventory Stock Table Block for Solid
A hardware shop's stockroom table with a stepper on every item that adds or removes a pack, a bar with a tick at the reorder point, days of cover and a derived status, and a header that counts the items to reorder.
Installation
Overview
Keep a shelf count honest and see what to reorder, with this inventory table for Solid with Ark UI. Ten items of a hardware shop sit in a native table, each with a stepper (minus, the count, plus) that moves one pack in or out, a bar that draws the stock against a tick at the reorder point, the days of cover that stock lasts at the item's average daily sales, and a status that is worked out rather than typed: Out at none, Low at or below the reorder point, In stock above it. The header counts the items to reorder and updates with every press, and a polite line says what changed. Two Buttons make the stepper, and the bar scale is three times the reorder point, so every tick stands in the same place and the fill shows how far above or below it the stock is. This one is about stock levels; the valuation view is a different block. It's built from Button, Badge and Guides, with a CSS entrance only. For stockrooms, shops and kitchens.
FAQ
How is the status worked out?
From the count and the reorder point alone: none is Out, at or below the reorder point is Low, anything above is In stock. The header's "to reorder" count is every item that is Low or Out, so it changes the moment a press crosses a line.
What is days of cover?
How many days the stock lasts at the item's typed average daily sales, rounded down: 140 hinges at 6 a day is 23 days. It falls as you remove packs and rises as you add them, and it is "0 days" at none.
What does one press change?
One pack, which is typed per item (25 hinges, 50 screws, 6 drill bits). The minus button is disabled at none and the plus button at the most a bin takes, and pressing a waiting button says so in the status line instead of doing nothing. Both buttons are named for the item and the pack, such as "Add a pack of 25 Brass hinges 75 mm".
What changes on a phone?
The Cover and Status columns fold into the item's cell, which shows the status badge and the days of cover under the name. The stepper and the bar stay as the second column, with the bar under the buttons, and every row keeps one height.
Is it accessible?
The table has a caption, heads and row heads. The bar and its tick are decoration; the same facts are in the count, the "reorder at" line and the status word. Every press updates one polite status line, and focus stays on the button you pressed.
What stays local, and how do I wire it for real?
Everything: the ten items are typed in START, and the stepper only changes this page's state. To wire it up, send the new count from step to your inventory API and use what it returns, keep the helpers that derive status and cover, and replace the daily sales figures with your own averages.