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

chore: add Maintenance page title and remove duplicate vehicle dropdown (#162) #169

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

Relates to #162

Severity: High

Problem

Two issues on the Maintenance page:

  1. No page title: The Maintenance page has no h1 page title like other pages have ("My Vehicles", "Documents", etc.). It starts immediately with a Vehicle dropdown and tabs. On initial load the user may not be sure what page they're on.

  2. Duplicate vehicle dropdown: The vehicle dropdown appears twice -- once at the top of the page and again duplicated inside the "Add Maintenance Record" and "Create Maintenance Schedule" sections.

Recommendation

  • Add a "Maintenance" heading consistent with other pages
  • Remove the vehicle dropdown from the add/create sections and rely on the top-level dropdown only

Acceptance Criteria

  • Maintenance page has a visible "Maintenance" h1 heading consistent with other page titles
  • Vehicle dropdown appears only once (at the top level)
  • Add Maintenance Record and Create Maintenance Schedule sections use the top-level vehicle selection
  • Tested on mobile (320px, 768px) and desktop (1920px)
Relates to #162 ## Severity: High ## Problem Two issues on the Maintenance page: 1. **No page title**: The Maintenance page has no h1 page title like other pages have ("My Vehicles", "Documents", etc.). It starts immediately with a Vehicle dropdown and tabs. On initial load the user may not be sure what page they're on. 2. **Duplicate vehicle dropdown**: The vehicle dropdown appears twice -- once at the top of the page and again duplicated inside the "Add Maintenance Record" and "Create Maintenance Schedule" sections. ## Recommendation - Add a "Maintenance" heading consistent with other pages - Remove the vehicle dropdown from the add/create sections and rely on the top-level dropdown only ## Acceptance Criteria - Maintenance page has a visible "Maintenance" h1 heading consistent with other page titles - Vehicle dropdown appears only once (at the top level) - Add Maintenance Record and Create Maintenance Schedule sections use the top-level vehicle selection - Tested on mobile (320px, 768px) and desktop (1920px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:23:30 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:23:45 +00:00
egullickson commented 2026-02-14 01:16:41 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 13)

Phase: 6 (Maintenance fixes) | Priority: High | Depends on: None | Blocks: None

Context

The Maintenance page lacks a page title (inconsistent with Documents page which has one) and the vehicle dropdown selector is duplicated -- once at the page level and again inside each form (MaintenanceRecordForm and MaintenanceScheduleForm).

Implementation

1. Add page title to frontend/src/features/maintenance/pages/MaintenancePage.tsx:

  • Add <Typography variant="h5" fontWeight={600}>Maintenance</Typography> as the first child of the page container, BEFORE the vehicle selector dropdown
  • Consistent with Documents page pattern (DocumentsPage.tsx line 89: <Typography variant="h5" fontWeight={600}>Documents</Typography>)

2. Remove duplicate vehicle dropdown from forms:

  • In frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx: Remove the vehicle FormControl/Select
  • In frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx: Remove the vehicle FormControl/Select
  • Pass selectedVehicleId as a prop from the page-level selector to both forms

3. Same treatment for mobile:

  • In frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx: Add page title and ensure single vehicle dropdown at page level

Files

  • frontend/src/features/maintenance/pages/MaintenancePage.tsx
  • frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx
  • frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
  • frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx

Commit Convention

chore: add Maintenance page title and remove duplicate vehicle dropdown (refs #169)

Test Criteria

  • "Maintenance" heading visible at top of page (consistent with Documents)
  • Single vehicle dropdown at page level only
  • Forms use the selected vehicle from the page-level dropdown
  • Forms still function correctly (create/edit records and schedules)
  • Mobile and desktop both show page title and single dropdown
  • Verify on mobile (320px, 768px) and desktop (1920px) viewports

Branch

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

## Implementation Plan (from #162 -- Milestone 13) **Phase**: 6 (Maintenance fixes) | **Priority**: High | **Depends on**: None | **Blocks**: None ### Context The Maintenance page lacks a page title (inconsistent with Documents page which has one) and the vehicle dropdown selector is duplicated -- once at the page level and again inside each form (MaintenanceRecordForm and MaintenanceScheduleForm). ### Implementation **1. Add page title to `frontend/src/features/maintenance/pages/MaintenancePage.tsx`:** - Add `<Typography variant="h5" fontWeight={600}>Maintenance</Typography>` as the first child of the page container, BEFORE the vehicle selector dropdown - Consistent with Documents page pattern (`DocumentsPage.tsx` line 89: `<Typography variant="h5" fontWeight={600}>Documents</Typography>`) **2. Remove duplicate vehicle dropdown from forms:** - In `frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx`: Remove the vehicle `FormControl/Select` - In `frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx`: Remove the vehicle `FormControl/Select` - Pass `selectedVehicleId` as a prop from the page-level selector to both forms **3. Same treatment for mobile:** - In `frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx`: Add page title and ensure single vehicle dropdown at page level ### Files - `frontend/src/features/maintenance/pages/MaintenancePage.tsx` - `frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx` - `frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx` - `frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx` ### Commit Convention ``` chore: add Maintenance page title and remove duplicate vehicle dropdown (refs #169) ``` ### Test Criteria - "Maintenance" heading visible at top of page (consistent with Documents) - Single vehicle dropdown at page level only - Forms use the selected vehicle from the page-level dropdown - Forms still function correctly (create/edit records and schedules) - Mobile and desktop both show page title and single dropdown - Verify on mobile (320px, 768px) and desktop (1920px) viewports ### 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:50:24 +00:00
egullickson commented 2026-02-14 01:53:24 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

MaintenancePage.tsx:

  • Added "Maintenance" h5 heading consistent with other page titles (Documents pattern)
  • Passes selectedVehicleId to both MaintenanceRecordForm and MaintenanceScheduleForm

MaintenanceRecordForm.tsx:

  • Added optional vehicleId prop
  • Pre-sets vehicle_id default from prop, syncs via useEffect
  • Hides vehicle selector dropdown when vehicleId is provided

MaintenanceScheduleForm.tsx:

  • Same changes as RecordForm -- optional vehicleId prop, pre-set, sync, hide dropdown

MaintenanceMobileScreen.tsx:

  • Mobile already had "Maintenance" heading (no change needed)
  • Passes selectedVehicleId to both forms

Verification

  • TypeScript type-check: PASS
  • Forms still work standalone (no prop = shows vehicle dropdown as before)
  • Commit: f03cd42 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 **`MaintenancePage.tsx`:** - Added "Maintenance" h5 heading consistent with other page titles (Documents pattern) - Passes `selectedVehicleId` to both `MaintenanceRecordForm` and `MaintenanceScheduleForm` **`MaintenanceRecordForm.tsx`:** - Added optional `vehicleId` prop - Pre-sets `vehicle_id` default from prop, syncs via useEffect - Hides vehicle selector dropdown when `vehicleId` is provided **`MaintenanceScheduleForm.tsx`:** - Same changes as RecordForm -- optional `vehicleId` prop, pre-set, sync, hide dropdown **`MaintenanceMobileScreen.tsx`:** - Mobile already had "Maintenance" heading (no change needed) - Passes `selectedVehicleId` to both forms ### Verification - TypeScript type-check: PASS - Forms still work standalone (no prop = shows vehicle dropdown as before) - Commit: `f03cd42` 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#169