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

chore: add call-to-action links in zero-state stats cards (#162) #179

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

Relates to #162

Severity: Minor

Problem

"Upcoming Maintenance: 0" and "Recent Fuel Logs: 0" are dead-end cards. They don't invite the user to take action.

Recommendation

Add a subtle link like "Schedule maintenance" or "Log your first fill-up" within the zero-state card.

Acceptance Criteria

  • Zero-state stats cards include a call-to-action link
  • Links navigate to the appropriate page/action (e.g. maintenance scheduling, fuel log creation)
  • Non-zero states continue to display normally without CTA links
  • Tested on mobile (320px, 768px) and desktop (1920px)
Relates to #162 ## Severity: Minor ## Problem "Upcoming Maintenance: 0" and "Recent Fuel Logs: 0" are dead-end cards. They don't invite the user to take action. ## Recommendation Add a subtle link like "Schedule maintenance" or "Log your first fill-up" within the zero-state card. ## Acceptance Criteria - Zero-state stats cards include a call-to-action link - Links navigate to the appropriate page/action (e.g. maintenance scheduling, fuel log creation) - Non-zero states continue to display normally without CTA links - Tested on mobile (320px, 768px) and desktop (1920px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:25:50 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:26:05 +00:00
egullickson commented 2026-02-14 01:15:48 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 10)

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

Context

When dashboard stats cards show zero values, there is no guidance for new users on what to do next. Adding call-to-action links provides an onboarding path.

Implementation

1. Update frontend/src/features/dashboard/components/SummaryCards.tsx:

Add an optional navigation callback prop:

interface SummaryCardsProps {
  summary: DashboardSummary;
  onNavigate?: (path: string) => void;  // NEW: mobile navigation callback
}

2. Card-to-route mapping (when value is 0):

Card CTA Text Desktop Route Mobile Screen
"Total Vehicles" (0) "Add a vehicle" /garage/vehicles Vehicles
"Upcoming Maintenance" (0) "Schedule maintenance" /garage/maintenance Maintenance
"Recent Fuel Logs" (0) "Log your first fill-up" /garage/fuel-logs Log Fuel

3. Rendering logic:

  • When card value is 0, show a subtle link below the count
  • Non-zero values render normally without links
  • Desktop: Use React Router <Link> component
  • Mobile: Call onNavigate(screen) prop

4. Parent wiring in DashboardScreen.tsx:

  • Pass onNavigate prop to SummaryCards in mobile mode, mapping screen names to Zustand navigateToScreen() calls
  • Desktop mode: omit the prop (uses React Router links)

Files

  • frontend/src/features/dashboard/components/SummaryCards.tsx
  • frontend/src/features/dashboard/components/DashboardScreen.tsx (pass onNavigate prop)

Commit Convention

feat: add call-to-action links in zero-state dashboard stats cards (refs #179)

Test Criteria

  • Zero-state cards show CTA links with appropriate text
  • Non-zero cards display normally without links
  • Desktop: CTA links navigate via React Router
  • Mobile: CTA links navigate via Zustand screen change
  • Links are subtle (not overwhelming the card design)
  • Verify on mobile (320px, 768px) and desktop (1920px) viewports

Branch

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

## Implementation Plan (from #162 -- Milestone 10) **Phase**: 4 (Dashboard improvements) | **Priority**: Minor | **Depends on**: None | **Blocks**: None ### Context When dashboard stats cards show zero values, there is no guidance for new users on what to do next. Adding call-to-action links provides an onboarding path. ### Implementation **1. Update `frontend/src/features/dashboard/components/SummaryCards.tsx`:** Add an optional navigation callback prop: ```typescript interface SummaryCardsProps { summary: DashboardSummary; onNavigate?: (path: string) => void; // NEW: mobile navigation callback } ``` **2. Card-to-route mapping (when value is 0):** | Card | CTA Text | Desktop Route | Mobile Screen | |------|----------|---------------|---------------| | "Total Vehicles" (0) | "Add a vehicle" | `/garage/vehicles` | `Vehicles` | | "Upcoming Maintenance" (0) | "Schedule maintenance" | `/garage/maintenance` | `Maintenance` | | "Recent Fuel Logs" (0) | "Log your first fill-up" | `/garage/fuel-logs` | `Log Fuel` | **3. Rendering logic:** - When card value is 0, show a subtle link below the count - Non-zero values render normally without links - Desktop: Use React Router `<Link>` component - Mobile: Call `onNavigate(screen)` prop **4. Parent wiring in `DashboardScreen.tsx`:** - Pass `onNavigate` prop to `SummaryCards` in mobile mode, mapping screen names to Zustand `navigateToScreen()` calls - Desktop mode: omit the prop (uses React Router links) ### Files - `frontend/src/features/dashboard/components/SummaryCards.tsx` - `frontend/src/features/dashboard/components/DashboardScreen.tsx` (pass onNavigate prop) ### Commit Convention ``` feat: add call-to-action links in zero-state dashboard stats cards (refs #179) ``` ### Test Criteria - Zero-state cards show CTA links with appropriate text - Non-zero cards display normally without links - Desktop: CTA links navigate via React Router - Mobile: CTA links navigate via Zustand screen change - Links are subtle (not overwhelming the card design) - Verify on mobile (320px, 768px) and desktop (1920px) viewports ### 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:44:26 +00:00
egullickson commented 2026-02-14 01:45:24 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

SummaryCards.tsx:

  • Added onNavigate optional prop for screen navigation
  • Added ctaText and ctaScreen fields to each card config
  • When card value is 0, renders a subtle CTA link instead of the subtitle
  • Non-zero cards display normally with their subtitle
Card CTA Text Navigates To
Total Vehicles (0) "Add a vehicle" Vehicles
Upcoming Maintenance (0) "Schedule maintenance" Maintenance
Recent Fuel Logs (0) "Log your first fill-up" Log Fuel

DashboardScreen.tsx:

  • Passed onNavigate prop through to SummaryCards

Verification

  • TypeScript type-check: PASS
  • onNavigate is optional so existing usages are unaffected
  • Commit: accb053 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 **`SummaryCards.tsx`:** - Added `onNavigate` optional prop for screen navigation - Added `ctaText` and `ctaScreen` fields to each card config - When card value is 0, renders a subtle CTA link instead of the subtitle - Non-zero cards display normally with their subtitle | Card | CTA Text | Navigates To | |------|----------|-------------| | Total Vehicles (0) | "Add a vehicle" | Vehicles | | Upcoming Maintenance (0) | "Schedule maintenance" | Maintenance | | Recent Fuel Logs (0) | "Log your first fill-up" | Log Fuel | **`DashboardScreen.tsx`:** - Passed `onNavigate` prop through to `SummaryCards` ### Verification - TypeScript type-check: PASS - `onNavigate` is optional so existing usages are unaffected - Commit: `accb053` 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#179