David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(dashboard2): move Selling/Cost/Markup up to Row 1 alongside quote KPIs

Browse source 
All 6 headline numbers now sit on a single row at the top (grid-cols-1 / sm:grid-cols-3 / lg:grid-cols-6). Gauge is shrunk to size=140 so it fits a 6-col grid; sublabel trimmed to single-line currency pair so it doesn't wrap inside the narrow card.
This commit is contained in:
Dave 2026-09-01 01:52:22 +02:00
parent 9abc7d4d03
commit f7938375f6
1 changed files with 32 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/app/(app)/dashboard2/page.tsx
View file

@ -114,8 +114,8 @@ export default function RepDashboardPage() {
</p>
</div>
{/* Row 1: quotes-loaded KPIs */}
<div className="grid gap-3 grid-cols-1 sm:grid-cols-3">
{/* Row 1: quotes-loaded KPIs + this month's money (6 cards) */}
<div className="grid gap-3 grid-cols-1 sm:grid-cols-3 lg:grid-cols-6">
<RepKpiCard
label="Quotes today"
value={quotesLoaded.today}
@ -137,6 +137,36 @@ export default function RepDashboardPage() {
icon={TrendingUp}
accentColor={CHART.orange}
/>
<RepCurrencyKpiCard
label="Selling"
value={monthRevenue.selling}
icon={DollarSign}
accentColor={CHART.green}
/>
<RepCurrencyKpiCard
label="Cost"
value={monthRevenue.cost}
icon={DollarSign}
accentColor={CHART.muted}
/>
<DashboardCard title="Markup %" subtitle="This month" icon={Gauge} accentColor={CHART.purple}>
{monthRevenue.markupPct === null ? (
<div className="py-8 text-center text-muted-foreground">
<CheckCircle className="h-7 w-7 mx-auto mb-1.5" style={{ color: CHART.green }} />
<p className="text-sm">No orders yet this month</p>
</div>
) : (
<RadialGauge
value={monthRevenue.cost}
total={monthRevenue.selling}
color={CHART.purple}
label="Markup"
sublabel={`${formatZar(monthRevenue.selling)} · ${formatZar(monthRevenue.cost)}`}
centerLabelOverride={`${monthRevenue.markupPct.toFixed(1)}%`}
size={140}
/>
)}
</DashboardCard>
</div>
{/* Row 2: trend + outstanding lists */}
@ -175,40 +205,6 @@ export default function RepDashboardPage() {
/>
</DashboardCard>
</div>
{/* Row 3: this month's money */}
<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<RepCurrencyKpiCard
label="Selling"
value={monthRevenue.selling}
icon={DollarSign}
accentColor={CHART.green}
/>
<RepCurrencyKpiCard
label="Cost"
value={monthRevenue.cost}
icon={DollarSign}
accentColor={CHART.muted}
/>
<DashboardCard title="Markup %" subtitle="This month" icon={Gauge} accentColor={CHART.purple}>
{monthRevenue.markupPct === null ? (
<div className="py-8 text-center text-muted-foreground">
<CheckCircle className="h-7 w-7 mx-auto mb-1.5" style={{ color: CHART.green }} />
<p className="text-sm">No orders yet this month</p>
</div>
) : (
<RadialGauge
value={monthRevenue.cost}
total={monthRevenue.selling}
color={CHART.purple}
label="Markup"
sublabel={`${formatZar(monthRevenue.selling)} selling · ${formatZar(monthRevenue.cost)} cost`}
centerLabelOverride={`${monthRevenue.markupPct.toFixed(1)}%`}
size={180}
/>
)}
</DashboardCard>
</div>
</div>
);
}