chore: differentiate identical maintenance schedule names (#162) #174

Closed
opened 2026-02-13 22:24:15 +00:00 by egullickson · 2 comments
Owner

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)
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)
egullickson added the
status
backlog
type
chore
labels 2026-02-13 22:24:43 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:25:01 +00:00
Author
Owner

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)

## 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)
egullickson added
status
in-progress
and removed
status
backlog
labels 2026-02-14 01:54:34 +00:00
Author
Owner

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

## 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
egullickson added
status
done
and removed
status
in-progress
labels 2026-02-14 01:55:37 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#174