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

chore: Fuel Logs default to list view instead of form-first (#162) #168

New Issue
Closed
opened 2026-02-13 22:23:01 +00:00 by egullickson · 2 comments
egullickson commented 2026-02-13 22:23:01 +00:00
Owner
Copy Link
Copy Source

Relates to #162

Severity: High

Problem

The Fuel Logs page opens directly to an Add form with a Summary sidebar. There's no log history list/table as the primary view. Users likely want to view their fuel history more often than they add entries.

Recommendation

  • Default to a table/list view of fuel logs with an "Add Fuel Log" button
  • Place the form behind a button click or modal
  • The Summary stats should be above or alongside the history table

Acceptance Criteria

  • Fuel Logs page defaults to showing a list/table of existing fuel logs
  • "Add Fuel Log" button opens the add form (modal or inline)
  • Summary stats remain visible and accessible
  • Tested on mobile (320px, 768px) and desktop (1920px)
Relates to #162 ## Severity: High ## Problem The Fuel Logs page opens directly to an Add form with a Summary sidebar. There's no log history list/table as the primary view. Users likely want to view their fuel history more often than they add entries. ## Recommendation - Default to a table/list view of fuel logs with an "Add Fuel Log" button - Place the form behind a button click or modal - The Summary stats should be above or alongside the history table ## Acceptance Criteria - Fuel Logs page defaults to showing a list/table of existing fuel logs - "Add Fuel Log" button opens the add form (modal or inline) - Summary stats remain visible and accessible - Tested on mobile (320px, 768px) and desktop (1920px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:23:28 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:23:42 +00:00
egullickson commented 2026-02-14 01:16:31 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 12)

Phase: 5 (Fuel Logs restructure) | Priority: High | Depends on: None | Blocks: None

Context

The Fuel Logs page currently uses a two-column layout with the form always visible on the left and the list on the right. This is form-first rather than list-first. Users should see their fuel log history as the primary view, with the form accessible via a button/dialog.

Implementation

1. Restructure frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx:

  • Primary view: FuelStatsCard at top, then FuelLogsList as main content (full width)
  • Remove two-column layout; list takes full width
  • Add "Add Fuel Log" button in page header that opens AddFuelLogDialog
  • Mobile: Same pattern -- stats at top, list below, FAB or button triggers form dialog

2. Create frontend/src/features/fuel-logs/components/AddFuelLogDialog.tsx (new):

interface AddFuelLogDialogProps {
  open: boolean;
  onClose: () => void;
  vehicleId?: string;
}
  • Wraps existing FuelLogForm.tsx inside a MUI <Dialog> component
  • FuelLogForm.tsx remains as-is (standalone form component, reused by both dialog and edit flow)
  • Follows same pattern as existing FuelLogEditDialog.tsx (which wraps the form for editing)
  • On successful submit: close dialog, invalidate fuel logs query to refresh list
  • AddFuelLogDialog.tsx coexists with FuelLogEditDialog.tsx -- they serve different purposes (create vs edit)

3. Minor update to frontend/src/features/fuel-logs/components/FuelLogForm.tsx:

  • Add onSuccess callback prop for dialog close notification (if not already present)

4. Documentation: After completion, add AddFuelLogDialog.tsx entry to components table in frontend/src/features/fuel-logs/CLAUDE.md

Files

  • frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx
  • frontend/src/features/fuel-logs/components/AddFuelLogDialog.tsx (new)
  • frontend/src/features/fuel-logs/components/FuelLogForm.tsx (minor: onSuccess callback)
  • frontend/src/features/fuel-logs/CLAUDE.md (doc update)

Commit Convention

