Yesterday cutoff for actuals; two-row monthly summary cards
Both Weekly and Monthly now cut off actuals at yesterday (not today) to avoid partial clockins and open timesheets skewing the WTD/MTD figures and % net sales. PY comparison periods also cap at the equivalent yesterday for fair comparison. Monthly rota forecast removed — all future days use prior-week same-day actuals from yesterday back, which is more reliable than partially-published future rotas. Monthly summary cards split into two rows for current month: Row 1 (MTD to yesterday): Actual MTD · Budget pro-rata · % Budget MTD · % Net Sales MTD Row 2 (Full month): Forecast EOM · Monthly Budget · % Budget (Forecast) · % Net Sales (OTB) Net sales fetched for full month so row 2 % net sales uses OTB forecast revenue. Past months show one row (full month actuals only). Weekly: budget pro-rata now counts days Monday to yesterday for current week; dept totals filtered to yesterday for current week. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d04cd1e82c
commit
5b243b3ef8
3 changed files with 204 additions and 136 deletions
|
|
@ -366,6 +366,17 @@ input[type="text"]:focus {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Section row label (Monthly two-row cards) ──────────────────── */
|
||||
.section-row-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ── PY collapse toggle ─────────────────────────────────────────── */
|
||||
.py-collapse-toggle {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { ChevronLeft, ChevronRight, ChevronDown, Download } from 'lucide-react'
|
|||
import {
|
||||
BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, Cell,
|
||||
} from 'recharts'
|
||||
import { getActuals, getScheduled, getNetSales, getBudgets, getDeptDetail, downloadExport } from '../api'
|
||||
import { getActuals, getNetSales, getBudgets, getDeptDetail, downloadExport } from '../api'
|
||||
import type { DeptActuals, WageBudget, EmployeeDetail } from '../types'
|
||||
import { DeptDetailModal } from '../components/DeptDetailModal'
|
||||
|
||||
|
|
@ -15,11 +15,19 @@ function daysInMonth(y: number, m: number): number { return new Date(y, m, 0).ge
|
|||
function fmtMoney(n: number): string { return `£${Math.round(n).toLocaleString('en-GB')}` }
|
||||
function pctClass(pct: number): string { 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 fmtDisplay(dateStr: string): string {
|
||||
return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })
|
||||
}
|
||||
function budgetColour(pct: number): string {
|
||||
return pct <= 100 ? 'var(--app-primary)' : pct <= 110 ? '#b45309' : '#dc2626'
|
||||
}
|
||||
|
||||
const DEPT_COLORS = ['#065f46','#059669','#0891b2','#7c3aed','#c2410c','#b45309','#0f766e','#4338ca','#be185d','#15803d']
|
||||
|
||||
export default function Monthly() {
|
||||
const todayStr = fmt(new Date())
|
||||
const today = new Date()
|
||||
const todayStr = fmt(today)
|
||||
const yesterdayStr = fmt(addDays(today, -1))
|
||||
const todayYear = parseInt(todayStr.slice(0, 4))
|
||||
const todayMonth = parseInt(todayStr.slice(5, 7))
|
||||
|
||||
|
|
@ -27,9 +35,10 @@ export default function Monthly() {
|
|||
const [month, setMonth] = useState(todayMonth)
|
||||
|
||||
const [depts, setDepts] = useState<DeptActuals[]>([])
|
||||
const [scheduled, setScheduled] = useState<Record<string, Record<string, number>>>({})
|
||||
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 [pySalesFull, setPySalesFull] = useState(0)
|
||||
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}[]>([])
|
||||
|
|
@ -48,16 +57,8 @@ export default function Monthly() {
|
|||
const fromStr = `${monthStr}-01`
|
||||
const toStr = `${monthStr}-${String(dim).padStart(2, '0')}`
|
||||
const isCurrentMonth = year === todayYear && month === todayMonth
|
||||
const salesTo = isCurrentMonth ? todayStr : toStr
|
||||
const schedFrom = todayStr < toStr ? todayStr : toStr
|
||||
// Current Mon–Sun: only use rota within this window; beyond it use prior-week actuals
|
||||
const currentWeekEndStr = (() => {
|
||||
const d = new Date(todayStr + 'T00:00:00')
|
||||
const day = d.getDay()
|
||||
d.setDate(d.getDate() + (day === 0 ? 0 : 7 - day))
|
||||
return fmt(d)
|
||||
})()
|
||||
// Prior-year: always fetch full month so we can show PY EOM alongside PY MTD
|
||||
|
||||
// Prior year: always fetch full month (derive both MTD and full totals from one call)
|
||||
const pyDim = daysInMonth(year - 1, month)
|
||||
const pyFromStr = `${year - 1}-${String(month).padStart(2, '0')}-01`
|
||||
const pyToStr = `${year - 1}-${String(month).padStart(2, '0')}-${String(pyDim).padStart(2, '0')}`
|
||||
|
|
@ -65,10 +66,10 @@ export default function Monthly() {
|
|||
const load = useCallback(async () => {
|
||||
setLoading(true); setError(null)
|
||||
try {
|
||||
const [actRes, schRes, salesRes, budRes, pyActRes] = await Promise.all([
|
||||
// Net sales: full month — OTB/forecast for future dates, actuals for past dates
|
||||
const [actRes, salesRes, budRes, pyActRes] = await Promise.all([
|
||||
getActuals(fromStr, toStr),
|
||||
getScheduled(schedFrom, toStr),
|
||||
getNetSales(fromStr, salesTo),
|
||||
getNetSales(fromStr, toStr),
|
||||
getBudgets(),
|
||||
getActuals(pyFromStr, pyToStr),
|
||||
])
|
||||
|
|
@ -76,23 +77,20 @@ export default function Monthly() {
|
|||
setShowOncosts(actRes.show_oncosts)
|
||||
setDeptPcts(actRes.dept_pcts)
|
||||
|
||||
const schMap: Record<string, Record<string, number>> = {}
|
||||
for (const dep of schRes.departments) {
|
||||
schMap[dep.department_id] = {}
|
||||
for (const [date, val] of Object.entries(dep.days)) {
|
||||
schMap[dep.department_id][date] = val.cost
|
||||
}
|
||||
}
|
||||
setScheduled(schMap)
|
||||
// Cut-off for MTD = yesterday (avoid partial clockins today)
|
||||
const cutoff = isCurrentMonth ? yesterdayStr : toStr
|
||||
|
||||
setNetSales(salesRes.days.reduce((s, d) => s + d.net_sales, 0))
|
||||
setPySales(salesRes.days.reduce((s, d) => s + d.py_sales, 0))
|
||||
setNetSalesMTD(salesRes.days.filter(d => d.date <= cutoff).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 <= cutoff).reduce((s, d) => s + d.py_sales, 0))
|
||||
setPySalesFull(salesRes.days.reduce((s, d) => s + d.py_sales, 0))
|
||||
|
||||
// PY MTD limit: cap at same day number as today (or month end for past months)
|
||||
const todayDay = parseInt(todayStr.slice(8))
|
||||
// PY MTD: same day number as yesterday in PY (or full month for past months)
|
||||
const yDay = parseInt(yesterdayStr.slice(8))
|
||||
const pyMtdLimit = isCurrentMonth
|
||||
? `${year - 1}-${String(month).padStart(2, '0')}-${String(Math.min(todayDay, pyDim)).padStart(2, '0')}`
|
||||
? `${year - 1}-${String(month).padStart(2, '0')}-${String(Math.min(yDay, pyDim)).padStart(2, '0')}`
|
||||
: pyToStr
|
||||
|
||||
const pyDeptList = pyActRes.departments.map(dep => {
|
||||
const mtdCost = Object.entries(dep.days).filter(([d]) => d <= pyMtdLimit).reduce((s, [, v]) => s + v.cost, 0)
|
||||
const fullCost = Object.values(dep.days).reduce((s, v) => s + v.cost, 0)
|
||||
|
|
@ -111,42 +109,35 @@ export default function Monthly() {
|
|||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [fromStr, toStr, schedFrom, salesTo, pyFromStr, pyToStr])
|
||||
}, [fromStr, toStr, pyFromStr, pyToStr, isCurrentMonth, yesterdayStr, year, month, pyDim])
|
||||
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
useEffect(() => {
|
||||
if (!modal) { setModalEmps(null); return }
|
||||
setModalLoad(true)
|
||||
getDeptDetail(modal.deptId, fromStr, isCurrentMonth ? todayStr : toStr)
|
||||
getDeptDetail(modal.deptId, fromStr, isCurrentMonth ? yesterdayStr : toStr)
|
||||
.then(r => setModalEmps(r.employees))
|
||||
.catch(() => setModalEmps([]))
|
||||
.finally(() => setModalLoad(false))
|
||||
}, [modal, fromStr, toStr, todayStr, isCurrentMonth])
|
||||
}, [modal, fromStr, toStr, yesterdayStr, isCurrentMonth])
|
||||
|
||||
const prev = () => { if (month === 1) { setYear(y => y - 1); setMonth(12) } else { setMonth(m => m - 1) } }
|
||||
const next = () => { if (month === 12) { setYear(y => y + 1); setMonth(1) } else { setMonth(m => m + 1) } }
|
||||
|
||||
function getSchCost(deptId: string, date: string): number | null {
|
||||
return scheduled[deptId]?.[date] ?? null
|
||||
}
|
||||
// Actuals cut off at yesterday; remaining days forecast via prior-week same-day actual
|
||||
const cutoff = isCurrentMonth ? yesterdayStr : toStr
|
||||
|
||||
// Build dept summary: actual MTD + forecast EOM
|
||||
const deptSummary = depts.map((dep, idx) => {
|
||||
const actualMTD = Object.entries(dep.days)
|
||||
.filter(([d]) => d <= todayStr && d >= fromStr && d <= toStr)
|
||||
.filter(([d]) => d >= fromStr && d <= cutoff)
|
||||
.reduce((s, [, v]) => s + v.cost, 0)
|
||||
|
||||
let forecastRem = 0
|
||||
if (isCurrentMonth) {
|
||||
for (let day = 1; day <= dim; day++) {
|
||||
const dateStr = `${monthStr}-${String(day).padStart(2, '0')}`
|
||||
if (dateStr <= todayStr) continue
|
||||
// Only trust rota for current Mon–Sun week; beyond that use prior-week actuals
|
||||
if (dateStr <= currentWeekEndStr) {
|
||||
const rota = getSchCost(dep.department_id, dateStr)
|
||||
if (rota != null) { forecastRem += rota; continue }
|
||||
}
|
||||
if (dateStr <= yesterdayStr) continue
|
||||
const priorStr = fmt(addDays(new Date(dateStr + 'T00:00:00'), -7))
|
||||
const priorCost = dep.days[priorStr]?.cost
|
||||
if (priorCost != null) forecastRem += priorCost
|
||||
|
|
@ -165,9 +156,18 @@ export default function Monthly() {
|
|||
const totalActual = deptSummary.reduce((s, d) => s + d.actual_mtd, 0)
|
||||
const totalForecast = deptSummary.reduce((s, d) => s + d.forecast_eom, 0)
|
||||
const pyTotalWages = pyDepts.reduce((s, d) => s + d.cost, 0)
|
||||
const pctBudget = budget != null && budget > 0 ? (totalForecast / budget) * 100 : null
|
||||
const pctSales = netSales > 0 ? (totalActual / netSales) * 100 : null
|
||||
const variance = budget != null ? totalForecast - budget : null
|
||||
|
||||
// MTD row: pro-rata budget to yesterday
|
||||
const yDay = isCurrentMonth ? parseInt(yesterdayStr.slice(8)) : dim
|
||||
const budgetMTD = budget != null ? budget * yDay / dim : null
|
||||
const varianceMTD = budgetMTD != null ? totalActual - budgetMTD : null
|
||||
const pctBudgMTD = budgetMTD != null && budgetMTD > 0 ? (totalActual / budgetMTD) * 100 : null
|
||||
const pctSalesMTD = netSalesMTD > 0 ? (totalActual / netSalesMTD) * 100 : null
|
||||
|
||||
// Full month row
|
||||
const varianceFull = budget != null ? totalForecast - budget : null
|
||||
const pctBudgFull = budget != null && budget > 0 ? (totalForecast / budget) * 100 : null
|
||||
const pctSalesFull = netSalesFull > 0 ? (totalForecast / netSalesFull) * 100 : null
|
||||
|
||||
function pyPct(current: number, py: number): string {
|
||||
if (py <= 0 || current <= 0) return ''
|
||||
|
|
@ -175,34 +175,28 @@ export default function Monthly() {
|
|||
return ` (${p >= 0 ? '+' : ''}${p.toFixed(1)}%)`
|
||||
}
|
||||
|
||||
// Build chart data with per-dept costs per week so Bar dataKey works
|
||||
// Chart: past weeks solid, current/future weeks lighter
|
||||
type WeekEntry = { label: string; isPast: boolean; [dept: string]: number | boolean | string }
|
||||
const weeks: WeekEntry[] = []
|
||||
for (let w = 0; w * 7 < dim; w++) {
|
||||
const wStart = w * 7 + 1
|
||||
const wEnd = Math.min(wStart + 6, dim)
|
||||
const wEndStr = `${monthStr}-${String(wEnd).padStart(2, '0')}`
|
||||
const isPast = wEndStr < todayStr
|
||||
const isPast = wEndStr <= yesterdayStr
|
||||
|
||||
const entry: WeekEntry = { label: `W${w + 1}`, isPast }
|
||||
|
||||
for (const dep of deptSummary) {
|
||||
const srcDep = depts.find(d => d.department_id === dep.department_id)
|
||||
let deptCost = 0
|
||||
for (let day = wStart; day <= wEnd; day++) {
|
||||
const dateStr = `${monthStr}-${String(day).padStart(2, '0')}`
|
||||
if (dateStr <= todayStr) {
|
||||
if (dateStr <= cutoff) {
|
||||
deptCost += srcDep?.days[dateStr]?.cost ?? 0
|
||||
} else {
|
||||
const rota = dateStr <= currentWeekEndStr ? getSchCost(dep.department_id, dateStr) : null
|
||||
if (rota != null) {
|
||||
deptCost += rota
|
||||
} else {
|
||||
const priorStr = fmt(addDays(new Date(dateStr + 'T00:00:00'), -7))
|
||||
deptCost += srcDep?.days[priorStr]?.cost ?? 0
|
||||
}
|
||||
}
|
||||
}
|
||||
entry[dep.department_name] = deptCost
|
||||
}
|
||||
weeks.push(entry)
|
||||
|
|
@ -225,51 +219,103 @@ export default function Monthly() {
|
|||
<button className="btn btn-secondary" onClick={next} disabled={isCurrentMonth}><ChevronRight size={16} strokeWidth={1.75} /></button>
|
||||
</div>
|
||||
|
||||
<div className="summary-grid">
|
||||
{/* ── Summary cards ─────────────────────────────────────────── */}
|
||||
{isCurrentMonth ? (
|
||||
<>
|
||||
<div className="section-row-label">Month to {fmtDisplay(yesterdayStr)}</div>
|
||||
<div className="summary-grid" style={{ marginBottom: 8 }}>
|
||||
<div className="summary-card">
|
||||
<div className="label">{isCurrentMonth ? 'Actual MTD' : 'Actual'}</div>
|
||||
<div className="label">Actual MTD</div>
|
||||
<div className="value">{fmtMoney(totalActual)}</div>
|
||||
{pyWages != null && <div className="sub">{isCurrentMonth ? 'PY MTD' : 'PY'} {fmtMoney(pyWages)}{pyPct(totalActual, pyWages)}</div>}
|
||||
{pyWages != null && <div className="sub">PY MTD {fmtMoney(pyWages)}{pyPct(totalActual, pyWages)}</div>}
|
||||
</div>
|
||||
{isCurrentMonth && (
|
||||
<div className="summary-card">
|
||||
<div className="label">Budget MTD</div>
|
||||
<div className="value">{budgetMTD != null ? fmtMoney(budgetMTD) : '—'}</div>
|
||||
<div className="sub">pro-rata {yDay}/{dim} days</div>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<div className="label">% Budget MTD</div>
|
||||
<div className="value" style={pctBudgMTD != null ? { color: budgetColour(pctBudgMTD) } : {}}>
|
||||
{pctBudgMTD != null ? fmtDelta(pctBudgMTD) : '—'}
|
||||
</div>
|
||||
{varianceMTD != null && (
|
||||
<div className={`sub ${varianceMTD > 0 ? 'variance-over' : 'variance-under'}`}>
|
||||
{varianceMTD > 0 ? `+${fmtMoney(varianceMTD)} over` : `${fmtMoney(Math.abs(varianceMTD))} under`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<div className="label">% Net Sales MTD</div>
|
||||
<div className="value">{pctSalesMTD != null ? `${pctSalesMTD.toFixed(1)}%` : '—'}</div>
|
||||
{pyWages != null && pySalesMTD > 0 && (
|
||||
<div className="sub">PY MTD {((pyWages / pySalesMTD) * 100).toFixed(1)}%</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="section-row-label">Full month forecast</div>
|
||||
<div className="summary-grid" style={{ marginBottom: 20 }}>
|
||||
<div className="summary-card">
|
||||
<div className="label">Forecast EOM</div>
|
||||
<div className="value">{fmtMoney(totalForecast)}</div>
|
||||
<div className="sub">
|
||||
{pyWagesFull != null
|
||||
? `PY ${fmtMoney(pyWagesFull)}${pyPct(totalForecast, pyWagesFull)}`
|
||||
: 'rota + prior-week actual'}
|
||||
{pyWagesFull != null && <div className="sub">PY {fmtMoney(pyWagesFull)}{pyPct(totalForecast, pyWagesFull)}</div>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="summary-card">
|
||||
<div className="label">Monthly Budget</div>
|
||||
<div className="value">{budget != null ? fmtMoney(budget) : '—'}</div>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<div className="label">% Budget {isCurrentMonth ? '(Forecast)' : ''}</div>
|
||||
<div className="value" style={pctBudget != null ? { color: pctBudget <= 100 ? 'var(--app-primary)' : pctBudget <= 110 ? '#b45309' : '#dc2626' } : {}}>
|
||||
{pctBudget != null ? fmtDelta(pctBudget) : '—'}
|
||||
<div className="label">% Budget (Forecast)</div>
|
||||
<div className="value" style={pctBudgFull != null ? { color: budgetColour(pctBudgFull) } : {}}>
|
||||
{pctBudgFull != null ? fmtDelta(pctBudgFull) : '—'}
|
||||
</div>
|
||||
{variance != null && (
|
||||
<div className={`sub ${variance > 0 ? 'variance-over' : 'variance-under'}`}>
|
||||
{variance > 0 ? `+${fmtMoney(variance)} over` : `${fmtMoney(Math.abs(variance))} under`}
|
||||
{varianceFull != null && (
|
||||
<div className={`sub ${varianceFull > 0 ? 'variance-over' : 'variance-under'}`}>
|
||||
{varianceFull > 0 ? `+${fmtMoney(varianceFull)} over` : `${fmtMoney(Math.abs(varianceFull))} under`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<div className="label">{isCurrentMonth ? 'Net Sales MTD' : 'Net Sales'}</div>
|
||||
<div className="value">{fmtMoney(netSales)}</div>
|
||||
{pySales > 0 && <div className="sub">{isCurrentMonth ? 'PY MTD' : 'PY'} {fmtMoney(pySales)}{pyPct(netSales, pySales)}</div>}
|
||||
<div className="label">% Net Sales (OTB)</div>
|
||||
<div className="value">{pctSalesFull != null ? `${pctSalesFull.toFixed(1)}%` : '—'}</div>
|
||||
{pyWagesFull != null && pySalesFull > 0 && (
|
||||
<div className="sub">PY {((pyWagesFull / pySalesFull) * 100).toFixed(1)}%</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="summary-grid" style={{ marginBottom: 20 }}>
|
||||
<div className="summary-card">
|
||||
<div className="label">Actual</div>
|
||||
<div className="value">{fmtMoney(totalActual)}</div>
|
||||
{pyWagesFull != null && <div className="sub">PY {fmtMoney(pyWagesFull)}{pyPct(totalActual, pyWagesFull)}</div>}
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<div className="label">Monthly Budget</div>
|
||||
<div className="value">{budget != null ? fmtMoney(budget) : '—'}</div>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<div className="label">% Budget</div>
|
||||
<div className="value" style={pctBudgFull != null ? { color: budgetColour(pctBudgFull) } : {}}>
|
||||
{pctBudgFull != null ? fmtDelta(pctBudgFull) : '—'}
|
||||
</div>
|
||||
{varianceFull != null && (
|
||||
<div className={`sub ${varianceFull > 0 ? 'variance-over' : 'variance-under'}`}>
|
||||
{varianceFull > 0 ? `+${fmtMoney(varianceFull)} over` : `${fmtMoney(Math.abs(varianceFull))} under`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<div className="label">% Net Sales</div>
|
||||
<div className="value">{pctSales != null ? `${pctSales.toFixed(1)}%` : '—'}</div>
|
||||
{pyWages != null && pySales > 0 && (
|
||||
<div className="sub">{isCurrentMonth ? 'PY MTD' : 'PY'} {((pyWages / pySales) * 100).toFixed(1)}%</div>
|
||||
<div className="value">{pctSalesFull != null ? `${pctSalesFull.toFixed(1)}%` : '—'}</div>
|
||||
{pyWagesFull != null && pySalesFull > 0 && (
|
||||
<div className="sub">PY {((pyWagesFull / pySalesFull) * 100).toFixed(1)}%</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && <div className="state-center">Loading…</div>}
|
||||
{error && <div className="state-center" style={{ color: '#dc2626' }}>{error}</div>}
|
||||
|
|
@ -321,7 +367,10 @@ export default function Monthly() {
|
|||
return (
|
||||
<tr key={dep.department_id} style={{ cursor: 'pointer' }}
|
||||
onClick={() => setModal({ deptId: dep.department_id, deptName: dep.department_name })}>
|
||||
<td><span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: '50%', background: dep.color, marginRight: 8 }} />{dep.department_name}</td>
|
||||
<td>
|
||||
<span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: '50%', background: dep.color, marginRight: 8 }} />
|
||||
{dep.department_name}
|
||||
</td>
|
||||
<td className="right">{fmtMoney(dep.actual_mtd)}</td>
|
||||
{isCurrentMonth && <td className="right">{fmtMoney(dep.forecast_eom)}</td>}
|
||||
<td className="right" style={{ color: 'var(--text-muted)' }}>
|
||||
|
|
@ -344,10 +393,10 @@ export default function Monthly() {
|
|||
<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> : '—'}
|
||||
{pctBudgFull != null ? <span className={`pct-badge ${pctClass(pctBudgFull)}`}>{fmtDelta(pctBudgFull)}</span> : '—'}
|
||||
</td>
|
||||
<td className="right">
|
||||
{variance != null && <span className={variance > 0 ? 'variance-over' : 'variance-under'}>{variance > 0 ? '+' : ''}{fmtMoney(variance)}</span>}
|
||||
{varianceFull != null && <span className={varianceFull > 0 ? 'variance-over' : 'variance-under'}>{varianceFull > 0 ? '+' : ''}{fmtMoney(varianceFull)}</span>}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -376,7 +425,7 @@ export default function Monthly() {
|
|||
<tbody>
|
||||
{pyDepts.map(dep => {
|
||||
const ofTotal = pyTotalWages > 0 ? (dep.cost / pyTotalWages) * 100 : null
|
||||
const ofSales = pySales > 0 ? (dep.cost / pySales) * 100 : null
|
||||
const ofSales = pySalesMTD > 0 ? (dep.cost / pySalesMTD) * 100 : null
|
||||
return (
|
||||
<tr key={dep.id}>
|
||||
<td>{dep.name}</td>
|
||||
|
|
@ -390,7 +439,7 @@ export default function Monthly() {
|
|||
<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>
|
||||
<td className="right">{pySalesMTD > 0 ? `${((pyTotalWages / pySalesMTD) * 100).toFixed(1)}%` : '—'}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -403,7 +452,7 @@ export default function Monthly() {
|
|||
{modal && (
|
||||
<DeptDetailModal
|
||||
deptName={modal.deptName}
|
||||
period={monthLabel}
|
||||
period={isCurrentMonth ? `MTD to ${fmtDisplay(yesterdayStr)}` : monthLabel}
|
||||
employees={modalEmps}
|
||||
loading={modalLoad}
|
||||
onClose={() => setModal(null)}
|
||||
|
|
|
|||
|
|
@ -51,11 +51,13 @@ export default function Weekly() {
|
|||
|
||||
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)
|
||||
// For current (partial) week cap PY at equivalent elapsed day — fair WTD comparison
|
||||
// Cut-off at yesterday: avoids partial clockins/open timesheets skewing today's figures
|
||||
const daysElapsed = isCurrentWeek
|
||||
? Math.round((new Date(todayStr + 'T00:00:00').getTime() - new Date(fromStr + 'T00:00:00').getTime()) / 86_400_000)
|
||||
? 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)
|
||||
|
||||
|
|
@ -87,12 +89,16 @@ export default function Weekly() {
|
|||
setDepts(actRes.departments)
|
||||
setShowOncosts(actRes.show_oncosts)
|
||||
setDeptPcts(actRes.dept_pcts)
|
||||
setNetSales(salesRes.days.reduce((s, d) => s + d.net_sales, 0))
|
||||
// For current week only sum PY sales for elapsed days (WTD = apples to apples)
|
||||
// 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 <= todayStr).reduce((s, d) => s + d.py_sales, 0)
|
||||
? 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)
|
||||
)
|
||||
|
||||
|
|
@ -110,10 +116,10 @@ export default function Weekly() {
|
|||
const bRow = (budgetRes.budgets as WageBudget[]).find(b => b.month === monthKey)
|
||||
if (bRow) {
|
||||
const dim = daysInMonthFor(fromStr)
|
||||
const effectiveTo = todayStr < toStr ? todayStr : toStr
|
||||
const effectiveFrom = fromStr > todayStr ? todayStr : fromStr
|
||||
const weekDays = effectiveTo >= effectiveFrom
|
||||
? Math.round((new Date(effectiveTo + 'T00:00:00').getTime() - new Date(effectiveFrom + 'T00:00:00').getTime()) / 86_400_000) + 1
|
||||
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)
|
||||
|
|
@ -151,7 +157,9 @@ export default function Weekly() {
|
|||
const deptTotals = depts.map(dep => ({
|
||||
department_id: dep.department_id,
|
||||
department_name: dep.department_name,
|
||||
cost: Object.values(dep.days).reduce((s, d) => s + d.cost, 0),
|
||||
cost: Object.entries(dep.days)
|
||||
.filter(([d]) => !isCurrentWeek || d <= yesterdayStr)
|
||||
.reduce((s, [, v]) => s + v.cost, 0),
|
||||
})).sort((a, b) => b.cost - a.cost)
|
||||
|
||||
const totalWages = deptTotals.reduce((s, d) => s + d.cost, 0)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue