From 4cbe68ebf7881a4a65f976816ef8481c04a7a066 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Wed, 1 Jul 2026 21:24:41 +0000
Subject: [PATCH] Vertical tab order in denomination grids
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tab now moves down the Qty column first (£50→£20→...→1p), then down
the Value Override column, for both takings and float grids.

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

diff --git a/frontend/src/pages/DailyCashUp.tsx b/frontend/src/pages/DailyCashUp.tsx
index f996801..6074b9c 100644
--- a/frontend/src/pages/DailyCashUp.tsx
+++ b/frontend/src/pages/DailyCashUp.tsx
@@ -232,7 +232,7 @@ export function DailyCashUp({ user: _user }: Props) {
           <h2 style={{ fontSize: '1rem', fontWeight: 700 }}>Cash Takings</h2>
           <span style={{ fontWeight: 700, fontSize: '1.1rem' }}>{fmtGBP(denomTotal(takings))}</span>
         </div>
-        <DenomGrid denoms={takings} onChange={(i, f, v) => updateDenom(takings, setTakings, i, f, v)} disabled={isFinal} />
+        <DenomGrid denoms={takings} onChange={(i, f, v) => updateDenom(takings, setTakings, i, f, v)} disabled={isFinal} tabBase={0} />
       </Card>
 
       {/* Float (collapsible) */}
@@ -248,7 +248,7 @@ export function DailyCashUp({ user: _user }: Props) {
         </button>
         {showFloat && (
           <div style={{ marginTop: '1rem' }}>
-            <DenomGrid denoms={float} onChange={(i, f, v) => updateDenom(float, setFloat, i, f, v)} disabled={isFinal} />
+            <DenomGrid denoms={float} onChange={(i, f, v) => updateDenom(float, setFloat, i, f, v)} disabled={isFinal} tabBase={24} />
           </div>
         )}
       </Card>
@@ -387,11 +387,13 @@ export function DailyCashUp({ user: _user }: Props) {
   )
 }
 
-function DenomGrid({ denoms, onChange, disabled }: {
+function DenomGrid({ denoms, onChange, disabled, tabBase = 0 }: {
   denoms: Denomination[]
   onChange: (idx: number, field: 'quantity' | 'value_entered', val: string) => void
   disabled: boolean
+  tabBase?: number
 }) {
+  const n = denoms.length
   return (
     <div>
       <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr 1fr 80px', gap: '0.25rem 0.5rem', marginBottom: '0.35rem' }}>
@@ -410,6 +412,7 @@ function DenomGrid({ denoms, onChange, disabled }: {
               onChange={e => onChange(i, 'quantity', e.target.value)}
               disabled={disabled}
               placeholder="0"
+              tabIndex={tabBase + i + 1}
               style={inputSt}
             />
             <input
@@ -418,6 +421,7 @@ function DenomGrid({ denoms, onChange, disabled }: {
               onChange={e => onChange(i, 'value_entered', e.target.value)}
               disabled={disabled || row.quantity !== null}
               placeholder="—"
+              tabIndex={tabBase + n + i + 1}
               style={{ ...inputSt, opacity: row.quantity !== null ? 0.4 : 1 }}
             />
             <span style={{ fontSize: '0.875rem', textAlign: 'right' }}>