Weekly report status bar: show variance instead of cash total

Variance = banked total - reported total across all payment categories.
Green badge = balanced, red = short (▼), amber = over (▲).
Days with no cash up show no variance (nothing was counted).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-02 09:13:26 +00:00
parent 460e0c3d77
commit 1f5f1639c7

View file

@ -375,13 +375,27 @@ export function MultiDayReport() {
Click cell, then Shift+Click to select range. Ctrl+C to copy.
</p>
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
{days.map(day => (
<div key={day.date} style={{ textAlign: 'center', padding: '0.75rem 1rem', background: 'var(--body-bg)', borderRadius: '6px', border: '1px solid var(--card-border)', minWidth: '80px' }}>
<div style={{ fontSize: '0.75rem', color: 'var(--text-mid)', marginBottom: '0.375rem' }}>{fmtDate(day.date)}</div>
{day.cash_up ? <StatusBadge status={day.cash_up.status} /> : <span style={{ fontSize: '0.7rem', color: 'var(--text-mid)', fontWeight: 600, textTransform: 'uppercase', background: 'var(--card-border)', padding: '0.2rem 0.5rem', borderRadius: '4px' }}>None</span>}
{day.cash_up && <div style={{ fontSize: '0.8rem', fontWeight: 700, marginTop: '0.375rem' }}>{fmtGBP(day.cash_up.total_cash_counted)}</div>}
</div>
))}
{days.map(day => {
const banked = day.reconciliation.reduce((s, r) => s + r.banked_amount, 0)
const reported = day.reconciliation.reduce((s, r) => s + r.reported_amount, 0)
const variance = banked - reported
const varColor = Math.abs(variance) < 0.005 ? '#155724' : variance < 0 ? '#721c24' : '#856404'
const varBg = Math.abs(variance) < 0.005 ? '#d4edda' : variance < 0 ? '#f8d7da' : '#fff3cd'
const varLabel = Math.abs(variance) < 0.005 ? 'Balanced' : (variance < 0 ? '▼ ' : '▲ +') + fmtGBP(variance)
return (
<div key={day.date} style={{ textAlign: 'center', padding: '0.75rem 1rem', background: 'var(--body-bg)', borderRadius: '6px', border: '1px solid var(--card-border)', minWidth: '90px' }}>
<div style={{ fontSize: '0.75rem', color: 'var(--text-mid)', marginBottom: '0.375rem' }}>{fmtDate(day.date)}</div>
{day.cash_up
? <StatusBadge status={day.cash_up.status} />
: <span style={{ fontSize: '0.7rem', color: 'var(--text-mid)', fontWeight: 600, textTransform: 'uppercase', background: 'var(--card-border)', padding: '0.2rem 0.5rem', borderRadius: '4px' }}>None</span>}
{day.cash_up && (
<div style={{ fontSize: '0.75rem', fontWeight: 700, marginTop: '0.4rem', padding: '0.2rem 0.5rem', borderRadius: '4px', background: varBg, color: varColor }}>
{varLabel}
</div>
)}
</div>
)
})}
</div>
</Card>