Work orders

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

A maintenance work order that coordinates subtasks: the children's progress drawn by status with cancelled ones counted apart, the parent completed on its own with what it does to the open children said first, and parts, labour and other costs rolled up from the children with each line's source and a missing rate said as unknown, never $0; a new subtask checked against existing tasks before a duplicate is made; an AI brief with this asset's history apart from similar assets', each fact with its record and stale once the order is edited; a spoken completion note whose summary points at the transcript lines behind each field, submitting and knowledge-base indexing kept as separate statuses; and inspection outcomes by period, where an order counted in two outcomes is said and each bar opens its exact orders.

Use it for

Running a maintenance job split into subtasks with costs from each.
Reviewing an AI summary or brief against the records it came from.

Not for

Counting stock (inventory-counts).
General project tasks (project-signals).

Anatomy

header: the mark, the order's number and title, the view (Subtasks · Brief · Completion note · Inspections)
subtasks: progress in words and a bar by status, the children (asset, assignee and whether it came from the parent, status), New subtask with existing tasks offered, what completing the parent does, Complete the parent
costs: the total with costs not known, Parts · Labour · Other each opening its lines and their subtask; By subtask: each subtask's cost on one scale (not known said, the cancelled one listed, not counted)
brief: Write it again, when and from which version (or stale), this asset's facts, similar assets' facts apart, each with its record
completion note: summary fields with the transcript lines each came from, Note and knowledge-base statuses, Submit note; the numbered transcript
inspections: Period; completed orders with Passed · Flagged · Failed bars and the overlap said, beside the orders themselves (every one with its outcomes, or those of the pressed outcome)

States

mixed statuses; cancelled counted apart
every subtask done, parent open
parent completed
possible existing tasks; none
a rate missing (unknown total); none recorded
no brief; writing; stale; failed (previous kept)
no similar assets
a field nothing supports; transcription failed; submitted, indexing pending
no inspections; overlapping outcomes; drill-down

Keyboard

the views are a radio group
each cost kind and each outcome is a button that opens its lines
From transcript lines lights them on focus as well as on hover
Complete the parent asks once more before it acts

Motion

Transcript lines light with a colour fade; outcome bars scale from their start. Nothing moves at rest.

Props

Prop	Type	Default	Description
`order`	`ParentOrder`	—	The parent and its subtasks, each with status, asset, assignee (inherited or explicit) and cost lines.
`version`	`number`	—	The order's current version (each edit raises it); a brief from an older one is stale.
`currency`	`string`	—	ISO 4217 code ("USD").
`onFindTasks`	`(name: string) => Promise<TaskCandidate[]>`	—	Existing tasks that may match what is typed.
`onCompleteParent`	`(orderId: string) => Promise<unknown>`	—	Complete the parent: open subtasks complete with it, cancelled ones stay.
`brief`	`WorkBrief \| null`	—	Your model's brief: this asset's facts, similar assets', the version it was written from.
`onRefreshBrief`	`() => Promise<WorkBrief>`	—	Write the brief again; resolve with the new one. Reject: the previous one stays, said.
`note / defaultNote`	`CompletionNote`	—	Transcript, summary fields with the lines behind them, statuses.
`onSubmitNote`	`(n: CompletionNote) => Promise<unknown>`	—	Submit the note (doesn't complete the order).
`inspections`	`InspectionPeriod[]`	—	Completed orders by period, each with one or more outcomes.
`defaultOrder`	`ParentOrder`	—
`onOrderChange`	`((o: ParentOrder) => void)`	—
`note`	`CompletionNote`	—
`defaultNote`	`CompletionNote`	—
`onNoteChange`	`((n: CompletionNote) => void)`	—
`timeZone`	`string`	—
`defaultView`	`"brief" \| "completion" \| "inspections" \| "subtasks"`	—
`canManage`	`boolean`	—
`product`	`string`	—
`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 { WorkOrders } from "@beamline/work-orders";

Get it

Work orders 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

Work ordersComplete system · $49

A maintenance work order that coordinates subtasks.

A parent order with subtasks

Line 2's overhaul: 1 of 4 subtasks done, the cancelled repaint counted apart. Costs roll up to $324.49 from the children (open a kind to see which). Type “belt” as a new subtask: an existing task is offered before a duplicate is made.

0 × 0full

Brief before starting

Written from v6; the order has been edited to v8 since, so it says it may be out of date. This conveyor's history sits apart from similar conveyors', each fact with its record.

0 × 0full

Completion note

The technician's spoken note and the summary drawn from it: point at “From transcript lines” to light the lines it came from. Submitting the note and adding it to the knowledge base are separate statuses.

0 × 0full

Inspection outcomes

October's completed orders by outcome: one order passed and was flagged, so it counts in both and the bars don't add up to 6. Press Failed to see the exact orders.

0 × 0full

About Work orders

← Inspection review Action center →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Work orders

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Construction