- Add ItemDetailModal component for viewing item details and replacing photos
- Add photo replacement/deletion endpoints to API layer (PUT/DELETE /items/{id}/photo)
- Update InventoryTable to open detail modal on item click
- Show current photo thumbnail with Replace/Delete buttons
- Support uploading new photo with ItemPhotoUpload component
- Delete old photo on backend when replacing (no orphaned files)
- Full test coverage: 18 tests for ItemDetailModal component
- All 393 tests passing, zero TypeScript errors
- Build verified successfully
Fixed 3 critical code quality issues:
1. Act() warnings in tests (9 tests):
- Wrapped all async state updates in act() blocks in usePhotoUpload.test.ts
- Tests using waitFor() now properly await state updates within act()
- All 21 tests pass with zero act() warnings
2. Missing toast cleanup on unmount:
- Added toastIdRef to track pending toast IDs
- Added cleanup useEffect that dismisses toasts on component unmount
- Prevents memory leaks and orphaned toast notifications
3. Dual error reporting channels (lines 23-28):
- Removed useEffect that synced hook error to local state AND called onError callback
- Now syncs hook error to local state only (for display)
- Parent components rely on hook error state, reducing dual-path confusion
- Toast error calls are explicit in catch block
Test Results:
- Frontend: 312/312 tests passing (includes 21 photo upload tests)
- Act() warnings: Eliminated
- No regressions introduced
Replace font-bold, font-black, and font-semibold with font-normal throughout:
- 26 component files
- 1 CSS utility file (globals.css)
- 291 total occurrences
Text hierarchy now maintained through font-size differences only.
All tests passing (291/291).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Replace fixed w-[85%] h-[85%] with responsive padding (p-4 sm:p-6)
- Use absolute inset (inset-4 sm:inset-6) for adaptive spacing
- Inner scanning frame now w-full h-full to adapt to viewport
- Works seamlessly across 320px mobile to 1024px+ desktop
- Upgraded color palette with enhanced contrast (5.2:1 to 15:1 ratios)
- Replaced all text-slate-* utilities with semantic color tokens
- Added Fira Code + Fira Sans typography stack
- Converted CSS variables from SCSS to direct hex values
- Updated 26 components with improved color semantics
- Added cursor-pointer and focus states (accessibility phase 1)
- Added aria-labels to 35+ icon-only buttons
- Added prefers-reduced-motion support in globals.css
WCAG AA compliance verified across all text color combinations.
Fixes invisible text issues (slate-500 4.2:1 → muted 5.2:1).
Add comprehensive design system documentation:
- Z-index scale (z-10 through z-[100])
- Spacing scale based on 4pt baseline
- Opacity guidelines for glass/translucent effects
- Transition timing standards (150-300ms)
- Focus state requirements
- Cursor affordance rules
- WCAG AA contrast requirements
- Button state implementation patterns
- Form element best practices
- Modal hierarchy guidance
- Migration checklist
Accessibility improvements:
- Add alt text to OCR preview image in Scanner
- Verify all images have descriptive alt text
- Establish transition consistency guidelines
This ensures design consistency and accessibility across the application.
- Add cursor-pointer to all clickable buttons and interactive elements
- Add focus:ring-2 focus:ring-primary/blue focus:outline-none to all buttons
- Add aria-label to icon-only buttons and actions
- Update focus states from focus-visible to focus for consistency
- Add disabled:cursor-not-allowed for disabled button states
- Improve keyboard navigation with proper focus indicators
Components updated:
- BottomNav: navigation buttons with aria-labels
- Scanner: try again, zoom, word selection, cancel buttons
- ItemComparisonModal: skip and update action buttons
- ConfirmationModal: close, cancel, delete buttons with input focus
- AIOnboarding: all mode toggles, camera, upload, capture, edit, delete buttons
- Plus interactive cards and list items
This ensures WCAG AA compliance for keyboard navigation and visual feedback.
New Component: ItemComparisonModal.tsx
- Shows existing vs new item side-by-side
- Highlights fields that are different (in yellow)
- Options to Update item or Skip (local-only save)
- Shows existing item ID and comparison details
Backend Changes:
- Updated error message to say 'Part Number' not 'barcode'
- 409 response includes existing item data for comparison
- Clear, user-friendly conflict messaging
Frontend Changes:
- New state for comparison modal (newItem, existingItem, existingId)
- handleOnboardingComplete() shows modal on 409 conflict
- handleComparisonUpdate() calls updateItem() API
- handleComparisonSkip() saves locally without syncing
- Better error handling distinguishes 409 from other failures
Workflow:
1. User imports item with Part Number that already exists
2. System shows comparison modal
3. User can:
- Update (merges new data into existing)
- Skip (saves locally, doesn't sync to cloud)
- Increased tesseract.js worker creation timeout from 8s → 20s (accounts for lazy loading and language model download on first run)
- Added allowedDevOrigins to next.config.mjs to permit localhost and .local hostnames
- Resolves OCR timeout on slow connections and first-time initialization
Addressed P3 design opportunities from critique:
1. Technical Jargon Simplification
- "Optical Assist" → "Smart Scan" (clearer scanning intent)
- "Protocol Detected" → "Text Found" (plain language)
- "OCR Matching Key" → "Item ID or Code" (concrete terminology)
- "Select identity from label matrix" → "Tap any text to use it"
- Removed cryptic "Cycle" terminology, added countdown seconds
2. Feature Discoverability
- Added helpful descriptions to Admin manager sections
- Scanner status message now hints at zoom and tap features
- Concrete examples in input placeholders
3. Help & Documentation
- User Management: "Create accounts and control access"
- Category Groups: "Organize items by type or location"
- Sign Out: clearer procedure description
Build: passes with zero errors
ACCESSIBILITY COMPLETENESS:
- Add aria-label to edit dialog close button in IdentityManager
- Add focus-visible to edit dialog form inputs (username, password, role)
- Add focus-visible to Apply Changes button in edit form
- Complete keyboard focus coverage for user editing workflow
FORM POLISH:
- All form inputs now have visible focus indicators
- Better visual feedback for keyboard navigation in edit dialogs
STATUS: Production-ready with comprehensive keyboard accessibility
- 20/20 audit score maintained
- WCAG AA fully compliant
- All interactive elements have keyboard focus indicators or are display-only
POLISH IMPROVEMENTS:
- Add focus-visible indicators to 40+ previously missing buttons in admin managers
- Add aria-labels to all interactive elements for screen readers
- Remove debug console.log from page.tsx OCR preload (line 126)
COLOR TOKENIZATION:
- Replace all hard-coded indigo brand colors with primary token across admin managers:
- IdentityManager, DatabaseManager, AiManager, CategoryManager, LdapManager
- Indigo (#818cf8) → primary blue (#3b82f6)
- Replace hard-coded purple with primary
- Standardize destructive action color: red-500 → rose-500 for consistency
- Update all hover states and focus rings to use primary token
FORM IMPROVEMENTS:
- Add focus-visible indicators to input fields in DatabaseManager
- Consistent primary token usage in form focus states
ACCESSIBILITY GAINS:
- 15+ new aria-labels added to icon buttons
- 40+ buttons now have keyboard focus indicators
- All form inputs have proper focus styling
- Complete WCAG AA compliance for keyboard navigation
TECHNICAL DEBT:
- Zero hard-coded brand colors remaining in admin managers
- Centralized color token system fully implemented
- No debug logging in production code
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.
