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

@@ -40,7 +40,7 @@ import {
 } from '../types/maintenance.types';
 import { useMaintenanceReceiptOcr } from '../hooks/useMaintenanceReceiptOcr';
 import { MaintenanceReceiptReviewModal } from './MaintenanceReceiptReviewModal';
-import { ReceiptCameraButton } from '../../fuel-logs/components/ReceiptCameraButton';
+import { AddReceiptDialog } from './AddReceiptDialog';
 import { CameraCapture } from '../../../shared/components/CameraCapture';
 import { useTierAccess } from '../../../core/hooks/useTierAccess';
 import { UpgradeRequiredDialog } from '../../../shared-minimal/components/UpgradeRequiredDialog';
@@ -92,6 +92,9 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
     updateField,
   } = useMaintenanceReceiptOcr();
 
+  // AddReceiptDialog visibility state
+  const [showAddReceiptDialog, setShowAddReceiptDialog] = useState(false);
+
   // Store captured file for document upload on submit
   const [capturedReceiptFile, setCapturedReceiptFile] = useState<File | null>(null);
 
@@ -245,7 +248,7 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
       <Card>
         <CardHeader title="Add Maintenance Record" />
         <CardContent>
-          {/* Receipt Scan Button */}
+          {/* Add Receipt Button */}
           <Box
             sx={{
               display: 'flex',
@@ -256,18 +259,25 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
               borderColor: 'divider',
             }}
           >
-            <ReceiptCameraButton
+            <Button
+              variant="outlined"
               onClick={() => {
                 if (!hasReceiptScanAccess) {
                   setShowUpgradeDialog(true);
                   return;
                 }
-                startCapture();
+                setShowAddReceiptDialog(true);
               }}
               disabled={isProcessing || isRecordMutating}
-              variant="button"
+              sx={{
-              locked={!hasReceiptScanAccess}
+                minHeight: 44,
-            />
+                borderStyle: 'dashed',
+                borderWidth: 2,
+                '&:hover': { borderWidth: 2 },
+              }}
+            >
+              Add Receipt
+            </Button>
           </Box>
 
           <form onSubmit={handleSubmit(onSubmit)}>
@@ -507,6 +517,20 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
         </CardContent>
       </Card>
 
+      {/* Add Receipt Dialog */}
+      <AddReceiptDialog
+        open={showAddReceiptDialog}
+        onClose={() => setShowAddReceiptDialog(false)}
+        onFileSelect={(file) => {
+          setShowAddReceiptDialog(false);
+          handleCaptureImage(file);
+        }}
+        onStartCamera={() => {
+          setShowAddReceiptDialog(false);
+          startCapture();
+        }}
+      />
+
       {/* Camera Capture Modal */}
       <Dialog
         open={isCapturing}