Scan station

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

A warehouse scanner, phone-first. Home: one scan field that also takes typing (and says so when the scanner isn't connected), each code named as what it is (product, location, transfer, operation, serial) before anything moves, an unknown or ambiguous code starting nothing, a transfer code opening its work, and the picking and counts assigned to this person (unknown said). Picking: a batch of orders walked line by line, the prompt saying what to scan next (the location, the product, a serial), each line under its order in words with picked of required, a wrong location, another order's product, a product already fully picked or a serial already allocated refused and said, and Validate kept apart (short lines said on it) so a refusal keeps everything picked. Receiving: serials scanned onto a receipt line; when a label won't scan, a typed serial taken and marked typed, or refused with the way to recover when the operation takes scans only.

Use it for

A handheld or phone screen for warehouse work: scanning codes, picking several orders in one walk, receiving serial-tracked goods.
Anywhere a scan must say what it read before it changes anything, and a refusal must keep the work done so far.

Not for

Counting stock on shelves (stock-count).
Assigning serial numbers to a delivery from the desk (serial-allocation).
Raising purchase orders (purchase-orders).

Anatomy

header: Back (inside picking and receiving), the product's mark and the view's title
home: scanner-not-connected notice, the scan field, the hint or Looking it up, what the code is (with Open for a transfer), Picking with assigned, Receiving, Counts with assigned
picking: the batch and its orders; what to scan next as a card (what it is, the location, product or serial large, the line it's for), the sentence also said to screen readers; the scan field, what was said, Validate (with short lines); beside it each order with its lines: product, location, serials, picked of required
receiving: the receipt, the line's serial count, the scan field, Label won't scan, the typed field or the scans-only refusal, what was said; beside it the serials, each scanned or typed, and received of expected

States

home: hint; looking up; known code (named by kind); unknown code (nothing started); ambiguous code; transfer opens picking; scanner not connected (typing works); assigned unknown
picking: go to the location; scan the product; scan a serial; wrong location; another order's product; product fully picked; not in the batch; serial already allocated (refused with where); all picked
validate: with lines short (said); validating; validated; refused with the reason (everything picked kept)
receiving: serial scanned; serial repeated (refused); typing allowed (kept as typed); scans only (refused with the way to recover)
phone: the work over the orders, one column
right to left: the layout mirrors
reduced motion: through the tokens

Keyboard

The scan field takes the scanner's Enter or typing plus Enter, clears and keeps focus; Tab to the lines' view, Validate, and in receiving to Label won't scan and the typed field

Motion

Nothing moves beyond the parts' own feedback. Nothing runs at rest.

Props

Prop	Type	Default	Description
`resolve` (required)	`(code: string) => Promise<ScanResolution>`	—	Read a code; your app knows its barcode rules and permissions.
`scannerConnected`	`boolean`	—	false: the scanner isn't connected (typing still works).
`assigned`	`{ picking: number \| null; counts: number \| null; }`	—	Work assigned to this person; null when not known.
`batch`	`PickBatch \| null`	—
`receipt`	`SerialReceipt \| null`	—
`serialPolicy`	`"manual" \| "scan-only"`	—	Receiving: "manual" lets a serial be typed when its label won't scan (kept as typed); "scan-only" refuses it.
`onSerial`	`((lineId: string, serial: string) => Promise<unknown>)`	—	Allocate a serial to a line; reject with where it already is ("SO-4098 line 2").
`onValidate`	`((batch: PickBatch) => Promise<unknown>)`	—	Validate the batch (your app moves the stock once); reject to keep everything picked.
`onReceiveSerial`	`((serial: string, typed: boolean) => Promise<unknown>)`	—
`onOpenTransfer`	`((id: string) => void)`	—	The transfer a transfer code opens; it opens the batch.
`onOpenCounts`	`(() => void)`	—	Counts open in your app's count screen.
`defaultView`	`"home" \| "picking" \| "receiving"`	—
`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.

Built from

Dependencies

lucide-react

Import

import { ScanStation } from "@beamline/scan-station";

Get it

Scan station 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

Scan stationComplete system · $49

A warehouse scanner, phone-first.

Picking wave 14

Three orders picked in one walk; the gloves for Northgate Clinic are half done. Type A-02-05 and press Enter at the location, then GLV-M for each box. Scanning NAP-W early names the order it belongs to; at the drills, SN-D18-0007 is refused because it already went out on SO-4098.

0 × 0full

States

One state at a time: home, where each code is named before anything moves (try WH/PICK/0014, SN-D18-0041 or 40063); the scanner not connected; validation refused with everything picked kept; receiving drills with a typed serial kept as typed; receiving under scans only, where typing is refused with the way to recover.