InvoiceMetricTiles
The all-time invoice metric strip: Sales, Paid, Pending and Overdue, where Overdue turns red and shows an 'n invoices' badge.
import { InvoiceMetricTiles } from "@cynco-labs/ui";Example
Use
Top of the Invoicing page; clicking the Overdue tile filters the list to overdue invoices.
Props
stats ({totalValue, paidValue, pendingValue, overdueValue, overdueCount}, or null when the stats failed to load, which shows a dash and Unavailable), currency, onShowOverdue; className and native div props.
Notes
Responsive: StatGrid/StatTile tiles that auto-fit: 4-up on a page, 2-up on a phone, and the value never truncates.