import React, { useState, useMemo } from "react"; import { LineChart, Line, XAxis, YAxis, Tooltip, BarChart, Bar, CartesianGrid, Legend, ResponsiveContainer } from "recharts"; import { MapContainer, TileLayer, GeoJSON, CircleMarker } from "react-leaflet"; import "leaflet/dist/leaflet.css"; import "leaflet-defaulticon-compatibility"; import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";

// ------------------ DATA ------------------

// Dummy GeoJSON (replace later) const wardsGeoJSON = { type: "FeatureCollection", features: [ { type: "Feature", properties: { ward: "Ward 1", zone: "Core", density: 900, flooding: 0.7 }, geometry: { type: "Polygon", coordinates: [[[85.88,20.46],[85.89,20.46],[85.89,20.47],[85.88,20.47],[85.88,20.46]]] } }, { type: "Feature", properties: { ward: "Ward 2", zone: "Periphery", density: 400, flooding: 0.3 }, geometry: { type: "Polygon", coordinates: [[[85.87,20.45],[85.88,20.45],[85.88,20.46],[85.87,20.46],[85.87,20.45]]] } } ] };

// Climate + dengue const climateData = [ { year: 2025, rainfall: 1200, dengue: 2400 }, { year: 2035, rainfall: 1400, dengue: 3100 }, { year: 2045, rainfall: 1600, dengue: 4200 } ];

// Demand gap const demandGap = [ { year: 2025, demand: 100, supply: 70, gap: 30 }, { year: 2035, demand: 140, supply: 95, gap: 45 }, { year: 2045, demand: 180, supply: 120, gap: 60 } ];

// Interventions const interventions = [ { name: "WASH Hub", lat: 20.462, lng: 85.883 }, { name: "SSF Unit", lat: 20.465, lng: 85.887 } ];

// ------------------ APP ------------------

export default function App() {

const [zoneFilter, setZoneFilter] = useState("All"); const [layer, setLayer] = useState("risk");

// Risk model const processedData = useMemo(() => { return wardsGeoJSON.features.map(f => ({ ...f, properties: { ...f.properties, risk: (f.properties.density * 0.001) + (f.properties.flooding * 10) } })); }, []);

const filtered = processedData.filter( f => zoneFilter === "All" || f.properties.zone === zoneFilter );

const getColor = (risk) => { if (risk > 8) return "red"; if (risk > 5) return "orange"; return "green"; };

return ( <div style={{ display: "flex", height: "100vh", fontFamily: "Arial" }}> {/* SIDEBAR /} <div style={{ width: "250px", background: "#111", color: "white", padding: "20px" }}>

Cuttack Dashboard

Zone Filter

<select onChange={(e) => setZoneFilter(e.target.value)} style={{ width: "100%" }}> All Core Periphery <h4 style={{ marginTop: "20px" }}>Layers <button onClick={() => setLayer("risk")} style={{ width: "100%", marginBottom: "5px" }}> Risk Layer <button onClick={() => setLayer("infra")} style={{ width: "100%" }}> Infrastructure {/ MAIN /} <div style={{ flex: 1, padding: "20px", overflow: "auto" }}>

Health + Climate Dashboard

{/ KPI /} <div style={{ display: "flex", gap: "20px", marginBottom: "20px" }}>

Population: 890,000

Coverage: 65%

High Risk: 40%

{/ CHARTS /} <div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}> <div style={{ width: "48%" }}>

Rainfall vs Dengue

<div style={{ width: "48%" }}>

Demand vs Gap

{/ MAP /} <h3 style={{ marginTop: "30px" }}>GIS Dashboard <MapContainer center={[20.4625, 85.8830]} zoom={13} style={{ height: "450px", marginTop: "10px" }} > {/ Risk Layer /} {layer === "risk" && ( <GeoJSON data={{ type: "FeatureCollection", features: filtered }} style={(f) => ({ color: getColor(f.properties.risk), weight: 2 })} /> )} {/ Infrastructure Layer */} {layer === "infra" && interventions.map((i, idx) => ( <CircleMarker key={idx} center={[i.lat, i.lng]} radius={8} /> )) } ); } npm install recharts leaflet react-leaflet leaflet-defaulticon-compatibility npm start