Vertical tab order in denomination grids

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>
This commit is contained in:
jtricerolph 2026-07-01 21:24:41 +00:00
parent b9fb7b1dc7
commit 4cbe68ebf7

View file

@ -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' }}>