---
title: "Invoices page"
description: "Loam Wholesale's invoices to stockists: outstanding, overdue and paid figures, a Pro data table with a status facet, and each invoice in a sheet with a real PDF."
plan: Pro
docs: https://ui.edbn.me/docs/templates/invoices-page
---

# Invoices page

Loam Wholesale's invoices to stockists: outstanding, overdue and paid figures, a Pro data table with a status facet, and each invoice in a sheet with a real PDF.

The same admin frame as the overview, switched to the Loam Wholesale shop with Invoices in the sidebar. One strip shows what's outstanding, what's overdue (and how late the oldest is) and what was paid in the last 30 days, all following the invoices below. The Pro data table lists 28 trade invoices with number, stockist, issue and due dates, status and amount with VAT; it searches by number or stockist, filters by status with a facet that counts each, sorts and pages. The Issued column steps aside when the table is narrow. A number, or a click on its row, opens the invoice-detail block adapted in a sheet: the lines, VAT and total, the timeline from issued to paid or overdue, Send reminder and Mark as paid (which update the row and the figures), and Download PDF, which renders the invoice as a real PDF in the browser with the Pro PDFs, loaded only when pressed.

A Pro page template built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/invoices-page
```

## Dependencies
- npm: lucide-react@^1.33.0, @tanstack/react-table@^9.2.4
- edbn: edbn-base, avatar, badge, breadcrumb, button, card, dropdown-menu, input-group, kbd, separator, sheet, sidebar, spinner, table, text-link, timeline, tooltip, data-table, pdf-browser

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More lists & records templates

All 5, with install commands: https://ui.edbn.me/docs/templates/lists-and-records (Markdown: https://ui.edbn.me/docs/templates/lists-and-records.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt