{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "invoice-1", "title": "Invoice 1: invoice you can pay", "author": "Ballmac ", "description": "An invoice you can read, print and pay: parties, dates and line items, totals worked out from the lines, a status from the dates (paid, due in N days, overdue by N days) and a Pay now that handles waiting and failure.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json" ], "files": [ { "path": "registry/ballmac/components/blocks/invoice-1/invoice-1.tsx", "content": "// Ballmac UI: Invoice 1. https://ui.ballmac.com/blocks/invoice-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { CircleAlert, CircleCheck, Clock, CreditCard, Download, Loader2, Printer } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\ntype Invoice1Line = { id: string; description: string; detail?: string; quantity: number; unitPrice: number }\ntype Invoice1Party = { name: string; lines: string[] }\n\ntype Invoice1Data = {\n number: string\n /** ISO dates. */\n issued: string\n due: string\n /** Set when it has been paid. */\n paidOn?: string\n from: Invoice1Party\n to: Invoice1Party\n lines: Invoice1Line[]\n /** Percent off the subtotal, 0 to 100. */\n discountPercent?: number\n /** Tax rate in percent. */\n taxPercent?: number\n note?: string\n /** How to pay by transfer, shown when unpaid. */\n paymentDetails?: { label: string; value: string }[]\n}\n\ntype Invoice1Props = Omit, \"title\"> &\n StateProps & {\n invoice?: Invoice1Data\n /** An ISO date for \"today\", used to say whether it is overdue. The block never reads the clock. */\n today?: string\n currency?: string\n locale?: string\n /** Called by Pay now. Return a promise; reject to show its message. Leave out to hide the button. */\n onPay?: () => void | Promise\n /** Called by Download. Leave out to hide the button. */\n onDownload?: () => void\n }\n\nconst sample: Invoice1Data = {\n number: \"INV-2041\",\n issued: \"2026-10-01\",\n due: \"2026-10-15\",\n from: { name: \"Acme Studio Ltd\", lines: [\"Rua da Prata 120\", \"1100-420 Lisboa, Portugal\", \"VAT PT 509 123 456\"] },\n to: { name: \"Northwind Logistics\", lines: [\"Attn: Elena Marsh\", \"88 Orchard St\", \"New York, NY 10002\"] },\n lines: [\n { id: \"1\", description: \"Product design sprint\", detail: \"Two weeks, three designers\", quantity: 1, unitPrice: 9600 },\n { id: \"2\", description: \"Design system audit\", detail: \"Components, tokens and accessibility\", quantity: 1, unitPrice: 3200 },\n { id: \"3\", description: \"Workshop days\", detail: \"On site, including travel\", quantity: 2, unitPrice: 1450 },\n { id: \"4\", description: \"Prototype hosting\", detail: \"Per month\", quantity: 3, unitPrice: 40 },\n ],\n discountPercent: 5,\n taxPercent: 0,\n note: \"Thank you for working with us. Payment is due within 14 days. A late fee of 1.5% a month applies after that.\",\n paymentDetails: [\n { label: \"Bank\", value: \"Banco Atlântico\" },\n { label: \"IBAN\", value: \"PT50 0002 0123 1234 5678 9015 4\" },\n { label: \"Reference\", value: \"INV-2041\" },\n ],\n}\n\nconst DAY = 86_400_000\nconst toT = (iso: string) => Date.parse(`${iso}T00:00:00Z`)\n\nfunction Skel() {\n return (\n
\n \n \n \n
\n )\n}\n\n/**\n * An invoice you can read, print and pay: who it is from and to, the dates, each line with its quantity and amount, then the subtotal,\n * discount, tax and total, all worked out from the lines. Its status (paid, due in N days, overdue by N days) comes from the dates and the day\n * you pass, never the clock. Pay now handles the wait and a failure, and the print view hides the buttons.\n */\nfunction Invoice1({ invoice = sample, today = \"2026-10-18\", currency = \"USD\", locale = \"en\", onPay, onDownload, state = \"ready\", onRetry, errorState, className, ...props }: Invoice1Props) {\n const id = React.useId()\n const [paidNow, setPaidNow] = React.useState(false)\n const [paying, setPaying] = React.useState(false)\n const [payError, setPayError] = React.useState()\n const money = (n: number) => new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(n)\n const date = React.useMemo(() => new Intl.DateTimeFormat(locale, { day: \"numeric\", month: \"long\", year: \"numeric\", timeZone: \"UTC\" }), [locale])\n\n const subtotal = invoice.lines.reduce((n, l) => n + l.quantity * l.unitPrice, 0)\n const discount = (subtotal * (invoice.discountPercent ?? 0)) / 100\n const taxable = subtotal - discount\n const tax = (taxable * (invoice.taxPercent ?? 0)) / 100\n const total = taxable + tax\n\n const paid = !!invoice.paidOn || paidNow\n const daysLate = Math.floor((toT(today) - toT(invoice.due)) / DAY)\n const status = paid\n ? { tone: \"paid\" as const, label: \"Paid\", note: invoice.paidOn ? `on ${date.format(toT(invoice.paidOn))}` : \"just now\", icon: CircleCheck }\n : daysLate > 0\n ? { tone: \"late\" as const, label: \"Overdue\", note: `by ${daysLate} ${daysLate === 1 ? \"day\" : \"days\"}`, icon: CircleAlert }\n : { tone: \"due\" as const, label: \"Due\", note: daysLate === 0 ? \"today\" : `in ${-daysLate} ${-daysLate === 1 ? \"day\" : \"days\"}`, icon: Clock }\n const tone = { paid: \"bg-chart-2/10 border-chart-2/30\", late: \"bg-destructive/10 border-destructive/30\", due: \"bg-amber-500/10 border-amber-500/40\" }[status.tone]\n\n async function pay() {\n setPayError(undefined)\n setPaying(true)\n try {\n await onPay?.()\n setPaidNow(true)\n } catch (e) {\n setPayError(e instanceof Error ? e.message : \"The payment did not go through. You have not been charged.\")\n } finally {\n setPaying(false)\n }\n }\n\n const content = (\n
\n
\n

\n \n {status.label} {status.note}\n

\n
\n {onDownload ? (\n \n ) : null}\n \n
\n
\n\n
\n
\n
\n \n {invoice.from.name[0]}\n \n

\n Invoice {invoice.number}\n

\n
\n
\n

Amount {paid ? \"paid\" : \"due\"}

\n

{money(total)}

\n
\n
\n\n
\n
\n
\n
From
\n
\n {invoice.from.name}\n {invoice.from.lines.map((l) => (\n \n {l}\n \n ))}\n
\n
\n
\n
\n
\n
Billed to
\n
\n {invoice.to.name}\n {invoice.to.lines.map((l) => (\n \n {l}\n \n ))}\n
\n
\n
\n
\n
\n
Issued
\n
{date.format(toT(invoice.issued))}
\n
\n
\n
{paid ? \"Was due\" : \"Due\"}
\n
{date.format(toT(invoice.due))}
\n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n {invoice.lines.map((l) => (\n \n \n \n \n \n \n ))}\n \n
Items on invoice {invoice.number}
DescriptionQtyUnit priceAmount
\n

{l.description}

\n {l.detail ?

{l.detail}

: null}\n 		{l.quantity}{money(l.unitPrice)}{money(l.quantity * l.unitPrice)}
\n
\n\n
\n
\n
Subtotal
\n
{money(subtotal)}
\n
\n {discount ? (\n
\n
Discount ({invoice.discountPercent}%)
\n
−{money(discount)}
\n
\n ) : null}\n
\n
Tax{invoice.taxPercent ? ` (${invoice.taxPercent}%)` : \"\"}
\n
{money(tax)}
\n
\n
\n
Total
\n
{money(total)}
\n
\n
\n\n {!paid && invoice.paymentDetails?.length ? (\n
\n

Pay by bank transfer

\n
\n {invoice.paymentDetails.map((d) => (\n \n
{d.label}
\n
\n {d.value}\n
\n \n ))}\n
\n
\n ) : null}\n\n {invoice.note ?

{invoice.note}

: null}\n\n {!paid && onPay ? (\n
\n \n {payError ? (\n

\n \n {payError}\n

\n ) : null}\n
\n ) : null}\n
\n
\n )\n\n return (\n
\n } error={{ title: errorState?.title ?? \"The invoice could not be loaded\", description: errorState?.description ?? \"Check your connection and try again.\", ...errorState }}>\n {content}\n \n
\n )\n}\n\nexport { Invoice1, type Invoice1Props, type Invoice1Data, type Invoice1Line }\n", "type": "registry:component", "target": "@components/ballmac/blocks/invoice-1/invoice-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "invoice", "billing", "payment", "receipt", "bill", "line items", "tax", "pay now", "print", "accounting" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "An invoice. Promise} onDownload />. Subtotal, discount, tax and total are worked out from the lines; status is paid (paidOn set or payment succeeded), overdue by N days, or due in N days, from due and today. Pass today yourself; the block never reads the clock. Reject onPay to show its message.", "whenToUse": [ "A customer-facing invoice page or a payment link", "An invoice detail in a billing area" ], "whenNotToUse": [ "A list of invoices (use a data table)", "Changing plans with proration (use billing-2)" ], "composesWith": [ "billing-1", "billing-2", "app-shell-1", "settings-5" ], "a11y": [ { "keys": "Status", "action": "A live region that says Paid on a date, Due in N days, or Overdue by N days, with an icon, not only color" }, { "keys": "Table", "action": "The items are a real table with a caption and column headers; totals are a description list" }, { "keys": "Pay now", "action": "The button says the amount and shows Paying while busy; a failure is an alert that says no charge was made" } ], "customization": [ "currency and locale format every amount and date", "Print hides the buttons and the card border", "Bank details are shown left to right in right-to-left layouts, like any number" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "invoice-1-loading", "trigger": "state=\"loading\"", "note": "A skeleton sheet announced as loading." }, { "id": "error", "title": "Could not load", "example": "invoice-1-error", "trigger": "state=\"error\"", "note": "An alert with Try again (onRetry). A failed payment says you were not charged, in place beside Pay now." } ], "examples": [ "invoice-1-demo", "invoice-1-due", "invoice-1-paid", "invoice-1-loading", "invoice-1-error" ], "url": "https://ui.ballmac.com/components/invoice-1" }, "categories": [ "blocks", "invoice" ], "type": "registry:block" }