Order ledger

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

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, named in words), with the invoices and card spend behind it. The order itself keeps purchaser, supplier and delivery place, lines with units and prices and whether each needs a receipt, internal files apart from those sent to the supplier, and approval, sending, delivery and billing as separate states; a supplier still waiting for approval holds the order. Auto-close says when an order closes if nothing new comes in, lets one order be left out, and a closed order be reopened (a refusal said). New orders are made from approved request lines, one supplier and one budget per order, quantities up to what remains, each line keeping the request it came from.

Use it for

Following what was approved against what was billed and paid: purchase orders, contracts with a ceiling, project budgets, blanket orders.
Turning approved requests into orders without mixing suppliers or budgets.

Not for

Receiving deliveries into stock (purchase-orders).
A single request's approvals (purchase-request).
Invoices you send to customers (invoices).

Anatomy

header: the product's mark, the title, Auto-close (a popover: on, days), New order from requests
orders (nav): vendor, approved total, a slim bar of billed against it, number, status and billing in words
order head: number and vendor, the period or start, the approved total, status and billing
auto-close line: when it closes if nothing new comes in, Leave out (or Include); closed: why and when, Reopen
Spend: usage-meter (paid, billed not paid, pending against the approved total, left or over), the overrun named, invoices and card spend with kind, reference, date, status and amount
Order: a supplier waiting for approval said first; purchaser, supplier, deliver to, approval, sent, delivery, billing; lines with receipt or service and the request they came from; internal files and files sent to the supplier apart
Activity: dated entries, newest first
from requests (sheet): request lines by location under their source request (requester, date, budget); checkbox and quantity; a line from another supplier or budget said and not choosable; Create order with line count and amount

States

unbilled, partly billed, fully billed, overbilled, closed, ended, archived, spend not known
auto-close: off, scheduled, left out, closed, reopened, reopen refused
order: draft, waiting for approval, approved not sent, sent; supplier not approved; delivery none, partial, received, services
from requests: nothing chosen, chosen with quantities, another supplier or budget refused, creating, not created
loading: shaped skeletons; no orders
phone: the list, then the order with Back
right to left: bars fill from the right; arrows mirror
reduced motion: through the tokens

Keyboard

Tab through the list, the order's actions and its views; arrows move between the views
In the sheet: Tab through the lines' boxes and quantities; Escape closes

Motion

The usage meter and the sheet use their own parts' motion. Nothing runs at rest.

Props

Prop	Type	Default	Description
`orders`	`LedgerOrder[]`	—
`defaultOrders`	`LedgerOrder[]`	—
`onOrdersChange`	`((orders: LedgerOrder[]) => void)`	—
`open`	`string`	—	Controlled open state; omit to use defaultOpen.
`defaultOpen`	`string`	—	Initial open state when uncontrolled; defaults to false.
`onOpenChange`	`((id: string) => void)`	—	Reports an open-state change; no callback by default.
`requestLines`	`RequestLine[]`	—	Request lines that can become an order.
`onCreateFromRequests`	`((picks: { lineId: string; quantity: number; }[]) => Promise<LedgerOrder>)`	—	Make an order from chosen request lines; resolve with it. Reject: kept as chosen, the reason said.
`onAction`	`((orderId: string, action: OrderAction) => Promise<LedgerOrder>)`	—	Exclude from auto-close, include again, or reopen; resolve with the order as your app has it.
`policy`	`AutoClosePolicy`	—
`onPolicyChange`	`((p: AutoClosePolicy) => Promise<unknown>)`	—
`today`	`string`	—	Today in the company's calendar.
`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 { OrderLedger } from "@beamline/order-ledger";

Get it

Order ledger 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

Order ledgerComplete system · $49

Purchase orders as money.

Spend against an order

Northwind Ceramics' orders. PO-2291 with Kilnworks: $12,400 paid, $4,100 billed and a pending freight charge of $3,350 take it $1,850 past its $18,000 approved total, drawn past the end and named. It closes on Dec 14 if nothing new comes in. New order from requests picks approved request lines into one order: one supplier, one budget.

0 × 0full

States

One state at a time: an order closed by auto-close (Reopen); a reopen Tallyhouse refuses; an order billed over its total and left out of auto-close; an order whose supplier is waiting for approval; spend that can't be read (nothing drawn as zero); loading.