Production plan

A React block (a whole screen) in Beamline's Manufacturing app.

A production plan by month: each product's starting stock, forecast demand, replenishment and ending stock, every ending rolling into the next month's start and unknown forecasts carried as not known, never 0. The figures read as figures (a faint dotted underline marks the ones that can be changed; the field arrives with the pointer or focus): forecasts are typed or stepped with the arrow keys in their cells and the suggestions recalculate (said while they do; a refused forecast is put back with the reason); a replenishment set by hand is marked and goes back to the suggestion in one press; ending stock is drawn against the safety line and said in words when it dips under it or runs out. What is already ordered is said per month (to order, short, over); Order opens the order first, warning when it would arrive after the stock runs out on what is already ordered, and creates nothing until Create returns its number. A product's planning settings (make or buy, supplier, safety stock, minimum order, lead time per variant, how orders start) save without creating an order. A phone shows one period at a time, stepped from the column head.

Use it for

Planning a workshop's or a small factory's make and buy quantities month by month against a forecast, with a planner who orders from the plan.
Anywhere an edited forecast must visibly change later months' stock, and a hand-set figure must stay distinguishable from the system's suggestion.

Not for

A read-only look at one item's stock weeks ahead with an order date to drag (stock-horizon).
Receiving deliveries against a purchase order (purchase-orders).
The day's work at the shop floor (shop-floor).

Anatomy

header: the product's mark, the title and when the plan was calculated
grid: a column per period with the row names pinned while the periods scroll; per product a head (name, unit, make or buy and supplier, Recalculating while it does, planning settings) and five rows
starting stock: the first is the count on hand, each next one the previous ending
forecast demand: a number field per period, typed or stepped; empty is not known
replenishment: the suggestion in its field, or a figure set by hand marked Set by hand with Back to the suggestion
ending stock: the figure and a slim bar against the safety line on the product's own scale, with Below safety or Runs out in words
ordered: what is on order against the plan (To order, ordered and short, ordered and over), with Order on a short month when the planner orders by hand, or how orders start otherwise
order review (sheet): quantity (rounded up to the minimum order, said), supplier when bought, arrival date, the runs-out warning, Cancel and Create order
planning settings (sheet): route, supplier, safety stock, minimum order, lead time, how orders start, each variant's lead time and minimum order (empty is not set); Save settings

States

forecast loaded; an input edited; recalculating (the suggestions faded and the head says so); a refused forecast put back with the reason
a manual override marked; reset to the suggestion
under-ordered, over-ordered, met: in words on the ordered row
not known: a missing count or forecast carried forward as not known
order draft; late arrival warned; creating; refused (the review stays open with the reason); created (the number and the arrival said, the ordered row rises)
settings: buying without a supplier refused in place; a variant's limit left empty stays not set; saving; saved with no order created; refused with the reason
look only (canEdit false): figures without fields, no Order, the permission said
loading: shaped skeletons; no products: an empty state
phone: the grid scrolls sideways under the pinned row names; the sheets open full width
right to left: the pinned column and the bars mirror
reduced motion: through the tokens
figures at rest (edit on hover or focus)
phone: one period at a time

Keyboard

Tab through each product's settings, then its demand and replenishment fields period by period
In a field: ↑/↓ by one, Shift by ten, Enter commits; the reset and Order are buttons
Escape closes a sheet without saving

Motion

Suggestions fade while they recalculate and come back when the answer arrives; the sheets slide in as the sheet does. Nothing runs at rest.

Props

Prop	Type	Default	Description
`periods` (required)	`PlanPeriod[]`	—
`products`	`PlanProduct[]`	—
`defaultProducts`	`PlanProduct[]`	—
`onProductsChange`	`((products: PlanProduct[]) => void)`	—
`asOf`	`string`	—	When the plan was calculated, ISO date.
`onForecastChange`	`((productId: string, periodId: string, demand: number \| null) => Promise<void \| (number…`	—	A forecast changed: resolve with the product's new suggestions (one per period), or reject to put it back.
`onOverride`	`((productId: string, periodId: string, value: number \| null) => Promise<unknown>)`	—	A replenishment set by hand (a number) or back to the suggestion (null); reject to put it back.
`onOrder`	`((draft: PlanOrderDraft) => Promise<{ number: string; }>)`	—	Create one order; resolve with its number. Reject to keep the draft open with your reason.
`onPolicySave`	`((productId: string, policy: PlanPolicy, variants: PlanVariant[]) => Promise<unknown>)`	—	Save a product's planning settings; creates no order. Reject to keep the sheet open with your reason.
`canEdit`	`boolean`	—	false: the person may read the plan but not change it or order.
`loading`	`boolean`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { ProductionPlan } from "@beamline/production-plan";

Get it

Production plan is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Production planComplete system · $49

A production plan by month.

The winter plan

Change December's chair forecast (type it, or step it with the arrows) and the suggestions recalculate; each month's ending stock starts the next. Walnut tops are set by hand to 20 in December (back to the suggestion with one press) and nobody has forecast February, so from there the stock is not known. Order on a short month opens the order first: tops ordered now arrive mid-December, after December's stock has run out on what is already ordered, and the review says so.

0 × 0full

States

One state at a time, from Example state: an order the supplier's system refuses (the review stays open with the reason); a forecast refused because someone else recalculated (put back); reading without the Planning permission; loading; no products.