Stock adjust

A React component in Beamline's Form controls category.

An on-hand count changed with its reason: received, recounted, damaged, lost or returned; by an amount or to a new count; in the item's unit or in packs (3 cases of 12 is 36), with the count it leaves said before Save. An unknown current count is said, never read as 0, and a recount still sets it; a pack whose size isn't set is refused; a receipt asks for its cost and supplier. Opens from the on-hand figure, or sits inline.

Use it for

Changing one item's on-hand count where it is shown: a product's stock row, a stock list's cell, a back bar's shelf.
When the reason matters for the records (received, recount, damage, loss) and stock is counted in packs as well as units.

Not for

Counting a delivery against what was ordered (count-adjust, purchase-orders).
Forecasting what to order (stock-horizon).
Any plain number (number-field).

Anatomy

trigger: On hand and the figure (dotted underline), or Not known
panel (popover, or inline): the item, Reason (select), the amount (How many came in, How many went, Counted) and In (units or a pack with its size), what packs come to in units, the count it leaves (was → will be, the new figure large), a receipt's cost per unit and supplier, Cancel and Save

States

editing
reason changed (the amount's words follow)
in packs (= 36 tubes)
a pack whose size isn't set: refused, said
unknown current stock: said; a recount sets it
more removed than on hand: said, Save off
saving
save failed: the count unchanged, said
saved: closes; the app's new count shows
phone: the panel opens as a sheet
right to left: the arrow mirrors
reduced motion: the figure jumps

Keyboard

Enter or Space on the figure opens the panel; Escape closes it with nothing changed
Tab through reason, amount, pack, cost, supplier, Cancel and Save

Motion

The count it leaves rolls to its new figure (slot-text) as the amount changes; the popover opens as Popover does. Nothing runs at rest.

Props

Prop	Type	Default	Description
`item` (required)	`string`	—	The item's name, said in the trigger's and the panel's names.
`onHand` (required)	`number \| null`	—	The count on hand now; null when not known (said, never 0).
`unit`	`string`	—	The item's own unit ("bottles", "tubes"). Default "units".
`packs`	`StockPack[]`	—	Packs it can be counted in.
`reasons`	`StockReason[]`	—	Reasons offered; default received, recount, damaged, lost, returned.
`suppliers`	`{ id: string; name: string; }[]`	—	Suppliers a receipt can name.
`currency`	`string`	—	For a receipt's cost. Default "USD".
`onAdjust`	`((adjustment: StockAdjustment) => void \| Promise<unknown>)`	—	Save the adjustment. Reject to keep the panel open with the count unchanged (said).
`open`	`boolean`	—	Whether the panel is open; or defaultOpen.
`defaultOpen`	`boolean`	—	Initial open state when uncontrolled; defaults to false.
`onOpenChange`	`((open: boolean) => void)`	—	Reports an open-state change; no callback by default.
`defaultDraft`	`{ reasonId?: string \| undefined; amount?: number \| null \| undefined; packId?: string \| …`	—	Entries to start from (a restored draft): the reason, the amount and the pack.
`inline`	`boolean`	—	Draw the panel in place instead of from the on-hand trigger (a sheet, a row's own editor).
`disabled`	`boolean`	—
`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 { StockAdjust } from "@beamline/stock-adjust";

Get it

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