All three maintenance schedules are named "Routine Maintenance" with green "Active" badges. There's no way to differentiate them at a glance without reading the sub-details.
Recommendation
Auto-generate or require unique schedule names
Or prominently display the service type (Fluid-Differential, Doors, Spark Plug) as the primary label instead of the generic schedule name
Acceptance Criteria
Maintenance schedules are visually distinguishable at a glance
Service type or unique identifier is prominently displayed
Tested on mobile (320px, 768px) and desktop (1920px)
Relates to #162
## Severity: Medium
## Problem
All three maintenance schedules are named "Routine Maintenance" with green "Active" badges. There's no way to differentiate them at a glance without reading the sub-details.
## Recommendation
- Auto-generate or require unique schedule names
- Or prominently display the service type (Fluid-Differential, Doors, Spark Plug) as the primary label instead of the generic schedule name
## Acceptance Criteria
- Maintenance schedules are visually distinguishable at a glance
- Service type or unique identifier is prominently displayed
- Tested on mobile (320px, 768px) and desktop (1920px)
Phase: 6 (Maintenance fixes) | Priority: Medium | Depends on: None | Blocks: None
Context
Multiple maintenance schedules display as just their category name (e.g., "Routine Maintenance"), making them indistinguishable when a vehicle has several schedules in the same category.
Implementation
1. In frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx:
Change primary display from getCategoryDisplayName(schedule.category) to show the service type prominently
Display format: {serviceType} -- {category} (e.g., "Fluid-Differential -- Routine Maintenance") using an em-dash separator
If serviceType is empty, fall back to category name alone (no change from current behavior)
Schedules without a service type show category name only (graceful fallback)
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 14)
**Phase**: 6 (Maintenance fixes) | **Priority**: Medium | **Depends on**: None | **Blocks**: None
### Context
Multiple maintenance schedules display as just their category name (e.g., "Routine Maintenance"), making them indistinguishable when a vehicle has several schedules in the same category.
### Implementation
**1. In `frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx`:**
- Change primary display from `getCategoryDisplayName(schedule.category)` to show the service type prominently
- Display format: `{serviceType} -- {category}` (e.g., "Fluid-Differential -- Routine Maintenance") using an em-dash separator
- If `serviceType` is empty, fall back to category name alone (no change from current behavior)
### Files
- `frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx`
### Commit Convention
```
chore: show service type in maintenance schedule names for differentiation (refs #174)
```
### Test Criteria
- Schedules are visually distinguishable (service type is primary identifier)
- Format: "Fluid-Differential -- Routine Maintenance"
- Schedules without a service type show category name only (graceful fallback)
- 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)
Falls back to category name alone when no subtypes exist
Updated delete confirmation dialog to show the same differentiated name
Added flexWrap: 'wrap' to heading container for mobile responsiveness
Verification
ESLint: PASS
TypeScript: PASS
Commit: afd4583
Verdict: PASS | Next: Move to status/done
## Milestone: Implementation Complete
**Phase**: Execution | **Agent**: Developer | **Status**: PASS
### Changes
- Modified `MaintenanceSchedulesList.tsx` to display service types (subtypes) as the primary label
- Format: `{subtypes} — {category}` (e.g., "Fluid-Differential — Routine Maintenance")
- Falls back to category name alone when no subtypes exist
- Updated delete confirmation dialog to show the same differentiated name
- Added `flexWrap: 'wrap'` to heading container for mobile responsiveness
### Verification
- ESLint: PASS
- TypeScript: PASS
- Commit: `afd4583`
*Verdict*: PASS | *Next*: Move to status/done
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Relates to #162
Severity: Medium
Problem
All three maintenance schedules are named "Routine Maintenance" with green "Active" badges. There's no way to differentiate them at a glance without reading the sub-details.
Recommendation
Acceptance Criteria
Implementation Plan (from #162 -- Milestone 14)
Phase: 6 (Maintenance fixes) | Priority: Medium | Depends on: None | Blocks: None
Context
Multiple maintenance schedules display as just their category name (e.g., "Routine Maintenance"), making them indistinguishable when a vehicle has several schedules in the same category.
Implementation
1. In
frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx:getCategoryDisplayName(schedule.category)to show the service type prominently{serviceType} -- {category}(e.g., "Fluid-Differential -- Routine Maintenance") using an em-dash separatorserviceTypeis empty, fall back to category name alone (no change from current behavior)Files
frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsxCommit Convention
Test Criteria
Branch
Work on branch
issue-162-ux-design-audit-cleanup(shared with all #162 sub-issues)Milestone: Implementation Complete
Phase: Execution | Agent: Developer | Status: PASS
Changes
MaintenanceSchedulesList.tsxto display service types (subtypes) as the primary label{subtypes} — {category}(e.g., "Fluid-Differential — Routine Maintenance")flexWrap: 'wrap'to heading container for mobile responsivenessVerification
afd4583Verdict: PASS | Next: Move to status/done