Invoices

Past invoices, with a pinned banner if a payment failed.

SourcePackage @weft-js/warp

Preview

tsx

import { Invoices } from '@weft-js/warp'import type { Invoice } from '@weft-js/warp'export function History() {  return (    <Invoices invoices={BILLS} onExport={() => {}} />  )}const BILLS: Invoice[] = [  { id: '10', date: 'Oct 1', number: 'INV-2026-10', status: 'paid', amount: 8560, pdf: '/samples/invoice.pdf' },  { id: '09', date: 'Sep 1', number: 'INV-2026-09', status: 'paid', amount: 8230, pdf: '/samples/invoice.pdf' },  { id: '08', date: 'Aug 1', number: 'INV-2026-08', status: 'paid', amount: 8010, pdf: '/samples/invoice.pdf' },  { id: '07', date: 'Jul 1', number: 'INV-2026-07', status: 'paid', amount: 7620, pdf: '/samples/invoice.pdf' },  { id: '06', date: 'Jun 1', number: 'INV-2026-06', status: 'paid', amount: 7690, pdf: '/samples/invoice.pdf' },  { id: '05', date: 'May 1', number: 'INV-2026-05', status: 'paid', amount: 7380, pdf: '/samples/invoice.pdf' },  { id: '04', date: 'Apr 1', number: 'INV-2026-04', status: 'paid', amount: 7240, pdf: '/samples/invoice.pdf' },  { id: '03', date: 'Mar 1', number: 'INV-2026-03', status: 'paid', amount: 6710, pdf: '/samples/invoice.pdf' },]

Installation

npm install @weft-js/warp

Usage

tsx

import { Invoices } from '@weft-js/warp'<Invoices invoices={BILLS} onExport={() => {}} />

A failed payment

Press Update payment method to clear it here.

tsx

import { state } from '@weft-js/core'import { Invoices } from '@weft-js/warp'import type { Invoice } from '@weft-js/warp'export function Failed() {  const fixed = state(false)  return <Invoices invoices={fixed.value ? BILLS : OVERDUE_BILLS} onUpdatePayment={() => (fixed.value = true)} />}const BILLS: Invoice[] = [  { id: '10', date: 'Oct 1', number: 'INV-2026-10', status: 'paid', amount: 8560, pdf: '/samples/invoice.pdf' },  { id: '09', date: 'Sep 1', number: 'INV-2026-09', status: 'paid', amount: 8230, pdf: '/samples/invoice.pdf' },  { id: '08', date: 'Aug 1', number: 'INV-2026-08', status: 'paid', amount: 8010, pdf: '/samples/invoice.pdf' },  { id: '07', date: 'Jul 1', number: 'INV-2026-07', status: 'paid', amount: 7620, pdf: '/samples/invoice.pdf' },  { id: '06', date: 'Jun 1', number: 'INV-2026-06', status: 'paid', amount: 7690, pdf: '/samples/invoice.pdf' },  { id: '05', date: 'May 1', number: 'INV-2026-05', status: 'paid', amount: 7380, pdf: '/samples/invoice.pdf' },  { id: '04', date: 'Apr 1', number: 'INV-2026-04', status: 'paid', amount: 7240, pdf: '/samples/invoice.pdf' },  { id: '03', date: 'Mar 1', number: 'INV-2026-03', status: 'paid', amount: 6710, pdf: '/samples/invoice.pdf' },]const OVERDUE_BILLS: Invoice[] = [{ id: '11', date: 'Nov 1', number: 'INV-2026-11', status: 'failed', amount: 8930 }, { id: '10r', date: 'Oct 1', number: 'INV-2026-10', status: 'retrying', amount: 8560 }, ...BILLS.slice(1, 4)]

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`invoices`	`readonly Invoice[] \| State<readonly Invoice[]>`	—	The rows.
`currency`	`string`	—	A currency code.
`locale`	`string`	—	The locale for the amounts.

Event	Type	Default	Description
`onUpdatePayment`	`(() => void)`	—	The banner's button.
`onExport`	`(() => void)`	—	Shows Export CSV.

RelatedPayment methods Usage meter