- Add rotation_degrees parameter to ImageProcessor.process_photo()
- Pass rotation through _auto_save_photo_from_extraction() to processor
- Allow no-crop fallback when crop_bounds is None
- Add buildPhotoUrl() helper to resolve backend URLs correctly
- Update frontend components to use backend URL for image sources
- Replace Use/Skip Photo buttons with checkbox in AI extraction UI
- Add images/ to .gitignore to prevent accidental commits
Addresses: rotation never applied, image 404s (relative to Next.js not backend), preview blank in edit form
The extracted image blob from AI extraction was not being sent to the backend
because Blob objects cannot be JSON serialized. Fixed by:
1. Converting Blob to base64 before sending to API
2. Renaming fields: extractedImageBlob → extracted_image_bytes, imageProcessing → image_processing
3. Removing Blob from local DB (keep original data structure for IndexedDB)
4. Applying same fix to both single item and batch update flows
This ensures the auto-photo-save feature receives the image data it needs.
The username input was conditionally hidden when it had a value, causing
the field to disappear and focus to jump to password when typing. Fixed by:
1. Always rendering the username input (removed conditional)
2. Using controlled input with value prop
3. Only auto-focus password when username is already entered
This fixes the focus-jumping bug that made it impossible to enter usernames.
- Create frontend/app/items/create.tsx with multi-step item creation workflow (Details → Photo Upload → Preview → Confirm)
- Create frontend/hooks/useItemCreate.ts custom hook managing form state, step navigation, and photo upload
- Add integration tests for item creation workflow with photo upload support
- Photo upload step supports manual crop UI with crop bounds submission
- ManualCropUI visible by default with toggle to use full photo
- Photo uploaded before item confirmation, ensuring photo is attached
- Works with mobile camera capture via ItemPhotoUpload component
- All 374 tests passing
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>
- Add focus-visible ring to logout button (was missing in audit)
- Add aria-label to logout button for screen readers
- Wrap main content in semantic <main> tag
- Improves accessibility and keyboard navigation for admin users
- Added cursor-pointer class
- Added hover:scale-105 and active:scale-95 animations
- Added focus ring for keyboard navigation
- Fixed text color contrast on selected button
- Created /color-preview route with 4 palette options
- Includes interactive color swatches, typography examples, buttons, cards, forms
- Shows contrast ratios and semantic color usage
- Added detailed proposal documentation explaining each palette
- Recommended: Proposal 1 (Green IoT) for inventory domain alignment
Preview page allows visual comparison before any implementation.
No changes to existing color system yet.
- Changed opacity-30 → opacity-70 (70% visible, still subtle)
- Increased font sizes (text-xs → text-sm, text-[11px] → text-xs)
- Changed text color to text-secondary for better contrast (8.8:1)
- Enhanced divider visibility with bg-slate-700/60 and increased width
- Maintains subtle aesthetic while ensuring readability
- Removed 74 instances of 'uppercase' Tailwind class
- Removed uppercase from card-subtitle utility in globals.css
- All UI text now displays in natural sentence/mixed case
- Maintains letter-spacing (tracking-widest) for hierarchy
This improves readability and accessibility.
- 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).
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)
Backend:
- Added UNIQUE constraint check on barcode before item creation
- Returns 409 Conflict with user-friendly message if duplicate exists
- Prevents sqlite3.IntegrityError crashes
Frontend:
- Improved error handling for cloud sync failures
- Detects 409 status code (duplicate barcode)
- Shows specific error message to user
- Gracefully falls back to local-only save
Example error message: 'Item already exists. Item with barcode P66093-002 already exists (ID: 42). Update it instead or use a different barcode.'
Issue: createItem was using hardcoded userId: 1 without checking if currentUser was authenticated. Backend requires Bearer token from authenticated user, not userId parameter.
Changes:
- Use currentUser.id instead of hardcoded 1
- Check currentUser exists before attempting cloud sync
- Add error handling for cloud sync failures
- Graceful fallback to local-only save if not authenticated
Resolves 'Network Error' during onboarding item creation.
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
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
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
