shadcn.io is not affiliated with official shadcn/ui
Warehouse Ops Chat Block for Svelte
A shift channel with a Pick list 14 pane: six lines with a progress count and a drawn floor of three aisles, a scan field that ticks a line or reports a miss, and a low-stock card that adds to a reorder list.
Installation
Overview
Show a warehouse shift channel with a pick list beside it, with this warehouse ops chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Binwise, a warehouse floor app: the supervisor, Nadia Kessler, and two pickers talk in Message and Bubble rows, and a pane at the end, "Pick list 14", has six lines (a SKU, a bin and a quantity), a Progress bar under "3 of 6 picked" and a small drawn floor of three aisles of four bays, with the listed bins outlined and the picked ones filled. The composer is a scan field: type a bin code such as A-2-3 and press Enter. A match ticks its line and its bay and says "A-1-2 matches 12 x bolts"; a miss says "A-9-1 is not on this list". A low-stock card in the thread has "Add to reorder", which fills a small Reorder list in the pane. The scan field submits, so there is no Send button, and the frame is ruled by Guides. For a fulfilment centre, a stockroom or any checklist that is ticked by scanning.
FAQ
What stays in the page, and how do I make it real?
Everything. The six lines, the floor and the thread are typed in the file; scanning is typing into the field and nothing reads a camera or a scanner. Nothing is stored or sent. To make it real, check the code against your own pick list where scanOf runs, and send the scan to your warehouse system from the same place.
What does a scan do?
The code is trimmed and made upper case. A bin on the list ticks its line, fills its bay on the floor, adds a line to the thread ("A-1-2 matches 12 x bolts") and updates the count; a bin already picked says so; a code that is not a bin says "Bin codes look like A-2-3."; any other bin says it is not on the list.
Is the floor drawing the only record?
No. The drawing is a picture and is hidden from assistive technology; the six lines beside it carry the same facts, each with a Picked or To pick word before its SKU. A bay is outlined when its bin is listed and filled when picked, so the difference is never only a color.
What does Add to reorder do?
It puts the tape rolls on the Reorder list in the pane with a quantity of 24 and turns the card's button into "Added to reorder". Remove clears the list again. Nothing is ordered.