egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Merged
egullickson merged 1 commits from issue-246-reorder-log-fuel-fields into main 2026-06-20 03:44:26 +00:00
Conversation 0 Commits 1 Files Changed 2 +86 -76
egullickson commented 2026-06-20 03:22:40 +00:00
Owner
Copy Link

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

  • 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)
All checks were successful
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) <noreply@anthropic.com>
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
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#247
Delete Branch "issue-246-reorder-log-fuel-fields"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?