e7be23cce4
Backend: - Add getBatchById controller with touch points and IPM schedule - Add GET /batches/:id route Frontend: - Update Batch interface to include touchPoints - BatchDetailPage now uses real touch points from API - Better error handling on batch load failure
423 lines
18 KiB
TypeScript
423 lines
18 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate, Link } from 'react-router-dom';
|
|
import {
|
|
ArrowLeft, Calendar, Droplets, Thermometer, Wind, Zap,
|
|
Bug, Camera, Activity, TrendingUp, Clock, CheckCircle,
|
|
AlertTriangle, Leaf, Sun, Moon
|
|
} from 'lucide-react';
|
|
import { batchesApi, Batch } from '../lib/batchesApi';
|
|
|
|
// Mock sensor data generator
|
|
function generateMockData(days: number, min: number, max: number, variance: number = 5) {
|
|
return Array.from({ length: days }, (_, i) => ({
|
|
day: i + 1,
|
|
value: min + Math.random() * (max - min) + (Math.random() - 0.5) * variance,
|
|
timestamp: new Date(Date.now() - (days - i) * 24 * 60 * 60 * 1000).toISOString()
|
|
}));
|
|
}
|
|
|
|
// SVG Sparkline Component
|
|
function Sparkline({ data, color = '#3B82F6', height = 40 }: {
|
|
data: { value: number }[];
|
|
color?: string;
|
|
height?: number;
|
|
}) {
|
|
if (data.length === 0) return null;
|
|
|
|
const values = data.map(d => d.value);
|
|
const min = Math.min(...values);
|
|
const max = Math.max(...values);
|
|
const range = max - min || 1;
|
|
|
|
const width = 120;
|
|
const padding = 2;
|
|
|
|
const points = data.map((d, i) => {
|
|
const x = padding + (i / (data.length - 1)) * (width - padding * 2);
|
|
const y = height - padding - ((d.value - min) / range) * (height - padding * 2);
|
|
return `${x},${y}`;
|
|
}).join(' ');
|
|
|
|
return (
|
|
<svg width={width} height={height} className="overflow-visible">
|
|
<polyline
|
|
points={points}
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
{/* Current value dot */}
|
|
{data.length > 0 && (
|
|
<circle
|
|
cx={width - padding}
|
|
cy={height - padding - ((values[values.length - 1] - min) / range) * (height - padding * 2)}
|
|
r="3"
|
|
fill={color}
|
|
/>
|
|
)}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// Stage Progress Component
|
|
function StageProgress({ currentStage }: { currentStage: string }) {
|
|
const stages = [
|
|
{ id: 'CLONE_IN', label: 'Clone', icon: '🌱', days: 7 },
|
|
{ id: 'VEGETATIVE', label: 'Veg', icon: '🌿', days: 28 },
|
|
{ id: 'FLOWERING', label: 'Flower', icon: '🌸', days: 63 },
|
|
{ id: 'HARVEST', label: 'Harvest', icon: '✂️', days: 1 },
|
|
{ id: 'DRYING', label: 'Dry', icon: '🍂', days: 14 },
|
|
{ id: 'CURING', label: 'Cure', icon: '🫙', days: 30 },
|
|
];
|
|
|
|
const currentIndex = stages.findIndex(s => s.id === currentStage);
|
|
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
{stages.map((stage, i) => {
|
|
const isPast = i < currentIndex;
|
|
const isCurrent = i === currentIndex;
|
|
const isFuture = i > currentIndex;
|
|
|
|
return (
|
|
<div key={stage.id} className="flex items-center">
|
|
<div className={`
|
|
flex flex-col items-center px-2 py-1.5 rounded-md transition-colors
|
|
${isCurrent ? 'bg-accent text-white' : ''}
|
|
${isPast ? 'text-success' : ''}
|
|
${isFuture ? 'text-tertiary' : ''}
|
|
`}>
|
|
<span className="text-sm">{stage.icon}</span>
|
|
<span className="text-[9px] font-medium mt-0.5">{stage.label}</span>
|
|
</div>
|
|
{i < stages.length - 1 && (
|
|
<div className={`w-3 h-0.5 ${isPast ? 'bg-success' : 'bg-subtle'}`} />
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Metric Card with Sparkline
|
|
function MetricCard({ icon: Icon, label, value, unit, trend, data, color }: {
|
|
icon: typeof Thermometer;
|
|
label: string;
|
|
value: string;
|
|
unit: string;
|
|
trend?: 'up' | 'down' | 'stable';
|
|
data: { value: number }[];
|
|
color: string;
|
|
}) {
|
|
return (
|
|
<div className="card p-4">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-7 h-7 rounded-md bg-tertiary flex items-center justify-center">
|
|
<Icon size={14} style={{ color }} />
|
|
</div>
|
|
<span className="text-xs text-tertiary">{label}</span>
|
|
</div>
|
|
{trend && (
|
|
<span className={`text-xs ${trend === 'up' ? 'text-success' : trend === 'down' ? 'text-destructive' : 'text-tertiary'
|
|
}`}>
|
|
{trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-end justify-between">
|
|
<div>
|
|
<span className="text-2xl font-semibold text-primary">{value}</span>
|
|
<span className="text-sm text-tertiary ml-1">{unit}</span>
|
|
</div>
|
|
<Sparkline data={data} color={color} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Touch Point Item
|
|
function TouchPoint({ type, date, user, notes }: {
|
|
type: string;
|
|
date: string;
|
|
user: string;
|
|
notes?: string;
|
|
}) {
|
|
const typeConfig: Record<string, { icon: typeof Camera; color: string }> = {
|
|
WATER: { icon: Droplets, color: 'text-blue-500' },
|
|
FEED: { icon: Leaf, color: 'text-green-500' },
|
|
INSPECT: { icon: Bug, color: 'text-amber-500' },
|
|
PHOTO: { icon: Camera, color: 'text-purple-500' },
|
|
DEFOLIATE: { icon: Leaf, color: 'text-orange-500' },
|
|
TRANSPLANT: { icon: Activity, color: 'text-teal-500' },
|
|
};
|
|
|
|
const config = typeConfig[type] || { icon: Activity, color: 'text-secondary' };
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<div className="flex items-start gap-3 py-2">
|
|
<div className={`w-6 h-6 rounded-full bg-tertiary flex items-center justify-center flex-shrink-0 ${config.color}`}>
|
|
<Icon size={12} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-primary">{type}</span>
|
|
<span className="text-xs text-tertiary">{new Date(date).toLocaleDateString()}</span>
|
|
</div>
|
|
{notes && <p className="text-xs text-secondary mt-0.5 truncate">{notes}</p>}
|
|
<span className="text-[10px] text-tertiary">{user}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function BatchDetailPage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const navigate = useNavigate();
|
|
const [batch, setBatch] = useState<Batch | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Mock sensor data (will be replaced with real sensor API)
|
|
const [sensorData] = useState(() => ({
|
|
temperature: generateMockData(14, 72, 78),
|
|
humidity: generateMockData(14, 50, 65),
|
|
vpd: generateMockData(14, 0.8, 1.2),
|
|
co2: generateMockData(14, 800, 1200),
|
|
lightPPFD: generateMockData(14, 600, 900),
|
|
}));
|
|
|
|
useEffect(() => {
|
|
if (id) {
|
|
batchesApi.getById(id)
|
|
.then(setBatch)
|
|
.catch((err) => {
|
|
console.error('Failed to load batch:', err);
|
|
navigate('/batches');
|
|
})
|
|
.finally(() => setLoading(false));
|
|
}
|
|
}, [id, navigate]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[50vh]">
|
|
<div className="animate-spin w-6 h-6 border-2 border-accent border-t-transparent rounded-full" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!batch) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<p className="text-secondary">Batch not found</p>
|
|
<Link to="/batches" className="text-accent text-sm mt-2 inline-block">← Back to batches</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Calculate days in stage
|
|
const startDate = new Date(batch.startDate);
|
|
const daysInCycle = Math.floor((Date.now() - startDate.getTime()) / (1000 * 60 * 60 * 24));
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto space-y-6 pb-20 animate-in">
|
|
{/* Header */}
|
|
<div className="flex items-start gap-4">
|
|
<button
|
|
onClick={() => navigate('/batches')}
|
|
className="p-2 -ml-2 hover:bg-tertiary rounded-md transition-colors"
|
|
>
|
|
<ArrowLeft size={18} className="text-secondary" />
|
|
</button>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h1 className="text-xl font-semibold text-primary">{batch.name}</h1>
|
|
<span className={`badge ${batch.stage === 'FLOWERING' ? 'badge-warning' :
|
|
batch.stage === 'VEGETATIVE' ? 'badge-success' :
|
|
'badge'
|
|
}`}>{batch.stage}</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm text-secondary">
|
|
<span>{batch.strain}</span>
|
|
<span>•</span>
|
|
<span>{batch.plantCount} plants</span>
|
|
<span>•</span>
|
|
<span className="flex items-center gap-1">
|
|
<Calendar size={12} />
|
|
Day {daysInCycle}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stage Journey */}
|
|
<div className="card p-4 overflow-x-auto">
|
|
<h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">Lifecycle</h3>
|
|
<StageProgress currentStage={batch.stage} />
|
|
</div>
|
|
|
|
{/* Sensor Grid */}
|
|
<div>
|
|
<h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">Environment (14 days)</h3>
|
|
<div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
|
|
<MetricCard
|
|
icon={Thermometer}
|
|
label="Temperature"
|
|
value={sensorData.temperature[sensorData.temperature.length - 1].value.toFixed(1)}
|
|
unit="°F"
|
|
trend="stable"
|
|
data={sensorData.temperature}
|
|
color="#EF4444"
|
|
/>
|
|
<MetricCard
|
|
icon={Droplets}
|
|
label="Humidity"
|
|
value={sensorData.humidity[sensorData.humidity.length - 1].value.toFixed(0)}
|
|
unit="%"
|
|
trend="up"
|
|
data={sensorData.humidity}
|
|
color="#3B82F6"
|
|
/>
|
|
<MetricCard
|
|
icon={Wind}
|
|
label="VPD"
|
|
value={sensorData.vpd[sensorData.vpd.length - 1].value.toFixed(2)}
|
|
unit="kPa"
|
|
trend="stable"
|
|
data={sensorData.vpd}
|
|
color="#8B5CF6"
|
|
/>
|
|
<MetricCard
|
|
icon={Zap}
|
|
label="CO₂"
|
|
value={sensorData.co2[sensorData.co2.length - 1].value.toFixed(0)}
|
|
unit="ppm"
|
|
trend="up"
|
|
data={sensorData.co2}
|
|
color="#10B981"
|
|
/>
|
|
<MetricCard
|
|
icon={Sun}
|
|
label="Light PPFD"
|
|
value={sensorData.lightPPFD[sensorData.lightPPFD.length - 1].value.toFixed(0)}
|
|
unit="μmol"
|
|
trend="stable"
|
|
data={sensorData.lightPPFD}
|
|
color="#F59E0B"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Two Column Layout */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Touch Points */}
|
|
<div className="card">
|
|
<div className="p-4 border-b border-subtle flex items-center justify-between">
|
|
<h3 className="text-sm font-medium text-primary">Recent Activity</h3>
|
|
<span className="text-xs text-tertiary">{batch.touchPoints?.length || 0} entries</span>
|
|
</div>
|
|
<div className="p-4 divide-y divide-subtle">
|
|
{batch.touchPoints && batch.touchPoints.length > 0 ? (
|
|
batch.touchPoints.map((tp) => (
|
|
<TouchPoint
|
|
key={tp.id}
|
|
type={tp.type}
|
|
date={tp.createdAt}
|
|
user={tp.user?.name || 'Unknown'}
|
|
notes={tp.notes}
|
|
/>
|
|
))
|
|
) : (
|
|
<p className="text-sm text-tertiary text-center py-4">No activity yet</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats & IPM */}
|
|
<div className="space-y-4">
|
|
{/* Quick Stats */}
|
|
<div className="card p-4">
|
|
<h3 className="text-xs text-tertiary uppercase tracking-wider mb-4">Statistics</h3>
|
|
<div className="grid grid-cols-3 gap-4 text-center">
|
|
<div>
|
|
<div className="text-2xl font-semibold text-primary">{daysInCycle}</div>
|
|
<div className="text-xs text-tertiary">Days</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-semibold text-primary">{batch.touchPoints?.length || 0}</div>
|
|
<div className="text-xs text-tertiary">Touch Points</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-semibold text-success">0</div>
|
|
<div className="text-xs text-tertiary">Issues</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* IPM Schedule */}
|
|
{batch.ipmSchedule ? (
|
|
<div className="card p-4">
|
|
<h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">IPM Schedule</h3>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-md bg-warning-muted flex items-center justify-center">
|
|
<Bug size={18} className="text-warning" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-primary">{batch.ipmSchedule.product || 'Preventative'}</p>
|
|
<p className="text-xs text-secondary">
|
|
Next: {new Date(batch.ipmSchedule.nextTreatment).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="card p-4">
|
|
<h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">IPM Schedule</h3>
|
|
<p className="text-sm text-secondary">No IPM schedule configured</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Health Score */}
|
|
<div className="card p-4">
|
|
<h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">Health Score</h3>
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative w-16 h-16">
|
|
<svg className="w-16 h-16 -rotate-90">
|
|
<circle
|
|
cx="32"
|
|
cy="32"
|
|
r="28"
|
|
fill="none"
|
|
stroke="var(--color-bg-tertiary)"
|
|
strokeWidth="6"
|
|
/>
|
|
<circle
|
|
cx="32"
|
|
cy="32"
|
|
r="28"
|
|
fill="none"
|
|
stroke="var(--color-success)"
|
|
strokeWidth="6"
|
|
strokeDasharray={`${0.92 * 176} 176`}
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-lg font-semibold text-primary">92</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-success">Excellent</p>
|
|
<p className="text-xs text-tertiary">Based on 14 day average</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|