feat: add frontend manual extraction flow with review screen (refs #136)

- Create useManualExtraction hook: submit PDF to OCR, poll job status, track progress
- Create useCreateSchedulesFromExtraction hook: batch create maintenance schedules from extraction
- Create MaintenanceScheduleReviewScreen: dialog with checkboxes, inline editing, batch create
- Update DocumentForm: remove "(Coming soon)", trigger extraction after upload, show progress
- Add 12 unit tests for review screen (rendering, selection, empty state, errors)

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

frontend/src/features/documents/components/DocumentForm.tsx

@@ -4,7 +4,7 @@ import { UpgradeRequiredDialog } from '../../../shared-minimal/components/Upgrad
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { Checkbox, FormControlLabel } from '@mui/material';
+import { Checkbox, FormControlLabel, LinearProgress } from '@mui/material';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import dayjs from 'dayjs';
 import { useCreateDocument, useUpdateDocument, useAddSharedVehicle, useRemoveVehicleFromDocument } from '../hooks/useDocuments';
@@ -13,6 +13,8 @@ import type { DocumentType, DocumentRecord } from '../types/documents.types';
 import { useVehicles } from '../../vehicles/hooks/useVehicles';
 import type { Vehicle } from '../../vehicles/types/vehicles.types';
 import { useTierAccess } from '../../../core/hooks/useTierAccess';
+import { useManualExtraction } from '../hooks/useManualExtraction';
+import { MaintenanceScheduleReviewScreen } from '../../maintenance/components/MaintenanceScheduleReviewScreen';
 
 interface DocumentFormProps {
   mode?: 'create' | 'edit';
@@ -95,6 +97,31 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
   const removeSharedVehicle = useRemoveVehicleFromDocument();
   const { hasAccess } = useTierAccess();
   const canScanMaintenance = hasAccess('document.scanMaintenanceSchedule');
+  const extraction = useManualExtraction();
+  const [reviewDialogOpen, setReviewDialogOpen] = React.useState(false);
+
+  // Open review dialog when extraction completes
+  React.useEffect(() => {
+    if (extraction.status === 'completed' && extraction.result) {
+      setReviewDialogOpen(true);
+    }
+  }, [extraction.status, extraction.result]);
+
+  const isExtracting = extraction.status === 'pending' || extraction.status === 'processing';
+
+  const handleReviewClose = () => {
+    setReviewDialogOpen(false);
+    extraction.reset();
+    resetForm();
+    onSuccess?.();
+  };
+
+  const handleSchedulesCreated = (_count: number) => {
+    setReviewDialogOpen(false);
+    extraction.reset();
+    resetForm();
+    onSuccess?.();
+  };
 
   const resetForm = () => {
     setTitle('');
@@ -234,6 +261,18 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
             setError(uploadErr?.message || 'Failed to upload file');
             return;
           }
+
+          // Trigger manual extraction if scan checkbox was checked
+          if (scanForMaintenance && documentType === 'manual' && file.type === 'application/pdf') {
+            try {
+              await extraction.submit(file, vehicleID);
+              // Don't call onSuccess yet - wait for extraction and review
+              return;
+            } catch (extractionErr: any) {
+              setError(extractionErr?.message || 'Failed to start maintenance extraction');
+              return;
+            }
+          }
         }
 
         resetForm();
@@ -538,8 +577,8 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
                 <LockOutlinedIcon fontSize="small" />
               </button>
             )}
-            {canScanMaintenance && (
+            {canScanMaintenance && scanForMaintenance && (
-              <span className="ml-1 text-xs text-slate-500 dark:text-titanio">(Coming soon)</span>
+              <span className="ml-1 text-xs text-slate-500 dark:text-titanio">PDF will be scanned after upload</span>
             )}
           </div>
         )}
@@ -569,6 +608,34 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
             <div className="text-sm text-slate-600 dark:text-titanio mt-1">Uploading... {uploadProgress}%</div>
           )}
         </div>
