From 320a0ce1ec706c7202becd387bf3bb24da70d2ba Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Thu, 23 Jul 2026 17:34:12 +0000
Subject: [PATCH] =?UTF-8?q?Add=20Net=20Sales=20=C2=A3=20cards=20with=20PY?=
 =?UTF-8?q?=20comparison=20to=20Weekly=20and=20Monthly=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both views already showed % Net Sales with a PY % sub-line, but lacked a
raw-£ Net Sales card with PY value + delta% — the style already used for
past weeks/months. Adds it consistently across current-period, forecast,
and past-period sections in both views.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Monthly.tsx | 15 +++++++++++++++
 frontend/src/pages/Weekly.tsx  | 18 +++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Monthly.tsx b/frontend/src/pages/Monthly.tsx
index 97c7e24..37c6cd0 100644
--- a/frontend/src/pages/Monthly.tsx
+++ b/frontend/src/pages/Monthly.tsx
@@ -273,6 +273,11 @@ export default function Monthly() {
                 <div className="sub">PY MTD {((pyWages / pySalesMTD) * 100).toFixed(1)}%</div>
               )}
             </div>
+            <div className="summary-card">
+              <div className="label">Net Sales MTD</div>
+              <div className="value">{fmtMoney(netSalesMTD)}</div>
+              {pySalesMTD > 0 && <div className="sub">PY {fmtMoney(pySalesMTD)}{pyPct(netSalesMTD, pySalesMTD)}</div>}
+            </div>
           </div>
 
           <div className="section-row-label">Full month forecast</div>
@@ -304,6 +309,11 @@ export default function Monthly() {
                 <div className="sub">PY {((pyWagesFull / pySalesFull) * 100).toFixed(1)}%</div>
               )}
             </div>
+            <div className="summary-card">
+              <div className="label">Net Sales (OTB)</div>
+              <div className="value">{fmtMoney(netSalesFull)}</div>
+              {pySalesFull > 0 && <div className="sub">PY {fmtMoney(pySalesFull)}{pyPct(netSalesFull, pySalesFull)}</div>}
+            </div>
           </div>
         </>
       ) : (
@@ -335,6 +345,11 @@ export default function Monthly() {
               <div className="sub">PY {((pyWagesFull / pySalesFull) * 100).toFixed(1)}%</div>
             )}
           </div>
+          <div className="summary-card">
+            <div className="label">Net Sales</div>
+            <div className="value">{fmtMoney(netSalesFull)}</div>
+            {pySalesFull > 0 && <div className="sub">PY {fmtMoney(pySalesFull)}{pyPct(netSalesFull, pySalesFull)}</div>}
+          </div>
         </div>
       )}
 
diff --git a/frontend/src/pages/Weekly.tsx b/frontend/src/pages/Weekly.tsx
index f0b9291..437fb74 100644
--- a/frontend/src/pages/Weekly.tsx
+++ b/frontend/src/pages/Weekly.tsx
@@ -64,6 +64,7 @@ export default function Weekly() {
   const [netSalesMTD,  setNetSalesMTD]  = useState(0)
   const [netSalesFull, setNetSalesFull] = useState(0)
   const [pySalesMTD,   setPySalesMTD]   = useState(0)
+  const [pySalesFull,  setPySalesFull]  = useState(0)
   const [pyWages,      setPyWages]      = useState<number | null>(null)
   const [pyDepts,      setPyDepts]      = useState<{id: string; name: string; cost: number}[]>([])
   const [monthlyBudg,  setMonthlyBudg]  = useState<number | null>(null)
@@ -95,6 +96,7 @@ export default function Weekly() {
       setNetSalesMTD(salesRes.days.filter(d => d.date <= cutoffDate).reduce((s, d) => s + d.net_sales, 0))
       setNetSalesFull(salesRes.days.reduce((s, d) => s + d.net_sales, 0))
       setPySalesMTD(salesRes.days.filter(d => d.date <= cutoffDate).reduce((s, d) => s + d.py_sales, 0))
+      setPySalesFull(salesRes.days.reduce((s, d) => s + d.py_sales, 0))
 
       // PY dept breakdown
       const pyDeptList = pyActRes.departments.map(dep => ({
@@ -244,6 +246,11 @@ export default function Weekly() {
                 <div className="sub">PY WTD {((totalPyWages / pySalesMTD) * 100).toFixed(1)}%</div>
               )}
             </div>
+            <div className="summary-card">
+              <div className="label">Net Sales WTD</div>
+              <div className="value">{fmtMoney(netSalesMTD)}</div>
+              {pySalesMTD > 0 && <div className="sub">PY {fmtMoney(pySalesMTD)}{pyPct(netSalesMTD, pySalesMTD)}</div>}
+            </div>
           </div>
 
           <div className="section-row-label">Full week forecast</div>
@@ -268,6 +275,11 @@ export default function Weekly() {
               <div className="label">% Net Sales (OTB)</div>
               <div className="value">{pctSalesFull != null ? `${pctSalesFull.toFixed(1)}%` : '—'}</div>
             </div>
+            <div className="summary-card">
+              <div className="label">Net Sales (OTB)</div>
+              <div className="value">{fmtMoney(netSalesFull)}</div>
+              {pySalesFull > 0 && <div className="sub">PY {fmtMoney(pySalesFull)}{pyPct(netSalesFull, pySalesFull)}</div>}
+            </div>
           </div>
         </>
       ) : (
@@ -291,13 +303,13 @@ export default function Weekly() {
           <div className="summary-card">
             <div className="label">Net Sales</div>
             <div className="value">{fmtMoney(netSalesFull)}</div>
-            {pySalesMTD > 0 && <div className="sub">PY {fmtMoney(pySalesMTD)}{pyPct(netSalesFull, pySalesMTD)}</div>}
+            {pySalesFull > 0 && <div className="sub">PY {fmtMoney(pySalesFull)}{pyPct(netSalesFull, pySalesFull)}</div>}
           </div>
           <div className="summary-card">
             <div className="label">% of Net Sales</div>
             <div className="value">{pctSalesFull != null ? `${pctSalesFull.toFixed(1)}%` : '—'}</div>
-            {pyWages != null && pySalesMTD > 0 && (
-              <div className="sub">PY {((totalPyWages / pySalesMTD) * 100).toFixed(1)}%</div>
+            {pyWages != null && pySalesFull > 0 && (
+              <div className="sub">PY {((totalPyWages / pySalesFull) * 100).toFixed(1)}%</div>
             )}
           </div>
         </div>