import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; import Link from 'next/link'; import Head from 'next/head'; import { VerticalFarm, CropBatch } from '../../../lib/vertical-farming/types'; import ZoneGrid from '../../../components/vertical-farm/ZoneGrid'; import AlertPanel from '../../../components/vertical-farm/AlertPanel'; export default function FarmDetail() { const router = useRouter(); const { farmId } = router.query; const [farm, setFarm] = useState(null); const [batches, setBatches] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { if (farmId) { fetchFarmDetails(); } }, [farmId]); const fetchFarmDetails = async () => { try { const [farmRes, batchesRes] = await Promise.all([ fetch(`/api/vertical-farm/${farmId}`), fetch(`/api/vertical-farm/${farmId}/batches`), ]); const farmData = await farmRes.json(); const batchesData = await batchesRes.json(); if (farmData.success) { setFarm(farmData.farm); } if (batchesData.success) { setBatches(batchesData.batches); } } catch (error) { console.error('Error fetching farm:', error); } finally { setLoading(false); } }; if (loading) { return (

Loading farm details...

); } if (!farm) { return (

Farm Not Found

Back to Dashboard
); } const allAlerts = farm.zones.flatMap(z => z.currentEnvironment?.alerts || []); const activeBatches = batches.filter(b => b.status !== 'completed' && b.status !== 'failed'); const upcomingHarvests = activeBatches.filter(b => { const daysUntil = (new Date(b.expectedHarvestDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24); return daysUntil <= 7 && daysUntil >= 0; }); return (
{farm.name} - LocalGreenChain
← Back

{farm.name}

{farm.status}
{/* Quick Stats */}

Active Plants

{farm.specs.currentActivePlants.toLocaleString()}

Growing Area

{farm.specs.growingAreaSqm}m²

Active Batches

{activeBatches.length}

Capacity

{farm.currentCapacityUtilization}%

Efficiency

{farm.energyEfficiencyScore}%

{/* Alerts */} {allAlerts.length > 0 && (
)}
{/* Main Content */}
{/* Zone Overview */}

Zone Overview

View All →
{/* Upcoming Harvests */} {upcomingHarvests.length > 0 && (

Upcoming Harvests

{upcomingHarvests.map(batch => { const daysUntil = Math.ceil( (new Date(batch.expectedHarvestDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24) ); return (

{batch.cropType}

{batch.plantCount} plants

{daysUntil === 0 ? 'Today' : `${daysUntil} day${daysUntil > 1 ? 's' : ''}`}

{batch.expectedYieldKg.toFixed(1)} kg expected

); })}
)}
{/* Sidebar */}
{/* Farm Info */}

Farm Details

Location

{farm.location.city}, {farm.location.country}

{farm.location.address}

Building

{farm.specs.buildingType.replace('_', ' ')}

Levels

{farm.specs.numberOfLevels}

Automation

{farm.automationLevel.replace('_', ' ')}

Operational Since

{new Date(farm.operationalSince).toLocaleDateString()}

{/* Quick Actions */}

Quick Actions

Start New Batch
{/* Certifications */} {farm.specs.certifications.length > 0 && (

Certifications

{farm.specs.certifications.map(cert => ( {cert.toUpperCase()} ))}
)}
); }