shadcn.io is not affiliated with official shadcn/ui
Stock Reorder Command Menu Block for Vue
A warehouse stock menu shown open over a stock table: ten SKUs with stock bars and words, a stepper in each row that sets a reorder quantity, and a purchase order that adds up under the list and copies as text.
Installation
Overview
Build a purchase order from a search with this inventory command menu for Vue with Ark UI. It opens from the stock page in Pallethouse, warehouse stock software, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command: ten SKUs found by name or code, grouped into those that need a reorder and those in stock, each with a stock bar and the stock in words ("Out", "Low 4", "In stock 120"). A stepper in every row, or Enter for one pack and Alt with the up and down arrows on the highlighted row, sets a reorder quantity in whole packs, and a band under the list adds it up ("PO: 3 lines, 72 units") with a Copy PO button that puts the draft on the clipboard as text. On a phone the stepper moves under the name. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same SKUs, quantities and query. For stock, kitchen and supply tools where the search is the order form.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a stock table, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a quantity or a search in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does the stepper work?
Each press adds or removes one pack of the SKU, and a pack is the number of units the SKU is ordered in, so 6 for pallet wrap and 24 for cartons. The number between the buttons is the units on the order, a line takes at most 20 packs, and the minus button is disabled at zero. The buttons stay out of the tab order and don't choose the row; Enter and Alt with the arrow keys are the keyboard route, and the status line says the new quantity and the order's total.
How are stock and the bar shown?
Stock is a word first: "Out" at zero, "Low 4" at or under the SKU's reorder level and "In stock 120" above it, and the group says the same ("Needs reorder" or "In stock"). The bar is a small extra, the stock as a share of the shelf, drawn left to right in every language and hidden on phones. Neither uses red or green.
What does Copy PO put on the clipboard?
A plain-text draft: a title with the date, one line per SKU on the order (code, name and units) in catalogue order, and the total line. The button uses the browser's clipboard API, the status line says "Copied the draft" with the total, and if the browser refuses it says that instead. Nothing is ordered.
What stays local, and how do I wire it?
All of it, apart from the clipboard write. The ten SKUs, their stock and pack sizes are typed constants and the order is a list in the block's state. In your app load SKUS from your warehouse system, send the order from a real submit action in place of Copy PO, and read the stock again when the menu opens.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter adds a pack, and Alt with the up or down arrow adds or removes one on the highlighted row. Tab reaches the Copy PO button. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.