InvoiceView

Code

import { InvoiceView, type InvoiceData } from "@fadymondy/nasaq/web";const invoice: InvoiceData = {  number: "INV-2026-0042",  status: "open",  issueDate: "2026-09-01",  dueDate: "2026-09-30",  currency: "USD",  taxRate: 0.15,  from: { name: "Nasaq Ltd", address: ["1 King Fahd Rd", "Riyadh"], taxId: "300000000000003" },  to: { name: "Acme Co", email: "[email protected]" },  lines: [{ id: "1", description: "Team plan", details: "Sep 2026", quantity: 5, unitPrice: 49 }],};export function Invoice() {  return <InvoiceView invoice={invoice} />;}

Billing · beta

Live examples and controls: InvoiceView in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/invoice-view.json

Renders one invoice as a document: issuer and customer, dates, line items, subtotal, discount, tax, total, payments received and the balance due. It computes the totals from the lines with computeInvoice, so the numbers always add up. It prints cleanly: on print only the invoice sheet is visible, in black on white, and rows do not split across pages.

When to useCopy Anchor Link

• Showing a single invoice in an app or customer portal.
• Letting people print an invoice or save it as a PDF from the browser's print dialog.

When not to useCopy Anchor Link

• Listing many invoices: use InvoiceList.
• Taking a new payment: use CheckoutSteps.

ImportCopy Anchor Link

import { InvoiceView, type InvoiceData } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { InvoiceView, type InvoiceData } from "@fadymondy/nasaq/web";

const invoice: InvoiceData = {
  number: "INV-2026-0042",
  status: "open",
  issueDate: "2026-09-01",
  dueDate: "2026-09-30",
  currency: "USD",
  taxRate: 0.15,
  from: { name: "Nasaq Ltd", address: ["1 King Fahd Rd", "Riyadh"], taxId: "300000000000003" },
  to: { name: "Acme Co", email: "[email protected]" },
  lines: [{ id: "1", description: "Team plan", details: "Sep 2026", quantity: 5, unitPrice: 49 }],
};

export function Invoice() {
  return <InvoiceView invoice={invoice} />;
}

AnatomyCopy Anchor Link

InvoiceView                       data-slot="invoice-view"
├─ action bar                     Download · Print · Pay now (hidden in print)
└─ sheet                          data-slot="invoice-sheet" (the only thing printed)
   ├─ header                      logo, number, InvoiceStatusBadge
   ├─ parties                     from, to, dates
   ├─ lines table                 description, quantity, unit price, amount
   ├─ totals                      subtotal, discount, tax, total, paid, due
   └─ notes and terms

APICopy Anchor Link

InvoiceViewCopy Anchor Link

InvoiceViewProps extends Omit<ComponentProps<"section">, "children" | "title">.

InvoiceDataCopy Anchor Link

number, status: InvoiceStatus ("draft" | "open" | "paid" | "overdue" | "void" | "refunded"), issueDate, dueDate?, currency (ISO 4217), from and to (InvoiceParty: name, address?: string[], email?, phone?, taxId?, logo?), lines (InvoiceLine: id, description, details?, quantity, unitPrice, taxRate?), discount? (fixed amount), taxRate? (fraction), payments? (InvoicePayment: id, date, method, amount), notes?, terms?.

computeInvoiceCopy Anchor Link

(invoice: Pick<InvoiceData, "lines" | "discount" | "taxRate" | "payments" | "status">) => InvoiceTotals. Returns { subtotal, discount, tax, total, paid, due }. The discount is spread over the lines in proportion; due is 0 for draft, void and refunded invoices.

InvoiceStatusBadgeCopy Anchor Link

Other props go to the underlying Badge. useInvoiceStrings(labels?) returns { t, ar, locale } for sibling components.

ExamplesCopy Anchor Link

Paid invoice with a paymentCopy Anchor Link

<InvoiceView
  invoice={{ ...invoice, status: "paid", payments: [{ id: "p1", date: "2026-09-05", method: "Visa ending 4242", amount: 281.75 }] }}
/>

Download and payCopy Anchor Link

<InvoiceView
  invoice={invoice}
  onDownload={async () => {
    await savePdf(invoice.number);
  }}
  onPay={() => router.push("/pay")}
/>

ArabicCopy Anchor Link

<NasaqProvider locale="ar">
  <InvoiceView invoice={{ ...invoice, currency: "SAR" }} />
</NasaqProvider>

AccessibilityCopy Anchor Link

• The lines are a real table with column headers; totals are a description list.
• The status badge carries an icon and a word, never colour alone.
• Localise labels for any custom copy.

RTL & i18nCopy Anchor Link

Built-in English and Arabic. Amounts use Intl with the invoice currency, Latin digits by default like Num, isolated left to right. Invoice numbers, tax ids and emails stay left to right inside Arabic text. Dates use Intl.DateTimeFormat.

Styling & tokensCopy Anchor Link

Print rules are injected with the component: under @media print everything except [data-slot="invoice-sheet"] is hidden, colours are forced to black on white, and break-inside: avoid keeps rows whole. Screen styling uses bg-card, border-border and text tokens. Extend with className; do not use raw hex.

Do / Don'tCopy Anchor Link

• Do provide your own PDF through onDownload; the browser print dialog also offers "Save as PDF".
• Do pass logo as an element and leave it untouched.
• Don't compute totals yourself for display; use computeInvoice so the sheet and your data agree.

RelatedCopy Anchor Link

• invoice-list
• price
• checkout-steps

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-billing-invoiceview--docs