feat: Frontend manual extraction flow (#129) #136

New Issue

2026-02-11T03:05:04Z

egullickson commented

2026-02-11 03:05:04 +00:00

Relates to #129

Milestone 7: Frontend Manual Extraction Flow

Build the complete frontend flow for manual maintenance schedule extraction, review, and creation.

Flags: needs conformance check (mobile + desktop)

Files

frontend/src/features/documents/components/DocumentForm.tsx
frontend/src/features/documents/hooks/useManualExtraction.ts (NEW)
frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.tsx (NEW)
frontend/src/features/maintenance/hooks/useCreateSchedulesFromExtraction.ts (NEW)

Requirements

Remove "(Coming soon)" label from DocumentForm maintenance scan checkbox
After document upload with scanForMaintenance=true, trigger manual extraction job
Create useManualExtraction hook: submit job, poll status, track progress
Show progress indicator during extraction (percentage + message)
On completion, navigate to MaintenanceScheduleReviewScreen
Review screen: display items with checkboxes, inline editing, select/deselect
"Create Selected Schedules" button creates maintenance_schedules via existing API
All components work on mobile (full-screen) and desktop (modal/page)

Acceptance Criteria

Uploading a manual PDF with scan checkbox triggers extraction job
Progress indicator shows percentage and status message during processing
Review screen displays all extracted maintenance items
User can select/deselect and edit items before creation
Created items are maintenance_schedules with correct category, subtypes, intervals
Created schedules appear in vehicle's maintenance schedules list
Works on both mobile and desktop viewports
Error states handled: extraction failure, no items found, schedule creation failure

Tests

Test files: frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.test.tsx (NEW)
Test type: unit (component rendering + interaction)
Scenarios:
- Normal: Renders extracted items with checkboxes
- Normal: Select/deselect toggles items
- Normal: Edit field updates item data
- Edge: Empty extraction shows "no items found" message
- Error: Schedule creation failure shows error

Relates to #129 ## Milestone 7: Frontend Manual Extraction Flow Build the complete frontend flow for manual maintenance schedule extraction, review, and creation. **Flags**: needs conformance check (mobile + desktop) ### Files - `frontend/src/features/documents/components/DocumentForm.tsx` - `frontend/src/features/documents/hooks/useManualExtraction.ts` (NEW) - `frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.tsx` (NEW) - `frontend/src/features/maintenance/hooks/useCreateSchedulesFromExtraction.ts` (NEW) ### Requirements - Remove "(Coming soon)" label from DocumentForm maintenance scan checkbox - After document upload with scanForMaintenance=true, trigger manual extraction job - Create `useManualExtraction` hook: submit job, poll status, track progress - Show progress indicator during extraction (percentage + message) - On completion, navigate to MaintenanceScheduleReviewScreen - Review screen: display items with checkboxes, inline editing, select/deselect - "Create Selected Schedules" button creates maintenance_schedules via existing API - All components work on mobile (full-screen) and desktop (modal/page) ### Acceptance Criteria - [ ] Uploading a manual PDF with scan checkbox triggers extraction job - [ ] Progress indicator shows percentage and status message during processing - [ ] Review screen displays all extracted maintenance items - [ ] User can select/deselect and edit items before creation - [ ] Created items are maintenance_schedules with correct category, subtypes, intervals - [ ] Created schedules appear in vehicle's maintenance schedules list - [ ] Works on both mobile and desktop viewports - [ ] Error states handled: extraction failure, no items found, schedule creation failure ### Tests - **Test files**: `frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.test.tsx` (NEW) - **Test type**: unit (component rendering + interaction) - **Scenarios**: - Normal: Renders extracted items with checkboxes - Normal: Select/deselect toggles items - Normal: Edit field updates item data - Edge: Empty extraction shows "no items found" message - Error: Schedule creation failure shows error

egullickson added the

labels 2026-02-11 03:12:41 +00:00

egullickson added

and removed

labels 2026-02-11 16:38:44 +00:00

egullickson commented

2026-02-11 16:49:07 +00:00

Milestone: Frontend Manual Extraction Flow

Phase: Execution | Agent: Frontend | Status: PASS

Completed

useManualExtraction hook (frontend/src/features/documents/hooks/useManualExtraction.ts)
- Submits PDF to POST /api/ocr/extract/manual as multipart form
- Polls GET /api/ocr/jobs/:jobId every 3s via React Query refetchInterval
- Returns status, progress, result, error with full lifecycle management
useCreateSchedulesFromExtraction hook (frontend/src/features/maintenance/hooks/useCreateSchedulesFromExtraction.ts)
- Batch creates maintenance schedules from extraction results
- Maps items to CreateScheduleRequest with routine_maintenance category
- Invalidates schedule and upcoming queries on success
MaintenanceScheduleReviewScreen (frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.tsx)
- MUI Dialog: fullScreen on mobile, modal on desktop
- Checkboxes with Select All / Deselect All
- Inline editing for service name, interval miles, interval months
- Confidence indicators, subtype chips, details display
- Empty state ("No maintenance items found")
- Error handling for schedule creation failures
DocumentForm updates (frontend/src/features/documents/components/DocumentForm.tsx)
- Removed "(Coming soon)" label from scan checkbox
- Shows "PDF will be scanned after upload" hint when checkbox checked
- After file upload with scanForMaintenance, triggers extraction job
- LinearProgress indicator during extraction with percentage
- Extraction error display
- Opens review dialog on extraction completion
- Submit/Cancel buttons disabled during extraction
Unit tests (frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.test.tsx)
- 12 tests, all passing
- Rendering: items with checkboxes, intervals, details, subtype chips
- Selection: toggle, deselect all, select all, disabled create when empty
- Empty state: no items found message
- Schedule creation: correct items passed, only selected items, error handling

Quality

TypeScript: 0 errors
ESLint: 0 new errors (222 pre-existing warnings)
Tests: 12/12 passing

Verdict: PASS | Next: Quality review

## Milestone: Frontend Manual Extraction Flow **Phase**: Execution | **Agent**: Frontend | **Status**: PASS ### Completed - **useManualExtraction hook** (`frontend/src/features/documents/hooks/useManualExtraction.ts`) - Submits PDF to `POST /api/ocr/extract/manual` as multipart form - Polls `GET /api/ocr/jobs/:jobId` every 3s via React Query refetchInterval - Returns status, progress, result, error with full lifecycle management - **useCreateSchedulesFromExtraction hook** (`frontend/src/features/maintenance/hooks/useCreateSchedulesFromExtraction.ts`) - Batch creates maintenance schedules from extraction results - Maps items to `CreateScheduleRequest` with `routine_maintenance` category - Invalidates schedule and upcoming queries on success - **MaintenanceScheduleReviewScreen** (`frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.tsx`) - MUI Dialog: fullScreen on mobile, modal on desktop - Checkboxes with Select All / Deselect All - Inline editing for service name, interval miles, interval months - Confidence indicators, subtype chips, details display - Empty state ("No maintenance items found") - Error handling for schedule creation failures - **DocumentForm updates** (`frontend/src/features/documents/components/DocumentForm.tsx`) - Removed "(Coming soon)" label from scan checkbox - Shows "PDF will be scanned after upload" hint when checkbox checked - After file upload with scanForMaintenance, triggers extraction job - LinearProgress indicator during extraction with percentage - Extraction error display - Opens review dialog on extraction completion - Submit/Cancel buttons disabled during extraction - **Unit tests** (`frontend/src/features/maintenance/components/MaintenanceScheduleReviewScreen.test.tsx`) - 12 tests, all passing - Rendering: items with checkboxes, intervals, details, subtype chips - Selection: toggle, deselect all, select all, disabled create when empty - Empty state: no items found message - Schedule creation: correct items passed, only selected items, error handling ### Quality - TypeScript: 0 errors - ESLint: 0 new errors (222 pre-existing warnings) - Tests: 12/12 passing *Verdict*: PASS | *Next*: Quality review

egullickson referenced this issue from a commit

2026-02-11 21:27:47 +00:00

feat: add frontend manual extraction flow with review screen (refs #136)

egullickson referenced a pull request that will close this issue

2026-02-11 21:28:11 +00:00

feat: Expand OCR with fuel receipt scanning and maintenance extraction (#129) #147

~~egullickson referenced this issue 2026-02-13 01:45:41 +00:00~~

fix: Scheduled maintenance list not displaying schedules (#129) #148

egullickson closed this issue

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

Sign in to join this conversation.