chore: integrate AddReceiptDialog into MaintenanceRecordForm (refs #184)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m31s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 22s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped

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>
This commit is contained in:
Eric Gullickson
2026-02-13 20:57:37 -06:00
parent 6751766b0a
commit 812823f2f1

View File

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