malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ca-grow-ops-manager/.agent/tasks/ui_refactor_plan.md
fullsizemalt dff54a60ce
Some checks are pending
Deploy to Production / deploy (push) Waiting to run
Details
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details
refactor(ui): Control Room aesthetic for core pages 
- BatchDetailPage: lifecycle timeline, KPI strip, tabbed interface
- TasksPage: operational command board with filtering sidebar
- AuditLogPage: System Ledger with clinical styling
- BatchesPage: Production Inventory with KPI cards
- Updated color tokens and typography across components
2025-12-19 20:34:19 -08:00

2 KiB
Raw Blame History

Implementation Plan - 777 Wolfpack 'Operations Command Center' UI Refactor

This plan outlines the steps to align the 777 Wolfpack UI with the "High-trust Agritech Control System" visual direction.

User Objective

  • Transform the app into a professional, data-forward operations manager.
  • Avoid "recreational" clichés in favor of a scientific, industrial agritech aesthetic.
  • Implement specialized screens for Facility Overview, Room Detail, Batch Traceability, and Task Management.

Visual System Alignment

  • Colors: Deep blue-gray/charcoal backgrounds (#0B0E14), high-contrast data cards, desaturated green accents (#10B981).
  • Typography: Legible Inter-style sans-serif for high data density.
  • Layout: Persistent sidebar, KPI strips, grid-based command centers.

Tasks

1. Batch & Lot Traceability Redesign

  • Refactor BatchDetailPage.tsx to include an event timeline (planting, harvest, etc.).
  • Implement KPI strips for yield, plant health, and compliance status.
  • Add data tabs for Environment, Tasks, and Compliance logs.

2. Operational Task Board

  • Refactor TasksPage.tsx into a high-density Kanban or specialized operational list.
  • Focus on tablet-friendly targets for on-floor use.
  • Use semantic icons for task types (Defoliation, Irrigation, IPM).

3. High-Trust Compliance & Exports

  • Refactor AuditLogPage.tsx or DocumentsPage.tsx to use clean, stripe-bordered tables.
  • Implement status badges for verified/unverified events.
  • Add clear export CTAs in the high-trust industrial style.

4. Component Library Refinement

  • Standardize the DataTable component for high density.
  • Update PageHeader across all pages for consistent site-wide navigation feels.
  • Ensure all modals/dialogs use the new charcoal/white elevated aesthetic.

Verification

  • Confirm dark mode depth and contrast across all redesigned pages.
  • Verify that no "cannabis leaf" icons are used, following the agritech brief.
  • Validate responsive behavior on tablet-sized viewports.