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:
parent
42916f2948
commit
27efc8628c
1 changed files with 13 additions and 1 deletions
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue