shadcn.io is not affiliated with official shadcn/ui
B2B Purchase Order Checkout Block for Solid
A purchase-order checkout for lab supplies: three lines with steppers, a checked PO number, a cost centre and the PO document, beside a list of approvers worked out from the order total.
Installation
Overview
Show a buyer who has to say yes before the order ships, with this purchase-order checkout for Solid with Ark UI. A compact header from Greywether, a lab-supplies shop, sits over a hairline frame with a side cell. The main cell lists three lines (a bench centrifuge, a pipette set, a case of gloves), each with a quantity stepper and a line total in whole cents, then a purchase-order band: a PO number checked for PO- and six digits, a cost centre in a Native Select and the PO document through File Upload, where the name is listed and the file stays on the device. The side cell is a vertical list of approvers worked out from the total: the team lead on any order, the department head over $500, finance over $5,000. The ones this total needs read in medium weight with a check and "Needed", the others with a dash and "Not needed", and moving a stepper moves the chain. Submit for approval is the only Shine Button. For lab, hospital, school and company purchasing where an order waits for sign-off.
FAQ
How is the approval chain decided?
From the order total in whole cents against three typed thresholds: any order needs the team lead, over $500 adds the department head, over $5,000 adds finance. The list, the count ("2 of 3 needed") and the status line all read from one function, so changing a quantity changes all three at once. Replace the thresholds and roles with your own policy or the one your approvals system returns.
What is checked on the PO number?
Its shape: PO- and six digits. Spaces and dashes are forgiven, lowercase is fixed on leaving the field and the prefix is added if you type only digits after PO. Whether the number exists in your buyer's system is a server question; the block shows where its answer would go, in the line under the field.
Is the PO document uploaded?
No. The file is listed by name and size and stays on the device; nothing is read or sent. Only a PDF is accepted and a wrong type says so under the control. In your app, send the file to storage on submit and keep the name and size row as the confirmation.
What happens when I submit with something missing?
The button is never disabled. A press names each wrong field under it, says "Not sent. Fix the marked fields." in the polite status line and moves focus to the first, in reading order: the PO number, then the cost centre. The PO document is optional.
How does the approver list read to a screen reader?
It is an ordered list with a name, and each item says the role, its rule and "Needed" or "Not needed" in text, so colour and the check mark are not the only signal. The connectors between them are decoration and hidden.
What stays local, and how do I connect it for real?
All of it: the lines are typed, the approvers are a function of the total and submitting sets a flag and says nobody was notified. To connect it, post the lines, PO number, cost centre and file to your server, have it create the approval requests it returns, and show their real status in the same list.