Purchase orders

A React block (a whole screen) in Beamline's Shop app.

A salon's purchase orders, received: the orders down the side, the chosen one beside them. Each line still due reads as a strip of received, this delivery and still due, with this delivery's count as text that edits where clicked (inline-edit) and the stock beside it rising by exactly that; one save carries one key, so a retry after a lost answer is counted once and said so; receiving everything still due fills the draft and saves nothing; closing is its own step, asked in place with what will never arrive, and a failed close is said apart from a failed delivery; each line's deliveries unfold as its quantity river. One more part travels with it: OrderPlanner, a supplier's next order planned to par: each product's shelf drawn as what is in stock (solid), what other open orders bring (hatched), this order and what is still short, the suggestion said as its sum (par − stock − on order), a count set by hand kept and marked as your own through a recount, and saving on your records and sending to the supplier as two actions with two receipts.

Use it for

Receiving supplier deliveries against an order, often in parts: a salon's back bar, a spa's retail shelf, a café's stock room, a clinic's consumables.
Anywhere a retried save must never count stock twice, and closing an order short must be a deliberate step.
OrderPlanner: reordering a back bar or retail shelf to par levels from one supplier, with what is already on order counted.

Not for

Forecasting what to order over weeks (stock-horizon).
One order line's full fulfilment story with shipments and returns (quantity-river).
Customer orders and their fulfilment (order screens).

Anatomy

