Condition checklist

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

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 seen, a measurement against its limit (past the limit said on danger) and photos. Areas with how many of their items are checked, toned by their worst finding; overall progress in one hue and counts by condition. Work recommended from the flagged items, most urgent first: price (not known said), the item it came from, Add to estimate or declined with the customer's reason, asked again from its menu; how many still to ask about, flagged items with no work suggested, and the total added. Refusals said.

Use it for

Inspecting an asset item by item with a condition, notes, measurements and photos.
Turning flagged findings into recommended work the customer accepts or declines.

Not for

Reviewing a rented unit's condition for maintenance (inspection-review).
Composing the estimate itself (service-estimate).

Anatomy

header: the tool's mark, inspection number, vehicle and technician, progress, counts by condition
areas: all and each area with checked of total, toned by the worst finding; on a phone, a Select
items: name, Needs work now / Soon / Good, note, measurement and its limit, photos; not checked yet apart
recommended work: service, price, condition, the item, Add to estimate or declined with a reason, the decision and Ask again, still to ask, unsuggested items, total added

States

item not checked, good, soon, now; measurement within or past the limit
recommendation open, declining, added, declined; price not known; refused
nothing flagged; everything checked
phone: areas as a Select, recommendations below
right to left: mirrored
reduced motion: through the tokens

Keyboard

Arrow keys move between an item's conditions; Tab through notes, measurements, photos and the recommendations' actions

Motion

The chosen condition's well travels between choices through the shared toggle; nothing runs at rest.

Props

Prop	Type	Default	Description
`order` (required)	`{ number: string; vehicle: string; technician: string; }`	—
`areas` (required)	`{ id: string; name: string; }[]`	—
`items`	`InspectionItem[]`	—
`defaultItems`	`InspectionItem[]`	—
`onItemsChange`	`((items: InspectionItem[]) => void)`	—
`recommendations` (required)	`Recommendation[]`	—
`reasons` (required)	`string[]`	—	The customer's usual reasons for declining.
`onDecide` (required)	`(r: Recommendation, decision: "added" \| "declined" \| "open", reason?: string \| undefine…`	—
`defaultArea`	`string`	—
`currency`	`string`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { ConditionChecklist } from "@beamline/condition-checklist";

Get it

Condition checklist 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