# Service estimate A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Shop](https://beamline.io/components/apps/shop) app. Live demo: https://beamline.io/components/service-estimate 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](https://beamline.io/components/job-card)). - Sending the estimate ([estimate-share](https://beamline.io/components/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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert](https://beamline.io/components/alert.md) - [Avatar](https://beamline.io/components/avatar.md) - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) - [Button](https://beamline.io/components/button.md) - [Combobox](https://beamline.io/components/combobox.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Inline edit](https://beamline.io/components/inline-edit.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Radio group](https://beamline.io/components/radio-group.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Shop - [Product editor](https://beamline.io/components/product-editor): A product being made in a shop's back office, every value read as text at rest. The variant grid, grouped by the first option, lists each combination… - [Category manager](https://beamline.io/components/category-manager): A shop's product categories, nested and ranked. Each category moves up, down or into another from its menu, and every move gets its own receipt (saving… - [Inventory item](https://beamline.io/components/inventory-item): One stock item in a shop's back office, apart from the variants that sell it (how many each uses per unit). Stock per location as stocked, reserved and… - [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in… - [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the… - [Orders admin](https://beamline.io/components/orders-admin): A shop's order desk: today's orders and revenue, quick filters for what needs doing (to fulfil, unpaid, returns), a virtualised orders grid, and the… - [Order detail](https://beamline.io/components/order-detail): One shop order with payment and fulfilment as two separate lanes. The header says where each stands (paid, partly paid, awaiting, refunded; not… - [Order board](https://beamline.io/components/order-board): A shop's orders as cards in its columns, on the shared kanban with drag and keyboard moves. Each card: number, estimate or work order, customer, vehicle… - [Order composer](https://beamline.io/components/order-composer): An order made inside a support ticket: products found by name, each variant with its stock drawn and said (in stock, none, oversold, not known) and the… - [Draft orders](https://beamline.io/components/draft-orders): A draft order made for a customer in a shop's back office that reads like the order it will become. The lines lead: each with its variant and SKU or… - [Order changes](https://beamline.io/components/order-changes): What happens to a shop order after it's placed. Edit: the order as it stands beside the requested version, each line marked new, changed (old → new… - [Special orders](https://beamline.io/components/special-orders): Customers' special orders as demand to buy for, per outlet: To order apart from Ordered; each product's demand, what is reserved, incoming and on order… - [Order history and fills](https://beamline.io/components/order-history): Every order the account placed and every fill it got, for a period: totals for volume, fees, fill rate and maker share; orders with their status and how… - [Order ledger](https://beamline.io/components/order-ledger): Purchase orders as money. Each order's spend is drawn against its approved total (paid, billed, pending, what is left, and any overrun past the end… - [Ticket orders](https://beamline.io/components/ticket-orders): A customer's orders inside a support ticket, each action's effect said before it's done: orders and drafts kept apart, a paid draft shown once as its… - [Record search](https://beamline.io/components/record-search): One search across connected records (customers, vehicles, orders) by name, phone, plate, VIN or order number. What the words look like is said (info)… - [Return queue](https://beamline.io/components/return-queue): A queue of return cases. Search by return, order or customer, exactly (the default) or loosely; status tabs with counts, Requires attention first; a date… - [Return case](https://beamline.io/components/return-case): One return as one place where every act is its own. The return, its order (linked out) and the customer on three cards; the stage said on its tone. Items… - [Return request](https://beamline.io/components/return-request): Staff start a return from an order, and edit the reasons customers pick. New return: the order's lines as a checklist, each with its variant, price and… - [Purchase orders](https://beamline.io/components/purchase-orders): A salon's purchase orders, received: the orders down the side, the chosen one beside them. Each line still due reads as a strip of received, this… - [Print quote](https://beamline.io/components/print-quote): A print shop's quoting in three places. Quote: a group of garments that share one imprint and one quantity break, the group's pieces counted together and… - [Job card](https://beamline.io/components/job-card): A technician's repair order, phone-first. The vehicle, the customer and when it's due in words (due at, due in, overdue by how long); an offline copy… - [Parts tracker](https://beamline.io/components/parts-tracker): Parts across a shop's work orders: each with its number, the order and vehicle, supplier, quantity and cost (not known said), and where it is: ordered… - [Visit board](https://beamline.io/components/visit-board): The staff board for a walk-in queue: visits move from waiting through called and serving to done today. Arrival (here or on the way), the place in the… 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).