Goods receiving

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

Goods received against purchase orders and invoices. Cards grouped by purchase order or invoice, each line once whichever way (a line keeps both sources, the other ones named on the card); exact search on a whole PO number, invoice number or product, nothing exact said. A card shows what's received against what was ordered, sizes not counted yet, and its issues; each size's received count is typed in (not counted stays empty, never 0) with its state in words (all in, short by, over by); counts are a draft until Save counts, a save someone else beat keeps the entries until Reload, a failure keeps them. Issues per size: flagged and resolved counts per kind (damaged, misprinted, wrong item, short in the box), resolved never above flagged, what's still open announced, the received count untouched; read only without permission, a failed save said. Notes: the receiving note (edited, or read only) apart from each purchase order's note under its own heading, an empty PO note said; a note changed meanwhile keeps your text under theirs; closing returns focus to the card. Mark received in bulk: the scope (every card not fully received, or one card) previewed with how many sizes, lines and units change before anything happens; Cancel changes nothing; progress while it runs; lines the host couldn't mark listed with why; a scope that changed since the preview is refused and previewed again.

Use it for

Counting in goods by size against purchase orders and invoices, with damaged or wrong items flagged apart from the counts.
A shop or warehouse marking deliveries received in bulk after seeing exactly what changes.

Not for

Raising and approving purchase orders (purchase-order-desk).
A salon's stock orders counted line by line (purchase-orders).
Scanning items one at a time (scan-station).

Anatomy

toolbar: group by purchase order or invoice, exact search, Mark received
card: source and vendor, also on, progress and counts, issues summary, Notes; lines with sizes (size, ordered, received typed without steppers, state, issues on attention until something is flagged); unsaved count, Save counts
issues: kinds with flagged and resolved, what's still open, Done
notes: the receiving note, each PO's note under its heading
bulk: scope, the preview of what changes, Mark received; progress; the result

States

card: partial, uncounted, all in, short, over, unsaved, saving, saved, conflict, failed
issues: none, open, partly resolved, all resolved, resolved over flagged, read only, save failed
notes: empty, receiving note only, several POs, editing, conflict, read only
bulk: preview, nothing to change, running, complete, partial failure, stale scope
search: no exact match

Keyboard

Every count is a labelled number field naming the size and product; each size's issues open from a labelled button
The bulk dialog opens with Cancel focused; the notes dialog returns focus to its card

Motion

Progress fills while a bulk mark runs. Nothing runs at rest.

Props

Prop	Type	Default	Description
`lines` (required)	`ReceiptLine[]`	—
`poNotes`	`PurchaseOrderNote[]`	—
`receivingNotes`	`Record<string, string>`	—	Receiving notes by card ("po:PO-1042", "invoice:INV-88").
`canEditNotes`	`boolean`	—
`canEditIssues`	`boolean`	—
`onSaveCounts`	`((card: string, deltas: ReceiptDelta[]) => Promise<unknown>)`	—	Saves one card's counts; reject with ReceiptConflict when someone saved it first.
`onSaveIssues`	`((lineId: string, size: string, issues: Issue[]) => Promise<unknown>)`	—
`onSaveNote`	`((card: string, body: string) => Promise<unknown>)`	—	Saves a receiving note; reject with NoteConflict when it changed meanwhile.
`onReloadLines`	`(() => ReceiptLine[])`	—	The lines as saved now, after a conflict.
`onBulk`	`((lineIds: string[], onProgress: (done: number) => void) => Promise<BulkResult>)`	—	Marks lines received; report progress, resolve with any it couldn't, reject with StaleScope if they changed.
`defaultGroupBy`	`GroupBy`	—
`defaultQuery`	`string`	—
`locale`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

segmented-control
search-field
number-field
progress
popover
dialog
textarea
radio-group
button

Dependencies

lucide-react

Import

import { GoodsReceiving } from "@beamline/goods-receiving";

Get it

Goods receiving 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

Goods receivingComplete system · $49

Goods received against purchase orders and invoices.

Inkwell Press Co. · receiving

Each line keeps both its purchase order and its invoice, so grouping either way shows it once. Issues are flagged and resolved on their own; resolving never changes what was received.

0 × 0full

States

Each state as it first appears; the first action in each shows how it resolves.