feat: rewire DashboardScreen with vehicle roster layout (refs #200)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -1,47 +1,72 @@
 /**
- * @ai-summary Main dashboard screen component showing fleet overview
+ * @ai-summary Main dashboard screen showing vehicle fleet roster with health indicators
  */
 
 import React, { useState } from 'react';
-import { Box, Dialog, DialogTitle, DialogContent, IconButton, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Dialog, DialogTitle, DialogContent, IconButton, Skeleton, Typography, useMediaQuery, useTheme } from '@mui/material';
 import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
 import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import CloseIcon from '@mui/icons-material/Close';
-import { SummaryCards, SummaryCardsSkeleton } from './SummaryCards';
-import { VehicleAttention, VehicleAttentionSkeleton } from './VehicleAttention';
-import { QuickActions, QuickActionsSkeleton } from './QuickActions';
-import { RecentActivity, RecentActivitySkeleton } from './RecentActivity';
-import { useDashboardSummary, useVehiclesNeedingAttention, useRecentActivity } from '../hooks/useDashboardData';
+import { VehicleRosterCard } from './VehicleRosterCard';
+import { ActionBar } from './ActionBar';
+import { useVehicleRoster } from '../hooks/useDashboardData';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
 import { Button } from '../../../shared-minimal/components/Button';
 import { PendingAssociationBanner } from '../../email-ingestion/components/PendingAssociationBanner';
 import { PendingAssociationList } from '../../email-ingestion/components/PendingAssociationList';
-
 import { MobileScreen } from '../../../core/store';
 import { Vehicle } from '../../vehicles/types/vehicles.types';
 
 interface DashboardScreenProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- matches navigation store type signature
   onNavigate?: (screen: MobileScreen, metadata?: Record<string, any>) => void;
   onVehicleClick?: (vehicle: Vehicle) => void;
   onViewMaintenance?: () => void;
   onAddVehicle?: () => void;
 }
 
+const RosterSkeleton: React.FC = () => (
+  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    {[0, 1, 2, 3].map(i => (
+      <GlassCard key={i}>
+        <div className="flex items-center gap-3 mb-3">
+          <Skeleton variant="circular" width={48} height={48} />
+          <div className="flex-1">
+            <Skeleton variant="text" width="60%" />
+          </div>
+          <Skeleton variant="circular" width={12} height={12} />
+        </div>
+        <div className="mb-3 space-y-1">
+          <Skeleton variant="text" width="80%" />
+          <Skeleton variant="text" width="80%" />
+        </div>
+        <Skeleton variant="text" width="30%" />
+      </GlassCard>
+    ))}
+  </div>
+);
+
 export const DashboardScreen: React.FC<DashboardScreenProps> = ({
   onNavigate,
   onVehicleClick,
-  onViewMaintenance,
-  onAddVehicle
+  onAddVehicle,
 }) => {
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
   const [showPendingReceipts, setShowPendingReceipts] = useState(false);
-  const { data: summary, isLoading: summaryLoading, error: summaryError } = useDashboardSummary();
-  const { data: vehiclesNeedingAttention, isLoading: attentionLoading, error: attentionError } = useVehiclesNeedingAttention();
-  const { data: recentActivity } = useRecentActivity();
+  const { data: roster, vehicles, isLoading, error } = useVehicleRoster();
+
+  const handleAddVehicle = onAddVehicle ?? (() => onNavigate?.('Vehicles'));
+  const handleLogFuel = () => onNavigate?.('Log Fuel');
+  const handleVehicleClick = (vehicleId: string) => {
+    const vehicle = vehicles?.find(v => v.id === vehicleId);
+    if (vehicle && onVehicleClick) {
+      onVehicleClick(vehicle);
+    }
+  };
 
   // Error state
-  if (summaryError || attentionError) {
+  if (error) {
     return (
       <div className="space-y-4">
         <GlassCard>
@@ -69,19 +94,21 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
   }
 
   // Loading state
-  if (summaryLoading || attentionLoading || !summary || !vehiclesNeedingAttention) {
+  if (isLoading || !roster) {
     return (
       <div className="space-y-6">
-        <SummaryCardsSkeleton />
-        <VehicleAttentionSkeleton />
-        <RecentActivitySkeleton />
-        <QuickActionsSkeleton />
+        <div className="flex items-center justify-between">
+          <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary' }}>
+            Your Fleet
+          </Typography>
+        </div>
+        <RosterSkeleton />
       </div>
     );
   }
 
   // Empty state - no vehicles
-  if (summary.totalVehicles === 0) {
+  if (roster.length === 0) {
     return (
       <div className="space-y-6">
         <GlassCard>
@@ -98,7 +125,7 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
             <Button
               variant="primary"
               size="lg"
-              onClick={onAddVehicle ?? (() => onNavigate?.('Vehicles'))}
+              onClick={handleAddVehicle}
             >
               Add Your First Vehicle
             </Button>
@@ -114,32 +141,24 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
       {/* Pending Receipts Banner */}
       <PendingAssociationBanner onViewPending={() => setShowPendingReceipts(true)} />
 
-      {/* Summary Cards */}
-      <SummaryCards summary={summary} onNavigate={onNavigate} />
+      {/* Heading + Action Bar */}
+      <div className="flex items-center justify-between">
+        <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary' }}>
+          Your Fleet
+        </Typography>
+        <ActionBar onAddVehicle={handleAddVehicle} onLogFuel={handleLogFuel} />
+      </div>
 
-      {/* 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);
-            }
-          }}
-        />
-      )}
-
-      {/* Recent Activity */}
-      {recentActivity && <RecentActivity items={recentActivity} />}
-
-      {/* Quick Actions */}
-      <QuickActions
-        onAddVehicle={onAddVehicle ?? (() => onNavigate?.('Vehicles'))}
-        onLogFuel={() => onNavigate?.('Log Fuel')}
-        onViewMaintenance={onViewMaintenance ?? (() => onNavigate?.('Vehicles'))}
-        onViewVehicles={() => onNavigate?.('Vehicles')}
-      />
+      {/* Vehicle Roster Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {roster.map(rosterData => (
+          <VehicleRosterCard
+            key={rosterData.vehicle.id}
+            data={rosterData}
+            onClick={handleVehicleClick}
+          />
+        ))}
+      </div>
 
       {/* Pending Receipts Dialog */}
       <Dialog