Invoices

A React block (a whole screen) in Beamline's Blocks category.

Accounts receivable in one screen: what is outstanding, overdue and paid, the invoices by status in a virtualised grid with bulk reminders, and each invoice opened as the document itself with its history and the one action its status calls for (send, record payment, download), all optimistic.

Use it for

A finance or billing screen for invoices you issue: chase what is overdue, send drafts, record payments, read an invoice as the customer sees it.

Not for

A customer's own billing settings and payment method (settings).
Choosing a plan (plan-comparison).
Orders from a shop (orders-admin).

Anatomy

app shell (your navigation, workspace mark), New invoice in the top bar
figures: outstanding, overdue (amount and count), paid in the last 30 days, drafts
status tabs with counts: All · Draft · Sent · Overdue · Paid
invoices grid: number, customer, status, issued, due (with days left or late), total; bulk Send reminder and Mark paid
invoice sheet: the document (from, bill to, lines, subtotal, tax, total, due), its history, the action its status calls for, Void behind a confirmation

States

loading (the figures and grid hold their shape)
failed to load (the error with Try again)
no invoices (says what lands here, offers New invoice)
a status with none (the grid's empty label)
draft · sent · overdue (sent and past due, derived from today) · paid · void — each a word and a tone
tax not calculated (hatched; the total says excl. tax)
an action working, done, refused (the invoice goes back and the reason sits under the action with Try again)

Keyboard

the status tabs move with the arrows
grid: arrows between cells, Space selects, Enter opens the invoice
Esc closes the sheet and focus returns to the row
Void asks in place; Esc backs out

Motion

Figures roll to new values after every action; a status change eases the badge's colour; the sheet slides in on --motion-in; Void morphs between asking, working and done. Reduced motion: values change in place.

Props

Prop	Type	Default	Description
`invoices / defaultInvoices / onInvoicesChange`	`Invoice[]`	—
`onAction`	`(ids: string[], action: InvoiceAction) => Promise<void> \| void`	—	send · remind · mark-paid · void. Applied at once; a rejection puts the invoices back and shows why.
`onCreate`	`() => void`	—	Shows New invoice.
`onDownload`	`(invoice: Invoice) => void`	—	Shows Download PDF on sent and paid invoices.
`openInvoice / defaultOpenInvoice / onOpenInvoiceChange`	`string \| null`	—
`from`	`{ name: string; address?: string; email?: string }`	—	Your company on the document.
`loading / error / onRetry`	`boolean / Error \| null / () => void`	—
`workspace`	`string`	`"Northline"`
`nav`	`AppShellNavGroup[]`	—
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—

Built from

app-shell
metric-card
tabs
data-grid
button
badge
sheet
table
timeline
confirm-morph
alert
empty-state

Dependencies

@tanstack/react-virtual, lucide-react

Import

import { Invoices } from "@/blocks/invoices/invoices";

Get it

Invoices is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent