From accb0533c66bd64dd81200e30d546cfb8a08eeb9 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Fri, 13 Feb 2026 19:45:14 -0600
Subject: [PATCH] feat: add call-to-action links in zero-state dashboard stats
 cards (refs #179)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../dashboard/components/DashboardScreen.tsx  |  2 +-
 .../dashboard/components/SummaryCards.tsx     | 32 +++++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/dashboard/components/DashboardScreen.tsx b/frontend/src/features/dashboard/components/DashboardScreen.tsx
index 7265978..a65ac9d 100644
--- a/frontend/src/features/dashboard/components/DashboardScreen.tsx
+++ b/frontend/src/features/dashboard/components/DashboardScreen.tsx
@@ -112,7 +112,7 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
       <PendingAssociationBanner onViewPending={() => setShowPendingReceipts(true)} />
 
       {/* Summary Cards */}
-      <SummaryCards summary={summary} />
+      <SummaryCards summary={summary} onNavigate={onNavigate} />
 
       {/* Vehicles Needing Attention */}
       {vehiclesNeedingAttention && vehiclesNeedingAttention.length > 0 && (
diff --git a/frontend/src/features/dashboard/components/SummaryCards.tsx b/frontend/src/features/dashboard/components/SummaryCards.tsx
index eaf6ec8..9b14463 100644
--- a/frontend/src/features/dashboard/components/SummaryCards.tsx
+++ b/frontend/src/features/dashboard/components/SummaryCards.tsx
@@ -9,18 +9,22 @@ import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
 import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
 import { DashboardSummary } from '../types';
+import { MobileScreen } from '../../../core/store';
 
 interface SummaryCardsProps {
   summary: DashboardSummary;
+  onNavigate?: (screen: MobileScreen) => void;
 }
 
-export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
+export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary, onNavigate }) => {
   const cards = [
     {
       title: 'Total Vehicles',
       value: summary.totalVehicles,
       icon: DirectionsCarRoundedIcon,
       color: 'primary.main',
+      ctaText: 'Add a vehicle',
+      ctaScreen: 'Vehicles' as MobileScreen,
     },
     {
       title: 'Upcoming Maintenance',
@@ -28,6 +32,8 @@ export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
       subtitle: 'Next 30 days',
       icon: BuildRoundedIcon,
       color: 'primary.main',
+      ctaText: 'Schedule maintenance',
+      ctaScreen: 'Maintenance' as MobileScreen,
     },
     {
       title: 'Recent Fuel Logs',
@@ -35,6 +41,8 @@ export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
       subtitle: 'Last 7 days',
       icon: LocalGasStationRoundedIcon,
       color: 'primary.main',
+      ctaText: 'Log your first fill-up',
+      ctaScreen: 'Log Fuel' as MobileScreen,
     },
   ];
 
@@ -74,11 +82,29 @@ export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
                 >
                   {card.value}
                 </Box>
-                {card.subtitle && (
+                {card.value === 0 && card.ctaText ? (
+                  <Box
+                    component="button"
+                    onClick={() => onNavigate?.(card.ctaScreen)}
+                    sx={{
+                      background: 'none',
+                      border: 'none',
+                      padding: 0,
+                      cursor: 'pointer',
+                      color: 'primary.main',
+                      fontSize: '0.75rem',
+                      fontWeight: 500,
+                      mt: 0.5,
+                      '&:hover': { textDecoration: 'underline' },
+                    }}
+                  >
+                    {card.ctaText}
+                  </Box>
+                ) : card.subtitle ? (
                   <p className="text-xs text-slate-400 dark:text-canna mt-1">
                     {card.subtitle}
                   </p>
-                )}
+                ) : null}
               </div>
             </div>
           </GlassCard>