chore: create AddReceiptDialog component (#182) #183

New Issue

2026-02-14T02:39:26Z

egullickson commented

2026-02-14 02:39:26 +00:00

Relates to #182

Summary

Create a new AddReceiptDialog component that presents two receipt input options in a full-screen dialog:

Drag-and-drop image upload (primary/default option)
Take Photo of Receipt button (secondary option, opens existing CameraCapture)

Scope

New file: frontend/src/features/maintenance/components/AddReceiptDialog.tsx
Full-screen MUI Dialog with header (title + close button)
Inline drag-and-drop zone with file validation (JPEG, PNG, HEIC; 10MB max)
"Take Photo" card/button with camera icon
Responsive: stacked layout on all viewports, 44px touch targets
Props: open, onClose, onFileSelect(file: File), onStartCamera()

Acceptance Criteria

Dialog opens full-screen on all devices
Drag-and-drop zone accepts JPEG/PNG/HEIC images up to 10MB
Click-to-browse works on the upload area
"Take Photo" button is visually distinct as secondary option
Both options shown on all devices (mobile and desktop)
44px minimum touch targets on all interactive elements
Close/cancel button in header

Relates to #182 ## Summary Create a new `AddReceiptDialog` component that presents two receipt input options in a full-screen dialog: 1. **Drag-and-drop image upload** (primary/default option) 2. **Take Photo of Receipt** button (secondary option, opens existing CameraCapture) ## Scope - New file: `frontend/src/features/maintenance/components/AddReceiptDialog.tsx` - Full-screen MUI Dialog with header (title + close button) - Inline drag-and-drop zone with file validation (JPEG, PNG, HEIC; 10MB max) - "Take Photo" card/button with camera icon - Responsive: stacked layout on all viewports, 44px touch targets - Props: `open`, `onClose`, `onFileSelect(file: File)`, `onStartCamera()` ## Acceptance Criteria - Dialog opens full-screen on all devices - Drag-and-drop zone accepts JPEG/PNG/HEIC images up to 10MB - Click-to-browse works on the upload area - "Take Photo" button is visually distinct as secondary option - Both options shown on all devices (mobile and desktop) - 44px minimum touch targets on all interactive elements - Close/cancel button in header

egullickson added the

labels 2026-02-14 02:39:45 +00:00

egullickson added this to the Sprint 2026-02-02 milestone 2026-02-14 02:39:47 +00:00

egullickson referenced this issue

2026-02-14 02:40:42 +00:00

chore: change maintenance receipt flow to upload-first with camera option (#162) #182

egullickson referenced this issue

2026-02-14 02:48:49 +00:00