Billing desk

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

A front desk's billing for one client with several animals. A hospital stay's daily sales are gathered into one invoice: open sales on a rail (chosen ones in the selection tint), another animal's sale offered beside them; the invoice previewed grouped by clinical day; the invoice date chosen with what it does to the chosen sales' dates said before generating, clinical dates kept; generated and still unpaid. A payment is recorded against the invoice, spread over the client's balance oldest first, or kept as credit: the amount drawn over what it pays, the fill's end a grip with the field as its precise twin; this invoice, the balance and the credit apart; card on the terminal or entered by hand (a hand entry never claims a terminal charge), cash with change or credit, the parts always adding up to the amount. Estimates come from templates with low and high quantities at a unit price, products nested under their service, optional lines left out of the low end; duplicate; saving raises the version, and an estimate made from a template keeps its snapshot.

Use it for

A front desk that bills one client for several sales or visits: a clinic, a workshop, a salon, a hotel folio gathered into one invoice.
Recording a payment that may cover several open items oldest first, leave change or become credit.
Estimates built from reusable templates with low and high ranges.

Not for

A receivables list across many customers (invoices).
A checkout taking a new order's payment (checkout).

Anatomy

header: the product's mark, the client's name, Invoice, Payment or Estimates
invoice: open sales on a rail (animal and clinical day, lines and total), how many are already invoiced; the preview with its status (draft or unpaid), the invoice date, lines grouped by clinical day with the animal's dot, the total; Make the invoice, then what the date does to the sales' dates, Back and Generate
payment: this invoice, the client's balance and the credit as three figures; Apply to this invoice, the balance oldest first, or credit only; the owed sales as stretches as long as what each owes, filled by the payment in order, a dashed stretch past the end for what is over, the fill's end a grip; what each sale gets; amount, method, card on the terminal or by hand, date and time; what the amount does and the sum of its parts; Charge or Record
estimates: templates on a rail with their range; the open template's lines (name, low, high, unit price, amount range, optional, a menu to add a product under a service or remove); Add a service; the range; Save as the next version, Make an estimate; estimates made from it with the version they kept
account (invoice view): earlier unpaid invoices and credit on the rail; under the total, what the account owes with this invoice
estimate template at rest: each line as text (quantity or low–high, unit price, amount, Optional); Edit lines turns the rows into fields, Done returns

States

invoice: sales chosen, another animal offered, nothing chosen, date moves sale dates, date moves nothing, generating, generation refused, generated unpaid
payment: partial, fully paid, change for cash, remainder as credit, all to credit, credit unknown, terminal waiting, card by hand, failed, recorded
estimates: unchanged, edited (save as next version or discard), saving, not saved, estimate made, an estimate from an older version kept
loading: shaped skeletons
phone: one column; template lines stack with their labels
right to left: fills run from the right
reduced motion: through the tokens

Keyboard

On the payment grip: Left/Right one cent, Shift ten, Home/End the limits; Escape while dragging puts the amount back
Tab through the sales, the date, the actions, the payment fields and the template lines; each line's menu opens with Enter

Motion

A sale's fill grows to what the payment gives it in the fast duration and follows the hand while the grip is held; a chosen sale's tint fades in. Nothing runs at rest.

Props

Prop	Type	Default	Description
`client` (required)	`string`	—
`sales` (required)	`DailySale[]`	—
`defaultChosen`	`string[]`	—	The sales chosen at first (a hospital stay's days).
`onConsolidate`	`((q: { saleIds: string[]; date: string; }) => Promise<{ number: string; }>)`	—	Make one invoice from the chosen sales, dated `date`. Resolve with its number.
`openSales`	`OpenSale[]`	—	What the client owes besides the new invoice, oldest first.
`credit`	`number \| null`	—	The client's credit on account.
`onPayment`	`((p: PaymentDraft) => Promise<{ receipt: string; }>)`	—	Record a payment. Reject with an Error: nothing recorded, the reason said.
`templates`	`EstimateTemplate[]`	—
`applied`	`AppliedEstimate[]`	—
`onSaveTemplate`	`((t: EstimateTemplate) => Promise<unknown>)`	—
`onApplyTemplate`	`((t: EstimateTemplate) => Promise<AppliedEstimate>)`	—
`defaultView`	`"estimates" \| "invoice" \| "pay"`	—
`defaultPayment`	`{ applyTo?: "credit" \| "invoice" \| "oldest" \| undefined; amount?: number \| undefined; m…`	—	Where the payment starts: what it applies to and its amount.
`defaultInvoice`	`{ number: string; date: string; } \| null`	—	A generated invoice to start from (number, date).
`today`	`string`	—
`currency`	`string`	—
`loading`	`boolean`	—
`product`	`string`	—
`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 { BillingDesk } from "@beamline/billing-desk";

Get it

Billing desk 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