Replace static import of tesseract.js (500KB) with dynamic import in Scanner
component. Library now only loads when OCR recognition is actually performed,
not on initial page load.
Performance Impact:
- Removes 500KB from initial bundle
- Library only loads when user activates OCR mode
- Preload strategy in page.tsx still works (loads on-demand if scanner opened)
- No functional change; same behavior, faster initial load
Implementation:
- Remove static import from Scanner.tsx (line 6)
- Replace with dynamic import at point of use (line 166+)
- page.tsx preloadOCR already uses dynamic import (no change needed)
- Improves initial page load time significantly
Build: Passes with zero errors. Compile time: 2.4s.
Replace native window.confirm() dialogs with branded ConfirmationModal component
for all delete operations (users, categories). Implements progressive disclosure
for high-risk operations and requires confirmation text input for deletions with
100+ affected items.
Features:
- ConfirmationModal component with dynamic risk levels (low/medium/high)
- High-risk operations (100+ affected items) require 'DELETE' text confirmation
- Clear consequence messaging with affected item counts
- Loading state during deletion with visual feedback
- Full keyboard accessibility (Esc to cancel, Enter to confirm)
- Proper focus management and ARIA labels
Affected:
- AdminOverlay: Delete user and category now use ConfirmationModal
- New: ConfirmationModal.tsx component
Design: Matches CreateUserModal aesthetic (clean, minimal) with rose-500
accent for danger context. Progressive disclosure shows additional warnings
only for high-risk operations.
Build: Passes with zero errors.
Accessibility:
- Add focus-visible indicators to all interactive elements (buttons, inputs)
- Create accessible CreateUserModal to replace window.prompt()
- Add aria-labels to icon buttons for screen readers
Colors & Theming:
- Move primary color to CSS variable (--primary)
- Remove hard-coded #3b82f6 from tailwind config
- Clean up color consistency across theme
UX:
- Replace prompt-based user creation with proper modal form
- Implement inline field validation with error messages
- Add loading state during form submission
- Improve visual hierarchy and spacing
Performance:
- Remove bootstrap-icons dependency (duplicate with lucide-react)
Design:
- Reduce backdrop-blur overuse (remove from overlay scrim, StatCard)
- Improve AdminOverlay responsive design
- StatCard component created with accessibility features
- Inventory, Logs, and Admin pages refactored (7 stat cards total)
- Mobile viewport testing verified (320px-1024px)
- All responsive breakpoints working correctly
- Spec coverage 100% - ready for production deployment
- Changed from Archive to Database icon
- Better semantic representation of database backups
- Improves UI clarity and consistency
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Replace Local Archives stat display with StatCard
- Consistent styling and responsive layout across admin stats
- Improves mobile content overflow handling
- Replace Total Events, Check in, Check out displays with StatCard
- Maintain Top Operator as custom card (displays string value)
- Fixes mobile content overflow with responsive layout
- Consistent styling with Inventory page
- Replace Categories, Item Types, Total Boxes with StatCard
- Fixes mobile content overflow with two-column flexbox layout
- Responsive font sizing for mobile/desktop
- Label truncation for long text
- Design two-column flexbox layout (label left, number right)
- Responsive font sizing (sm/md/lg breakpoints)
- Label truncation for long text
- Applies to Inventory, Logs, and Admin pages
- Ready for implementation review
✓ Frontend build: TypeScript compilation successful (0 errors)
✓ Full stack build: All 3 images built successfully
✓ Integration test: Services running and responding to HTTP
Ready for remote server deployment.
- Created comprehensive 4-task plan for local Docker testing
- Plan includes: frontend build, full stack build, integration tests, handover
- Updated SESSION_STATE.md with TypeScript fix status and next steps
- Ready for remote deployment verification
- Fix null type error in AIOnboarding.tsx line 352: img src attribute
- Fix similar issue in Scanner.tsx line 237: capturedImage null handling
- Use '|| undefined' pattern to satisfy React 19/Next.js 15 type requirements
- Both components now properly handle null/undefined image states
