# Maintenance plan

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Construction](https://beamline.io/components/apps/construction) app. Live demo: https://beamline.io/components/maintenance-plan

Maintenance of shared equipment. The instruments, most urgent first, each with its most pressing kind and how due it is (overdue, due soon, fine, never done) in a tone and words. The chosen instrument's kinds each show their cycle from the last real record to the due date it implies, drawn as a bar in that tone with the days left or over, the cadence as words (pressing it opens a small editor: scheduled or paused, every N days, weeks or months; a change never records maintenance) and Record. Recording opens in place under its kind: the form of the latest template revision, Edit the form to add a field (a new revision; records filled before keep theirs), Also record it on other instruments, Record, and a result per instrument (a failed one is never marked done, Retry the failed ones). The history lists everything recorded on the instrument with its values, read with the revision it was filled against (said when older than today's form); a paused kind keeps its settings and history, said.

## Use it for

- Planning and recording recurring maintenance on machines, rooms or vehicles.
- Records filled from a form that changes over time, where old records must keep their meaning.

## Not for

- A register of machines and their meters ([equipment-register](https://beamline.io/components/equipment-register)).
- Booking equipment ([instrument-use](https://beamline.io/components/instrument-use)).

## Anatomy

- header: the product's mark, Maintenance
- instruments: most urgent first, each with its most pressing kind, days left or over in its tone, and a tone dot
- instrument: name and place, Record <the most urgent kind>
- kinds: name, cadence as words (opens the cadence editor), due or overdue date, days left or over, the cycle bar, last done by whom, Record; a paused kind says its settings and past records are kept
- record (in place under its kind): the form's title and revision, Edit the form (Add a field), the fields, Also record it on, Record, results per instrument, Retry the failed ones, Close
- history: every record on the instrument, newest first: date, kind, who, values; the form revision when older than today's

## States

- kind: on (overdue, due soon, fine, never done), paused
- cadence editor: open, changed (a new due date, no record)
- template: a revision, a new revision
- record: one item or several; each recorded or failed (not done); retry
- history: empty, records from older revisions
- phone: instruments in a row to swipe above the kinds
- right to left: mirrors

## Keyboard

- Tab through the items, the tabs, each kind's switch and cadence; the record fields, Add a field, the other items, Record and Retry

## Motion

None of its own.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `MaintainedItem[]` | — |  |
| `rules` (required) | `Record<string, MaintenanceRule[]>` | — | Each item's maintenance kinds. |
| `templates` (required) | `RecordTemplate[]` | — | Every revision of every template. |
| `records` (required) | `MaintenanceRecord[]` | — |  |
| `user` (required) | `string` | — |  |
| `now` | `number` | — | The clock (epoch ms), for what's due; now when omitted. |
| `onRule` | `((itemId: string, rule: MaintenanceRule) => Promise<void>)` | — |  |
| `onTemplate` | `((template: RecordTemplate) => Promise<void>)` | — | Save a new template revision. |
| `onRecord` | `((record: MaintenanceRecord) => Promise<void>)` | — | Save one record; reject to leave that item not done (said). Called once per item in a bulk run. |
| `defaultItem` | `string` | — | The instrument open at first; the most urgent one when omitted. |
| `defaultTab` | `"records" \| "schedule"` | — | "records" opens the record form of `defaultRule` (or the most urgent kind) at first. |
| `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. |
| `defaultRule` | `string` | — | The maintenance kind whose record form is open at first. |
| `defaultOthers` | `string[]` | — | Other items ticked to record on at first. |

## Built from

- [Avatar](https://beamline.io/components/avatar.md)
- [Bottom sheet](https://beamline.io/components/bottom-sheet.md)
- [Button](https://beamline.io/components/button.md)
- [Checkbox](https://beamline.io/components/checkbox.md)
- [Input](https://beamline.io/components/input.md)
- [Label](https://beamline.io/components/label.md)
- [Number field](https://beamline.io/components/number-field.md)
- [Popover](https://beamline.io/components/popover.md)
- [Segmented control](https://beamline.io/components/segmented-control.md)
- [Select](https://beamline.io/components/select.md)
- [Spinner](https://beamline.io/components/spinner.md)
- [Switch](https://beamline.io/components/switch.md)
- [Text morph](https://beamline.io/components/text-morph.md)
- [Tooltip](https://beamline.io/components/tooltip.md)

## Dependencies

`lucide-react`

## Import

```tsx
import { MaintenancePlan } from "@beamline/maintenance-plan";
```

## Get it

Maintenance plan 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 Construction

- [Submittal register](https://beamline.io/components/submittal-register): The documents a trade owes a project before its material is bought, on the clocks that matter: a log whose rows each draw their way to site on one shared…
- [Change orders](https://beamline.io/components/change-orders): Change orders against a contract, with the money drawn where it stands: one bar of the original contract, each approved change, a line at the current…
- [Inspection review](https://beamline.io/components/inspection-review): A unit's inspection, reviewed in three views. Findings: rooms and features with their condition, answers, notes and photos, and each feature's…
- [Work orders](https://beamline.io/components/work-orders): A maintenance work order that coordinates subtasks: the children's progress drawn by status with cancelled ones counted apart, the parent completed on…
- [Action center](https://beamline.io/components/action-center): Everything waiting on a person across projects: a strip of every open item on the days ahead, one lane per kind of owing (You submit, You answer, Tasks…
- [Company access](https://beamline.io/components/company-access): A project's companies as one board: No company first (office access waits for a company, and says so), then each company with its code and its people…
- [Condition checklist](https://beamline.io/components/condition-checklist): An inspection by area. Each item marked good (success), soon (warning) or needs work now (danger), or not checked yet and kept apart below; what was…
- [Corrective actions](https://beamline.io/components/corrective-actions): A corrective action raised from a failed inspection answer, for food safety, facilities or quality teams. The answer, its photo and note are pinned above…
- [Quality checks](https://beamline.io/components/quality-checks): Quality checks by picture and the control points that make them. A check asks for one photo: an upload that fails keeps its file with Try again, and…
- [Maintenance plans](https://beamline.io/components/maintenance-plans): 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…
- [Equipment register](https://beamline.io/components/equipment-register): A business's machines and vehicles: a register filtered by status (in use, in repair, sold, each counted) with each machine's photo or type icon…
- [Asset workspace](https://beamline.io/components/asset-workspace): One physical asset: a machine, vehicle or piece of plant. Its header keeps the system id apart from the name and serial, with type, site, status and the…
- [Asset packs](https://beamline.io/components/asset-packs): Packs of assets (sounds, presets, fonts), the providers they come from and the storage they take. Download and install are two phases with their own…
- [Instrument use](https://beamline.io/components/instrument-use): Shared instruments. The slot search reads as one sentence (how long, which instrument type, the dates and the working hours with the lab's time zone)…
- [Job booking](https://beamline.io/components/job-booking): A customer books a home or field-service job on the company's own site, phone first. Services with how many units, each unit adding its time and price…
- [Job booking setup](https://beamline.io/components/job-booking-setup): Online booking for a field-service company, set up from three sides that feed one booking form. Services: each priced and timed per unit with whether it…
- [Rental availability](https://beamline.io/components/rental-availability): A rental shop's availability: a product's month for the quantity a customer wants (each day available, some left with the count, booked out or not known…
- [Rooms & equipment](https://beamline.io/components/resource-setup): A salon's or clinic's rooms and equipment and what its services need of them: resources by group at each location, how many appointments each holds at…
- [System pages](https://beamline.io/components/system-page): The four pages a product shows when the normal one cannot: page not found (search and the likely places), something broke (try again, an error id to…

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