QuotationStats

import { QuotationStats } from "@cynco-labs/ui";

import { QuotationStats } from "@cynco-labs/ui";

export default function QuotationStatsDemo() {
	return (
		<QuotationStats
			stats={{
				totalQuotedAmount: 248650,
				currency: "MYR",
				sentCount: 14,
				acceptedCount: 9,
				conversionRate: 37.5,
			}}
		/>
	);
}

Use

Top of the Quotations page.

Props

stats ({totalQuotedAmount, currency, sentCount, acceptedCount, conversionRate}); className and native div props.

Notes

Each accent (warning, success, violet) shrinks to a small coloured square before the label, so the figures stay in foreground. Responsive: StatGrid/StatTile, auto-fit 4-up to 2-up.