dff54a60ce
- 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
47 lines
2 KiB
Markdown
47 lines
2 KiB
Markdown
# 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.
|