shadcn.io is not affiliated with official shadcn/ui
Inventory Flow Kanban Block for Vue
A goods-in board with Ordered, In transit and Received columns of purchase lines, unit totals per lane in each head and in a stacked bar, and a rule that books a receipt only from In transit.
Installation
Overview
Follow stock from order to shelf with this goods-in board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three columns, Ordered, In transit and Received, and eight purchase lines. Each card shows the item, its SKU in code in an outline Badge, its units, its supplier and its expected date. Quantities total per lane: every head adds up its lines and units ("3 lines, 300 units"), a band above the board draws the three lane totals as one stacked bar with a legend, and the header sentence ("104 of 724 units received") is worked out from the cards, so a move changes all of them at once. One rule refuses in words: a line is booked as Received only from In transit, never straight from Ordered. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu. A polite status line reports each move with the lane's new total, and Reset restores the board. On a phone the columns scroll sideways in one named region. For warehouses, purchasing and any flow where quantities matter more than cards.
FAQ
How do I use my own purchase lines?
Edit COLUMNS and START. A line has an id, its column, a title, its sku, units, supplier and a due date in ISO form. The head totals, the stacked bar and the header all add up units, so they follow your data. Dates are shown by a small helper, not read from the clock. Suppliers and items in the demo are made up.
Why can't I drop a line into Received from Ordered?
Goods are booked in when they arrive, so refusalOf refuses Received from Ordered and says the line is still on order. Move it to In transit first. Every other move is allowed, including back from Received, and the drag, the keyboard and the menu all go through the same function.
How are the lane totals shown, and are they readable without the bar?
The stacked bar is drawn from the same sums as the heads, and the legend under it spells out each lane's units in text, so nothing depends on the drawing. The status line adds the lane's new total after every move.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, the arrow keys move it (left and right change column, and swap in right-to-left languages), Home and End jump to the ends, Space drops it and Escape puts it back. The rule applies to every step, and each step is announced in the status line.
What stays in the demo?
Everything: the lines live in the component's state, nothing is saved or ordered, and a reload or Reset restores the starting board. To keep stock, post the move from put to your inventory system; a partial receipt would split a line into two, which this demo does not do.
How does it look on a phone?
The columns scroll sideways with the next column showing, each column scrolls inside the board's fixed height, and nothing changes size when a card moves or a move is refused. Touch drags from the grip only, so the board still scrolls; the card's menu is the other way to move it.