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:
parent
b9fb7b1dc7
commit
4cbe68ebf7
1 changed files with 7 additions and 3 deletions
|
|
@ -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' }}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue