frontend/src/App.tsx

@@ -78,18 +78,7 @@ import { useDataSync } from './core/hooks/useDataSync';
 import { MobileDebugPanel } from './core/debug/MobileDebugPanel';
 import { MobileErrorBoundary } from './core/error-boundaries/MobileErrorBoundary';
 import { useLoginNotifications } from './features/notifications/hooks/useLoginNotifications';
-
-// Hoisted mobile screen components to stabilize identity and prevent remounts
-const DashboardScreen: React.FC = () => (
-  <div className="space-y-4">
-    <GlassCard>
-      <div className="text-center py-12">
-        <h2 className="text-lg font-semibold text-slate-800 mb-2">Dashboard</h2>
-        <p className="text-slate-500">Coming soon - Vehicle insights and analytics</p>
-      </div>
-    </GlassCard>
-  </div>
-);
+import { DashboardScreen as DashboardFeature } from './features/dashboard';
 
 const LogFuelScreen: React.FC = () => {
   const queryClient = useQueryClient();
@@ -640,7 +629,10 @@ function App() {
                 transition={{ duration: 0.2, ease: "easeOut" }}
               >
                 <MobileErrorBoundary screenName="Dashboard">
-                  <DashboardScreen />
+                  <DashboardFeature
+                    onNavigate={navigateToScreen}
+                    onVehicleClick={handleVehicleSelect}
+                  />
                 </MobileErrorBoundary>
               </motion.div>
             )}

frontend/src/features/dashboard/components/DashboardScreen.tsx

@@ -0,0 +1,125 @@
+/**
+ * @ai-summary Main dashboard screen component showing fleet overview
+ */
+
+import React from 'react';
+import { SummaryCards, SummaryCardsSkeleton } from './SummaryCards';
+import { VehicleAttention, VehicleAttentionSkeleton } from './VehicleAttention';
+import { QuickActions, QuickActionsSkeleton } from './QuickActions';
+import { useDashboardSummary, useVehiclesNeedingAttention } from '../hooks/useDashboardData';
+import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
+
+import { MobileScreen } from '../../../core/store';
+import { Vehicle } from '../../vehicles/types/vehicles.types';
+
+interface DashboardScreenProps {
+  onNavigate?: (screen: MobileScreen, metadata?: Record<string, any>) => void;
+  onVehicleClick?: (vehicle: Vehicle) => void;
+}
+
+export const DashboardScreen: React.FC<DashboardScreenProps> = ({
+  onNavigate,
+  onVehicleClick
+}) => {
+  const { data: summary, isLoading: summaryLoading, error: summaryError } = useDashboardSummary();
+  const { data: vehiclesNeedingAttention, isLoading: attentionLoading, error: attentionError } = useVehiclesNeedingAttention();
+
+  // Error state
+  if (summaryError || attentionError) {
+    return (
+      <div className="space-y-4">
+        <GlassCard>
+          <div className="text-center py-12">
+            <div className="text-4xl mb-3">⚠️</div>
+            <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">
+              Unable to Load Dashboard
+            </h2>
+            <p className="text-slate-500 dark:text-slate-400 mb-4">
+              There was an error loading your dashboard data
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              style={{ minHeight: '44px' }} // Touch target size
+            >
+              Retry
+            </button>
+          </div>
+        </GlassCard>
+      </div>
+    );
+  }
+
+  // Loading state
+  if (summaryLoading || attentionLoading || !summary || !vehiclesNeedingAttention) {
+    return (
+      <div className="space-y-6">
+        <SummaryCardsSkeleton />
+        <VehicleAttentionSkeleton />
+        <QuickActionsSkeleton />
+      </div>
+    );
+  }
+
+  // Empty state - no vehicles
+  if (summary.totalVehicles === 0) {
+    return (
+      <div className="space-y-6">
+        <GlassCard>
+          <div className="text-center py-12">
+            <div className="text-6xl mb-4">🚗</div>
+            <h2 className="text-xl font-semibold text-slate-800 dark:text-slate-200 mb-3">
+              Welcome to MotoVaultPro
+            </h2>
+            <p className="text-slate-500 dark:text-slate-400 mb-6 max-w-md mx-auto">
+              Get started by adding your first vehicle to track fuel logs, maintenance, and more
+            </p>
+            <button
+              onClick={() => onNavigate?.('Vehicles')}
+              className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+              style={{ minHeight: '44px' }} // Touch target size
+            >
+              Add Your First Vehicle
+            </button>
+          </div>
+        </GlassCard>
+      </div>
+    );
+  }
+
+  // Main dashboard view
+  return (
+    <div className="space-y-6">
+      {/* Summary Cards */}
+      <SummaryCards summary={summary} />
+
+      {/* Vehicles Needing Attention */}
+      {vehiclesNeedingAttention && vehiclesNeedingAttention.length > 0 && (
+        <VehicleAttention
+          vehicles={vehiclesNeedingAttention}
+          onVehicleClick={(vehicleId) => {
+            const vehicle = vehiclesNeedingAttention.find(v => v.id === vehicleId);
+            if (vehicle && onVehicleClick) {
+              onVehicleClick(vehicle);
+            }
+          }}
+        />
+      )}
+
+      {/* Quick Actions */}
+      <QuickActions
+        onAddVehicle={() => onNavigate?.('Vehicles')}
+        onLogFuel={() => onNavigate?.('Log Fuel')}
+        onViewMaintenance={() => onNavigate?.('Vehicles')} // Navigate to vehicles then maintenance
+        onViewVehicles={() => onNavigate?.('Vehicles')}
+      />
+
+      {/* Footer Hint */}
+      <div className="text-center py-4">
+        <p className="text-xs text-slate-400 dark:text-slate-500">
+          Dashboard updates every 2 minutes
+        </p>
+      </div>
+    </div>
+  );
+};

frontend/src/features/dashboard/components/QuickActions.tsx

@@ -0,0 +1,126 @@
+/**
+ * @ai-summary Quick action buttons for common tasks
+ */
+
+import React from 'react';
+import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
+
+interface QuickAction {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  color: string;
+  bgColor: string;
+  onClick: () => void;
+}
+
+interface QuickActionsProps {
+  onAddVehicle: () => void;
+  onLogFuel: () => void;
+  onViewMaintenance: () => void;
+  onViewVehicles: () => void;
+}
+
+export const QuickActions: React.FC<QuickActionsProps> = ({
+  onAddVehicle,
+  onLogFuel,
+  onViewMaintenance,
+  onViewVehicles,
+}) => {
+  const actions: QuickAction[] = [
+    {
+      id: 'add-vehicle',
+      title: 'Add Vehicle',
+      description: 'Register a new vehicle',
+      icon: '🚗',
+      color: 'text-blue-600',
+      bgColor: 'bg-blue-50',
+      onClick: onAddVehicle,
+    },
+    {
+      id: 'log-fuel',
+      title: 'Log Fuel',
+      description: 'Record a fuel purchase',
+      icon: '⛽',
+      color: 'text-green-600',
+      bgColor: 'bg-green-50',
+      onClick: onLogFuel,
+    },
+    {
+      id: 'view-maintenance',
+      title: 'Maintenance',
+      description: 'View maintenance records',
+      icon: '🔧',
+      color: 'text-orange-600',
+      bgColor: 'bg-orange-50',
+      onClick: onViewMaintenance,
+    },
+    {
+      id: 'view-vehicles',
+      title: 'My Vehicles',
+      description: 'View all vehicles',
+      icon: '📋',
+      color: 'text-purple-600',
+      bgColor: 'bg-purple-50',
+      onClick: onViewVehicles,
+    },
+  ];
+
+  return (
+    <GlassCard padding="md">
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
+          Quick Actions
+        </h3>
+        <p className="text-sm text-slate-500 dark:text-slate-400">
+          Common tasks and navigation
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {actions.map((action) => (
+          <button
+            key={action.id}
+            onClick={action.onClick}
+            className={`p-4 rounded-2xl ${action.bgColor} dark:bg-opacity-10 border border-transparent hover:border-slate-200 dark:hover:border-slate-700 hover:shadow-md transition-all duration-200 text-left min-h-[100px] sm:min-h-[120px] flex flex-col`}
+            style={{ minHeight: '44px' }} // Ensure touch target size
+          >
+            <div className="text-3xl mb-2">{action.icon}</div>
+            <div className="flex-1">
+              <h4 className={`font-semibold ${action.color} dark:opacity-90 text-sm mb-1`}>
+                {action.title}
+              </h4>
+              <p className="text-xs text-slate-500 dark:text-slate-400 hidden sm:block">
+                {action.description}
+              </p>
+            </div>
+          </button>
+        ))}
+      </div>
+    </GlassCard>
+  );
+};
+
+export const QuickActionsSkeleton: React.FC = () => {
+  return (
+    <GlassCard padding="md">
+      <div className="mb-4">
+        <div className="h-6 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-32 mb-2" />
+        <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-48" />
+      </div>
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {[1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800 min-h-[100px] sm:min-h-[120px]"
+          >
+            <div className="w-8 h-8 bg-slate-100 dark:bg-slate-700 rounded animate-pulse mb-2" />
+            <div className="h-4 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-20 mb-2" />
+            <div className="h-3 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-full hidden sm:block" />
+          </div>
+        ))}
+      </div>
+    </GlassCard>
+  );
+};

frontend/src/features/dashboard/components/SummaryCards.tsx

@@ -0,0 +1,85 @@
+/**
+ * @ai-summary Summary cards showing key dashboard metrics
+ */
+
+import React from 'react';
+import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
+import { DashboardSummary } from '../types';
+
+interface SummaryCardsProps {
+  summary: DashboardSummary;
+}
+
+export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
+  const cards = [
+    {
+      title: 'Total Vehicles',
+      value: summary.totalVehicles,
+      icon: '🚗',
+      color: 'text-blue-600',
+      bgColor: 'bg-blue-50',
+    },
+    {
+      title: 'Upcoming Maintenance',
+      value: summary.upcomingMaintenanceCount,
+      subtitle: 'Next 30 days',
+      icon: '🔧',
+      color: 'text-orange-600',
+      bgColor: 'bg-orange-50',
+    },
+    {
+      title: 'Recent Fuel Logs',
+      value: summary.recentFuelLogsCount,
+      subtitle: 'Last 7 days',
+      icon: '⛽',
+      color: 'text-green-600',
+      bgColor: 'bg-green-50',
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      {cards.map((card) => (
+        <GlassCard key={card.title} padding="md">
+          <div className="flex items-start gap-3">
+            <div className={`flex-shrink-0 w-12 h-12 rounded-2xl ${card.bgColor} flex items-center justify-center text-2xl`}>
+              {card.icon}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-slate-500 dark:text-slate-400 font-medium mb-1">
+                {card.title}
+              </p>
+              <p className={`text-3xl font-bold ${card.color} dark:opacity-90`}>
+                {card.value}
+              </p>
+              {card.subtitle && (
+                <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
+                  {card.subtitle}
+                </p>
+              )}
+            </div>
+          </div>
+        </GlassCard>
+      ))}
+    </div>
+  );
+};
+
+export const SummaryCardsSkeleton: React.FC = () => {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      {[1, 2, 3].map((i) => (
+        <GlassCard key={i} padding="md">
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 animate-pulse" />
+            <div className="flex-1 min-w-0 space-y-2">
+              <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-24" />
+              <div className="h-8 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-16" />
+              <div className="h-3 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-20" />
+            </div>
+          </div>
+        </GlassCard>
+      ))}
+    </div>
+  );
+};

frontend/src/features/dashboard/components/VehicleAttention.tsx

@@ -0,0 +1,131 @@
+/**
+ * @ai-summary List of vehicles needing attention (overdue maintenance)
+ */
+
+import React from 'react';
+import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
+import { VehicleNeedingAttention } from '../types';
+
+interface VehicleAttentionProps {
+  vehicles: VehicleNeedingAttention[];
+  onVehicleClick?: (vehicleId: string) => void;
+}
+
+export const VehicleAttention: React.FC<VehicleAttentionProps> = ({ vehicles, onVehicleClick }) => {
+  if (vehicles.length === 0) {
+    return (
+      <GlassCard padding="md">
+        <div className="text-center py-8">
+          <div className="text-4xl mb-3">✅</div>
+          <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">
+            All Caught Up!
+          </h3>
+          <p className="text-sm text-slate-500 dark:text-slate-400">
+            No vehicles need immediate attention
+          </p>
+        </div>
+      </GlassCard>
+    );
+  }
+
+  const priorityConfig = {
+    high: {
+      color: 'text-red-600',
+      bgColor: 'bg-red-50',
+      borderColor: 'border-red-200',
+      icon: '🚨',
+    },
+    medium: {
+      color: 'text-orange-600',
+      bgColor: 'bg-orange-50',
+      borderColor: 'border-orange-200',
+      icon: '⚠️',
+    },
+    low: {
+      color: 'text-yellow-600',
+      bgColor: 'bg-yellow-50',
+      borderColor: 'border-yellow-200',
+      icon: '⏰',
+    },
+  };
+
+  return (
+    <GlassCard padding="md">
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
+          Needs Attention
+        </h3>
+        <p className="text-sm text-slate-500 dark:text-slate-400">
+          Vehicles with overdue maintenance
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        {vehicles.map((vehicle) => {
+          const config = priorityConfig[vehicle.priority];
+          return (
+            <div
+              key={vehicle.id}
+              className={`p-4 rounded-2xl border ${config.borderColor} ${config.bgColor} dark:bg-opacity-10 ${
+                onVehicleClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''
+              }`}
+              onClick={() => onVehicleClick?.(vehicle.id)}
+              role={onVehicleClick ? 'button' : undefined}
+              tabIndex={onVehicleClick ? 0 : undefined}
+              onKeyDown={(e) => {
+                if (onVehicleClick && (e.key === 'Enter' || e.key === ' ')) {
+                  e.preventDefault();
+                  onVehicleClick(vehicle.id);
+                }
+              }}
+            >
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0 text-2xl">
+                  {config.icon}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h4 className={`font-semibold ${config.color} dark:opacity-90 text-base mb-1`}>
+                    {vehicle.nickname || `${vehicle.year} ${vehicle.make} ${vehicle.model}`}
+                  </h4>
+                  <p className="text-sm text-slate-600 dark:text-slate-400">
+                    {vehicle.reason}
+                  </p>
+                  <div className="flex items-center gap-2 mt-2">
+                    <span className={`text-xs font-medium px-2 py-1 rounded-full ${config.bgColor} ${config.color} dark:bg-opacity-20`}>
+                      {vehicle.priority.toUpperCase()} PRIORITY
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </GlassCard>
+  );
+};
+
+export const VehicleAttentionSkeleton: React.FC = () => {
+  return (
+    <GlassCard padding="md">
+      <div className="mb-4">
+        <div className="h-6 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-32 mb-2" />
+        <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-48" />
+      </div>
+      <div className="space-y-3">
+        {[1, 2].map((i) => (
+          <div key={i} className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800">
+            <div className="flex items-start gap-3">
+              <div className="flex-shrink-0 w-6 h-6 bg-slate-100 dark:bg-slate-700 rounded animate-pulse" />
+              <div className="flex-1 space-y-2">
+                <div className="h-5 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-3/4" />
+                <div className="h-4 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-1/2" />
+                <div className="h-6 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-24 mt-2" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </GlassCard>
+  );
+};

frontend/src/features/dashboard/hooks/useDashboardData.ts

@@ -0,0 +1,141 @@
+/**
+ * @ai-summary React Query hooks for dashboard data
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { useAuth0 } from '@auth0/auth0-react';
+import { vehiclesApi } from '../../vehicles/api/vehicles.api';
+import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
+import { maintenanceApi } from '../../maintenance/api/maintenance.api';
+import { DashboardSummary, VehicleNeedingAttention } from '../types';
+
+/**
+ * Hook to fetch dashboard summary stats
+ */
+export const useDashboardSummary = () => {
+  const { isAuthenticated, isLoading: authLoading } = useAuth0();
+
+  return useQuery({
+    queryKey: ['dashboard', 'summary'],
+    queryFn: async (): Promise<DashboardSummary> => {
+      // Fetch all required data in parallel
+      const [vehicles, fuelLogs] = await Promise.all([
+        vehiclesApi.getAll(),
+        fuelLogsApi.getUserFuelLogs(),
+      ]);
+
+      // Fetch schedules for all vehicles to count upcoming maintenance
+      const allSchedules = await Promise.all(
+        vehicles.map(v => maintenanceApi.getSchedulesByVehicle(v.id))
+      );
+      const flatSchedules = allSchedules.flat();
+
+      // Calculate upcoming maintenance (next 30 days)
+      const thirtyDaysFromNow = new Date();
+      thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
+
+      const upcomingMaintenance = flatSchedules.filter(schedule => {
+        // Count schedules as upcoming if they have a next due date within 30 days
+        if (!schedule.nextDueDate) return false;
+        const dueDate = new Date(schedule.nextDueDate);
+        return dueDate >= new Date() && dueDate <= thirtyDaysFromNow;
+      });
+
+      // Calculate recent fuel logs (last 7 days)
+      const sevenDaysAgo = new Date();
+      sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+
+      const recentFuelLogs = fuelLogs.filter(log => {
+        const logDate = new Date(log.dateTime);
+        return logDate >= sevenDaysAgo;
+      });
+
+      return {
+        totalVehicles: vehicles.length,
+        upcomingMaintenanceCount: upcomingMaintenance.length,
+        recentFuelLogsCount: recentFuelLogs.length,
+      };
+    },
+    enabled: isAuthenticated && !authLoading,
+    staleTime: 2 * 60 * 1000, // 2 minutes - fresher than other queries for dashboard
+    gcTime: 5 * 60 * 1000, // 5 minutes cache time
+    retry: (failureCount, error: any) => {
+      // Retry 401 errors up to 3 times for mobile auth timing issues
+      if (error?.response?.status === 401 && failureCount < 3) {
+        console.log(`[Mobile Auth] Dashboard retry ${failureCount + 1}/3 for 401 error`);
+        return true;
+      }
+      return false;
+    },
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+  });
+};
+
+/**
+ * Hook to fetch vehicles needing attention (overdue maintenance)
+ */
+export const useVehiclesNeedingAttention = () => {
+  const { isAuthenticated, isLoading: authLoading } = useAuth0();
+
+  return useQuery({
+    queryKey: ['dashboard', 'vehiclesNeedingAttention'],
+    queryFn: async (): Promise<VehicleNeedingAttention[]> => {
+      // Fetch vehicles
+      const vehicles = await vehiclesApi.getAll();
+
+      const vehiclesNeedingAttention: VehicleNeedingAttention[] = [];
+      const now = new Date();
+
+      // Check each vehicle for overdue maintenance
+      for (const vehicle of vehicles) {
+        const schedules = await maintenanceApi.getSchedulesByVehicle(vehicle.id);
+
+        // Find overdue schedules
+        const overdueSchedules = schedules.filter(schedule => {
+          if (!schedule.nextDueDate) return false;
+          const dueDate = new Date(schedule.nextDueDate);
+          return dueDate < now;
+        });
+
+        if (overdueSchedules.length > 0) {
+          // Calculate priority based on how overdue the maintenance is
+          const mostOverdue = overdueSchedules.reduce((oldest, current) => {
+            const oldestDate = new Date(oldest.nextDueDate!);
+            const currentDate = new Date(current.nextDueDate!);
+            return currentDate < oldestDate ? current : oldest;
+          });
+
+          const daysOverdue = Math.floor((now.getTime() - new Date(mostOverdue.nextDueDate!).getTime()) / (1000 * 60 * 60 * 24));
+
+          let priority: 'high' | 'medium' | 'low' = 'low';
+          if (daysOverdue > 30) {
+            priority = 'high';
+          } else if (daysOverdue > 14) {
+            priority = 'medium';
+          }
+
+          vehiclesNeedingAttention.push({
+            ...vehicle,
+            reason: `${overdueSchedules.length} overdue maintenance ${overdueSchedules.length === 1 ? 'item' : 'items'}`,
+            priority,
+          });
+        }
+      }
+
+      // Sort by priority (high -> medium -> low)
+      const priorityOrder = { high: 0, medium: 1, low: 2 };
+      return vehiclesNeedingAttention.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
+    },
+    enabled: isAuthenticated && !authLoading,
+    staleTime: 2 * 60 * 1000, // 2 minutes
+    gcTime: 5 * 60 * 1000, // 5 minutes cache time
+    retry: (failureCount, error: any) => {
+      if (error?.response?.status === 401 && failureCount < 3) {
+        console.log(`[Mobile Auth] Vehicles attention retry ${failureCount + 1}/3 for 401 error`);
+        return true;
+      }
+      return false;
+    },
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+  });
+};

frontend/src/features/dashboard/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @ai-summary Dashboard feature public exports
+ */
+
+export { DashboardScreen } from './components/DashboardScreen';
+export { SummaryCards, SummaryCardsSkeleton } from './components/SummaryCards';
+export { VehicleAttention, VehicleAttentionSkeleton } from './components/VehicleAttention';
+export { QuickActions, QuickActionsSkeleton } from './components/QuickActions';
+export { useDashboardSummary, useVehiclesNeedingAttention } from './hooks/useDashboardData';
+export type { DashboardSummary, VehicleNeedingAttention, DashboardData } from './types';

frontend/src/features/dashboard/types/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @ai-summary Dashboard feature types
+ */
+
+import { Vehicle } from '../../vehicles/types/vehicles.types';
+
+export interface DashboardSummary {
+  totalVehicles: number;
+  upcomingMaintenanceCount: number;
+  recentFuelLogsCount: number;
+}
+
+export interface VehicleNeedingAttention extends Vehicle {
+  reason: string;
+  priority: 'high' | 'medium' | 'low';
+}
+
+export interface DashboardData {
+  summary: DashboardSummary;
+  vehiclesNeedingAttention: VehicleNeedingAttention[];
+}