feat: VehicleRosterCard component (#196) #198

New Issue

2026-02-15T16:30:59Z

egullickson commented

2026-02-15 16:30:59 +00:00

Relates to #196

Summary

Create the per-vehicle card component that displays vehicle identity, health indicator badge, attention items, odometer, and vehicle image. Card is fully clickable and navigates to vehicle detail page.

Files

frontend/src/features/dashboard/components/VehicleRosterCard.tsx -- new component

Acceptance Criteria

Displays vehicle identity: year make model (or nickname if set) via getVehicleLabel()
Shows vehicle image via VehicleImage component with 3-tier fallback
Color-coded health indicator badge (green/yellow/red) with appropriate styling
Up to 3 attention items displayed, sorted by urgency, with icons/labels (e.g., "Oil Change - OVERDUE", "Registration - 18 days")
Shows current odometer reading formatted with locale separators
Entire card clickable -- navigates to /garage/vehicles/{id} (desktop) or vehicle detail screen (mobile)
Hover state: elevation increase + subtle border highlight (uses GlassCard onClick behavior)
Uses GlassCard for consistent card styling
Works on both mobile and desktop viewports
Minimum 44px touch targets on mobile

Relates to #196 ## Summary Create the per-vehicle card component that displays vehicle identity, health indicator badge, attention items, odometer, and vehicle image. Card is fully clickable and navigates to vehicle detail page. ## Files - `frontend/src/features/dashboard/components/VehicleRosterCard.tsx` -- new component ## Acceptance Criteria - [ ] Displays vehicle identity: year make model (or nickname if set) via `getVehicleLabel()` - [ ] Shows vehicle image via `VehicleImage` component with 3-tier fallback - [ ] Color-coded health indicator badge (green/yellow/red) with appropriate styling - [ ] Up to 3 attention items displayed, sorted by urgency, with icons/labels (e.g., "Oil Change - OVERDUE", "Registration - 18 days") - [ ] Shows current odometer reading formatted with locale separators - [ ] Entire card clickable -- navigates to `/garage/vehicles/{id}` (desktop) or vehicle detail screen (mobile) - [ ] Hover state: elevation increase + subtle border highlight (uses GlassCard onClick behavior) - [ ] Uses GlassCard for consistent card styling - [ ] Works on both mobile and desktop viewports - [ ] Minimum 44px touch targets on mobile

egullickson added the

labels 2026-02-15 16:31:45 +00:00

egullickson added this to the Sprint 2026-02-02 milestone 2026-02-15 16:31:49 +00:00

egullickson referenced this issue

2026-02-15 16:33:09 +00:00

feat: Redesign dashboard with vehicle-centric layout #196

egullickson referenced this issue from a commit

2026-02-15 17:04:04 +00:00