From dbbf7638a635542ed083822c191a5aa771dceea6 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 5 Sep 2026 17:15:55 +0000
Subject: [PATCH] Build FloodIntel intelligence, map, and safety pages

---
 frontend/app/alerts/page.tsx             |   2 +
 frontend/app/assistant/page.tsx          |   2 +
 frontend/app/emergency/page.tsx          |   3 +
 frontend/app/globals.css                 |  27 +-
 frontend/app/history/page.tsx            |   3 +
 frontend/app/layout.tsx                  |  28 +-
 frontend/app/map/page.tsx                |   4 +
 frontend/app/page.tsx                    | 939 +----------------------
 frontend/app/report/page.tsx             |   4 +
 frontend/app/risk/page.tsx               |   3 +
 frontend/components/AIChat.tsx           |   4 +
 frontend/components/AppShell.tsx         |   4 +
 frontend/components/FloodMap.tsx         |   5 +
 frontend/components/LanguageSelector.tsx |   3 +
 frontend/components/LocationSearch.tsx   |   3 +
 frontend/components/OfflineBanner.tsx    |   3 +
 frontend/components/StatusCard.tsx       |   3 +
 frontend/lib/api.ts                      |  66 +-
 frontend/lib/types.ts                    |  48 +-
 frontend/lib/useFloodData.ts             |   6 +
 frontend/package-lock.json               | 114 ---
 21 files changed, 76 insertions(+), 1198 deletions(-)
 create mode 100644 frontend/app/assistant/page.tsx
 create mode 100644 frontend/app/risk/page.tsx
 create mode 100644 frontend/components/AppShell.tsx
 create mode 100644 frontend/components/LocationSearch.tsx
 create mode 100644 frontend/components/StatusCard.tsx
 create mode 100644 frontend/lib/useFloodData.ts

