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

feat: VehicleRosterCard component (#196) #198

New Issue
Closed
opened 2026-02-15 16:30:59 +00:00 by egullickson · 0 comments
egullickson commented 2026-02-15 16:30:59 +00:00
Owner
Copy Link

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.
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 Label
status
backlog
type
feature
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No project
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#198
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?