Inspection review

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

A unit's inspection, reviewed in three views. Findings: rooms and features with their condition, answers, notes and photos, and each feature's maintenance flags, a resident's flag waiting for a manager's review (never sent to work by itself), internal notes kept off the report, cost unknown until known, and a flag saved apart from the inspection's answers (offline says it can't be). Compare: two inspections of the unit side by side, features paired by exact name, a changed answer named in words, a question asked in one only or whose type changed said and not compared, unmatched features kept in view; differences only narrows it and the report's scope is chosen before export, never as a charge. Service issues: the flags mapped trade to category, grouped one issue per category with entry and priority, each created on its own with a key, so a failed one is retried alone and nothing is created twice. The sync settings open beside them.

Use it for

Reviewing an inspection of a place or a thing (a rental unit, a vehicle, a site, a hotel room) and sending what needs fixing to a maintenance system.
Comparing two walk-throughs of the same place (move-in and move-out, before and after) where unmatched items and unanswered questions must stay honest.

Not for

Comparing two versions of a document (revision-compare) or two records' fields (diff-table).
A help desk's queue of tickets (helpdesk-inbox).
Setting up a lease (lease-setup).

Anatomy

header: the product's mark, the inspection's kind, unit, date, inspector and status; Findings, Compare and Service issues; Sync settings
findings: rooms with their features down the side (condition, flag count); the feature's sheet with its answers (unanswered said), photos count, notes with author and role, and its maintenance flags; Flag for maintenance opens the flag form (what needs fixing, internal notes, trade, who pays, cost left empty when not known) with Save flag
a flag: description, status (resident flag to review, flagged, in a service issue with its number), reporter and role, trade, who pays, cost or Cost not known, internal notes marked Not on the report; Accept for work on a resident's flag
compare: Earlier and Later pickers (by kind and date, with inspector and status), the count of features that differ, Differences only, Export report; rows by room, each feature with its verdict in words (Same, Changed, Only in earlier, Only in later) and its condition on both sides; a row opens to its questions, each side's answer and photos
export dialog: all rooms or differences only (with counts), a line that the report charges nobody, Export, done or failed with Try again
service issues, as a flow: on one side the flags under their trade, each trade pointing at its category (a menu; an unmapped trade in the warning tone), each flag pressed in or out (a resident's waiting for review, one without a trade, one already in an issue: each said and not choosable); on the other one card per category with its flags (each can be left out), entry and priority as words opening their choices, a trade still waiting for its category said; created with its number, or failed with Try this one again; Create N service issues
sync sheet: the switch (off until a default category and status are chosen), resident flags waiting for acceptance, the defaults, the field map with internal notes not sent, the destination unreachable with how many flags wait, the rule version, Save

States

feature observed; flag draft; resident flag pending review; manager flag; internal notes; offline flag unavailable (answers kept); saving; flag saved; flag refused (the text kept); work not yet created
pair selection; matched features; unmatched feature; different answer; different question type; question in one only; not answered; filtered differences; export review; exported; export failed
flags selected; unmapped trade; category mapping; grouped review; flag excluded; creating; one issue failed, others created; retry pending; created
sync disabled; missing default; configured; enabled; resident review excluded; destination unavailable; saved; save failed
loading: shaped skeletons; no flags
phone: the rooms list then the feature with Back; a pair stacks as Earlier and Later, each named
right to left: lists, arrows and the field map mirror
reduced motion: through the tokens

Keyboard

Tab through the views, the rooms list, the feature's flags and their actions, the pairs and their questions
Enter or Space opens a pair's questions; Escape closes the export dialog and the sync sheet

Motion

A pair's chevron turns as its questions open; dialogs and the sheet use their own parts' motion. Nothing runs at rest.

Props

Prop	Type	Default	Description
`inspections` (required)	`Inspection[]`	—	The unit's inspections, any order (shown oldest to newest).
`inspectionId` (required)	`string`	—	The inspection the findings and the service issues are for.
`unit` (required)	`string`	—	The unit, in your words ("Unit 2B, Linden Court").
`flags`	`MaintenanceFlag[]`	—
`defaultFlags`	`MaintenanceFlag[]`	—
`onFlagsChange`	`((flags: MaintenanceFlag[]) => void)`	—
`trades` (required)	`{ id: string; name: string; }[]`	—	The trades a flag can need.
`categories` (required)	`{ id: string; name: string; }[]`	—	The maintenance system's service-issue categories and statuses.
`statuses`	`{ id: string; name: string; }[]`	—
`defaultMapping`	`Record<string, string>`	—	Trade → category, as last saved; a trade missing here asks for a category before issues are created.
`view`	`InspectionView`	—
`defaultView`	`InspectionView`	—
`onViewChange`	`((view: InspectionView) => void)`	—
`onSaveFlag`	`((flag: MaintenanceFlag) => Promise<unknown>)`	—	Save one flag (new, edited, or accepted after review). Reject with an Error: it stays unsaved, said so.
`onCreateIssue`	`((issue: IssueDraft) => Promise<{ number: string; }>)`	—	Create one service issue; resolve with its number in the maintenance system.
`onExport`	`((q: { earlierId: string; laterId: string; scope: "all" \| "filtered"; featureIds: strin…`	—	Export the comparison report.
`sync`	`SyncPolicy`	—
`onSyncChange`	`((policy: SyncPolicy) => Promise<unknown>)`	—
`destinationReachable`	`boolean`	—	false: the maintenance system can't be reached; flags wait to sync.
`destination`	`string`	—	The maintenance system's name ("Wrenchline").
`online`	`boolean`	—	false: the device is offline; flags can't be saved, the answers stay.
`currency`	`string`	—	ISO currency for costs. Default USD.
`by`	`string`	—	Who is working, written on the flags made here.
`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 { InspectionReview } from "@beamline/inspection-review";

Get it

Inspection review 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

Inspection reviewComplete system · $49

A unit's inspection, reviewed in three views.

Flags into service issues

The move-out inspection of Unit 2B has four flags; the resident's waits for review. General repair has no Wrenchline category yet: choose one, and the flags group into one issue per category. Appliances fails on its first try; Try this one again sends it alone with the same key, so nothing is created twice.

0 × 0full

Two inspections compared

July's routine inspection beside the move-out: features paired by name, a changed answer named in words, a question asked in one only, a question whose type changed (not compared), and the carpet that became flooring kept in view as unmatched. Differences only narrows the rows; the report's scope is chosen before export.

0 × 0full

States

One state at a time, from Example state: the findings with their flags (the sink first); offline, where a flag can't be saved; a flag Keystone refuses; the comparison; Wrenchline unreachable; an inspection with no flags; loading. Sync settings open from the head.

0 × 0full

About Inspection review

← Change orders Work orders →

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.

Inspection review

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Construction