feat: add pending vehicle association resolution UI (refs #160)

Backend: Add authenticated endpoints for pending association CRUD
(GET/POST/DELETE /api/email-ingestion/pending). Service methods for
resolving (creates fuel/maintenance record) and dismissing associations.

Frontend: New email-ingestion feature with types, API client, hooks,
PendingAssociationBanner (dashboard), PendingAssociationList, and
ResolveAssociationDialog. Mobile-first responsive with 44px touch
targets and full-screen dialogs on small screens.

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

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

@@ -2,16 +2,19 @@
  * @ai-summary Main dashboard screen component showing fleet overview
  */
 
-import React from 'react';
-import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import { Box, Dialog, DialogTitle, DialogContent, IconButton, 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 { useDashboardSummary, useVehiclesNeedingAttention } 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';
@@ -29,6 +32,9 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
   onViewMaintenance,
   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();
 
@@ -102,6 +108,9 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
   // Main dashboard view
   return (
     <div className="space-y-6">
+      {/* Pending Receipts Banner */}
+      <PendingAssociationBanner onViewPending={() => setShowPendingReceipts(true)} />
+
       {/* Summary Cards */}
       <SummaryCards summary={summary} />
 
@@ -132,6 +141,35 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
           Dashboard updates every 2 minutes
         </p>
       </div>
+
+      {/* Pending Receipts Dialog */}
+      <Dialog
+        open={showPendingReceipts}
+        onClose={() => setShowPendingReceipts(false)}
+        fullScreen={isSmall}
+        maxWidth="sm"
+        fullWidth
+        PaperProps={{
+          sx: {
+            maxHeight: isSmall ? '100%' : '90vh',
+            m: isSmall ? 0 : 2,
+          },
+        }}
+      >
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          Pending Receipts
+          <IconButton
+            aria-label="close"
+            onClick={() => setShowPendingReceipts(false)}
+            sx={{ minWidth: 44, minHeight: 44 }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent sx={{ p: { xs: 1, sm: 2 } }}>
+          <PendingAssociationList />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };