[V0_FILE]typescriptreact:file="components/data-pipeline.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { CheckCircle, Clock, AlertCircle, Database, Satellite, Cloud } from "lucide-react" export default function DataPipeline() { const pipelineSteps = [ { id: 1, title: "Weather Data Collection", description: "ERA-5, IMD, MOSDAC weather parameters", status: "completed", progress: 100, icon: Cloud, datasets: ["Temperature", "Humidity", "Wind Speed/Direction", "Precipitation"], }, { id: 2, title: "Terrain Analysis", description: "DEM processing for slope and aspect", status: "completed", progress: 100, icon: Database, datasets: ["30m DEM", "Slope", "Aspect", "Elevation"], }, { id: 3, title: "LULC Processing", description: "Land use/land cover classification", status: "in-progress", progress: 75, icon: Satellite, datasets: ["Sentinel-2", "Forest Cover", "Fuel Load", "Vegetation Index"], }, { id: 4, title: "Historical Fire Data", description: "VIIRS fire detection points", status: "pending", progress: 30, icon: Database, datasets: ["VIIRS SNP", "Fire History", "Burn Scars", "Fire Frequency"], }, { id: 5, title: "Human Factors", description: "Settlement and infrastructure data", status: "pending", progress: 15, icon: Database, datasets: ["GHSL", "Road Networks", "Settlements", "Human Activity"], }, ] const getStatusIcon = (status: string) => { switch (status) { case "completed": return case "in-progress": return case "pending": return default: return } } const getStatusBadge = (status: string) => { switch (status) { case "completed": return Completed case "in-progress": return In Progress case "pending": return Pending default: return Unknown } } return (

Data Processing Pipeline

Multi-source data integration for forest fire modeling

{pipelineSteps.map((step) => { const IconComponent = step.icon return (

{getStatusIcon(step.status)}

{step.title}

{getStatusBadge(step.status)}

{step.description}

Progress {step.progress}%

{step.datasets.map((dataset) => ( {dataset} ))}

) })}

Data Sources

ERA-5 Reanalysis Weather

IMD Grid Data Weather

Bhoonidhi DEM Terrain

Sentinel-2 MSI LULC

VIIRS Fire Data Fire History

GHSL Settlement Human

Processing Status

Data Collection 85%

Preprocessing 72%

Feature Engineering 58%

Quality Control 45%

) } [V0_FILE]typescriptreact:file="components/model-training.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { Brain, Zap, Target, TrendingUp, Pause } from "lucide-react" export default function ModelTraining() { return (

U-NET Model

Semantic segmentation for fire probability mapping

Training Status Completed

Epoch Progress 100/100

87.3%

Validation Accuracy

0.142

Loss

Architecture

• Encoder: ResNet-50 backbone

• Decoder: Skip connections

• Output: 5-class probability map

• Input: 12-channel feature stack

LSTM Model

Temporal sequence modeling for fire prediction

Training Status In Progress

Epoch Progress 67/100

82.1%

Validation Accuracy

0.198

Loss

Architecture

• 3 LSTM layers (128, 64, 32 units)

• Dropout: 0.3 for regularization

• Sequence length: 7 days

• Features: Weather + terrain

Cellular Automata

Fire spread simulation model

Model Parameters

Grid Resolution 30m

Time Step 1 minute

Neighborhood Moore (8-cell)

Wind Factor 0.3-2.5x

Spread Rules

• Fuel availability threshold: {">"} 20%

• Slope acceleration: 1 + 0.3 × tan(slope)

• Wind direction influence: cos(θ)

• Moisture content dampening

• Firebreak barriers

Validation Metrics

Spatial Accuracy 82.5%

Temporal Accuracy 78.9%

Training Configuration

Batch Size

Learning Rate

0.001

Optimizer

Adam

Loss Function

Categorical CE

Data Split

70/15/15

Augmentation

Rotation, Flip

Hardware Resources

GPU Utilization 87%

Memory Usage 14.2/16 GB

Training Time

4h 23m

ETA

1h 15m

) } [V0_FILE]typescriptreact:file="components/india-map.tsx" isMerged="true" "use client" import { useState } from "react" interface IndiaMapProps { selectedState: string onStateSelect: (state: string) => void } export default function IndiaMap({ selectedState, onStateSelect }: IndiaMapProps) { const [hoveredState, setHoveredState] = useState(null) // Simplified SVG paths for major Indian states (representative shapes) const stateData = [ { name: "Rajasthan", path: "M150,200 L250,180 L280,220 L260,280 L180,300 L120,250 Z", color: "#10b981" }, { name: "Maharashtra", path: "M200,300 L300,290 L320,350 L280,400 L200,380 L180,340 Z", color: "#3b82f6" }, { name: "Uttar Pradesh", path: "M250,150 L380,140 L400,200 L350,220 L280,200 L250,180 Z", color: "#8b5cf6" }, { name: "Madhya Pradesh", path: "M200,220 L350,210 L370,270 L320,290 L220,300 L180,260 Z", color: "#f59e0b" }, { name: "Karnataka", path: "M220,380 L300,370 L320,430 L280,480 L220,470 L200,420 Z", color: "#ef4444" }, { name: "Gujarat", path: "M80,250 L180,240 L200,300 L160,340 L100,330 L60,290 Z", color: "#06b6d4" }, { name: "Tamil Nadu", path: "M280,450 L350,440 L370,500 L340,550 L280,540 L260,490 Z", color: "#84cc16" }, { name: "West Bengal", path: "M400,250 L480,240 L500,300 L470,340 L420,330 L400,280 Z", color: "#f97316" }, { name: "Andhra Pradesh", path: "M300,380 L380,370 L400,430 L370,480 L300,470 L280,420 Z", color: "#ec4899" }, { name: "Odisha", path: "M380,300 L450,290 L470,350 L440,390 L380,380 L360,330 Z", color: "#6366f1" }, { name: "Kerala", path: "M240,480 L280,470 L290,530 L270,580 L240,570 L230,520 Z", color: "#14b8a6" }, { name: "Assam", path: "M500,180 L580,170 L600,220 L580,260 L520,250 L500,210 Z", color: "#f43f5e" }, { name: "Punjab", path: "M200,100 L280,90 L300,140 L270,170 L220,160 L200,130 Z", color: "#a855f7" }, { name: "Haryana", path: "M250,120 L320,110 L340,160 L310,190 L260,180 L240,150 Z", color: "#22c55e" }, { name: "Bihar", path: "M350,180 L430,170 L450,220 L420,250 L360,240 L340,210 Z", color: "#eab308" }, { name: "Jharkhand", path: "M380,220 L450,210 L470,260 L440,290 L390,280 L370,250 Z", color: "#dc2626" }, { name: "Chhattisgarh", path: "M320,250 L390,240 L410,290 L380,320 L330,310 L310,280 Z", color: "#0891b2" }, { name: "Uttarakhand", path: "M280,120 L340,110 L360,150 L330,180 L290,170 L270,140 Z", color: "#65a30d" }, { name: "Himachal Pradesh", path: "M240,80 L320,70 L340,110 L310,140 L250,130 L230,100 Z", color: "#7c3aed" }, { name: "Jammu and Kashmir", path: "M200,40 L300,30 L320,80 L290,110 L220,100 L180,70 Z", color: "#be185d" }, ] const getStateColor = (stateName: string) => { if (selectedState === stateName) return "#dc2626" // Red for selected if (hoveredState === stateName) return "#f97316" // Orange for hover // Risk-based coloring (mock data) const riskLevels: { [key: string]: string } = { Rajasthan: "#ef4444", // High risk Maharashtra: "#f97316", // High risk "Madhya Pradesh": "#eab308", // Medium risk Uttarakhand: "#dc2626", // Very high risk "Himachal Pradesh": "#f59e0b", // Medium-high risk Karnataka: "#84cc16", // Low risk Kerala: "#22c55e", // Very low risk "Tamil Nadu": "#10b981", // Low risk Gujarat: "#f59e0b", // Medium-high risk Odisha: "#eab308", // Medium risk } return riskLevels[stateName] || "#6b7280" // Default gray } return (

India - Forest Fire Risk Map

Click on any state to select it for detailed analysis

{/* Hover tooltip */} {hoveredState && (

{hoveredState}

Click to select

)}

{/* Legend */}

Very High Risk

High Risk

Medium Risk

Low Risk

No Data

) } [V0_FILE]typescriptreact:file="components/weather-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Wind, Thermometer, Droplets, Eye } from "lucide-react" interface WeatherPanelProps { selectedState: string selectedCity: string } export default function WeatherPanel({ selectedState, selectedCity }: WeatherPanelProps) { const getWeatherData = () => { const weatherData: { [key: string]: { temp: number; humidity: number; windSpeed: number; visibility: number; fwi: string } } = { Uttarakhand: { temp: 32, humidity: 28, windSpeed: 15, visibility: 8, fwi: "High" }, "Himachal Pradesh": { temp: 18, humidity: 45, windSpeed: 12, visibility: 12, fwi: "Moderate" }, Rajasthan: { temp: 42, humidity: 15, windSpeed: 22, visibility: 6, fwi: "Very High" }, Maharashtra: { temp: 35, humidity: 32, windSpeed: 18, visibility: 7, fwi: "High" }, Karnataka: { temp: 28, humidity: 55, windSpeed: 8, visibility: 10, fwi: "Low" }, Kerala: { temp: 31, humidity: 78, windSpeed: 6, visibility: 9, fwi: "Very Low" }, "Tamil Nadu": { temp: 34, humidity: 42, windSpeed: 14, visibility: 8, fwi: "Moderate" }, Gujarat: { temp: 39, humidity: 22, windSpeed: 20, visibility: 5, fwi: "High" }, "Madhya Pradesh": { temp: 36, humidity: 25, windSpeed: 16, visibility: 7, fwi: "High" }, "West Bengal": { temp: 33, humidity: 68, windSpeed: 10, visibility: 6, fwi: "Low" }, } return weatherData[selectedState] || { temp: 30, humidity: 40, windSpeed: 12, visibility: 8, fwi: "Moderate" } } const weather = getWeatherData() return ( Current Weather - {selectedCity}

{weather.temp}°C

Temperature

{weather.humidity}%

Humidity

{weather.windSpeed} km/h

Wind Speed

{weather.visibility} km

Visibility

Fire Weather Index

{weather.fwi}

) } [V0_FILE]typescriptreact:file="components/location-data-panel.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { TreePine, Mountain, Droplets, Users, Factory, Flame, TrendingUp, AlertTriangle, Shield } from "lucide-react" interface LocationDataPanelProps { selectedState: string selectedCity: string } export default function LocationDataPanel({ selectedState, selectedCity }: LocationDataPanelProps) { // Mock data based on location const getLocationData = () => { const locationData: { [key: string]: any } = { Uttarakhand: { forestCover: 71.05, elevation: 1680, avgRainfall: 1550, population: 1.01, industries: 245, fireIncidents: 1247, riskTrend: 15.3, vulnerableAreas: 23, fireStations: 12, responseTime: 18, topRisks: ["Dry deciduous forests", "Pine forests", "Tourist areas", "Agricultural residue"], recentIncidents: [ { date: "2024-03-15", location: "Nainital District", area: "45 hectares", cause: "Human activity" }, { date: "2024-03-10", location: "Pauri Garhwal", area: "23 hectares", cause: "Lightning" }, { date: "2024-03-05", location: "Almora", area: "67 hectares", cause: "Campfire" }, ], }, Rajasthan: { forestCover: 9.64, elevation: 435, avgRainfall: 531, population: 6.89, industries: 1250, fireIncidents: 892, riskTrend: 22.7, vulnerableAreas: 45, fireStations: 28, responseTime: 25, topRisks: ["Arid grasslands", "Scrub forests", "Desert vegetation", "Agricultural areas"], recentIncidents: [ { date: "2024-03-18", location: "Jaisalmer", area: "156 hectares", cause: "Heat wave" }, { date: "2024-03-12", location: "Jodhpur", area: "89 hectares", cause: "Electrical fault" }, { date: "2024-03-08", location: "Bikaner", area: "234 hectares", cause: "Agricultural burning" }, ], }, Maharashtra: { forestCover: 20.13, elevation: 566, avgRainfall: 1200, population: 11.24, industries: 3450, fireIncidents: 1567, riskTrend: 18.9, vulnerableAreas: 67, fireStations: 45, responseTime: 15, topRisks: ["Deciduous forests", "Grasslands", "Industrial areas", "Urban periphery"], recentIncidents: [ { date: "2024-03-20", location: "Pune District", area: "78 hectares", cause: "Industrial activity" }, { date: "2024-03-14", location: "Nashik", area: "123 hectares", cause: "Cigarette butt" }, { date: "2024-03-09", location: "Aurangabad", area: "45 hectares", cause: "Power line" }, ], }, } return locationData[selectedState] || locationData["Uttarakhand"] } const data = getLocationData() return (

