InvoicePro

The invoice beside its history: send it, record a payment in full or in part, mark it paid or void it, and print it.

When to use

An invoice beside its history: send it, record a payment in full or in part, void it, print it.
Invoicing, accounting and agency tools that bill clients.

When not to use

Subscriptions billed automatically: Billing settings lists their invoices.
Receipts for one-time purchases: an order's detail is enough.

Usage

Invoice with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { InvoiceDetail } from "@/components/dashral/blocks/invoice-detail"
2
3<InvoiceDetail
4  invoice={invoice}
5  currency={invoice.currency}
6  onSend={(to) => api.invoices.send(invoice.id, to)}
7  onRecordPayment={(payment) => api.invoices.pay(invoice.id, payment)}
8  onVoid={() => api.invoices.void(invoice.id)}
9  onDownload={() => api.invoices.pdf(invoice.id)}
10/>

API reference

InvoiceDetail

An invoice page: the document itself — sender and client, line items, discount, tax and total, payment details — beside what's happened to it. Send it by email, record a payment (in full or in part), mark it paid, void it or download it; the status, the amount due and the history follow. Download prints just the document. The invoice comes from props, and every action calls your handler first: one that throws changes nothing and says why.

Prop	Type	Default
`invoice`	`InvoiceData`	`sample`
`sender`	`string` Who signs the email in Send.	`"Olivia"`
`currency`	`string`	`"USD"`
`locale`	`string`	`"en-US"`
`onSend`	`(email: { to: string; message: string }) => Promise<void> \| void`	—
`onRecordPayment`	`(amount: number) => Promise<void> \| void`	—
`onVoid`	`() => Promise<void> \| void`	—
`onDuplicate`	`() => Promise<void> \| void`	—
`onDownload`	`() => void` Download: your PDF (it prints the document without it).	—

type InvoiceStatus

= "draft" | "sent" | "partial" | "paid" | "void"

type InvoiceEvent

Prop	Type	Default
`id`	`number \| string`	—
`title`	`string`	—
`time`	`string`	—
`kind`	`"created" \| "sent" \| "viewed" \| "payment" \| "void"`	—

type InvoiceData

The invoice: who it's from and to, what's on it, how to pay it, where it stands and what's happened to it.

Prop	Type	Default
`number`	`string`	—
`issued`	`string`	—
`due`	`string`	—
`overdue`	`string` Beside the status while it's overdue, e.g. "Due Oct 15 · 2 days late", and what the payment card says then.	—
`overdueNote`	`string`	—
`from`	`{ name: string; mark?: string; address: string[] }`	—
`to`	`{ name: string; address: string[]; email: string }`	—
`items`	`{ description: string; detail?: string; qty: number; price: number }[]`	—
`discount`	`number` Shares: 0.05 is 5%.	—
`taxRate`	`number`	—
`payment`	`{ title: string; rows: { label: string; value: string }[] } \| null` How to pay: a heading and its rows; null hides it.	—
`notes`	`string`	—
`status`	`InvoiceStatus`	—
`paid`	`number`	—
`events`	`InvoiceEvent[]`	—