diff --git a/.planning/PHASE_10_PLAN.md b/.planning/PHASE_10_PLAN.md new file mode 100644 index 00000000..36594ac7 --- /dev/null +++ b/.planning/PHASE_10_PLAN.md @@ -0,0 +1,465 @@ +# PHASE 10: Design Color System Implementation Plan + +**Phase:** 10 - Hardcoded Color Fixes +**Goal:** Replace 44+ hardcoded Tailwind colors with DESIGN.md semantic colors +**Status:** READY FOR EXECUTION +**Estimated Duration:** 2-3 hours +**Risk Level:** LOW (color-only changes, no logic modifications) + +--- + +## PHASE OVERVIEW + +Replace all arbitrary Tailwind colors (green-*, red-*, indigo-*, amber-*, sky-*) with DESIGN.md semantic colors across 20 component files. + +### Success Criteria +- ✅ Zero arbitrary Tailwind colors remaining (green-*, red-*, blue-*, indigo-*, amber-*, sky-*, etc.) +- ✅ All colors use design system semantics (primary, secondary, tertiary, error, muted, outline) +- ✅ Build completes with zero CSS/TypeScript errors +- ✅ Test suite passes 100% +- ✅ Visual spot-check confirms correct colors at localhost:3000 + +--- + +## SEMANTIC COLOR MAPPING (Reference) + +```javascript +// ENFORCE THESE MAPPINGS +const designColors = { + // Success/Healthy Status + "tertiary": "#00e639", // For: ✅ success, online, quantity+, check-in, received + + // Error/Destructive + "error": "#ffb4ab", // For: ❌ errors, delete, quantity-, offline, low stock + "on-error": "#690005", // For: ❌ error text on light backgrounds + "error-container": "#93000a", // For: ❌ error background boxes + + // Warning/Caution + "primary": "#ffb781", // For: ⚠️ warnings, caution, important actions, REMOVE + + // Secondary/Info + "secondary": "#c8c6c5", // For: ℹ️ secondary actions, database ops, system info + + // Muted/Disabled + "muted": "#474746", // For: 🔇 disabled, placeholder, muted text + + // Outline/Border + "outline": "#a48c7c", // For: borders, dividers + "outline-variant": "#564335", // For: subtle borders +} +``` + +--- + +## TASK BREAKDOWN: 20 Files, 44+ Fixes + +### **Batch 1: Logs & Audit Components** (4 files, 10 fixes) + +#### Task 1.1: LogsTable.tsx +**File:** `frontend/components/LogsTable.tsx` +**Changes:** 6 color fixes + +```tsx +// Line 73: CHECK_IN action +- "bg-green-500/10 text-green-500 border-green-500/20" ++ "bg-tertiary/10 text-tertiary border-tertiary/20" + +// Line 75: DB & DELETE actions +- (log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" : +- log.action.includes('DELETE') ? "bg-red-500/10 text-red-500 border-red-500/30" : ++ (log.action.includes('DB') ? "bg-secondary/10 text-secondary border-secondary/20" : ++ log.action.includes('DELETE') ? "bg-error/10 text-error border-error/30" : + +// Line 77: CREATE action +- "bg-indigo-500/10 text-indigo-400 border-indigo-500/20" ++ "bg-primary/10 text-primary border-primary/20" + +// Line 99: Quantity change +- (log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500" ++ (log.quantity_change || 0) > 0 ? "text-tertiary" : ((log.quantity_change || 0) < 0 ? "text-error" + +// Line 125: TRASH badge +- "bg-rose-500 text-black" ++ "bg-error text-on-error" + +// Line 147: Quantity in modal +- (selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500" ++ (selectedLog.quantity_change || 0) > 0 ? "text-tertiary" : "text-error" +``` + +#### Task 1.2: LogsOverlay.tsx +**File:** `frontend/components/LogsOverlay.tsx` +**Changes:** 2 color fixes + +```tsx +// Line 43: Action type colors +- log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500") ++ log.action.includes('CHECK_IN') ? "text-tertiary" : (log.action.includes('TRASH') ? "text-error" : "text-primary") + +// Line 70: Quantity change +- log.quantity_change > 0 ? "text-green-400" : "text-rose-400" ++ log.quantity_change > 0 ? "text-tertiary" : "text-error" +``` + +#### Task 1.3: DebugRotationPanel.tsx +**File:** `frontend/components/DebugRotationPanel.tsx` +**Changes:** 1 color fix + +```tsx +// Line 384: Debug console +-
++
+``` + +#### Task 1.4: ItemComparisonModal.tsx +**File:** `frontend/components/ItemComparisonModal.tsx` +**Changes:** 1 color fix + +```tsx +// Line 76: Diff highlight +- className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`} ++ className={`text-sm font-mono ${different ? 'text-outline-variant' : 'text-secondary'}`} + +// Line 108: Update button +- "hover:bg-blue-600 ... focus:ring-blue-400" ++ "hover:opacity-80 ... focus:ring-primary" +``` + +--- + +### **Batch 2: Dialog & Creation Components** (5 files, 10 fixes) + +#### Task 2.1: NewItemDialog.tsx +**File:** `frontend/components/NewItemDialog.tsx` +**Changes:** 1 color fix (2 instances) + +```tsx +// Lines 29-31: Upload prompt +- "bg-indigo-500/5 border-indigo-500/20 ... text-indigo-400" +- "bg-indigo-500/10" ++ "bg-secondary/5 border-secondary/20 ... text-secondary" ++ "bg-secondary/10" +``` + +#### Task 2.2: ConfirmationModal.tsx +**File:** `frontend/components/ConfirmationModal.tsx` +**Changes:** 2 color fixes + +```tsx +// Line 62: Error alert +- "bg-rose-500/10 text-rose-50..." ++ "bg-error/10 text-error..." + +// Line 149: Delete button +- "bg-red-600 hover:bg-red-700" ++ "bg-error hover:opacity-80" +``` + +#### Task 2.3: StockAdjustmentPanel.tsx +**File:** `frontend/components/StockAdjustmentPanel.tsx` +**Changes:** 4 color fixes + +```tsx +// Line 88: Delete action hover +- "hover:bg-red-500/20 ... text-red-500" ++ "hover:bg-error/20 ... text-error" + +// Lines 235-236: Action colors +- { id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' }, +- { id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' } ++ { id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-primary' }, ++ { id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-error' } + +// Line 273: Error alert +- "bg-red-500/5 border-red-500/20" ++ "bg-error/5 border-error/20" +``` + +#### Task 2.4: AIOnboarding.tsx +**File:** `frontend/components/AIOnboarding.tsx` +**Changes:** 4 color fixes + +```tsx +// Line 120: Camera button +- "focus:ring-blue-400" ++ "focus:ring-primary" + +// Line 181: Capture button +- "text-slate-950 ... ring-offset-slate-950 ... hover:bg-surface-200" ++ "text-on-background ... ring-offset-surface-container-high ... hover:opacity-80" + +// Line 221: Extract button +- "hover:bg-blue-500 ... focus:ring-blue-400" ++ "hover:opacity-80 ... focus:ring-primary" + +// Line 464: Delete button +- "hover:text-red-500 ... focus:ring-red-500" ++ "hover:text-error ... focus:ring-error" + +// Line 405: Confirm button +- "hover:bg-blue-500 ... focus:ring-blue-400" ++ "hover:opacity-80 ... focus:ring-primary" + +// Line 200: Sparkles icon +- "text-amber-400" ++ "text-primary/80" +``` + +#### Task 2.5: PhotoModal.tsx +**File:** `frontend/components/PhotoModal.tsx` +**Changes:** 1 color fix + +```tsx +// Line 48: Close icon +- ++ +``` + +--- + +### **Batch 3: Modal & Item Management** (4 files, 8 fixes) + +#### Task 3.1: ItemDetailModal.tsx +**File:** `frontend/components/ItemDetailModal.tsx` +**Changes:** 1 color fix + +```tsx +// Line 144: Destructive button +- "bg-rose-500/10 border-rose-500/30 text-rose-500 hover:bg-rose-500/20" ++ "bg-error/10 border-error/30 text-error hover:bg-error/20" +``` + +#### Task 3.2: ItemPhotoUpload.tsx +**File:** `frontend/components/ItemPhotoUpload.tsx` +**Changes:** 1 color fix + +```tsx +// Line 151: Error message +-
{localError}
++
{localError}
+``` + +#### Task 3.3: InventoryTable.tsx +**File:** `frontend/components/InventoryTable.tsx` +**Changes:** 1 color fix + +```tsx +// Line 136: Low quantity indicator +- item.quantity <= (item.min_quantity || 0) ? "text-rose-500" : "text-primary" ++ item.quantity <= (item.min_quantity || 0) ? "text-error" : "text-primary" +``` + +#### Task 3.4: ScannerSection.tsx +**File:** `frontend/components/ScannerSection.tsx` +**Changes:** 1 color fix + +```tsx +// Line 59: Cancel button +- className="... hover:text-rose-500 ..." ++ className="... hover:text-error ..." +``` + +--- + +### **Batch 4: Pages & Layout** (4 files, 6 fixes) + +#### Task 4.1: page.tsx +**File:** `frontend/app/page.tsx` +**Changes:** 2 color fixes + +```tsx +// Lines 282-283: Scanner ready +-
+- Scanner: Ready ++
++ Scanner: Ready + +// Lines 287-288: Online status +-
+- ++
++ +``` + +#### Task 4.2: create.tsx +**File:** `frontend/app/items/create.tsx` +**Changes:** 2 color fixes + +```tsx +// Line 412: Upload status +- Uploaded ++ Uploaded + +// Line 439: Upload button +- className="... bg-green-600 ... hover:bg-green-700 ..." ++ className="... bg-tertiary ... hover:opacity-80 ..." +``` + +#### Task 4.3: SearchErrorModal.tsx +**File:** `frontend/components/SearchErrorModal.tsx` +**Changes:** 1 color fix + +```tsx +// Line 17: Error heading +-

