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

[Feature]: Dashboard - Vehicle Fleet Overview #2

New Issue
Closed
opened 2026-01-02 04:07:57 +00:00 by egullickson · 0 comments
egullickson commented 2026-01-02 04:07:57 +00:00
Owner
Copy Link
Copy Source

Problem / user need

As a vehicle owner, I want to see a quick overview of my fleet status when I open the app, so that I can understand at a glance which vehicles need attention, recent activity, and key metrics without navigating through multiple screens.

Proposed solution

When the user navigates to the Dashboard (default landing page after login), the system should display:

  • Summary cards showing upcoming maintenance, and recent fuel logs
  • List of vehicles needing attention (overdue maintenance, low fuel efficiency)
  • Responsive layout that works on both mobile (320px+) and desktop (1920px+)

Non-goals / out of scope

  • Advanced analytics or charts (future enhancement)
  • Custom dashboard widgets or personalization
  • Data export functionality
  • Historical trend analysis

Acceptance criteria

  • Dashboard displays total vehicle count
  • Dashboard displays count of upcoming maintenance items (next 30 days)
  • Dashboard displays recent fuel logs (last 7 days)
  • Dashboard shows vehicles with overdue maintenance (highlighted)
  • Quick action buttons navigate to correct screens
  • Layout is responsive: single column on mobile, multi-column grid on desktop
  • Loading states display skeleton placeholders
  • Empty states show helpful messaging when no data exists
  • Works on mobile viewport (320px) with touch-friendly targets
  • Works on desktop viewport (1920px) with keyboard navigation

Implementation notes

  • Current placeholder: frontend/src/App.tsx lines 83-90 (inline DashboardScreen)
  • Create new feature directory: frontend/src/features/dashboard/
  • Backend APIs already exist for vehicles, fuel-logs, maintenance
  • Use React Query for data fetching (pattern in other features)
  • Follow mobile-first approach per .claude/agents/frontend-agent.md

Test plan

  • Unit: Component tests for DashboardCard, DashboardSummary, QuickActions
  • Integration: Test data fetching with mocked API responses
  • Manual:
    • Verify mobile layout at 320px, 768px viewports
    • Verify desktop layout at 1920px viewport
    • Test with 0 vehicles, 1 vehicle, 10+ vehicles
    • Test touch interactions on mobile
    • Test keyboard navigation on desktop
Problem / user need As a vehicle owner, I want to see a quick overview of my fleet status when I open the app, so that I can understand at a glance which vehicles need attention, recent activity, and key metrics without navigating through multiple screens. Proposed solution When the user navigates to the Dashboard (default landing page after login), the system should display: - Summary cards showing upcoming maintenance, and recent fuel logs - List of vehicles needing attention (overdue maintenance, low fuel efficiency) - Responsive layout that works on both mobile (320px+) and desktop (1920px+) Non-goals / out of scope - Advanced analytics or charts (future enhancement) - Custom dashboard widgets or personalization - Data export functionality - Historical trend analysis Acceptance criteria - Dashboard displays total vehicle count - Dashboard displays count of upcoming maintenance items (next 30 days) - Dashboard displays recent fuel logs (last 7 days) - Dashboard shows vehicles with overdue maintenance (highlighted) - Quick action buttons navigate to correct screens - Layout is responsive: single column on mobile, multi-column grid on desktop - Loading states display skeleton placeholders - Empty states show helpful messaging when no data exists - Works on mobile viewport (320px) with touch-friendly targets - Works on desktop viewport (1920px) with keyboard navigation Implementation notes - Current placeholder: frontend/src/App.tsx lines 83-90 (inline DashboardScreen) - Create new feature directory: frontend/src/features/dashboard/ - Backend APIs already exist for vehicles, fuel-logs, maintenance - Use React Query for data fetching (pattern in other features) - Follow mobile-first approach per .claude/agents/frontend-agent.md Test plan - Unit: Component tests for DashboardCard, DashboardSummary, QuickActions - Integration: Test data fetching with mocked API responses - Manual: - Verify mobile layout at 320px, 768px viewports - Verify desktop layout at 1920px viewport - Test with 0 vehicles, 1 vehicle, 10+ vehicles - Test touch interactions on mobile - Test keyboard navigation on desktop
egullickson added this to the Sprint 2026-01-05 milestone 2026-01-02 04:07:57 +00:00
egullickson added the
status
ready
 label 2026-01-02 04:07:57 +00:00
egullickson added
status
in-progress
type
feature
 and removed
status
ready
 labels 2026-01-02 04:19:23 +00:00
egullickson added
status
review
 and removed
status
in-progress
 labels 2026-01-02 04:36:13 +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 labels
status
review
type
feature
Milestone
No items
No Milestone Sprint 2026-01-05
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#2