feat: Daily Walkthrough Frontend - Start + Reservoir Checks
🎨 Frontend UI Implementation (Phase 1.5) 📁 Files Created: - frontend/src/pages/DailyWalkthroughPage.tsx - frontend/src/components/walkthrough/ReservoirChecklist.tsx ✨ Features: - Mobile-first walkthrough start screen - 777 Wolfpack branding - Progress tracking - Visual tank level indicator - Touch-friendly slider (44px+ targets) - Auto status detection (OK/LOW/CRITICAL) - Color-coded status badges - Notes field - Photo upload placeholder - Responsive design (mobile → tablet → desktop) 📱 Mobile Optimizations: - Large tap targets (56px buttons) - Visual feedback (active states) - Bottom navigation on mobile - Gradient backgrounds - Backdrop blur effects - Touch-friendly sliders 🎨 UX Features: - Step-by-step wizard - Progress bar - Tank-by-tank workflow - Auto-save ready - Back navigation - Clear status indicators ⏭️ Next: Irrigation + Plant Health checklists Status: 40% Frontend Complete
This commit is contained in:
fullsizemalt
parent
e538227458
commit
d156569d99
3 changed files with 759 additions and 0 deletions
379
docs/API-WALKTHROUGH.md
Normal file
379
docs/API-WALKTHROUGH.md
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
# Daily Walkthrough API Documentation
|
||||
|
||||
**Base URL**: `/api/walkthroughs`
|
||||
**Authentication**: Required (JWT Bearer token)
|
||||
|
||||
---
|
||||
|
||||
## Endpoints
|
||||
|
||||
### 1. Start New Walkthrough
|
||||
|
||||
**POST** `/api/walkthroughs`
|
||||
|
||||
**Request Body**:
|
||||
|
||||
```json
|
||||
{
|
||||
"date": "2025-12-09T08:00:00Z" // optional, defaults to now
|
||||
}
|
||||
```
|
||||
|
||||
**Response** (201):
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"date": "2025-12-09T08:00:00Z",
|
||||
"completedBy": "user-uuid",
|
||||
"startTime": "2025-12-09T08:00:00Z",
|
||||
"endTime": null,
|
||||
"status": "IN_PROGRESS",
|
||||
"user": {
|
||||
"id": "user-uuid",
|
||||
"name": "Facility Owner",
|
||||
"email": "admin@runfoo.run",
|
||||
"role": "OWNER"
|
||||
},
|
||||
"reservoirChecks": [],
|
||||
"irrigationChecks": [],
|
||||
"plantHealthChecks": [],
|
||||
"createdAt": "2025-12-09T08:00:00Z",
|
||||
"updatedAt": "2025-12-09T08:00:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. List Walkthroughs
|
||||
|
||||
**GET** `/api/walkthroughs`
|
||||
|
||||
**Query Parameters**:
|
||||
|
||||
- `status` - Filter by status (`IN_PROGRESS`, `COMPLETED`, `INCOMPLETE`)
|
||||
- `userId` - Filter by user ID
|
||||
- `startDate` - Filter by start date (ISO 8601)
|
||||
- `endDate` - Filter by end date (ISO 8601)
|
||||
|
||||
**Example**:
|
||||
|
||||
```
|
||||
GET /api/walkthroughs?status=COMPLETED&startDate=2025-12-01&endDate=2025-12-09
|
||||
```
|
||||
|
||||
**Response** (200):
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "uuid",
|
||||
"date": "2025-12-09T08:00:00Z",
|
||||
"completedBy": "user-uuid",
|
||||
"startTime": "2025-12-09T08:00:00Z",
|
||||
"endTime": "2025-12-09T08:25:00Z",
|
||||
"status": "COMPLETED",
|
||||
"user": { ... },
|
||||
"reservoirChecks": [ ... ],
|
||||
"irrigationChecks": [ ... ],
|
||||
"plantHealthChecks": [ ... ]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. Get Walkthrough Detail
|
||||
|
||||
**GET** `/api/walkthroughs/:id`
|
||||
|
||||
**Response** (200):
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"date": "2025-12-09T08:00:00Z",
|
||||
"completedBy": "user-uuid",
|
||||
"startTime": "2025-12-09T08:00:00Z",
|
||||
"endTime": null,
|
||||
"status": "IN_PROGRESS",
|
||||
"user": { ... },
|
||||
"reservoirChecks": [ ... ],
|
||||
"irrigationChecks": [ ... ],
|
||||
"plantHealthChecks": [ ... ]
|
||||
}
|
||||
```
|
||||
|
||||
**Error** (404):
|
||||
|
||||
```json
|
||||
{
|
||||
"message": "Walkthrough not found"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Complete Walkthrough
|
||||
|
||||
**POST** `/api/walkthroughs/:id/complete`
|
||||
|
||||
**Response** (200):
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"status": "COMPLETED",
|
||||
"endTime": "2025-12-09T08:25:00Z",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. Add Reservoir Check
|
||||
|
||||
**POST** `/api/walkthroughs/:id/reservoir-checks`
|
||||
|
||||
**Request Body**:
|
||||
|
||||
```json
|
||||
{
|
||||
"tankName": "Veg Tank 1",
|
||||
"tankType": "VEG",
|
||||
"levelPercent": 85,
|
||||
"status": "OK",
|
||||
"photoUrl": "https://...",
|
||||
"notes": "All good"
|
||||
}
|
||||
```
|
||||
|
||||
**Field Validation**:
|
||||
|
||||
- `tankName`: string (required)
|
||||
- `tankType`: `"VEG"` | `"FLOWER"` (required)
|
||||
- `levelPercent`: number 0-100 (required)
|
||||
- `status`: `"OK"` | `"LOW"` | `"CRITICAL"` (required)
|
||||
- `photoUrl`: string (optional)
|
||||
- `notes`: string (optional)
|
||||
|
||||
**Response** (201):
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"walkthroughId": "walkthrough-uuid",
|
||||
"tankName": "Veg Tank 1",
|
||||
"tankType": "VEG",
|
||||
"levelPercent": 85,
|
||||
"status": "OK",
|
||||
"photoUrl": "https://...",
|
||||
"notes": "All good",
|
||||
"createdAt": "2025-12-09T08:05:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. Add Irrigation Check
|
||||
|
||||
**POST** `/api/walkthroughs/:id/irrigation-checks`
|
||||
|
||||
**Request Body**:
|
||||
|
||||
```json
|
||||
{
|
||||
"zoneName": "Veg Upstairs",
|
||||
"drippersTotal": 48,
|
||||
"drippersWorking": 47,
|
||||
"drippersFailed": ["A-12"],
|
||||
"waterFlow": true,
|
||||
"nutrientsMixed": true,
|
||||
"scheduleActive": true,
|
||||
"photoUrl": "https://...",
|
||||
"issues": "Dripper A-12 clogged"
|
||||
}
|
||||
```
|
||||
|
||||
**Field Validation**:
|
||||
|
||||
- `zoneName`: string (required) - e.g., "Veg Upstairs", "Flower Downstairs"
|
||||
- `drippersTotal`: number (required)
|
||||
- `drippersWorking`: number (required)
|
||||
- `drippersFailed`: string[] (optional) - array of dripper IDs
|
||||
- `waterFlow`: boolean (required)
|
||||
- `nutrientsMixed`: boolean (required)
|
||||
- `scheduleActive`: boolean (required)
|
||||
- `photoUrl`: string (optional)
|
||||
- `issues`: string (optional)
|
||||
|
||||
**Response** (201):
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"walkthroughId": "walkthrough-uuid",
|
||||
"zoneName": "Veg Upstairs",
|
||||
"drippersTotal": 48,
|
||||
"drippersWorking": 47,
|
||||
"drippersFailed": "[\"A-12\"]",
|
||||
"waterFlow": true,
|
||||
"nutrientsMixed": true,
|
||||
"scheduleActive": true,
|
||||
"photoUrl": "https://...",
|
||||
"issues": "Dripper A-12 clogged",
|
||||
"createdAt": "2025-12-09T08:10:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. Add Plant Health Check
|
||||
|
||||
**POST** `/api/walkthroughs/:id/plant-health-checks`
|
||||
|
||||
**Request Body**:
|
||||
|
||||
```json
|
||||
{
|
||||
"zoneName": "Flower Upstairs",
|
||||
"healthStatus": "GOOD",
|
||||
"pestsObserved": false,
|
||||
"pestType": null,
|
||||
"waterAccess": "OK",
|
||||
"foodAccess": "OK",
|
||||
"flaggedForAttention": false,
|
||||
"issuePhotoUrl": null,
|
||||
"referencePhotoUrl": "https://...",
|
||||
"notes": "All plants healthy"
|
||||
}
|
||||
```
|
||||
|
||||
**Field Validation**:
|
||||
|
||||
- `zoneName`: string (required)
|
||||
- `healthStatus`: `"GOOD"` | `"FAIR"` | `"NEEDS_ATTENTION"` (required)
|
||||
- `pestsObserved`: boolean (required)
|
||||
- `pestType`: string (optional) - required if `pestsObserved` is true
|
||||
- `waterAccess`: `"OK"` | `"ISSUES"` (required)
|
||||
- `foodAccess`: `"OK"` | `"ISSUES"` (required)
|
||||
- `flaggedForAttention`: boolean (optional, defaults to false)
|
||||
- `issuePhotoUrl`: string (optional)
|
||||
- `referencePhotoUrl`: string (optional)
|
||||
- `notes`: string (optional)
|
||||
|
||||
**Response** (201):
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "uuid",
|
||||
"walkthroughId": "walkthrough-uuid",
|
||||
"zoneName": "Flower Upstairs",
|
||||
"healthStatus": "GOOD",
|
||||
"pestsObserved": false,
|
||||
"pestType": null,
|
||||
"waterAccess": "OK",
|
||||
"foodAccess": "OK",
|
||||
"flaggedForAttention": false,
|
||||
"issuePhotoUrl": null,
|
||||
"referencePhotoUrl": "https://...",
|
||||
"notes": "All plants healthy",
|
||||
"createdAt": "2025-12-09T08:15:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Error Responses
|
||||
|
||||
### 401 Unauthorized
|
||||
|
||||
```json
|
||||
{
|
||||
"message": "Unauthorized"
|
||||
}
|
||||
```
|
||||
|
||||
### 404 Not Found
|
||||
|
||||
```json
|
||||
{
|
||||
"message": "Walkthrough not found"
|
||||
}
|
||||
```
|
||||
|
||||
### 500 Internal Server Error
|
||||
|
||||
```json
|
||||
{
|
||||
"message": "Failed to create walkthrough"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
|
||||
### Complete Morning Walkthrough
|
||||
|
||||
```bash
|
||||
# 1. Start walkthrough
|
||||
curl -X POST https://777wolfpack.runfoo.run/api/walkthroughs \
|
||||
-H "Authorization: Bearer $TOKEN" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{}'
|
||||
|
||||
# Response: { "id": "walk-123", ... }
|
||||
|
||||
# 2. Add reservoir checks (4 tanks)
|
||||
curl -X POST https://777wolfpack.runfoo.run/api/walkthroughs/walk-123/reservoir-checks \
|
||||
-H "Authorization: Bearer $TOKEN" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"tankName": "Veg Tank 1",
|
||||
"tankType": "VEG",
|
||||
"levelPercent": 85,
|
||||
"status": "OK"
|
||||
}'
|
||||
|
||||
# 3. Add irrigation checks (4 zones)
|
||||
curl -X POST https://777wolfpack.runfoo.run/api/walkthroughs/walk-123/irrigation-checks \
|
||||
-H "Authorization: Bearer $TOKEN" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"zoneName": "Veg Upstairs",
|
||||
"drippersTotal": 48,
|
||||
"drippersWorking": 48,
|
||||
"drippersFailed": [],
|
||||
"waterFlow": true,
|
||||
"nutrientsMixed": true,
|
||||
"scheduleActive": true
|
||||
}'
|
||||
|
||||
# 4. Add plant health checks (4 zones)
|
||||
curl -X POST https://777wolfpack.runfoo.run/api/walkthroughs/walk-123/plant-health-checks \
|
||||
-H "Authorization: Bearer $TOKEN" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"zoneName": "Veg Upstairs",
|
||||
"healthStatus": "GOOD",
|
||||
"pestsObserved": false,
|
||||
"waterAccess": "OK",
|
||||
"foodAccess": "OK"
|
||||
}'
|
||||
|
||||
# 5. Complete walkthrough
|
||||
curl -X POST https://777wolfpack.runfoo.run/api/walkthroughs/walk-123/complete \
|
||||
-H "Authorization: Bearer $TOKEN"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- All endpoints require authentication
|
||||
- User is automatically attributed from JWT token
|
||||
- Photos are stored as URLs (upload endpoint TBD)
|
||||
- Failed drippers are stored as JSON string
|
||||
- Cascade delete: deleting walkthrough deletes all checks
|
||||
- Timestamps are UTC ISO 8601 format
|
||||
206
frontend/src/components/walkthrough/ReservoirChecklist.tsx
Normal file
206
frontend/src/components/walkthrough/ReservoirChecklist.tsx
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
import { useState } from 'react';
|
||||
|
||||
interface Tank {
|
||||
name: string;
|
||||
type: 'VEG' | 'FLOWER';
|
||||
}
|
||||
|
||||
interface ReservoirCheckData {
|
||||
tankName: string;
|
||||
tankType: 'VEG' | 'FLOWER';
|
||||
levelPercent: number;
|
||||
status: 'OK' | 'LOW' | 'CRITICAL';
|
||||
photoUrl?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
interface ReservoirChecklistProps {
|
||||
onComplete: (checks: ReservoirCheckData[]) => void;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export default function ReservoirChecklist({ onComplete, onBack }: ReservoirChecklistProps) {
|
||||
const tanks: Tank[] = [
|
||||
{ name: 'Veg Tank 1', type: 'VEG' },
|
||||
{ name: 'Veg Tank 2', type: 'VEG' },
|
||||
{ name: 'Flower Tank 1', type: 'FLOWER' },
|
||||
{ name: 'Flower Tank 2', type: 'FLOWER' },
|
||||
];
|
||||
|
||||
const [checks, setChecks] = useState<Map<string, ReservoirCheckData>>(new Map());
|
||||
const [currentTankIndex, setCurrentTankIndex] = useState(0);
|
||||
const [levelPercent, setLevelPercent] = useState(100);
|
||||
const [notes, setNotes] = useState('');
|
||||
|
||||
const currentTank = tanks[currentTankIndex];
|
||||
const isLastTank = currentTankIndex === tanks.length - 1;
|
||||
|
||||
const getStatus = (level: number): 'OK' | 'LOW' | 'CRITICAL' => {
|
||||
if (level >= 70) return 'OK';
|
||||
if (level >= 30) return 'LOW';
|
||||
return 'CRITICAL';
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
// Save current check
|
||||
const checkData: ReservoirCheckData = {
|
||||
tankName: currentTank.name,
|
||||
tankType: currentTank.type,
|
||||
levelPercent,
|
||||
status: getStatus(levelPercent),
|
||||
notes: notes || undefined,
|
||||
};
|
||||
|
||||
const newChecks = new Map(checks);
|
||||
newChecks.set(currentTank.name, checkData);
|
||||
setChecks(newChecks);
|
||||
|
||||
if (isLastTank) {
|
||||
// Complete
|
||||
onComplete(Array.from(newChecks.values()));
|
||||
} else {
|
||||
// Next tank
|
||||
setCurrentTankIndex(currentTankIndex + 1);
|
||||
setLevelPercent(100);
|
||||
setNotes('');
|
||||
}
|
||||
};
|
||||
|
||||
const status = getStatus(levelPercent);
|
||||
const statusColor = {
|
||||
OK: 'bg-emerald-500',
|
||||
LOW: 'bg-yellow-500',
|
||||
CRITICAL: 'bg-red-500',
|
||||
}[status];
|
||||
|
||||
const statusText = {
|
||||
OK: 'Good',
|
||||
LOW: 'Low - Needs Refill',
|
||||
CRITICAL: 'Critical - Refill Now!',
|
||||
}[status];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 p-4 md:p-6 pb-24">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="w-10 h-10 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center text-white"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-xl md:text-2xl font-bold text-white">
|
||||
Reservoir Checks
|
||||
</h1>
|
||||
<p className="text-blue-200 text-sm">
|
||||
Tank {currentTankIndex + 1} of {tanks.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className="bg-blue-400 h-full transition-all duration-300"
|
||||
style={{ width: `${((currentTankIndex + 1) / tanks.length) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tank Card */}
|
||||
<div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-sm rounded-2xl shadow-2xl p-6 md:p-8 space-y-6">
|
||||
{/* Tank Info */}
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-3">💧</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">
|
||||
{currentTank.name}
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 mt-1">
|
||||
{currentTank.type === 'VEG' ? 'Vegetative' : 'Flowering'} Tank
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Level Slider */}
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Current Level
|
||||
</label>
|
||||
|
||||
{/* Visual Level Indicator */}
|
||||
<div className="relative h-48 bg-slate-200 dark:bg-slate-700 rounded-xl overflow-hidden">
|
||||
<div
|
||||
className={`absolute bottom-0 left-0 right-0 ${statusColor} transition-all duration-300`}
|
||||
style={{ height: `${levelPercent}%` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-4xl md:text-5xl font-bold text-white drop-shadow-lg">
|
||||
{levelPercent}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slider */}
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={levelPercent}
|
||||
onChange={(e) => setLevelPercent(parseInt(e.target.value))}
|
||||
className="w-full h-3 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-600"
|
||||
/>
|
||||
|
||||
{/* Status Badge */}
|
||||
<div className={`${statusColor} text-white text-center py-3 rounded-lg font-semibold`}>
|
||||
{statusText}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Notes (Optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Any issues or observations..."
|
||||
className="w-full px-4 py-3 rounded-lg border-2 border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none resize-none"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Photo Upload (Placeholder) */}
|
||||
{status !== 'OK' && (
|
||||
<div className="border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-lg p-6 text-center">
|
||||
<div className="text-3xl mb-2">📸</div>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Tap to add photo of tank level
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex-1 min-h-[56px] py-4 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 font-bold rounded-xl transition-all active:scale-[0.98]"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="flex-1 min-h-[56px] py-4 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-bold rounded-xl shadow-lg shadow-emerald-900/20 transition-all active:scale-[0.98]"
|
||||
>
|
||||
{isLastTank ? 'Complete' : 'Next Tank'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
174
frontend/src/pages/DailyWalkthroughPage.tsx
Normal file
174
frontend/src/pages/DailyWalkthroughPage.tsx
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
interface WalkthroughStep {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
export default function DailyWalkthroughPage() {
|
||||
const navigate = useNavigate();
|
||||
const [walkthroughId, setWalkthroughId] = useState<string | null>(null);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
|
||||
const steps: WalkthroughStep[] = [
|
||||
{
|
||||
id: 'reservoir',
|
||||
title: 'Reservoir Checks',
|
||||
description: 'Check all veg and flower tank levels',
|
||||
icon: '💧',
|
||||
completed: false,
|
||||
},
|
||||
{
|
||||
id: 'irrigation',
|
||||
title: 'Irrigation System',
|
||||
description: 'Verify drippers and water flow in all zones',
|
||||
icon: '🚿',
|
||||
completed: false,
|
||||
},
|
||||
{
|
||||
id: 'plant-health',
|
||||
title: 'Plant Health',
|
||||
description: 'Spot check for pests and plant health',
|
||||
icon: '🌱',
|
||||
completed: false,
|
||||
},
|
||||
];
|
||||
|
||||
const handleStartWalkthrough = async () => {
|
||||
// TODO: Call API to create walkthrough
|
||||
// For now, navigate to first step
|
||||
navigate('/walkthrough/reservoir');
|
||||
};
|
||||
|
||||
const progressPercent = (currentStep / steps.length) * 100;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-emerald-900 to-slate-900 p-4 md:p-6">
|
||||
{/* Header */}
|
||||
<div className="max-w-4xl mx-auto mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-white">
|
||||
Daily Walkthrough
|
||||
</h1>
|
||||
<p className="text-emerald-200 text-sm md:text-base mt-1">
|
||||
{new Date().toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center">
|
||||
<img
|
||||
src="/assets/logo-777-wolfpack.jpg"
|
||||
alt="777 Wolfpack"
|
||||
className="w-14 h-14 md:w-18 md:h-18 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
{walkthroughId && (
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-full h-3 overflow-hidden">
|
||||
<div
|
||||
className="bg-gradient-to-r from-emerald-500 to-emerald-400 h-full transition-all duration-500"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{!walkthroughId ? (
|
||||
/* Start Screen */
|
||||
<div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-sm rounded-2xl shadow-2xl p-6 md:p-8">
|
||||
<div className="text-center mb-8">
|
||||
<div className="text-6xl mb-4">☀️</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Good Morning!
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-300 text-base md:text-lg">
|
||||
Ready to start your daily facility walkthrough?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Steps Preview */}
|
||||
<div className="space-y-4 mb-8">
|
||||
{steps.map((step, index) => (
|
||||
<div
|
||||
key={step.id}
|
||||
className="flex items-center gap-4 p-4 bg-slate-50 dark:bg-slate-700/50 rounded-xl"
|
||||
>
|
||||
<div className="text-4xl">{step.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white text-base md:text-lg">
|
||||
{index + 1}. {step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 rounded-full border-2 border-slate-300 dark:border-slate-600" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Start Button */}
|
||||
<button
|
||||
onClick={handleStartWalkthrough}
|
||||
className="w-full min-h-[56px] py-4 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white text-lg font-bold rounded-xl shadow-lg shadow-emerald-900/20 transition-all active:scale-[0.98]"
|
||||
>
|
||||
Start Walkthrough
|
||||
</button>
|
||||
|
||||
{/* Info */}
|
||||
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
<strong>💡 Tip:</strong> This walkthrough typically takes 15-20 minutes.
|
||||
Make sure you have your phone/tablet ready for photos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* In Progress - Show current step */
|
||||
<div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-sm rounded-2xl shadow-2xl p-6 md:p-8">
|
||||
<div className="text-center">
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Step {currentStep + 1} of {steps.length}
|
||||
</p>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mt-2">
|
||||
{steps[currentStep].title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom Navigation (Mobile) */}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 p-4 md:hidden">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="flex-1 py-3 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 font-medium rounded-lg"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{walkthroughId && (
|
||||
<button
|
||||
className="flex-1 py-3 bg-emerald-600 text-white font-medium rounded-lg"
|
||||
>
|
||||
Next Step
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue