About this set
A billing dashboard and a sidebar card for keeping track of invoices. Billing dashboard with status filters and search opens with four summary tiles for outstanding, overdue, recently paid and draft totals, then a toolbar of status filters (All, Due, Overdue, Paid, Draft) and a search box, and a table of nine invoices with number, client, issued and due dates, amount, a status pill and a View or Edit link. The table footer shows how many invoices are visible and what they add up to. Recent invoices card for a sidebar lists the latest five with client, number, due date, amount and status. Every status pill pairs a word with its own icon (a tick, a clock, a warning triangle, a pencil) as well as a colour, so the status never depends on colour alone. A few lines of vanilla JavaScript filter the rows by status and text, update the count and total, and announce the result; without JavaScript the toolbar stays hidden and the full table shows. On narrow screens the table scrolls sideways inside a labelled region.
What’s included
- Summary tiles for outstanding, overdue, paid and draft totals
- Status filter buttons with aria-pressed and a search box
- Live count and total of the visible invoices in the table footer
- Status pills with text and icon: Paid, Due, Overdue, Draft
- Recent invoices card for sidebars, no JavaScript
Accessibility
Filters are a labelled group of toggle buttons that expose aria-pressed, the search field has a label, and results are announced in a polite status region. The table has a caption, scoped headers, and View links that include the invoice number for screen readers; on small screens it sits in a focusable, labelled scroll region. Status never relies on colour alone, every control shows a focus outline, and transitions stop under prefers-reduced-motion.
Customise it
Change --bl-accent, --bl-ink, --bl-muted and the .bl-pill--* colours on .bl. The script uses data-invoices, data-status, data-amount (in cents), data-filter, data-search, data-count and data-sum. Bootstrap restyles .btn-group, .badge and .table-hover through the same variables; in Tailwind edit the bl-* colours in @theme.