chore: restructure Fuel Logs to list-first with add dialog (refs #168)

Test Criteria

  • Page opens to list view showing fuel log history
  • "Add Fuel Log" button opens the form in a dialog/modal
  • Stats card visible above the list
  • Successful form submission closes dialog and refreshes list
  • Edit flow (via FuelLogEditDialog) still works independently
  • Mobile + desktop layouts both work
  • Verify on mobile (320px, 768px) and desktop (1920px) viewports

Risk Notes

  • Significant layout restructure. Existing form logic must work correctly in dialog context.
  • Ensure form state resets when dialog reopens.

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 12) **Phase**: 5 (Fuel Logs restructure) | **Priority**: High | **Depends on**: None | **Blocks**: None ### Context The Fuel Logs page currently uses a two-column layout with the form always visible on the left and the list on the right. This is form-first rather than list-first. Users should see their fuel log history as the primary view, with the form accessible via a button/dialog. ### Implementation **1. Restructure `frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx`:** - Primary view: `FuelStatsCard` at top, then `FuelLogsList` as main content (full width) - Remove two-column layout; list takes full width - Add "Add Fuel Log" button in page header that opens `AddFuelLogDialog` - Mobile: Same pattern -- stats at top, list below, FAB or button triggers form dialog **2. Create `frontend/src/features/fuel-logs/components/AddFuelLogDialog.tsx` (new):** ```typescript interface AddFuelLogDialogProps { open: boolean; onClose: () => void; vehicleId?: string; } ``` - Wraps existing `FuelLogForm.tsx` inside a MUI `<Dialog>` component - `FuelLogForm.tsx` remains as-is (standalone form component, reused by both dialog and edit flow) - Follows same pattern as existing `FuelLogEditDialog.tsx` (which wraps the form for editing) - On successful submit: close dialog, invalidate fuel logs query to refresh list - `AddFuelLogDialog.tsx` coexists with `FuelLogEditDialog.tsx` -- they serve different purposes (create vs edit) **3. Minor update to `frontend/src/features/fuel-logs/components/FuelLogForm.tsx`:** - Add `onSuccess` callback prop for dialog close notification (if not already present) **4. Documentation**: After completion, add `AddFuelLogDialog.tsx` entry to components table in `frontend/src/features/fuel-logs/CLAUDE.md` ### Files - `frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx` - `frontend/src/features/fuel-logs/components/AddFuelLogDialog.tsx` (new) - `frontend/src/features/fuel-logs/components/FuelLogForm.tsx` (minor: onSuccess callback) - `frontend/src/features/fuel-logs/CLAUDE.md` (doc update) ### Commit Convention ``` chore: restructure Fuel Logs to list-first with add dialog (refs #168) ``` ### Test Criteria - Page opens to list view showing fuel log history - "Add Fuel Log" button opens the form in a dialog/modal - Stats card visible above the list - Successful form submission closes dialog and refreshes list - Edit flow (via FuelLogEditDialog) still works independently - Mobile + desktop layouts both work - Verify on mobile (320px, 768px) and desktop (1920px) viewports ### Risk Notes - Significant layout restructure. Existing form logic must work correctly in dialog context. - Ensure form state resets when dialog reopens. ### Branch Work on branch `issue-162-ux-design-audit-cleanup` (shared with all #162 sub-issues)
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-14 01:48:53 +00:00
egullickson commented 2026-02-14 01:49:58 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

pages/FuelLogsPage.tsx (restructured):

  • Removed two-column Grid layout (form-first)
  • New layout: Header with "Add Fuel Log" button, then FuelStatsCard summary, then FuelLogsList (full width)
  • Form now opens via AddFuelLogDialog instead of being always visible
  • Removed FormSuspense wrapper (no longer needed -- form is in dialog)
  • Removed debug console.log statements

components/AddFuelLogDialog.tsx (new):

  • MUI Dialog wrapping existing FuelLogForm component
  • Full-screen on mobile, max-width "sm" on desktop
  • Close button in header, onSuccess closes dialog after submission
  • Follows same pattern as existing FuelLogEditDialog

Verification

  • TypeScript type-check: PASS
  • FuelLogForm onSuccess prop already existed -- no form changes needed
  • Edit flow via FuelLogEditDialog remains untouched
  • Commit: e4be744 on branch issue-162-ux-design-audit-cleanup

Verdict: PASS | Next: Visual verification on mobile and desktop viewports

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Changes **`pages/FuelLogsPage.tsx` (restructured):** - Removed two-column Grid layout (form-first) - New layout: Header with "Add Fuel Log" button, then FuelStatsCard summary, then FuelLogsList (full width) - Form now opens via AddFuelLogDialog instead of being always visible - Removed FormSuspense wrapper (no longer needed -- form is in dialog) - Removed debug console.log statements **`components/AddFuelLogDialog.tsx` (new):** - MUI Dialog wrapping existing FuelLogForm component - Full-screen on mobile, max-width "sm" on desktop - Close button in header, `onSuccess` closes dialog after submission - Follows same pattern as existing FuelLogEditDialog ### Verification - TypeScript type-check: PASS - FuelLogForm `onSuccess` prop already existed -- no form changes needed - Edit flow via FuelLogEditDialog remains untouched - Commit: `e4be744` on branch `issue-162-ux-design-audit-cleanup` *Verdict*: PASS | *Next*: Visual verification on mobile and desktop viewports
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
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 labels
status
in-progress
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#168