InvoiceList

Code

import { InvoiceList, type InvoiceSummary } from "@fadymondy/nasaq/web";const invoices: InvoiceSummary[] = [  { id: "1", number: "INV-2026-0042", issueDate: "2026-09-01", dueDate: "2026-09-30", amount: 281.75, status: "open" },  { id: "2", number: "INV-2026-0037", issueDate: "2026-08-01", amount: 281.75, status: "paid" },];export function Billing() {  return <InvoiceList invoices={invoices} currency="USD" onOpen={(i) => console.log(i.number)} />;}

Billing · beta

Live examples and controls: InvoiceList in the lab.

InstallCopy Anchor Link

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

A billing history view: outstanding, overdue and paid tiles on top, then an Invoices tab (and an optional Payments tab) built on DataTable with search, a status filter, pagination and a download button on every row.

When to useCopy Anchor Link

• A customer's invoice and payment history.
• An admin list of invoices with quick status filtering.

When not to useCopy Anchor Link

• Showing one invoice: use InvoiceView.
• A generic table: use DataTable.
• Wallet activity: use WalletTransactions.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

import { InvoiceList, type InvoiceSummary } from "@fadymondy/nasaq/web";

const invoices: InvoiceSummary[] = [
  { id: "1", number: "INV-2026-0042", issueDate: "2026-09-01", dueDate: "2026-09-30", amount: 281.75, status: "open" },
  { id: "2", number: "INV-2026-0037", issueDate: "2026-08-01", amount: 281.75, status: "paid" },
];

export function Billing() {
  return <InvoiceList invoices={invoices} currency="USD" onOpen={(i) => console.log(i.number)} />;
}

AnatomyCopy Anchor Link

InvoiceList                     data-slot="invoice-list"
├─ StatGrid                     outstanding · overdue · paid (showSummary)
└─ Tabs                         invoices · payments (when `payments` is given)
   └─ DataTable                 search, status facet filter, rows, pagination

APICopy Anchor Link

InvoiceListCopy Anchor Link

InvoiceListProps extends Omit<ComponentProps<"div">, "children">.

TypesCopy Anchor Link

InvoiceSummary: id, number, customer?, issueDate, dueDate?, amount, status: InvoiceStatus. PaymentRecord: id, date, amount, status: PaymentStatus ("succeeded" | "pending" | "failed" | "refunded"), method, invoiceNumber?, reference?.

summarizeInvoicesCopy Anchor Link

(invoices: readonly InvoiceSummary[]) => { outstanding, overdue, paid }. Open and overdue count as outstanding.

ExamplesCopy Anchor Link

With payments and downloadCopy Anchor Link

<InvoiceList
  invoices={invoices}
  payments={[{ id: "p1", date: "2026-08-03", amount: 281.75, status: "succeeded", method: "Visa ending 4242", invoiceNumber: "INV-2026-0037" }]}
  currency="USD"
  onDownload={async (i) => {
    await savePdf(i.number);
  }}
/>

Loading and errorCopy Anchor Link

<InvoiceList invoices={[]} currency="USD" loading />
<InvoiceList invoices={[]} currency="USD" error onRetry={() => refetch()} />

ArabicCopy Anchor Link

<NasaqProvider locale="ar">
  <InvoiceList invoices={invoices} currency="SAR" />
</NasaqProvider>

AccessibilityCopy Anchor Link

• Status chips have an icon and a word.
• Download buttons are named with the invoice number.
• Localise labels for any custom copy.

RTL & i18nCopy Anchor Link

Built-in English and Arabic. Amounts use Intl and are isolated left to right; invoice numbers and references stay left to right. Dates follow the locale.

Styling & tokensCopy Anchor Link

Composes DataTable, StatCard and Tabs, so it uses their tokens. Target [data-slot="invoice-list"]; extend with className.

Do / Don'tCopy Anchor Link

• Do reject the onDownload promise to show an error message.
• Do pass one currency; mixed-currency lists need separate lists.
• Don't put more than a few thousand rows in without server paging.

RelatedCopy Anchor Link

• invoice-view
• data-table
• wallet

LabCopy Anchor Link

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