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

feat: Receipt Capture Integration (#70) #78

Merged
egullickson merged 1 commits from issue-70-receipt-capture-integration into main 2026-02-02 03:10:28 +00:00
Conversation 0 Commits 1 Files Changed 5
+1127 -1
egullickson commented 2026-02-02 03:02:09 +00:00
Owner
Copy Link
Copy Source

Summary

  • Integrate camera capture and receipt OCR into FuelLogForm
  • Add review modal to preview and edit extracted fields before accepting
  • Include confidence indicators to highlight low-confidence OCR results
  • Support full user flow: Camera -> Capture -> OCR -> Review -> Form Population

Changes

New Components

  • useReceiptOcr.ts - Hook to orchestrate receipt OCR extraction
  • ReceiptCameraButton.tsx - Button component to trigger capture
  • ReceiptOcrReviewModal.tsx - Modal for reviewing/editing extracted fields
  • ReceiptPreview.tsx - Receipt thumbnail with zoom capability

Modified

  • FuelLogForm.tsx - Integrated receipt capture flow

User Flow

  1. User clicks "Scan Receipt" button in fuel log form
  2. CameraCapture opens with receipt guidance overlay (~2:3 aspect ratio)
  3. User captures photo, optionally crops
  4. Loading overlay: "Extracting receipt data..."
  5. Review modal shows extracted fields with confidence indicators
  6. User can edit any field before accepting
  7. Accepted values populate form, total auto-calculates

Test Plan

  • Camera button visible on mobile and desktop
  • Camera opens with receipt guidance overlay
  • OCR extraction processes captured image
  • Review modal displays all extracted fields
  • Confidence indicators show for each field
  • Low-confidence fields highlighted with warning color
  • User can edit fields inline
  • Accept populates form correctly
  • Retake photo restarts capture flow
  • Cancel closes review modal
  • Error dialog shows on OCR failure
  • Form validation works after OCR population

Closes #70

Generated with Claude Code

## Summary - Integrate camera capture and receipt OCR into FuelLogForm - Add review modal to preview and edit extracted fields before accepting - Include confidence indicators to highlight low-confidence OCR results - Support full user flow: Camera -> Capture -> OCR -> Review -> Form Population ## Changes ### New Components - `useReceiptOcr.ts` - Hook to orchestrate receipt OCR extraction - `ReceiptCameraButton.tsx` - Button component to trigger capture - `ReceiptOcrReviewModal.tsx` - Modal for reviewing/editing extracted fields - `ReceiptPreview.tsx` - Receipt thumbnail with zoom capability ### Modified - `FuelLogForm.tsx` - Integrated receipt capture flow ## User Flow 1. User clicks "Scan Receipt" button in fuel log form 2. CameraCapture opens with receipt guidance overlay (~2:3 aspect ratio) 3. User captures photo, optionally crops 4. Loading overlay: "Extracting receipt data..." 5. Review modal shows extracted fields with confidence indicators 6. User can edit any field before accepting 7. Accepted values populate form, total auto-calculates ## Test Plan - [ ] Camera button visible on mobile and desktop - [ ] Camera opens with receipt guidance overlay - [ ] OCR extraction processes captured image - [ ] Review modal displays all extracted fields - [ ] Confidence indicators show for each field - [ ] Low-confidence fields highlighted with warning color - [ ] User can edit fields inline - [ ] Accept populates form correctly - [ ] Retake photo restarts capture flow - [ ] Cancel closes review modal - [ ] Error dialog shows on OCR failure - [ ] Form validation works after OCR population Closes #70 --- Generated with [Claude Code](https://claude.com/claude-code)
egullickson added 1 commit 2026-02-02 03:02:10 +00:00
feat: integrate receipt capture with fuel log form (refs #70)
Deploy to Staging / Build Images (pull_request) Successful in 3m20s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 32s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 2m19s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details
d78ba24c5e 
- Add useReceiptOcr hook for OCR extraction orchestration
- Add ReceiptCameraButton component for triggering capture
- Add ReceiptOcrReviewModal for reviewing/editing extracted fields
- Add ReceiptPreview component with zoom capability
- Integrate camera capture, OCR processing, and form population
- Include confidence indicators and low-confidence field highlighting
- Support inline editing of extracted fields before acceptance

Co-Authored-By: Claude Opus 4.5 <[email protected]>
egullickson merged commit c3f3149f48 into main 2026-02-02 03:10:28 +00:00
egullickson deleted branch issue-70-receipt-capture-integration 2026-02-02 03:10:28 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
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 labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#78