The retake button failed because the stream tracks could become inactive
during the crop phase, but handleRetake never re-acquired the camera.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bridge guidance overlay position to crop tool initial coordinates so the
crop box appears centered matching the viewfinder guide. Increase handle
touch targets to 44px (32px on compact viewports) for mobile usability.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three bugs fixed in the draw-first crop tool introduced by PR #114:
1. Stale cropAreaRef: replaced useEffect-based ref sync with direct
synchronous updates in handleMove and handleDrawStart. The useEffect
ran after browser paint, so handleDragEnd read stale values (often
{width:0, height:0}), preventing cropDrawn from being set.
2. Aspect ratio minSize: when aspectRatio=6 (VIN mode), height=width/6
required width>=60% to pass the height>=10% check. Now only checks
width>=minSize when aspect ratio constrains height.
3. Bounds clamping: aspect-ratio-forced height could push crop area
past 100% of container. Now clamps y position to keep within bounds.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace filesystem-based debug system (VIN_DEBUG_DIR) with standard
logger.debug() calls that flow through Loki when LOG_LEVEL=DEBUG.
Use .env.logging variable for OCR LOG_LEVEL. Increase image capture
quality to 0.95 for better OCR accuracy.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create centralized logger utility at frontend/src/utils/logger.ts
- Support debug/info/warn/error levels controlled by VITE_LOG_LEVEL
- Sanitize sensitive data (tokens, passwords, secrets) in log output
- Graceful fallback to 'info' level for invalid VITE_LOG_LEVEL values
- Add VITE_LOG_LEVEL to ImportMetaEnv type definitions
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
- Add VinCameraButton component that opens CameraCapture with VIN guidance
- Add VinOcrReviewModal showing extracted VIN and decoded vehicle data
- Confidence indicators (high/medium/low) for each field
- Mobile-responsive bottom sheet on small screens
- Accept, Edit Manually, or Retake Photo options
- Add useVinOcr hook orchestrating OCR extraction and NHTSA decode
- Update VehicleForm with camera button next to VIN input
- Form auto-populates with OCR result and decoded data on accept
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implements a reusable React camera capture component with:
- getUserMedia API for camera access on mobile and desktop
- Translucent aspect-ratio guidance overlays (VIN ~6:1, receipt ~2:3)
- Post-capture crop tool with draggable handles
- File input fallback for desktop and unsupported browsers
- Support for HEIC, JPEG, PNG (sent as-is to server)
- Full mobile responsiveness (320px - 1920px)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add useNeedsVehicleSelection and useVehicles hooks in App.tsx
- Show blocking VehicleSelectionDialog after auth gate ready
- Call downgrade API on confirm to save vehicle selections
- Invalidate queries after selection to proceed to app
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add blocking prop to prevent dismissal
- Disable backdrop click and escape key when blocking
- Hide Cancel button in blocking mode
- Update messaging for auto-downgrade scenario
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add NeedsVehicleSelectionResponse type
- Add needsVehicleSelection API method
- Add useNeedsVehicleSelection hook with staleTime: 0
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace CardElement with PaymentElement + AddressElement in subscription forms
- Add AddressElement to donation forms for billing address collection
- Now collects: Name, Address Line 1/2, City, State, Postal Code, Country
- Card details: Card Number, Expiration, CVC
- Both desktop and mobile forms updated
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added a Subscription section to the mobile Settings screen that displays:
- Current subscription tier (Free/Pro/Enterprise)
- Status indicator for non-active subscriptions
- Manage button linking to the subscription screen
- Descriptive text based on current tier
This completes the subscription section on both desktop and mobile.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fixed conditional logic for subscription description text to properly
handle the case when subscription data is not loaded or unavailable.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added a Subscription section to the desktop Settings page that displays:
- Current subscription tier (Free/Pro/Enterprise)
- Status indicator for non-active subscriptions
- Manage button linking to the subscription management page
- Descriptive text based on current tier
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When a user signs up but doesn't verify their email, clicking the Login
button on the landing page would either do nothing or get stuck in a
loading state. Now checks for pendingVerificationEmail in localStorage
(set during signup) and redirects to /verify-email instead of attempting
Auth0 login.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changed icon button hover behavior to match VehicleCard pattern:
- Removed background color fills on hover (was primary.main/error.main)
- Icons now use default MUI IconButton gray ripple on hover
- Edit icons use text.secondary color (matches VehicleCard)
- Delete icons use error.main color (matches VehicleCard)
Affected files:
- DocumentsPage.tsx
- FuelLogsList.tsx
- MaintenanceRecordsList.tsx
- MaintenanceSchedulesList.tsx
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added missing Edit icon button between Eye and Trash icons.
Clicking Edit opens EditDocumentDialog to modify the document.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Documents page: Convert from text buttons to icon buttons (Eye for
View Details, Trash for Delete), add card hover shadow effect,
convert to MUI components for consistency
- Fuel Logs: Add row hover background effect on list items
- Maintenance Records: Add card hover shadow effect
- Maintenance Schedules: Add card hover shadow effect
All changes follow the VehicleCard pattern with:
- Light gray shadow/elevation on hover with 0.2s transition
- Consistent icon button styling with mobile-responsive touch targets
- Proper MUI component usage throughout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
PostgreSQL DECIMAL columns return as strings from pg driver.
- Add Number() conversion for fuelUnits and costPerUnit in toEnhancedResponse()
- Add query invalidation for 'all' key to fix dynamic updates
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace polling-based auth detection with event-based subscription
- Remove unnecessary 100ms delay on desktop (keep 50ms for mobile)
- Unify dashboard data fetching to prevent duplicate API calls
- Use Promise.all for parallel maintenance schedule fetching
Reduces dashboard load time from ~1.5s to <500ms.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Rename "Open" button to "View Details" on desktop and mobile document lists
- Add hasDisplayableMetadata helper to check if document has metadata to display
- Conditionally render Details section only when metadata exists
- Prevents showing empty "Details" header for documents without metadata
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create ExpirationBadge component with 30-day warning and expired states
- Create DocumentCardMetadata component for type-specific field display
- Update DocumentsPage to show metadata and expiration badges on cards
- Update DocumentsMobileScreen with metadata and badges (mobile variant)
- Redesign DocumentDetailPage with side-by-side layout (desktop) and
stacked layout (mobile) showing full metadata panel
- Add 33 unit tests for new components
- Fix jest.config.ts testMatch pattern for test discovery
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add purchase price and purchase date display to vehicle detail page
- Fix form validation to handle NaN from empty number inputs using z.preprocess
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The VIN Number field incorrectly showed license plate when VIN was empty.
Now displays "Not provided" for missing VIN values, matching mobile behavior.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove CostInterval type and TCOResponse interface from frontend types
- Remove insurance/registration cost fields from VehicleForm schema and UI
- Keep purchasePrice and purchaseDate fields on vehicle form
- Remove TCODisplay component from VehicleDetailPage
- Delete TCODisplay.tsx component file
- Remove getTCO method from vehicles API client
Legacy TCO fields moved to ownership-costs feature in #29.
Backend endpoint preserved for future reporting feature.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace raw HTML checkboxes with MUI Checkbox wrapped in FormControlLabel
for consistent styling and theme integration across:
- DocumentForm.tsx (shared vehicles + scan maintenance checkboxes)
- VehicleForm.tsx (TCO enabled checkbox)
- SignupForm.tsx (terms acceptance checkbox)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Document uploads were failing with "timeout of 10000ms exceeded" error
because the global axios client timeout (10s) was too short for
medium-sized files (1-5MB).
Added calculateUploadTimeout() function that calculates timeout based on
file size: 30s base + 10s per MB. This allows uploads to complete on
slower connections while still having reasonable timeout limits.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Created DeleteDocumentConfirmDialog with context-aware messaging:
- Primary vehicle with no shares: Full delete
- Shared vehicle: Remove association only
- Primary vehicle with shares: Full delete (affects all)
- Integrated documents display in VehicleDetailPage records table
- Added delete button per document with 44px touch target
- Document deletion uses appropriate backend calls based on context
- Mobile-friendly dialog with responsive design
Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implemented comprehensive document editing capabilities:
1. Created EditDocumentDialog component:
- Responsive MUI Dialog with fullScreen on mobile
- Wraps DocumentForm in edit mode
- Proper close handlers with refetch
2. Enhanced DocumentForm to support edit mode:
- Added mode prop ('create' | 'edit')
- Pre-populate all fields from initialValues
- Use useUpdateDocument hook when in edit mode
- Multi-select for shared vehicles (insurance only)
- Vehicle and document type disabled in edit mode
- Optional file upload in edit mode
- Dynamic button text (Create/Save Changes)
3. Updated DocumentDetailPage:
- Added Edit button with proper touch targets
- Integrated EditDocumentDialog
- Refetch document on successful edit
Mobile-first implementation:
- All touch targets >= 44px
- Dialog goes fullScreen on mobile
- Form fields stack on mobile
- Shared vehicle checkboxes have min-h-[44px]
- Buttons use flex-wrap for mobile overflow
Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Created shared utility getVehicleLabel() for consistent vehicle display
- Updated DocumentsPage to show vehicle names with clickable links
- Added "Shared with X vehicles" indicator for multi-vehicle docs
- Updated DocumentDetailPage with vehicle name and shared vehicle list
- Updated DocumentsMobileScreen with vehicle names and "Shared" indicator
- All vehicle names link to vehicle detail pages
- Mobile-first with 44px touch targets on all links
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Update DocumentRecord interface to include sharedVehicleIds array
- Add optional sharedVehicleIds to Create/UpdateDocumentRequest types
- Add documentsApi.listByVehicle() method for fetching by vehicle
- Add documentsApi.addSharedVehicle() for linking vehicles
- Add documentsApi.removeVehicleFromDocument() for unlinking
- Add useDocumentsByVehicle() query hook with vehicle filter
- Add useAddSharedVehicle() mutation with optimistic updates
- Add useRemoveVehicleFromDocument() mutation with optimistic updates
- Ensure query invalidation includes both documents and documents-by-vehicle keys
- Update test mocks to include sharedVehicleIds field
- Fix optimistic update in useCreateDocument to include new fields
Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Milestone 4: Complete frontend with:
- Types aligned with backend schema
- API client for CRUD operations
- React Query hooks with optimistic updates
- OwnershipCostForm with all 6 cost types
- OwnershipCostsList with edit/delete actions
- Mobile-friendly (44px touch targets)
- Full dark mode support
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 'features/ownership-costs' to MIGRATION_ORDER in run-all.ts
- Improve OwnershipCostsList error display to not block the page
- Show friendly message when feature needs migration