{/* Overview Cards */}

{data.forestCover}%

Forest Cover

{data.elevation}m

Avg Elevation

{data.avgRainfall}mm

Annual Rainfall

{data.fireIncidents}

Fire Incidents (2023)

{/* Detailed Data Tabs */} Risk Analysis Infrastructure Recent Incidents Mitigation

Risk Trends

Fire Risk Increase (YoY) +{data.riskTrend}%

Vulnerable Areas {data.vulnerableAreas} zones

Population at Risk

{data.population}M

People in high-risk zones

Top Risk Factors

{data.topRisks.map((risk: string, index: number) => (

{risk}

))}

Fire Stations

{data.fireStations}

Active stations

Avg Response Time: {data.responseTime} min

Population

{data.population}M

Total population

Density: Medium

Industries

{data.industries}

Industrial units

Risk Level: Moderate

Recent Fire Incidents

Last 30 days in {selectedState}

{data.recentIncidents.map((incident: any, index: number) => (

{incident.location}

{incident.date}

{incident.area}

{incident.cause}

))}

Prevention Measures

Early Warning System

Real-time monitoring and alerts

Firebreaks

Strategic vegetation clearance

Community Training

Local awareness programs

Response Strategy

Rapid Response Teams

24/7 emergency deployment

Aerial Support

Helicopter water bombing

Evacuation Plans

Pre-planned evacuation routes

) } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/enhanced-location-selector.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { MapPin, Globe, Satellite, Clock } from "lucide-react" import WorldMap from "./world-map" interface EnhancedLocationSelectorProps { selectedCountry: string selectedState: string selectedCity: string onCountryChange: (country: string) => void onStateChange: (state: string) => void onCityChange: (city: string) => void } const globalLocations = { "United States": { California: ["Los Angeles", "San Francisco", "Sacramento", "San Diego", "Fresno"], Texas: ["Houston", "Dallas", "Austin", "San Antonio", "Fort Worth"], Florida: ["Miami", "Orlando", "Tampa", "Jacksonville", "Tallahassee"], Colorado: ["Denver", "Colorado Springs", "Aurora", "Fort Collins", "Lakewood"], }, Canada: { "British Columbia": ["Vancouver", "Victoria", "Surrey", "Burnaby", "Richmond"], Alberta: ["Calgary", "Edmonton", "Red Deer", "Lethbridge", "Medicine Hat"], Ontario: ["Toronto", "Ottawa", "Hamilton", "London", "Windsor"], }, Brazil: { Amazonas: ["Manaus", "Parintins", "Itacoatiara", "Manacapuru", "Coari"], Pará: ["Belém", "Ananindeua", "Santarém", "Marabá", "Parauapebas"], "Mato Grosso": ["Cuiabá", "Várzea Grande", "Rondonópolis", "Sinop", "Tangará da Serra"], }, Australia: { "New South Wales": ["Sydney", "Newcastle", "Wollongong", "Maitland", "Albury"], Victoria: ["Melbourne", "Geelong", "Ballarat", "Bendigo", "Shepparton"], Queensland: ["Brisbane", "Gold Coast", "Townsville", "Cairns", "Toowoomba"], }, India: { Uttarakhand: ["Dehradun", "Haridwar", "Roorkee", "Haldwani", "Rudrapur"], "Himachal Pradesh": ["Shimla", "Dharamshala", "Solan", "Mandi", "Kullu"], Maharashtra: ["Mumbai", "Pune", "Nagpur", "Thane", "Nashik"], Karnataka: ["Bangalore", "Mysore", "Hubli", "Mangalore", "Belgaum"], }, Russia: { Siberia: ["Novosibirsk", "Omsk", "Krasnoyarsk", "Barnaul", "Irkutsk"], "Far East": ["Vladivostok", "Khabarovsk", "Yakutsk", "Magadan", "Petropavlovsk"], }, Indonesia: { Sumatra: ["Medan", "Palembang", "Pekanbaru", "Padang", "Bandar Lampung"], Kalimantan: ["Pontianak", "Banjarmasin", "Samarinda", "Balikpapan", "Palangka Raya"], }, } export default function EnhancedLocationSelector({ selectedCountry, selectedState, selectedCity, onCountryChange, onStateChange, onCityChange, }: EnhancedLocationSelectorProps) { const handleCountryChange = (country: string) => { onCountryChange(country) const states = Object.keys(globalLocations[country as keyof typeof globalLocations] || {}) if (states.length > 0) { onStateChange(states[0]) const cities = globalLocations[country as keyof typeof globalLocations]?.[states[0] as keyof any] || [] if (cities.length > 0) { onCityChange(cities[0]) } } } const handleStateChange = (state: string) => { onStateChange(state) const cities = globalLocations[selectedCountry as keyof typeof globalLocations]?.[state as keyof any] || [] if (cities.length > 0) { onCityChange(cities[0]) } } const getSatelliteStatus = () => { const statuses = ["Active", "Scanning", "Data Sync", "Monitoring"] return statuses[Math.floor(Math.random() * statuses.length)] } return (

Global Location

Country

State/Province

City

{selectedCity}, {selectedState}, {selectedCountry}

{getSatelliteStatus()}

Live Data Feed

Last Update: {new Date().toLocaleTimeString()}

Satellites Active: 4/4

Data Quality: Excellent

) } [V0_FILE]typescriptreact:file="components/enhanced-fire-risk-map.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Satellite, RefreshCw, Download, Clock, Thermometer } from "lucide-react" interface EnhancedFireRiskMapProps { selectedCountry: string selectedState: string selectedCity: string selectedTime: string onTimeChange: (time: string) => void } export default function EnhancedFireRiskMap({ selectedCountry, selectedState, selectedCity, selectedTime, onTimeChange, }: EnhancedFireRiskMapProps) { const [isLoading, setIsLoading] = useState(false) const [lastUpdate, setLastUpdate] = useState(new Date()) const refreshData = () => { setIsLoading(true) setTimeout(() => { setIsLoading(false) setLastUpdate(new Date()) }, 2000) } // Generate realistic fire risk data based on location and time const getFireRiskData = () => { const baseRisk = { "United States": { high: 3200, total: 245, accuracy: 89.2 }, Brazil: { high: 5600, total: 420, accuracy: 85.7 }, Australia: { high: 4100, total: 380, accuracy: 91.3 }, India: { high: 2800, total: 190, accuracy: 87.5 }, Russia: { high: 6200, total: 520, accuracy: 83.1 }, Indonesia: { high: 3900, total: 290, accuracy: 86.8 }, } const timeMultiplier = selectedTime.includes("PM") ? 1.3 : 0.8 const base = baseRisk[selectedCountry as keyof typeof baseRisk] || baseRisk["United States"] return { high: Math.round(base.high * timeMultiplier), total: Math.round(base.total * timeMultiplier), accuracy: base.accuracy, } } const riskData = getFireRiskData() // Generate real-time fire hotspots const generateHotspots = () => { const count = Math.floor(Math.random() * 8) + 2 return Array.from({ length: count }, (_, i) => ({ id: i, x: Math.random() * 600 + 100, y: Math.random() * 400 + 100, intensity: Math.random() * 100, temp: Math.floor(Math.random() * 200) + 300, })) } const [hotspots, setHotspots] = useState(generateHotspots()) useEffect(() => { const interval = setInterval(() => { setHotspots(generateHotspots()) }, 5000) return () => clearInterval(interval) }, []) return (