diff --git a/frontend/app/alerts/page.tsx b/frontend/app/alerts/page.tsx
index e69de29..a6f2cb1 100644
--- a/frontend/app/alerts/page.tsx
+++ b/frontend/app/alerts/page.tsx
@@ -0,0 +1,2 @@
+import AppShell from "@/components/AppShell"; import { BellOff } from "lucide-react";
+export default function AlertsPage(){return <AppShell><div className="mx-auto max-w-4xl px-4 py-10 sm:px-6"><p className="eyebrow">Alerts</p><h1 className="mt-2 text-3xl font-bold">Active flood alerts</h1><section className="card mt-7 text-center"><BellOff className="mx-auto text-slate-400" size={32}/><h2 className="mt-4 text-xl font-semibold">No live alerts available</h2><p className="mx-auto mt-2 max-w-lg text-sm leading-6 text-slate-400">No live alerts are currently available from the connected backend. Check official local emergency communications for urgent instructions.</p></section></div></AppShell>}
diff --git a/frontend/app/assistant/page.tsx b/frontend/app/assistant/page.tsx
new file mode 100644
index 0000000..7afdbc3
--- /dev/null
+++ b/frontend/app/assistant/page.tsx
@@ -0,0 +1,2 @@
+import AppShell from "@/components/AppShell"; import AIChat from "@/components/AIChat";
+export default function AssistantPage(){return <AppShell><div className="mx-auto max-w-3xl px-4 py-10 sm:px-6"><AIChat/></div></AppShell>}
diff --git a/frontend/app/emergency/page.tsx b/frontend/app/emergency/page.tsx
index e69de29..28fa4ea 100644
--- a/frontend/app/emergency/page.tsx
+++ b/frontend/app/emergency/page.tsx
@@ -0,0 +1,3 @@
+import AppShell from "@/components/AppShell"; import { TriangleAlert } from "lucide-react";
+const steps=["Move to higher ground when flooding is possible.","Avoid walking or driving through floodwater.","Follow evacuation instructions from local authorities.","Keep essential documents, medicines, water, and a charged phone ready.","Turn off electricity only if it is safe to do so."];
+export default function EmergencyPage(){return <AppShell><div className="mx-auto max-w-5xl px-4 py-10 sm:px-6"><div className="rounded-2xl border border-red-400/30 bg-red-400/10 p-6"><TriangleAlert className="text-red-200" size={28}/><p className="eyebrow mt-4 text-red-200">Emergency guidance</p><h1 className="mt-2 text-3xl font-bold">Stay safe during flooding</h1><p className="mt-3 max-w-2xl text-sm leading-6 text-slate-200">For immediate danger, follow official emergency instructions and contact locally published emergency services. FloodIntel does not invent emergency contact numbers.</p></div><section className="mt-6 grid gap-4 md:grid-cols-2"><div className="card"><h2 className="text-xl font-semibold">Safety checklist</h2><ol className="mt-4 space-y-3 text-sm text-slate-300">{steps.map((s,i)=><li key={s} className="flex gap-3"><span className="font-bold text-cyan-300">{i+1}</span>{s}</li>)}</ol></div><div className="card"><h2 className="text-xl font-semibold">Evacuation guidance</h2><p className="mt-4 text-sm leading-6 text-slate-300">Use routes designated by local authorities. Never enter a closed road, bridge, drain, or fast-moving water. Help children, older adults, and people who may need assistance move to safety early.</p><h2 className="mt-6 text-xl font-semibold">Emergency contacts</h2><p className="mt-2 text-sm text-slate-400">Data unavailable. Use official local government and disaster-management channels for verified contact details.</p></div></section></div></AppShell>}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a2dc41e..7cf37e1 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1,26 +1,3 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
+:root { --background:#061423; --foreground:#e8f4ff; }
+* { box-sizing:border-box; } html { background:var(--background); } body { margin:0; background:var(--background); color:var(--foreground); font-family:Arial, Helvetica, sans-serif; } button, input, select { font:inherit; } button { cursor:pointer; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #67e8f9; outline-offset:3px; } .card { border:1px solid rgb(255 255 255 / .12); border-radius:1rem; background:rgb(255 255 255 / .045); padding:1.25rem; } .eyebrow { color:#67e8f9; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } dt { color:#94a3b8; font-size:.75rem; } dd { margin-top:.2rem; color:#f1f5f9; font-weight:600; }
diff --git a/frontend/app/history/page.tsx b/frontend/app/history/page.tsx
index e69de29..10df032 100644
--- a/frontend/app/history/page.tsx
+++ b/frontend/app/history/page.tsx
@@ -0,0 +1,3 @@
+"use client";
+import AppShell from "@/components/AppShell"; import { Search } from "lucide-react"; import { useState } from "react";
+export default function HistoryPage(){const [query,setQuery]=useState("");return <AppShell><div className="mx-auto max-w-5xl px-4 py-10 sm:px-6"><p className="eyebrow">History</p><h1 className="mt-2 text-3xl font-bold">Historical flood events</h1><label className="mt-7 flex max-w-md items-center gap-2 rounded-xl border border-white/10 bg-slate-950 px-3"><Search size={17} className="text-slate-400"/><span className="sr-only">Search historical events</span><input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search events or locations" className="w-full bg-transparent py-3 text-sm outline-none"/></label><section className="card mt-5"><h2 className="font-semibold">No data available</h2><p className="mt-2 text-sm text-slate-400">The connected backend does not currently provide historical flood-event data. Your search has not been applied to unavailable data.</p></section></div></AppShell>}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 9852c15..245db7b 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,29 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({ children }: LayoutProps<"/">) {
-  return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
-    </html>
-  );
-}
+export const metadata: Metadata = { title: "FloodIntel | Flood Intelligence", description: "AI-powered flood intelligence and early warning platform" };
+export default function RootLayout({ children }: { children: React.ReactNode }) { return <html lang="en"><body><div className="min-h-screen bg-[#061423] text-slate-100">{children}</div></body></html>; }
diff --git a/frontend/app/map/page.tsx b/frontend/app/map/page.tsx
index e69de29..405be40 100644
--- a/frontend/app/map/page.tsx
+++ b/frontend/app/map/page.tsx
@@ -0,0 +1,4 @@
+"use client";
+import dynamic from "next/dynamic"; import { useSearchParams } from "next/navigation"; import AppShell from "@/components/AppShell"; import LocationSearch from "@/components/LocationSearch";
+const FloodMap=dynamic(()=>import("@/components/FloodMap"),{ssr:false,loading:()=> <div className="grid h-[420px] place-items-center rounded-xl bg-slate-900 text-slate-400">Loading interactive map…</div>});
+export default function MapPage(){const p=useSearchParams();const lat=Number(p.get("lat")),lng=Number(p.get("lng"));const valid=Number.isFinite(lat)&&Number.isFinite(lng);const query=p.get("q");return <AppShell><div className="mx-auto max-w-7xl px-4 py-10 sm:px-6"><p className="eyebrow">Live map</p><h1 className="mt-2 text-3xl font-bold">Flood intelligence map</h1><p className="mt-2 text-slate-400">OpenStreetMap with your selected position. Place search requires a verified geocoding service, which is not configured.</p><div className="mt-6"><LocationSearch/></div><div className="mt-6 grid gap-5 lg:grid-cols-4"><div className="card p-3 lg:col-span-3"><FloodMap position={valid?[lat,lng]:undefined} label={query||"Selected location"}/></div><aside className="card"><p className="eyebrow">Layers</p><h2 className="mt-2 font-bold">Available data</h2><ul className="mt-4 space-y-3 text-sm"><li><strong className="text-cyan-200">Base map</strong><br/><span className="text-slate-400">Available</span></li><li><strong>Flood risk layer</strong><br/><span className="text-slate-400">Unavailable from backend</span></li><li><strong>Flood events</strong><br/><span className="text-slate-400">Unavailable from backend</span></li><li><strong>Rivers & waterbodies</strong><br/><span className="text-slate-400">Unavailable from backend</span></li></ul><div className="mt-6 border-t border-white/10 pt-4 text-sm text-slate-400"><strong className="block text-slate-200">Selected location</strong>{valid?`${lat.toFixed(5)}, ${lng.toFixed(5)}`:query||"No location selected"}</div></aside></div></div></AppShell>}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 20779cc..b0b1919 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,937 +1,4 @@
 "use client";
-
-import { useState } from "react";
-
-type RiskLevel = "Low" | "Moderate" | "High" | "Severe";
-
-const navItems = [
-  "Overview",
-  "Risk Map",
-  "Alerts",
-  "History",
-  "Reports",
-];
-
-const languages = [
-  "English",
-  "తెలుగు",
-  "हिन्दी",
-  "தமிழ்",
-  "ಕನ್ನಡ",
-];
-
-const riskFactors = [
-  { name: "Rainfall", value: 78, level: "High" },
-  { name: "Water proximity", value: 55, level: "Medium" },
-  { name: "Terrain / elevation", value: 32, level: "Low" },
-  { name: "Historical flooding", value: 61, level: "Medium" },
-];
-
-const alerts = [
-  {
-    title: "Heavy rainfall watch",
-    location: "Selected region",
-    time: "Monitoring",
-    severity: "High",
-  },
-  {
-    title: "Water level observation",
-    location: "Nearby waterbody",
-    time: "Monitoring",
-    severity: "Moderate",
-  },
-  {
-    title: "Flood preparedness advisory",
-    location: "Local area",
-    time: "Active",
-    severity: "Info",
-  },
-];
-
-const historicalEvents = [
-  { year: "2025", event: "Major rainfall event", impact: "High" },
-  { year: "2024", event: "Urban inundation", impact: "Moderate" },
-  { year: "2023", event: "River flooding", impact: "High" },
-];
-
-export default function Home() {
-  const [location, setLocation] = useState("");
-  const [language, setLanguage] = useState("English");
-  const [riskLevel] = useState<RiskLevel>("Moderate");
-  const [showLanguages, setShowLanguages] = useState(false);
-  const [mobileMenu, setMobileMenu] = useState(false);
-  const [assistantOpen, setAssistantOpen] = useState(false);
-
-  const riskStyles = {
-    Low: {
-      badge: "bg-emerald-400/10 text-emerald-300 border-emerald-400/20",
-      text: "text-emerald-400",
-    },
-    Moderate: {
-      badge: "bg-amber-400/10 text-amber-300 border-amber-400/20",
-      text: "text-amber-400",
-    },
-    High: {
-      badge: "bg-orange-400/10 text-orange-300 border-orange-400/20",
-      text: "text-orange-400",
-    },
-    Severe: {
-      badge: "bg-red-400/10 text-red-300 border-red-400/20",
-      text: "text-red-400",
-    },
-  };
-
-  const currentRisk = riskStyles[riskLevel];
-
-  return (
-    <main className="min-h-screen bg-[#06111f] text-white selection:bg-cyan-400/30">
-      {/* ========================================================= */}
-      {/* HEADER */}
-      {/* ========================================================= */}
-
-      <header className="sticky top-0 z-50 border-b border-white/10 bg-[#06111f]/90 backdrop-blur-xl">
-        <div className="mx-auto flex h-18 max-w-7xl items-center justify-between px-5 sm:px-6">
-          {/* Brand */}
-          <a href="#" className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-400 font-black text-lg text-[#06111f] shadow-lg shadow-cyan-400/20">
-              F
-            </div>
-
-            <div>
-              <div className="text-lg font-bold tracking-tight">
-                FloodIntel
-              </div>
-              <div className="hidden text-[10px] font-medium uppercase tracking-[0.18em] text-slate-500 sm:block">
-                Flood Intelligence Platform
-              </div>
-            </div>
-          </a>
-
-          {/* Desktop navigation */}
-          <nav className="hidden items-center gap-7 lg:flex">
-            {navItems.map((item, index) => (
-              <a
-                key={item}
-                href={`#${item.toLowerCase().replaceAll(" ", "-")}`}
-                className={`text-sm transition ${
-                  index === 0
-                    ? "font-semibold text-cyan-300"
-                    : "text-slate-400 hover:text-white"
-                }`}
-              >
-                {item}
-              </a>
-            ))}
-
-            <a
-              href="#municipality"
-              className="rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200 transition hover:border-cyan-400/30 hover:bg-cyan-400/10 hover:text-cyan-300"
-            >
-              Municipality
-            </a>
-          </nav>
-
-          {/* Header actions */}
-          <div className="flex items-center gap-2">
-            <div className="relative hidden sm:block">
-              <button
-                onClick={() => setShowLanguages(!showLanguages)}
-                className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-300 transition hover:bg-white/10"
-              >
-                🌐 {language}
-              </button>
-
-              {showLanguages && (
-                <div className="absolute right-0 mt-2 w-40 overflow-hidden rounded-xl border border-white/10 bg-[#0b1a2b] p-1 shadow-2xl">
-                  {languages.map((item) => (
-                    <button
-                      key={item}
-                      onClick={() => {
-                        setLanguage(item);
-                        setShowLanguages(false);
-                      }}
-                      className="block w-full rounded-lg px-3 py-2 text-left text-sm text-slate-300 hover:bg-white/10 hover:text-white"
-                    >
-                      {item}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            <button
-              onClick={() => setMobileMenu(!mobileMenu)}
-              className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-lg lg:hidden"
-              aria-label="Open menu"
-            >
-              ☰
-            </button>
-
-            <button className="hidden rounded-lg bg-white px-4 py-2 text-sm font-semibold text-[#06111f] transition hover:bg-cyan-300 sm:block">
-              Sign in
-            </button>
-          </div>
-        </div>
-
-        {/* Mobile navigation */}
-        {mobileMenu && (
-          <div className="border-t border-white/10 bg-[#071525] px-5 py-4 lg:hidden">
-            <div className="space-y-1">
-              {navItems.map((item) => (
-                <a
-                  key={item}
-                  href={`#${item.toLowerCase().replaceAll(" ", "-")}`}
-                  onClick={() => setMobileMenu(false)}
-                  className="block rounded-lg px-3 py-3 text-sm text-slate-300 hover:bg-white/5 hover:text-cyan-300"
-                >
-                  {item}
-                </a>
-              ))}
-
-              <a
-                href="#municipality"
-                className="block rounded-lg px-3 py-3 text-sm text-slate-300 hover:bg-white/5 hover:text-cyan-300"
-              >
-                Municipality Dashboard
-              </a>
-            </div>
-          </div>
-        )}
-      </header>
-
-      {/* ========================================================= */}
-      {/* HERO */}
-      {/* ========================================================= */}
-
-      <section className="relative overflow-hidden border-b border-white/10">
-        {/* Background decoration */}
-        <div className="pointer-events-none absolute inset-0">
-          <div className="absolute left-1/4 top-0 h-96 w-96 rounded-full bg-cyan-500/10 blur-3xl" />
-          <div className="absolute right-0 top-32 h-80 w-80 rounded-full bg-blue-500/10 blur-3xl" />
-          <div className="absolute bottom-0 left-1/2 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl" />
-        </div>
-
-        <div className="relative mx-auto max-w-7xl px-5 pb-16 pt-16 sm:px-6 lg:pb-20 lg:pt-24">
-          <div className="max-w-4xl">
-            {/* Status */}
-            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-400/10 px-4 py-2 text-xs font-medium text-cyan-300">
-              <span className="h-2 w-2 animate-pulse rounded-full bg-cyan-400" />
-              Flood intelligence platform
-              <span className="text-slate-500">•</span>
-              India
-            </div>
-
-            <h1 className="text-4xl font-black leading-[1.05] tracking-tight sm:text-6xl lg:text-7xl">
-              Know the risk.
-              <br />
-              <span className="bg-gradient-to-r from-cyan-300 via-cyan-400 to-blue-400 bg-clip-text text-transparent">
-                Act before the flood.
-              </span>
-            </h1>
-
-            <p className="mt-7 max-w-2xl text-base leading-7 text-slate-400 sm:text-lg">
-              FloodIntel brings together rainfall, satellite observations,
-              terrain, water bodies and historical flood information to help
-              communities understand flood risk and respond earlier.
-            </p>
-
-            {/* Location search */}
-            <div className="mt-9 max-w-3xl">
-              <div className="flex flex-col gap-2 rounded-2xl border border-white/10 bg-white/[0.06] p-2 shadow-2xl shadow-black/20 backdrop-blur sm:flex-row">
-                <div className="flex flex-1 items-center gap-3 px-3">
-                  <span className="text-lg text-slate-500">⌖</span>
-
-                  <input
-                    value={location}
-                    onChange={(e) => setLocation(e.target.value)}
-                    placeholder="Search city, district, ward or use your location"
-                    className="w-full bg-transparent py-3 text-sm text-white outline-none placeholder:text-slate-500"
-                  />
-                </div>
-
-                <button className="rounded-xl bg-cyan-400 px-6 py-3 text-sm font-bold text-[#06111f] transition hover:bg-cyan-300">
-                  Check flood risk
-                </button>
-              </div>
-
-              <div className="mt-3 flex flex-wrap gap-4 text-xs text-slate-500">
-                <button className="hover:text-cyan-300">
-                  ◎ Use my current location
-                </button>
-                <span>•</span>
-                <span>India-wide intelligence</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* ========================================================= */}
-      {/* OVERVIEW */}
-      {/* ========================================================= */}
-
-      <section
-        id="overview"
-        className="mx-auto max-w-7xl px-5 py-12 sm:px-6 lg:py-16"
-      >
-        <div className="mb-7 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-cyan-400">
-              Risk overview
-            </p>
-
-            <h2 className="mt-2 text-2xl font-bold sm:text-3xl">
-              Flood conditions at a glance
-            </h2>
-          </div>
-
-          <div className="text-xs text-slate-500">
-            Data connection will appear here
-          </div>
-        </div>
-
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          {/* Risk */}
-          <div className="rounded-2xl border border-white/10 bg-white/[0.045] p-5 transition hover:border-cyan-400/20">
-            <div className="flex items-start justify-between">
-              <p className="text-sm text-slate-400">Current risk</p>
-
-              <span
-                className={`rounded-full border px-2.5 py-1 text-[11px] ${currentRisk.badge}`}
-              >
-                {riskLevel}
-              </span>
-            </div>
-
-            <p className={`mt-6 text-3xl font-bold ${currentRisk.text}`}>
-              {riskLevel}
-            </p>
-
-            <p className="mt-2 text-xs text-slate-500">
-              Awaiting location-specific data
-            </p>
-          </div>
-
-          {/* Rainfall */}
-          <div className="rounded-2xl border border-white/10 bg-white/[0.045] p-5 transition hover:border-cyan-400/20">
-            <p className="text-sm text-slate-400">Recent rainfall</p>
-
-            <p className="mt-6 text-3xl font-bold">
-              —
-            </p>
-
-            <p className="mt-2 text-xs text-slate-500">
-              Connect IMD rainfall data
-            </p>
-          </div>
-
-          {/* Flood zones */}
-          <div className="rounded-2xl border border-white/10 bg-white/[0.045] p-5 transition hover:border-cyan-400/20">
-            <p className="text-sm text-slate-400">Flood-prone zones</p>
-
-            <p className="mt-6 text-3xl font-bold">
-              —
-            </p>
-
-            <p className="mt-2 text-xs text-slate-500">
-              GIS intelligence
-            </p>
-          </div>
-
-          {/* Alerts */}
-          <div className="rounded-2xl border border-white/10 bg-white/[0.045] p-5 transition hover:border-cyan-400/20">
-            <p className="text-sm text-slate-400">Active alerts</p>
-
-            <p className="mt-6 text-3xl font-bold text-red-400">
-              —
-            </p>
-
-            <p className="mt-2 text-xs text-slate-500">
-              No live connection yet
-            </p>
-          </div>
-        </div>
-      </section>
-
-      {/* ========================================================= */}
-      {/* RISK MAP */}
-      {/* ========================================================= */}
-
-      <section
-        id="risk-map"
-        className="mx-auto max-w-7xl px-5 pb-12 sm:px-6 lg:pb-16"
-      >
-        <div className="grid gap-5 lg:grid-cols-3">
-          {/* Map */}
-          <div className="relative min-h-[480px] overflow-hidden rounded-3xl border border-white/10 bg-[#091827] lg:col-span-2">
-            {/* Map grid */}
-            <div
-              className="absolute inset-0 opacity-30"
-              style={{
-                backgroundImage:
-                  "linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px)",
-                backgroundSize: "48px 48px",
-              }}
-            />
-
-            {/* Simulated map shapes */}
-            <div className="absolute left-[15%] top-[28%] h-28 w-40 rounded-[55%] border border-cyan-400/20 bg-cyan-400/5 blur-[1px]" />
-            <div className="absolute right-[18%] top-[20%] h-32 w-48 rounded-[50%] border border-blue-400/20 bg-blue-400/5" />
-            <div className="absolute bottom-[20%] left-[35%] h-24 w-56 rounded-[50%] border border-indigo-400/20 bg-indigo-400/5" />
-
-            {/* Map content */}
-            <div className="relative z-10 flex min-h-[480px] flex-col justify-between p-6">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <div className="flex items-center gap-2">
-                    <span className="h-2 w-2 rounded-full bg-cyan-400" />
-                    <span className="text-xs font-semibold uppercase tracking-wider text-slate-300">
-                      Interactive risk map
-                    </span>
-                  </div>
-
-                  <h3 className="mt-2 text-xl font-bold">
-                    India Flood Intelligence
-                  </h3>
-                </div>
-
-                <button className="rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-xs text-slate-300 backdrop-blur hover:bg-white/10">
-                  Layers
-                </button>
-              </div>
-
-              <div className="mx-auto max-w-md text-center">
-                <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-3xl border border-cyan-400/20 bg-cyan-400/10 text-4xl">
-                  🌊
-                </div>
-
-                <h3 className="text-2xl font-bold">
-                  Your map will live here
-                </h3>
-
-                <p className="mt-3 text-sm leading-6 text-slate-400">
-                  This map component will connect to our real GIS layers,
-                  flood-risk predictions, rivers, water bodies, administrative
-                  boundaries and satellite-derived information.
-                </p>
-
-                <button className="mt-6 rounded-xl bg-white px-5 py-3 text-sm font-semibold text-[#06111f] hover:bg-cyan-300">
-                  Explore map
-                </button>
-              </div>
-
-              <div className="flex flex-wrap gap-2">
-                {["Risk", "Rainfall", "Water bodies", "Rivers", "History"].map(
-                  (layer) => (
-                    <button
-                      key={layer}
-                      className="rounded-lg border border-white/10 bg-black/20 px-3 py-2 text-xs text-slate-400 backdrop-blur hover:border-cyan-400/20 hover:text-cyan-300"
-                    >
-                      {layer}
-                    </button>
-                  ),
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* Risk explanation */}
-          <div className="rounded-3xl border border-white/10 bg-white/[0.045] p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-xs uppercase tracking-wider text-slate-500">
-                  AI analysis
-                </p>
-
-                <h3 className="mt-1 text-xl font-bold">
-                  Why this risk?
-                </h3>
-              </div>
-
-              <span
-                className={`rounded-full border px-3 py-1 text-xs ${currentRisk.badge}`}
-              >
-                {riskLevel}
-              </span>
-            </div>
-
-            <p className="mt-4 text-sm leading-6 text-slate-400">
-              FloodIntel will explain the major factors contributing to the
-              risk level instead of showing only a score.
-            </p>
-
-            <div className="mt-7 space-y-6">
-              {riskFactors.map((factor) => (
-                <div key={factor.name}>
-                  <div className="mb-2 flex items-center justify-between text-xs">
-                    <span className="text-slate-300">{factor.name}</span>
-                    <span className="text-slate-500">{factor.level}</span>
-                  </div>
-
-                  <div className="h-2 overflow-hidden rounded-full bg-slate-800">
-                    <div
-                      className="h-full rounded-full bg-cyan-400 transition-all"
-                      style={{ width: `${factor.value}%` }}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <button className="mt-8 w-full rounded-xl border border-white/10 bg-white/5 py-3 text-sm font-medium text-slate-200 hover:bg-white/10">
-              View detailed analysis
-            </button>
-          </div>
-        </div>
-      </section>
-
-      {/* ========================================================= */}
-      {/* ALERTS + RAINFALL */}
-      {/* ========================================================= */}
-
-      <section
-        id="alerts"
-        className="mx-auto max-w-7xl px-5 py-12 sm:px-6 lg:py-16"
-      >
-        <div className="grid gap-5 lg:grid-cols-5">
-          {/* Alerts */}
-          <div className="rounded-3xl border border-white/10 bg-white/[0.045] p-6 lg:col-span-3">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-xs uppercase tracking-wider text-red-400">
-                  Safety
-                </p>
-
-                <h2 className="mt-1 text-xl font-bold">
-                  Flood alerts & advisories
-                </h2>
-              </div>
-
-              <button className="text-xs text-cyan-300 hover:text-cyan-200">
-                View all →
-              </button>
-            </div>
-
-            <div className="mt-6 space-y-3">
-              {alerts.map((alert) => (
-                <div
-                  key={alert.title}
-                  className="flex items-center gap-4 rounded-2xl border border-white/10 bg-black/10 p-4"
-                >
-                  <div
-                    className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${
-                      alert.severity === "High"
-                        ? "bg-red-400/10 text-red-400"
-                        : alert.severity === "Moderate"
-                          ? "bg-amber-400/10 text-amber-400"
-                          : "bg-cyan-400/10 text-cyan-400"
-                    }`}
-                  >
-                    {alert.severity === "High" ? "!" : "i"}
-                  </div>
-
-                  <div className="min-w-0 flex-1">
-                    <p className="text-sm font-semibold text-slate-200">
-                      {alert.title}
-                    </p>
-
-                    <p className="mt-1 text-xs text-slate-500">
-                      {alert.location} • {alert.time}
-                    </p>
-                  </div>
-
-                  <span className="hidden rounded-full border border-white/10 px-2 py-1 text-[10px] text-slate-500 sm:block">
-                    {alert.severity}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Rainfall */}
-          <div className="rounded-3xl border border-white/10 bg-white/[0.045] p-6 lg:col-span-2">
-            <p className="text-xs uppercase tracking-wider text-cyan-400">
-              Weather intelligence
-            </p>
-
-            <h2 className="mt-1 text-xl font-bold">
-              Rainfall monitoring
-            </h2>
-
-            <div className="mt-7 flex items-end justify-between">
-              <div>
-                <p className="text-4xl font-black">—</p>
-                <p className="mt-1 text-xs text-slate-500">
-                  Recent rainfall
-                </p>
-              </div>
-
-              <div className="rounded-xl bg-cyan-400/10 px-3 py-2 text-xs text-cyan-300">
-                IMD data
-              </div>
-            </div>
-
-            {/* Chart placeholder */}
-            <div className="mt-8 flex h-32 items-end gap-2">
-              {[35, 52, 42, 68, 45, 80, 58, 72, 50, 65, 42, 74].map(
-                (height, index) => (
-                  <div
-                    key={index}
-                    className="flex-1 rounded-t-md bg-cyan-400/20"
-                    style={{ height: `${height}%` }}
-                  />
-                ),
-              )}
-            </div>
-
-            <div className="mt-3 flex justify-between text-[10px] text-slate-600">
-              <span>Past</span>
-              <span>Today</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* ========================================================= */}
-      {/* HISTORY */}
-      {/* ========================================================= */}
-
-      <section
-        id="history"
-        className="border-y border-white/10 bg-[#071525]"
-      >
-        <div className="mx-auto max-w-7xl px-5 py-12 sm:px-6 lg:py-16">
-          <div className="max-w-2xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-cyan-400">
-              Historical intelligence
-            </p>
-
-            <h2 className="mt-2 text-2xl font-bold sm:text-3xl">
-              Understand what happened before
-            </h2>
-
-            <p className="mt-3 text-sm leading-6 text-slate-400">
-              Explore previous flood events and compare historical conditions
-              with current observations.
-            </p>
-          </div>
-
-          <div className="mt-8 grid gap-4 md:grid-cols-3">
-            {historicalEvents.map((event) => (
-              <div
-                key={event.year}
-                className="rounded-2xl border border-white/10 bg-white/[0.035] p-5"
-              >
-                <div className="flex items-center justify-between">
-                  <span className="text-2xl font-black text-cyan-400">
-                    {event.year}
-                  </span>
-
-                  <span className="rounded-full bg-white/5 px-2.5 py-1 text-[10px] text-slate-400">
-                    {event.impact} impact
-                  </span>
-                </div>
-
-                <h3 className="mt-6 font-semibold">
-                  {event.event}
-                </h3>
-
-                <p className="mt-2 text-xs leading-5 text-slate-500">
-                  Historical event details will be loaded from the FloodIntel
-                  database and verified data sources.
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* ========================================================= */}
-      {/* CITIZEN REPORTING */}
-      {/* ========================================================= */}
-
-      <section
-        id="reports"
-        className="mx-auto max-w-7xl px-5 py-12 sm:px-6 lg:py-16"
-      >
-        <div className="grid gap-6 lg:grid-cols-2">
-          <div className="rounded-3xl border border-cyan-400/10 bg-cyan-400/[0.04] p-7">
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-400/10 text-2xl">
-              📸
-            </div>
-
-            <h2 className="mt-6 text-2xl font-bold">
-              Report flooding in your area
-            </h2>
-
-            <p className="mt-3 max-w-lg text-sm leading-6 text-slate-400">
-              Help authorities understand ground conditions by submitting a
-              flood report with a photo, location and description.
-            </p>
-
-            <button className="mt-7 rounded-xl bg-cyan-400 px-5 py-3 text-sm font-bold text-[#06111f] hover:bg-cyan-300">
-              Report a flood
-            </button>
-          </div>
-
-          <div
-            id="municipality"
-            className="rounded-3xl border border-white/10 bg-white/[0.045] p-7"
-          >
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-400/10 text-2xl">
-              📊
-            </div>
-
-            <h2 className="mt-6 text-2xl font-bold">
-              Municipality intelligence
-            </h2>
-
-            <p className="mt-3 max-w-lg text-sm leading-6 text-slate-400">
-              Monitor high-risk wards, rainfall, citizen reports, flood
-              history and emerging risk from one operational dashboard.
-            </p>
-
-            <button className="mt-7 rounded-xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-semibold text-white hover:bg-white/10">
-              Open authority dashboard
-            </button>
-          </div>
-        </div>
-      </section>
-
-      {/* ========================================================= */}
-      {/* AI ASSISTANT */}
-      {/* ========================================================= */}
-
-      <section className="mx-auto max-w-7xl px-5 pb-12 sm:px-6 lg:pb-16">
-        <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-cyan-400/[0.08] via-white/[0.03] to-blue-500/[0.08] p-7 sm:p-10">
-          <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-cyan-400/10 blur-3xl" />
-
-          <div className="relative max-w-3xl">
-            <div className="flex items-center gap-3">
-              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-cyan-400 text-xl text-[#06111f]">
-                ✦
-              </div>
-
-              <div>
-                <p className="text-xs uppercase tracking-wider text-cyan-300">
-                  FloodIntel AI
-                </p>
-                <h2 className="text-xl font-bold">
-                  Ask about flood risk
-                </h2>
-              </div>
-            </div>
-
-            <p className="mt-5 text-sm leading-6 text-slate-400 sm:text-base">
-              Ask questions about your local flood risk, rainfall, alerts,
-              historical events and preparedness. The assistant will be
-              connected to FloodIntel data instead of relying only on generic
-              AI answers.
-            </p>
-
-            <div className="mt-6 flex flex-wrap gap-2">
-              {[
-                "What is my flood risk?",
-                "Why is the risk high?",
-                "What should I do now?",
-              ].map((question) => (
-                <button
-                  key={question}
-                  onClick={() => setAssistantOpen(true)}
-                  className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs text-slate-300 hover:border-cyan-400/20 hover:text-cyan-300"
-                >
-                  {question}
-                </button>
-              ))}
-            </div>
-
-            <button
-              onClick={() => setAssistantOpen(true)}
-              className="mt-6 rounded-xl bg-white px-5 py-3 text-sm font-bold text-[#06111f] hover:bg-cyan-300"
-            >
-              Open AI assistant
-            </button>
-          </div>
-        </div>
-      </section>
-
-      {/* ========================================================= */}
-      {/* OFFLINE + EMERGENCY */}
-      {/* ========================================================= */}
-
-      <section className="border-y border-white/10 bg-[#071525]">
-        <div className="mx-auto grid max-w-7xl gap-5 px-5 py-10 sm:px-6 md:grid-cols-2">
-          <div className="rounded-2xl border border-white/10 bg-white/[0.035] p-5">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-400/10 text-emerald-400">
-                ◉
-              </div>
-
-              <div>
-                <h3 className="font-semibold">
-                  Offline-ready intelligence
-                </h3>
-
-                <p className="mt-1 text-xs text-slate-500">
-                  Essential alerts, saved locations and emergency information
-                  can remain available when connectivity is limited.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="rounded-2xl border border-red-400/10 bg-red-400/[0.04] p-5">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-red-400/10 text-red-400">
-                !
-              </div>
-
-              <div>
-                <h3 className="font-semibold">
-                  Emergency preparedness
-                </h3>
-
-                <p className="mt-1 text-xs text-slate-500">
-                  Emergency contacts, safety guidance and evacuation
-                  information will be available from the platform.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* ========================================================= */}
-      {/* FOOTER */}
-      {/* ========================================================= */}
-
-      <footer className="mx-auto max-w-7xl px-5 py-10 sm:px-6">
-        <div className="flex flex-col justify-between gap-6 border-b border-white/10 pb-8 md:flex-row">
-          <div>
-            <div className="flex items-center gap-3">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-cyan-400 font-black text-[#06111f]">
-                F
-              </div>
-
-              <span className="font-bold">
-                FloodIntel
-              </span>
-            </div>
-
-            <p className="mt-3 max-w-sm text-xs leading-5 text-slate-500">
-              AI-powered flood intelligence and early-warning platform for
-              safer communities and smarter disaster management.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-2 gap-x-12 gap-y-3 text-xs text-slate-500 sm:grid-cols-3">
-            <a href="#overview" className="hover:text-cyan-300">
-              Overview
-            </a>
-            <a href="#risk-map" className="hover:text-cyan-300">
-              Risk Map
-            </a>
-            <a href="#alerts" className="hover:text-cyan-300">
-              Alerts
-            </a>
-            <a href="#history" className="hover:text-cyan-300">
-              History
-            </a>
-            <a href="#reports" className="hover:text-cyan-300">
-              Reports
-            </a>
-            <a href="#municipality" className="hover:text-cyan-300">
-              Municipality
-            </a>
-          </div>
-        </div>
-
-        <div className="flex flex-col justify-between gap-3 pt-6 text-[11px] text-slate-600 sm:flex-row">
-          <p>© 2026 FloodIntel. Built for safer communities.</p>
-          <p>Data-driven • AI-assisted • Disaster-focused</p>
-        </div>
-      </footer>
-
-      {/* ========================================================= */}
-      {/* FLOATING AI BUTTON */}
-      {/* ========================================================= */}
-
-      <button
-        onClick={() => setAssistantOpen(true)}
-        className="fixed bottom-5 right-5 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-cyan-400 text-xl text-[#06111f] shadow-2xl shadow-cyan-400/20 transition hover:scale-105 hover:bg-cyan-300"
-        aria-label="Open FloodIntel AI assistant"
-      >
-        ✦
-      </button>
-
-      {/* ========================================================= */}
-      {/* AI ASSISTANT PANEL */}
-      {/* ========================================================= */}
-
-      {assistantOpen && (
-        <div className="fixed inset-0 z-[60] flex items-end justify-center bg-black/60 p-3 backdrop-blur-sm sm:items-center">
-          <div className="w-full max-w-lg overflow-hidden rounded-3xl border border-white/10 bg-[#0a1828] shadow-2xl">
-            <div className="flex items-center justify-between border-b border-white/10 p-5">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-400 text-[#06111f]">
-                  ✦
-                </div>
-
-                <div>
-                  <h3 className="font-bold">
-                    FloodIntel AI
-                  </h3>
-                  <p className="text-[11px] text-slate-500">
-                    Data-connected assistant
-                  </p>
-                </div>
-              </div>
-
-              <button
-                onClick={() => setAssistantOpen(false)}
-                className="rounded-lg px-3 py-2 text-slate-400 hover:bg-white/5 hover:text-white"
-              >
-                ✕
-              </button>
-            </div>
-
-            <div className="p-5">
-              <div className="rounded-2xl bg-white/5 p-4">
-                <p className="text-sm leading-6 text-slate-300">
-                  The FloodIntel AI assistant is ready for integration with
-                  the FastAPI backend, risk engine, rainfall data and
-                  Supabase.
-                </p>
-              </div>
-
-              <div className="mt-4 flex flex-wrap gap-2">
-                <button className="rounded-full border border-white/10 px-3 py-2 text-xs text-slate-400 hover:border-cyan-400/20 hover:text-cyan-300">
-                  Check local risk
-                </button>
-
-                <button className="rounded-full border border-white/10 px-3 py-2 text-xs text-slate-400 hover:border-cyan-400/20 hover:text-cyan-300">
-                  Explain risk
-                </button>
-
-                <button className="rounded-full border border-white/10 px-3 py-2 text-xs text-slate-400 hover:border-cyan-400/20 hover:text-cyan-300">
-                  Safety guidance
-                </button>
-              </div>
-
-              <div className="mt-5 flex gap-2 rounded-xl border border-white/10 bg-black/20 p-2">
-                <input
-                  placeholder="Ask FloodIntel..."
-                  className="min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-slate-600"
-                />
-
-                <button className="rounded-lg bg-cyan-400 px-4 py-2 text-sm font-bold text-[#06111f]">
-                  Send
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </main>
-  );
-}
\ No newline at end of file
+import dynamic from "next/dynamic"; import Link from "next/link"; import { ArrowRight, Bell, CloudRain, Map, ShieldAlert } from "lucide-react"; import AppShell from "@/components/AppShell"; import LocationSearch from "@/components/LocationSearch"; import StatusCard from "@/components/StatusCard"; import { useFloodData } from "@/lib/useFloodData";
+const FloodMap=dynamic(()=>import("@/components/FloodMap"),{ssr:false,loading:()=> <div className="grid h-[420px] place-items-center rounded-xl bg-slate-900 text-slate-400">Loading interactive map…</div>});
+export default function Home(){const {state,data,refresh}=useFloodData();return <AppShell><section className="border-b border-white/10 bg-[radial-gradient(circle_at_30%_0%,rgba(34,211,238,.18),transparent_36%),#061423]"><div className="mx-auto max-w-7xl px-4 py-18 sm:px-6 sm:py-24"><p className="eyebrow">Flood intelligence platform</p><h1 className="mt-4 max-w-3xl text-5xl font-black tracking-tight sm:text-7xl">Know the risk.<br/><span className="text-cyan-300">Act before the flood.</span></h1><p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">Clear, honest flood detection information from the connected FloodIntel backend, designed to help communities prepare and respond.</p><div className="mt-9 max-w-4xl"><LocationSearch/></div></div></section><div className="mx-auto max-w-7xl space-y-10 px-4 py-10 sm:px-6"><section><div className="mb-5 flex items-end justify-between"><div><p className="eyebrow">Risk overview</p><h2 className="mt-1 text-2xl font-bold">Current information</h2></div><button onClick={refresh} className="text-sm text-cyan-300 hover:text-cyan-100">Refresh data</button></div><div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"><StatusCard state={state} data={data} retry={refresh}/><article className="card"><CloudRain className="text-cyan-300"/><h3 className="mt-4 font-semibold">Rainfall</h3><p className="mt-2 text-sm text-slate-400">Data unavailable. The connected backend does not provide current rainfall observations.</p></article><article className="card"><Map className="text-cyan-300"/><h3 className="mt-4 font-semibold">Flood-prone zones</h3><p className="mt-2 text-sm text-slate-400">Data unavailable. No GIS zone layer is exposed by the backend.</p></article><article className="card"><Bell className="text-cyan-300"/><h3 className="mt-4 font-semibold">Active alerts</h3><p className="mt-2 text-sm text-slate-400">No live alerts are currently available from the connected backend.</p></article></div></section><section className="grid gap-5 lg:grid-cols-3"><div className="card p-3 lg:col-span-2"><FloodMap label="FloodIntel study area"/></div><div className="card"><p className="eyebrow">Map layers</p><h2 className="mt-2 text-xl font-bold">Interactive map</h2><p className="mt-3 text-sm leading-6 text-slate-400">Pan and zoom the OpenStreetMap base map. Flood, river, waterbody, and event overlays will only appear after the backend exposes verified GIS data.</p><Link href="/map" className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-cyan-300">Open full map <ArrowRight size={16}/></Link></div></section><section className="grid gap-4 md:grid-cols-2"><article className="card"><ShieldAlert className="text-amber-300"/><h2 className="mt-4 text-xl font-bold">Future flood risk / forecast</h2><p className="mt-2 text-sm text-slate-400">Future forecast data is currently unavailable. Current detection is not presented as a forecast.</p><Link className="mt-4 inline-block text-sm text-cyan-300" href="/risk">View risk details</Link></article><article className="card"><p className="eyebrow">Recent flood information</p><h2 className="mt-2 text-xl font-bold">Historical events</h2><p className="mt-2 text-sm text-slate-400">No historical flood-event data is currently available from the connected backend.</p><Link className="mt-4 inline-block text-sm text-cyan-300" href="/history">View history</Link></article></section></div></AppShell>}
diff --git a/frontend/app/report/page.tsx b/frontend/app/report/page.tsx
index e69de29..a5c6af7 100644
--- a/frontend/app/report/page.tsx
+++ b/frontend/app/report/page.tsx
@@ -0,0 +1,4 @@
+"use client";
+import AppShell from "@/components/AppShell"; import { Camera, Crosshair, Trash2 } from "lucide-react"; import { FormEvent, useEffect, useState } from "react";
+type Status="idle"|"submitting"|"success"|"failed"|"queued"; type Report={description:string;severity:string;location:string;createdAt:string};
+export default function ReportPage(){const [description,setDescription]=useState(""),[severity,setSeverity]=useState(""),[location,setLocation]=useState(""),[photo,setPhoto]=useState<string>(),[status,setStatus]=useState<Status>("idle"),[notice,setNotice]=useState(""); useEffect(()=>{const sync=()=>setNotice("Connection restored. Locally saved reports remain queued because backend submission is currently unavailable.");addEventListener("online",sync);return()=>removeEventListener("online",sync)},[]);const locate=()=>navigator.geolocation?.getCurrentPosition(p=>setLocation(`${p.coords.latitude.toFixed(5)}, ${p.coords.longitude.toFixed(5)}`),()=>setNotice("Location permission was not granted. Enter a location manually."));const submit=(e:FormEvent)=>{e.preventDefault();if(!description||!severity){setStatus("failed");setNotice("Add a description and severity before saving your report.");return}const report={description,severity,location,createdAt:new Date().toISOString()};const existing=JSON.parse(localStorage.getItem("floodintel-report-queue")||"[]") as Report[];localStorage.setItem("floodintel-report-queue",JSON.stringify([...existing,report]));setStatus(navigator.onLine?"success":"queued");setNotice(navigator.onLine?"Report saved locally. Backend submission is currently unavailable.":"You are offline. Your report has been queued locally and will be reviewed for submission when a report API is available.")};return <AppShell><div className="mx-auto max-w-3xl px-4 py-10 sm:px-6"><p className="eyebrow">Citizen report</p><h1 className="mt-2 text-3xl font-bold">Report flooding</h1><p className="mt-2 text-slate-400">Share what you see. Image analysis is not claimed because no connected backend endpoint provides it.</p><form onSubmit={submit} className="card mt-7 space-y-5"><div><label htmlFor="photo" className="mb-2 block text-sm font-semibold">Flood photo <span className="font-normal text-slate-400">(optional)</span></label>{photo?<div className="relative"><img src={photo} alt="Selected flood report" className="max-h-64 rounded-xl object-cover"/><button type="button" onClick={()=>setPhoto(undefined)} className="absolute right-2 top-2 rounded-lg bg-slate-950/80 p-2" aria-label="Remove photo"><Trash2 size={17}/></button></div>:<label className="flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-dashed border-white/20 p-8 text-sm text-slate-300 hover:bg-white/5"><Camera size={20}/>Select or take a photo<input id="photo" type="file" accept="image/*" capture="environment" className="sr-only" onChange={e=>{const f=e.target.files?.[0];if(f)setPhoto(URL.createObjectURL(f))}}/></label>}</div><div><label htmlFor="location" className="mb-2 block text-sm font-semibold">Location</label><div className="flex gap-2"><input id="location" value={location} onChange={e=>setLocation(e.target.value)} className="min-w-0 flex-1 rounded-xl border border-white/10 bg-slate-950 px-3 py-3 text-sm" placeholder="Address, area, or coordinates"/><button type="button" onClick={locate} className="rounded-xl border border-white/10 px-3 hover:bg-white/10" aria-label="Use GPS location"><Crosshair size={18}/></button></div></div><div><label htmlFor="severity" className="mb-2 block text-sm font-semibold">Observed severity</label><select id="severity" required value={severity} onChange={e=>setSeverity(e.target.value)} className="w-full rounded-xl border border-white/10 bg-slate-950 px-3 py-3 text-sm"><option value="">Select severity</option><option>Low</option><option>Moderate</option><option>High</option><option>Severe</option></select></div><div><label htmlFor="description" className="mb-2 block text-sm font-semibold">Description</label><textarea id="description" required value={description} onChange={e=>setDescription(e.target.value)} className="min-h-28 w-full rounded-xl border border-white/10 bg-slate-950 p-3 text-sm" placeholder="Describe the flooding, road conditions, and immediate hazards."/></div><button disabled={status==="submitting"} className="rounded-xl bg-cyan-400 px-5 py-3 font-bold text-slate-950 hover:bg-cyan-300 disabled:opacity-50">{status==="submitting"?"Submitting…":"Save report"}</button>{notice&&<p role="status" className={`${status==="failed"?"text-red-200":"text-cyan-200"} text-sm`}>{notice}</p>}</form></div></AppShell>}
diff --git a/frontend/app/risk/page.tsx b/frontend/app/risk/page.tsx
new file mode 100644
index 0000000..868b380
--- /dev/null
+++ b/frontend/app/risk/page.tsx
@@ -0,0 +1,3 @@
+"use client";
+import AppShell from "@/components/AppShell"; import StatusCard from "@/components/StatusCard"; import { useFloodData } from "@/lib/useFloodData";
+export default function RiskPage(){const {state,data,refresh}=useFloodData();const validation=data?.data.validation;return <AppShell><div className="mx-auto max-w-6xl px-4 py-10 sm:px-6"><p className="eyebrow">Risk & forecast</p><h1 className="mt-2 text-3xl font-bold">Flood risk information</h1><p className="mt-2 max-w-3xl text-slate-400">Current detection and future forecast are kept separate. The connected model reports study-area detection only.</p><div className="mt-7 grid gap-5 md:grid-cols-2"><StatusCard state={state} data={data} retry={refresh}/><section className="card"><p className="eyebrow">Future forecast</p><h2 className="mt-2 text-xl font-bold">Future flood risk</h2><p className="mt-3 text-sm text-slate-400">Future forecast data is currently unavailable. No verified future forecast endpoint is connected.</p></section><section className="card"><p className="eyebrow">Why is this risk level?</p><h2 className="mt-2 text-xl font-bold">Contributing factors</h2><ul className="mt-4 space-y-3 text-sm"><li><strong>Satellite / model observation</strong><span className="float-right text-slate-400">Available through current detection</span></li><li><strong>Rainfall</strong><span className="float-right text-slate-400">Data unavailable</span></li><li><strong>Terrain and water proximity</strong><span className="float-right text-slate-400">Data unavailable</span></li><li><strong>Historical flood information</strong><span className="float-right text-slate-400">Data unavailable</span></li></ul></section><section className="card"><p className="eyebrow">Validation & source</p><h2 className="mt-2 text-xl font-bold">Study-area output</h2><dl className="mt-4 grid grid-cols-2 gap-4 text-sm"><div><dt>Source</dt><dd>FloodIntel backend</dd></div><div><dt>Timestamp</dt><dd>Data unavailable</dd></div><div><dt>IoU</dt><dd>{validation?.iou ?? "Data unavailable"}</dd></div><div><dt>Dice</dt><dd>{validation?.dice ?? "Data unavailable"}</dd></div></dl></section></div></div></AppShell>}
diff --git a/frontend/components/AIChat.tsx b/frontend/components/AIChat.tsx
index e69de29..4ba0891 100644
--- a/frontend/components/AIChat.tsx
+++ b/frontend/components/AIChat.tsx
@@ -0,0 +1,4 @@
+"use client";
+import { askFloodIntel } from "@/lib/api"; import { Send, Trash2 } from "lucide-react"; import { FormEvent, useEffect, useState } from "react";
+type Message={role:"user"|"assistant";content:string;error?:boolean};
+export default function AIChat(){const [items,setItems]=useState<Message[]>([]),[text,setText]=useState(""),[busy,setBusy]=useState(false),[language,setLanguage]=useState("en");useEffect(()=>{const update=()=>setLanguage(localStorage.getItem("floodintel-language")||"en");addEventListener("floodintel-language",update);return()=>removeEventListener("floodintel-language",update)},[]);const send=async(e?:FormEvent,retry?:string)=>{e?.preventDefault();const query=retry||text.trim();if(!query||busy)return;if(!retry){setItems(v=>[...v,{role:"user",content:query}]);setText("")}setBusy(true);try{const r=await askFloodIntel(query,language);const answer=r.response||r.answer||r.message||"The assistant did not return a response.";setItems(v=>[...v,{role:"assistant",content:answer,error:r.status==="unavailable"}])}catch{setItems(v=>[...v,{role:"assistant",content:"Unable to reach the AI assistant. Please try again.",error:true}])}finally{setBusy(false)}};return <section className="card"><div className="flex items-center justify-between"><div><p className="eyebrow">AI assistant</p><h1 className="mt-1 text-2xl font-bold">Flood safety guidance</h1></div><button onClick={()=>setItems([])} aria-label="Clear conversation" className="rounded-lg p-2 text-slate-400 hover:bg-white/10 hover:text-white"><Trash2 size={18}/></button></div><div aria-live="polite" className="my-5 min-h-72 space-y-3 rounded-xl bg-slate-950/50 p-4">{items.length===0&&<p className="text-sm text-slate-400">Ask about flood preparedness, risk concepts, or safety steps. The assistant should not be treated as a source of live local conditions.</p>}{items.map((m,i)=><div key={i} className={`max-w-[90%] rounded-xl p-3 text-sm ${m.role==="user"?"ml-auto bg-cyan-400 text-slate-950":"bg-white/10 text-slate-100"}`}>{m.content}{m.error&&m.content.includes("Unable")&&<button onClick={()=>void send(undefined,items[i-1]?.content)} className="mt-2 block font-semibold underline">Retry</button>}</div>)}{busy&&<p className="text-sm text-cyan-200">Assistant is responding…</p>}</div><form onSubmit={send} className="flex gap-2"><label className="sr-only" htmlFor="message">Message</label><input id="message" value={text} onChange={e=>setText(e.target.value)} className="min-w-0 flex-1 rounded-xl border border-white/10 bg-slate-950 px-3 py-3 text-sm outline-none focus:border-cyan-300" placeholder="Ask a flood safety question…"/><button disabled={busy} className="rounded-xl bg-cyan-400 px-4 text-slate-950 disabled:opacity-50"><Send size={18}/><span className="sr-only">Send</span></button></form></section>}
diff --git a/frontend/components/AppShell.tsx b/frontend/components/AppShell.tsx
new file mode 100644
index 0000000..d2e656d
--- /dev/null
+++ b/frontend/components/AppShell.tsx
@@ -0,0 +1,4 @@
+"use client";
+import Link from "next/link"; import { usePathname } from "next/navigation"; import { Menu, X, Waves } from "lucide-react"; import { useState } from "react"; import LanguageSelector from "./LanguageSelector"; import OfflineBanner from "./OfflineBanner";
+const nav = [["Home","/"],["Live Map","/map"],["Risk & Forecast","/risk"],["Alerts","/alerts"],["History","/history"],["Report Flood","/report"],["Emergency","/emergency"],["AI Assistant","/assistant"]] as const;
+export default function AppShell({children}:{children:React.ReactNode}) { const path=usePathname(); const [open,setOpen]=useState(false); return <><OfflineBanner/><header className="sticky top-0 z-[1000] border-b border-white/10 bg-[#061423]/95 backdrop-blur"><div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6"><Link href="/" className="flex items-center gap-2 font-bold text-white"><span className="grid h-9 w-9 place-items-center rounded-lg bg-cyan-400 text-[#061423]"><Waves size={21}/></span><span>FloodIntel<span className="hidden text-xs font-normal text-slate-400 sm:inline"> · Flood Intelligence</span></span></Link><nav className="hidden items-center gap-4 xl:flex">{nav.map(([label,href])=><Link key={href} href={href} className={`text-sm ${path===href?"text-cyan-300":"text-slate-300 hover:text-white"}`}>{label}</Link>)}</nav><div className="flex items-center gap-2"><LanguageSelector/><button type="button" onClick={()=>setOpen(!open)} aria-expanded={open} aria-label="Toggle navigation" className="rounded-lg p-2 text-slate-100 hover:bg-white/10 xl:hidden">{open?<X/>:<Menu/>}</button></div></div>{open&&<nav className="border-t border-white/10 px-4 py-3 xl:hidden">{nav.map(([label,href])=><Link onClick={()=>setOpen(false)} key={href} href={href} className={`block rounded-lg px-3 py-2.5 text-sm ${path===href?"bg-cyan-400/10 text-cyan-300":"text-slate-200 hover:bg-white/5"}`}>{label}</Link>)}</nav>}</header><main>{children}</main><footer className="border-t border-white/10 bg-[#061423] py-8 text-center text-xs text-slate-500">FloodIntel · Data shown only when returned by the connected backend.</footer></> }
diff --git a/frontend/components/FloodMap.tsx b/frontend/components/FloodMap.tsx
index e69de29..6f67f72 100644
--- a/frontend/components/FloodMap.tsx
+++ b/frontend/components/FloodMap.tsx
@@ -0,0 +1,5 @@
+"use client";
+import "leaflet/dist/leaflet.css"; import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet"; import { useEffect } from "react"; import L from "leaflet";
+const icon=L.divIcon({className:"",html:'<div style="width:18px;height:18px;background:#22d3ee;border:3px solid #082f49;border-radius:50%;box-shadow:0 0 0 4px rgba(34,211,238,.25)"></div>',iconAnchor:[9,9]});
+function Recenter({position}:{position:[number,number]}){const map=useMap();useEffect(()=>{map.setView(position,11)},[map,position]);return null}
+export default function FloodMap({position=[20.5937,78.9629],label="Selected location"}:{position?:[number,number];label?:string}){return <div className="h-[420px] overflow-hidden rounded-xl"><MapContainer center={position} zoom={5} scrollWheelZoom className="h-full w-full" aria-label="Interactive OpenStreetMap"><TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/><Recenter position={position}/><Marker position={position} icon={icon}><Popup>{label}</Popup></Marker></MapContainer></div>}
diff --git a/frontend/components/LanguageSelector.tsx b/frontend/components/LanguageSelector.tsx
index e69de29..e01db47 100644
--- a/frontend/components/LanguageSelector.tsx
+++ b/frontend/components/LanguageSelector.tsx
@@ -0,0 +1,3 @@
+"use client";
+import { Globe2 } from "lucide-react"; import { languages } from "@/lib/languages"; import { useState } from "react";
+export default function LanguageSelector(){const [value,setValue]=useState("en");return <label className="flex items-center gap-1 rounded-lg border border-white/10 px-2 py-1.5 text-sm text-slate-200"><Globe2 size={15}/><span className="sr-only">Interface language</span><select aria-label="Interface language" value={value} onChange={e=>{setValue(e.target.value);localStorage.setItem("floodintel-language",e.target.value);window.dispatchEvent(new Event("floodintel-language"));}} className="max-w-24 bg-transparent outline-none">{languages.map(l=><option className="bg-[#061423]" value={l.code} key={l.code}>{l.nativeName}</option>)}</select></label>}
diff --git a/frontend/components/LocationSearch.tsx b/frontend/components/LocationSearch.tsx
new file mode 100644
index 0000000..c9cfb0c
--- /dev/null
+++ b/frontend/components/LocationSearch.tsx
@@ -0,0 +1,3 @@
+"use client";
+import { Crosshair, Search } from "lucide-react"; import { useRouter } from "next/navigation"; import { useState } from "react";
+export default function LocationSearch(){const [value,setValue]=useState("");const [message,setMessage]=useState("");const router=useRouter(); const locate=()=>{if(!navigator.geolocation){setMessage("Location services are unavailable in this browser.");return}setMessage("Requesting your location…");navigator.geolocation.getCurrentPosition(p=>router.push(`/map?lat=${p.coords.latitude}&lng=${p.coords.longitude}`),()=>setMessage("Location permission was not granted. Search for a place instead."),{enableHighAccuracy:true,timeout:10000})};return <div><form onSubmit={e=>{e.preventDefault();if(value.trim())router.push(`/map?q=${encodeURIComponent(value.trim())}`)}} className="flex flex-col gap-2 rounded-2xl border border-white/15 bg-slate-950/60 p-2 shadow-xl sm:flex-row"><label className="flex min-w-0 flex-1 items-center gap-3 px-3"><Search className="shrink-0 text-cyan-300" size={20}/><span className="sr-only">Search city, district, or ward</span><input value={value} onChange={e=>setValue(e.target.value)} placeholder="Search city, district, or ward" className="w-full bg-transparent py-3 text-white outline-none placeholder:text-slate-400"/></label><button className="rounded-xl bg-cyan-400 px-5 py-3 font-semibold text-slate-950 hover:bg-cyan-300">View map</button><button type="button" onClick={locate} className="flex items-center justify-center gap-2 rounded-xl border border-white/15 px-4 py-3 text-sm font-semibold text-white hover:bg-white/10"><Crosshair size={17}/>My location</button></form>{message&&<p role="status" className="mt-2 text-sm text-amber-200">{message}</p>}</div>}
diff --git a/frontend/components/OfflineBanner.tsx b/frontend/components/OfflineBanner.tsx
index e69de29..3436845 100644
--- a/frontend/components/OfflineBanner.tsx
+++ b/frontend/components/OfflineBanner.tsx
@@ -0,0 +1,3 @@
+"use client";
+import { WifiOff } from "lucide-react"; import { useEffect, useState } from "react";
+export default function OfflineBanner(){const [online,setOnline]=useState(true);useEffect(()=>{const online=()=>setOnline(true),offline=()=>setOnline(false);addEventListener("online",online);addEventListener("offline",offline);return()=>{removeEventListener("online",online);removeEventListener("offline",offline)}},[]);return online?null:<div role="status" className="sticky top-0 z-[1100] flex items-center justify-center gap-2 bg-amber-400 px-4 py-2 text-sm font-semibold text-slate-950"><WifiOff size={16}/>You are offline. Previously loaded information and locally queued reports remain available.</div>}
diff --git a/frontend/components/StatusCard.tsx b/frontend/components/StatusCard.tsx
new file mode 100644
index 0000000..7172d27
--- /dev/null
+++ b/frontend/components/StatusCard.tsx
@@ -0,0 +1,3 @@
+import { AlertTriangle, RefreshCw } from "lucide-react"; import type { DataState } from "@/lib/useFloodData"; import type { FloodStatusResponse } from "@/lib/types";
+const tone=(risk?:string)=>risk?.toLowerCase().includes("high")?"text-red-300 border-red-400/30 bg-red-400/10":risk?.toLowerCase().includes("moderate")?"text-amber-200 border-amber-400/30 bg-amber-400/10":"text-cyan-200 border-cyan-400/30 bg-cyan-400/10";
+export default function StatusCard({state,data,retry}:{state:DataState;data?:FloodStatusResponse;retry?:()=>void}){const risk=data?.data.risk?.level||data?.data.risk?.risk_level; if(state==="loading")return <section className="card animate-pulse"><p className="eyebrow">Current detection</p><p className="mt-5 text-2xl text-slate-300">Loading…</p></section>;if(state==="error")return <section className="card"><AlertTriangle className="text-amber-300"/><h2 className="mt-3 font-semibold">Data unavailable</h2><p className="mt-1 text-sm text-slate-400">Unable to connect to the flood detection service.</p>{retry&&<button onClick={retry} className="mt-4 inline-flex items-center gap-2 text-sm text-cyan-300 hover:text-cyan-100"><RefreshCw size={15}/>Try again</button>}</section>;return <section className="card"><p className="eyebrow">Current flood detection</p><div className="mt-4 flex flex-wrap items-center gap-3"><strong className={`rounded-full border px-3 py-1 text-lg ${tone(risk)}`}>{risk||"Data unavailable"}</strong><span className="text-sm text-slate-400">Study-area model output</span></div><dl className="mt-5 grid grid-cols-2 gap-3 text-sm"><div><dt>Flooded area</dt><dd>{data?.data.area?.flooded_area_km2 !== undefined?`${data.data.area.flooded_area_km2} km²`:"Data unavailable"}</dd></div><div><dt>Flood coverage</dt><dd>{data?.data.prediction?.flood_percentage !== undefined?`${data.data.prediction.flood_percentage}%`:"Data unavailable"}</dd></div></dl></section>}
diff --git a/frontend/lib/api.ts b/frontend/lib/api.ts
index 23d2ce6..e20cfa5 100644
--- a/frontend/lib/api.ts
+++ b/frontend/lib/api.ts
@@ -1,60 +1,14 @@
-import type {
-  AssistantResponse,
-  FloodStatusResponse,
-} from "./types";
+import { AssistantResponse, FloodStatusResponse } from "./types";
 
-const API_BASE =
-  process.env.NEXT_PUBLIC_API_BASE_URL ||
-  "http://127.0.0.1:8000";
+const API_BASE = (process.env.NEXT_PUBLIC_API_URL || process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000").replace(/\/$/, "");
 
-async function apiRequest<T>(
-  endpoint: string,
-  options?: RequestInit,
-): Promise<T> {
-  const response = await fetch(`${API_BASE}${endpoint}`, {
-    ...options,
-    headers: {
-      Accept: "application/json",
-      ...(options?.headers || {}),
-    },
-    cache: "no-store",
-  });
-
-  if (!response.ok) {
-    throw new Error(
-      `API request failed: ${response.status} ${response.statusText}`,
-    );
-  }
-
-  return response.json();
+async function apiRequest<T>(endpoint: string): Promise<T> {
+  const response = await fetch(`${API_BASE}${endpoint}`, { headers: { Accept: "application/json" }, cache: "no-store" });
+  if (!response.ok) throw new Error(`API request failed: ${response.status}`);
+  return response.json() as Promise<T>;
 }
 
-export async function getFloodStatus(): Promise<FloodStatusResponse> {
-  return apiRequest<FloodStatusResponse>("/api/flood/status");
-}
-
-export async function getLegacyFloodStatus(): Promise<FloodStatusResponse> {
-  return apiRequest<FloodStatusResponse>("/flood/status");
-}
-
-export async function getFloodStatusSafe(): Promise<FloodStatusResponse> {
-  try {
-    return await getFloodStatus();
-  } catch {
-    return getLegacyFloodStatus();
-  }
-}
-
-export async function askFloodIntel(
-  message: string,
-  language = "en",
-): Promise<AssistantResponse> {
-  const params = new URLSearchParams({
-    message,
-    language,
-  });
-
-  return apiRequest<AssistantResponse>(
-    `/assistant?${params.toString()}`,
-  );
-}
\ No newline at end of file
+export const getFloodStatus = () => apiRequest<FloodStatusResponse>("/api/flood/status");
+export const getFloodAdvisory = () => apiRequest<{ status: string; advisory?: string; risk_level?: string }>("/flood/advisory");
+export const getFloodValidation = () => apiRequest<{ status: string; validation?: Record<string, unknown> }>("/flood/validation");
+export const askFloodIntel = (message: string, language = "en") => apiRequest<AssistantResponse>(`/assistant?${new URLSearchParams({ message, language })}`);
diff --git a/frontend/lib/types.ts b/frontend/lib/types.ts
index 66be726..36a3b7d 100644
--- a/frontend/lib/types.ts
+++ b/frontend/lib/types.ts
@@ -1,45 +1,11 @@
-export type RiskLevel =
-  | "LOW"
-  | "MODERATE"
-  | "HIGH"
-  | "VERY_HIGH"
-  | "SEVERE"
-  | "UNKNOWN";
-
-export interface FloodValidation {
-  iou?: number;
-  dice?: number;
-  f1?: number;
-  [key: string]: unknown;
-}
-
+export interface FloodValidation { iou?: number; dice?: number; f1?: number; [key: string]: unknown }
 export interface FloodStatusData {
-  risk_level?: string;
-  risk_title?: string;
-  severity?: string | number;
-  flood_percentage?: number;
-  flooded_area_km2?: number;
-  total_area_km2?: number;
-  message?: string;
-  actions?: string[];
-  study_area?: {
-    width?: number;
-    height?: number;
-    crs?: string;
-  };
+  dataset?: { width?: number; height?: number; crs?: string };
+  prediction?: { status?: string; label?: string; total_pixels?: number; flood_pixels?: number; flood_percentage?: number };
+  area?: { total_area_km2?: number; flooded_area_km2?: number; pixel_area_m2?: number };
+  risk?: { level?: string; risk_level?: string; [key: string]: unknown };
   validation?: FloodValidation;
   [key: string]: unknown;
 }
-
-export interface FloodStatusResponse {
-  status: string;
-  data: FloodStatusData;
-}
-
-export interface AssistantResponse {
-  answer?: string;
-  response?: string;
-  message?: string;
-  status?: string;
-  [key: string]: unknown;
-}
\ No newline at end of file
+export interface FloodStatusResponse { status: string; data: FloodStatusData }
+export interface AssistantResponse { answer?: string; response?: string; message?: string; status?: string; language?: string }
diff --git a/frontend/lib/useFloodData.ts b/frontend/lib/useFloodData.ts
new file mode 100644
index 0000000..58babfc
--- /dev/null
+++ b/frontend/lib/useFloodData.ts
@@ -0,0 +1,6 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { getFloodStatus } from "./api";
+import type { FloodStatusResponse } from "./types";
+export type DataState = "loading" | "success" | "error";
+export function useFloodData() { const [state, setState] = useState<DataState>("loading"); const [data, setData] = useState<FloodStatusResponse>(); const refresh = useCallback(async () => { setState("loading"); try { setData(await getFloodStatus()); setState("success"); } catch { setState("error"); } }, []); useEffect(() => { let active = true; getFloodStatus().then(value => { if (active) { setData(value); setState("success"); } }).catch(() => { if (active) setState("error"); }); return () => { active = false; }; }, []); return { state, data, refresh }; }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb681f8..ba8c609 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1868,9 +1868,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1887,9 +1884,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1906,9 +1900,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1925,9 +1916,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1944,9 +1932,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1963,9 +1948,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1982,9 +1964,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2001,9 +1980,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2020,9 +1996,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2045,9 +2018,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2070,9 +2040,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2095,9 +2062,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2120,9 +2084,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2145,9 +2106,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2170,9 +2128,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2195,9 +2150,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2470,9 +2422,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2489,9 +2438,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2508,9 +2454,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2527,9 +2470,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2906,9 +2846,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2926,9 +2863,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2946,9 +2880,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2966,9 +2897,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3564,9 +3492,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3581,9 +3506,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3598,9 +3520,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3615,9 +3534,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3632,9 +3548,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3649,9 +3562,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3666,9 +3576,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3683,9 +3590,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3700,9 +3604,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3717,9 +3618,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -7168,9 +7066,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7192,9 +7087,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7216,9 +7108,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7240,9 +7129,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [