Stock count

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

A shelf counted. Count: the products on it with counted units, not counted (an empty field that changes nothing) kept apart from a counted zero, expected quantities and the difference shown, or hidden for a blind count, filtered by counted or not, a product found on the shelf added by hand (not expected here), the progress and Save. Review: each difference from → to, matches counted, products not counted named as left alone, and Apply; when stock moved while counting, those products' expected quantities update and are said, every count is kept, and nothing applies until applied again; a refusal keeps the counts; without the permission to apply, the count is saved for review.

Use it for

Counting a shelf, bin or location and applying the differences to stock.
Anywhere 'not checked' must stay apart from 'checked and zero', and a change made meanwhile must not lose what was entered.

Not for

Picking orders or scanning codes (scan-station).
The history of stock moves (stock-history).
Assigning serial numbers (serial-allocation).

Anatomy

header: Back to counting (in review), the product's mark, the title, the request and location with its due date
count: Show (all, not counted, counted with counts), the blind-count note; the lines: product with SKU, lot and added by hand, expected, counted with its unit, difference; add a product found here
review: the number of differences, each product from → to with the difference and moved-meanwhile, matches, not counted and left alone
summary: counted of total with its bar (what an empty field means a hint beside it), moved or refused said, Save and Review differences, or Apply, or the permission said with Save

States

line: not counted (empty); counted zero; matches; more; fewer; not expected here (added by hand)
blind count: expected and difference hidden while counting, shown in review
filter: all; not counted; counted; nothing to show (empty state)
save: saving; saved; refused with the reason (counts kept)
apply: no differences (close the count); applying; stock moved meanwhile (expected updated, counts kept, apply again); refused with the reason (counts kept); applied
no permission to apply: said, Save kept
loading: shaped skeletons
phone: the summary over the lines, each line's expected and difference under it
right to left: the layout mirrors
reduced motion: through the tokens

Keyboard

Arrows within Show; Tab through each counted field (arrows step the number), the add select and Add, then Save and Review; in review, Back and Apply

Motion

The progress bar eases to its new length. Nothing runs at rest.

Props

Prop	Type	Default	Description
`request` (required)	`CountRequest`	—
`defaultLines` (required)	`CountLine[]`	—
`productOptions`	`{ sku: string; product: string; unit: string; }[]`	—	Products that can be added by hand when found on the shelf.
`onSave`	`((lines: CountLine[]) => Promise<unknown>)`	—	Save the counts as they are (a draft others can review).
`onApply`	`((lines: CountLine[]) => Promise<void \| { moved?: { lineId: string; expected: number; }…`	—	Apply the counted lines. Resolve with `moved` when stock changed meanwhile: those lines' new expected quantities are shown, every count kept, and nothing applied until the counter applies again. Reject to keep everything.
`canApply`	`boolean`	—	false: the person can count and save, not apply.
`loading`	`boolean`	—
`defaultStep`	`"count" \| "review"`	—
`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 { StockCount } from "@beamline/stock-count";

Get it

Stock count 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

Stock countComplete system · $49

A shelf counted.

Aisle A-02

Five of eight counted: extra-large gloves found empty (a counted 0), medium gloves three short, wipes two over. Empty fields are not counted and change nothing. Review and apply: medium gloves moved while counting, so their expected quantity updates, the counts stay, and the second apply goes through.

0 × 0full

States

One state at a time: a blind count, where expected quantities stay hidden until the review; a count not started; an apply refused with the counts kept; a counter without the permission to apply, who saves for review; loading.