+
+        {isExtracting && (
+          <div className="md:col-span-2 mt-2">
+            <div className="flex items-center gap-3 p-3 rounded-lg border border-primary-200 bg-primary-50 dark:border-abudhabi/30 dark:bg-scuro">
+              <div className="flex-1">
+                <div className="text-sm font-medium text-slate-700 dark:text-avus mb-1">
+                  Scanning manual for maintenance schedules...
+                </div>
+                <LinearProgress
+                  variant={extraction.progress > 0 ? 'determinate' : 'indeterminate'}
+                  value={extraction.progress}
+                  sx={{ borderRadius: 1 }}
+                />
+                <div className="text-xs text-slate-500 dark:text-titanio mt-1">
+                  {extraction.progress > 0 ? `${extraction.progress}% complete` : 'Starting extraction...'}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {extraction.status === 'failed' && extraction.error && (
+          <div className="md:col-span-2 mt-2">
+            <div className="text-red-600 dark:text-red-400 text-sm p-3 rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20">
+              Extraction failed: {extraction.error}
+            </div>
+          </div>
+        )}
       </div>
 
       {error && (
@@ -576,10 +643,10 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
       )}
 
       <div className="flex flex-col sm:flex-row gap-2 mt-4">
-        <Button type="submit" className="min-h-[44px]">
+        <Button type="submit" className="min-h-[44px]" disabled={isExtracting}>
-          {mode === 'edit' ? 'Save Changes' : 'Create Document'}
+          {isExtracting ? 'Scanning...' : mode === 'edit' ? 'Save Changes' : 'Create Document'}
         </Button>
-        <Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]">Cancel</Button>
+        <Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]" disabled={isExtracting}>Cancel</Button>
       </div>
 
       <UpgradeRequiredDialog
@@ -587,6 +654,16 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
         open={upgradeDialogOpen}
         onClose={() => setUpgradeDialogOpen(false)}
       />
+
+      {extraction.result && (
+        <MaintenanceScheduleReviewScreen
+          open={reviewDialogOpen}
+          items={extraction.result.maintenanceSchedules}
+          vehicleId={vehicleID}
+          onClose={handleReviewClose}
+          onCreated={handleSchedulesCreated}
+        />
+      )}
     </form>
     </LocalizationProvider>
   );

frontend/src/features/documents/hooks/useManualExtraction.ts

@@ -0,0 +1,119 @@
+/**
+ * @ai-summary Hook for submitting and polling manual maintenance extraction jobs
+ * @ai-context Submits PDF to OCR endpoint, polls for status, returns extraction results
+ */
+
+import { useState, useCallback } from 'react';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { apiClient } from '../../../core/api/client';
+
+// Types matching backend ManualJobResponse / ManualExtractionResult
+export interface ManualVehicleInfo {
+  make: string | null;
+  model: string | null;
+  year: number | null;
+}
+
+export interface MaintenanceScheduleItem {
+  service: string;
+  intervalMiles: number | null;
+  intervalMonths: number | null;
+  details: string | null;
+  confidence: number;
+  subtypes: string[];
+}
+
+export interface ManualExtractionResult {
+  success: boolean;
+  vehicleInfo: ManualVehicleInfo;
+  maintenanceSchedules: MaintenanceScheduleItem[];
+  rawTables: unknown[];
+  processingTimeMs: number;
+  totalPages: number;
+  pagesProcessed: number;
+  error: string | null;
+}
+
+export type JobStatus = 'pending' | 'processing' | 'completed' | 'failed';
+
+export interface ManualJobResponse {
+  jobId: string;
+  status: JobStatus;
+  progress?: number;
+  estimatedSeconds?: number;
+  result?: ManualExtractionResult;
+  error?: string;
+}
+
+async function submitManualExtraction(file: File, vehicleId: string): Promise<ManualJobResponse> {
+  const form = new FormData();
+  form.append('file', file);
+  form.append('vehicle_id', vehicleId);
+  const res = await apiClient.post<ManualJobResponse>('/ocr/extract/manual', form, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 120000,
+  });
+  return res.data;
+}
+
+async function getJobStatus(jobId: string): Promise<ManualJobResponse> {
+  const res = await apiClient.get<ManualJobResponse>(`/ocr/jobs/${jobId}`);
+  return res.data;
+}
+
+export function useManualExtraction() {
+  const [jobId, setJobId] = useState<string | null>(null);
+
+  const submitMutation = useMutation({
+    mutationFn: ({ file, vehicleId }: { file: File; vehicleId: string }) =>
+      submitManualExtraction(file, vehicleId),
+    onSuccess: (data) => {
+      setJobId(data.jobId);
+    },
+  });
+
+  const pollQuery = useQuery<ManualJobResponse>({
+    queryKey: ['manualExtractionJob', jobId],
+    queryFn: () => getJobStatus(jobId!),
+    enabled: !!jobId,
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      if (data?.status === 'completed' || data?.status === 'failed') {
+        return false;
+      }
+      return 3000;
+    },
+    refetchIntervalInBackground: false,
+    retry: 2,
+  });
+
+  const submit = useCallback(
+    (file: File, vehicleId: string) => submitMutation.mutateAsync({ file, vehicleId }),
+    [submitMutation]
+  );
+
+  const reset = useCallback(() => {
+    setJobId(null);
+    submitMutation.reset();
+  }, [submitMutation]);
+
+  const jobData = pollQuery.data;
+  const status: JobStatus | 'idle' = !jobId
+    ? 'idle'
+    : jobData?.status ?? 'pending';
+  const progress = jobData?.progress ?? 0;
+  const result = jobData?.result ?? null;
+  const error = jobData?.error
+    ?? (submitMutation.error ? String((submitMutation.error as Error).message || submitMutation.error) : null);
+
+  return {
+    submit,
+    isSubmitting: submitMutation.isPending,
+    jobId,
+    status,
+    progress,
+    result,
+    error,
+    reset,
+  };
+}

frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.test.tsx

@@ -0,0 +1,225 @@
+/**
+ * @ai-summary Unit tests for MaintenanceScheduleReviewScreen component
+ * @ai-context Tests rendering, selection, editing, empty state, and error handling
+ */
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MaintenanceScheduleReviewScreen } from './MaintenanceScheduleReviewScreen';
+import type { MaintenanceScheduleItem } from '../../documents/hooks/useManualExtraction';
+
+// Mock the create hook
+const mockMutateAsync = jest.fn();
+jest.mock('../hooks/useCreateSchedulesFromExtraction', () => ({
+  useCreateSchedulesFromExtraction: () => ({
+    mutateAsync: mockMutateAsync,
+    isPending: false,
+  }),
+}));
+
+const sampleItems: MaintenanceScheduleItem[] = [
+  {
+    service: 'Engine Oil Change',
+    intervalMiles: 5000,
+    intervalMonths: 6,
+    details: 'Use 0W-20 full synthetic oil',
+    confidence: 0.95,
+    subtypes: ['Engine Oil'],
+  },
+  {
+    service: 'Tire Rotation',
+    intervalMiles: 5000,
+    intervalMonths: 6,
+    details: null,
+    confidence: 0.88,
+    subtypes: ['Tires'],
+  },
+  {
+    service: 'Cabin Air Filter Replacement',
+    intervalMiles: 15000,
+    intervalMonths: 12,
+    details: null,
+    confidence: 0.72,
+    subtypes: ['Cabin Air Filter / Purifier'],
+  },
+];
+
+describe('MaintenanceScheduleReviewScreen', () => {
+  const defaultProps = {
+    open: true,
+    items: sampleItems,
+    vehicleId: 'vehicle-123',
+    onClose: jest.fn(),
+    onCreated: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockMutateAsync.mockResolvedValue([]);
+  });
+
+  describe('Rendering', () => {
+    it('should render extracted items with checkboxes', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      expect(screen.getByText('Extracted Maintenance Schedules')).toBeInTheDocument();
+      expect(screen.getByText('3 of 3 items selected')).toBeInTheDocument();
+
+      // All items should be visible
+      expect(screen.getByText('Engine Oil Change')).toBeInTheDocument();
+      expect(screen.getByText('Tire Rotation')).toBeInTheDocument();
+      expect(screen.getByText('Cabin Air Filter Replacement')).toBeInTheDocument();
+
+      // All checkboxes should be checked by default
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes).toHaveLength(3);
+      checkboxes.forEach((cb) => {
+        expect(cb).toBeChecked();
+      });
+    });
+
+    it('should display interval information', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      expect(screen.getAllByText('5000 mi')).toHaveLength(2);
+      expect(screen.getAllByText('6 mo')).toHaveLength(2);
+      expect(screen.getByText('15000 mi')).toBeInTheDocument();
+      expect(screen.getByText('12 mo')).toBeInTheDocument();
+    });
+
+    it('should display details text when present', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      expect(screen.getByText('Use 0W-20 full synthetic oil')).toBeInTheDocument();
+    });
+
+    it('should display subtype chips', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      expect(screen.getByText('Engine Oil')).toBeInTheDocument();
+      expect(screen.getByText('Tires')).toBeInTheDocument();
+      expect(screen.getByText('Cabin Air Filter / Purifier')).toBeInTheDocument();
+    });
+  });
+
+  describe('Selection', () => {
+    it('should toggle item selection on checkbox click', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      const checkboxes = screen.getAllByRole('checkbox');
+
+      // Uncheck first item
+      fireEvent.click(checkboxes[0]);
+      expect(checkboxes[0]).not.toBeChecked();
+      expect(screen.getByText('2 of 3 items selected')).toBeInTheDocument();
+
+      // Re-check it
+      fireEvent.click(checkboxes[0]);
+      expect(checkboxes[0]).toBeChecked();
+      expect(screen.getByText('3 of 3 items selected')).toBeInTheDocument();
+    });
+
+    it('should deselect all items', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      fireEvent.click(screen.getByText('Deselect All'));
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      checkboxes.forEach((cb) => {
+        expect(cb).not.toBeChecked();
+      });
+      expect(screen.getByText('0 of 3 items selected')).toBeInTheDocument();
+    });
+
+    it('should select all items after deselecting', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      // Deselect all first
+      fireEvent.click(screen.getByText('Deselect All'));
+      expect(screen.getByText('0 of 3 items selected')).toBeInTheDocument();
+
+      // Select all
+      fireEvent.click(screen.getByText('Select All'));
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      checkboxes.forEach((cb) => {
+        expect(cb).toBeChecked();
+      });
+      expect(screen.getByText('3 of 3 items selected')).toBeInTheDocument();
+    });
+
+    it('should disable create button when no items selected', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      fireEvent.click(screen.getByText('Deselect All'));
+
+      const createButton = screen.getByRole('button', { name: /create/i });
+      expect(createButton).toBeDisabled();
+    });
+  });
+
+  describe('Empty state', () => {
+    it('should show no items found message for empty extraction', () => {
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} items={[]} />);
+
+      expect(screen.getByText('No maintenance items found')).toBeInTheDocument();
+      expect(screen.getByText(/did not contain any recognizable/)).toBeInTheDocument();
+
+      // Should show Close button instead of Create
+      expect(screen.getByText('Close')).toBeInTheDocument();
+      expect(screen.queryByText(/Create/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Schedule creation', () => {
+    it('should create selected schedules on button click', async () => {
+      mockMutateAsync.mockResolvedValue([{ id: '1' }, { id: '2' }, { id: '3' }]);
+
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      fireEvent.click(screen.getByRole('button', { name: /create 3 schedules/i }));
+
+      expect(mockMutateAsync).toHaveBeenCalledWith({
+        vehicleId: 'vehicle-123',
+        items: expect.arrayContaining([
+          expect.objectContaining({ service: 'Engine Oil Change', selected: true }),
+          expect.objectContaining({ service: 'Tire Rotation', selected: true }),
+          expect.objectContaining({ service: 'Cabin Air Filter Replacement', selected: true }),
+        ]),
+      });
+    });
+
+    it('should only create selected items', async () => {
+      mockMutateAsync.mockResolvedValue([{ id: '1' }]);
+
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      // Deselect last two items
+      const checkboxes = screen.getAllByRole('checkbox');
+      fireEvent.click(checkboxes[1]);
+      fireEvent.click(checkboxes[2]);
+
+      fireEvent.click(screen.getByRole('button', { name: /create 1 schedule$/i }));
+
+      expect(mockMutateAsync).toHaveBeenCalledWith({
+        vehicleId: 'vehicle-123',
+        items: expect.arrayContaining([
+          expect.objectContaining({ service: 'Engine Oil Change', selected: true }),
+        ]),
+      });
+      // Should not include unselected items
+      const callArgs = mockMutateAsync.mock.calls[0][0];
+      expect(callArgs.items).toHaveLength(1);
+    });
+
+    it('should show error on creation failure', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('Network error'));
+
+      render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
+
+      fireEvent.click(screen.getByRole('button', { name: /create 3 schedules/i }));
+
+      // Wait for error to appear (async mutation)
+      await screen.findByText('Network error');
+    });
+  });
+});

frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.tsx

@@ -0,0 +1,395 @@
+/**
+ * @ai-summary Review screen for extracted maintenance schedules from manual OCR
+ * @ai-context Dialog showing extracted items with checkboxes, inline editing, batch create
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  Typography,
+  TextField,
+  Checkbox,
+  IconButton,
+  Alert,
+  CircularProgress,
+  Chip,
+  useTheme,
+  useMediaQuery,
+} from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import SelectAllIcon from '@mui/icons-material/SelectAll';
+import DeselectIcon from '@mui/icons-material/Deselect';
+import type { MaintenanceScheduleItem } from '../../documents/hooks/useManualExtraction';
+import { useCreateSchedulesFromExtraction } from '../hooks/useCreateSchedulesFromExtraction';
+
+export interface MaintenanceScheduleReviewScreenProps {
+  open: boolean;
+  items: MaintenanceScheduleItem[];
+  vehicleId: string;
+  onClose: () => void;
+  onCreated: (count: number) => void;
+}
+
+interface EditableItem extends MaintenanceScheduleItem {
+  selected: boolean;
+}
+
+const ConfidenceIndicator: React.FC<{ confidence: number }> = ({ confidence }) => {
+  const filledDots = Math.round(confidence * 4);
+  const isLow = confidence < 0.6;
+
+  return (
+    <Box
+      sx={{ display: 'flex', gap: 0.25, ml: 1 }}
+      aria-label={`Confidence: ${Math.round(confidence * 100)}%`}
+    >
+      {[0, 1, 2, 3].map((i) => (
+        <Box
+          key={i}
+          sx={{
+            width: 6,
+            height: 6,
+            borderRadius: '50%',
+            backgroundColor: i < filledDots
+              ? (isLow ? 'warning.main' : 'success.main')
+              : 'grey.300',
+          }}
+        />
+      ))}
+    </Box>
+  );
+};
+
+interface InlineFieldProps {
+  label: string;
+  value: string | number | null;
+  type?: 'text' | 'number';
+  onSave: (value: string | number | null) => void;
+  suffix?: string;
+}
+
+const InlineField: React.FC<InlineFieldProps> = ({ label, value, type = 'text', onSave, suffix }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value !== null ? String(value) : '');
+
+  const displayValue = value !== null
+    ? (suffix ? `${value} ${suffix}` : String(value))
+    : '-';
+
+  const handleSave = () => {
+    let parsed: string | number | null = editValue || null;
+    if (type === 'number' && editValue) {
+      const num = parseFloat(editValue);
+      parsed = isNaN(num) ? null : num;
+    }
+    onSave(parsed);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditValue(value !== null ? String(value) : '');
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        <Typography variant="caption" color="text.secondary" sx={{ minWidth: 50, flexShrink: 0 }}>
+          {label}:
+        </Typography>
+        <TextField
+          size="small"
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          type={type === 'number' ? 'number' : 'text'}
+          inputProps={{ step: type === 'number' ? 1 : undefined }}
+          autoFocus
+          sx={{ flex: 1, '& .MuiInputBase-input': { py: 0.5, px: 1, fontSize: '0.875rem' } }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') handleSave();
+            if (e.key === 'Escape') handleCancel();
+          }}
+        />
+        <IconButton size="small" onClick={handleSave} color="primary">
+          <CheckIcon sx={{ fontSize: 16 }} />
+        </IconButton>
+        <IconButton size="small" onClick={handleCancel}>
+          <CloseIcon sx={{ fontSize: 16 }} />
+        </IconButton>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+        cursor: 'pointer',
+        '&:hover .edit-icon': { opacity: 1 },
+      }}
+      onClick={() => setIsEditing(true)}
+      role="button"
+      tabIndex={0}
+      aria-label={`Edit ${label}`}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setIsEditing(true);
+        }
+      }}
+    >
+      <Typography variant="caption" color="text.secondary" sx={{ minWidth: 50, flexShrink: 0 }}>
+        {label}:
+      </Typography>
+      <Typography
+        variant="body2"
+        sx={{
+          fontWeight: value !== null ? 500 : 400,
+          color: value !== null ? 'text.primary' : 'text.disabled',
+        }}
+      >
+        {displayValue}
+      </Typography>
+      <EditIcon className="edit-icon" sx={{ fontSize: 14, opacity: 0, transition: 'opacity 0.2s', color: 'text.secondary' }} />
+    </Box>
+  );
+};
+
+export const MaintenanceScheduleReviewScreen: React.FC<MaintenanceScheduleReviewScreenProps> = ({
+  open,
+  items,
+  vehicleId,
+  onClose,
+  onCreated,
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const createMutation = useCreateSchedulesFromExtraction();
+
+  const [editableItems, setEditableItems] = useState<EditableItem[]>(() =>
+    items.map((item) => ({ ...item, selected: true }))
+  );
+  const [createError, setCreateError] = useState<string | null>(null);
+
+  const selectedCount = editableItems.filter((i) => i.selected).length;
+
+  const handleToggle = useCallback((index: number) => {
+    setEditableItems((prev) =>
+      prev.map((item, i) => (i === index ? { ...item, selected: !item.selected } : item))
+    );
+  }, []);
+
+  const handleSelectAll = useCallback(() => {
+    setEditableItems((prev) => prev.map((item) => ({ ...item, selected: true })));
+  }, []);
+
+  const handleDeselectAll = useCallback(() => {
+    setEditableItems((prev) => prev.map((item) => ({ ...item, selected: false })));
+  }, []);
+
+  const handleFieldUpdate = useCallback((index: number, field: keyof MaintenanceScheduleItem, value: string | number | null) => {
+    setEditableItems((prev) =>
+      prev.map((item, i) => (i === index ? { ...item, [field]: value } : item))
+    );
+  }, []);
+
+  const handleCreate = async () => {
+    setCreateError(null);
+    const selectedItems = editableItems.filter((i) => i.selected);
+    if (selectedItems.length === 0) return;
+
+    try {
+      await createMutation.mutateAsync({ vehicleId, items: selectedItems });
+      onCreated(selectedItems.length);
+    } catch (err: any) {
+      setCreateError(err?.message || 'Failed to create maintenance schedules');
+    }
+  };
+
+  const isEmpty = items.length === 0;
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="md"
+      fullWidth
+      fullScreen={isMobile}
+      PaperProps={{
+        sx: { maxHeight: isMobile ? '100vh' : '90vh' },
+      }}
+    >
+      <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Typography variant="h6" component="span">
+          Extracted Maintenance Schedules
+        </Typography>
+        <IconButton onClick={onClose} size="small" aria-label="Close">
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent dividers>
+        {isEmpty ? (
+          <Box sx={{ textAlign: 'center', py: 6 }}>
+            <Typography variant="h6" color="text.secondary" gutterBottom>
+              No maintenance items found
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              The manual did not contain any recognizable routine maintenance schedules.
+            </Typography>
+          </Box>
+        ) : (
+          <>
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+              <Typography variant="body2" color="text.secondary">
+                {selectedCount} of {editableItems.length} items selected
+              </Typography>
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  size="small"
+                  startIcon={<SelectAllIcon />}
+                  onClick={handleSelectAll}
+                  disabled={selectedCount === editableItems.length}
+                >
+                  Select All
+                </Button>
+                <Button
+                  size="small"
+                  startIcon={<DeselectIcon />}
+                  onClick={handleDeselectAll}
+                  disabled={selectedCount === 0}
+                >
+                  Deselect All
+                </Button>
+              </Box>
+            </Box>
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              {editableItems.map((item, index) => (
+                <Box
+                  key={index}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    p: 1.5,
+                    borderRadius: 1,
+                    border: '1px solid',
+                    borderColor: item.selected ? 'primary.light' : 'divider',
+                    backgroundColor: item.selected ? 'primary.50' : 'transparent',
+                    opacity: item.selected ? 1 : 0.6,
+                    transition: 'all 0.15s ease',
+                    '&:hover': { borderColor: 'primary.main' },
+                  }}
+                >
+                  <Checkbox
+                    checked={item.selected}
+                    onChange={() => handleToggle(index)}
+                    sx={{ mt: -0.5, mr: 1 }}
+                    inputProps={{ 'aria-label': `Select ${item.service}` }}
+                  />
+                  <Box sx={{ flex: 1, minWidth: 0 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.5 }}>
+                      <InlineField
+                        label="Service"
+                        value={item.service}
+                        onSave={(v) => handleFieldUpdate(index, 'service', v)}
+                      />
+                      <ConfidenceIndicator confidence={item.confidence} />
+                    </Box>
+
+                    <Box sx={{
+                      display: 'flex',
+                      flexDirection: isMobile ? 'column' : 'row',
+                      gap: isMobile ? 0.5 : 2,
+                    }}>
+                      <InlineField
+                        label="Miles"
+                        value={item.intervalMiles}
+                        type="number"
+                        onSave={(v) => handleFieldUpdate(index, 'intervalMiles', v)}
+                        suffix="mi"
+                      />
+                      <InlineField
+                        label="Months"
+                        value={item.intervalMonths}
+                        type="number"
+                        onSave={(v) => handleFieldUpdate(index, 'intervalMonths', v)}
+                        suffix="mo"
+                      />
+                    </Box>
+
+                    {item.details && (
+                      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
+                        {item.details}
+                      </Typography>
+                    )}
+
+                    {item.subtypes.length > 0 && (
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
+                        {item.subtypes.map((subtype) => (
+                          <Chip key={subtype} label={subtype} size="small" variant="outlined" />
+                        ))}
+                      </Box>
+                    )}
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 2, textAlign: 'center' }}>
+              Tap any field to edit before creating schedules.
+            </Typography>
+          </>
+        )}
+
+        {createError && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            {createError}
+          </Alert>
+        )}
+      </DialogContent>
+
+      <DialogActions
+        sx={{
+          flexDirection: isMobile ? 'column' : 'row',
+          gap: 1,
+          p: 2,
+        }}
+      >
+        <Button
+          onClick={onClose}
+          sx={{ order: isMobile ? 2 : 1, width: isMobile ? '100%' : 'auto' }}
+        >
+          {isEmpty ? 'Close' : 'Skip'}
+        </Button>
+        {!isEmpty && (
+          <>
+            <Box sx={{ flex: 1, display: isMobile ? 'none' : 'block' }} />
+            <Button
+              variant="contained"
+              onClick={handleCreate}
+              disabled={selectedCount === 0 || createMutation.isPending}
+              startIcon={createMutation.isPending ? <CircularProgress size={16} /> : <CheckIcon />}
+              sx={{ order: isMobile ? 1 : 2, width: isMobile ? '100%' : 'auto' }}
+            >
+              {createMutation.isPending
+                ? 'Creating...'
+                : `Create ${selectedCount} Schedule${selectedCount !== 1 ? 's' : ''}`}
+            </Button>
+          </>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default MaintenanceScheduleReviewScreen;

frontend/src/features/maintenance/hooks/useCreateSchedulesFromExtraction.ts

@@ -0,0 +1,41 @@
+/**
+ * @ai-summary Hook for batch-creating maintenance schedules from manual extraction results
+ * @ai-context Maps extracted MaintenanceScheduleItem[] to CreateScheduleRequest[] and creates via API
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { maintenanceApi } from '../api/maintenance.api';
+import type { CreateScheduleRequest, MaintenanceScheduleResponse } from '../types/maintenance.types';
+import type { MaintenanceScheduleItem } from '../../documents/hooks/useManualExtraction';
+
+interface CreateSchedulesParams {
+  vehicleId: string;
+  items: MaintenanceScheduleItem[];
+}
+
+export function useCreateSchedulesFromExtraction() {
+  const queryClient = useQueryClient();
+
+  return useMutation<MaintenanceScheduleResponse[], Error, CreateSchedulesParams>({
+    mutationFn: async ({ vehicleId, items }) => {
+      const results: MaintenanceScheduleResponse[] = [];
+      for (const item of items) {
+        const request: CreateScheduleRequest = {
+          vehicleId,
+          category: 'routine_maintenance',
+          subtypes: item.subtypes.length > 0 ? item.subtypes : [],
+          scheduleType: 'interval',
+          intervalMiles: item.intervalMiles ?? undefined,
+          intervalMonths: item.intervalMonths ?? undefined,
+        };
+        const created = await maintenanceApi.createSchedule(request);
+        results.push(created);
+      }
+      return results;
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['maintenanceSchedules', variables.vehicleId] });
+      queryClient.invalidateQueries({ queryKey: ['maintenanceUpcoming', variables.vehicleId] });
+    },
+  });
+}