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

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

New Issue
Closed
opened 2026-02-11 03:50:33 +00:00 by egullickson · 1 comment
egullickson commented 2026-02-11 03:50:33 +00:00
Owner
Copy Link
Copy Source

Relates to #129

Milestone 7: Frontend Manual Extraction Flow

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)

Flags: needs conformance check (mobile + desktop)

Requirements

  • DocumentForm maintenance scan checkbox has no "(Coming soon)" qualifier
  • After document upload with scanForMaintenance=true, trigger manual extraction job via POST /api/ocr/extract/manual
  • Create useManualExtraction hook: submit job, poll status, track progress, handle completion/error
  • Show progress indicator during extraction (percentage + message from job status: 10% Preparing, 50% Processing, 95% Mapping, 100% Complete)
  • On completion, navigate to MaintenanceScheduleReviewScreen with extracted data
  • MaintenanceScheduleReviewScreen displays all extracted maintenance items in a list with checkboxes:
    • Each item shows: serviceName, intervalMiles, intervalMonths, details, matched subtype
    • User can select/deselect items, edit any field (inline editing)
    • "Create Selected Schedules" button creates maintenance_schedules via existing API
  • Create useCreateSchedulesFromExtraction hook: batch POST /api/maintenance/schedules for each selected item
  • Touch targets: checkbox hit areas >= 44px, edit buttons >= 44px, Create button >= 44px height
  • Test at 320px (mobile), 768px (tablet), 1920px (desktop) viewports
  • 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
  • "Create Selected Schedules" creates maintenance_schedules with correct category (routine_maintenance), subtypes, intervalMonths, intervalMiles
  • Created schedules appear in vehicle's maintenance schedules list
  • Works on both mobile and desktop viewports
  • Touch targets >= 44px on all interactive elements
  • Error states handled: extraction failure, no items found, schedule creation failure, job expired (410)

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
    • Normal: Review screen adapts to mobile (full-screen) and desktop (modal) layouts
    • Edge: Empty extraction shows "no items found" message
    • Error: Schedule creation failure shows error
    • Error: Job expired (410) shows resubmit message
Relates to #129 ## Milestone 7: Frontend Manual Extraction Flow ### 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) **Flags**: needs conformance check (mobile + desktop) ### Requirements - DocumentForm maintenance scan checkbox has no "(Coming soon)" qualifier - After document upload with `scanForMaintenance=true`, trigger manual extraction job via `POST /api/ocr/extract/manual` - Create `useManualExtraction` hook: submit job, poll status, track progress, handle completion/error - Show progress indicator during extraction (percentage + message from job status: 10% Preparing, 50% Processing, 95% Mapping, 100% Complete) - On completion, navigate to MaintenanceScheduleReviewScreen with extracted data - MaintenanceScheduleReviewScreen displays all extracted maintenance items in a list with checkboxes: - Each item shows: serviceName, intervalMiles, intervalMonths, details, matched subtype - User can select/deselect items, edit any field (inline editing) - "Create Selected Schedules" button creates maintenance_schedules via existing API - Create `useCreateSchedulesFromExtraction` hook: batch POST /api/maintenance/schedules for each selected item - Touch targets: checkbox hit areas >= 44px, edit buttons >= 44px, Create button >= 44px height - Test at 320px (mobile), 768px (tablet), 1920px (desktop) viewports - 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 - "Create Selected Schedules" creates maintenance_schedules with correct category (routine_maintenance), subtypes, intervalMonths, intervalMiles - Created schedules appear in vehicle's maintenance schedules list - Works on both mobile and desktop viewports - Touch targets >= 44px on all interactive elements - Error states handled: extraction failure, no items found, schedule creation failure, job expired (410) ### 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 - Normal: Review screen adapts to mobile (full-screen) and desktop (modal) layouts - Edge: Empty extraction shows "no items found" message - Error: Schedule creation failure shows error - Error: Job expired (410) shows resubmit message
egullickson added the
status
backlog
type
feature
 labels 2026-02-11 03:51:17 +00:00
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-11 21:01:58 +00:00
egullickson commented 2026-02-11 21:12:51 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Frontend Manual Extraction Flow

Phase: Execution | Agent: Developer | Status: PASS

Summary

