Implement production FloodIntel frontend with real backend data

[jashwanth-cloud]

Summary

Rebuilds the FloodIntel frontend with all required routes, an honest data-driven UI backed by the existing FastAPI backend, and a real interactive Leaflet map, replacing the previous single-file mockup homepage with fabricated statistics.

Problem

The existing homepage (app/page.tsx) was a large, self-contained mockup with hardcoded risk levels, fake rainfall/alert numbers, a decorative "map" made of CSS shapes, and non-functional buttons. Other routes (/map, /alerts, /history, /report, /emergency) were empty placeholder files, and there were no real components for language selection, offline handling, AI chat, or map rendering. This did not meet the goal of a serious, data-honest flood intelligence platform.

Solution

Introduced a shared AppShell layout with real Next.js routing/navigation, and built out each required route (/, /map, /risk, /alerts, /history, /report, /emergency, /assistant) as focused, composable components that pull live data from a centralized API client, showing honest loading/error/unavailable states instead of fake values.

Key Changes

• Added AppShell with responsive nav, mobile menu, LanguageSelector, and OfflineBanner
• Added FloodMap component using React-Leaflet/OpenStreetMap with dynamic client-side loading to avoid hydration issues, used on Home and /map
• Added LocationSearch (GPS + text search routing to /map) and StatusCard for current flood detection status with loading/error/retry states
• Rebuilt app/page.tsx as a clean dashboard: hero, risk overview cards, map preview, forecast/history sections — all sourced from useFloodData hook with no hardcoded metrics
• Implemented /risk page separating "Current Detection" from "Future Forecast" (marked unavailable) plus risk-factor and validation sections
• Implemented /alerts, /history, /emergency pages with honest "unavailable"/static-guidance states instead of fabricated content
• Implemented /report page with photo upload, GPS location, severity/description form, localStorage queueing, and online/offline-aware submission messaging
• Added AIChat component wired to the existing /assistant endpoint with message history, retry, clear conversation, and language awareness
• Simplified lib/api.ts to use NEXT_PUBLIC_API_URL, added getFloodAdvisory/getFloodValidation, and updated lib/types.ts to match actual backend response shape (dataset, prediction, area, risk, validation)
• Added useFloodData hook for shared loading/success/error state and refresh handling
• Simplified globals.css and layout.tsx, removing unused Geist fonts/metadata and adding shared utility classes (.card, .eyebrow, focus-visible styles)

---

  

Tip

This PR wasn't reviewed by Quality Agent. Enable it in Project Settings to get AI-powered code review on every PR.

---

To clone this PR locally use the Github CLI with command gh pr checkout 1

You can tag me at @BuilderIO for anything you want me to fix or change