Inventory item
A React block (a whole screen) in Beamline's Shop app.
One stock item in a shop's back office, apart from the variants that sell it (how many each uses per unit). Stock per location as stocked, reserved and available with the item's unit on every number, and "not reported" where a location hasn't counted, never 0. An adjustment shows the old count, the new one and the change, keeps what's reserved in view, asks a reason, and when the balance moved meanwhile comes back re-based with your change kept. Adding a location says stock is received there separately; stopping at one with holds names the orders and holds keeping stock there. Holds grouped by origin (an order line, or a manual hold with its reason), with what's left available previewed while editing and no hold past it; releasing an order's hold says it must be allocated again. What each variant can sell per location with the limiting part named, and selling as two stock events. Measurements and origin with units, not measured kept apart from zero, the changes listed before save, and a conflicting save resolved field by field. And every variant's parts by location as one grid: a shared part changes in every row, not stocked and not reported apart from 0, the pending count on Save and each cell's own result.
Use it for
- A shop or warehouse looking after one stock item across locations: counts, holds, what it can sell and its measurements.
- Any stock kept apart from what's sold (parts in kits, ingredients in recipes, components in assemblies).
Not for
- Counting a shelf or a recurring count (stock-count, inventory-counts).
- An order's allocation (order-detail).
Anatomy
- header: item, SKU, stocked, reserved, available, locations not reported, the variants that sell it with how many per unit
- tabs: Stock, Reservations, Sold as, Details, By variant
- stock: each location with stocked, reserved, available and its menu (Adjust stock, Stop stocking here); the adjustment with old, new count, change, reason and what stays reserved; the re-based notice; Stock at another location
- reservations: order lines, manual holds, each with its menu (Change quantity, Release hold); Hold stock with location, how many, why and the availability preview
- sold as: each variant with its parts and what it can sell per location, the limiting part named
- details: weight and dimensions with units, origin, HS code, material, each a value that edits where it is (unmeasured hatched); the changes before save; the conflict per field
- by variant: variant rows with their parts by location as figures that edit in place; shared, not stocked and not reported marked; Save with the pending count; each cell's result
States
- location not reported
- nothing available
- adjusting
- below reserved
- balance moved, re-based
- removal blocked
- location added
- hold over available
- hold preview
- kit limited by a part
- not measured
- changes listed
- conflict
- grid pending
- grid cell refused
Keyboard
- Tab through each tab's rows and fields in order; menus open with Enter; number fields step with arrows
Props
| Prop | Type | Default | Description |
|---|---|---|---|
item (required) | StockItem | — | |
locations (required) | InventoryLocation[] | — | |
levels (required) | StockLevel[] | — | |
reservations (required) | Reservation[] | — | |
variants (required) | SellingVariant[] | — | The variants that sell this item, alone or with other parts. |
availability (required) | PartAvailability | — | Available (stocked − reserved) per part per location, for what each variant can sell. |
partStock (required) | PartStock | — | Stocked per part per location, for the by-variant grid. |
attributes (required) | StockAttributes | — | |
onAdjust | ((locationId: string, a: { from: number; to: number; reason: AdjustReason; }) => void |… | — | Reject with BalanceMovedError when the balance moved since the form opened. |
onAddLocation | ((locationId: string) => void | Promise<unknown>) | — | |
onRemoveLocation | ((locationId: string) => void | Promise<unknown>) | — | |
onHold | ((h: { locationId: string; quantity: number; reason: string; }) => void | Promise<unkno… | — | |
onHoldChange | ((id: string, quantity: number) => void | Promise<unknown>) | — | |
onRelease | ((id: string) => void | Promise<unknown>) | — | |
onAttributesSave | ((next: StockAttributes) => void | Promise<unknown>) | — | Reject with AttributesConflictError when someone else saved first. |
onGridSave | ((changes: GridChange[]) => Promise<GridResult[]>) | — | Saves the grid's changes; returns each cell's result. |
defaultAdjust | string | null | — | An adjustment that opens with the screen, optionally with its new count and reason filled. |
tab | InventoryTab | — | |
defaultTab | InventoryTab | — | |
onTabChange | ((t: InventoryTab) => void) | — | |
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
- tabs
- number-field
- select
- input
- dropdown-menu
- alert-dialog
- button
Dependencies
lucide-react
Import
import { InventoryItem } from "@beamline/inventory-item";Get it
Inventory item 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
More in Shop
- Product editor: A product being made in a shop's back office, every value read as text at rest. The variant grid, grouped by the first option, lists each combination…
- Category manager: A shop's product categories, nested and ranked. Each category moves up, down or into another from its menu, and every move gets its own receipt (saving…
- Plan comparison: Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- Step form: The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- Orders admin: A shop's order desk: today's orders and revenue, quick filters for what needs doing (to fulfil, unpaid, returns), a virtualised orders grid, and the…
- Order detail: One shop order with payment and fulfilment as two separate lanes. The header says where each stands (paid, partly paid, awaiting, refunded; not…
- Order board: A shop's orders as cards in its columns, on the shared kanban with drag and keyboard moves. Each card: number, estimate or work order, customer, vehicle…
- Order composer: An order made inside a support ticket: products found by name, each variant with its stock drawn and said (in stock, none, oversold, not known) and the…
- Draft orders: A draft order made for a customer in a shop's back office that reads like the order it will become. The lines lead: each with its variant and SKU or…
- Order changes: What happens to a shop order after it's placed. Edit: the order as it stands beside the requested version, each line marked new, changed (old → new…
- Special orders: Customers' special orders as demand to buy for, per outlet: To order apart from Ordered; each product's demand, what is reserved, incoming and on order…
- Order history and fills: Every order the account placed and every fill it got, for a period: totals for volume, fees, fill rate and maker share; orders with their status and how…
- Order ledger: Purchase orders as money. Each order's spend is drawn against its approved total (paid, billed, pending, what is left, and any overrun past the end…
- Ticket orders: A customer's orders inside a support ticket, each action's effect said before it's done: orders and drafts kept apart, a paid draft shown once as its…
- Record search: One search across connected records (customers, vehicles, orders) by name, phone, plate, VIN or order number. What the words look like is said (info)…
- Return queue: A queue of return cases. Search by return, order or customer, exactly (the default) or loosely; status tabs with counts, Requires attention first; a date…
- Return case: One return as one place where every act is its own. The return, its order (linked out) and the customer on three cards; the stage said on its tone. Items…
- Return request: Staff start a return from an order, and edit the reasons customers pick. New return: the order's lines as a checklist, each with its variant, price and…
- Purchase orders: 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…
- Print quote: A print shop's quoting in three places. Quote: a group of garments that share one imprint and one quantity break, the group's pieces counted together and…
- Service estimate: An estimate for one vehicle. Services added from the catalogue (one not listed for this vehicle said on warning, fit unknown said); each with its lines…
- Job card: A technician's repair order, phone-first. The vehicle, the customer and when it's due in words (due at, due in, overdue by how long); an offline copy…
- Parts tracker: Parts across a shop's work orders: each with its number, the order and vehicle, supplier, quantity and cost (not known said), and where it is: ordered…
- Visit board: The staff board for a walk-in queue: visits move from waiting through called and serving to done today. Arrival (here or on the way), the place in the…