From 812823f2f1dece22c2aec21eb0863020fa3a61d7 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Fri, 13 Feb 2026 20:57:37 -0600
Subject: [PATCH] chore: integrate AddReceiptDialog into MaintenanceRecordForm
 (refs #184)

Replace ReceiptCameraButton with "Add Receipt" button that opens
AddReceiptDialog. Upload path feeds handleCaptureImage, camera path
calls startCapture. Tier gating preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/MaintenanceRecordForm.tsx      | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx b/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
index f1baa68..f20aae7 100644
--- a/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
+++ b/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"
-              locked={!hasReceiptScanAccess}
-            />
+              sx={{
+                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}