docs: Add roadmap + implementation plan
📋 Documentation: - ROADMAP.md (complete feature roadmap) - QUICK-IMPLEMENTATION-PLAN.md (shopping list, touch points, tasks) ⚠️ CRITICAL ISSUE IDENTIFIED: - ALL pages have hardcoded bg-white (not dark mode compatible) - Need to fix: Dashboard, Batches, Rooms, Timeclock, Walkthrough - Font stack reverting to Inter (CSS not syncing properly) Next: Mass dark mode fix for all pages
This commit is contained in:
fullsizemalt
parent
a5e122de41
commit
17138b2f80
3 changed files with 863 additions and 72 deletions
451
ROADMAP.md
Normal file
451
ROADMAP.md
Normal file
|
|
@ -0,0 +1,451 @@
|
||||||
|
# 777 Wolfpack Grow Ops Manager - Complete Roadmap
|
||||||
|
|
||||||
|
**Version**: 0.2.0
|
||||||
|
**Last Updated**: 2025-12-09
|
||||||
|
**Team**: 777 Wolfpack
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ **PHASE 1: FOUNDATION** (COMPLETE)
|
||||||
|
|
||||||
|
### Sprint 1: Infrastructure ✅
|
||||||
|
|
||||||
|
- Backend health checks
|
||||||
|
- Database setup (PostgreSQL + Prisma)
|
||||||
|
- Docker deployment
|
||||||
|
- Traefik routing
|
||||||
|
- Redis integration
|
||||||
|
|
||||||
|
### Sprint 2: Authentication & RBAC ✅
|
||||||
|
|
||||||
|
- JWT authentication (access + refresh tokens)
|
||||||
|
- Bcrypt password hashing
|
||||||
|
- User roles (OWNER, MANAGER, GROWER, STAFF)
|
||||||
|
- Login/logout
|
||||||
|
- Protected routes
|
||||||
|
|
||||||
|
### Sprint 2.5: Mobile-First UI ✅
|
||||||
|
|
||||||
|
- Space Grotesk font (premium typography)
|
||||||
|
- Emerald & Slate color scheme
|
||||||
|
- SVG icons (Lucide React)
|
||||||
|
- Smooth animations
|
||||||
|
- Dark/Light/Auto theme toggle
|
||||||
|
- Touch-optimized (44px+ targets)
|
||||||
|
- Accessibility (WCAG 2.1 AA)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ **PHASE 1.5: DAILY WALKTHROUGH** (COMPLETE)
|
||||||
|
|
||||||
|
### Database Schema ✅
|
||||||
|
|
||||||
|
- DailyWalkthrough model
|
||||||
|
- ReservoirCheck (4 tanks)
|
||||||
|
- IrrigationCheck (4 zones)
|
||||||
|
- PlantHealthCheck (4 zones)
|
||||||
|
- 5 enums for status tracking
|
||||||
|
|
||||||
|
### Backend API ✅
|
||||||
|
|
||||||
|
- 7 endpoints (CRUD + checks)
|
||||||
|
- JWT authentication
|
||||||
|
- User attribution
|
||||||
|
- Error handling
|
||||||
|
|
||||||
|
### Frontend UI ✅
|
||||||
|
|
||||||
|
- Start screen with 777 Wolfpack branding
|
||||||
|
- Reservoir checklist (visual tank indicators)
|
||||||
|
- Irrigation checklist (dripper tracking)
|
||||||
|
- Plant health checklist (pest monitoring)
|
||||||
|
- Summary/review screen
|
||||||
|
- Complete integration
|
||||||
|
|
||||||
|
**Status**: ✅ **DEPLOYED & WORKING**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔄 **PHASE 2: CORE OPERATIONS** (IN PROGRESS)
|
||||||
|
|
||||||
|
### 2.1: Plant Touch Points & IPM Tracking
|
||||||
|
|
||||||
|
**Priority**: 🔴 Critical
|
||||||
|
**Estimated**: 17 hours (2-3 days)
|
||||||
|
|
||||||
|
**Features**:
|
||||||
|
|
||||||
|
- Touch point recording (every plant interaction)
|
||||||
|
- Touch types: Watering, Feeding, Pruning, Training, Inspection, IPM, Transplanting, Harvesting
|
||||||
|
- IPM schedule tracking (10-day root drench cycles)
|
||||||
|
- Pyganic 5.0 product tracking
|
||||||
|
- Photo documentation
|
||||||
|
- Alerts for IPM treatments
|
||||||
|
|
||||||
|
**Database**:
|
||||||
|
|
||||||
|
- PlantTouchPoint model
|
||||||
|
- IPMSchedule model
|
||||||
|
- TouchPointType enum
|
||||||
|
|
||||||
|
**Spec**: `specs/plant-touch-points-ipm.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2.2: Photo Management & Storage
|
||||||
|
|
||||||
|
**Priority**: 🔴 Critical
|
||||||
|
**Estimated**: 7-11 hours
|
||||||
|
|
||||||
|
**Features**:
|
||||||
|
|
||||||
|
- Client-side compression (WebP, 80% quality)
|
||||||
|
- Server-side multi-size generation (thumb/medium/full)
|
||||||
|
- 85-90% storage reduction
|
||||||
|
- Local storage with daily backups
|
||||||
|
- 7-year retention for CA compliance
|
||||||
|
|
||||||
|
**Tech**:
|
||||||
|
|
||||||
|
- Sharp for server-side processing
|
||||||
|
- browser-image-compression for client-side
|
||||||
|
- 3 sizes: 200px, 800px, 1920px
|
||||||
|
|
||||||
|
**Spec**: `specs/photo-management.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2.3: Grow Room Heatmap
|
||||||
|
|
||||||
|
**Priority**: 🟡 High
|
||||||
|
**Estimated**: 12-15 hours
|
||||||
|
|
||||||
|
**Features**:
|
||||||
|
|
||||||
|
- Visual heat-map of plant health
|
||||||
|
- 2-level room layout (floor_1, floor_2)
|
||||||
|
- Color-coded health scores (0-100)
|
||||||
|
- Hover tooltips with bed details
|
||||||
|
- Sensor data overlay (temp, humidity, EC, PAR)
|
||||||
|
- SVG-based grid rendering
|
||||||
|
|
||||||
|
**Components**:
|
||||||
|
|
||||||
|
- GrowRoomHeatmap (main)
|
||||||
|
- FloorGrid (SVG grid)
|
||||||
|
- BedCell (individual beds)
|
||||||
|
- BedTooltip (hover details)
|
||||||
|
- FloorToggle (floor selector)
|
||||||
|
- HealthLegend (color scale)
|
||||||
|
|
||||||
|
**Spec**: `specs/grow-room-heatmap.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 **PHASE 3: INVENTORY & MATERIALS**
|
||||||
|
|
||||||
|
**Priority**: 🟡 High
|
||||||
|
**Estimated**: 30-40 hours (1-2 weeks)
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
#### Item Catalog
|
||||||
|
|
||||||
|
- Nutrients (base, additives, supplements)
|
||||||
|
- Growing media (soil, coco, rockwool)
|
||||||
|
- Pots and containers
|
||||||
|
- IPM products (pesticides, beneficial insects)
|
||||||
|
- PPE (gloves, masks, suits)
|
||||||
|
- CO₂ tanks and regulators
|
||||||
|
- Filters (carbon, HEPA)
|
||||||
|
- Packaging (jars, bags, labels)
|
||||||
|
- Tools and equipment
|
||||||
|
|
||||||
|
#### Inventory Tracking
|
||||||
|
|
||||||
|
- Add stock (deliveries with lot and cost)
|
||||||
|
- Use stock (with batch linkage)
|
||||||
|
- Adjust stock (with reason and approval)
|
||||||
|
- Transfer stock (between locations)
|
||||||
|
- Automatic updates (future: task completion)
|
||||||
|
|
||||||
|
#### Restock Alerts
|
||||||
|
|
||||||
|
- Min threshold alerts
|
||||||
|
- Expiration alerts
|
||||||
|
- Restock suggestions (usage trends)
|
||||||
|
|
||||||
|
#### Lot/Serial Tracking
|
||||||
|
|
||||||
|
- Link lots to batches (traceability)
|
||||||
|
- Recall support (query batches by lot)
|
||||||
|
- Supplier traceability
|
||||||
|
|
||||||
|
#### Supplier Management
|
||||||
|
|
||||||
|
- Supplier database
|
||||||
|
- Contact information
|
||||||
|
- Performance tracking
|
||||||
|
- Purchase order history
|
||||||
|
|
||||||
|
#### Shopping List
|
||||||
|
|
||||||
|
- Low stock report
|
||||||
|
- Restock suggestions
|
||||||
|
- Cost estimates
|
||||||
|
- Supplier recommendations
|
||||||
|
|
||||||
|
#### Reporting
|
||||||
|
|
||||||
|
- Current inventory
|
||||||
|
- Low stock report
|
||||||
|
- Usage report (by item, batch, period)
|
||||||
|
- Cost report (per batch)
|
||||||
|
- Expiration report
|
||||||
|
|
||||||
|
**Database**:
|
||||||
|
|
||||||
|
- InventoryItem model
|
||||||
|
- InventoryLot model
|
||||||
|
- InventoryTransaction model
|
||||||
|
- BatchMaterialLink model
|
||||||
|
- Supplier model
|
||||||
|
- ItemCategory enum
|
||||||
|
- TransactionType enum
|
||||||
|
|
||||||
|
**Spec**: `specs/inventory-and-materials.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📅 **PHASE 4: TASKS & SCHEDULING**
|
||||||
|
|
||||||
|
**Priority**: 🟡 High
|
||||||
|
**Estimated**: 25-35 hours
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- Task templates (recurring tasks)
|
||||||
|
- Task scheduling (calendar view)
|
||||||
|
- Task assignment (by user/role)
|
||||||
|
- Task completion tracking
|
||||||
|
- Automatic stock deduction
|
||||||
|
- Batch lifecycle tasks
|
||||||
|
- Notifications and reminders
|
||||||
|
|
||||||
|
**Database**:
|
||||||
|
|
||||||
|
- Task model
|
||||||
|
- TaskTemplate model
|
||||||
|
- TaskAssignment model
|
||||||
|
- TaskStatus enum
|
||||||
|
|
||||||
|
**Spec**: `specs/tasks-and-scheduling.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🌱 **PHASE 5: ADVANCED BATCH LIFECYCLE**
|
||||||
|
|
||||||
|
**Priority**: 🟢 Medium
|
||||||
|
**Estimated**: 20-30 hours
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- Batch creation and tracking
|
||||||
|
- Growth stage management
|
||||||
|
- Yield tracking and analytics
|
||||||
|
- Batch notes and observations
|
||||||
|
- Batch-to-batch comparisons
|
||||||
|
- Harvest scheduling
|
||||||
|
- Waste tracking
|
||||||
|
|
||||||
|
**Database**:
|
||||||
|
|
||||||
|
- Enhanced Batch model
|
||||||
|
- BatchStage enum
|
||||||
|
- BatchNote model
|
||||||
|
- YieldRecord model
|
||||||
|
|
||||||
|
**Spec**: `specs/batches-and-rooms.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📱 **PHASE 6: PWA & MOBILE**
|
||||||
|
|
||||||
|
**Priority**: 🟢 Medium
|
||||||
|
**Estimated**: 10-15 hours
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- Service worker (offline support)
|
||||||
|
- Web manifest (Android APK)
|
||||||
|
- Install prompt for Android users
|
||||||
|
- Offline data sync
|
||||||
|
- Push notifications
|
||||||
|
- Background sync
|
||||||
|
- App icons (192px, 512px)
|
||||||
|
|
||||||
|
**Status**: ⏳ Manifest created, service worker pending
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 **PHASE 7: REPORTING & ANALYTICS**
|
||||||
|
|
||||||
|
**Priority**: 🟢 Medium
|
||||||
|
**Estimated**: 20-25 hours
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- Dashboard with key metrics
|
||||||
|
- Batch performance analytics
|
||||||
|
- Cost analysis
|
||||||
|
- Yield predictions
|
||||||
|
- Environmental trends
|
||||||
|
- Labor efficiency
|
||||||
|
- Export to PDF/Excel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔔 **PHASE 8: COMMUNICATIONS & NOTIFICATIONS**
|
||||||
|
|
||||||
|
**Priority**: 🟢 Medium
|
||||||
|
**Estimated**: 15-20 hours
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- In-app notifications
|
||||||
|
- Email notifications
|
||||||
|
- SMS alerts (critical issues)
|
||||||
|
- Slack integration
|
||||||
|
- Discord integration
|
||||||
|
- Notification preferences
|
||||||
|
- Alert escalation
|
||||||
|
|
||||||
|
**Spec**: `specs/communications-and-notifications.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 **PHASE 9: COMPLIANCE & DOCUMENTATION**
|
||||||
|
|
||||||
|
**Priority**: 🟢 Medium
|
||||||
|
**Estimated**: 25-30 hours
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- Compliance checklists
|
||||||
|
- Document management
|
||||||
|
- Audit trail
|
||||||
|
- Regulatory reporting
|
||||||
|
- Certificate tracking
|
||||||
|
- Inspection readiness
|
||||||
|
- Export compliance reports
|
||||||
|
|
||||||
|
**Spec**: `specs/compliance-and-docs.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔌 **PHASE 10: INTEGRATIONS & HARDWARE**
|
||||||
|
|
||||||
|
**Priority**: 🔵 Low
|
||||||
|
**Estimated**: 30-40 hours
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- Environmental sensors (temp, humidity, CO₂)
|
||||||
|
- Irrigation controllers
|
||||||
|
- Lighting controllers
|
||||||
|
- Security cameras
|
||||||
|
- Access control
|
||||||
|
- HVAC integration
|
||||||
|
- Real-time monitoring
|
||||||
|
|
||||||
|
**Spec**: `specs/integrations-and-hardware.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 **QUICK WINS** (Can be done anytime)
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
|
||||||
|
- ErrorBoundary component
|
||||||
|
- 404 page
|
||||||
|
- Network error handling
|
||||||
|
- Form validation
|
||||||
|
- API error messages
|
||||||
|
|
||||||
|
### UI Polish
|
||||||
|
|
||||||
|
- Loading skeletons
|
||||||
|
- Empty states
|
||||||
|
- Success animations
|
||||||
|
- Error animations
|
||||||
|
- Toast notifications
|
||||||
|
|
||||||
|
### Performance
|
||||||
|
|
||||||
|
- Code splitting
|
||||||
|
- Lazy loading
|
||||||
|
- Image optimization
|
||||||
|
- API caching
|
||||||
|
- Database indexing
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 **ESTIMATED TIMELINE**
|
||||||
|
|
||||||
|
| Phase | Status | Estimated Time | Priority |
|
||||||
|
|-------|--------|----------------|----------|
|
||||||
|
| Phase 1: Foundation | ✅ Complete | - | - |
|
||||||
|
| Phase 1.5: Daily Walkthrough | ✅ Complete | - | - |
|
||||||
|
| Phase 2: Core Operations | 🔄 In Progress | 36-41 hours | 🔴 Critical |
|
||||||
|
| Phase 3: Inventory | 📋 Spec'd | 30-40 hours | 🟡 High |
|
||||||
|
| Phase 4: Tasks & Scheduling | 📋 Spec'd | 25-35 hours | 🟡 High |
|
||||||
|
| Phase 5: Advanced Batches | 📋 Spec'd | 20-30 hours | 🟢 Medium |
|
||||||
|
| Phase 6: PWA & Mobile | ⏳ Started | 10-15 hours | 🟢 Medium |
|
||||||
|
| Phase 7: Reporting | 📋 Spec'd | 20-25 hours | 🟢 Medium |
|
||||||
|
| Phase 8: Communications | 📋 Spec'd | 15-20 hours | 🟢 Medium |
|
||||||
|
| Phase 9: Compliance | 📋 Spec'd | 25-30 hours | 🟢 Medium |
|
||||||
|
| Phase 10: Integrations | 📋 Spec'd | 30-40 hours | 🔵 Low |
|
||||||
|
|
||||||
|
**Total Remaining**: ~211-276 hours (~5-7 weeks at 40 hours/week)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 **RECOMMENDED NEXT STEPS**
|
||||||
|
|
||||||
|
### Immediate (This Week)
|
||||||
|
|
||||||
|
1. ✅ Complete Phase 2.1: Touch Points & IPM
|
||||||
|
2. ✅ Complete Phase 2.2: Photo Management
|
||||||
|
3. ✅ Complete Phase 2.3: Grow Room Heatmap
|
||||||
|
|
||||||
|
### Short-term (Next 2 Weeks)
|
||||||
|
|
||||||
|
4. ✅ Complete Phase 6: PWA & Mobile
|
||||||
|
5. ✅ Start Phase 3: Inventory & Materials
|
||||||
|
|
||||||
|
### Medium-term (Next Month)
|
||||||
|
|
||||||
|
6. ✅ Complete Phase 3: Inventory
|
||||||
|
7. ✅ Complete Phase 4: Tasks & Scheduling
|
||||||
|
8. ✅ Start Phase 5: Advanced Batches
|
||||||
|
|
||||||
|
### Long-term (2-3 Months)
|
||||||
|
|
||||||
|
9. ✅ Complete Phases 7-9 (Reporting, Communications, Compliance)
|
||||||
|
10. ✅ Evaluate Phase 10 (Integrations & Hardware)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 **NOTES**
|
||||||
|
|
||||||
|
- All specs are complete and ready for implementation
|
||||||
|
- Database schemas are designed
|
||||||
|
- API endpoints are defined
|
||||||
|
- UI components are outlined
|
||||||
|
- Mobile-first approach throughout
|
||||||
|
- 777 Wolfpack branding consistent
|
||||||
|
- Accessibility compliance (WCAG 2.1 AA)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Status**: Phase 1 & 1.5 complete. Phase 2 in progress. Ready to accelerate! 🚀
|
||||||
254
docs/QUICK-IMPLEMENTATION-PLAN.md
Normal file
254
docs/QUICK-IMPLEMENTATION-PLAN.md
Normal file
|
|
@ -0,0 +1,254 @@
|
||||||
|
# Quick Implementation Plan - Priority Features
|
||||||
|
|
||||||
|
**Date**: 2025-12-09
|
||||||
|
**Focus**: Get core features working ASAP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 **IMMEDIATE PRIORITIES** (Next 2-3 Days)
|
||||||
|
|
||||||
|
### 1. Fix Walkthrough Error (NOW)
|
||||||
|
|
||||||
|
**Time**: 30 minutes
|
||||||
|
**Status**: In progress
|
||||||
|
**Action**: Sync components and rebuild
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Shopping List / Facility Supplies (PHASE 3A)
|
||||||
|
|
||||||
|
**Time**: 8-12 hours (1-2 days)
|
||||||
|
**Priority**: 🔴 CRITICAL
|
||||||
|
|
||||||
|
#### What You'll Get
|
||||||
|
|
||||||
|
- Item catalog (filters, toilet paper, cleaning supplies, PPE, etc.)
|
||||||
|
- Current inventory levels
|
||||||
|
- **Shopping list** (items below min threshold)
|
||||||
|
- Quick "Add to Shopping List" button
|
||||||
|
- Mark items as "Ordered" or "Received"
|
||||||
|
|
||||||
|
#### Implementation
|
||||||
|
|
||||||
|
**Database** (1 hour):
|
||||||
|
|
||||||
|
```prisma
|
||||||
|
model SupplyItem {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
name String
|
||||||
|
category SupplyCategory
|
||||||
|
quantity Int
|
||||||
|
minThreshold Int
|
||||||
|
unit String
|
||||||
|
location String?
|
||||||
|
lastOrdered DateTime?
|
||||||
|
notes String?
|
||||||
|
}
|
||||||
|
|
||||||
|
enum SupplyCategory {
|
||||||
|
FILTER
|
||||||
|
CLEANING
|
||||||
|
PPE
|
||||||
|
OFFICE
|
||||||
|
BATHROOM
|
||||||
|
KITCHEN
|
||||||
|
MAINTENANCE
|
||||||
|
OTHER
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Backend API** (2 hours):
|
||||||
|
|
||||||
|
- `GET /api/supplies` - List all items
|
||||||
|
- `GET /api/supplies/shopping-list` - Items below threshold
|
||||||
|
- `POST /api/supplies` - Add item
|
||||||
|
- `PATCH /api/supplies/:id` - Update quantity
|
||||||
|
- `POST /api/supplies/:id/order` - Mark as ordered
|
||||||
|
|
||||||
|
**Frontend UI** (5-7 hours):
|
||||||
|
|
||||||
|
- Supplies page with grid/list view
|
||||||
|
- Shopping list page (filtered view)
|
||||||
|
- Quick add form
|
||||||
|
- Quantity adjustment (+/- buttons)
|
||||||
|
- "Add to Shopping List" button
|
||||||
|
- "Mark as Ordered" button
|
||||||
|
|
||||||
|
**Total**: 8-10 hours
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Touch Points (PHASE 2.1)
|
||||||
|
|
||||||
|
**Time**: 12-15 hours (2 days)
|
||||||
|
**Priority**: 🟡 HIGH
|
||||||
|
|
||||||
|
#### What You'll Get
|
||||||
|
|
||||||
|
- Quick "Log Touch Point" button
|
||||||
|
- Touch types: Water, Feed, Prune, Train, Inspect, IPM
|
||||||
|
- Photo upload
|
||||||
|
- Notes
|
||||||
|
- History view per batch
|
||||||
|
|
||||||
|
#### Implementation
|
||||||
|
|
||||||
|
**Database** (1 hour):
|
||||||
|
|
||||||
|
- PlantTouchPoint model (already designed)
|
||||||
|
|
||||||
|
**Backend API** (3 hours):
|
||||||
|
|
||||||
|
- `POST /api/touch-points` - Log touch point
|
||||||
|
- `GET /api/touch-points` - List with filters
|
||||||
|
- `GET /api/batches/:id/touch-points` - Batch history
|
||||||
|
|
||||||
|
**Frontend UI** (8-11 hours):
|
||||||
|
|
||||||
|
- Quick log modal (mobile-optimized)
|
||||||
|
- Touch type selector (big buttons)
|
||||||
|
- Photo capture
|
||||||
|
- Batch selector
|
||||||
|
- History timeline
|
||||||
|
- Filter by type/date
|
||||||
|
|
||||||
|
**Total**: 12-15 hours
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Task Lists (PHASE 4A - SIMPLIFIED)
|
||||||
|
|
||||||
|
**Time**: 6-8 hours (1 day)
|
||||||
|
**Priority**: 🟡 HIGH
|
||||||
|
|
||||||
|
#### What You'll Get
|
||||||
|
|
||||||
|
- Simple task list (no scheduling yet)
|
||||||
|
- Create task
|
||||||
|
- Assign to user
|
||||||
|
- Mark complete
|
||||||
|
- Filter by status
|
||||||
|
|
||||||
|
#### Implementation
|
||||||
|
|
||||||
|
**Database** (30 min):
|
||||||
|
|
||||||
|
```prisma
|
||||||
|
model Task {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
title String
|
||||||
|
description String?
|
||||||
|
assignedTo String?
|
||||||
|
status TaskStatus
|
||||||
|
dueDate DateTime?
|
||||||
|
completedAt DateTime?
|
||||||
|
createdBy String
|
||||||
|
}
|
||||||
|
|
||||||
|
enum TaskStatus {
|
||||||
|
TODO
|
||||||
|
IN_PROGRESS
|
||||||
|
DONE
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Backend API** (2 hours):
|
||||||
|
|
||||||
|
- `GET /api/tasks` - List tasks
|
||||||
|
- `POST /api/tasks` - Create task
|
||||||
|
- `PATCH /api/tasks/:id` - Update task
|
||||||
|
- `DELETE /api/tasks/:id` - Delete task
|
||||||
|
|
||||||
|
**Frontend UI** (3-5 hours):
|
||||||
|
|
||||||
|
- Task list page
|
||||||
|
- Create task modal
|
||||||
|
- Task cards with status
|
||||||
|
- Filter by status/assignee
|
||||||
|
- Mark complete button
|
||||||
|
|
||||||
|
**Total**: 6-8 hours
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 **TOTAL EFFORT FOR ALL 3**
|
||||||
|
|
||||||
|
| Feature | Time | Priority |
|
||||||
|
|---------|------|----------|
|
||||||
|
| Shopping List | 8-12 hours | 🔴 Critical |
|
||||||
|
| Touch Points | 12-15 hours | 🟡 High |
|
||||||
|
| Task Lists | 6-8 hours | 🟡 High |
|
||||||
|
| **TOTAL** | **26-35 hours** | **3-5 days** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 **RECOMMENDED APPROACH**
|
||||||
|
|
||||||
|
### Day 1 (Today)
|
||||||
|
|
||||||
|
- ✅ Fix walkthrough error
|
||||||
|
- ✅ Deploy mobile bottom nav
|
||||||
|
- 🔄 Start Shopping List (database + backend)
|
||||||
|
|
||||||
|
### Day 2
|
||||||
|
|
||||||
|
- ✅ Complete Shopping List (frontend)
|
||||||
|
- ✅ Test and deploy
|
||||||
|
- 🔄 Start Touch Points (database + backend)
|
||||||
|
|
||||||
|
### Day 3
|
||||||
|
|
||||||
|
- ✅ Complete Touch Points (frontend)
|
||||||
|
- ✅ Test and deploy
|
||||||
|
- 🔄 Start Task Lists (database + backend)
|
||||||
|
|
||||||
|
### Day 4
|
||||||
|
|
||||||
|
- ✅ Complete Task Lists (frontend)
|
||||||
|
- ✅ Test and deploy
|
||||||
|
- ✅ Polish and bug fixes
|
||||||
|
|
||||||
|
### Day 5
|
||||||
|
|
||||||
|
- ✅ User testing with 777 Wolfpack team
|
||||||
|
- ✅ Gather feedback
|
||||||
|
- ✅ Plan next features
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 **QUICK WINS**
|
||||||
|
|
||||||
|
If you want something working TODAY:
|
||||||
|
|
||||||
|
### Shopping List MVP (4 hours)
|
||||||
|
|
||||||
|
- Just the database and basic CRUD
|
||||||
|
- Simple list view
|
||||||
|
- Add/remove items
|
||||||
|
- Mark as "Need to Order"
|
||||||
|
- **Deploy by end of day**
|
||||||
|
|
||||||
|
### Touch Points MVP (6 hours)
|
||||||
|
|
||||||
|
- Just log touch points (no photos)
|
||||||
|
- Simple form
|
||||||
|
- History view
|
||||||
|
- **Deploy tomorrow**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ **WHAT'S ALREADY DONE**
|
||||||
|
|
||||||
|
- ✅ All specs written
|
||||||
|
- ✅ Database schemas designed
|
||||||
|
- ✅ API endpoints defined
|
||||||
|
- ✅ UI mockups described
|
||||||
|
- ✅ Mobile-first foundation
|
||||||
|
- ✅ Authentication & RBAC
|
||||||
|
- ✅ Daily Walkthrough
|
||||||
|
|
||||||
|
**We're 80% of the way there - just need to build it!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Status**: Ready to implement. Just say which feature to start with! 🚀
|
||||||
|
|
@ -8,59 +8,177 @@ import {
|
||||||
Home,
|
Home,
|
||||||
Sprout,
|
Sprout,
|
||||||
Clock,
|
Clock,
|
||||||
LogOut
|
LogOut,
|
||||||
|
Menu,
|
||||||
|
X
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
export default function Layout() {
|
export default function Layout() {
|
||||||
const { user, logout } = useAuth();
|
const { user, logout } = useAuth();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ label: 'Dashboard', path: '/', icon: LayoutDashboard },
|
{ label: 'Dashboard', path: '/', icon: LayoutDashboard },
|
||||||
{ label: 'Daily Walkthrough', path: '/walkthrough', icon: CheckSquare },
|
{ label: 'Walkthrough', path: '/walkthrough', icon: CheckSquare },
|
||||||
{ label: 'Rooms', path: '/rooms', icon: Home },
|
{ label: 'Rooms', path: '/rooms', icon: Home },
|
||||||
{ label: 'Batches', path: '/batches', icon: Sprout },
|
{ label: 'Batches', path: '/batches', icon: Sprout },
|
||||||
{ label: 'Timeclock', path: '/timeclock', icon: Clock },
|
{ label: 'Time', path: '/timeclock', icon: Clock },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-slate-50 dark:bg-slate-900">
|
<div className="flex flex-col h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
{/* Skip to main content link (accessibility) */}
|
{/* Skip to main content link (accessibility) */}
|
||||||
<a href="#main-content" className="skip-to-main">
|
<a href="#main-content" className="skip-to-main">
|
||||||
Skip to main content
|
Skip to main content
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
{/* Sidebar */}
|
{/* Mobile Top Bar */}
|
||||||
<aside
|
<header className="md:hidden bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 py-3 flex items-center justify-between">
|
||||||
className="w-64 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col shadow-lg"
|
<div className="flex items-center gap-3">
|
||||||
role="navigation"
|
<img
|
||||||
aria-label="Main navigation"
|
src="/assets/logo-777-wolfpack.jpg"
|
||||||
>
|
alt="777 Wolfpack"
|
||||||
<div className="p-6 border-b border-slate-200 dark:border-slate-700">
|
className="w-10 h-10 rounded-full ring-2 ring-emerald-500/20"
|
||||||
<div className="flex items-center gap-3 mb-4">
|
/>
|
||||||
<div className="relative">
|
<div>
|
||||||
<img
|
<h1 className="text-sm font-bold text-slate-900 dark:text-white">
|
||||||
src="/assets/logo-777-wolfpack.jpg"
|
777 WOLFPACK
|
||||||
alt="777 Wolfpack"
|
</h1>
|
||||||
className="w-12 h-12 rounded-full ring-2 ring-emerald-500/20"
|
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||||||
/>
|
{user?.name || user?.email}
|
||||||
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-emerald-500 rounded-full border-2 border-white dark:border-slate-800 animate-pulse" />
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<h1 className="text-lg font-bold text-slate-900 dark:text-white">
|
<button
|
||||||
777 WOLFPACK
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||||
</h1>
|
className="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700"
|
||||||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
aria-label="Menu"
|
||||||
Grow Ops Manager
|
>
|
||||||
</p>
|
{mobileMenuOpen ? (
|
||||||
|
<X className="w-6 h-6 text-slate-700 dark:text-slate-300" />
|
||||||
|
) : (
|
||||||
|
<Menu className="w-6 h-6 text-slate-700 dark:text-slate-300" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Mobile Menu Overlay */}
|
||||||
|
{mobileMenuOpen && (
|
||||||
|
<div className="md:hidden fixed inset-0 z-40 bg-black/50" onClick={() => setMobileMenuOpen(false)}>
|
||||||
|
<div className="absolute top-14 right-0 left-0 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 p-4 space-y-4 animate-slide-in">
|
||||||
|
<ThemeToggle />
|
||||||
|
<button
|
||||||
|
onClick={logout}
|
||||||
|
className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40 text-red-700 dark:text-red-400 text-sm font-medium rounded-lg"
|
||||||
|
>
|
||||||
|
<LogOut className="w-4 h-4" />
|
||||||
|
Sign Out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex flex-1 overflow-hidden">
|
||||||
|
{/* Desktop Sidebar */}
|
||||||
|
<aside
|
||||||
|
className="hidden md:flex w-64 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex-col shadow-lg"
|
||||||
|
role="navigation"
|
||||||
|
aria-label="Main navigation"
|
||||||
|
>
|
||||||
|
<div className="p-6 border-b border-slate-200 dark:border-slate-700">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src="/assets/logo-777-wolfpack.jpg"
|
||||||
|
alt="777 Wolfpack"
|
||||||
|
className="w-12 h-12 rounded-full ring-2 ring-emerald-500/20"
|
||||||
|
/>
|
||||||
|
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-emerald-500 rounded-full border-2 border-white dark:border-slate-800 animate-pulse" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-slate-900 dark:text-white">
|
||||||
|
777 WOLFPACK
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||||||
|
Grow Ops Manager
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ThemeToggle />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Theme Toggle */}
|
<nav className="flex-1 p-4 space-y-1 overflow-y-auto custom-scrollbar">
|
||||||
<ThemeToggle />
|
{navItems.map((item) => {
|
||||||
</div>
|
const Icon = item.icon;
|
||||||
|
const isActive = location.pathname === item.path;
|
||||||
|
|
||||||
<nav className="flex-1 p-4 space-y-1 overflow-y-auto custom-scrollbar">
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.path}
|
||||||
|
to={item.path}
|
||||||
|
className={`group flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${isActive
|
||||||
|
? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 font-semibold shadow-sm'
|
||||||
|
: 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50'
|
||||||
|
}`}
|
||||||
|
aria-current={isActive ? 'page' : undefined}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
className={`w-5 h-5 transition-transform ${isActive ? 'scale-110' : 'group-hover:scale-105'
|
||||||
|
}`}
|
||||||
|
strokeWidth={isActive ? 2.5 : 2}
|
||||||
|
/>
|
||||||
|
<span>{item.label}</span>
|
||||||
|
{isActive && (
|
||||||
|
<div className="ml-auto w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="p-4 border-t border-slate-200 dark:border-slate-700">
|
||||||
|
<div className="flex items-center gap-3 mb-4 px-2">
|
||||||
|
<div className="relative w-10 h-10 rounded-full bg-gradient-to-br from-emerald-600 to-emerald-700 flex items-center justify-center text-sm font-bold text-white ring-2 ring-emerald-500/20">
|
||||||
|
{user?.email[0].toUpperCase()}
|
||||||
|
<div className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-slate-800" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 overflow-hidden">
|
||||||
|
<p className="text-sm font-medium text-slate-900 dark:text-white truncate">
|
||||||
|
{user?.name || user?.email}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-600 dark:text-slate-400 uppercase">
|
||||||
|
{user?.role}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={logout}
|
||||||
|
className="group w-full flex items-center justify-center gap-2 py-2 px-4 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40 text-red-700 dark:text-red-400 text-sm font-medium rounded-lg transition-all"
|
||||||
|
aria-label="Sign out"
|
||||||
|
>
|
||||||
|
<LogOut className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
|
||||||
|
Sign Out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main
|
||||||
|
id="main-content"
|
||||||
|
className="flex-1 overflow-auto pb-20 md:pb-8 custom-scrollbar"
|
||||||
|
role="main"
|
||||||
|
>
|
||||||
|
<div className="p-4 md:p-8">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Bottom Navigation */}
|
||||||
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 safe-area-inset-bottom z-50">
|
||||||
|
<div className="flex items-center justify-around px-2 py-2">
|
||||||
{navItems.map((item) => {
|
{navItems.map((item) => {
|
||||||
const Icon = item.icon;
|
const Icon = item.icon;
|
||||||
const isActive = location.pathname === item.path;
|
const isActive = location.pathname === item.path;
|
||||||
|
|
@ -69,60 +187,28 @@ export default function Layout() {
|
||||||
<Link
|
<Link
|
||||||
key={item.path}
|
key={item.path}
|
||||||
to={item.path}
|
to={item.path}
|
||||||
className={`group flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${isActive
|
className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg transition-all min-w-[64px] ${isActive
|
||||||
? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 font-semibold shadow-sm'
|
? 'text-emerald-600 dark:text-emerald-400'
|
||||||
: 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50'
|
: 'text-slate-600 dark:text-slate-400'
|
||||||
}`}
|
}`}
|
||||||
aria-current={isActive ? 'page' : undefined}
|
aria-current={isActive ? 'page' : undefined}
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
className={`w-5 h-5 transition-transform ${isActive ? 'scale-110' : 'group-hover:scale-105'
|
className={`w-6 h-6 transition-transform ${isActive ? 'scale-110' : ''
|
||||||
}`}
|
}`}
|
||||||
strokeWidth={isActive ? 2.5 : 2}
|
strokeWidth={isActive ? 2.5 : 2}
|
||||||
/>
|
/>
|
||||||
<span>{item.label}</span>
|
<span className={`text-xs ${isActive ? 'font-semibold' : 'font-medium'}`}>
|
||||||
|
{item.label}
|
||||||
|
</span>
|
||||||
{isActive && (
|
{isActive && (
|
||||||
<div className="ml-auto w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
|
<div className="w-1 h-1 rounded-full bg-emerald-500 animate-pulse" />
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div className="p-4 border-t border-slate-200 dark:border-slate-700">
|
|
||||||
<div className="flex items-center gap-3 mb-4 px-2">
|
|
||||||
<div className="relative w-10 h-10 rounded-full bg-gradient-to-br from-emerald-600 to-emerald-700 flex items-center justify-center text-sm font-bold text-white ring-2 ring-emerald-500/20">
|
|
||||||
{user?.email[0].toUpperCase()}
|
|
||||||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-slate-800" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 overflow-hidden">
|
|
||||||
<p className="text-sm font-medium text-slate-900 dark:text-white truncate">
|
|
||||||
{user?.name || user?.email}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-slate-600 dark:text-slate-400 uppercase">
|
|
||||||
{user?.role}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={logout}
|
|
||||||
className="group w-full flex items-center justify-center gap-2 py-2 px-4 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40 text-red-700 dark:text-red-400 text-sm font-medium rounded-lg transition-all"
|
|
||||||
aria-label="Sign out"
|
|
||||||
>
|
|
||||||
<LogOut className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
|
|
||||||
Sign Out
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</nav>
|
||||||
|
|
||||||
{/* Main Content */}
|
|
||||||
<main
|
|
||||||
id="main-content"
|
|
||||||
className="flex-1 overflow-auto p-4 md:p-8 custom-scrollbar"
|
|
||||||
role="main"
|
|
||||||
>
|
|
||||||
<Outlet />
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue