bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
master
tfm_ainventory/.planning/PHASE_10_PLAN.md

13 KiB
Raw Permalink Blame History

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)

// 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

// 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

// 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

// Line 384: Debug console
- <div className="bg-black text-green-400 p-2 rounded font-mono text-xs">
+ <div className="bg-surface-container-lowest text-tertiary p-2 rounded-none font-mono text-xs">

Task 1.4: ItemComparisonModal.tsx

File: frontend/components/ItemComparisonModal.tsx
Changes: 1 color fix

// 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)

// 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

// 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

// 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

// 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

// Line 48: Close icon
- <X size={20} className="text-rose-500" />
+ <X size={20} className="text-error" />

Batch 3: Modal & Item Management (4 files, 8 fixes)

Task 3.1: ItemDetailModal.tsx

File: frontend/components/ItemDetailModal.tsx
Changes: 1 color fix

// 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

// Line 151: Error message
- <div className="text-sm text-rose-500">{localError}</div>
+ <div className="text-sm text-error">{localError}</div>

Task 3.3: InventoryTable.tsx

File: frontend/components/InventoryTable.tsx
Changes: 1 color fix

// 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

// 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

// Lines 282-283: Scanner ready
- <div className="w-1.5 h-1.5 bg-green-500" />
- <span className="... text-green-500/90 ...">Scanner: Ready</span>
+ <div className="w-1.5 h-1.5 bg-tertiary" />
+ <span className="... text-tertiary/90 ...">Scanner: Ready</span>

// Lines 287-288: Online status
- <div className={`... ${isOnline ? 'bg-green-500 animate-pulse' : 'bg-rose-500'}`} />
- <span className={`... ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`}>
+ <div className={`... ${isOnline ? 'bg-tertiary animate-pulse' : 'bg-error'}`} />
+ <span className={`... ${isOnline ? 'text-tertiary/90' : 'text-error/90'}`}>

Task 4.2: create.tsx

File: frontend/app/items/create.tsx
Changes: 2 color fixes

// Line 412: Upload status
- <span className="font-normal text-green-400">Uploaded</span>
+ <span className="font-normal text-tertiary">Uploaded</span>

// 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

// Line 17: Error heading
- <h2 className="... text-rose-500 ...">Search failed</h2>
+ <h2 className="... text-error ...">Search failed</h2>

Task 4.4: SearchModal.tsx

File: frontend/components/inventory/SearchModal.tsx
Changes: 1 color fix

// Line 144: Error message
- <div className="... text-rose-500 bg-rose-500/10 border-rose-500/20 ...">
+ <div className="... text-error bg-error/10 border-error/20 ...">

Batch 5: Admin & Navigation (3 files, 4 fixes)

Task 5.1: DatabaseManager.tsx

File: frontend/components/admin/DatabaseManager.tsx
Changes: 1 color fix

// Line 50: Status indicator
- <div className="w-2 h-2 bg-green-500 animate-pulse" />
+ <div className="w-2 h-2 bg-tertiary animate-pulse" />

Task 5.2: AiManager.tsx

File: frontend/components/admin/AiManager.tsx
Changes: 1 color fix

// 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

// 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

# 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

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:

# 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:

# 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 ✅

Reference in New Issue View Git Blame Copy Permalink