feat: VehicleRosterCard component (#196) #198

Closed
opened 2026-02-15 16:30:59 +00:00 by egullickson · 0 comments
Owner

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
status
backlog
type
feature
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
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#198