feat: Maintenance receipt OCR hook and review modal (#16) #152

New Issue

2026-02-13T02:54:33Z

egullickson commented

2026-02-13 02:54:33 +00:00

Relates to #16

Summary

Create useMaintenanceReceiptOcr hook and MaintenanceReceiptReviewModal component, mirroring the existing fuel receipt OCR flow (useReceiptOcr + ReceiptOcrReviewModal).

Scope

useMaintenanceReceiptOcr hook orchestrating the full flow: capture -> OCR -> review -> accept
MaintenanceReceiptReviewModal component with confidence indicators and inline editing
Category/subtype suggestion logic from extracted service description
Maintenance receipt extraction types (fields, confidence, mapped form values)
Mobile: bottom sheet drawer / Desktop: dialog modal

Files (estimated)

frontend/src/features/maintenance/hooks/useMaintenanceReceiptOcr.ts (NEW)
frontend/src/features/maintenance/components/MaintenanceReceiptReviewModal.tsx (NEW)
frontend/src/features/maintenance/types/maintenance-receipt.types.ts (NEW)

Technical Notes

Mirror useReceiptOcr hook pattern: startCapture() -> processImage(file) -> review -> acceptResult()
API call: POST /api/ocr/extract/maintenance-receipt (sends file, returns extractedFields)
Field mapping: service name -> category + subtypes, date -> date, cost -> cost, shop -> shopName, odometer -> odometerReading
Category suggestion: map extracted service description to maintenance categories using keyword matching (e.g., "oil change" -> routine_maintenance + ["Engine Oil"])
Confidence indicator: reuse 4-dot system (LOW_CONFIDENCE_THRESHOLD = 0.7)
Inline field editing sets confidence to 1.0 (user override)
Mobile responsive: 44px touch targets, collapsible secondary fields
Reuse shared CameraCapture component for image capture

Acceptance Criteria

Hook manages OCR flow state (idle, capturing, processing, reviewing, accepted, error)
Review modal displays extracted fields with confidence indicators
Fields are inline editable with confidence reset to 1.0 on edit
Category/subtype suggestion from service description works
Mobile bottom sheet and desktop dialog layouts
Accepted results return mapped maintenance form field values

Relates to #16 ## Summary Create `useMaintenanceReceiptOcr` hook and `MaintenanceReceiptReviewModal` component, mirroring the existing fuel receipt OCR flow (`useReceiptOcr` + `ReceiptOcrReviewModal`). ## Scope - `useMaintenanceReceiptOcr` hook orchestrating the full flow: capture -> OCR -> review -> accept - `MaintenanceReceiptReviewModal` component with confidence indicators and inline editing - Category/subtype suggestion logic from extracted service description - Maintenance receipt extraction types (fields, confidence, mapped form values) - Mobile: bottom sheet drawer / Desktop: dialog modal ## Files (estimated) - `frontend/src/features/maintenance/hooks/useMaintenanceReceiptOcr.ts` (NEW) - `frontend/src/features/maintenance/components/MaintenanceReceiptReviewModal.tsx` (NEW) - `frontend/src/features/maintenance/types/maintenance-receipt.types.ts` (NEW) ## Technical Notes - Mirror `useReceiptOcr` hook pattern: startCapture() -> processImage(file) -> review -> acceptResult() - API call: `POST /api/ocr/extract/maintenance-receipt` (sends file, returns extractedFields) - Field mapping: service name -> category + subtypes, date -> date, cost -> cost, shop -> shopName, odometer -> odometerReading - Category suggestion: map extracted service description to maintenance categories using keyword matching (e.g., "oil change" -> routine_maintenance + ["Engine Oil"]) - Confidence indicator: reuse 4-dot system (LOW_CONFIDENCE_THRESHOLD = 0.7) - Inline field editing sets confidence to 1.0 (user override) - Mobile responsive: 44px touch targets, collapsible secondary fields - Reuse shared `CameraCapture` component for image capture ## Acceptance Criteria - [ ] Hook manages OCR flow state (idle, capturing, processing, reviewing, accepted, error) - [ ] Review modal displays extracted fields with confidence indicators - [ ] Fields are inline editable with confidence reset to 1.0 on edit - [ ] Category/subtype suggestion from service description works - [ ] Mobile bottom sheet and desktop dialog layouts - [ ] Accepted results return mapped maintenance form field values

egullickson added the

labels 2026-02-13 02:55:01 +00:00

egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 02:55:04 +00:00

egullickson referenced this issue

2026-02-13 02:56:14 +00:00

feat: Maintenance Receipt Upload with OCR Auto-populate #16

egullickson added

and removed

labels 2026-02-13 03:27:09 +00:00

egullickson commented

2026-02-13 03:32:03 +00:00

Milestone: Implementation Complete

Phase: Execution | Agent: Feature Agent | Status: PASS

Files Created (3)

File	Lines	Purpose
`frontend/src/features/maintenance/types/maintenance-receipt.types.ts`	77	Extraction field types, mapped form values, hook state/return interfaces
`frontend/src/features/maintenance/hooks/useMaintenanceReceiptOcr.ts`	232	Orchestration hook: capture -> OCR -> category suggestion -> review -> accept
`frontend/src/features/maintenance/components/MaintenanceReceiptReviewModal.tsx`	321	Review modal with confidence indicators, inline editing, category suggestion display

Acceptance Criteria

Hook manages OCR flow state (idle, capturing, processing, reviewing, accepted, error)
Review modal displays extracted fields with confidence indicators (4-dot system, threshold 0.7)
Fields are inline editable with confidence reset to 1.0 on edit
Category/subtype suggestion from service description via keyword matching (21 mappings)
Mobile bottom sheet (fullScreen) and desktop dialog layouts
Accepted results return mapped maintenance form field values

Quality Checks

npm run lint: 0 errors (226 pre-existing warnings)
npx tsc --noEmit: 0 errors

Key Design Decisions

Mirrors useReceiptOcr + ReceiptOcrReviewModal patterns exactly for consistency
Category suggestion re-runs on serviceName edit (dynamic keyword matching)
Labor/parts/vehicle info mapped to notes field (supplementary data)
Reuses shared ReceiptPreview component for receipt thumbnail
44px minimum touch targets on all mobile buttons

Verdict: PASS | Next: QR post-implementation review

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Feature Agent | **Status**: PASS ### Files Created (3) | File | Lines | Purpose | |------|-------|---------| | `frontend/src/features/maintenance/types/maintenance-receipt.types.ts` | 77 | Extraction field types, mapped form values, hook state/return interfaces | | `frontend/src/features/maintenance/hooks/useMaintenanceReceiptOcr.ts` | 232 | Orchestration hook: capture -> OCR -> category suggestion -> review -> accept | | `frontend/src/features/maintenance/components/MaintenanceReceiptReviewModal.tsx` | 321 | Review modal with confidence indicators, inline editing, category suggestion display | ### Acceptance Criteria - [x] Hook manages OCR flow state (idle, capturing, processing, reviewing, accepted, error) - [x] Review modal displays extracted fields with confidence indicators (4-dot system, threshold 0.7) - [x] Fields are inline editable with confidence reset to 1.0 on edit - [x] Category/subtype suggestion from service description via keyword matching (21 mappings) - [x] Mobile bottom sheet (fullScreen) and desktop dialog layouts - [x] Accepted results return mapped maintenance form field values ### Quality Checks - [x] `npm run lint`: 0 errors (226 pre-existing warnings) - [x] `npx tsc --noEmit`: 0 errors ### Key Design Decisions - Mirrors `useReceiptOcr` + `ReceiptOcrReviewModal` patterns exactly for consistency - Category suggestion re-runs on serviceName edit (dynamic keyword matching) - Labor/parts/vehicle info mapped to notes field (supplementary data) - Reuses shared `ReceiptPreview` component for receipt thumbnail - 44px minimum touch targets on all mobile buttons *Verdict*: PASS | *Next*: QR post-implementation review

egullickson referenced this issue from a commit

2026-02-13 16:34:29 +00:00

feat: add maintenance receipt OCR hook and review modal (refs #152)

egullickson referenced a pull request that will close this issue

2026-02-13 16:34:49 +00:00

feat: Maintenance Receipt Upload with OCR Auto-populate (#16) #161

egullickson closed this issue

2026-02-13 22:19:46 +00:00

Sign in to join this conversation.