Verified and completed the frontend manual extraction flow. All 4 implementation files were already in place from prior work on the branch. Identified and fixed 4 gaps against acceptance criteria.

Changes Made

useManualExtraction.ts - Added poll error handling including 410 Gone detection:

  • pollQuery.error now surfaces as status: 'failed' instead of getting stuck
  • 410 responses show "Job expired. Please resubmit the document."
  • Non-410 errors show generic message

DocumentForm.tsx - Added specific progress stage messages:

  • 10%: "Preparing document..."
  • 50%: "Processing maintenance data..."
  • 95%: "Mapping maintenance schedules..."
  • 100%: "Complete"

MaintenanceScheduleReviewScreen.tsx - Enforced 44px minimum touch targets:

  • Checkbox: minWidth: 44, minHeight: 44
  • InlineField display area: minHeight: 44
  • Save/Cancel IconButtons: minWidth: 44, minHeight: 44
  • Create button: minHeight: 44

MaintenanceScheduleReviewScreen.test.tsx - Added 3 missing test cases:

  • Edit field updates item data (inline editing flow)
  • Mobile viewport renders fullscreen dialog
  • Desktop viewport renders modal dialog

Quality Checks

Check Result
Tests (15/15) PASS
TypeScript type-check PASS
ESLint (0 errors) PASS
Touch targets >= 44px PASS
Responsive (mobile/desktop) PASS

Acceptance Criteria Status

  • Manual PDF + scan checkbox triggers extraction job
  • Progress indicator shows percentage and status message
  • Review screen displays all extracted maintenance items
  • Select/deselect and edit items before creation
  • Creates schedules with correct category, subtypes, intervals
  • Created schedules appear in vehicle's maintenance list (query invalidation)
  • Works on mobile and desktop viewports
  • Touch targets >= 44px on all interactive elements
  • Error: extraction failure handled
  • Error: no items found shows message
  • Error: schedule creation failure shows error
  • Error: job expired (410) shows resubmit message

Verdict: PASS | Next: QR post-implementation review

## Milestone: Frontend Manual Extraction Flow **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Summary Verified and completed the frontend manual extraction flow. All 4 implementation files were already in place from prior work on the branch. Identified and fixed 4 gaps against acceptance criteria. ### Changes Made **useManualExtraction.ts** - Added poll error handling including 410 Gone detection: - `pollQuery.error` now surfaces as `status: 'failed'` instead of getting stuck - 410 responses show "Job expired. Please resubmit the document." - Non-410 errors show generic message **DocumentForm.tsx** - Added specific progress stage messages: - 10%: "Preparing document..." - 50%: "Processing maintenance data..." - 95%: "Mapping maintenance schedules..." - 100%: "Complete" **MaintenanceScheduleReviewScreen.tsx** - Enforced 44px minimum touch targets: - Checkbox: `minWidth: 44, minHeight: 44` - InlineField display area: `minHeight: 44` - Save/Cancel IconButtons: `minWidth: 44, minHeight: 44` - Create button: `minHeight: 44` **MaintenanceScheduleReviewScreen.test.tsx** - Added 3 missing test cases: - Edit field updates item data (inline editing flow) - Mobile viewport renders fullscreen dialog - Desktop viewport renders modal dialog ### Quality Checks | Check | Result | |-------|--------| | Tests (15/15) | PASS | | TypeScript type-check | PASS | | ESLint (0 errors) | PASS | | Touch targets >= 44px | PASS | | Responsive (mobile/desktop) | PASS | ### Acceptance Criteria Status - [x] Manual PDF + scan checkbox triggers extraction job - [x] Progress indicator shows percentage and status message - [x] Review screen displays all extracted maintenance items - [x] Select/deselect and edit items before creation - [x] Creates schedules with correct category, subtypes, intervals - [x] Created schedules appear in vehicle's maintenance list (query invalidation) - [x] Works on mobile and desktop viewports - [x] Touch targets >= 44px on all interactive elements - [x] Error: extraction failure handled - [x] Error: no items found shows message - [x] Error: schedule creation failure shows error - [x] Error: job expired (410) shows resubmit message *Verdict*: PASS | *Next*: QR post-implementation review
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 labels
status
in-progress
type
feature
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#145