shadcn.io is not affiliated with official shadcn/ui
Order Fulfilment Manager CRUD Block for React Aria
A shop's fulfilment window with orders at the start and the chosen order at the end: Pack, Ship with a carrier and a tracking number, Mark delivered, Cancel with a reason until it ships, Restore, and a New order form with a derived total.
Installation
Overview
Work an order from new to delivered without leaving one window, with this fulfilment desk for React with React Aria. The top bar holds the only Shine Button, New order. At the start of the window a search Input and a Native Select filter eight orders, each a button with its number, customer, item count, total and a status Badge; at the end the chosen order reads first, with its dates, address, lines and total, and offers the one step that fits its status: Pack order, then Ship order, then Mark delivered. Shipping asks for a carrier and a tracking number of 10 to 14 letters or digits and refuses without one. An order is cancelled, not deleted: Cancel order asks for a reason in an Alert Dialog, is open only until the order ships, and leaves the order marked Cancelled with a Restore button. New order opens a form in the same pane with up to three lines picked from a product list, the total worked out in whole cents. The foot says what happened and offers Undo. The window keeps its height, framed by Guides, and a phone shows one pane at a time with a Back button. For shops, kitchens and any desk that moves records through steps.
FAQ
How do I fill it with my orders?
Edit PRODUCTS (a name and a price in whole cents) and ORDERS, each built with order(number, customer, address, placed, status, lines), where a line is a product id and a quantity. Totals are derived from the lines in cents each time they are drawn, so an order and the list beside it can't disagree. Dates are ISO days written in UTC.
Why is there only one step button at a time?
An order can't skip a step, so the pane offers the next one only: Pack for a new order, Ship for a packed one, Mark delivered for a shipped one and Restore for a cancelled one. The hint above the button says what comes next. A shipped order can't be cancelled; the pane says so instead of hiding the question.
What is checked when shipping and creating?
Shipping needs a tracking number of 10 to 14 letters or digits with no spaces; the reason appears under the field and the field takes focus. A new order needs a customer, a delivery address and a quantity of 1 to 99 on every line. Escape or Cancel closes the form and focus returns to the button that opened it.
What does cancelling do?
It asks for one of three reasons, then marks the order Cancelled and keeps it in the list with the reason. Restore puts it back to the step it was cancelled from. Nothing is refunded or emailed in this demo; in your app the cancel handler is where you would release stock and refund the payment.
What stays local, and how do I wire a real save?
Everything lives in state in this tab and a reload brings the eight orders back; nothing is sent. Each step is a handler (pack, ship, deliver, cancelOrder, reopen, create): call your API there, update the order from its response and keep the previous list for Undo.