header: the product's mark and the title
order list (nav): each order's supplier, number and where it stands
sheet head: number and supplier, when it was ordered and where, its status in words
lines: each product with its size and the stock (a rolling figure; "→ 13" in strong ink while a delivery is counted); a line still due is a strip (received in the success tone, this delivery in ink, still due empty or hatched as won't arrive while closing) and its words: received of ordered · this delivery's count (text that edits where clicked) · still due; a finished line, or any line when looking only or closed, is one quiet line: a slim record bar, "All 12 received" (or received of ordered with what is still due or never arrived) and its deliveries
a line's deliveries: a quiet action opening the line's quantity river in place (its own Close folds it back)
deliveries record (side): newest first, each delivery's date and who received it, then one row per line with its quantity (+3); the closing on top
notice (status or alert): what was saved (green, the outcome), a duplicate counted once, a failed or unanswered save
bar (sticky): Receive all still due (secondary button) and Clear (ghost), Close order (confirm-morph, neutral) and Save this delivery (primary, with the item count); on a phone the order's actions (Receive all, Close order) sit under its head and the bar keeps Clear and Save on one row
OrderPlanner: the order's number and supplier, the location, Count stock again; a row per product: the name and size, the sum (par − ▪ in stock − ▨ on PO-… = n, or Stock not counted), the shelf against par (in stock solid, on other orders hatched, this order in the accent, short of par empty; the par mark labelled; past it only what the order adds above par), the grip at this order's end and the field as its exact twin, and the words (Suggested n or Your own count · Suggested n, +n to order, n short of par / fills it to par / at par / n above par); the foot: items, lines and cost (rolling), Not saved yet / Changed since saved / Saved, not sent / Sent, Save, Send to <supplier> (asked in place with items and cost), what was said, and the receipts (Saved … by …, Sent to … …)

States

awaiting delivery, partly received, all received and still open, closed: said beside the number and in the list
counting: the delivery drawn on each line, the stock's new figure, Save counts the items
saving: Save pending, the rows held
saved: the counted units settle into the record, the stock figure rolls to its new count, the words of what came in; the draft clears; a new key
duplicate: the app answers duplicate; the block applies it once and says it was already saved
no answer (an Error named TimeoutError): the draft and its key stay; Save becomes Try again
failed: the draft stays, nothing added, Try again
closing: asked in place (what never arrived, stock unchanged); pending; closed, or refused with its deliveries said saved
look only (canReceive false): the rows drawn, no bar, the permission said
loading: shaped skeletons; no orders: an empty state
phone: the list, then the order full width with Back
right to left: rows, arrows and the bar mirror
reduced motion: through the tokens
OrderPlanner: not counted (no stock drawn, no suggestion)
OrderPlanner: none needed (at par already)
OrderPlanner: your own count (kept through Count stock again; the others follow their new suggestion, said)
OrderPlanner: saved, changed since saved, sent (an open order now; the rows hold)
OrderPlanner: a send refused (saved on your records, not sent, said apart; Retry)
OrderPlanner: look only, loading, nothing planned

Keyboard

Tab through the list, each line's delivery count, the deliveries action and the bar
On a line's delivery count: Enter or Space edits it in place, Enter saves, Escape puts it back; more than was ordered is refused with the reason
Escape closes the close question
OrderPlanner: each row's grip is a slider (←/→ one unit, Shift ten), the field its exact twin; Send asks in place (Enter confirms, Escape backs out)

Motion

A line's strip slides to its new count while the stock figure rolls to its new count (slot-text); the close question morphs in place (confirm-morph); the river unfolds as quantity-river does. Nothing runs at rest. OrderPlanner: units change tone as the grip moves; the totals roll; receipts fade in.

Props

Prop	Type	Default	Description
`orders`	`PurchaseOrder[]`	—	The orders, controlled with onOrdersChange; or defaultOrders.
`defaultOrders`	`PurchaseOrder[]`	—	The starting orders when uncontrolled.
`onOrdersChange`	`(orders: PurchaseOrder[]) => void`	—	After a delivery is applied or an order closed.
`open`	`string`	—	The open order's id.
`defaultOpen`	`string`	—	Initial open state when uncontrolled; defaults to false.
`onOpenChange`	`(id: string) => void`	—	Reports an open-state change; no callback by default.
`onReceive`	`(draft: DeliveryDraft) => Promise<ReceiveResult \| void>`	—	Save one delivery. Reject with an Error to keep the draft and its key (said with Try again).
`onClose`	`(orderId: string) => Promise<unknown>`	—	Close an order: nothing more is expected. Reject to keep it open (said apart from a failed delivery).
`by`	`string`	—	Who is receiving, written on the receipts the block records itself.
`defaultDrafts`	`Record<string, Record<string, number>>`	—	A delivery counted but not saved, restored from your own storage: per order id, each line's units this delivery.
`now`	`number`	—	The clock, for the receipts and the closing the block records itself. Default the device's.
`canReceive`	`boolean`	—	false: the person may look but not receive or close (receiving stock needs its own permission).
`loading`	`boolean`	—	Shaped skeletons while the orders load.
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`OrderPlanner: plan / defaultPlan / onPlanChange / onSave / onSend / onRefresh / by / canOrder`	`OrderPlan \| null / (id, quantities) => Promise<{ at }> / (id) => Promise<{ at, to }> / (id) => Promise<PlanLine[]> / string / boolean`	—	The plan (lines with unit cost, stock or null, par and what other open orders bring; the quantities set by hand; the last save; sent). Save keeps the quantities on your records; Send sends what is saved (an unsaved change is saved first, its own receipt); a rejected send keeps the save. onRefresh returns the lines counted again; counts set by hand stay. planning.ts has the rule (suggested, quantityOf, totals, unsaved) for your server.

Built from

Dependencies

lucide-react

Import

import { PurchaseOrders, OrderPlanner } from "@beamline/purchase-orders";

Get it

Purchase orders is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Purchase ordersComplete system · $49

A salon's purchase orders, received: the orders down the side, the chosen one beside them.

Receiving a delivery

PO-1042 is partly in: 3 of 10 oils came Monday; today's box is being counted (4 oils, 3 masks). Click a line's this-delivery count to change it; the stock beside it rises by exactly that. Receive all fills what's still due and saves nothing; Close order asks first, with what will never arrive.

0 × 0full

When an answer is lost

The first save reaches the server but its answer never comes back. Try again sends the same delivery; the server already has it, so the stock rises once and the screen says so.

0 × 0full

States

One state at a time: an order awaiting its first delivery; everything in and still open; an order closed short; a close the server refuses (the deliveries stay saved); looking without the Inventory permission; loading; no orders.

0 × 0full

Planning the next order

PO-1052 to Alder Salon Supply for Kingsway, filled to par: each product's suggestion is marked on its row and said as its sum (par less stock less what PO-1042 still brings); the argan oil needs none, the gloves aren't counted. Set a row by hand (drag its end, ←/→, or type) and it is your own; Count stock again moves only the suggestions. Save keeps it on your records; Send asks, then sends it to Alder (saving first if it changed).

0 × 0full

About Purchase orders

← Return request Print quote →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Purchase orders

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Shop