hotel-manage-stack/wages
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Net Sales £ cards with PY comparison to Weekly and Monthly views

Browse source 
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>
This commit is contained in:
jtricerolph 2026-07-23 17:34:12 +00:00
parent 9e7f4030d2
commit 320a0ce1ec
2 changed files with 30 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/pages/Monthly.tsx
View file

@ -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>
)}

18
frontend/src/pages/Weekly.tsx
View file

@ -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>