# Stock moves

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/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 its reason as named when it was made (and what it's called now, when renamed), who, when and its number; a move's two legs shown as out of one folder and into another, never counted as stock used; a folder the person can't see said without its name; a move with only one half recorded said. Filter by item or folder; for one item, what was added, taken out and moved between folders. Moving: one or several items, each from its own folder with how many of what's there (unknown said), to one destination with a reason and note; more than a folder holds, a move into its own folder and a destination stock can't go into each said where they are; sending carries a key formed with the draft, so a lost answer is said apart from a refusal and the same request sends again without moving twice; done lists each movement's number, which lands at the top of the ledger. Reasons: adding, taking out and moving, one default each that can't be hidden, built-in ones locked, custom ones up to 15 of 20 characters, renamed with past movements keeping their wording, deleted from a menu.

## Use it for

- Stock kept in folders, rooms, vans or bins, moved between them with a reason and audited after.
- Where a transfer must never be counted as consumption and a lost answer must not move twice.

## Not for

- Changing one count with a reason ([stock-adjust](https://beamline.io/components/stock-adjust)).
- Counting a shelf ([stock-count](https://beamline.io/components/stock-count)).

## Anatomy

- header: the tool's mark, Stock movements or Movement reasons, the view switch, Move stock
- ledger: item and folder filters, the item's totals, movements with kind, reason, who, when, number, legs, note
- move panel: lines with quantity of what's there, Add an item, Move to, Reason, Note, the outcome, Move
- reasons: three groups, each reason with default, built-in lock, offered switch, menu; Add a reason

## States

- no movements, none matching, a renamed reason, a hidden folder, half a move
- move: no lines, too many, same folder, locked destination, sending, refused, answer lost, done
- reasons: default, hidden, built-in, renaming, too long, limit reached, refused
- phone: the move panel first, one column
- right to left: mirrored
- reduced motion: through the tokens

## Keyboard

- Tab through the filters, the movements, the move panel's fields and the reasons' switches and menus

## Motion

Nothing runs at rest.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `StockItem[]` | — |  |
| `folders` (required) | `StockFolder[]` | — |  |
| `movements` | `Movement[]` | — |  |
| `defaultMovements` | `Movement[]` | — |  |
| `onMovementsChange` | `((movements: Movement[]) => void)` | — |  |
| `reasons` | `StockReason[]` | — |  |
| `defaultReasons` | `StockReason[]` | — |  |
| `onReasonsChange` | `((reasons: StockReason[]) => void)` | — |  |
| `onMove` (required) | `(request: MoveRequest) => Promise<MoveAnswer>` | — |  |
| `onSaveReason` (required) | `(reason: StockReason) => Promise<StockReason>` | — | Saves (or creates) a reason; reject with why not. |
| `onDeleteReason` (required) | `(id: string) => Promise<void>` | — | Deletes a custom reason; reject with why not. |
| `defaultDraft` | `MoveDraft \| null` | — | A move draft open at first (opened mid-way). |
| `defaultView` | `"ledger" \| "reasons"` | — |  |
| `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

- [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)
- [Combobox](https://beamline.io/components/combobox.md)
- [Dropdown menu](https://beamline.io/components/dropdown-menu.md)
- [Input](https://beamline.io/components/input.md)
- [Label](https://beamline.io/components/label.md)
- [Number field](https://beamline.io/components/number-field.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)
- [Textarea](https://beamline.io/components/textarea.md)
- [Tooltip](https://beamline.io/components/tooltip.md)

## Dependencies

`lucide-react`

## Import

```tsx
import { StockMoves } from "@beamline/stock-moves";
```

## Get it

Stock moves 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…
- [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).
