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,
|
||||
Sprout,
|
||||
Clock,
|
||||
LogOut
|
||||
LogOut,
|
||||
Menu,
|
||||
X
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function Layout() {
|
||||
const { user, logout } = useAuth();
|
||||
const location = useLocation();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ 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: 'Batches', path: '/batches', icon: Sprout },
|
||||
{ label: 'Timeclock', path: '/timeclock', icon: Clock },
|
||||
{ label: 'Time', path: '/timeclock', icon: Clock },
|
||||
];
|
||||
|
||||
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) */}
|
||||
<a href="#main-content" className="skip-to-main">
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className="w-64 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex 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>
|
||||
{/* Mobile Top Bar */}
|
||||
<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">
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src="/assets/logo-777-wolfpack.jpg"
|
||||
alt="777 Wolfpack"
|
||||
className="w-10 h-10 rounded-full ring-2 ring-emerald-500/20"
|
||||
/>
|
||||
<div>
|
||||
<h1 className="text-sm font-bold text-slate-900 dark:text-white">
|
||||
777 WOLFPACK
|
||||
</h1>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||||
{user?.name || user?.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700"
|
||||
aria-label="Menu"
|
||||
>
|
||||
{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>
|
||||
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<nav className="flex-1 p-4 space-y-1 overflow-y-auto custom-scrollbar">
|
||||
{navItems.map((item) => {
|
||||
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) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location.pathname === item.path;
|
||||
|
|
@ -69,60 +187,28 @@ export default function Layout() {
|
|||
<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'
|
||||
className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg transition-all min-w-[64px] ${isActive
|
||||
? 'text-emerald-600 dark:text-emerald-400'
|
||||
: 'text-slate-600 dark:text-slate-400'
|
||||
}`}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
<span>{item.label}</span>
|
||||
<span className={`text-xs ${isActive ? 'font-semibold' : 'font-medium'}`}>
|
||||
{item.label}
|
||||
</span>
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
</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 p-4 md:p-8 custom-scrollbar"
|
||||
role="main"
|
||||
>
|
||||
<Outlet />
|
||||
</main>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue