Shop floor

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

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 operation still running), its steps ticked as they're done, and finishing an operation hands the job to the next centre, whose card wakes. The operator rail keeps this session's time apart from each job's labour, so two jobs running side by side never read as twice the hours, and a refused operator switch keeps who was signed in. The Orders view ranks the open orders (moved up or down, a refused move put back with the reason) and opens one with planned and used components and planned and actual minutes; closing an order waits for every operation and its final check, and a close your app refuses is said with its reason.

Use it for

A workstation tablet where operators pick up jobs at their work centre, tick the steps and hand the job on: a furniture workshop, a print shop, a food kitchen line, a repair bench.
Anywhere a job's readiness depends on parts and on the operation before it, and closing it needs a final check.

Not for

Planning when jobs run across days against each station's capacity (capacity-terrain).
A generic drag-between-columns status board (kanban-board).
Forecasting demand and replenishment by month (production-plan).

Anatomy

header: the product's mark, the title and the view switch (Work centres, Orders)
operator rail: who is signed in with this session's time, the jobs they have running with each job's labour and Pause, and the other operators to switch to
work centres: one column per centre the workstation shows, its count of jobs not done
job card: order number and product, the operation and quantity, where it stands in words (Ready, Running · name, Paused, Waiting for parts: …, Waiting for Cutting to finish, Parts not confirmed, Done), its steps as checkboxes, Start / Pause / Resume and Finish operation with the steps still to tick
closure (on the last operation's card and in an opened order): the final check with Pass and Fail, Close order and the reason it can't yet
orders view: Open and Done, the open orders ranked with move up and down, make-by and deliver-by dates and parts ready or short; the opened order's planned and produced quantity, components (planned, used, available) and operations (centre, planned against actual minutes)
notice: a handover said (Handed to Finishing), or a refusal with its reason

States

ready, waiting for parts, waiting for the previous operation, parts not confirmed, running, paused, done: on each card, in words
a step saving: the checkbox waits; a refused step stays as it was with the reason
finishing: Finish waits; done: the next operation's card wakes in its centre and the handover is said
two jobs running for one operator: each job's labour counts its own time, the session counts wall-clock time once
switching operator: pending; refused (the current operator stays, the reason said)
final check not recorded, failed, passed; Close order refused until it passes, with the reason beside it
closing: pending; refused by your app with its reason; closed
reorder: moved at once; refused, put back with the reason
look only (canRecord false): cards and orders drawn, no actions, the permission said
loading: shaped skeletons per centre; no jobs: an empty state
phone: the rail above the cards, the centres stacked; the orders list, then the order full width with Back
right to left: the layout and arrows mirror
reduced motion: the wake ring through the tokens

Keyboard

Tab through the view switch, the rail's Pause and switch rows, each card's steps and actions
Space ticks a step; Enter on Start, Finish, Pass, Close
In the orders view, Move up and Move down buttons on each open order

Motion

Finishing an operation rings the next one's card in the accent once, letting go over a few standard steps; a priority move slides the rows to their new places (useFlip). Timers move their minute words every 15 seconds only while a job runs; nothing runs at rest.

Props

Prop	Type	Default	Description
`orders`	`FloorOrder[]`	—	The orders, in priority order; controlled with onOrdersChange, or defaultOrders.
`defaultOrders`	`FloorOrder[]`	—
`onOrdersChange`	`((orders: FloorOrder[]) => void)`	—
`workCenters` (required)	`WorkCenter[]`	—	The work centres this workstation shows, in floor order; an operation elsewhere stays off the cards.
`operators`	`Operator[]`	—
`defaultOperatorId`	`string`	—	Who is signed in at the workstation.
`sessionStart`	`number`	—	When the current operator's session began (ms); default when the block mounted.
`defaultIntervals`	`WorkInterval[]`	—	Labour recorded so far, every operator's; the block adds and closes intervals as people start and pause.
`now`	`number`	—	The clock (ms) the block starts from; it then moves with the device's.
`defaultView`	`"centres" \| "orders"`	—
`defaultOrderId`	`string`	—	The order open in the Orders view.
`onStep`	`((orderId: string, operationId: string, stepId: string, done: boolean) => Promise<unkno…`	—	Each of these runs before the change shows as saved; reject with an Error to keep things as they were and say its message.
`onStart`	`((operationId: string, operatorId: string) => Promise<unknown>)`	—
`onPause`	`((operationId: string, operatorId: string) => Promise<unknown>)`	—
`onFinish`	`((orderId: string, operationId: string) => Promise<unknown>)`	—
`onCheck`	`((orderId: string, result: "pass" \| "fail") => Promise<unknown>)`	—
`onClose`	`((orderId: string) => Promise<unknown>)`	—	Close an order (your app validates its stock moves); reject to refuse with your reason.
`onReorder`	`((orderIds: string[]) => Promise<unknown>)`	—	The open orders' ids in their new priority order; reject to put them back.
`onSwitchOperator`	`((operatorId: string) => Promise<unknown>)`	—	Your identity check for the next operator; reject to keep the current one.
`canRecord`	`boolean`	—	false: the person may look but not record work.
`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 { ShopFloor } from "@beamline/shop-floor";

Get it

Shop floor 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

Shop floorComplete system · $49

A workshop's shop floor at one workstation.

The workstation

Ines is assembling MO-2207's chairs: tick its last two steps and Finish operation; the oil finish wakes in Finishing. MO-2211 waits for 2 walnut tops; MO-2214's benches are done, and Close order waits for its final check. Tomas cut MO-2207's parts earlier: his labour stays on that job, apart from Ines's session.

0 × 0full

States

One state at a time, from Example state: the orders by priority with one opened; a priority move someone else's change refuses (put back); closing refused by stock; an operator whose badge isn't recognised; looking without the permission; loading; no jobs.