feat: add maintenance receipt OCR hook and review modal (refs #152)
Add useMaintenanceReceiptOcr hook mirroring fuel receipt OCR pattern, MaintenanceReceiptReviewModal with confidence indicators and inline editing, and maintenance-receipt.types.ts for extraction field types. Includes category/subtype suggestion via keyword matching from service descriptions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
@@ -0,0 +1,427 @@
|
||||
/**
|
||||
* @ai-summary Modal for reviewing and editing OCR-extracted maintenance receipt fields
|
||||
* @ai-context Mirrors ReceiptOcrReviewModal: confidence indicators, inline editing, category suggestion display
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
TextField,
|
||||
Grid,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
IconButton,
|
||||
Collapse,
|
||||
Alert,
|
||||
Chip,
|
||||
} from '@mui/material';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import CameraAltIcon from '@mui/icons-material/CameraAlt';
|
||||
import BuildIcon from '@mui/icons-material/Build';
|
||||
import {
|
||||
ExtractedMaintenanceReceiptFields,
|
||||
ExtractedMaintenanceField,
|
||||
CategorySuggestion,
|
||||
} from '../types/maintenance-receipt.types';
|
||||
import { LOW_CONFIDENCE_THRESHOLD } from '../hooks/useMaintenanceReceiptOcr';
|
||||
import { getCategoryDisplayName } from '../types/maintenance.types';
|
||||
import { ReceiptPreview } from '../../fuel-logs/components/ReceiptPreview';
|
||||
|
||||
export interface MaintenanceReceiptReviewModalProps {
|
||||
open: boolean;
|
||||
extractedFields: ExtractedMaintenanceReceiptFields;
|
||||
receiptImageUrl: string | null;
|
||||
categorySuggestion: CategorySuggestion | null;
|
||||
onAccept: () => void;
|
||||
onRetake: () => void;
|
||||
onCancel: () => void;
|
||||
onFieldEdit: (fieldName: keyof ExtractedMaintenanceReceiptFields, value: string | number | null) => void;
|
||||
}
|
||||
|
||||
/** Confidence indicator component (4-dot system) */
|
||||
const ConfidenceIndicator: React.FC<{ confidence: number }> = ({ confidence }) => {
|
||||
const filledDots = Math.round(confidence * 4);
|
||||
const isLow = confidence < LOW_CONFIDENCE_THRESHOLD;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{ display: 'flex', gap: 0.25, ml: 1 }}
|
||||
aria-label={`Confidence: ${Math.round(confidence * 100)}%`}
|
||||
>
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
sx={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: i < filledDots
|
||||
? (isLow ? 'warning.main' : 'success.main')
|
||||
: 'grey.300',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/** Field row component with inline editing */
|
||||
const FieldRow: React.FC<{
|
||||
label: string;
|
||||
field: ExtractedMaintenanceField;
|
||||
onEdit: (value: string | number | null) => void;
|
||||
type?: 'text' | 'number';
|
||||
formatDisplay?: (value: string | number | null) => string;
|
||||
}> = ({ label, field, onEdit, type = 'text', formatDisplay }) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editValue, setEditValue] = useState<string>(
|
||||
field.value !== null ? String(field.value) : ''
|
||||
);
|
||||
const isLowConfidence = field.confidence < LOW_CONFIDENCE_THRESHOLD && field.value !== null;
|
||||
|
||||
const displayValue = formatDisplay
|
||||
? formatDisplay(field.value)
|
||||
: field.value !== null
|
||||
? String(field.value)
|
||||
: '-';
|
||||
|
||||
const handleSave = () => {
|
||||
let parsedValue: string | number | null = editValue || null;
|
||||
if (type === 'number' && editValue) {
|
||||
const num = parseFloat(editValue);
|
||||
parsedValue = isNaN(num) ? null : num;
|
||||
}
|
||||
onEdit(parsedValue);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditValue(field.value !== null ? String(field.value) : '');
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
py: 1.5,
|
||||
px: 1,
|
||||
borderRadius: 1,
|
||||
backgroundColor: isLowConfidence ? 'warning.light' : 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: isLowConfidence ? 'warning.light' : 'action.hover',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ width: 100, flexShrink: 0, color: 'text.secondary', fontWeight: 500 }}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
|
||||
{isEditing ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1, gap: 1 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
type={type === 'number' ? 'number' : 'text'}
|
||||
inputProps={{
|
||||
step: type === 'number' ? 0.01 : undefined,
|
||||
}}
|
||||
autoFocus
|
||||
sx={{ flex: 1 }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSave();
|
||||
if (e.key === 'Escape') handleCancel();
|
||||
}}
|
||||
/>
|
||||
<IconButton size="small" onClick={handleSave} color="primary">
|
||||
<CheckIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton size="small" onClick={handleCancel}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{ display: 'flex', alignItems: 'center', flex: 1, cursor: 'pointer' }}
|
||||
onClick={() => setIsEditing(true)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Edit ${label}`}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setIsEditing(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
flex: 1,
|
||||
fontWeight: field.value !== null ? 500 : 400,
|
||||
color: field.value !== null ? 'text.primary' : 'text.disabled',
|
||||
}}
|
||||
>
|
||||
{displayValue}
|
||||
</Typography>
|
||||
{field.value !== null && <ConfidenceIndicator confidence={field.confidence} />}
|
||||
<IconButton size="small" sx={{ ml: 1 }}>
|
||||
<EditIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const MaintenanceReceiptReviewModal: React.FC<MaintenanceReceiptReviewModalProps> = ({
|
||||
open,
|
||||
extractedFields,
|
||||
receiptImageUrl,
|
||||
categorySuggestion,
|
||||
onAccept,
|
||||
onRetake,
|
||||
onCancel,
|
||||
onFieldEdit,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const [showAllFields, setShowAllFields] = useState(false);
|
||||
|
||||
const hasLowConfidenceFields = Object.values(extractedFields).some(
|
||||
(field) => field.value !== null && field.confidence < LOW_CONFIDENCE_THRESHOLD
|
||||
);
|
||||
|
||||
const formatCurrency = (value: string | number | null): string => {
|
||||
if (value === null) return '-';
|
||||
const num = typeof value === 'string' ? parseFloat(value) : value;
|
||||
return isNaN(num) ? String(value) : `$${num.toFixed(2)}`;
|
||||
};
|
||||
|
||||
const formatDate = (value: string | number | null): string => {
|
||||
if (value === null) return '-';
|
||||
const dateStr = String(value);
|
||||
try {
|
||||
const date = new Date(dateStr + 'T00:00:00');
|
||||
if (!isNaN(date.getTime())) {
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
// Return as-is if parsing fails
|
||||
}
|
||||
return dateStr;
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onCancel}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
fullScreen={isMobile}
|
||||
PaperProps={{
|
||||
sx: { maxHeight: isMobile ? '100vh' : '90vh' },
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
|
||||
>
|
||||
<Typography variant="h6" component="span">
|
||||
Maintenance Receipt Extracted
|
||||
</Typography>
|
||||
<IconButton onClick={onCancel} size="small" aria-label="Close">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent dividers>
|
||||
{hasLowConfidenceFields && (
|
||||
<Alert severity="warning" sx={{ mb: 2 }}>
|
||||
Some fields have low confidence. Please review and edit if needed.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Grid container spacing={2}>
|
||||
{/* Receipt thumbnail */}
|
||||
{receiptImageUrl && (
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Box
|
||||
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}
|
||||
>
|
||||
<ReceiptPreview
|
||||
imageUrl={receiptImageUrl}
|
||||
maxWidth={isMobile ? 100 : 120}
|
||||
maxHeight={isMobile ? 150 : 180}
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Tap to zoom
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* Extracted fields */}
|
||||
<Grid item xs={12} sm={receiptImageUrl ? 8 : 12}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Primary fields */}
|
||||
<FieldRow
|
||||
label="Service"
|
||||
field={extractedFields.serviceName}
|
||||
onEdit={(value) => onFieldEdit('serviceName', value)}
|
||||
/>
|
||||
<FieldRow
|
||||
label="Date"
|
||||
field={extractedFields.serviceDate}
|
||||
onEdit={(value) => onFieldEdit('serviceDate', value)}
|
||||
formatDisplay={formatDate}
|
||||
/>
|
||||
<FieldRow
|
||||
label="Total Cost"
|
||||
field={extractedFields.totalCost}
|
||||
onEdit={(value) => onFieldEdit('totalCost', value)}
|
||||
type="number"
|
||||
formatDisplay={formatCurrency}
|
||||
/>
|
||||
<FieldRow
|
||||
label="Shop"
|
||||
field={extractedFields.shopName}
|
||||
onEdit={(value) => onFieldEdit('shopName', value)}
|
||||
/>
|
||||
|
||||
{/* Category suggestion */}
|
||||
{categorySuggestion && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
py: 1,
|
||||
px: 1,
|
||||
gap: 1,
|
||||
backgroundColor: 'success.light',
|
||||
borderRadius: 1,
|
||||
my: 0.5,
|
||||
}}
|
||||
>
|
||||
<BuildIcon fontSize="small" color="success" />
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Typography variant="body2" fontWeight={500}>
|
||||
{getCategoryDisplayName(categorySuggestion.category)}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mt: 0.5 }}>
|
||||
{categorySuggestion.subtypes.map((subtype) => (
|
||||
<Chip
|
||||
key={subtype}
|
||||
label={subtype}
|
||||
size="small"
|
||||
color="success"
|
||||
variant="outlined"
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Secondary fields (collapsible on mobile) */}
|
||||
<Collapse in={!isMobile || showAllFields}>
|
||||
<FieldRow
|
||||
label="Odometer"
|
||||
field={extractedFields.odometerReading}
|
||||
onEdit={(value) => onFieldEdit('odometerReading', value)}
|
||||
type="number"
|
||||
/>
|
||||
<FieldRow
|
||||
label="Labor"
|
||||
field={extractedFields.laborCost}
|
||||
onEdit={(value) => onFieldEdit('laborCost', value)}
|
||||
type="number"
|
||||
formatDisplay={formatCurrency}
|
||||
/>
|
||||
<FieldRow
|
||||
label="Parts"
|
||||
field={extractedFields.partsCost}
|
||||
onEdit={(value) => onFieldEdit('partsCost', value)}
|
||||
type="number"
|
||||
formatDisplay={formatCurrency}
|
||||
/>
|
||||
<FieldRow
|
||||
label="Vehicle"
|
||||
field={extractedFields.vehicleInfo}
|
||||
onEdit={(value) => onFieldEdit('vehicleInfo', value)}
|
||||
/>
|
||||
</Collapse>
|
||||
|
||||
{isMobile && (
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => setShowAllFields(!showAllFields)}
|
||||
sx={{ mt: 1, alignSelf: 'flex-start' }}
|
||||
>
|
||||
{showAllFields ? 'Show Less' : 'Show More Fields'}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ mt: 2, textAlign: 'center' }}
|
||||
>
|
||||
Tap any field to edit before saving.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions
|
||||
sx={{
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
gap: 1,
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={onRetake}
|
||||
startIcon={<CameraAltIcon />}
|
||||
sx={{ order: isMobile ? 2 : 1, minHeight: 44 }}
|
||||
>
|
||||
Retake Photo
|
||||
</Button>
|
||||
<Box sx={{ flex: 1, display: isMobile ? 'none' : 'block' }} />
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
sx={{ order: isMobile ? 3 : 2, minHeight: 44 }}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onAccept}
|
||||
startIcon={<CheckIcon />}
|
||||
sx={{ order: isMobile ? 1 : 3, width: isMobile ? '100%' : 'auto', minHeight: 44 }}
|
||||
>
|
||||
Accept
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenanceReceiptReviewModal;
|
||||
@@ -0,0 +1,333 @@
|
||||
/**
|
||||
* @ai-summary Hook to orchestrate maintenance receipt OCR extraction
|
||||
* @ai-context Mirrors useReceiptOcr pattern: capture -> OCR -> category suggestion -> review -> accept
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { apiClient } from '../../../core/api/client';
|
||||
import {
|
||||
ExtractedMaintenanceReceiptFields,
|
||||
ExtractedMaintenanceField,
|
||||
MappedMaintenanceFields,
|
||||
MaintenanceReceiptOcrResult,
|
||||
CategorySuggestion,
|
||||
UseMaintenanceReceiptOcrReturn,
|
||||
} from '../types/maintenance-receipt.types';
|
||||
import { MaintenanceCategory } from '../types/maintenance.types';
|
||||
|
||||
/** Confidence threshold for highlighting low-confidence fields */
|
||||
export const LOW_CONFIDENCE_THRESHOLD = 0.7;
|
||||
|
||||
/** Keyword-to-category/subtype mapping for service name suggestion */
|
||||
const SERVICE_KEYWORD_MAP: Array<{
|
||||
keywords: string[];
|
||||
category: MaintenanceCategory;
|
||||
subtypes: string[];
|
||||
}> = [
|
||||
// Routine maintenance mappings
|
||||
{ keywords: ['oil change', 'oil filter', 'engine oil', 'synthetic oil', 'conventional oil', 'oil & filter'],
|
||||
category: 'routine_maintenance', subtypes: ['Engine Oil'] },
|
||||
{ keywords: ['tire rotation', 'tire balance', 'wheel balance', 'tire alignment', 'alignment'],
|
||||
category: 'routine_maintenance', subtypes: ['Tires'] },
|
||||
{ keywords: ['brake pad', 'brake rotor', 'brake fluid', 'brake inspection', 'brake service', 'brakes'],
|
||||
category: 'routine_maintenance', subtypes: ['Brakes and Traction Control'] },
|
||||
{ keywords: ['air filter', 'engine air filter'],
|
||||
category: 'routine_maintenance', subtypes: ['Air Filter Element'] },
|
||||
{ keywords: ['cabin filter', 'cabin air', 'a/c filter'],
|
||||
category: 'routine_maintenance', subtypes: ['Cabin Air Filter / Purifier'] },
|
||||
{ keywords: ['spark plug', 'ignition'],
|
||||
category: 'routine_maintenance', subtypes: ['Spark Plug'] },
|
||||
{ keywords: ['coolant', 'antifreeze', 'radiator flush', 'cooling system'],
|
||||
category: 'routine_maintenance', subtypes: ['Coolant'] },
|
||||
{ keywords: ['transmission fluid', 'trans fluid', 'atf'],
|
||||
category: 'routine_maintenance', subtypes: ['Fluid - A/T'] },
|
||||
{ keywords: ['differential fluid', 'diff fluid'],
|
||||
category: 'routine_maintenance', subtypes: ['Fluid - Differential'] },
|
||||
{ keywords: ['wiper blade', 'wiper', 'windshield wiper'],
|
||||
category: 'routine_maintenance', subtypes: ['Wiper Blade'] },
|
||||
{ keywords: ['washer fluid', 'windshield washer'],
|
||||
category: 'routine_maintenance', subtypes: ['Washer Fluid'] },
|
||||
{ keywords: ['drive belt', 'serpentine belt', 'timing belt', 'belt replacement'],
|
||||
category: 'routine_maintenance', subtypes: ['Drive Belt'] },
|
||||
{ keywords: ['exhaust', 'muffler', 'catalytic'],
|
||||
category: 'routine_maintenance', subtypes: ['Exhaust System'] },
|
||||
{ keywords: ['suspension', 'shock', 'strut', 'ball joint', 'tie rod'],
|
||||
category: 'routine_maintenance', subtypes: ['Steering and Suspension'] },
|
||||
{ keywords: ['fuel filter', 'fuel injection', 'fuel system', 'fuel delivery'],
|
||||
category: 'routine_maintenance', subtypes: ['Fuel Delivery and Air Induction'] },
|
||||
{ keywords: ['parking brake', 'e-brake', 'emergency brake'],
|
||||
category: 'routine_maintenance', subtypes: ['Parking Brake System'] },
|
||||
// Repair mappings
|
||||
{ keywords: ['engine repair', 'engine rebuild', 'head gasket', 'valve cover'],
|
||||
category: 'repair', subtypes: ['Engine'] },
|
||||
{ keywords: ['transmission repair', 'trans rebuild'],
|
||||
category: 'repair', subtypes: ['Transmission'] },
|
||||
{ keywords: ['axle', 'cv joint', 'driveshaft', 'drivetrain'],
|
||||
category: 'repair', subtypes: ['Drivetrain'] },
|
||||
{ keywords: ['body work', 'dent', 'paint', 'bumper', 'fender'],
|
||||
category: 'repair', subtypes: ['Exterior'] },
|
||||
{ keywords: ['upholstery', 'dashboard', 'seat repair', 'interior repair'],
|
||||
category: 'repair', subtypes: ['Interior'] },
|
||||
];
|
||||
|
||||
/** Suggest category and subtypes from service name using keyword matching */
|
||||
function suggestCategory(serviceName: string | number | null): CategorySuggestion | null {
|
||||
if (!serviceName) return null;
|
||||
const normalized = String(serviceName).toLowerCase().trim();
|
||||
if (!normalized) return null;
|
||||
|
||||
for (const mapping of SERVICE_KEYWORD_MAP) {
|
||||
for (const keyword of mapping.keywords) {
|
||||
if (normalized.includes(keyword)) {
|
||||
return {
|
||||
category: mapping.category,
|
||||
subtypes: mapping.subtypes,
|
||||
confidence: 0.8,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// No match found - default to routine_maintenance with no subtypes
|
||||
return null;
|
||||
}
|
||||
|
||||
/** Parse date string to YYYY-MM-DD format */
|
||||
function parseServiceDate(value: string | number | null): string | undefined {
|
||||
if (!value) return undefined;
|
||||
|
||||
const dateStr = String(value);
|
||||
|
||||
// Already in YYYY-MM-DD format
|
||||
if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
|
||||
const date = new Date(dateStr + 'T00:00:00');
|
||||
if (!isNaN(date.getTime())) return dateStr;
|
||||
}
|
||||
|
||||
// Try standard parsing
|
||||
const date = new Date(dateStr);
|
||||
if (!isNaN(date.getTime())) {
|
||||
return date.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
// Try MM/DD/YYYY format
|
||||
const mdyMatch = dateStr.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
|
||||
if (mdyMatch) {
|
||||
const [, month, day, year] = mdyMatch;
|
||||
const parsed = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
|
||||
if (!isNaN(parsed.getTime())) {
|
||||
return parsed.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/** Parse numeric value */
|
||||
function parseNumber(value: string | number | null): number | undefined {
|
||||
if (value === null || value === undefined) return undefined;
|
||||
if (typeof value === 'number') return value;
|
||||
|
||||
const cleaned = value.replace(/[$,\s]/g, '');
|
||||
const num = parseFloat(cleaned);
|
||||
return isNaN(num) ? undefined : num;
|
||||
}
|
||||
|
||||
/** Extract maintenance receipt data from image via OCR service */
|
||||
async function extractMaintenanceReceiptFromImage(file: File): Promise<{
|
||||
extractedFields: ExtractedMaintenanceReceiptFields;
|
||||
rawText: string;
|
||||
confidence: number;
|
||||
}> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await apiClient.post('/ocr/extract/maintenance-receipt', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
timeout: 30000,
|
||||
});
|
||||
|
||||
const data = response.data;
|
||||
|
||||
if (!data.success) {
|
||||
throw new Error('Maintenance receipt OCR extraction failed');
|
||||
}
|
||||
|
||||
const fields = data.extractedFields || {};
|
||||
|
||||
const makeField = (key: string): ExtractedMaintenanceField => ({
|
||||
value: fields[key]?.value ?? null,
|
||||
confidence: fields[key]?.confidence ?? 0,
|
||||
});
|
||||
|
||||
const extractedFields: ExtractedMaintenanceReceiptFields = {
|
||||
serviceName: makeField('serviceName'),
|
||||
serviceDate: makeField('serviceDate'),
|
||||
totalCost: makeField('totalCost'),
|
||||
shopName: makeField('shopName'),
|
||||
laborCost: makeField('laborCost'),
|
||||
partsCost: makeField('partsCost'),
|
||||
odometerReading: makeField('odometerReading'),
|
||||
vehicleInfo: makeField('vehicleInfo'),
|
||||
};
|
||||
|
||||
return {
|
||||
extractedFields,
|
||||
rawText: data.rawText || '',
|
||||
confidence: data.confidence || 0,
|
||||
};
|
||||
}
|
||||
|
||||
/** Map extracted fields to maintenance record form fields */
|
||||
function mapFieldsToMaintenanceRecord(
|
||||
fields: ExtractedMaintenanceReceiptFields,
|
||||
categorySuggestion: CategorySuggestion | null
|
||||
): MappedMaintenanceFields {
|
||||
// Build notes from supplementary fields
|
||||
const noteParts: string[] = [];
|
||||
if (fields.laborCost.value !== null) {
|
||||
noteParts.push(`Labor: $${parseNumber(fields.laborCost.value)?.toFixed(2) ?? fields.laborCost.value}`);
|
||||
}
|
||||
if (fields.partsCost.value !== null) {
|
||||
noteParts.push(`Parts: $${parseNumber(fields.partsCost.value)?.toFixed(2) ?? fields.partsCost.value}`);
|
||||
}
|
||||
if (fields.vehicleInfo.value !== null) {
|
||||
noteParts.push(`Vehicle: ${fields.vehicleInfo.value}`);
|
||||
}
|
||||
|
||||
return {
|
||||
date: parseServiceDate(fields.serviceDate.value),
|
||||
cost: parseNumber(fields.totalCost.value),
|
||||
shopName: fields.shopName.value ? String(fields.shopName.value) : undefined,
|
||||
odometerReading: parseNumber(fields.odometerReading.value),
|
||||
category: categorySuggestion?.category,
|
||||
subtypes: categorySuggestion?.subtypes,
|
||||
notes: noteParts.length > 0 ? noteParts.join(' | ') : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to orchestrate maintenance receipt photo capture and OCR extraction.
|
||||
* Mirrors useReceiptOcr pattern: startCapture -> processImage -> review -> acceptResult
|
||||
*/
|
||||
export function useMaintenanceReceiptOcr(): UseMaintenanceReceiptOcrReturn {
|
||||
const [isCapturing, setIsCapturing] = useState(false);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [result, setResult] = useState<MaintenanceReceiptOcrResult | null>(null);
|
||||
const [receiptImageUrl, setReceiptImageUrl] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const startCapture = useCallback(() => {
|
||||
setIsCapturing(true);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
}, []);
|
||||
|
||||
const cancelCapture = useCallback(() => {
|
||||
setIsCapturing(false);
|
||||
setError(null);
|
||||
}, []);
|
||||
|
||||
const processImage = useCallback(async (file: File, croppedFile?: File) => {
|
||||
setIsCapturing(false);
|
||||
setIsProcessing(true);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
|
||||
const imageToProcess = croppedFile || file;
|
||||
const imageUrl = URL.createObjectURL(imageToProcess);
|
||||
setReceiptImageUrl(imageUrl);
|
||||
|
||||
try {
|
||||
const { extractedFields, rawText, confidence } = await extractMaintenanceReceiptFromImage(imageToProcess);
|
||||
|
||||
const categorySuggestion = suggestCategory(extractedFields.serviceName.value);
|
||||
const mappedFields = mapFieldsToMaintenanceRecord(extractedFields, categorySuggestion);
|
||||
|
||||
setResult({
|
||||
extractedFields,
|
||||
mappedFields,
|
||||
categorySuggestion,
|
||||
rawText,
|
||||
overallConfidence: confidence,
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error('Maintenance receipt OCR processing failed:', err);
|
||||
const message = err.response?.data?.message || err.message || 'Failed to process maintenance receipt image';
|
||||
setError(message);
|
||||
URL.revokeObjectURL(imageUrl);
|
||||
setReceiptImageUrl(null);
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const updateField = useCallback((
|
||||
fieldName: keyof ExtractedMaintenanceReceiptFields,
|
||||
value: string | number | null
|
||||
) => {
|
||||
setResult((prev) => {
|
||||
if (!prev) return null;
|
||||
|
||||
const updatedFields = {
|
||||
...prev.extractedFields,
|
||||
[fieldName]: {
|
||||
...prev.extractedFields[fieldName],
|
||||
value,
|
||||
confidence: 1.0, // User-edited field has full confidence
|
||||
},
|
||||
};
|
||||
|
||||
// Re-run category suggestion if service name was edited
|
||||
const categorySuggestion = fieldName === 'serviceName'
|
||||
? suggestCategory(value)
|
||||
: prev.categorySuggestion;
|
||||
|
||||
return {
|
||||
...prev,
|
||||
extractedFields: updatedFields,
|
||||
categorySuggestion,
|
||||
mappedFields: mapFieldsToMaintenanceRecord(updatedFields, categorySuggestion),
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
const acceptResult = useCallback(() => {
|
||||
if (!result) return null;
|
||||
|
||||
const mappedFields = result.mappedFields;
|
||||
|
||||
if (receiptImageUrl) {
|
||||
URL.revokeObjectURL(receiptImageUrl);
|
||||
}
|
||||
setResult(null);
|
||||
setReceiptImageUrl(null);
|
||||
|
||||
return mappedFields;
|
||||
}, [result, receiptImageUrl]);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setIsCapturing(false);
|
||||
setIsProcessing(false);
|
||||
if (receiptImageUrl) {
|
||||
URL.revokeObjectURL(receiptImageUrl);
|
||||
}
|
||||
setResult(null);
|
||||
setReceiptImageUrl(null);
|
||||
setError(null);
|
||||
}, [receiptImageUrl]);
|
||||
|
||||
return {
|
||||
isCapturing,
|
||||
isProcessing,
|
||||
result,
|
||||
receiptImageUrl,
|
||||
error,
|
||||
startCapture,
|
||||
cancelCapture,
|
||||
processImage,
|
||||
acceptResult,
|
||||
reset,
|
||||
updateField,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* @ai-summary Type definitions for maintenance receipt OCR extraction
|
||||
* @ai-context Mirrors fuel-logs ExtractedReceiptField pattern; maps OCR fields to maintenance record form values
|
||||
*/
|
||||
|
||||
import { MaintenanceCategory } from './maintenance.types';
|
||||
|
||||
/** OCR-extracted field with confidence score */
|
||||
export interface ExtractedMaintenanceField {
|
||||
value: string | number | null;
|
||||
confidence: number;
|
||||
}
|
||||
|
||||
/** Fields extracted from a maintenance receipt via OCR */
|
||||
export interface ExtractedMaintenanceReceiptFields {
|
||||
serviceName: ExtractedMaintenanceField;
|
||||
serviceDate: ExtractedMaintenanceField;
|
||||
totalCost: ExtractedMaintenanceField;
|
||||
shopName: ExtractedMaintenanceField;
|
||||
laborCost: ExtractedMaintenanceField;
|
||||
partsCost: ExtractedMaintenanceField;
|
||||
odometerReading: ExtractedMaintenanceField;
|
||||
vehicleInfo: ExtractedMaintenanceField;
|
||||
}
|
||||
|
||||
/** Suggested category and subtypes from service name keyword matching */
|
||||
export interface CategorySuggestion {
|
||||
category: MaintenanceCategory;
|
||||
subtypes: string[];
|
||||
confidence: number;
|
||||
}
|
||||
|
||||
/** Mapped fields ready for maintenance record form population */
|
||||
export interface MappedMaintenanceFields {
|
||||
date?: string;
|
||||
cost?: number;
|
||||
shopName?: string;
|
||||
odometerReading?: number;
|
||||
category?: MaintenanceCategory;
|
||||
subtypes?: string[];
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
/** Maintenance receipt OCR result */
|
||||
export interface MaintenanceReceiptOcrResult {
|
||||
extractedFields: ExtractedMaintenanceReceiptFields;
|
||||
mappedFields: MappedMaintenanceFields;
|
||||
categorySuggestion: CategorySuggestion | null;
|
||||
rawText: string;
|
||||
overallConfidence: number;
|
||||
}
|
||||
|
||||
/** Hook state */
|
||||
export interface UseMaintenanceReceiptOcrState {
|
||||
isCapturing: boolean;
|
||||
isProcessing: boolean;
|
||||
result: MaintenanceReceiptOcrResult | null;
|
||||
receiptImageUrl: string | null;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
/** Hook return type */
|
||||
export interface UseMaintenanceReceiptOcrReturn extends UseMaintenanceReceiptOcrState {
|
||||
startCapture: () => void;
|
||||
cancelCapture: () => void;
|
||||
processImage: (file: File, croppedFile?: File) => Promise<void>;
|
||||
acceptResult: () => MappedMaintenanceFields | null;
|
||||
reset: () => void;
|
||||
updateField: (fieldName: keyof ExtractedMaintenanceReceiptFields, value: string | number | null) => void;
|
||||
}
|
||||
Reference in New Issue
Block a user