# Production and lots

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Manufacturing](https://beamline.io/components/apps/manufacturing) app. Live demo: https://beamline.io/components/production-lots

Stock made and stored, with every movement traceable. A batch of a recipe, read as a batch sheet: the recipe, batches (in halves) and day as one sentence whose words open what changes them; the multiplier scales each input, each drawn against what its chosen bin holds (taken, left after, or short), short stock and a unit that doesn't convert said on its own line; the output goes into a bin under a new lot; every stock movement is listed before Post, a failed post moves nothing and a retry carries the same key so it posts once. Harvests: the yield as one bar of in stock, not allocated and lost, each labelled; allocations into items, bins and lots from Allocate, never more than what's left; finalizing records the rest as lost with a reason. Bins: tracks of what each holds against its capacity, drawn to scale only where units convert (otherwise listed in words), unknown capacity said, warnings with their reason, and every lot in a table. Recipes: read as a recipe (each ingredient's share of the weight, the method) until Edit opens typed ingredient lines, the declared output kept apart from what the inputs weigh (the difference said as lost in making, a gain said as suspect, a unit without conversion said), an archived ingredient named, saved as the next version while batches already made keep theirs.

## Use it for

- Farms, food producers, breweries and small makers turning stock into products: recipes with units, batches from chosen bins into lots, harvests into stock, and what each bin holds.
- Any stock where a batch consumes inputs from places and must be traceable by lot.

## Not for

- Receiving purchase orders ([purchase-orders](https://beamline.io/components/purchase-orders)).
- An online shop's orders ([orders-admin](https://beamline.io/components/orders-admin)).
- Counting stock by hand ([stock-adjust](https://beamline.io/components/stock-adjust)).

## Anatomy

- tabs: Make a batch, Harvests, Bins, Recipes
- batch: the sentence (recipe menu, version, − batches +, the day opening a calendar); Takes: a line per input (name, scaled amount, from bin · lot opening the bins that hold it, a bar of what the bin holds with the part taken or short, what is left after or the problem); Makes: the amount large, Into (a bin menu with each bin's room), New lot, What will move, the count of things to settle, Post the batch; posted or nothing moved
- harvests: the list (name, date, amount) beside the open harvest: trace id, the bar (in stock, not allocated, lost), Into stock rows, Finalize the harvest, Allocate the rest (opens the allocation form: quantity, unit, as, into bin, lot, Allocate)
- bins: a track per bin (name, warehouse, used of capacity, labelled segments, warnings with reasons) or the contents in words; All stock table (item, lot, bin, quantity)
- recipes: the list beside the open recipe: name, version, what one batch makes, Edit the recipe; ingredient lines with amount and share of the weight; the balance sentence; how to make it. Editing: name, ingredient lines (item, amount, unit, remove, archived), Add an ingredient, One batch makes (output, amount, unit), the balance, how to make it, Cancel, Save as version n

## States

- batch: draft, fractional batch, source missing, insufficient stock, unit mismatch, output bin missing, posting, posted, failed without stock moved, retry posts once
- harvest: no allocation, partial, several outputs, unallocated balance, over-allocation refused, finalize with loss and reason, finalized, finalized with nothing lost, allocation refused
- bins: empty bin, mixed units, known capacity, unknown capacity, can't draw to scale, warning with reason
- recipe: new line, missing unit conversion, declared output less than inputs (loss), more than inputs (suspect), archived ingredient, saving, save refused, saved as next version

## Keyboard

- Tab through the tabs (arrow keys between them), then the batch sentence's words and each line's bin
- A bin, recipe or day opens from its words with Enter or Space; arrow keys move through the choices
- Post, Allocate and Finalize are buttons enabled only when nothing is left to settle

## Motion

None beyond the parts' own; nothing moves at rest.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `StockItem[]` | — |  |
| `bins` (required) | `StockBin[]` | — |  |
| `recipes` (required) | `Recipe[]` | — |  |
| `yields` | `HarvestYield[]` | — |  |
| `today` (required) | `string` | — | "2026-10-30": the default date of a new batch. |
| `onSaveRecipe` | `((recipe: Recipe) => void \| Promise<unknown>)` | — | Saves a recipe as its next version; reject with why to keep the edits. |
| `onPostRun` | `((run: ProductionRun) => void \| Promise<unknown>)` | — | Posts a batch's stock movements in one transaction; the run's key is the same on a retry, so post it once. Reject with why when nothing moved. |
| `onAllocate` | `((yieldId: string, allocation: YieldAllocation) => void \| Promise<unknown>)` | — |  |
| `onFinalizeYield` | `((yieldId: string, loss: { quantity: number; reason: string; }) => void \| Promise<unkno…` | — | Records what is left of a harvest as lost, with the reason, and closes it. |
| `defaultRecipeId` | `string` | — | The recipe a new batch starts from. |
| `tab` | `ProductionTab` | — |  |
| `defaultTab` | `ProductionTab` | — |  |
| `onTabChange` | `((tab: ProductionTab) => void)` | — |  |
| `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

- tabs
- [dropdown-menu](https://beamline.io/components/dropdown-menu)
- popover
- calendar
- select
- [number-field](https://beamline.io/components/number-field)
- input
- textarea
- alert
- button

## Dependencies

`lucide-react`

## Import

```tsx
import { ProductionLots } from "@beamline/production-lots";
```

## Get it

Production and lots 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 Manufacturing

- [Shop floor](https://beamline.io/components/shop-floor): A workshop's shop floor at one workstation: each job is a card at its work centre with why it isn't ready said in words (parts short, or the previous…
- [Production plan](https://beamline.io/components/production-plan): A production plan by month: each product's starting stock, forecast demand, replenishment and ending stock, every ending rolling into the next month's…
- [Print scheduler](https://beamline.io/components/print-scheduler): A print shop's production schedule. The week by station: each station's day holds its runs, with a load bar and minutes used against the station's…
- [Plan readiness](https://beamline.io/components/plan-readiness): A solar plan on its way to a permit. The design checks (fire setback from the ridge, string voltage in the cold, roof load, eave and rake setbacks, the…
- [Design inputs](https://beamline.io/components/design-inputs): What a solar design is checked against, and what the home really uses. Code standards and site conditions (building, electrical and fire codes, wind…
- [Solar quote](https://beamline.io/components/solar-quote): A residential solar quote. The system's price at its rate per watt with adders, discounts and incentives each switched on or off: discounts come off one…
- [Roof layout](https://beamline.io/components/roof-layout): The roof of a solar design. The roof in plan with every face's panels drawn as they lie under its roof type's rules (projected from the slope), each…
- [Electrical design](https://beamline.io/components/electrical-design): The electrical side of a solar design. The existing service set up from a named way of connecting to it (a load-side breaker or a supply-side tap), the…
- [Battery sizing](https://beamline.io/components/battery-sizing): A home battery sized beside its solar. The model and how many with capacity, power and installed price; how it runs (kept full for an outage, storing…
- [Field conditions](https://beamline.io/components/field-conditions): A farm's fields and what each one's conditions are. The fields as a searchable list (each with its outline, crop, area and the layer's value, or Not…
- [Grazing plan](https://beamline.io/components/grazing-plan): Mobs on a grazing rotation, on the farm's map: with a map base, its parcels are the paddocks, each filled by where it stands in the chosen mob's plan (on…
- [Run of show](https://beamline.io/components/run-of-show): One service or event plan's order, run more than once: sections and items with each occurrence's start time in its own column, each item's length dragged…
- [Sound library](https://beamline.io/components/sound-library): A library of sounds (or any media a person auditions before using): a search by words and #tags with facets as filters, a live "3 filters · 12 results"…
- [Tag manager](https://beamline.io/components/tag-manager): Tags for one or several items at once (sounds, photos, documents). Nested tag groups are edited in place (rename, new tag), and a folded group still says…

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).
