Accounting · Expenses & parties
CustomerStatementMetrics
Statement of account KPIs: total transactions, invoiced amount with % collected, amount received, balance due, plus credits applied / debits added and the multiple-currencies notice.
import { CustomerStatementMetrics } from "@cynco-labs/ui";Example
import { CustomerStatementMetrics } from "@cynco-labs/ui";
export default function CustomerStatementMetricsDemo() {
return (
<CustomerStatementMetrics
metrics={{
totalTransactions: 14,
invoicedAmount: 64246.5,
collectionRate: 62.4,
amountReceived: 40096.1,
creditedAmount: 10746,
debitedAmount: 1250,
balanceDue: 48250.4,
}}
/>
);
}Use
Above the statement of account table.
Props
metrics {totalTransactions, invoicedAmount, collectionRate, amountReceived, creditedAmount, debitedAmount, balanceDue}, currency, availableCurrencies, isSingleCurrency; className and native div props.
Notes
Responsive by container: StatGrid tiles: four-up from 48rem, wrapping to one per row on phones.