shadcn.io is not affiliated with official shadcn/ui
Inventory Levels Dashboard Block for Ark UI
Eight products ranked by days of cover with a reorder tick, a filter for Low and Out, and a reorder plan that works out the arrival date, the stock-out date and the days uncovered from a quantity you type.
Installation
Overview
Decide what to order and how much, with this inventory levels panel for React with Ark UI. A hairline frame with a plus mark on each corner holds a table of eight products ranked by days of cover, which is stock divided by the average sold a day, with a bar for each and a tick at its reorder point (the supplier's lead time plus three days). The status word (Out, Low, Enough or Draft saved) pairs with a shaped dot, and a Toggle Group in the header shows All, Low or Out. Choosing a product opens its plan in the side cell: type a quantity in the Number Input and it works out, from a fixed today, the date the order arrives, the date stock runs out, how many days go uncovered between the two and the cover after the order lands. The Shine Button saves a purchase order draft, which is kept in the page and marks the row; the empty state of a filter appears once every Low product has a draft. Nothing is sent to a supplier. Below the medium breakpoint the plan stacks under the table and the stock and sales fold under the name. It's built from Number Input, Toggle Group, Shine Button, Empty and Guides. For stockroom and purchasing staff.
FAQ
How do I use my own products?
Edit PRODUCTS: each has its stock, the average units sold a day, the supplier's lead time in days and the pack size orders come in. AS_OF_MS is the fixed day the dates count from. Cover, the reorder point, the status, the suggested quantity and every date in the plan are derived.
How are the dates worked out?
The arrival is today plus the lead time. Stock runs out on today plus the whole days of cover, and the uncovered days are the lead time minus that cover, never below zero; a product with no stock is out already and is uncovered for the whole lead time. Cover after the order lands counts what sells while it is on the way. All of it uses UTC dates from a typed day, never the clock.
Where does the suggested quantity come from?
It covers the lead time plus 30 days of sales at the current rate, less what is on the shelf, rounded up to whole packs and never below one pack. It is a starting point; type any quantity and the plan follows.
What stays local, and how do I wire it for real?
Stock is typed and drafts live in component state, so a reload clears them. To make it real, read stock and sales from your inventory system, save the draft as a purchase order for the supplier, and mark a row on order only once the supplier confirms.