Live Fire Risk Map - {selectedCity}, {selectedState}

Real-time satellite data for {selectedCountry} at {selectedTime}

{/* Enhanced SVG Map with real-time data */} {/* Real-time data overlay */}

Live Fire Detection

Active Fires: {hotspots.length}

Max Temp: {Math.max(...hotspots.map((h) => h.temp))}°C

Updated: {lastUpdate.toLocaleTimeString()}

{/* Legend */}

Risk Levels

Active Fire

Very High

High

Moderate

Forest Cover

{/* Statistics */}

{riskData.high.toLocaleString()}

High Risk Pixels

{riskData.total} km²

Total Risk Area

{riskData.accuracy}%

Satellite Accuracy

{hotspots.length}

Active Hotspots

{/* Action buttons */}

) } [V0_FILE]typescriptreact:file="components/enhanced-fire-spread-simulation.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Play, Pause, RotateCcw, Wind, Thermometer } from "lucide-react" interface EnhancedFireSpreadSimulationProps { selectedCountry: string selectedState: string selectedCity: string selectedTime: string } export default function EnhancedFireSpreadSimulation({ selectedCountry, selectedState, selectedCity, selectedTime, }: EnhancedFireSpreadSimulationProps) { const [simulationTime, setSimulationTime] = useState(0) const [isSimulating, setIsSimulating] = useState(false) const [fireSpots, setFireSpots] = useState([ { id: 1, x: 200, y: 200, radius: 10, intensity: 100 }, { id: 2, x: 350, y: 180, radius: 8, intensity: 80 }, { id: 3, x: 280, y: 320, radius: 12, intensity: 90 }, ]) // Auto-advance simulation when playing useEffect(() => { let interval: NodeJS.Timeout if (isSimulating && simulationTime < 12) { interval = setInterval(() => { setSimulationTime((prev) => Math.min(prev + 0.5, 12)) }, 1000) } else if (simulationTime >= 12) { setIsSimulating(false) } return () => clearInterval(interval) }, [isSimulating, simulationTime]) // Update fire spread based on simulation time useEffect(() => { const newFireSpots = fireSpots.map((spot) => ({ ...spot, radius: Math.min(spot.radius + simulationTime * 2, 50), intensity: Math.max(spot.intensity - simulationTime * 3, 20), })) // Add new fire spots as simulation progresses if (simulationTime > 3 && fireSpots.length < 6) { newFireSpots.push({ id: fireSpots.length + 1, x: Math.random() * 400 + 100, y: Math.random() * 300 + 100, radius: 5, intensity: 70, }) } setFireSpots(newFireSpots) }, [simulationTime]) const getBurnedArea = () => { const baseArea = 12.5 const growthRate = selectedTime.includes("PM") ? 2.1 : 1.6 return (baseArea * Math.pow(growthRate, simulationTime)).toFixed(1) } const getWindEffect = () => { const timeMultiplier = selectedTime.includes("PM") ? 1.4 : 0.8 return Math.round(15 * timeMultiplier) } return (

Fire Spread Simulation - {selectedCity}

Real-time cellular automata simulation at {selectedTime}

{isSimulating ? "Simulating" : "Paused"} Hour {simulationTime.toFixed(1)}

{/* Simulation Controls */}

Simulation Time: {simulationTime.toFixed(1)} hours setSimulationTime(value[0])} max={12} step={0.5} className="w-full" />

{/* Simulation Visualization */}

{/* Real-time info overlay */}

Active Fires: {fireSpots.length}

Burned Area: {getBurnedArea()} km²

Spread Rate: {(Number.parseFloat(getBurnedArea()) / Math.max(simulationTime, 0.1)).toFixed(1)} km²/h

{/* Weather conditions */}

32°C

{getWindEffect()} km/h

Humidity: 28%

{/* Statistics */}

{simulationTime.toFixed(1)}h

Elapsed Time

{getBurnedArea()}

Area Burned (km²)

{(Number.parseFloat(getBurnedArea()) * 2.3).toFixed(0)}

Perimeter (km)

{getWindEffect()}

