From 93a39c2f2c8827cdb655e6351e3036da5f37bbdf Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 12 Dec 2025 16:55:04 -0800
Subject: [PATCH] feat: BatchDetailPage with rich data visualization

- BatchDetailPage: Lifecycle journey, SVG sparkline charts, modeled sensor data
- Metrics: Temperature, humidity, VPD, CO2, light PPFD with trends
- Touch point history with categorized icons
- Health score gauge visualization
- IPM schedule display
- BatchesPage: Clickable cards linking to detail
- Stage progress mini indicator
- Days-in-cycle badge
---
 frontend/src/pages/BatchDetailPage.tsx | 419 +++++++++++++++++++++++++
 frontend/src/pages/BatchesPage.tsx     | 163 +++++-----
 frontend/src/router.tsx                |   5 +
 3 files changed, 516 insertions(+), 71 deletions(-)
 create mode 100644 frontend/src/pages/BatchDetailPage.tsx

diff --git a/frontend/src/pages/BatchDetailPage.tsx b/frontend/src/pages/BatchDetailPage.tsx
new file mode 100644
index 0000000..46b0921
--- /dev/null
+++ b/frontend/src/pages/BatchDetailPage.tsx
@@ -0,0 +1,419 @@
+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
+    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),
+    }));
+
+    // Mock touch points
+    const [touchPoints] = useState(() => [
+        { type: 'INSPECT', date: new Date().toISOString(), user: 'Alex', notes: 'Looking healthy' },
+        { type: 'WATER', date: new Date(Date.now() - 86400000).toISOString(), user: 'Jordan' },
+        { type: 'FEED', date: new Date(Date.now() - 172800000).toISOString(), user: 'Alex', notes: 'Week 3 flower nutrients' },
+        { type: 'PHOTO', date: new Date(Date.now() - 259200000).toISOString(), user: 'Sam', notes: 'Progress photo' },
+        { type: 'INSPECT', date: new Date(Date.now() - 345600000).toISOString(), user: 'Jordan', notes: 'No issues' },
+    ]);
+
+    useEffect(() => {
+        if (id) {
+            batchesApi.getById(id)
+                .then(setBatch)
+                .catch(() => 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">{touchPoints.length} entries</span>
+                    </div>
+                    <div className="p-4 divide-y divide-subtle">
+                        {touchPoints.map((tp, i) => (
+                            <TouchPoint key={i} {...tp} />
+                        ))}
+                    </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">{touchPoints.length}</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>
+    );
+}
diff --git a/frontend/src/pages/BatchesPage.tsx b/frontend/src/pages/BatchesPage.tsx
index 7c4addf..461ca09 100644
--- a/frontend/src/pages/BatchesPage.tsx
+++ b/frontend/src/pages/BatchesPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
-import { Plus, MoveRight, Sprout, Leaf, Flower, Archive, Scale, ClipboardList, Bug, Search } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Plus, MoveRight, Sprout, Leaf, Flower, Archive, Scale, ClipboardList, Bug, Search, ChevronRight, Calendar } from 'lucide-react';
 import { Batch, batchesApi } from '../lib/batchesApi';
 import { useToast } from '../context/ToastContext';
 import BatchTransitionModal from '../components/BatchTransitionModal';
@@ -11,6 +12,16 @@ import { PullToRefresh } from '../components/ui/PullToRefresh';
 import { QuickLogBar } from '../components/touchpoints/QuickLogButtons';
 import { PageHeader, SectionHeader, EmptyState, ActionButton, CardSkeleton } from '../components/ui/LinearPrimitives';
 
+const STAGE_CONFIG = {
+    CLONE_IN: { label: 'Clone', icon: Sprout, color: 'bg-blue-500', order: 0 },
+    VEGETATIVE: { label: 'Veg', icon: Leaf, color: 'bg-green-500', order: 1 },
+    FLOWERING: { label: 'Flower', icon: Flower, color: 'bg-purple-500', order: 2 },
+    HARVEST: { label: 'Harvest', icon: Archive, color: 'bg-amber-500', order: 3 },
+    DRYING: { label: 'Dry', icon: Archive, color: 'bg-orange-500', order: 4 },
+    CURING: { label: 'Cure', icon: Archive, color: 'bg-stone-500', order: 5 },
+    FINISHED: { label: 'Done', icon: Archive, color: 'bg-neutral-400', order: 6 },
+};
+
 const STAGE_GROUPS = [
     { id: 'CLONE_IN', label: 'Clones', icon: Sprout, accent: 'accent' as const },
     { id: 'VEGETATIVE', label: 'Vegetative', icon: Leaf, accent: 'success' as const },
@@ -20,6 +31,37 @@ const STAGE_GROUPS = [
     { id: 'FINISHED', label: 'Finished', icon: Archive, accent: 'default' as const },
 ];
 
+// Stage Progress Mini Component
+function StageProgressMini({ currentStage }: { currentStage: string }) {
+    const stages = ['CLONE_IN', 'VEGETATIVE', 'FLOWERING', 'HARVEST', 'DRYING', 'CURING'];
+    const currentIndex = stages.indexOf(currentStage);
+
+    return (
+        <div className="flex gap-0.5">
+            {stages.map((stage, i) => (
+                <div
+                    key={stage}
+                    className={`h-1 w-3 rounded-full ${i < currentIndex ? 'bg-success' :
+                            i === currentIndex ? 'bg-accent' :
+                                'bg-subtle'
+                        }`}
+                />
+            ))}
+        </div>
+    );
+}
+
+// Days Badge
+function DaysBadge({ startDate }: { startDate: string }) {
+    const days = Math.floor((Date.now() - new Date(startDate).getTime()) / (1000 * 60 * 60 * 24));
+    return (
+        <span className="text-[10px] text-tertiary flex items-center gap-1">
+            <Calendar size={10} />
+            Day {days}
+        </span>
+    );
+}
+
 export default function BatchesPage() {
     const { addToast } = useToast();
     const [batches, setBatches] = useState<Batch[]>([]);
@@ -71,9 +113,9 @@ export default function BatchesPage() {
                     }
                 />
 
-                <div className="space-y-8">
+                <div className="space-y-6">
                     {loading ? (
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                             {Array.from({ length: 6 }).map((_, i) => <CardSkeleton key={i} />)}
                         </div>
                     ) : groupedBatches.length === 0 ? (
@@ -100,22 +142,41 @@ export default function BatchesPage() {
 
                                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                                     {group.items.map(batch => (
-                                        <div
-                                            key={batch.id}
-                                            className="card p-4 group"
-                                        >
-                                            <div className="flex justify-between items-start mb-3">
-                                                <div>
-                                                    <h4 className="font-medium text-primary text-sm mb-1">
-                                                        {batch.name}
-                                                    </h4>
-                                                    <span className="badge">{batch.strain}</span>
+                                        <div key={batch.id} className="card group overflow-hidden">
+                                            {/* Clickable Header */}
+                                            <Link
+                                                to={`/batches/${batch.id}`}
+                                                className="block p-4 hover:bg-tertiary transition-colors"
+                                            >
+                                                <div className="flex justify-between items-start mb-2">
+                                                    <div className="flex-1 min-w-0">
+                                                        <h4 className="font-medium text-primary text-sm truncate mb-1">
+                                                            {batch.name}
+                                                        </h4>
+                                                        <div className="flex items-center gap-2">
+                                                            <span className="text-xs text-secondary">{batch.strain}</span>
+                                                            <span className="text-xs text-tertiary">•</span>
+                                                            <span className="text-xs text-tertiary">{batch.plantCount} plants</span>
+                                                        </div>
+                                                    </div>
+                                                    <ChevronRight size={14} className="text-tertiary flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
                                                 </div>
-                                                <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-fast">
+
+                                                {/* Progress & Days */}
+                                                <div className="flex items-center justify-between mt-3">
+                                                    <StageProgressMini currentStage={batch.stage} />
+                                                    <DaysBadge startDate={batch.startDate} />
+                                                </div>
+                                            </Link>
+
+                                            {/* Quick Actions */}
+                                            <div className="px-3 py-2 border-t border-subtle bg-tertiary/30 flex items-center justify-between">
+                                                <span className="text-[10px] text-tertiary">{batch.room?.name || 'No Room'}</span>
+                                                <div className="flex gap-0.5">
                                                     <ActionButton
-                                                        icon={ClipboardList}
-                                                        label="Add Task"
-                                                        onClick={() => setCreateTaskBatch(batch)}
+                                                        icon={Search}
+                                                        label="Scout"
+                                                        onClick={() => setScoutingBatch(batch)}
                                                         variant="accent"
                                                     />
                                                     <ActionButton
@@ -124,20 +185,6 @@ export default function BatchesPage() {
                                                         onClick={() => setIpmBatch(batch)}
                                                         variant="destructive"
                                                     />
-                                                    <ActionButton
-                                                        icon={Search}
-                                                        label="Scout"
-                                                        onClick={() => setScoutingBatch(batch)}
-                                                        variant="accent"
-                                                    />
-                                                    {['HARVEST', 'DRYING', 'CURING', 'FINISHED'].includes(batch.stage) && (
-                                                        <ActionButton
-                                                            icon={Scale}
-                                                            label="Log Weight"
-                                                            onClick={() => setWeightLogBatch(batch)}
-                                                            variant="accent"
-                                                        />
-                                                    )}
                                                     <ActionButton
                                                         icon={MoveRight}
                                                         label="Transition"
@@ -146,30 +193,6 @@ export default function BatchesPage() {
                                                     />
                                                 </div>
                                             </div>
-
-                                            <div className="flex items-center justify-between text-xs text-tertiary pt-3 border-t border-subtle">
-                                                <div>
-                                                    <span className="text-quaternary">Room</span>
-                                                    <span className="text-secondary ml-2 font-medium">
-                                                        {batch.room?.name || 'Unassigned'}
-                                                    </span>
-                                                </div>
-                                                <div>
-                                                    <span className="text-quaternary">Plants</span>
-                                                    <span className="text-secondary ml-2 font-medium">
-                                                        {batch.plantCount}
-                                                    </span>
-                                                </div>
-                                            </div>
-
-                                            <div className="mt-3 pt-3 border-t border-subtle">
-                                                <QuickLogBar
-                                                    batchId={batch.id}
-                                                    batchName={batch.name}
-                                                    onSuccess={() => fetchBatches()}
-                                                    compact
-                                                />
-                                            </div>
                                         </div>
                                     ))}
                                 </div>
@@ -178,6 +201,7 @@ export default function BatchesPage() {
                     )}
                 </div>
 
+                {/* Modals */}
                 {selectedBatch && (
                     <BatchTransitionModal
                         batch={selectedBatch}
@@ -188,40 +212,37 @@ export default function BatchesPage() {
                         }}
                     />
                 )}
-
                 {weightLogBatch && (
                     <WeightLogModal
                         batch={weightLogBatch}
                         onClose={() => setWeightLogBatch(null)}
+                        onSuccess={() => fetchBatches()}
+                    />
+                )}
+                {createTaskBatch && (
+                    <CreateTaskModal
+                        batchContext={createTaskBatch}
+                        onClose={() => setCreateTaskBatch(null)}
                         onSuccess={() => {
-                            fetchBatches();
-                            setWeightLogBatch(null);
+                            setCreateTaskBatch(null);
+                            addToast('Task created!', 'success');
                         }}
                     />
                 )}
-
-                {createTaskBatch && (
-                    <CreateTaskModal
-                        isOpen={true}
-                        initialBatchId={createTaskBatch.id}
-                        initialRoomId={createTaskBatch.roomId || undefined}
-                        onClose={() => setCreateTaskBatch(null)}
-                        onSuccess={() => setCreateTaskBatch(null)}
-                    />
-                )}
-
                 {ipmBatch && (
                     <IPMScheduleModal
                         batch={ipmBatch}
                         onClose={() => setIpmBatch(null)}
                     />
                 )}
-
                 {scoutingBatch && (
                     <ScoutingModal
                         batch={scoutingBatch}
                         onClose={() => setScoutingBatch(null)}
-                        onSuccess={() => { }}
+                        onSuccess={() => {
+                            fetchBatches();
+                            addToast('Scouting report logged', 'success');
+                        }}
                     />
                 )}
             </div>
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 542f1f2..c0a5f4a 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -12,6 +12,7 @@ import DashboardPage from './pages/DashboardPage';
 const DailyWalkthroughPage = lazy(() => import('./pages/DailyWalkthroughPage'));
 const RoomsPage = lazy(() => import('./pages/RoomsPage'));
 const BatchesPage = lazy(() => import('./pages/BatchesPage'));
+const BatchDetailPage = lazy(() => import('./pages/BatchDetailPage'));
 const TimeclockPage = lazy(() => import('./pages/TimeclockPage'));
 const SuppliesPage = lazy(() => import('./pages/SuppliesPage'));
 const TasksPage = lazy(() => import('./pages/TasksPage'));
@@ -110,6 +111,10 @@ export const router = createBrowserRouter([
                 path: 'batches',
                 element: <Suspense fallback={<PageLoader />}><BatchesPage /></Suspense>,
             },
+            {
+                path: 'batches/:id',
+                element: <Suspense fallback={<PageLoader />}><BatchDetailPage /></Suspense>,
+            },
             {
                 path: 'timeclock',
                 element: <Suspense fallback={<PageLoader />}><TimeclockPage /></Suspense>,