From 1f5f1639c727f3062767249731e084d4114ca617 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Thu, 2 Jul 2026 09:13:26 +0000
Subject: [PATCH] Weekly report status bar: show variance instead of cash total
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/pages/MultiDayReport.tsx | 28 ++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/MultiDayReport.tsx b/frontend/src/pages/MultiDayReport.tsx
index ebbc564..3a784c3 100644
--- a/frontend/src/pages/MultiDayReport.tsx
+++ b/frontend/src/pages/MultiDayReport.tsx
@@ -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>