# Item setup 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/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 suggestion from somewhere else, said as one to check (nothing found said); Drop and scan again removes it; Link to an item adds it beside the item's other codes, says when it's already linked to another item and that linking takes it off there, and says that linking changes no quantity. Scan actions: each quick action's name, where a scan looks (every folder, or one folder and what's inside), then moving into one folder or choosing after scanning, and a reason; the next scan's steps spelled out beside it; how many scans were already sent with it and that a change only reaches the next scan; saved as a new revision. Fields: custom fields with a type (text, number, date, dropdown, checkbox) and where they apply (items, folders) locked once saved, said; label, placeholder (never a value, said), default by type and choices; a live preview filled in, on a new record and empty. ## Use it for - Linking scanned barcodes to items, and setting what a scanner's quick action does. - Defining custom fields on items or folders with a live preview. ## Not for - Scanning to pick or count ([scan-station](https://beamline.io/components/scan-station), [inventory-counts](https://beamline.io/components/inventory-counts)). - Editing many items' values at once ([bulk-item-edit](https://beamline.io/components/bulk-item-edit)). ## Anatomy - header: the tool's mark, the view's title, the view switch - barcodes: the waiting codes; the code, who and when, Drop and scan again, Look it up and its suggestion, Link to an item with its codes and warnings, Link with that it changes no quantity - scan actions: the actions and New; name, look in, then (Move it into one folder · Choose the folder after scanning), into, reason; the next scan's steps; scans already sent; Save - fields: the fields and New; type, label, placeholder, choices (an example as placeholder), default, applies to; the preview filled in, on a new record and empty; Save ## States - code looked up with a suggestion or nothing found, already linked elsewhere, linked, dropped; no codes waiting - action fixed or chosen after scanning, folder missing, with or without scans sent, saved - field new (type and place open) or saved (locked), each type's default, dropdown without choices, applying to nothing - phone: one column with a picker - right to left: mirrored; codes stay left to right - reduced motion: through the tokens ## Keyboard - Tab through the list, the code's actions, the item search, the forms and Save; the view switch with the arrow keys ## Motion Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `scans` (required) | `UnlinkedScan[]` | — | | | `items` (required) | `SetupItem[]` | — | | | `onLookup` (required) | `(code: string) => Promise` | — | | | `onLink` (required) | `(link: { scanId: string; code: string; itemId: string; }) => Promise void` | — | Drops a scan so it can be scanned again. | | `actions` (required) | `QuickAction[]` | — | | | `folders` (required) | `{ id: string; path: string; }[]` | — | | | `reasons` (required) | `{ id: string; name: string; }[]` | — | | | `onSaveAction` (required) | `(a: QuickAction) => Promise>` | — | | | `fields` (required) | `CustomField[]` | — | | | `onSaveField` (required) | `(f: CustomField) => Promise>` | — | | | `defaultView` | `"actions" \| "barcodes" \| "fields"` | — | | | `defaultScan` | `string \| null` | — | | | `defaultAction` | `string \| null` | — | | | `defaultField` | `string \| null` | — | | | `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) - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) - [Button](https://beamline.io/components/button.md) - [Calendar](https://beamline.io/components/calendar.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Combobox](https://beamline.io/components/combobox.md) - [Date picker](https://beamline.io/components/date-picker.md) - [Input](https://beamline.io/components/input.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) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { ItemSetup } from "@beamline/item-setup"; ``` ## Get it Item setup 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… - [Inventory finder](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… - [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).