C. Data & Tables

Invoice / Order List

Orders with status and totals, order detail, an invoice document, a payment timeline and bulk export/print.

5 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add data/invoice

01Orders table with status & totals

Uses: AppFrame · Table · StatCard · Badge · Pagination

components/blocks/data/invoice/01-orders-table.tsx

Uses: AppFrame · LineItem · Badge · TimelineEvent · Button

components/blocks/data/invoice/02-order-detail.tsx

Uses: AppFrame · Table · Badge · Button

components/blocks/data/invoice/03-invoice-document.tsx

Uses: AppFrame · TimelineEvent · Badge · Progress

components/blocks/data/invoice/04-payment-timeline.tsx

Uses: AppFrame · Dialog · Checkbox · RadioGroup · Table

components/blocks/data/invoice/05-bulk-export.tsx