Wind Speed (km/h)

) } [V0_FILE]typescriptreact:file="components/enhanced-recent-incidents.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AlertTriangle, Flame, Clock, MapPin, Satellite, TrendingUp } from "lucide-react" interface EnhancedRecentIncidentsProps { selectedCountry: string selectedState: string selectedCity: string selectedTime: string } export default function EnhancedRecentIncidents({ selectedCountry, selectedState, selectedCity, selectedTime, }: EnhancedRecentIncidentsProps) { // Generate location-specific incident data const getIncidentData = () => { const globalIncidents: { [key: string]: any } = { "United States": { California: [ { date: "2024-01-02", time: "02:30 PM", location: "Los Angeles County", area: "1,245 hectares", cause: "Power line", status: "Contained", severity: "high", }, { date: "2024-01-01", time: "11:15 AM", location: "Riverside County", area: "892 hectares", cause: "Vehicle accident", status: "Monitoring", severity: "medium", }, { date: "2023-12-30", time: "04:45 PM", location: "San Bernardino", area: "2,156 hectares", cause: "Lightning", status: "Extinguished", severity: "very-high", }, ], Texas: [ { date: "2024-01-01", time: "01:20 PM", location: "Harris County", area: "567 hectares", cause: "Campfire", status: "Contained", severity: "medium", }, { date: "2023-12-29", time: "09:30 AM", location: "Dallas County", area: "234 hectares", cause: "Cigarette", status: "Extinguished", severity: "low", }, ], }, Brazil: { Amazonas: [ { date: "2024-01-02", time: "03:15 PM", location: "Manaus Region", area: "3,456 hectares", cause: "Deforestation", status: "Active", severity: "very-high", }, { date: "2024-01-01", time: "10:45 AM", location: "Parintins", area: "1,789 hectares", cause: "Agricultural burning", status: "Monitoring", severity: "high", }, { date: "2023-12-31", time: "02:20 PM", location: "Itacoatiara", area: "2,234 hectares", cause: "Drought", status: "Contained", severity: "high", }, ], }, Australia: { "New South Wales": [ { date: "2024-01-02", time: "01:45 PM", location: "Blue Mountains", area: "1,678 hectares", cause: "Heat wave", status: "Active", severity: "very-high", }, { date: "2024-01-01", time: "11:30 AM", location: "Hunter Valley", area: "945 hectares", cause: "Lightning", status: "Contained", severity: "high", }, ], }, India: { Uttarakhand: [ { date: "2024-01-02", time: "02:15 PM", location: "Nainital District", area: "456 hectares", cause: "Tourist activity", status: "Contained", severity: "medium", }, { date: "2024-01-01", time: "10:20 AM", location: "Pauri Garhwal", area: "234 hectares", cause: "Pine needles", status: "Extinguished", severity: "low", }, ], }, } return globalIncidents[selectedCountry]?.[selectedState] || [] } const incidents = getIncidentData() const getSeverityColor = (severity: string) => { switch (severity) { case "very-high": return "bg-red-100 text-red-800" case "high": return "bg-orange-100 text-orange-800" case "medium": return "bg-yellow-100 text-yellow-800" case "low": return "bg-green-100 text-green-800" default: return "bg-gray-100 text-gray-800" } } const getStatusColor = (status: string) => { switch (status) { case "Active": return "bg-red-100 text-red-800" case "Monitoring": return "bg-yellow-100 text-yellow-800" case "Contained": return "bg-blue-100 text-blue-800" case "Extinguished": return "bg-green-100 text-green-800" default: return "bg-gray-100 text-gray-800" } } // Generate real-time alerts const getCurrentAlerts = () => { const alerts = [ { type: "High Wind Warning", level: "warning", time: "2 hours ago" }, { type: "Extreme Fire Danger", level: "critical", time: "30 minutes ago" }, { type: "Satellite Anomaly Detected", level: "info", time: "15 minutes ago" }, ] return alerts } const alerts = getCurrentAlerts() return (

{/* Real-time Alerts */} Live Alerts - {selectedCity}, {selectedState}

{alerts.map((alert, index) => (

{alert.type}

{alert.time}

{alert.level.toUpperCase()}

))}

{/* Incident History */} Recent Incidents Active Fires Statistics Recent Fire Incidents

Last 7 days in {selectedState}, {selectedCountry}

{incidents.length > 0 ? ( incidents.map((incident: any, index: number) => (

{incident.location}

{incident.date} at {incident.time}

Area: {incident.area}

Cause: {incident.cause}

{incident.severity.replace("-", " ").toUpperCase()}

{incident.status}

)) ) : (

No recent incidents reported for this location

)}

Active Fire Monitoring

Active Fires

Under Watch

Contained

98%

Detection Rate

Satellite Coverage

4 satellites actively monitoring the region with 15-minute update intervals. Next pass:{" "} {new Date(Date.now() + 8 * 60000).toLocaleTimeString()}

Fire Statistics - {selectedState}

This Month

Total Incidents {incidents.length + 15}

Area Burned 12,456 hectares

Avg Response Time 18 minutes

Containment Rate 87%

Common Causes

Lightning 35%

Human Activity 28%

Power Lines 18%

Vehicle Accidents 12%

