shadcn.io is not affiliated with official shadcn/ui
Inventory Alert Chat Block for Vue
A stockroom bot's alert cards with a tick on each, a state word derived from quantity and reorder point, a bar that selects every low item, and one action that drafts the purchase orders.
Installation
Overview
Reorder stock from the conversation that warns you about it, with this inventory alert chat for Vue with Ark UI. A framed window of fixed height holds the stockroom channel of Stockbrook, a stock-control tool: a bot posts six alert cards, each with a tick, the item, its SKU, the quantity on hand and the reorder point, and a state word with a glyph (Out of stock, Low or Watch) derived from the two numbers. A band in the composer's place counts what is ticked and holds "Select all low" and "Reorder selected"; the action turns the ticked cards into "Reordered" with a supplier line and a delivery date, the bot posts how many draft purchase orders it made, and the band resets. There is no text field, so the block has no primary action: both buttons are Button outlines. It's the starting point for a stock alert feed, a low-supply bot or any list of items to act on in one go.
FAQ
What stays in the page, and how do I make it real?
Everything. The six items, their quantities and the suppliers are typed, and reordering only marks cards and posts a line saying "Draft purchase orders for 3 SKUs, in this demo"; no order is created. To wire it for real, create the purchase orders where reorder runs and return each supplier and date to the cards.
How is the state word derived?
Not stored: a quantity of zero is Out of stock, a quantity at or under the reorder point is Low, and anything above it is Watch. Change a number in the list and the word, the glyph and what "Select all low" picks follow. Once reordered, a card says Reordered instead.
How does selecting and reordering work?
Each card has its own checkbox, named by the item, and two start ticked. "Select all low" ticks every Low or Out of stock item that isn't reordered yet; "Reorder selected" needs at least one tick and says so if there is none. After a reorder the ticks clear and reordered cards can't be ticked again.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so the bot's new line is read out once. Every tick is a real checkbox with a visible focus ring and the item's name as its label, state is a word with a glyph, and the count and the result go through one polite status line.