# Condition checklist 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/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 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](https://beamline.io/components/inspection-review)). - Composing the estimate itself ([service-estimate](https://beamline.io/components/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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert](https://beamline.io/components/alert.md) - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Lightbox](https://beamline.io/components/lightbox.md) - [Number field](https://beamline.io/components/number-field.md) - [Progress](https://beamline.io/components/progress.md) - [Select](https://beamline.io/components/select.md) - [Slot text](https://beamline.io/components/slot-text.md) - [Spinner](https://beamline.io/components/spinner.md) - [Toggle group](https://beamline.io/components/toggle-group.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx 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](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… - [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 plan](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… - [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).