# Equipment register 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/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, registration, and last reading with its age, beside one machine's record. The record leads with its meter: the last reading large with when it was read, the climb across the readings, the change since the reading before and the average use a day. Details (brand, model, year, registration, serial, engine) and ownership and cost (owned, leased or hired, acquired, purchase price, insured) read as text, what isn't recorded hatched and an unknown price said as not known, never zero; the whole cost section is replaced by a sentence when this person may not see it. Log reading opens a small form (a reading lower than the last in the same unit refused in words) and Edit details turns the record into fields, including the unit the meter counts in (past readings keep their own unit, said); both make a draft that waits for Save, Discard puts it back and a refused save keeps every change. ## Use it for - Farms, contractors, workshops and small fleets keeping a register of machines and vehicles: details, meter readings and what they cost. - Any asset record with a usage meter whose unit may change. ## Not for - Rooms and equipment for bookings ([resource-setup](https://beamline.io/components/resource-setup)). - Stock ([production-lots](https://beamline.io/components/production-lots)). - A full maintenance schedule. ## Anatomy - register: title with the count, search, a status filter with counts, a row per machine (photo or type icon, name, type and registration, last reading and its age, or the status when not in use) - head: photo or type icon, name, type, make, model, year and the registration plate, the status, Edit details and Log reading (Not saved, Discard changes and Save while there is a draft) - meter: the last reading large with its date and age, the change since the reading before, average use a day, the climb across the readings as a line; the unit select in Edit details and the unit-change sentence; one line when there are no readings - details: a two-column list of brand, model, year, registration, serial and engine (not recorded hatched; what's missing named beside the heading); fields in Edit details - ownership and cost: ownership, acquired, purchase price (Not known) and insured as text; fields in Edit details; or the restricted sentence - readings: every reading newest first with its date, value in its own unit and the climb from the one before; a reading not yet saved is marked - Log reading: the reading with its unit, the last one under it, Cancel and Add (on a phone, a bottom sheet) ## States - saved record - unsaved edits - missing specification - unknown purchase amount - insurance not known - saving - save failed - restricted accounting - unit changed - reading lower than the last - no readings - in repair - sold - reading at rest as text - editing details - no meter ## Keyboard - Tab through the search, the status filter and the register rows, then the record's actions and its lists - Log reading opens its form with the reading focused; Enter adds it when it is valid, Escape closes - Add is enabled only with a valid reading ## Motion None beyond the parts' own (the popover's arrival, a changed value lighting once in the lists); nothing moves at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `equipment` (required) | `Equipment[]` | — | | | `types` (required) | `string[]` | — | | | `canSeeAccounting` | `boolean` | — | This person may see ownership and cost. | | `selected` | `string` | — | | | `defaultSelected` | `string` | — | | | `onSelectedChange` | `((id: string) => void)` | — | | | `onSave` | `((e: Equipment) => void \| Promise)` | — | Saves the record; reject with why to keep the draft. | | `today` (required) | `string` | — | "2026-10-30": the date of a new reading, and what "18 days ago" counts from. | | `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. | | `typeIcons` | `Record` | — | An icon per type ({ Tractor: }), shown where a machine has no photo; a cog otherwise. | ## Built from - [search-field](https://beamline.io/components/search-field) - [segmented-control](https://beamline.io/components/segmented-control) - [description-list](https://beamline.io/components/description-list) - [line-chart](https://beamline.io/components/line-chart) - popover - [number-field](https://beamline.io/components/number-field) - input - select - checkbox - badge - button ## Dependencies `lucide-react` ## Import ```tsx import { EquipmentRegister } from "@beamline/equipment-register"; ``` ## Get it Equipment register 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… - [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… - [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).