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

chore: enrich Dashboard with meaningful content (#162) #166

New Issue
Closed
opened 2026-02-13 22:22:44 +00:00 by egullickson · 2 comments
egullickson commented 2026-02-13 22:22:44 +00:00
Owner
Copy Link
Copy Source

Relates to #162

Severity: High

Problem

The dashboard is ~60% empty white space below the Quick Actions cards. For a user with 6 vehicles and active data, the dashboard should surface more value and answer "what do I need to do today?" at a glance.

Recommendation

Add one or more of:

  • "Recent Activity" feed showing latest fuel logs, maintenance records, document uploads
  • Upcoming maintenance reminders
  • Fuel cost trends chart

Acceptance Criteria

  • Dashboard displays meaningful content below Quick Actions (no large empty white space)
  • Content is dynamic and reflects the user's actual data
  • Graceful empty/zero state when no data exists
  • Tested on mobile (320px, 768px) and desktop (1920px)
Relates to #162 ## Severity: High ## Problem The dashboard is ~60% empty white space below the Quick Actions cards. For a user with 6 vehicles and active data, the dashboard should surface more value and answer "what do I need to do today?" at a glance. ## Recommendation Add one or more of: - "Recent Activity" feed showing latest fuel logs, maintenance records, document uploads - Upcoming maintenance reminders - Fuel cost trends chart ## Acceptance Criteria - Dashboard displays meaningful content below Quick Actions (no large empty white space) - Content is dynamic and reflects the user's actual data - Graceful empty/zero state when no data exists - Tested on mobile (320px, 768px) and desktop (1920px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:23:21 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:23:36 +00:00
egullickson commented 2026-02-14 01:16:15 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 11)

Phase: 4 (Dashboard improvements) | Priority: High | Depends on: None | Blocks: None

Context

The dashboard currently shows summary stat cards and vehicles needing attention, but lacks meaningful content like recent activity. The useDashboardData() hook fetches fuel logs and maintenance data internally but only returns summary counts -- the raw data is not exposed to consumers.

Implementation

1. Define new type in frontend/src/features/dashboard/types/index.ts:

export interface RecentActivityItem {
  type: 'fuel' | 'maintenance';
  vehicleId: string;
  vehicleName: string;
  description: string;  // e.g. "Filled 12.5 gal at $3.45/gal" or "Oil Change completed"
  timestamp: string;    // ISO date string
}

2. Extend DashboardData interface (same file):

export interface DashboardData {
  summary: DashboardSummary;
  vehiclesNeedingAttention: VehicleNeedingAttention[];
  recentActivity: RecentActivityItem[];  // NEW
}

3. Extend frontend/src/features/dashboard/hooks/useDashboardData.ts:

Inside the queryFn, after calculating existing data, build recentActivity:

  • Map last 7 days of fuel logs to { type: 'fuel', vehicleId, vehicleName, description: "Filled {gallons} gal at ${pricePerGallon}/gal", timestamp }
  • Map last 30 days of maintenance records to { type: 'maintenance', vehicleId, vehicleName, description: "{serviceType} completed", timestamp }
  • Note: maintenance records may need an additional API call (maintenanceApi.getRecordsByVehicle()) since the hook currently only fetches schedules
  • Sort combined list by timestamp descending, take first 7 items
  • Return recentActivity alongside existing summary and vehiclesNeedingAttention

4. Create frontend/src/features/dashboard/components/RecentActivity.tsx:

  • Render a chronological feed of recent activity items
  • Each item shows: icon (fuel pump / wrench), vehicle name, description, relative timestamp
  • Empty state: "No recent activity" with subtle guidance text
  • Responsive: single column on mobile, wider on desktop

5. Wire into frontend/src/features/dashboard/components/DashboardScreen.tsx:

  • Add <RecentActivity> section below VehiclesNeedingAttention
  • Pass recentActivity from useDashboardData hook

6. Documentation -- Create frontend/src/features/dashboard/CLAUDE.md:

# dashboard/

## Subdirectories

