From fa62c7c44a1e41432bdf577675afc5c7f790f9a7 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Mon, 20 Jul 2026 08:58:30 +0000
Subject: [PATCH] =?UTF-8?q?Fix=20sales=20breakdown=20Audit=20column=20?=
 =?UTF-8?q?=E2=80=94=20show=20all-groups=20total=20vs=20configured=20colum?=
 =?UTF-8?q?ns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gross Total now sums only configured GL column gross amounts. Audit column
shows the all-groups earned revenue total (daily_gross_sales), with amber
variance highlight when they diverge — flags unconfigured GL groups the same
way the original WP plugin did.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/MultiDayReport.tsx | 36 +++++++++++++++++++++------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/MultiDayReport.tsx b/frontend/src/pages/MultiDayReport.tsx
index 3a784c3..5c50908 100644
--- a/frontend/src/pages/MultiDayReport.tsx
+++ b/frontend/src/pages/MultiDayReport.tsx
@@ -576,10 +576,14 @@ export function MultiDayReport() {
               <tbody>
                 {days.map((day, ri) => {
                   const map = Object.fromEntries(day.sales_breakdown.map(s => [s.gl_code, s]))
-                  const totalNet = day.sales_breakdown.reduce((s, sb) => s + (sb.net_amount ?? 0), 0)
-                  const totalVat = day.sales_breakdown.reduce((s, sb) => s + (sb.vat_amount ?? 0), 0)
-                  const totalGross = dayGrossSales(day)
-                  const auditStyle: React.CSSProperties = { background: '#d4edda', fontWeight: 700 }
+                  const totalNet   = day.sales_breakdown.reduce((s, sb) => s + (sb.net_amount   ?? 0), 0)
+                  const totalVat   = day.sales_breakdown.reduce((s, sb) => s + (sb.vat_amount   ?? 0), 0)
+                  const totalGross = day.sales_breakdown.reduce((s, sb) => s + (sb.gross_amount ?? 0), 0)
+                  const audit = dayGrossSales(day)
+                  const auditVar = audit - totalGross
+                  const auditStyle: React.CSSProperties = Math.abs(auditVar) < 0.005
+                    ? { background: '#d4edda', fontWeight: 700 }
+                    : { background: '#fff3cd', fontWeight: 700, color: '#856404' }
                   return (
                     <tr key={day.date} style={{ borderBottom: '1px solid #e0e0e0' }}>
                       <td style={{ ...td, ...cs('tbl-sales', ri + 1, 0) }}>{fmtDate(day.date)}</td>
@@ -590,7 +594,14 @@ export function MultiDayReport() {
                       <td style={{ ...td, textAlign: 'right', fontWeight: 700, ...cs('tbl-sales', ri + 1, salesCols.length + 1) }}>{fmtGBP(totalNet)}</td>
                       <td style={{ ...td, textAlign: 'right', fontWeight: 700, ...cs('tbl-sales', ri + 1, salesCols.length + 2) }}>{fmtGBP(totalVat)}</td>
                       <td style={{ ...td, textAlign: 'right', fontWeight: 700, ...cs('tbl-sales', ri + 1, salesCols.length + 3) }}>{fmtGBP(totalGross)}</td>
-                      <td style={{ ...td, textAlign: 'right', ...auditStyle, ...cs('tbl-sales', ri + 1, salesCols.length + 4) }}>{fmtGBP(totalGross)}</td>
+                      <td style={{ ...td, textAlign: 'right', ...auditStyle, ...cs('tbl-sales', ri + 1, salesCols.length + 4) }}>
+                        {fmtGBP(audit)}
+                        {Math.abs(auditVar) >= 0.005 && (
+                          <span style={{ display: 'block', fontSize: '0.7rem', marginTop: '1px' }}>
+                            {auditVar > 0 ? '▲ +' : '▼ '}{fmtGBP(auditVar)}
+                          </span>
+                        )}
+                      </td>
                     </tr>
                   )
                 })}
@@ -604,8 +615,19 @@ export function MultiDayReport() {
                   })}
                   <th style={{ ...th, ...cs('tbl-sales', days.length + 1, salesCols.length + 1) }}>{fmtGBP(days.reduce((s, d) => s + d.sales_breakdown.reduce((ss, sb) => ss + (sb.net_amount ?? 0), 0), 0))}</th>
                   <th style={{ ...th, ...cs('tbl-sales', days.length + 1, salesCols.length + 2) }}>{fmtGBP(days.reduce((s, d) => s + d.sales_breakdown.reduce((ss, sb) => ss + (sb.vat_amount ?? 0), 0), 0))}</th>
-                  <th style={{ ...th, ...cs('tbl-sales', days.length + 1, salesCols.length + 3) }}>{fmtGBP(days.reduce((s, d) => s + dayGrossSales(d), 0))}</th>
-                  <th style={{ ...th, background: '#d4edda', ...cs('tbl-sales', days.length + 1, salesCols.length + 4) }}>{fmtGBP(days.reduce((s, d) => s + dayGrossSales(d), 0))}</th>
+                  <th style={{ ...th, ...cs('tbl-sales', days.length + 1, salesCols.length + 3) }}>{fmtGBP(days.reduce((s, d) => s + d.sales_breakdown.reduce((ss, sb) => ss + (sb.gross_amount ?? 0), 0), 0))}</th>
+                  {(() => {
+                    const totGross = days.reduce((s, d) => s + d.sales_breakdown.reduce((ss, sb) => ss + (sb.gross_amount ?? 0), 0), 0)
+                    const totAudit = days.reduce((s, d) => s + dayGrossSales(d), 0)
+                    const v = totAudit - totGross
+                    const vstyle: React.CSSProperties = Math.abs(v) < 0.005 ? { background: '#d4edda' } : { background: '#fff3cd', color: '#856404' }
+                    return (
+                      <th style={{ ...th, ...vstyle, ...cs('tbl-sales', days.length + 1, salesCols.length + 4) }}>
+                        {fmtGBP(totAudit)}
+                        {Math.abs(v) >= 0.005 && <span style={{ display: 'block', fontSize: '0.7rem', fontWeight: 400 }}>{v > 0 ? '▲ +' : '▼ '}{fmtGBP(v)}</span>}
+                      </th>
+                    )
+                  })()}
                 </tr>
               </tfoot>
             </table>