Search failed

++

Search failed

+``` + +#### Task 4.4: SearchModal.tsx +**File:** `frontend/components/inventory/SearchModal.tsx` +**Changes:** 1 color fix + +```tsx +// Line 144: Error message +-
++
+``` + +--- + +### **Batch 5: Admin & Navigation** (3 files, 4 fixes) + +#### Task 5.1: DatabaseManager.tsx +**File:** `frontend/components/admin/DatabaseManager.tsx` +**Changes:** 1 color fix + +```tsx +// Line 50: Status indicator +-
++
+``` + +#### Task 5.2: AiManager.tsx +**File:** `frontend/components/admin/AiManager.tsx` +**Changes:** 1 color fix + +```tsx +// Line 71: Provider status +- : (p.configured ? "text-emerald-500" : "text-rose-500") ++ : (p.configured ? "text-tertiary" : "text-error") +``` + +#### Task 5.3: BottomNav.tsx +**File:** `frontend/components/BottomNav.tsx` +**Changes:** 1 color fix + +```tsx +// Line 82: Delete action nav +- className="... text-rose-500 hover:text-rose-400 ... focus:ring-rose-500 ..." ++ className="... text-error hover:opacity-80 ... focus:ring-error ..." +``` + +--- + +## IMPLEMENTATION STRATEGY + +### **Phase 1: Batch Processing** (Order by dependency) +1. **Batch 1:** Logs & Audit (no component dependencies) +2. **Batch 2:** Dialogs & Creation (depends on color system) +3. **Batch 3:** Item Management (isolated components) +4. **Batch 4:** Pages & Layout (affects multiple components) +5. **Batch 5:** Admin & Nav (cleanup) + +### **Phase 2: Verification** +```bash +# After each batch or all batches: +cd frontend && npm run build +# Zero errors expected + +npm run test +# All tests should pass + +# Visual spot-check +npm run dev +# Open localhost:3000, verify colors +``` + +### **Phase 3: Commit** +```bash +git add -A +git commit -m "fix(design): replace all 44+ hardcoded colors with DESIGN.md system + +Applied DESIGN_COLOR_RULES.md to 20 component files: +- Indigo (3) → primary/secondary +- Green (12) → tertiary (success) +- Red/Rose (20) → error (destructive) +- Amber/Sky (9) → primary/secondary + +Fixes map all status colors to semantic design system. +Build: zero errors verified." +``` + +--- + +## PARALLEL EXECUTION OPTION + +All color fixes are **independent** - can be done in parallel: + +```bash +# Option 1: Use search-and-replace with verification +grep -r "bg-green-500\|text-green-500" frontend/components --include="*.tsx" +# Replace in batches, verify after each batch + +# Option 2: Manual file-by-file (recommended for accuracy) +# Follow task breakdown above, verify build after Batch 2 +``` + +--- + +## ROLLBACK PLAN + +If issues arise: +```bash +# Single file rollback +git checkout frontend/components/{filename} + +# Full phase rollback +git reset --hard HEAD~1 + +# Verify +npm run build +``` + +--- + +## SUCCESS CHECKLIST + +Before marking phase complete: +- [ ] All 44+ color fixes applied +- [ ] Build completes with zero CSS errors +- [ ] Build completes with zero TypeScript errors +- [ ] All tests pass (npm run test) +- [ ] Visual verification at localhost:3000 +- [ ] All colors match DESIGN.md palette +- [ ] No arbitrary Tailwind colors remain +- [ ] Commit created with detailed message +- [ ] SESSION_STATE.md updated + +--- + +## ESTIMATED TIMELINE + +| Task | Duration | +|------|----------| +| Batch 1 (4 files, 10 fixes) | 20 min | +| Batch 2 (5 files, 10 fixes) | 25 min | +| Batch 3 (4 files, 8 fixes) | 20 min | +| Batch 4 (4 files, 6 fixes) | 15 min | +| Batch 5 (3 files, 4 fixes) | 10 min | +| Build & test verification | 10 min | +| Commit & documentation | 10 min | +| **Total** | **~2 hours** | + +--- + +## NEXT PHASE (Phase 11) + +After Phase 10 completion: +1. Visual testing at localhost:3000 +2. Version bump: `python3 scripts/save_version.py` +3. Push to dev branch +4. Create PR for merge review + +--- + +**Phase 10 is READY FOR EXECUTION** ✅