# Job materials 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/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 end date said as for planning), people and history. Each material: how much is in the job, where it came from (each move with its quantity), and where it goes back, its first source by default, recent places and every folder offered; choosing another asks whether it becomes the default; no return place yet said. Adding a material moves it out of a folder (how many there said, more refused) and says total stock doesn't change. Closing the job lists the leftovers: how many go back of how many, where, and what counts as used, zero allowed; completing answers per return (returned with its receipt, or not with why, and the reconciling said). A completed job reads only and reopens without moving anything back. Pick lists: name, who picks (Everyone notifies only its maker, said), due date, and what picking does (moves stock into a chosen folder, or takes it out of stock); items with how many (an out-of-stock one listed but not pickable, said), copied from an invoice as a snapshot of its items and quantities only, up to 100; saved as a draft or marked ready (who picks, a destination and items needed). ## Use it for - Stock moved out to jobs, projects or work orders and returned at the end, with where it goes back kept per material. - Planning pick lists with what picking does to stock. ## Not for - Picking line by line with a scanner ([scan-station](https://beamline.io/components/scan-station)). - A technician's repair order ([job-card](https://beamline.io/components/job-card)). ## Anatomy - header: the tool's mark, Jobs or Pick lists, the view switch - jobs: the list; the job's head, materials with sources and Goes back to (said, Change on demand), the default question, Add a material on demand, Close or Reopen, history - closeout: each leftover read as a sentence (all back to, some used) with Change for how many back, to where and used; outcomes; Complete - pick lists: the list, New pick list; name, who picks, due, picking, Move to, items, Copy from an invoice, Save, Mark ready ## States - job draft, active, completed, reopened; a material without a return place; too many to move - closeout with zero returns, all returned, a return failed - pick list empty, copied from an invoice, out of stock, at the limit, missing who or where, draft, ready - phone: one column - right to left: mirrored - reduced motion: through the tokens ## Keyboard - Tab through the lists, each material's Goes back to, Add, the closeout's quantities and places, and the pick list's fields ## Motion Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `jobs` | `Job[]` | — | | | `defaultJobs` | `Job[]` | — | | | `onJobsChange` | `((jobs: Job[]) => void)` | — | | | `folders` (required) | `Folder[]` | — | | | `stock` (required) | `StockOption[]` | — | | | `onJobAction` (required) | `(action: JobAction) => Promise` | — | | | `pickLists` | `PickList[]` | — | | | `defaultPickLists` | `PickList[]` | — | | | `onPickListsChange` | `((lists: PickList[]) => void)` | — | | | `onSavePickList` (required) | `(list: PickList) => Promise` | — | | | `invoices` (required) | `Invoice[]` | — | | | `people` (required) | `string[]` | — | | | `me` (required) | `string` | — | Who is using it (a list assigned to Everyone notifies them). | | `canReopen` | `boolean` | — | | | `defaultView` | `"jobs" \| "picks"` | — | | | `defaultJob` | `string \| null` | — | | | `defaultClosing` | `boolean` | — | Open a job's closeout at first. | | `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) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { JobMaterials } from "@beamline/job-materials"; ``` ## Get it Job materials 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… - [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… - [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).