Implement production FloodIntel frontend with real backend data

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>}

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>}

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>}

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>}

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>; }

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>}