egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: create AddReceiptDialog component (#182) #183

New Issue
Closed
opened 2026-02-14 02:39:26 +00:00 by egullickson · 0 comments
egullickson commented 2026-02-14 02:39:26 +00:00
Owner
Copy Link

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
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
status
in-progress
type
chore
 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
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No Label
status
in-progress
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No project
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#183
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?