Other 7%

) } [V0_FILE]typescriptreact:file="components/world-map.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" interface WorldMapProps { selectedCountry: string onCountrySelect: (country: string) => void } export default function WorldMap({ selectedCountry, onCountrySelect }: WorldMapProps) { const [hoveredCountry, setHoveredCountry] = useState(null) const countryData = [ { name: "United States", path: "M150,180 L280,160 L320,200 L300,250 L180,270 L120,220 Z", risk: "high" }, { name: "Canada", path: "M120,80 L350,60 L380,120 L320,140 L150,130 L100,100 Z", risk: "high" }, { name: "Brazil", path: "M200,350 L350,330 L380,420 L320,480 L220,460 L180,400 Z", risk: "very-high" }, { name: "Russia", path: "M400,80 L650,70 L680,150 L620,180 L450,170 L380,120 Z", risk: "high" }, { name: "Australia", path: "M550,400 L680,390 L700,450 L650,480 L580,470 L540,430 Z", risk: "very-high" }, { name: "India", path: "M480,250 L550,240 L570,300 L540,340 L500,330 L470,280 Z", risk: "high" }, { name: "China", path: "M500,180 L600,170 L620,230 L580,260 L520,250 L490,210 Z", risk: "medium" }, { name: "Indonesia", path: "M520,320 L620,310 L640,350 L600,370 L540,360 L510,340 Z", risk: "very-high" }, { name: "Argentina", path: "M220,450 L280,440 L300,520 L270,580 L230,570 L210,500 Z", risk: "medium" }, { name: "Mexico", path: "M80,220 L180,210 L200,260 L160,290 L100,280 L70,250 Z", risk: "high" }, ] const getRiskColor = (risk: string) => { switch (risk) { case "very-high": return "#dc2626" case "high": return "#ea580c" case "medium": return "#ca8a04" case "low": return "#16a34a" default: return "#6b7280" } } const getCountryColor = (countryName: string, risk: string) => { if (selectedCountry === countryName) return "#7c3aed" if (hoveredCountry === countryName) return "#f59e0b" return getRiskColor(risk) } return (

Global Forest Fire Risk Map

Click on any country to view detailed fire risk analysis

{hoveredCountry && (

{hoveredCountry}

Click to select

)}

Very High Risk

High Risk

Medium Risk

Low Risk

) } [V0_FILE]typescriptreact:file="components/location-selector.tsx" isEdit="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { MapPin, Globe, Clock } from "lucide-react" import WorldMap from "./world-map" interface LocationSelectorProps { selectedCountry: string selectedState: string selectedCity: string selectedTime: string onCountryChange: (country: string) => void onStateChange: (state: string) => void onCityChange: (city: string) => void onTimeChange: (time: string) => void } const globalLocations = { "United States": { California: ["Los Angeles", "San Francisco", "Sacramento", "San Diego", "Fresno"], Texas: ["Houston", "Dallas", "Austin", "San Antonio", "Fort Worth"], Florida: ["Miami", "Orlando", "Tampa", "Jacksonville", "Tallahassee"], Colorado: ["Denver", "Colorado Springs", "Aurora", "Fort Collins", "Lakewood"], }, Canada: { "British Columbia": ["Vancouver", "Victoria", "Surrey", "Burnaby", "Richmond"], Alberta: ["Calgary", "Edmonton", "Red Deer", "Lethbridge", "Medicine Hat"], Ontario: ["Toronto", "Ottawa", "Hamilton", "London", "Windsor"], }, Brazil: { Amazonas: ["Manaus", "Parintins", "Itacoatiara", "Manacapuru", "Coari"], Pará: ["Belém", "Ananindeua", "Santarém", "Marabá", "Parauapebas"], "Mato Grosso": ["Cuiabá", "Várzea Grande", "Rondonópolis", "Sinop", "Tangará da Serra"], }, Australia: { "New South Wales": ["Sydney", "Newcastle", "Wollongong", "Maitland", "Albury"], Victoria: ["Melbourne", "Geelong", "Ballarat", "Bendigo", "Shepparton"], Queensland: ["Brisbane", "Gold Coast", "Townsville", "Cairns", "Toowoomba"], }, India: { Uttarakhand: ["Dehradun", "Haridwar", "Roorkee", "Haldwani", "Rudrapur"], "Himachal Pradesh": ["Shimla", "Dharamshala", "Solan", "Mandi", "Kullu"], Maharashtra: ["Mumbai", "Pune", "Nagpur", "Thane", "Nashik"], Karnataka: ["Bangalore", "Mysore", "Hubli", "Mangalore", "Belgaum"], }, Russia: { Siberia: ["Novosibirsk", "Omsk", "Krasnoyarsk", "Barnaul", "Irkutsk"], "Far East": ["Vladivostok", "Khabarovsk", "Yakutsk", "Magadan", "Petropavlovsk"], }, Indonesia: { Sumatra: ["Medan", "Palembang", "Pekanbaru", "Padang", "Bandar Lampung"], Kalimantan: ["Pontianak", "Banjarmasin", "Samarinda", "Balikpapan", "Palangka Raya"], }, China: { Beijing: ["Beijing", "Tianjin", "Shijiazhuang", "Tangshan", "Qinhuangdao"], Guangdong: ["Guangzhou", "Shenzhen", "Dongguan", "Foshan", "Zhongshan"], }, Argentina: { "Buenos Aires": ["Buenos Aires", "La Plata", "Mar del Plata", "Bahía Blanca", "Tandil"], Córdoba: ["Córdoba", "Villa María", "Río Cuarto", "San Francisco", "Villa Carlos Paz"], }, Mexico: { "Mexico City": ["Mexico City", "Ecatepec", "Guadalajara", "Puebla", "Tijuana"], Jalisco: ["Guadalajara", "Zapopan", "Tlaquepaque", "Tonalá", "Puerto Vallarta"], }, } const timeOptions = ["06:00 AM", "09:00 AM", "12:00 PM", "03:00 PM", "06:00 PM", "09:00 PM"] export default function LocationSelector({ selectedCountry, selectedState, selectedCity, selectedTime, onCountryChange, onStateChange, onCityChange, onTimeChange, }: LocationSelectorProps) { const handleCountryChange = (country: string) => { onCountryChange(country) const states = Object.keys(globalLocations[country as keyof typeof globalLocations] || {}) if (states.length > 0) { onStateChange(states[0]) const cities = globalLocations[country as keyof typeof globalLocations]?.[states[0] as keyof any] || [] if (cities.length > 0) { onCityChange(cities[0]) } } } const handleStateChange = (state: string) => { onStateChange(state) const cities = globalLocations[selectedCountry as keyof typeof globalLocations]?.[state as keyof any] || [] if (cities.length > 0) { onCityChange(cities[0]) } } return (

Location & Time

Country

State/Province

City

Time

{selectedCity}, {selectedState}, {selectedCountry}

{selectedTime}

Data Status

Last Update: {new Date().toLocaleTimeString()}

Data Quality: Excellent

Coverage: 100%

) } [V0_FILE]typescriptreact:file="components/fire-risk-map.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { RefreshCw, Download, Thermometer, Wind, Droplets } from "lucide-react" interface FireRiskMapProps { selectedCountry: string selectedState: string selectedCity: string selectedTime: string } export default function FireRiskMap({ selectedCountry, selectedState, selectedCity, selectedTime }: FireRiskMapProps) { const [isLoading, setIsLoading] = useState(false) const [lastUpdate, setLastUpdate] = useState(new Date()) const refreshData = () => { setIsLoading(true) setTimeout(() => { setIsLoading(false) setLastUpdate(new Date()) }, 2000) } const getFireRiskData = () => { const baseRisk = { "United States": { high: 3200, total: 245, accuracy: 89.2, temp: 32, wind: 15, humidity: 28 }, Brazil: { high: 5600, total: 420, accuracy: 85.7, temp: 38, wind: 12, humidity: 22 }, Australia: { high: 4100, total: 380, accuracy: 91.3, temp: 35, wind: 18, humidity: 25 }, India: { high: 2800, total: 190, accuracy: 87.5, temp: 30, wind: 10, humidity: 45 }, Russia: { high: 6200, total: 520, accuracy: 83.1, temp: 28, wind: 20, humidity: 35 }, Indonesia: { high: 3900, total: 290, accuracy: 86.8, temp: 33, wind: 8, humidity: 65 }, China: { high: 2100, total: 180, accuracy: 88.1, temp: 29, wind: 12, humidity: 40 }, Argentina: { high: 1800, total: 150, accuracy: 85.9, temp: 31, wind: 14, humidity: 38 }, Canada: { high: 2900, total: 220, accuracy: 90.2, temp: 25, wind: 16, humidity: 42 }, Mexico: { high: 2400, total: 170, accuracy: 84.6, temp: 34, wind: 11, humidity: 30 }, } const timeMultiplier = selectedTime.includes("PM") ? 1.3 : 0.8 const base = baseRisk[selectedCountry as keyof typeof baseRisk] || baseRisk["United States"] return { high: Math.round(base.high * timeMultiplier), total: Math.round(base.total * timeMultiplier), accuracy: base.accuracy, temp: Math.round(base.temp * (selectedTime.includes("PM") ? 1.1 : 0.9)), wind: Math.round(base.wind * (selectedTime.includes("PM") ? 1.2 : 0.8)), humidity: Math.round(base.humidity * (selectedTime.includes("PM") ? 0.8 : 1.2)), } } const riskData = getFireRiskData() const generateHotspots = () => { const count = Math.floor(Math.random() * 8) + 2 return Array.from({ length: count }, (_, i) => ({ id: i, x: Math.random() * 600 + 100, y: Math.random() * 400 + 100, intensity: Math.random() * 100, temp: Math.floor(Math.random() * 200) + 300, })) } const [hotspots, setHotspots] = useState(generateHotspots()) useEffect(() => { const interval = setInterval(() => { setHotspots(generateHotspots()) }, 5000) return () => clearInterval(interval) }, [selectedCountry, selectedState, selectedCity]) return (

