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:
parent
27f9190dc5
commit
3a068ece23
2 changed files with 275 additions and 175 deletions
|
|
@ -43,6 +43,7 @@ export default function Monthly() {
|
|||
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 [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)
|
||||
|
|
@ -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> : '—'}
|
||||
|
|
|
|||
|
|
@ -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,59 +14,58 @@ 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 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 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 [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 [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)
|
||||
|
|
@ -80,8 +78,10 @@ export default function Weekly() {
|
|||
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">
|
||||
{/* ── 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">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 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">Pro-rata Budget</div>
|
||||
<div className="value">{budget != null ? fmtMoney(budget) : '—'}</div>
|
||||
<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={pctBudget != null ? { color: pctBudget <= 100 ? 'var(--app-primary)' : pctBudget <= 110 ? '#b45309' : '#dc2626' } : {}}>
|
||||
{pctBudget != null ? fmtDelta(pctBudget) : '—'}
|
||||
<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(netSales)}</div>
|
||||
{pySales > 0 && <div className="sub">{isCurrentWeek ? 'PY WTD' : 'PY'} {fmtMoney(pySales)}{pyPct(netSales, pySales)}</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">{pctSales != null ? `${pctSales.toFixed(1)}%` : '—'}</div>
|
||||
{pyWages != null && pySales > 0 && (
|
||||
<div className="sub">{isCurrentWeek ? 'PY WTD' : 'PY'} {((pyWages / pySales) * 100).toFixed(1)}%</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>
|
||||
)}
|
||||
|
||||
{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)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue