feat: Reorder Log Fuel fields by usage and add decimal keypad (#246) #247

2026-06-20T03:22:40Z

egullickson commented

2026-06-20 03:22:40 +00:00

Fixes #246

Summary

Reorder the Add Fuel Log form so the most-used inputs come first and calculated/auto-filled fields are de-emphasized, and trigger the mobile decimal keypad on the numeric fields. Applies to both mobile and desktop.

New field order

Select Vehicle
Mileage (existing Trip Distance / Odometer Reading field, repositioned only)
Cost Per Gallon
Fuel Amount
Fuel Type
Fuel Grade
Location
MPG (read-only, calculated)
Notes
Date & Time

Changes

frontend/src/features/fuel-logs/components/FuelLogForm.tsx -- reordered Grid items to the new order. The now-solo MPG and Date & Time fields changed from sm=6 to xs=12 (full width on desktop). Added inputMode: 'decimal' to the Fuel Amount and Cost Per Gallon inputs.
frontend/src/features/fuel-logs/components/DistanceInput.tsx -- added inputMode: 'decimal' so the Mileage field shows the decimal keypad.

Decisions

Mileage is the existing Trip Distance / Odometer Reading field repositioned only -- toggle and logic unchanged, not renamed.
Fuel Type stays before Fuel Grade because grade options are filtered by the selected type.
Cost Per Gallon is placed before Fuel Amount per the requested order (no data dependency between them).

Test plan

tsc --noEmit -- clean, zero errors.
eslint on changed files -- 0 errors (pre-existing no-explicit-any warnings only; none introduced).
Full frontend Jest suite -- no new failures. The 14 failing suites (admin/dashboard/documents/stations/shared-minimal) are pre-existing on main and unrelated to this change.
Quality Agent RULE 0/1/2 review -- PASS. Verified all field bindings wired, Trip Distance/Odometer toggle intact, OCR setValue mapping unaffected, CostCalculator props and MPG calculation unchanged.
CI mobile/desktop viewport validation (runs on PR).

Notes

No live browser verification was performed: the form is behind Auth0 + live API, so the branch could not be rendered without a full local environment. Field order is verified from the JSX; CI viewport validation covers the live render.
No unit tests exist for FuelLogForm/DistanceInput (pre-existing gap); none added in this change.

Acceptance criteria

Fields render in the expected order.
Mileage retains the Trip Distance / Odometer Reading toggle and logic; label unchanged.
Fuel Grade remains filtered by Fuel Type (Type before Grade).
Numeric fields (Mileage, Fuel Amount, Cost Per Gallon) use inputMode="decimal".
MPG remains read-only and recalculates from distance and fuel amount.
No regression to receipt scan, validation, or total cost calculation.

Fixes #246 ## Summary Reorder the Add Fuel Log form so the most-used inputs come first and calculated/auto-filled fields are de-emphasized, and trigger the mobile decimal keypad on the numeric fields. Applies to both mobile and desktop. ## New field order 1. Select Vehicle 2. Mileage (existing Trip Distance / Odometer Reading field, repositioned only) 3. Cost Per Gallon 4. Fuel Amount 5. Fuel Type 6. Fuel Grade 7. Location 8. MPG (read-only, calculated) 9. Notes 10. Date & Time ## Changes - `frontend/src/features/fuel-logs/components/FuelLogForm.tsx` -- reordered Grid items to the new order. The now-solo MPG and Date & Time fields changed from sm=6 to xs=12 (full width on desktop). Added `inputMode: 'decimal'` to the Fuel Amount and Cost Per Gallon inputs. - `frontend/src/features/fuel-logs/components/DistanceInput.tsx` -- added `inputMode: 'decimal'` so the Mileage field shows the decimal keypad. ## Decisions - Mileage is the existing Trip Distance / Odometer Reading field repositioned only -- toggle and logic unchanged, not renamed. - Fuel Type stays before Fuel Grade because grade options are filtered by the selected type. - Cost Per Gallon is placed before Fuel Amount per the requested order (no data dependency between them). ## Test plan - [x] `tsc --noEmit` -- clean, zero errors. - [x] `eslint` on changed files -- 0 errors (pre-existing `no-explicit-any` warnings only; none introduced). - [x] Full frontend Jest suite -- no new failures. The 14 failing suites (admin/dashboard/documents/stations/shared-minimal) are pre-existing on `main` and unrelated to this change. - [x] Quality Agent RULE 0/1/2 review -- PASS. Verified all field bindings wired, Trip Distance/Odometer toggle intact, OCR setValue mapping unaffected, CostCalculator props and MPG calculation unchanged. - [ ] CI mobile/desktop viewport validation (runs on PR). ## Notes - No live browser verification was performed: the form is behind Auth0 + live API, so the branch could not be rendered without a full local environment. Field order is verified from the JSX; CI viewport validation covers the live render. - No unit tests exist for `FuelLogForm`/`DistanceInput` (pre-existing gap); none added in this change. ## Acceptance criteria - [x] Fields render in the expected order. - [x] Mileage retains the Trip Distance / Odometer Reading toggle and logic; label unchanged. - [x] Fuel Grade remains filtered by Fuel Type (Type before Grade). - [x] Numeric fields (Mileage, Fuel Amount, Cost Per Gallon) use `inputMode="decimal"`. - [x] MPG remains read-only and recalculates from distance and fuel amount. - [x] No regression to receipt scan, validation, or total cost calculation.

egullickson added 1 commit 2026-06-20 03:22:40 +00:00

feat: reorder Log Fuel fields by usage and add decimal keypad (refs #246 )

Deploy to Staging / Build Images (pull_request) Successful in 4m10s

Details

Deploy to Staging / Deploy to Staging (pull_request) Successful in 44s

Details

Deploy to Staging / Verify Staging (pull_request) Successful in 4s

Details

Deploy to Staging / Notify Staging Ready (pull_request) Successful in 4s

Details

Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped

Details

2221819b4a

Reorder the Add Fuel Log form so the most-used inputs come first and
calculated/auto-filled fields are de-emphasized:
Vehicle, Mileage, Cost Per Gallon, Fuel Amount, Fuel Type/Grade,
Location, MPG (read-only), Notes, Date & Time.

Mileage is the existing Trip Distance / Odometer Reading field,
repositioned only; toggle and logic unchanged. Fuel Type stays before
Fuel Grade to preserve the type-filters-grade dependency.

Add inputMode=decimal to the numeric fields (Mileage via DistanceInput,
Fuel Amount, Cost Per Gallon) so mobile shows the decimal keypad. MPG
and Date & Time become full-width since they are no longer paired.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

egullickson closed this pull request

2026-06-20 03:36:43 +00:00

egullickson reopened this pull request

2026-06-20 03:36:45 +00:00

egullickson merged commit e729d425fd into main

2026-06-20 03:44:26 +00:00

egullickson deleted branch issue-246-reorder-log-fuel-fields

2026-06-20 03:44:26 +00:00

egullickson referenced this issue from a commit

2026-06-20 03:44:28 +00:00

Merge pull request 'feat: Reorder Log Fuel fields by usage and add decimal keypad (#246)' (#247) from issue-246-reorder-log-fuel-fields into main

Sign in to join this conversation.