# Inventory finder A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Inventory](https://beamline.io/components/apps/inventory) app. Live demo: https://beamline.io/components/inventory-finder 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](https://beamline.io/components/bulk-item-edit)). - A generic data table ([data-grid](https://beamline.io/components/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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert](https://beamline.io/components/alert.md) - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Glow](https://beamline.io/components/glow.md) - [Inline edit](https://beamline.io/components/inline-edit.md) - [Input](https://beamline.io/components/input.md) - [Kbd](https://beamline.io/components/kbd.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Radio group](https://beamline.io/components/radio-group.md) - [Search field](https://beamline.io/components/search-field.md) - [Select](https://beamline.io/components/select.md) - [Sheet](https://beamline.io/components/sheet.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) ## Dependencies `lucide-react` ## Import ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Inventory - [Stock count](https://beamline.io/components/stock-count): 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… - [Inventory counts](https://beamline.io/components/inventory-counts): Recurring stock counts from plan to shelf: a phone-first count of one occurrence where an untouched part reads not counted and a zero reads counted, none… - [Goods receiving](https://beamline.io/components/goods-receiving): Goods received against purchase orders and invoices. Cards grouped by purchase order or invoice, each line once whichever way (a line keeps both sources… - [Purchase order desk](https://beamline.io/components/purchase-order-desk): Purchase orders for stock from draft to closed. The list of orders with status (ready for review on warning, approved, ordered and partly received on… - [Restock desk](https://beamline.io/components/restock-desk): Restocking from suppliers' own shops. Items low on stock (below the minimum on danger, at it on warning, unknown said) beside the chosen item with how… - [Stock alerts](https://beamline.io/components/stock-alerts): Alerts on stock counts and expiry dates. Counts of alerts gone off (danger) and close (warning) in the header. A table: item and type, the rule in words… - [Item setup](https://beamline.io/components/item-setup): Setting items up for scanning and records. Barcodes: scanned codes waiting to be linked, each with its symbology, when and who; Look it up brings a… - [Bulk item edit](https://beamline.io/components/bulk-item-edit): Many items corrected at once. Pick a folder, with its subfolders or not (fixed once anything is edited), up to a limit said. The items in a grid: name… - [Kit builder](https://beamline.io/components/kit-builder): A kit (bundle) made of standalone products, and how many its parts' stock can make. Sell as a kit; the parts in one kit with units per kit, removable… - [Serial allocation](https://beamline.io/components/serial-allocation): A receipt line's serial numbers. Serials generated from a first serial and how many (its digits counted up, padding kept; a first serial without digits… - [Stock moves](https://beamline.io/components/stock-moves): Where stock went, and moving it. The ledger lists movements newest first: moves on info, stock added on success, stock taken out on warning; each with… - [Scan station](https://beamline.io/components/scan-station): 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… - [Pack station](https://beamline.io/components/pack-station): A packing bench. Scanner, scale and printer each said, on the warning tone when away. Find the shipment by scanning or typing its number (none found… - [Shipment split](https://beamline.io/components/shipment-split): An order's lines split across shipments. A table of lines with what was ordered and a column per shipment (new ones marked); a line already shipped can't… - [Route plan](https://beamline.io/components/route-plan): A day's delivery routes in the service's zone. The day at a glance: routes, routes without a driver (warning), stops running late (danger), stops done… - [Job materials](https://beamline.io/components/job-materials): Materials sent out to jobs and pick lists. Jobs: the list (draft, active on info, completed on success) beside the chosen job with its site, dates (the… - [Service tasks](https://beamline.io/components/service-tasks): A fleet shop's maintenance setup. Tasks: active and archived, searchable, main tasks and their subtasks told apart in words, archiving refused while… - [Owner records](https://beamline.io/components/owner-records): Who a customer is and what they own, at the front desk. New customer: name, phone and email checked as typed against existing customers; each likely… - [Sample storage](https://beamline.io/components/sample-storage): Where physical items are kept (rooms, freezers, shelves, racks, boxes) and acting on several at once. The storage tree is browsed apart from moving: Move… - [Sample ledger](https://beamline.io/components/sample-ledger): Materials used in a record and the containers they came from, plus pooling. Subtracting a used amount writes a stock movement with its unit and the… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).