Fire Risk Prediction Map - {selectedCity}, {selectedState}

Real-time fire risk analysis for {selectedCountry} at {selectedTime}

Live Fire Detection

Active Fires: {hotspots.length}

Max Temp: {Math.max(...hotspots.map((h) => h.temp))}°C

Updated: {lastUpdate.toLocaleTimeString()}

Risk Levels

Active Fire

Very High

High

Moderate

Forest Cover

{riskData.high.toLocaleString()}

High Risk Pixels

{riskData.total} km²

Total Risk Area

{riskData.accuracy}%

Model Accuracy

{hotspots.length}

Active Hotspots

{riskData.temp}°C

Temperature

{riskData.wind} km/h

Wind Speed

{riskData.humidity}%

Humidity

) } [V0_FILE]typescriptreact:file="components/fire-spread-simulation.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Play, Pause, RotateCcw, Wind, Thermometer } from "lucide-react" interface FireSpreadSimulationProps { selectedCountry: string selectedState: string selectedCity: string selectedTime: string } export default function FireSpreadSimulation({ selectedCountry, selectedState, selectedCity, selectedTime, }: FireSpreadSimulationProps) { const [simulationTime, setSimulationTime] = useState(0) const [isSimulating, setIsSimulating] = useState(false) const [fireSpots, setFireSpots] = useState([ { id: 1, x: 200, y: 200, radius: 10, intensity: 100 }, { id: 2, x: 350, y: 180, radius: 8, intensity: 80 }, { id: 3, x: 280, y: 320, radius: 12, intensity: 90 }, ]) useEffect(() => { let interval: NodeJS.Timeout if (isSimulating && simulationTime < 12) { interval = setInterval(() => { setSimulationTime((prev) => Math.min(prev + 0.5, 12)) }, 1000) } else if (simulationTime >= 12) { setIsSimulating(false) } return () => clearInterval(interval) }, [isSimulating, simulationTime]) useEffect(() => { const newFireSpots = fireSpots.map((spot) => ({ ...spot, radius: Math.min(spot.radius + simulationTime * 2, 50), intensity: Math.max(spot.intensity - simulationTime * 3, 20), })) if (simulationTime > 3 && fireSpots.length < 6) { newFireSpots.push({ id: fireSpots.length + 1, x: Math.random() * 400 + 100, y: Math.random() * 300 + 100, radius: 5, intensity: 70, }) } setFireSpots(newFireSpots) }, [simulationTime]) const getBurnedArea = () => { const baseArea = 12.5 const growthRate = selectedTime.includes("PM") ? 2.1 : 1.6 return (baseArea * Math.pow(growthRate, simulationTime)).toFixed(1) } const getWindEffect = () => { const timeMultiplier = selectedTime.includes("PM") ? 1.4 : 0.8 return Math.round(15 * timeMultiplier) } const resetSimulation = () => { setSimulationTime(0) setIsSimulating(false) setFireSpots([ { id: 1, x: 200, y: 200, radius: 10, intensity: 100 }, { id: 2, x: 350, y: 180, radius: 8, intensity: 80 }, { id: 3, x: 280, y: 320, radius: 12, intensity: 90 }, ]) } return (

Fire Spread Simulation - {selectedCity}

Cellular automata simulation at {selectedTime}

{isSimulating ? "Simulating" : "Paused"} Hour {simulationTime.toFixed(1)}

Simulation Time: {simulationTime.toFixed(1)} hours setSimulationTime(value[0])} max={12} step={0.5} className="w-full" />

Active Fires: {fireSpots.length}

Burned Area: {getBurnedArea()} km²

Spread Rate: {(Number.parseFloat(getBurnedArea()) / Math.max(simulationTime, 0.1)).toFixed(1)} km²/h

32°C

{getWindEffect()} km/h

Humidity: 28%

{simulationTime.toFixed(1)}h

Elapsed Time

{getBurnedArea()}

Area Burned (km²)

{(Number.parseFloat(getBurnedArea()) * 2.3).toFixed(0)}

Perimeter (km)

{getWindEffect()}

