# WRD Insight Dashboard (JalDrishti)

## Overview
React + TypeScript (Vite) dashboard for Maharashtra WRD concept demo. Key modules:
- Dashboard (KPIs/analytics)
- GIS Map (Leaflet)
- Repository (documents)
- AI Assistant (chat-style document assistant)

## Architecture
- Top-level layout: `src/components/Layout.tsx` with sidebar + header + routed page content via `react-router-dom` `Outlet`.
- Routes: `src/App.tsx` mounts `Chatbot` at `/ai-assistant`.

## Components
- `src/pages/Chatbot.tsx`
  - Desktop chat renders within the routed page content area.
  - Mobile chat uses a floating button and a `fixed inset-0` full-screen overlay.
- `src/pages/GisMap.tsx`
  - Leaflet-based GIS map with district boundaries and dam markers.
  - Loads cached GeoJSON from `public/data/maharashtra-districts.geojson`.
  - Live Data button toggles simulated rainfall/flood pulse animation overlay.

## Patterns
- **Nested flex scroll fix**: for chat UIs inside dashboards, ensure the scrollable region is in a `flex-1 min-h-0 overflow-y-auto` container, and parents also include `min-h-0` when needed. This prevents the input/footer from being pushed off-screen.
- **Route-specific page wrapper**: for `/ai-assistant` and `/map`, `Layout.tsx` uses `overflow-hidden` and removes outer padding so each page manages its internal scrolling and spacing.
- **GeoJSON caching for GIS**: District boundaries are cached locally to avoid Nominatim rate-limiting. Run `python scripts/cache_maharashtra_districts_geojson.py` to refresh. Script uses bbox fallback when Nominatim is unavailable.