| Directory | What | When to read |
| --------- | ---- | ------------ |
| `api/` | Dashboard API client | API integration |
| `components/` | SummaryCards, QuickActions, VehicleAttention, RecentActivity | UI changes |
| `hooks/` | useDashboardData (unified fetching) | Data flow |
| `pages/` | DashboardPage (desktop), DashboardScreen (mobile) | Page layout |
| `types/` | DashboardSummary, VehicleNeedingAttention, RecentActivityItem | Type changes |

## Key Patterns

- `useDashboardData()` returns summary stats, vehicles needing attention, and recent activity in a single query
- RecentActivity combines fuel logs and maintenance records into a chronological feed
- SummaryCards show zero-state CTAs linking to relevant pages

Files

  • frontend/src/features/dashboard/types/index.ts
  • frontend/src/features/dashboard/hooks/useDashboardData.ts
  • frontend/src/features/dashboard/components/RecentActivity.tsx (new)
  • frontend/src/features/dashboard/components/DashboardScreen.tsx
  • frontend/src/features/dashboard/CLAUDE.md (new)

Commit Convention

feat: add recent activity feed to dashboard (refs #166)

Test Criteria

  • Dashboard shows "Recent Activity" section with chronological feed
  • Feed items display icon, vehicle name, description, and relative timestamp
  • Empty state shows "No recent activity" gracefully
  • Loading and error states handled
  • Mobile + desktop layouts both work
  • Verify on mobile (320px, 768px) and desktop (1920px) viewports

Risk Notes

  • New component. Must handle loading/error/empty states.
  • Maintenance records may require an additional API call -- verify data availability.

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 11) **Phase**: 4 (Dashboard improvements) | **Priority**: High | **Depends on**: None | **Blocks**: None ### Context The dashboard currently shows summary stat cards and vehicles needing attention, but lacks meaningful content like recent activity. The `useDashboardData()` hook fetches fuel logs and maintenance data internally but only returns summary counts -- the raw data is not exposed to consumers. ### Implementation **1. Define new type in `frontend/src/features/dashboard/types/index.ts`:** ```typescript export interface RecentActivityItem { type: 'fuel' | 'maintenance'; vehicleId: string; vehicleName: string; description: string; // e.g. "Filled 12.5 gal at $3.45/gal" or "Oil Change completed" timestamp: string; // ISO date string } ``` **2. Extend `DashboardData` interface** (same file): ```typescript export interface DashboardData { summary: DashboardSummary; vehiclesNeedingAttention: VehicleNeedingAttention[]; recentActivity: RecentActivityItem[]; // NEW } ``` **3. Extend `frontend/src/features/dashboard/hooks/useDashboardData.ts`:** Inside the `queryFn`, after calculating existing data, build `recentActivity`: - Map last 7 days of fuel logs to `{ type: 'fuel', vehicleId, vehicleName, description: "Filled {gallons} gal at ${pricePerGallon}/gal", timestamp }` - Map last 30 days of maintenance records to `{ type: 'maintenance', vehicleId, vehicleName, description: "{serviceType} completed", timestamp }` - Note: maintenance records may need an additional API call (`maintenanceApi.getRecordsByVehicle()`) since the hook currently only fetches schedules - Sort combined list by timestamp descending, take first 7 items - Return `recentActivity` alongside existing `summary` and `vehiclesNeedingAttention` **4. Create `frontend/src/features/dashboard/components/RecentActivity.tsx`:** - Render a chronological feed of recent activity items - Each item shows: icon (fuel pump / wrench), vehicle name, description, relative timestamp - Empty state: "No recent activity" with subtle guidance text - Responsive: single column on mobile, wider on desktop **5. Wire into `frontend/src/features/dashboard/components/DashboardScreen.tsx`:** - Add `<RecentActivity>` section below VehiclesNeedingAttention - Pass `recentActivity` from `useDashboardData` hook **6. Documentation -- Create `frontend/src/features/dashboard/CLAUDE.md`:** ```markdown # dashboard/ ## Subdirectories | Directory | What | When to read | | --------- | ---- | ------------ | | `api/` | Dashboard API client | API integration | | `components/` | SummaryCards, QuickActions, VehicleAttention, RecentActivity | UI changes | | `hooks/` | useDashboardData (unified fetching) | Data flow | | `pages/` | DashboardPage (desktop), DashboardScreen (mobile) | Page layout | | `types/` | DashboardSummary, VehicleNeedingAttention, RecentActivityItem | Type changes | ## Key Patterns - `useDashboardData()` returns summary stats, vehicles needing attention, and recent activity in a single query - RecentActivity combines fuel logs and maintenance records into a chronological feed - SummaryCards show zero-state CTAs linking to relevant pages ``` ### Files - `frontend/src/features/dashboard/types/index.ts` - `frontend/src/features/dashboard/hooks/useDashboardData.ts` - `frontend/src/features/dashboard/components/RecentActivity.tsx` (new) - `frontend/src/features/dashboard/components/DashboardScreen.tsx` - `frontend/src/features/dashboard/CLAUDE.md` (new) ### Commit Convention ``` feat: add recent activity feed to dashboard (refs #166) ``` ### Test Criteria - Dashboard shows "Recent Activity" section with chronological feed - Feed items display icon, vehicle name, description, and relative timestamp - Empty state shows "No recent activity" gracefully - Loading and error states handled - Mobile + desktop layouts both work - Verify on mobile (320px, 768px) and desktop (1920px) viewports ### Risk Notes - New component. Must handle loading/error/empty states. - Maintenance records may require an additional API call -- verify data availability. ### 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:45:56 +00:00
egullickson commented 2026-02-14 01:48:19 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