Wind Speed (km/h)

) } [V0_FILE]typescriptreact:file="components/recent-incidents.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AlertTriangle, Flame, Clock, MapPin, TrendingUp } from "lucide-react" interface RecentIncidentsProps { selectedCountry: string selectedState: string selectedCity: string selectedTime: string } export default function RecentIncidents({ selectedCountry, selectedState, selectedCity, selectedTime, }: RecentIncidentsProps) { const getIncidentData = () => { const globalIncidents: { [key: string]: any } = { "United States": { California: [ { date: "2024-01-02", time: "02:30 PM", location: "Los Angeles County", area: "1,245 hectares", cause: "Power line", status: "Contained", severity: "high", }, { date: "2024-01-01", time: "11:15 AM", location: "Riverside County", area: "892 hectares", cause: "Vehicle accident", status: "Monitoring", severity: "medium", }, { date: "2023-12-30", time: "04:45 PM", location: "San Bernardino", area: "2,156 hectares", cause: "Lightning", status: "Extinguished", severity: "very-high", }, ], Texas: [ { date: "2024-01-01", time: "01:20 PM", location: "Harris County", area: "567 hectares", cause: "Campfire", status: "Contained", severity: "medium", }, { date: "2023-12-29", time: "09:30 AM", location: "Dallas County", area: "234 hectares", cause: "Cigarette", status: "Extinguished", severity: "low", }, ], }, Brazil: { Amazonas: [ { date: "2024-01-02", time: "03:15 PM", location: "Manaus Region", area: "3,456 hectares", cause: "Deforestation", status: "Active", severity: "very-high", }, { date: "2024-01-01", time: "10:45 AM", location: "Parintins", area: "1,789 hectares", cause: "Agricultural burning", status: "Monitoring", severity: "high", }, ], }, Australia: { "New South Wales": [ { date: "2024-01-02", time: "01:45 PM", location: "Blue Mountains", area: "1,678 hectares", cause: "Heat wave", status: "Active", severity: "very-high", }, { date: "2024-01-01", time: "11:30 AM", location: "Hunter Valley", area: "945 hectares", cause: "Lightning", status: "Contained", severity: "high", }, ], }, India: { Uttarakhand: [ { date: "2024-01-02", time: "02:15 PM", location: "Nainital District", area: "456 hectares", cause: "Tourist activity", status: "Contained", severity: "medium", }, { date: "2024-01-01", time: "10:20 AM", location: "Pauri Garhwal", area: "234 hectares", cause: "Pine needles", status: "Extinguished", severity: "low", }, ], }, Russia: { Siberia: [ { date: "2024-01-02", time: "01:30 PM", location: "Krasnoyarsk Region", area: "4,567 hectares", cause: "Lightning", status: "Active", severity: "very-high", }, ], }, Indonesia: { Sumatra: [ { date: "2024-01-02", time: "12:45 PM", location: "Riau Province", area: "2,345 hectares", cause: "Palm oil clearing", status: "Monitoring", severity: "high", }, ], }, } return globalIncidents[selectedCountry]?.[selectedState] || [] } const incidents = getIncidentData() const getSeverityColor = (severity: string) => { switch (severity) { case "very-high": return "bg-red-100 text-red-800" case "high": return "bg-orange-100 text-orange-800" case "medium": return "bg-yellow-100 text-yellow-800" case "low": return "bg-green-100 text-green-800" default: return "bg-gray-100 text-gray-800" } } const getStatusColor = (status: string) => { switch (status) { case "Active": return "bg-red-100 text-red-800" case "Monitoring": return "bg-yellow-100 text-yellow-800" case "Contained": return "bg-blue-100 text-blue-800" case "Extinguished": return "bg-green-100 text-green-800" default: return "bg-gray-100 text-gray-800" } } const getCurrentAlerts = () => { const alerts = [ { type: "High Wind Warning", level: "warning", time: "2 hours ago" }, { type: "Extreme Fire Danger", level: "critical", time: "30 minutes ago" }, { type: "Weather Alert", level: "info", time: "15 minutes ago" }, ] return alerts } const alerts = getCurrentAlerts() return (

Current Alerts - {selectedCity}, {selectedState}

{alerts.map((alert, index) => (

{alert.type}

{alert.time}

{alert.level.toUpperCase()}

))}

Recent Incidents Active Fires Statistics Recent Fire Incidents

Last 7 days in {selectedState}, {selectedCountry}

{incidents.length > 0 ? ( incidents.map((incident: any, index: number) => (

{incident.location}

{incident.date} at {incident.time}

Area: {incident.area}

Cause: {incident.cause}

{incident.severity.replace("-", " ").toUpperCase()}

{incident.status}

)) ) : (

No recent incidents reported for this location

)}

Active Fire Monitoring

Active Fires

Under Watch

Contained

98%

Detection Rate

Fire Statistics - {selectedState}

This Month

Total Incidents {incidents.length + 15}

Area Burned 12,456 hectares

Avg Response Time 18 minutes

Containment Rate 87%

Common Causes

Lightning 35%

Human Activity 28%

Power Lines 18%

Vehicle Accidents 12%

Other 7%

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Flame, MapPin, BarChart3, Clock, Activity } from "lucide-react" import LocationSelector from "@/components/location-selector" import FireRiskMap from "@/components/fire-risk-map" import FireSpreadSimulation from "@/components/fire-spread-simulation" import RecentIncidents from "@/components/recent-incidents" export default function ForestFireSimulation() { const [activeTab, setActiveTab] = useState("prediction") const [selectedCountry, setSelectedCountry] = useState("United States") const [selectedState, setSelectedState] = useState("California") const [selectedCity, setSelectedCity] = useState("Los Angeles") const [selectedTime, setSelectedTime] = useState("03:00 PM") return (

Global Forest Fire Monitoring System

Real-time fire risk prediction and spread simulation worldwide

{selectedCity}, {selectedState}, {selectedCountry} {selectedTime} 30m Resolution Real-time Data

Fire Risk Simulation Incidents Analysis

Model Performance Evaluation metrics for fire prediction

Accuracy 87.3%

Precision 84.1%

Recall 89.7%

F1-Score 86.8%

Simulation Accuracy Fire spread model validation

Spatial Accuracy 82.5%

Temporal Accuracy 78.9%

Burn Area Prediction 85.3%

Rate of Spread 80.1%

Key Findings Analysis results and insights for {selectedCountry}

High-Risk Factors

• Low humidity ({"<"}30%) increases fire probability by 40%
• Wind speeds {">"} 20 km/h accelerate spread by 2.5x
• South-facing slopes show 60% higher risk
• Dry deciduous forests are most vulnerable
• PM hours show 30% higher ignition rates

Mitigation Strategies

• Focus monitoring on identified high-risk zones
• Deploy resources during peak risk hours (2-6 PM)
• Create firebreaks in vulnerable corridors
• Early warning system for weather conditions
• Community education and preparedness programs

Global Statistics

24,567

Active Fires Worldwide

1.2M

Hectares Burned (YTD)

89%

Detection Accuracy

Risk Distribution

Very High Risk 12%

High Risk 23%

Medium Risk 35%

Low Risk 30%

Response Metrics

Avg Response Time (min)

92%

Containment Rate

156

Active Response Teams

) }