From f7938375f6c22bb1e19fa6dfd5ed7ae8617e7e06 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Tue, 1 Sep 2026 01:52:22 +0200
Subject: [PATCH] feat(dashboard2): move Selling/Cost/Markup up to Row 1
 alongside quote KPIs

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.
---
 src/app/(app)/dashboard2/page.tsx | 68 +++++++++++++++----------------
 1 file changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/app/(app)/dashboard2/page.tsx b/src/app/(app)/dashboard2/page.tsx
index 141deb7..06f0933 100644
--- a/src/app/(app)/dashboard2/page.tsx
+++ b/src/app/(app)/dashboard2/page.tsx
@@ -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>
   );
 }