Maintenance plans

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

An operations team's maintenance plans. The queue lists every asset-plan pair (one machine can appear under two plans) with its last service, next due point, the current reading and how far into its interval it is, worst first: overdue, data missing, due soon, scheduled, each said with its reason and unit ("Overdue by 20 h", "Data missing: no last service") on its tone, a stale reading marked with its age. A pair opens beside the list: the plan's rule in a sentence, the reading with its source and date, the last service recorded (refused said) and a linked action opened apart from it. Plans are built per program: counted by time, distance or engine hours, every so many units with a due-soon end drawn on the interval and moved by its grip, each machine marked where it stands; recipients; each machine's last service and reading, giving its due point or saying what is missing; draft, ready, save refused.

Use it for

Service intervals by calendar, distance or runtime across a fleet or plant: vehicles, machines, generators, lifts, HVAC units.
A due queue where missing data must be said instead of guessed, and one asset can sit under several plans.

Not for

Running the work itself (work-orders).
One asset's whole record (asset-workspace).

Anatomy

header: the product's mark, Maintenance due or Maintenance plans, Queue or Plans
queue: All, Overdue, Due soon, Data missing, Scheduled with counts; rows with a stripe in the state's tone: asset (id, serial, site), plan, last service, next due with how much of the interval is used, the reading now (stale marked), the state with its reason and unit, an open action
detail: asset and site, the rule, the state and due point, last service, the reading with its source and date; record the last service (date, reading in the plan's unit); open an action, said to be apart from the service
plans: programs on a rail with their plans, Add a plan; the plan's name and state (draft, ready, saved with machines missing data), counts by, every, due soon for the last; the interval drawn (fine, due soon, past due) with the grip at the due-soon edge and each machine marked by name; the rule; who to tell; the machines with last service and reading and the due point or what is missing; add a machine; Save

States

queue: scheduled, due soon, overdue, data missing (no last service, no reading at last service, no current reading), stale reading, action open, service recorded, service refused
plans: empty program, new plan, time, distance, runtime, baseline missing, ready, saving, save refused
loading: shaped skeletons
phone: the queue in two columns, a pair opens in place with Back; the plan's sections stacked
right to left: mirrored, the interval runs from the right
reduced motion: through the tokens

Keyboard

On the interval's grip: Left/Right one unit, Shift ten (a hundred and a thousand km for distance), Home/End the limits; Escape while dragging puts the edge back
Tab through the filters, the rows (Enter opens), the detail's fields and actions, the rail and the plan's fields

Motion

The interval's zones follow the grip while held and settle in the fast duration otherwise. Nothing runs at rest.

Props

Prop	Type	Default	Description
`programs` (required)	`MaintProgram[]`	—
`plans` (required)	`MaintPlan[]`	—
`assets` (required)	`MaintAsset[]`	—
`baselines` (required)	`Baseline[]`	—
`onUpdateService`	`((u: ServiceUpdate) => Promise<unknown>)`	—	Record an asset's last service under a plan. Reject with an Error: nothing changed, the reason said.
`onCreateAction`	`((q: { assetId: string; planId: string; }) => Promise<{ id: string; }>)`	—	Open a linked action (work order) for an asset and plan; the service itself is recorded apart.
`onSavePlan`	`((plan: MaintPlan, baselines: Baseline[]) => Promise<unknown>)`	—	Save a plan with its assets' last services. Reject with an Error: kept as a draft, the reason said.
`defaultView`	`"plans" \| "queue"`	—
`defaultOpen`	`string \| null`	—	The asset-plan pair open in the queue (`assetId:planId`).
`defaultProgram`	`string`	—
`defaultPlan`	`string`	—
`today`	`string`	—
`loading`	`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 { MaintenancePlans, TONE } from "@beamline/maintenance-plans";

Get it

Maintenance plans 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

Maintenance plansComplete system · $49

An operations team's maintenance plans.

What's due

Every machine under every plan, worst first, the reason and unit in words. Excavator 21 appears twice: its oil is 20 h overdue on a reading three weeks old, and its annual check has no last service, so Fieldkeep can't tell when it's due. It is open: record the last check, and only that row changes.

0 × 0full

Building a plan

Engine oil every 250 engine hours. The interval is drawn with the due-soon end tinted; drag its edge (or ←/→) to change how early machines count as due soon. Each machine is marked where it stands. Roller 3's last service has no hour reading, so it says Data missing; type the reading at that service and it gets a due point.

0 × 0full

States

One state at a time, from Example state: a service record Fieldkeep refuses; a plan save refused because someone else changed it; a program with no plans; loading.

0 × 0full

About Maintenance plans

← Maintenance plan Equipment register →

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.

Maintenance plans

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Construction