feat(dashboard2): show last month's selling value alongside the delta

Selling card now reads "+12% vs previous · R 200,000" instead of just
"+12% vs previous". Optional previousValue prop on RepKpiCard; the other
3 cards don't pass it, so their format is unchanged.
This commit is contained in:
Dave 2026-09-01 02:04:25 +02:00
parent 42916f2948
commit 27efc8628c

View file

@ -185,6 +185,7 @@ export default function RepDashboardPage() {
label="Selling this month"
value={monthRevenue.sellingThisMonth}
delta={deltaPct(monthRevenue.sellingThisMonth, monthRevenue.sellingLastMonth)}
previousValue={monthRevenue.sellingLastMonth}
icon={DollarSign}
accentColor={CHART.green}
format="currency"
@ -238,6 +239,7 @@ function RepKpiCard({
icon: Icon,
accentColor,
format = "number",
previousValue,
}: {
label: string;
value: number;
@ -245,10 +247,20 @@ function RepKpiCard({
icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
accentColor: string;
format?: "number" | "currency";
/** Optional previous-period value shown alongside the delta arrow
* (e.g. "vs R 99,999 last month"). When omitted, the subline just
* shows the percentage. */
previousValue?: number;
}) {
const positive = delta >= 0;
const display =
format === "currency" ? formatZar(value) : value.toLocaleString();
const previousDisplay =
previousValue !== undefined
? format === "currency"
? formatZar(previousValue)
: previousValue.toLocaleString()
: null;
return (
<DashboardCard accentColor={accentColor} padding="p-4">
<div className="flex items-center justify-between gap-2 mb-2">
@ -265,7 +277,7 @@ function RepKpiCard({
</div>
<div className="mt-0.5 text-[11px] font-semibold" style={{ color: positive ? CHART.green : CHART.red }}>
{positive ? "+" : ""}
{delta}% vs previous
{delta}% vs previous{previousDisplay !== null ? ` · ${previousDisplay}` : ""}
</div>
</DashboardCard>
);