Inventory finder

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

Find stock and act on what's found. A rail of filters: name or SKU; folders with or without their subfolders (folders the person can't see said as not searched); a quantity range counted in one unit, with items of an unknown count or another unit left out and said. Results: one row per item per folder with SKU, quantity (low on the warning tone, none on danger, unknown said), minimum, folder and last update as chosen columns; sorted by name, update, quantity or minimum; or grouped by item across folders with each location kept and a total only when the units match. Rows tick into a basket by item and folder with the quantity wanted (what's there said beside it); a row a later filter hides stays and says so; picked, already on the target and found are three counts; adding to a target answers line by line, failures kept with why, and a target's room said before. The filters (and optionally the columns) save as a named view that reopens on current stock, with a limit. Export: CSV, spreadsheet or PDF (album, list, compact), fields, photos and labels, a title, a sketch of the shape (said as a sketch), then making, failed or ready to download.

Use it for

Finding items across folders, rooms, vans or bins and gathering them, with quantities, into an order, pick list or job.
Where saved views and exports must say what they keep and what they don't.

Not for

Editing many items at once (bulk-item-edit).
A generic data table (data-grid).

Anatomy

header: the tool's mark, Find stock, saved views, Save this view, Export; the save form
rail: name, folders, subfolders, quantity range and unit, what's left out, Clear filters
results: pick all, count, Group by item, sort, columns; rows or grouped items
basket: three counts; lines on hairlines with how many wanted as a figure that edits in place (the unit and what's there beside it) and remove on attention; the add result, Add to, room, Add
export sheet: format, layout, title, fields, photos, labels, the sketch, the job, Make the file

States

no filter, filtered, nothing found, grouped, mixed units, unknown counts, hidden folders
basket empty, a line hidden by the filter, already on the target, room exceeded, partly added
view saved, limit reached; export no fields, making, failed, ready
phone: one column, the extra columns folded
right to left: mirrored
reduced motion: through the tokens

Keyboard

Tab through the rail, the toolbar, each row's tick, the basket's quantities and Add, and the export sheet

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`records` (required)	`FinderRecord[]`	—
`folders` (required)	`FinderFolder[]`	—
`query`	`FinderQuery`	—
`defaultQuery`	`FinderQuery`	—
`onQueryChange`	`((q: FinderQuery) => void)`	—
`views`	`SavedView[]`	—
`defaultViews`	`SavedView[]`	—
`onViewsChange`	`((v: SavedView[]) => void)`	—
`viewLimit`	`number`	—	Saved views allowed per person.
`basket`	`BasketLine[]`	—
`defaultBasket`	`BasketLine[]`	—
`onBasketChange`	`((b: BasketLine[]) => void)`	—
`targets` (required)	`BasketTarget[]`	—
`onAdd` (required)	`(targetId: string, lines: BasketLine[]) => Promise<{ key: string; ok: boolean; reason?:…`	—	Adds the basket to a target; resolve with each line's outcome.
`onExport` (required)	`(request: ExportRequest) => void`	—	Starts an export; the job then reports through `exportJob`.
`exportJob`	`ExportJob \| null`	—
`alreadyAdded`	`string[]`	—	Items already on the chosen target, by item@folder.
`product`	`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

Dependencies

lucide-react

Import

import { InventoryFinder, COLUMNS, EMPTY_QUERY } from "@beamline/inventory-finder";

Get it

Inventory finder 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