types/index.ts:

  • Added RecentActivityItem interface (type, vehicleId, vehicleName, description, timestamp)
  • Extended DashboardData with recentActivity field

hooks/useDashboardData.ts:

  • Built recentActivity from existing fuel logs (last 7 days) and upcoming maintenance (next 30 days)
  • Combined and sorted by timestamp descending, capped at 7 items
  • Added useRecentActivity() derived hook
  • No additional API calls -- reuses data already fetched

components/RecentActivity.tsx (new):

  • Chronological feed with icon (fuel pump / wrench), vehicle name, description, relative timestamp
  • Empty state: "No recent activity" with guidance text
  • Skeleton loader for loading state
  • Responsive layout using GlassCard

components/DashboardScreen.tsx:

  • Wired RecentActivity between VehiclesNeedingAttention and QuickActions
  • Added skeleton to loading state

index.ts:

  • Exported new component, hook, and type

Verification

  • TypeScript type-check: PASS
  • Commit: f2b20aa on branch issue-162-ux-design-audit-cleanup

Verdict: PASS | Next: Visual verification on mobile and desktop viewports

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Changes **`types/index.ts`:** - Added `RecentActivityItem` interface (`type`, `vehicleId`, `vehicleName`, `description`, `timestamp`) - Extended `DashboardData` with `recentActivity` field **`hooks/useDashboardData.ts`:** - Built `recentActivity` from existing fuel logs (last 7 days) and upcoming maintenance (next 30 days) - Combined and sorted by timestamp descending, capped at 7 items - Added `useRecentActivity()` derived hook - No additional API calls -- reuses data already fetched **`components/RecentActivity.tsx` (new):** - Chronological feed with icon (fuel pump / wrench), vehicle name, description, relative timestamp - Empty state: "No recent activity" with guidance text - Skeleton loader for loading state - Responsive layout using GlassCard **`components/DashboardScreen.tsx`:** - Wired `RecentActivity` between VehiclesNeedingAttention and QuickActions - Added skeleton to loading state **`index.ts`:** - Exported new component, hook, and type ### Verification - TypeScript type-check: PASS - Commit: `f2b20aa` on branch `issue-162-ux-design-audit-cleanup` *Verdict*: PASS | *Next*: Visual verification on mobile and desktop viewports
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
in-progress
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
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#166