hotel-manage-stack/cashup
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Vertical tab order in denomination grids

Browse source 
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
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/pages/DailyCashUp.tsx
View file

@ -232,7 +232,7 @@ export function DailyCashUp({ user: _user }: Props) {
<h2 style={{ fontSize: '1rem', fontWeight: 700 }}>Cash Takings</h2> <h2 style={{ fontSize: '1rem', fontWeight: 700 }}>Cash Takings</h2>
<span style={{ fontWeight: 700, fontSize: '1.1rem' }}>{fmtGBP(denomTotal(takings))}</span> <span style={{ fontWeight: 700, fontSize: '1.1rem' }}>{fmtGBP(denomTotal(takings))}</span>
</div> </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> </Card>
{/* Float (collapsible) */} {/* Float (collapsible) */}
@ -248,7 +248,7 @@ export function DailyCashUp({ user: _user }: Props) {
</button> </button>
{showFloat && ( {showFloat && (
<div style={{ marginTop: '1rem' }}> <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> </div>
)} )}
</Card> </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[] denoms: Denomination[]
onChange: (idx: number, field: 'quantity' | 'value_entered', val: string) => void onChange: (idx: number, field: 'quantity' | 'value_entered', val: string) => void
disabled: boolean disabled: boolean
tabBase?: number
}) { }) {
const n = denoms.length
return ( return (
<div> <div>
<div style={{ display: 'grid', gridTemplateColumns: '80px 1fr 1fr 80px', gap: '0.25rem 0.5rem', marginBottom: '0.35rem' }}> <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)} onChange={e => onChange(i, 'quantity', e.target.value)}
disabled={disabled} disabled={disabled}
placeholder="0" placeholder="0"
tabIndex={tabBase + i + 1}
style={inputSt} style={inputSt}
/> />
<input <input
@ -418,6 +421,7 @@ function DenomGrid({ denoms, onChange, disabled }: {
onChange={e => onChange(i, 'value_entered', e.target.value)} onChange={e => onChange(i, 'value_entered', e.target.value)}
disabled={disabled || row.quantity !== null} disabled={disabled || row.quantity !== null}
placeholder="—" placeholder="—"
tabIndex={tabBase + n + i + 1}
style={{ ...inputSt, opacity: row.quantity !== null ? 0.4 : 1 }} style={{ ...inputSt, opacity: row.quantity !== null ? 0.4 : 1 }}
/> />
<span style={{ fontSize: '0.875rem', textAlign: 'right' }}> <span style={{ fontSize: '0.875rem', textAlign: 'right' }}>