Service estimate

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

An estimate for one vehicle. Services added from the catalogue (one not listed for this vehicle said on warning, fit unknown said); each with its lines: labour (hours at the rate), parts and fees, how many, the price each and where it comes from (the shop's rate, the customer's, set by hand, or a cost not known on warning), the line total, and what the customer sees (shown, shown without price, or inside the service's price) as a quiet word whose menu changes it. A part's sources side by side: in stock (success) or a supplier, its cost (or none given), arrival and what the customer would pay; Use this sets the part's cost. Remove a service from its menu. As the customer sees it: services with their prices, shown lines, included lines, and how many are folded in. The customer's own terms: labour rate and parts markup beside the shop's, tax exemption with its certificate (needed), hours hidden on documents; saving asks whether this estimate follows or only new orders. Totals: parts, labour, fees, tax on parts or exempt, total; prices not known counted and the total waiting; Save, refused said.

Use it for

Composing an estimate of services, labour and parts with sourcing, for one asset or job.
Controlling what a customer sees of each line, and pricing by customer-specific terms.

Not for

A technician's repair order and time (job-card).
Sending the estimate (estimate-share).

Anatomy

header: the tool's mark, the estimate's number, vehicle and customer, the terms button, Build / As the customer sees it
services: name, fit, total, menu; lines with quantity or hours as figures that edit in place, price each and its source, total, and what the customer sees as a word with its menu; a part's sources
Add a service
customer view: services, lines, included, folded
terms: own labour rate, own markup, tax exempt with certificate, hours hidden; where they apply
footer: parts, labour, fees, tax, total; prices not known; saved; Save

States

service fits, not listed, fit unknown; part with or without a source, cost not given
lines shown, without price, folded
terms the shop's or the customer's, certificate missing, applied here or for new orders
saved, refused; a new estimate
phone: lines stacked
right to left: mirrored
reduced motion: through the tokens

Keyboard

Tab through the view switch, each line's quantity and what the customer sees, the sources and Use this, Add a service, the terms and Save

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`order` (required)	`{ number: string; vehicle: string; customer: string; }`	—
`services`	`EstimateService[]`	—
`defaultServices`	`EstimateService[]`	—
`onServicesChange`	`((s: EstimateService[]) => void)`	—
`catalogue` (required)	`CatalogueService[]`	—
`sources` (required)	`PartSource[]`	—
`shop` (required)	`ShopRates`	—
`terms` (required)	`CustomerTerms`	—
`onTerms` (required)	`(t: CustomerTerms, applyHere: boolean) => Promise<{ ok: true; } \| { refused: string; }>`	—
`onSave` (required)	`(s: EstimateService[]) => Promise<{ ok: true; } \| { refused: string; }>`	—
`currency`	`string`	—
`defaultView`	`"build" \| "customer"`	—
`defaultTermsOpen`	`boolean`	—
`defaultSourcesOpen`	`string`	—	A part line whose sources start open.
`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<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { ServiceEstimate } from "@beamline/service-estimate";

Get it

Service estimate 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