# Quality checks 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/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 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](https://beamline.io/components/document-review)). - A general approval of a request by amount ([approval-route](https://beamline.io/components/approval-route)). - The shop floor's job cards with their own final check ([shop-floor](https://beamline.io/components/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)` | — | 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)` | — | Send the current photo for review; reject to say why. | | `onReview` | `((checkId: string, review: CheckReview) => Promise)` | — | Record a decision on one photo; reject to say why. | | `onPreview` | `((point: ControlPoint) => Promise)` | — | 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)` | — | 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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Badge](https://beamline.io/components/badge.md) - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) - [Button](https://beamline.io/components/button.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Empty state](https://beamline.io/components/empty-state.md) - [File drop zone](https://beamline.io/components/file-dropzone.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Lightbox](https://beamline.io/components/lightbox.md) - [Multi-select](https://beamline.io/components/multi-select.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) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Tabs](https://beamline.io/components/tabs.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Textarea](https://beamline.io/components/textarea.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx 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](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… - [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).