Quality checks

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

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 sending it for review is its own step, since a photo is not a pass. The reviewer's Pass or Fail is recorded against that exact photo, so replacing the photo keeps the old decision struck through, said as made on an earlier photo. A control point says which products and operation make checks, one per order, product on the order or unit made, every time, as a sample or every few days, and what evidence they ask for; your app previews the checks it would create for a sample order as you change it, worker instructions, the failure message and internal notes are kept apart, and saving makes the next version while checks already made keep theirs.

Use it for

A workshop or factory where workers photograph their work for a check and a reviewer passes or fails it, and a quality manager decides which work makes checks.
Anywhere a decision must stay tied to the exact evidence it was made on, and replacing the evidence must not carry the decision over.

Not for

Reviewing a document's pages with comments (document-review).
A general approval of a request by amount (approval-route).
The shop floor's job cards with their own final check (shop-floor).

Anatomy

header: the product's mark, the title and the view switch (Checks, Control points)
list (nav): each check's label, order and where it stands; or each control point's name, operation and active version
check: label, order · operation · product, the control point version, its standing as a badge
evidence: what to photograph, the photo at the column's width (opens large in the lightbox) with who took it and when and Replace photo, or the drop area; an upload in flight or failed with Try again and Choose another; Send for review with the note that sending is not passing
review panel: the decision with who and when and the note; a decision on an earlier photo struck with the reason; the note field with Fail and Pass for a reviewer; the role said for others
control point: name, all products or chosen products, operation, one check per order / product / unit, how often (every time, a sample share, every few days) and the evidence as segmented choices, the evidence asked; tabs for the worker's text, the failure message and internal notes
preview panel: the sample order and the checks the draft would create, numbered, faded while it works them out
bar: that saving makes the next version, and Save version N

States

photo needed; file chosen and uploading; upload failed (the file kept, Try again, Choose another); photo attached, not sent; waiting for review; passed; failed; photo replaced since the review (stale)
sending: pending; refused with the reason
deciding: the pressed button waits; refused with the reason
without the reviewer role: the decision area says so
control point: all products; chosen products; none chosen (refused in place, no preview); periodic and sample frequencies with their figure; the preview working, ready, unavailable
saving: pending; saved as the next version (said); refused with the reason, the draft kept
look only: fields disabled, no Save, the permission said
loading: shaped skeletons; no checks: an empty state
phone: the list, then the check or control point full width with Back; the review and preview under the work
right to left: the layout mirrors
reduced motion: through the tokens

Keyboard

Tab through the list, the photo (Enter opens it large), Replace, the drop area, Send, the note, Fail and Pass
In a control point, the fields in order; arrows move within each radio group and the tabs
Escape closes the large photo

Motion

The preview fades while it is worked out and comes back with the new checks; the lightbox opens as the lightbox does. Nothing runs at rest.

Props

Prop	Type	Default	Description
`checks`	`QualityCheck[]`	—
`defaultChecks`	`QualityCheck[]`	—
`onChecksChange`	`((checks: QualityCheck[]) => void)`	—
`controlPoints`	`ControlPoint[]`	—
`defaultControlPoints`	`ControlPoint[]`	—
`onControlPointsChange`	`((points: ControlPoint[]) => void)`	—
`productOptions`	`string[]`	—	The products and operations a control point can name.
`operationOptions`	`string[]`	—
`defaultView`	`"checks" \| "points"`	—
`defaultCheckId`	`string`	—
`me`	`string`	—	Who is signed in, written on uploads and decisions the block records itself.
`now`	`number`	—	The clock for what the block records itself. Default the device's.
`onUpload`	`((checkId: string, file: File) => Promise<Evidence>)`	—	Upload one photo; resolve with the kept evidence, or reject to say why (the file stays, with Try again).
`onSubmit`	`((checkId: string, evidenceId: string) => Promise<unknown>)`	—	Send the current photo for review; reject to say why.
`onReview`	`((checkId: string, review: CheckReview) => Promise<unknown>)`	—	Record a decision on one photo; reject to say why.
`onPreview`	`((point: ControlPoint) => Promise<PreviewCheck[]>)`	—	The checks a draft control point would create for your sample order; reject when it can't be worked out.
`sampleOrder`	`string`	—	The order the preview is worked out for ("SO-118: 1 table, 4 chairs").
`onSavePoint`	`((point: ControlPoint) => Promise<unknown>)`	—	Save a control point as its next version; reject to keep the draft with your reason.
`canReview`	`boolean`	—	The person may record decisions.
`canEditPoints`	`boolean`	—	The person may change control points.
`loading`	`boolean`	—
`product`	`string`	—	Your product's name, shown as its mark.
`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 { QualityChecks } from "@beamline/quality-checks";

Get it

Quality checks 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

Quality checksComplete system · $49

Quality checks by picture and the control points that make them.

A check under review

MO-2229's vase photo was sent for review; Nadia records Pass or Fail against that photo. MO-2224's finish passed on an earlier photo, so its decision is kept but marked as made on a photo since replaced. MO-2231 still needs its photo.

0 × 0full

Control points

Glaze coverage makes one check per unit, so the sample order of 1 table and 4 chairs makes no checks (it covers only vases and bowls): switch to All products and it makes 5; per order makes 1. Worker text, the failure message and internal notes are kept apart; saving makes version 4.

0 × 0full

States

One state at a time, from Example state: an upload that fails once (Try again keeps the file); a check waiting for review; the same without the reviewer role; a control point save refused; control points without the permission; loading; no checks.

0 × 0full

About Quality checks

← Corrective actions Maintenance plan →

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.

Quality checks

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Construction