Design an invoice ledger and a month-close dashboard

What you are building

Two screens that most finance and insurance products need: a ledger of invoices and a month-close dashboard above it. In Tessera they use the Table, StatCard, Chart, Badge, EmptyState, Pagination and DropdownMenu components. Each exists in Figma and in React with the same property names.

How to display currency and Swiss francs

Do not build money strings by hand. Pass the amount through Intl.NumberFormat for the reader’s locale, and always show the currency. Money without a currency is a guess.

new Intl.NumberFormat("de-CH", { style: "currency", currency: "CHF" }).format(1234.5)
// CHF 1’234.50  (fr-CH: 1 234.50 CHF, en-US with USD: $1,234.50)

• Use tabular digits (font-variant-numeric: tabular-nums), so figures line up in a column and a changing number does not jitter.
• Keep the decimals. 18’630.50 and 18’630 are different promises.
• Write a negative amount with a minus sign (CHF -2’480.00) and say the direction in words next to it, for example “Down 12 % on last month”. Never rely on red or green alone.
• Carry the sign on a change in percent (+4.2 %, -1.8 %).
• In a narrow card, write CHF 18.6k instead of squeezing a long amount.

How to design a data table for invoices

Use a table when users compare records across columns or act on one row: invoices, payments, clients, policies. Use a single card when there is one figure with a trend.

• Mark money and date columns numeric. They end-align and use tabular numbers.
• Show payment status in its own column with a Badge. The status says why a row needs attention.
• Sort in your own code (onSortChange); the table shows the state. A sortable header is a button and announces aria-sort as ascending, descending or none.
• Flag an overdue row with getRowTone. The default style is a small amber dot. Every style also speaks a label such as “Overdue: Bergbahn Arosa”, because a colour cannot be heard. Use the flag only for a state the user must notice.
• Name each row checkbox with something a person recognises, like the client and invoice number. The header checkbox shows the mixed state when only some rows are selected.
• Put row actions in the last column as one icon button that opens a menu, named per row (“More actions for INV-2026-0418”), with the destructive action last.
• Keep the first column fixed and let the rest scroll inside the table, never the page. At most six columns on a laptop.
• Do not stack columns into cards on mobile. Horizontal scroll keeps columns comparable.

What an empty ledger should say

Every ledger needs an empty state. Pass an EmptyState in the small size. Say what is empty and why, and offer one action, such as creating the first invoice or clearing the filter. A bare sentence is not enough.

How to design stat cards for a dashboard

• Show three or four StatCards in a row, each with a short label.
• Use one number plus a light suffix (%, ×, k). It reads as one glance.
• Use the sublabel for a short qualifier (“Since launch”), not for a second figure.
• The number counts up once, the first time 30 % of the card is visible. It never replays, and with reduced motion it appears at once.
• The whole figure is one aria-label, so a screen reader announces “CHF 18’630.50” and not each digit.
• Do not mix units (CHF, k, a plain count) in one row without saying so.

A trend or a comparison over time is a Chart, not a StatCard.

For the frame around these screens, with navigation, filters and settings pages, read how to design an admin dashboard.

Accessible chart colours

The Chart component draws bar, line, donut, gauge or sparkline from one set of series, with up to four series. The palette is checked for contrast in light and dark and for colour-blind readers. Our first palette measured 2.5:1 on white and had two pairs that were nearly identical for colour-blind readers, so we replaced it. Tooltips open on hover and on arrow keys.

Keyboard and screen reader checklist

• Name every table (caption or aria-label) and give every header cell scope="col".
• Tab moves through sort buttons, checkboxes, links and buttons in cells. Enter or Space sorts, selects or opens.
• Give icon-only action columns a visually hidden header, so the column still has a name.
• Rows are tab stops only when a row click is set.

Choosing between building these screens on your own system and starting from a ready one? Read build or buy a design system.

In the docs

• Table
• StatCard
• Chart
• Badge