Back to Docs
Recipe
Billing History Page
A clean, filterable table showing every invoice, receipt, and payment — built with Tailwind and server-rendered data.
AllInvoicesReceipts
Jan 2025 – Jun 2025
Export CSV
| Date | Description | Amount | Status | Receipt |
|---|---|---|---|---|
| Jun 12, 2025 | Nimbus Pro — Monthly | $29.00 | Paid | Download |
| May 12, 2025 | Nimbus Pro — Monthly | $29.00 | Paid | Download |
| Apr 12, 2025 | Nimbus Pro — Annual | $249.00 | Pending | — |
Showing 3 of 24 entries
Prev123Next
Implementation Notes
- Fetch invoice data server-side with
fetch()inside a React Server Component. - Use
searchParamsfor filter state — no client-side router needed. - Status badges map to Tailwind color pairs: paid → emerald, pending → amber, failed → red.
- Export CSV endpoint streams the filtered result set with
Content-Disposition: attachment.