Add vs Prev column to monthly table; weekly two-row cards + vs PY + vs Prev Wk

Monthly: fetches previous month actuals; adds % delta vs prior month full
alongside existing vs PY column in the dept breakdown table.

Weekly: expanded 14-day actuals fetch (prev+current week) so prior-week
per-dept data is available for both forecast and comparison. Two-row summary
cards for current week (WTD actuals + full-week forecast). Past weeks keep
single-row layout. Dept table gains vs PY and vs Prev Wk delta columns;
budget columns use WTD pro-rata for current week, 7-day proportion for past.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-23 12:59:14 +00:00
parent 27f9190dc5
commit 3a068ece23
2 changed files with 275 additions and 175 deletions

View file

@ -42,8 +42,9 @@ export default function Monthly() {
const [pyWages, setPyWages] = useState<number | null>(null)
const [pyWagesFull, setPyWagesFull] = useState<number | null>(null)
const [pyDepts, setPyDepts] = useState<{id: string; name: string; cost: number; costFull: number}[]>([])
const [pyTableOpen, setPyTableOpen] = useState(false)
const [budget, setBudget] = useState<number | null>(null)
const [pyTableOpen, setPyTableOpen] = useState(false)
const [prevMonthDepts, setPrevMonthDepts] = useState<{id: string; cost: number}[]>([])
const [budget, setBudget] = useState<number | null>(null)
const [deptPcts, setDeptPcts] = useState<Record<string, number>>({})
const [showOncosts, setShowOncosts] = useState(true)
const [loading, setLoading] = useState(true)
@ -63,15 +64,23 @@ export default function Monthly() {
const pyFromStr = `${year - 1}-${String(month).padStart(2, '0')}-01`
const pyToStr = `${year - 1}-${String(month).padStart(2, '0')}-${String(pyDim).padStart(2, '0')}`
// Previous month: always fetch full month for comparison
const pmYear = month === 1 ? year - 1 : year
const pmMonth = month === 1 ? 12 : month - 1
const pmDim = daysInMonth(pmYear, pmMonth)
const pmFromStr = `${pmYear}-${String(pmMonth).padStart(2, '0')}-01`
const pmToStr = `${pmYear}-${String(pmMonth).padStart(2, '0')}-${String(pmDim).padStart(2, '0')}`
const load = useCallback(async () => {
setLoading(true); setError(null)
try {
// Net sales: full month — OTB/forecast for future dates, actuals for past dates
const [actRes, salesRes, budRes, pyActRes] = await Promise.all([
const [actRes, salesRes, budRes, pyActRes, pmActRes] = await Promise.all([
getActuals(fromStr, toStr),
getNetSales(fromStr, toStr),
getBudgets(),
getActuals(pyFromStr, pyToStr),
getActuals(pmFromStr, pmToStr),
])
setDepts(actRes.departments)
setShowOncosts(actRes.show_oncosts)
@ -104,12 +113,19 @@ export default function Monthly() {
const bRow = budRes.budgets.find((b: WageBudget) => b.month === fromStr)
setBudget(bRow ? bRow.budget_amount : null)
// Previous month per-dept totals (full month) for vs Prev column
const pmDeptList = pmActRes.departments.map(dep => ({
id: dep.department_id,
cost: Object.values(dep.days).reduce((s, v) => s + v.cost, 0),
}))
setPrevMonthDepts(pmDeptList)
} catch (e: unknown) {
setError(e instanceof Error ? e.message : 'Failed to load')
} finally {
setLoading(false)
}
}, [fromStr, toStr, pyFromStr, pyToStr, isCurrentMonth, yesterdayStr, year, month, pyDim])
}, [fromStr, toStr, pyFromStr, pyToStr, pmFromStr, pmToStr, isCurrentMonth, yesterdayStr, year, month, pyDim])
useEffect(() => { load() }, [load])
@ -157,6 +173,7 @@ export default function Monthly() {
const totalForecast = deptSummary.reduce((s, d) => s + d.forecast_eom, 0)
const pyTotalWages = pyDepts.reduce((s, d) => s + d.cost, 0)
const pyTotalWagesFull = pyDepts.reduce((s, d) => s + d.costFull, 0)
const prevMonthTotal = prevMonthDepts.reduce((s, d) => s + d.cost, 0)
// MTD row: pro-rata budget to yesterday
const yDay = isCurrentMonth ? parseInt(yesterdayStr.slice(8)) : dim
@ -351,6 +368,7 @@ export default function Monthly() {
{isCurrentMonth && <th className="right">Forecast EOM</th>}
<th className="right">% of Total</th>
<th className="right">vs PY</th>
<th className="right">vs Prev</th>
<th className="right">Budget</th>
<th className="right">% Budget</th>
<th className="right">Variance</th>
@ -370,6 +388,10 @@ export default function Monthly() {
const pyDept = pyDepts.find(p => p.id === dep.department_id)
const pyCost = pyDept ? (isCurrentMonth ? pyDept.cost : pyDept.costFull) : null
const pyDelta = pyCost != null && pyCost > 0 ? ((dep.actual_mtd - pyCost) / pyCost) * 100 : null
// Prev month: compare actual_mtd vs prev month full total per dept
const pmDept = prevMonthDepts.find(p => p.id === dep.department_id)
const pmCost = pmDept && pmDept.cost > 0 ? pmDept.cost : null
const pmDelta = pmCost != null ? ((dep.actual_mtd - pmCost) / pmCost) * 100 : null
return (
<tr key={dep.department_id} style={{ cursor: 'pointer' }}
onClick={() => setModal({ deptId: dep.department_id, deptName: dep.department_name })}>
@ -387,6 +409,11 @@ export default function Monthly() {
? <span className={pyDelta > 0 ? 'variance-over' : 'variance-under'}>{pyDelta > 0 ? '+' : ''}{pyDelta.toFixed(1)}%</span>
: '—'}
</td>
<td className="right">
{pmDelta != null
? <span className={pmDelta > 0 ? 'variance-over' : 'variance-under'}>{pmDelta > 0 ? '+' : ''}{pmDelta.toFixed(1)}%</span>
: '—'}
</td>
<td className="right">{depBudg != null ? fmtMoney(depBudg) : '—'}</td>
<td className="right">
{dp != null ? <span className={`pct-badge ${pctClass(dp)}`}>{fmtDelta(dp)}</span> : '—'}
@ -410,6 +437,13 @@ export default function Monthly() {
return <span className={d > 0 ? 'variance-over' : 'variance-under'}>{d > 0 ? '+' : ''}{d.toFixed(1)}%</span>
})()}
</td>
<td className="right">
{(() => {
if (prevMonthTotal <= 0) return '—'
const d = ((totalActual - prevMonthTotal) / prevMonthTotal) * 100
return <span className={d > 0 ? 'variance-over' : 'variance-under'}>{d > 0 ? '+' : ''}{d.toFixed(1)}%</span>
})()}
</td>
<td className="right">{budget != null ? fmtMoney(budget) : '—'}</td>
<td className="right">
{pctBudgFull != null ? <span className={`pct-badge ${pctClass(pctBudgFull)}`}>{fmtDelta(pctBudgFull)}</span> : '—'}

View file

@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react'
import { ChevronLeft, ChevronRight, ChevronDown, Download } from 'lucide-react'
import { ChevronLeft, ChevronRight, Download } from 'lucide-react'
import { getActuals, getNetSales, getBudgets, getDeptDetail, downloadExport } from '../api'
import type { DeptActuals, WageBudget, EmployeeDetail } from '../types'
import { DeptDetailModal } from '../components/DeptDetailModal'
@ -7,7 +7,6 @@ import { DeptDetailModal } from '../components/DeptDetailModal'
function localStr(d: Date): string {
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}
function mondayOf(d: Date): string {
const day = d.getDay()
const r = new Date(d)
@ -15,73 +14,74 @@ function mondayOf(d: Date): string {
r.setHours(0, 0, 0, 0)
return localStr(r)
}
function addDaysStr(dateStr: string, n: number): string {
const d = new Date(dateStr + 'T00:00:00')
d.setDate(d.getDate() + n)
return localStr(d)
}
function daysInMonthFor(dateStr: string): number {
const d = new Date(dateStr + 'T00:00:00')
return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate()
}
function fmtDisplay(dateStr: string): string {
return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })
}
function fmtMoney(n: number): string {
return `£${n.toLocaleString('en-GB', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`
}
function pctClass(pct: number | null): string {
if (pct == null) return ''
if (pct <= 100) return 'pct-green'
if (pct <= 110) return 'pct-amber'
return 'pct-red'
return pct <= 100 ? 'pct-green' : pct <= 110 ? 'pct-amber' : 'pct-red'
}
function fmtDelta(pct: number): string {
const d = pct - 100
return `${d >= 0 ? '+' : ''}${d.toFixed(1)}%`
}
function budgetColour(pct: number): string {
return pct <= 100 ? 'var(--app-primary)' : pct <= 110 ? '#b45309' : '#dc2626'
}
export default function Weekly() {
const [fromStr, setFromStr] = useState<string>(() => mondayOf(new Date()))
const toStr = addDaysStr(fromStr, 6)
const todayStr = localStr(new Date())
const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1)
const yesterdayStr = localStr(yesterday)
const toStr = addDaysStr(fromStr, 6)
const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1)
const yesterdayStr = localStr(yesterday)
const isCurrentWeek = fromStr === mondayOf(new Date())
const pyFromStr = addDaysStr(fromStr, -364)
// Cut-off at yesterday: avoids partial clockins/open timesheets skewing today's figures
// Previous week range (for expanded actuals fetch + comparison)
const prevWeekFrom = addDaysStr(fromStr, -7)
const prevWeekTo = addDaysStr(fromStr, -1)
// PY period: same elapsed days as current WTD, or full week for past weeks
const daysElapsed = isCurrentWeek
? Math.round((new Date(yesterdayStr + 'T00:00:00').getTime() - new Date(fromStr + 'T00:00:00').getTime()) / 86_400_000)
: 6
const pyToStr = addDaysStr(fromStr, -364 + daysElapsed)
const pyFromStr = addDaysStr(fromStr, -364)
const pyToStr = addDaysStr(fromStr, -364 + daysElapsed)
const [depts, setDepts] = useState<DeptActuals[]>([])
const [netSales, setNetSales] = useState(0)
const [pySales, setPySales] = useState(0)
const [pyWages, setPyWages] = useState<number | null>(null)
const [pyDepts, setPyDepts] = useState<{id: string; name: string; cost: number}[]>([])
const [pyTableOpen, setPyTableOpen] = useState(false)
const [budget, setBudget] = useState<number | null>(null)
const [monthlyBudg, setMonthlyBudg] = useState<number | null>(null)
const [deptPcts, setDeptPcts] = useState<Record<string, number>>({})
const [showOncosts, setShowOncosts] = useState(true)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [modal, setModal] = useState<{ deptId: string; deptName: string } | null>(null)
const [modalEmps, setModalEmps] = useState<EmployeeDetail[] | null>(null)
const [modalLoad, setModalLoad] = useState(false)
const [depts, setDepts] = useState<DeptActuals[]>([])
const [netSalesMTD, setNetSalesMTD] = useState(0)
const [netSalesFull, setNetSalesFull] = useState(0)
const [pySalesMTD, setPySalesMTD] = 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)
const [deptPcts, setDeptPcts] = useState<Record<string, number>>({})
const [showOncosts, setShowOncosts] = useState(true)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [modal, setModal] = useState<{ deptId: string; deptName: string } | null>(null)
const [modalEmps, setModalEmps] = useState<EmployeeDetail[] | null>(null)
const [modalLoad, setModalLoad] = useState(false)
const load = useCallback(async () => {
setLoading(true); setError(null)
try {
const isCurrentWk = fromStr === mondayOf(new Date())
const [actRes, salesRes, budgetRes, pyActRes] = await Promise.all([
getActuals(fromStr, toStr),
// 14-day fetch: prev week + current week so prev-week data is in dep.days for forecast + comparison
getActuals(prevWeekFrom, toStr),
getNetSales(fromStr, toStr),
getBudgets(),
getActuals(pyFromStr, pyToStr),
@ -89,91 +89,117 @@ export default function Weekly() {
setDepts(actRes.departments)
setShowOncosts(actRes.show_oncosts)
setDeptPcts(actRes.dept_pcts)
// Current week cut-off at yesterday to avoid partial clockins
const isCurrentWk = fromStr === mondayOf(new Date())
setNetSales(
isCurrentWk
? salesRes.days.filter(d => d.date <= yesterdayStr).reduce((s, d) => s + d.net_sales, 0)
: salesRes.days.reduce((s, d) => s + d.net_sales, 0)
)
setPySales(
isCurrentWk
? salesRes.days.filter(d => d.date <= yesterdayStr).reduce((s, d) => s + d.py_sales, 0)
: salesRes.days.reduce((s, d) => s + d.py_sales, 0)
)
// Net sales: WTD to yesterday for current week, full for past weeks
const cutoffDate = isCurrentWk ? yesterdayStr : toStr
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))
// PY dept breakdown
const pyDeptList = pyActRes.departments.map(dep => ({
id: dep.department_id,
name: dep.department_name,
cost: Object.values(dep.days).reduce((s, d) => s + d.cost, 0),
})).filter(d => d.cost > 0).sort((a, b) => b.cost - a.cost)
})).filter(d => d.cost > 0)
setPyDepts(pyDeptList)
const pyTotal = pyDeptList.reduce((s, d) => s + d.cost, 0)
setPyWages(pyTotal > 0 ? pyTotal : null)
// Budget: WTD pro-rata (to yesterday) stored; full-week derived in component body
const d0 = new Date(fromStr + 'T00:00:00')
const monthKey = `${d0.getFullYear()}-${String(d0.getMonth() + 1).padStart(2, '0')}-01`
const bRow = (budgetRes.budgets as WageBudget[]).find(b => b.month === monthKey)
if (bRow) {
const dim = daysInMonthFor(fromStr)
const cutoff = isCurrentWk ? yesterdayStr : toStr
const effectiveTo = cutoff < toStr ? cutoff : toStr
const weekDays = effectiveTo >= fromStr
? Math.round((new Date(effectiveTo + 'T00:00:00').getTime() - new Date(fromStr + 'T00:00:00').getTime()) / 86_400_000) + 1
: 7
const ratio = weekDays / dim
setMonthlyBudg(bRow.budget_amount)
setBudget(bRow.budget_amount * ratio)
} else {
setMonthlyBudg(null)
setBudget(null)
}
setMonthlyBudg(bRow ? bRow.budget_amount : null)
} catch (e: unknown) {
setError(e instanceof Error ? e.message : 'Failed to load')
} finally {
setLoading(false)
}
}, [fromStr, toStr, todayStr, pyFromStr, pyToStr])
}, [fromStr, toStr, prevWeekFrom, pyFromStr, pyToStr, yesterdayStr])
useEffect(() => { load() }, [load])
useEffect(() => {
if (!modal) { setModalEmps(null); return }
setModalLoad(true)
getDeptDetail(modal.deptId, fromStr, isCurrentWeek ? todayStr : toStr)
getDeptDetail(modal.deptId, fromStr, isCurrentWeek ? yesterdayStr : toStr)
.then(r => setModalEmps(r.employees))
.catch(() => setModalEmps([]))
.finally(() => setModalLoad(false))
}, [modal, fromStr, toStr, todayStr, isCurrentWeek])
}, [modal, fromStr, toStr, yesterdayStr, isCurrentWeek])
const prev = () => setFromStr(s => addDaysStr(s, -7))
const next = () => setFromStr(s => addDaysStr(s, 7))
const deptWeekBudget = (deptId: string) =>
budget != null && monthlyBudg != null && (deptPcts[deptId] ?? 0) > 0
? budget * (deptPcts[deptId] / 100)
: null
// Budget derived from monthlyBudg
const dim = daysInMonthFor(fromStr)
const weekDaysWTD = daysElapsed + 1 // Mon to yesterday inclusive (or 7 for past weeks)
const budgetWTD = monthlyBudg != null ? monthlyBudg * weekDaysWTD / dim : null
const budgetFull = monthlyBudg != null ? monthlyBudg * 7 / dim : null
const deptTotals = depts.map(dep => ({
department_id: dep.department_id,
department_name: dep.department_name,
cost: Object.entries(dep.days)
.filter(([d]) => !isCurrentWeek || d <= yesterdayStr)
.reduce((s, [, v]) => s + v.cost, 0),
})).sort((a, b) => b.cost - a.cost)
// Per-dept rows computed from 14-day actuals
const wtdCutoff = isCurrentWeek ? yesterdayStr : toStr
// Prev week comparison cutoff: same elapsed days as WTD (Mon-N of prev week)
const prevCutoff = isCurrentWeek ? addDaysStr(yesterdayStr, -7) : prevWeekTo
const totalWages = deptTotals.reduce((s, d) => s + d.cost, 0)
const pyTotalWages = pyDepts.reduce((s, d) => s + d.cost, 0)
const pctBudget = budget != null && budget > 0 ? (totalWages / budget) * 100 : null
const pctSales = netSales > 0 ? (totalWages / netSales) * 100 : null
type DeptRow = {
department_id: string
department_name: string
wtdCost: number // actual WTD (or full week for past weeks)
forecastFull: number // full week forecast via prior-week same-day actuals
prevCost: number // prev week same elapsed days (or full prev week for past weeks)
}
const deptRows: DeptRow[] = depts.map(dep => {
const wtdCost = Object.entries(dep.days)
.filter(([d]) => d >= fromStr && d <= wtdCutoff)
.reduce((s, [, v]) => s + v.cost, 0)
// Forecast: WTD + prior-week same-day actual for each remaining day
let forecastFull = wtdCost
if (isCurrentWeek) {
for (let i = 0; i <= 6; i++) {
const dateStr = addDaysStr(fromStr, i)
if (dateStr <= yesterdayStr) continue
const priorStr = addDaysStr(dateStr, -7) // same day last week — in dep.days (14-day fetch)
forecastFull += dep.days[priorStr]?.cost ?? 0
}
}
const prevCost = Object.entries(dep.days)
.filter(([d]) => d >= prevWeekFrom && d <= prevCutoff)
.reduce((s, [, v]) => s + v.cost, 0)
return { department_id: dep.department_id, department_name: dep.department_name, wtdCost, forecastFull, prevCost }
}).sort((a, b) => b.forecastFull - a.forecastFull)
const totalWTD = deptRows.reduce((s, d) => s + d.wtdCost, 0)
const totalForecast = deptRows.reduce((s, d) => s + d.forecastFull, 0)
const totalPrev = deptRows.reduce((s, d) => s + d.prevCost, 0)
const totalPyWages = pyWages ?? 0
const pctBudgWTD = budgetWTD != null && budgetWTD > 0 ? (totalWTD / budgetWTD) * 100 : null
const pctBudgFull = budgetFull != null && budgetFull > 0 ? (totalForecast / budgetFull) * 100 : null
const pctSalesMTD = netSalesMTD > 0 ? (totalWTD / netSalesMTD) * 100 : null
const pctSalesFull = netSalesFull > 0 ? (totalForecast / netSalesFull) * 100 : null
function pyPct(current: number, py: number): string {
if (py <= 0 || current <= 0) return ''
const p = ((current - py) / py) * 100
return ` (${p >= 0 ? '+' : ''}${p.toFixed(1)}%)`
}
function deltaPct(current: number, prior: number): number | null {
if (prior <= 0) return null
return ((current - prior) / prior) * 100
}
const deptBudg = (deptId: string, b: number | null): number | null =>
b != null && (deptPcts[deptId] ?? 0) > 0 ? b * (deptPcts[deptId] / 100) : null
const weekLabel = `${fmtDisplay(fromStr)} ${fmtDisplay(toStr)} ${new Date(toStr + 'T00:00:00').getFullYear()}`
const activeBudget = isCurrentWeek ? budgetWTD : budgetFull
const activePctBudg = isCurrentWeek ? pctBudgWTD : pctBudgFull
const activePctSales = isCurrentWeek ? pctSalesMTD : pctSalesFull
return (
<div>
@ -190,91 +216,175 @@ export default function Weekly() {
<button className="btn btn-secondary" onClick={next} disabled={isCurrentWeek}><ChevronRight size={16} strokeWidth={1.75} /></button>
</div>
<div className="summary-grid">
<div className="summary-card">
<div className="label">Total Wages</div>
<div className="value">{fmtMoney(totalWages)}</div>
{pyWages != null
? <div className="sub">{isCurrentWeek ? 'PY WTD' : 'PY'} {fmtMoney(pyWages)}{pyPct(totalWages, pyWages)}</div>
: <div className="sub">{showOncosts ? 'incl. on-costs' : 'base cost'}</div>}
</div>
<div className="summary-card">
<div className="label">Pro-rata Budget</div>
<div className="value">{budget != null ? fmtMoney(budget) : '—'}</div>
<div className="sub">proportion of monthly</div>
</div>
<div className="summary-card">
<div className="label">% vs Budget</div>
<div className="value" style={pctBudget != null ? { color: pctBudget <= 100 ? 'var(--app-primary)' : pctBudget <= 110 ? '#b45309' : '#dc2626' } : {}}>
{pctBudget != null ? fmtDelta(pctBudget) : '—'}
{/* ── Summary cards ──────────────────────────────────────────── */}
{isCurrentWeek ? (
<>
<div className="section-row-label">Week to {fmtDisplay(yesterdayStr)}</div>
<div className="summary-grid" style={{ marginBottom: 8 }}>
<div className="summary-card">
<div className="label">Actual WTD</div>
<div className="value">{fmtMoney(totalWTD)}</div>
{pyWages != null && <div className="sub">PY WTD {fmtMoney(totalPyWages)}{pyPct(totalWTD, totalPyWages)}</div>}
</div>
<div className="summary-card">
<div className="label">Budget WTD</div>
<div className="value">{budgetWTD != null ? fmtMoney(budgetWTD) : '—'}</div>
<div className="sub">proportion of monthly</div>
</div>
<div className="summary-card">
<div className="label">% Budget WTD</div>
<div className="value" style={pctBudgWTD != null ? { color: budgetColour(pctBudgWTD) } : {}}>
{pctBudgWTD != null ? fmtDelta(pctBudgWTD) : '—'}
</div>
</div>
<div className="summary-card">
<div className="label">% Net Sales WTD</div>
<div className="value">{pctSalesMTD != null ? `${pctSalesMTD.toFixed(1)}%` : '—'}</div>
{pySalesMTD > 0 && pyWages != null && (
<div className="sub">PY WTD {((totalPyWages / pySalesMTD) * 100).toFixed(1)}%</div>
)}
</div>
</div>
<div className="section-row-label">Full week forecast</div>
<div className="summary-grid" style={{ marginBottom: 20 }}>
<div className="summary-card">
<div className="label">Forecast Full Week</div>
<div className="value">{fmtMoney(totalForecast)}</div>
{totalPrev > 0 && <div className="sub">Prev wk {fmtMoney(totalPrev)}{pyPct(totalForecast, totalPrev)}</div>}
</div>
<div className="summary-card">
<div className="label">Budget Full Week</div>
<div className="value">{budgetFull != null ? fmtMoney(budgetFull) : '—'}</div>
<div className="sub">7-day proportion</div>
</div>
<div className="summary-card">
<div className="label">% Budget (Forecast)</div>
<div className="value" style={pctBudgFull != null ? { color: budgetColour(pctBudgFull) } : {}}>
{pctBudgFull != null ? fmtDelta(pctBudgFull) : '—'}
</div>
</div>
<div className="summary-card">
<div className="label">% Net Sales (OTB)</div>
<div className="value">{pctSalesFull != null ? `${pctSalesFull.toFixed(1)}%` : '—'}</div>
</div>
</div>
</>
) : (
<div className="summary-grid" style={{ marginBottom: 20 }}>
<div className="summary-card">
<div className="label">Total Wages</div>
<div className="value">{fmtMoney(totalWTD)}</div>
{pyWages != null && <div className="sub">PY {fmtMoney(totalPyWages)}{pyPct(totalWTD, totalPyWages)}</div>}
</div>
<div className="summary-card">
<div className="label">Budget</div>
<div className="value">{budgetFull != null ? fmtMoney(budgetFull) : '—'}</div>
<div className="sub">7-day proportion</div>
</div>
<div className="summary-card">
<div className="label">% vs Budget</div>
<div className="value" style={pctBudgFull != null ? { color: budgetColour(pctBudgFull) } : {}}>
{pctBudgFull != null ? fmtDelta(pctBudgFull) : '—'}
</div>
</div>
<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>}
</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>
)}
</div>
</div>
<div className="summary-card">
<div className="label">Net Sales</div>
<div className="value">{fmtMoney(netSales)}</div>
{pySales > 0 && <div className="sub">{isCurrentWeek ? 'PY WTD' : 'PY'} {fmtMoney(pySales)}{pyPct(netSales, pySales)}</div>}
</div>
<div className="summary-card">
<div className="label">% of Net Sales</div>
<div className="value">{pctSales != null ? `${pctSales.toFixed(1)}%` : '—'}</div>
{pyWages != null && pySales > 0 && (
<div className="sub">{isCurrentWeek ? 'PY WTD' : 'PY'} {((pyWages / pySales) * 100).toFixed(1)}%</div>
)}
</div>
</div>
)}
{loading && <div className="state-center">Loading</div>}
{error && <div className="state-center" style={{ color: '#dc2626' }}>{error}</div>}
{!loading && !error && (
<>
<div className="card">
<table className="data-table">
<thead>
<tr>
<th>Department</th>
<th className="right">Wages</th>
<th className="right">{isCurrentWeek ? 'WTD' : 'Wages'}</th>
<th className="right">% of Total</th>
<th className="right">Budget (pro-rata)</th>
<th className="right">vs PY</th>
<th className="right">vs Prev Wk</th>
<th className="right">Budget</th>
<th className="right">% Budget</th>
<th className="right">% Net Sales</th>
</tr>
</thead>
<tbody>
{deptTotals.map(dep => {
const depBudg = deptWeekBudget(dep.department_id)
const depPct = depBudg != null && depBudg > 0 ? (dep.cost / depBudg) * 100 : null
const depOfTotal = totalWages > 0 ? (dep.cost / totalWages) * 100 : null
const depSPct = netSales > 0 ? (dep.cost / netSales) * 100 : null
{deptRows.map(dep => {
const b = deptBudg(dep.department_id, activeBudget)
const depPct = b != null && b > 0 ? (dep.wtdCost / b) * 100 : null
const depOfTotal = totalWTD > 0 ? (dep.wtdCost / totalWTD) * 100 : null
const depSales = isCurrentWeek ? netSalesMTD : netSalesFull
const depSPct = depSales > 0 ? (dep.wtdCost / depSales) * 100 : null
const pyDept = pyDepts.find(p => p.id === dep.department_id)
const pyDelta = pyDept ? deltaPct(dep.wtdCost, pyDept.cost) : null
const prevDelta = deltaPct(dep.wtdCost, dep.prevCost)
return (
<tr key={dep.department_name} style={{ cursor: 'pointer' }}
<tr key={dep.department_id} style={{ cursor: 'pointer' }}
onClick={() => setModal({ deptId: dep.department_id, deptName: dep.department_name })}>
<td>{dep.department_name}</td>
<td className="right">{fmtMoney(dep.cost)}</td>
<td className="right">{fmtMoney(dep.wtdCost)}</td>
<td className="right" style={{ color: 'var(--text-muted)' }}>
{depOfTotal != null ? `${depOfTotal.toFixed(1)}%` : '—'}
</td>
<td className="right">{depBudg != null ? fmtMoney(depBudg) : '—'}</td>
<td className="right">
{depPct != null
? <span className={`pct-badge ${pctClass(depPct)}`}>{fmtDelta(depPct)}</span>
{pyDelta != null
? <span className={pyDelta > 0 ? 'variance-over' : 'variance-under'}>{pyDelta >= 0 ? '+' : ''}{pyDelta.toFixed(1)}%</span>
: '—'}
</td>
<td className="right">
{prevDelta != null
? <span className={prevDelta > 0 ? 'variance-over' : 'variance-under'}>{prevDelta >= 0 ? '+' : ''}{prevDelta.toFixed(1)}%</span>
: '—'}
</td>
<td className="right">{b != null ? fmtMoney(b) : '—'}</td>
<td className="right">
{depPct != null ? <span className={`pct-badge ${pctClass(depPct)}`}>{fmtDelta(depPct)}</span> : '—'}
</td>
<td className="right">{depSPct != null ? `${depSPct.toFixed(1)}%` : '—'}</td>
</tr>
)
})}
<tr className="total-row">
<td>Total</td>
<td className="right">{fmtMoney(totalWages)}</td>
<td className="right">{fmtMoney(totalWTD)}</td>
<td className="right">100%</td>
<td className="right">{budget != null ? fmtMoney(budget) : '—'}</td>
<td className="right">
{pctBudget != null
? <span className={`pct-badge ${pctClass(pctBudget)}`}>{fmtDelta(pctBudget)}</span>
{(() => {
if (totalPyWages <= 0) return '—'
const d = deltaPct(totalWTD, totalPyWages)
if (d == null) return '—'
return <span className={d > 0 ? 'variance-over' : 'variance-under'}>{d >= 0 ? '+' : ''}{d.toFixed(1)}%</span>
})()}
</td>
<td className="right">
{(() => {
const d = deltaPct(totalWTD, totalPrev)
if (d == null) return '—'
return <span className={d > 0 ? 'variance-over' : 'variance-under'}>{d >= 0 ? '+' : ''}{d.toFixed(1)}%</span>
})()}
</td>
<td className="right">{activeBudget != null ? fmtMoney(activeBudget) : '—'}</td>
<td className="right">
{activePctBudg != null
? <span className={`pct-badge ${pctClass(activePctBudg)}`}>{fmtDelta(activePctBudg)}</span>
: '—'}
</td>
<td className="right">{pctSales != null ? `${pctSales.toFixed(1)}%` : '—'}</td>
<td className="right">
{activePctSales != null ? `${activePctSales.toFixed(1)}%` : '—'}
</td>
</tr>
</tbody>
</table>
@ -282,56 +392,12 @@ export default function Weekly() {
<p className="footnote">Includes estimated employer on-costs. Final payroll figures are in Sage.</p>
)}
</div>
{pyDepts.length > 0 && (
<div className="card">
<button className="py-collapse-toggle" onClick={() => setPyTableOpen(o => !o)}>
{pyTableOpen
? <ChevronDown size={14} strokeWidth={1.75} />
: <ChevronRight size={14} strokeWidth={1.75} />}
{isCurrentWeek ? 'PY WTD' : 'PY'} Dept Breakdown ({fmtDisplay(pyFromStr)} {fmtDisplay(pyToStr)})
</button>
{pyTableOpen && (
<table className="data-table" style={{ marginTop: 12 }}>
<thead>
<tr>
<th>Department</th>
<th className="right">{isCurrentWeek ? 'PY WTD' : 'PY'} Wages</th>
<th className="right">% of Total</th>
<th className="right">% Net Sales</th>
</tr>
</thead>
<tbody>
{pyDepts.map(dep => {
const ofTotal = pyTotalWages > 0 ? (dep.cost / pyTotalWages) * 100 : null
const ofSales = pySales > 0 ? (dep.cost / pySales) * 100 : null
return (
<tr key={dep.id}>
<td>{dep.name}</td>
<td className="right">{fmtMoney(dep.cost)}</td>
<td className="right" style={{ color: 'var(--text-muted)' }}>{ofTotal != null ? `${ofTotal.toFixed(1)}%` : '—'}</td>
<td className="right">{ofSales != null ? `${ofSales.toFixed(1)}%` : '—'}</td>
</tr>
)
})}
<tr className="total-row">
<td>Total</td>
<td className="right">{fmtMoney(pyTotalWages)}</td>
<td className="right">100%</td>
<td className="right">{pySales > 0 ? `${((pyTotalWages / pySales) * 100).toFixed(1)}%` : '—'}</td>
</tr>
</tbody>
</table>
)}
</div>
)}
</>
)}
{modal && (
<DeptDetailModal
deptName={modal.deptName}
period={`${fmtDisplay(fromStr)} ${fmtDisplay(isCurrentWeek ? todayStr : toStr)}`}
period={`${fmtDisplay(fromStr)} ${fmtDisplay(isCurrentWeek ? yesterdayStr : toStr)}`}
employees={modalEmps}
loading={modalLoad}
onClose={() => setModal(null)}