Spaces:

devarshia5
/

wrd_drishti

Sleeping

App Files Files Community

devarshia5 commited on Mar 5

Commit

523c564

verified ·

1 Parent(s): c974655

Upload 30 files

Browse files

Files changed (30) hide show

.env.example +9 -0
.gitignore +11 -0
Dockerfile +21 -0
index.html +13 -0
metadata.json +5 -0
openmemory.md +27 -0
package-lock.json +0 -0
package.json +43 -0
public/data/README.txt +6 -0
public/data/maharashtra-districts.geojson +0 -0
scripts/cache_maharashtra_districts_geojson.py +151 -0
src/App.tsx +31 -0
src/components/Layout.tsx +140 -0
src/components/ui/Badge.tsx +32 -0
src/components/ui/Button.tsx +37 -0
src/components/ui/Card.tsx +34 -0
src/components/ui/Input.tsx +23 -0
src/data/mockFAQs.ts +233 -0
src/data/mockGRs.ts +244 -0
src/index.css +1 -0
src/main.tsx +10 -0
src/pages/Chatbot.tsx +781 -0
src/pages/Dashboard.tsx +320 -0
src/pages/Faq.tsx +290 -0
src/pages/GisMap.tsx +969 -0
src/pages/GrFinder.tsx +355 -0
src/pages/Repository.tsx +192 -0
src/utils/cn.ts +6 -0
tsconfig.json +26 -0
vite.config.ts +29 -0

.env.example ADDED Viewed

	@@ -0,0 +1,9 @@

+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"

.gitignore ADDED Viewed

	@@ -0,0 +1,11 @@

+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example
+# OpenMemory - IDE/Assistant specific rules
+.windsurf\rules\openmemory.md

Dockerfile ADDED Viewed

	@@ -0,0 +1,21 @@

+FROM node:18-alpine
+WORKDIR /app
+# Copy package files
+COPY package*.json ./
+# Install dependencies
+RUN npm install --legacy-peer-deps
+# Copy all files
+COPY . .
+# Build the app
+RUN npm run build
+# Expose port 7860 (Hugging Face Spaces default)
+EXPOSE 7860
+# Start the preview server
+CMD ["npm", "run", "preview", "--", "--port", "7860", "--host", "0.0.0.0"]

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WRD JALDRISHTI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

metadata.json ADDED Viewed

	@@ -0,0 +1,5 @@

+{
+  "name": "WRD Insight Dashboard",
+  "description": "Centralized repository system for Government GRs, Acts, circulars, and flood prediction dashboard for the Water Resources Department.",
+  "requestFramePermissions": []
+}

openmemory.md ADDED Viewed

	@@ -0,0 +1,27 @@

+# 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.

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,43 @@

+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000 --host=0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^1.29.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@types/leaflet": "^1.9.21",
+    "@vitejs/plugin-react": "^5.0.4",
+    "better-sqlite3": "^12.4.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "dotenv": "^17.2.3",
+    "express": "^4.21.2",
+    "leaflet": "^1.9.4",
+    "lucide-react": "^0.546.0",
+    "motion": "^12.23.24",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0",
+    "react-router-dom": "^7.13.1",
+    "recharts": "^3.7.0",
+    "tailwind-merge": "^3.5.0",
+    "vite": "^6.2.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.21",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

public/data/README.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+Place cached GeoJSON/JSON files here to avoid hitting Nominatim/OSRM rate limits.
+Expected by GisMap.tsx:
+- public/data/maharashtra-districts.geojson  (FeatureCollection; each feature has properties.name matching district)
+If this file is missing/empty, district boundaries will not render, but the app will still run.

public/data/maharashtra-districts.geojson ADDED Viewed

The diff for this file is too large to render. See raw diff

scripts/cache_maharashtra_districts_geojson.py ADDED Viewed

	@@ -0,0 +1,151 @@

+import json
+import os
+import random
+import sys
+import time
+import urllib.error
+import urllib.parse
+import urllib.request
+DISTRICTS = [
+    "Kolhapur",
+    "Sangli",
+    "Satara",
+    "Pune",
+    "Ahmednagar",
+    "Nashik",
+    "Aurangabad",
+    "Thane",
+    "Raigad",
+    "Ratnagiri",
+]
+# Approximate bounding boxes for Maharashtra districts (lon_min, lat_min, lon_max, lat_max)
+# Used as fallback when Nominatim is rate-limited
+DISTRICT_BBOXES = {
+    "Kolhapur": (73.6, 16.0, 74.8, 17.2),
+    "Sangli": (73.8, 16.4, 75.0, 17.2),
+    "Satara": (73.3, 17.0, 74.5, 18.0),
+    "Pune": (73.2, 18.0, 74.5, 19.0),
+    "Ahmednagar": (74.0, 18.5, 75.5, 19.5),
+    "Nashik": (73.0, 19.5, 74.5, 20.5),
+    "Aurangabad": (74.5, 19.0, 76.0, 20.0),
+    "Thane": (72.8, 19.0, 73.6, 20.0),
+    "Raigad": (72.8, 18.0, 73.5, 18.8),
+    "Ratnagiri": (72.8, 16.5, 73.8, 17.5),
+}
+def _request_json(url: str, timeout: int = 10) -> object:
+    req = urllib.request.Request(
+        url,
+        headers={
+            "Accept": "application/json",
+            "User-Agent": "wrd-insight-dashboard/1.0 (cache script; contact: local-demo)",
+        },
+    )
+    with urllib.request.urlopen(req, timeout=timeout) as resp:
+        body = resp.read().decode("utf-8")
+        return json.loads(body)
+def fetch_district_geojson_from_nominatim(district: str) -> dict | None:
+    """Try to fetch district boundary from Nominatim. Returns None on any error."""
+    params = {
+        "county": district,
+        "state": "Maharashtra",
+        "country": "India",
+        "polygon_geojson": 1,
+        "format": "json",
+    }
+    url = "https://nominatim.openstreetmap.org/search?" + urllib.parse.urlencode(params)
+    try:
+        data = _request_json(url, timeout=10)
+    except Exception:
+        return None
+    if isinstance(data, list) and data and isinstance(data[0], dict) and data[0].get("geojson"):
+        geo = data[0]["geojson"]
+        return {
+            "type": "Feature",
+            "properties": {"name": district, "source": "nominatim"},
+            "geometry": geo,
+        }
+    return None
+def create_bbox_polygon(district: str) -> dict:
+    """Create a simple rectangular polygon from bounding box as fallback."""
+    bbox = DISTRICT_BBOXES.get(district)
+    if not bbox:
+        # Default to a placeholder in central Maharashtra
+        bbox = (73.5, 18.0, 75.0, 19.5)
+    lon_min, lat_min, lon_max, lat_max = bbox
+    # Create a simple rectangular polygon (5 points to close the ring)
+    coords = [
+        [lon_min, lat_min],
+        [lon_max, lat_min],
+        [lon_max, lat_max],
+        [lon_min, lat_max],
+        [lon_min, lat_min],  # Close the ring
+    ]
+    return {
+        "type": "Feature",
+        "properties": {"name": district, "source": "bbox_fallback"},
+        "geometry": {"type": "Polygon", "coordinates": [coords]},
+    }
+def main() -> int:
+    repo_root = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
+    out_path = os.path.join(repo_root, "public", "data", "maharashtra-districts.geojson")
+    os.makedirs(os.path.dirname(out_path), exist_ok=True)
+    features: list[dict] = []
+    nominatim_success = 0
+    fallback_used = 0
+    print("Fetching Maharashtra district boundaries...")
+    print("Strategy: Try Nominatim first (quick timeout), use bbox fallback if rate-limited.\n")
+    for district in DISTRICTS:
+        # Try Nominatim with just 1 attempt (quick)
+        feature = fetch_district_geojson_from_nominatim(district)
+        if feature:
+            features.append(feature)
+            nominatim_success += 1
+            print(f"  ✓ {district}: fetched from Nominatim")
+        else:
+            # Use bounding box fallback immediately
+            feature = create_bbox_polygon(district)
+            features.append(feature)
+            fallback_used += 1
+            print(f"  ○ {district}: using bbox fallback (Nominatim unavailable)")
+        # Minimal delay to be polite (Nominatim asks for 1 req/sec)
+        time.sleep(1.0)
+    # Write the FeatureCollection
+    fc = {"type": "FeatureCollection", "features": features}
+    with open(out_path, "w", encoding="utf-8") as f:
+        json.dump(fc, f, ensure_ascii=False, indent=2)
+    print(f"\n✓ Wrote {len(features)} district features to: {out_path}")
+    print(f"  - From Nominatim: {nominatim_success}")
+    print(f"  - Bbox fallback: {fallback_used}")
+    if fallback_used > 0:
+        print(
+            "\nNote: Some districts use approximate bounding boxes. "
+            "For precise boundaries, re-run when Nominatim is available "
+            "or download a proper Maharashtra district GeoJSON from a trusted source."
+        )
+    return 0
+if __name__ == "__main__":
+    raise SystemExit(main())

src/App.tsx ADDED Viewed

	@@ -0,0 +1,31 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Layout } from './components/Layout';
+import { Dashboard } from './pages/Dashboard';
+import { GisMap } from './pages/GisMap';
+import { Repository } from './pages/Repository';
+import { Chatbot } from './pages/Chatbot';
+import { GrFinder } from './pages/GrFinder';
+import { Faq } from './pages/Faq';
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Dashboard />} />
+          <Route path="map" element={<GisMap />} />
+          <Route path="gr-finder" element={<GrFinder />} />
+          <Route path="faq" element={<Faq />} />
+          <Route path="repository" element={<Repository />} />
+          <Route path="ai-assistant" element={<Chatbot />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}

src/components/Layout.tsx ADDED Viewed

	@@ -0,0 +1,140 @@

+import React from 'react';
+import { Outlet, NavLink, useLocation } from 'react-router-dom';
+import {
+  LayoutDashboard,
+  Map,
+  FileText,
+  MessageSquare,
+  Settings,
+  Bell,
+  Search,
+  Droplets,
+  HelpCircle,
+  FileSearch
+} from 'lucide-react';
+import { cn } from '@/src/utils/cn';
+import { Button } from './ui/Button';
+import { Input } from './ui/Input';
+export function Layout() {
+  const location = useLocation();
+  const isAIAssistant = location.pathname === '/ai-assistant';
+  const isGisMap = location.pathname === '/map';
+  const navItems = [
+    { name: 'Dashboard', path: '/', icon: LayoutDashboard },
+    { name: 'GIS Map', path: '/map', icon: Map },
+    { name: 'GR Finder', path: '/gr-finder', icon: FileSearch },
+    { name: 'GR Helper', path: '/ai-assistant', icon: MessageSquare },
+    { name: 'FAQ', path: '/faq', icon: HelpCircle },
+    { name: 'Repository', path: '/repository', icon: FileText },
+  ];
+  return (
+    <div className="flex h-screen w-full bg-slate-50 overflow-hidden">
+      {/* Desktop Sidebar */}
+      <aside className="hidden md:flex w-64 flex-col border-r border-slate-200 bg-white shrink-0">
+        <div className="flex h-16 items-center px-6 border-b border-slate-200">
+          <Droplets className="h-6 w-6 text-blue-600 mr-2" />
+          <span className="text-xl font-bold text-slate-900 tracking-tight">JalDrishti</span>
+        </div>
+        <nav className="flex-1 space-y-1 px-3 py-4 overflow-y-auto">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = location.pathname === item.path;
+            return (
+              <NavLink
+                key={item.name}
+                to={item.path}
+                className={cn(
+                  "flex items-center px-3 py-2.5 text-sm font-medium rounded-md transition-colors",
+                  isActive
+                    ? "bg-blue-50 text-blue-700"
+                    : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+                )}
+              >
+                <Icon className={cn("mr-3 h-5 w-5", isActive ? "text-blue-700" : "text-slate-400")} />
+                {item.name}
+              </NavLink>
+            );
+          })}
+        </nav>
+        <div className="p-4 border-t border-slate-200">
+          <div className="flex items-center">
+            <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold text-xs">
+              SD
+            </div>
+            <div className="ml-3">
+              <p className="text-sm font-medium text-slate-900">Swapnali Deshpande</p>
+              <p className="text-xs text-slate-500">WRD Main Incharge</p>
+            </div>
+          </div>
+        </div>
+      </aside>
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col min-w-0 overflow-hidden pb-16 md:pb-0">
+        {/* Header */}
+        <header className="flex h-14 md:h-16 items-center justify-between border-b border-slate-200 bg-white px-4 sm:px-6 lg:px-8 shrink-0">
+          <div className="flex items-center flex-1">
+            <div className="md:hidden flex items-center mr-4">
+              <Droplets className="h-6 w-6 text-blue-600 mr-2" />
+              <span className="text-lg font-bold text-slate-900 tracking-tight">JalDrishti</span>
+            </div>
+            <div className="w-full max-w-lg hidden sm:flex items-center relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
+              <Input
+                type="search"
+                placeholder="Search GRs, Acts, Circulars..."
+                className="w-full bg-slate-50 pl-9 border-none focus-visible:ring-1 focus-visible:ring-blue-500"
+              />
+            </div>
+          </div>
+          <div className="flex items-center space-x-2 md:space-x-4">
+            <Button variant="ghost" size="icon" className="relative text-slate-500 h-9 w-9">
+              <Bell className="h-5 w-5" />
+              <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span>
+            </Button>
+            <Button variant="ghost" size="icon" className="text-slate-500 h-9 w-9 hidden sm:flex">
+              <Settings className="h-5 w-5" />
+            </Button>
+            <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold text-xs md:hidden ml-2">
+              SD
+            </div>
+          </div>
+        </header>
+        {/* Page Content */}
+        <div
+          className={cn(
+            'flex-1 bg-slate-50/50',
+            (isAIAssistant || isGisMap) ? 'overflow-hidden p-0 sm:p-0 lg:p-0' : 'overflow-auto p-3 sm:p-6 lg:p-8'
+          )}
+        >
+          <Outlet />
+        </div>
+      </main>
+      {/* Mobile Bottom Navigation */}
+      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 flex justify-around items-center h-16 z-50 pb-safe">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = location.pathname === item.path;
+          return (
+            <NavLink
+              key={item.name}
+              to={item.path}
+              className={cn(
+                "flex flex-col items-center justify-center w-full h-full space-y-1 transition-colors",
+                isActive ? "text-blue-600" : "text-slate-500 hover:text-slate-900"
+              )}
+            >
+              <Icon className={cn("h-5 w-5", isActive ? "fill-blue-50/50" : "")} />
+              <span className="text-[10px] font-medium">{item.name}</span>
+            </NavLink>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}

src/components/ui/Badge.tsx ADDED Viewed

	@@ -0,0 +1,32 @@

+import * as React from "react"
+import { cn } from "@/src/utils/cn"
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "secondary" | "destructive" | "outline";
+  className?: string;
+  children?: React.ReactNode;
+}
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant = "default", ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2",
+          {
+            "border-transparent bg-blue-600 text-white shadow hover:bg-blue-700": variant === "default",
+            "border-transparent bg-slate-100 text-slate-900 hover:bg-slate-100/80": variant === "secondary",
+            "border-transparent bg-red-500 text-slate-50 shadow hover:bg-red-500/80": variant === "destructive",
+            "text-slate-950": variant === "outline",
+          },
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Badge.displayName = "Badge"
+export { Badge }

src/components/ui/Button.tsx ADDED Viewed

	@@ -0,0 +1,37 @@

+import * as React from "react"
+import { cn } from "@/src/utils/cn"
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+  size?: "default" | "sm" | "lg" | "icon"
+}
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50",
+          {
+            "bg-blue-600 text-white shadow hover:bg-blue-700": variant === "default",
+            "bg-red-500 text-slate-50 shadow-sm hover:bg-red-500/90": variant === "destructive",
+            "border border-slate-200 bg-white shadow-sm hover:bg-slate-100 hover:text-slate-900": variant === "outline",
+            "bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-100/80": variant === "secondary",
+            "hover:bg-slate-100 hover:text-slate-900": variant === "ghost",
+            "text-slate-900 underline-offset-4 hover:underline": variant === "link",
+            "h-9 px-4 py-2": size === "default",
+            "h-8 rounded-md px-3 text-xs": size === "sm",
+            "h-10 rounded-md px-8": size === "lg",
+            "h-9 w-9": size === "icon",
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+export { Button }

src/components/ui/Card.tsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import * as React from "react"
+import { cn } from "@/src/utils/cn"
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-xl border border-slate-200 bg-white text-slate-950 shadow-sm", className)} {...props} />
+))
+Card.displayName = "Card"
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+))
+CardHeader.displayName = "CardHeader"
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+))
+CardTitle.displayName = "CardTitle"
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-slate-500", className)} {...props} />
+))
+CardDescription.displayName = "CardDescription"
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+))
+CardFooter.displayName = "CardFooter"
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/Input.tsx ADDED Viewed

	@@ -0,0 +1,23 @@

+import * as React from "react"
+import { cn } from "@/src/utils/cn"
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-600 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+export { Input }

src/data/mockFAQs.ts ADDED Viewed

	@@ -0,0 +1,233 @@

+/**
+ * Mock FAQ data for WRD demo
+ */
+export interface FAQItem {
+  id: string;
+  question: string;
+  answer: string;
+  category: 'Flood Management' | 'Dam Operations' | 'Irrigation & Water Rights' | 'Compensation & Relief' | 'GRs & Acts';
+  relatedGRs?: string[];
+  keywords: string[];
+}
+export const faqCategories = [
+  { id: 'flood', name: 'Flood Management', icon: 'Waves' },
+  { id: 'dam', name: 'Dam Operations', icon: 'Database' },
+  { id: 'irrigation', name: 'Irrigation & Water Rights', icon: 'Droplets' },
+  { id: 'compensation', name: 'Compensation & Relief', icon: 'IndianRupee' },
+  { id: 'grs', name: 'GRs & Acts', icon: 'FileText' },
+] as const;
+export const faqData: FAQItem[] = [
+  // Flood Management
+  {
+    id: 'faq-flood-1',
+    question: 'What should I do when a flood warning is issued for my area?',
+    answer: 'When a flood warning is issued:\n\n1. **Immediate Actions:** Move to higher ground immediately if told to evacuate. Do not wait for instructions.\n\n2. **Essential Items:** Carry important documents (ID proof, property papers), medicines, and emergency supplies.\n\n3. **Avoid:** Do not walk through moving water (6 inches can make you fall). Do not drive through flooded roads.\n\n4. **Stay Informed:** Listen to local radio/TV for updates. Follow WRD official alerts.\n\n5. **After Flood:** Do not return home until authorities declare it safe. Watch for contaminated water and electrical hazards.\n\nRefer to GR-2023-WRD-156 for complete evacuation protocols.',
+    category: 'Flood Management',
+    relatedGRs: ['GR-2023-WRD-156', 'GR-2024-WRD-056'],
+    keywords: ['flood warning', 'evacuation', 'safety', 'emergency']
+  },
+  {
+    id: 'faq-flood-2',
+    question: 'How are flood warning levels classified?',
+    answer: 'Flood warning levels in Maharashtra are classified as:\n\n**Level 1 - Normal:** River flowing within normal limits. No action required.\n\n**Level 2 - Alert:** River rising but below danger level. Stay informed, prepare for evacuation.\n\n**Level 3 - Warning:** River at danger level. Evacuation may be ordered. Move valuables to higher floors.\n\n**Level 4 - Critical:** River above danger level. Mandatory evacuation. Emergency response activated.\n\nThese levels are monitored by WRD control rooms and communicated via SMS alerts, sirens, and local officials.',
+    category: 'Flood Management',
+    relatedGRs: ['GR-2023-WRD-156'],
+    keywords: ['warning levels', 'classification', 'danger level', 'alert']
+  },
+  {
+    id: 'faq-flood-3',
+    question: 'Who issues flood evacuation orders?',
+    answer: 'Flood evacuation orders are issued by:\n\n1. **District Collector:** Primary authority for evacuation orders in the district.\n\n2. **Tahsildar:** Issues orders at taluka level on Collector\'s direction.\n\n3. **WRD Chief Engineer:** Can recommend evacuation when dam discharge exceeds safe levels.\n\n4. **State Disaster Management Authority:** Issues orders for large-scale emergencies.\n\nThe order is communicated through:\n- SMS alerts to registered mobile numbers\n- Sirens and public announcements\n- Local police and revenue officials\n- Radio and TV broadcasts',
+    category: 'Flood Management',
+    relatedGRs: ['GR-2023-WRD-156'],
+    keywords: ['evacuation order', 'collector', 'authority', 'disaster management']
+  },
+  {
+    id: 'faq-flood-4',
+    question: 'What is the early warning system for floods in Konkan region?',
+    answer: 'The Konkan Flood Early Warning System includes:\n\n**Monitoring Network:**\n- 45 automated rainfall monitoring stations\n- 28 river level sensors\n- 12 tidal gauges along the coast\n\n**Alert Mechanism:**\n- SMS alerts sent 6-12 hours in advance\n- Color-coded warnings (Yellow/Orange/Red)\n- Community radio announcements\n\n**Communication:**\n- Village-level volunteers with megaphones\n- Temple/mosque loudspeakers\n- WhatsApp groups managed by Gram Panchayat\n\nThis system was implemented under GR-2024-WRD-056 and covers all 7 coastal districts.',
+    category: 'Flood Management',
+    relatedGRs: ['GR-2024-WRD-056'],
+    keywords: ['early warning', 'Konkan', 'SMS', 'monitoring', 'alert']
+  },
+  {
+    id: 'faq-flood-5',
+    question: 'How can I check current flood status in my district?',
+    answer: 'You can check flood status through:\n\n**Online:**\n- JalDrishti Dashboard (this portal) - Real-time dam levels and flood zones\n- wrd.maharashtra.gov.in - Official WRD portal\n- IMD website - Rainfall predictions\n\n**Mobile:**\n- Download "MahaFlood" app (Android/iOS)\n- SMS "FLOOD <District>" to 9223456789\n\n**Offline:**\n- Call District Control Room (available 24x7)\n- Contact local Tahsildar office\n- Listen to All India Radio regional broadcasts\n\nThe GIS Map on this portal shows live flood zones and affected areas.',
+    category: 'Flood Management',
+    keywords: ['flood status', 'check', 'online', 'mobile app', 'SMS']
+  },
+  // Dam Operations
+  {
+    id: 'faq-dam-1',
+    question: 'What happens when a dam reaches 90% capacity?',
+    answer: 'When a dam reaches 90% capacity:\n\n**Immediate Actions:**\n1. Control room staff increased to 24x7 monitoring\n2. Downstream districts notified (minimum 2 hours advance)\n3. Gate operation team placed on standby\n\n**Gate Operations:**\n- Gradual release begins at 10% gate opening\n- Incremental increase every 15 minutes\n- Maximum safe discharge calculated based on downstream capacity\n\n**Public Communication:**\n- Media briefing by Chief Engineer\n- SMS alerts to downstream villages\n- Siren activation in danger zones\n\n**Emergency Protocol:** If level exceeds 95%, Chief Engineer can authorize immediate release without waiting for full notification period.\n\nSee GR-2024-WRD-056 and GR-2023-WRD-124 for complete protocols.',
+    category: 'Dam Operations',
+    relatedGRs: ['GR-2024-WRD-056', 'GR-2023-WRD-124'],
+    keywords: ['dam capacity', '90%', 'gate operation', 'discharge', 'emergency']
+  },
+  {
+    id: 'faq-dam-2',
+    question: 'How often are dams inspected?',
+    answer: 'Dam inspection frequency as per GR-2022-WRD-112:\n\n**Daily Inspection (Monsoon Season - June to October):**\n- Visual inspection of dam structure\n- Water level and inflow measurement\n- Seepage monitoring\n- Gate mechanism check\n\n**Weekly Inspection (Non-Monsoon):**\n- Structural assessment\n- Instrumentation reading\n- Downstream condition check\n\n**Annual Comprehensive Inspection (Before Monsoon - May):**\n- Full structural integrity assessment\n- Seismic risk evaluation\n- Emergency action plan review\n- Gate testing under load\n\n**Special Inspections:**\n- After any seismic event >4.0 magnitude\n- After extreme flood event\n- When ordered by Dam Safety Review Committee\n\nAll inspections must be logged in the DAMS (Dam Asset Management System) within 24 hours.',
+    category: 'Dam Operations',
+    relatedGRs: ['GR-2022-WRD-112'],
+    keywords: ['inspection', 'frequency', 'monsoon', 'annual', 'seismic']
+  },
+  {
+    id: 'faq-dam-3',
+    question: 'What is the procedure for dam gate opening?',
+    answer: 'Dam gate opening procedure as per GR-2023-WRD-124:\n\n**Pre-Opening Checklist:**\n✓ Seismic sensors calibrated\n✓ Downstream flow sensors active\n✓ Alert systems tested\n✓ Control room staffed (minimum 2 engineers)\n✓ Emergency backup power available\n\n**Notification Timeline:**\n- T-2 hours: Alert downstream district collectors\n- T-1 hour: Public announcement via media\n- T-30 min: Siren activation\n\n**Opening Sequence:**\n1. Start with 10% gate opening\n2. Wait 15 minutes, observe downstream flow\n3. Increase by 10% increments\n4. Maximum 50% opening per hour\n\n**Emergency Override:**\nChief Engineer can authorize immediate release if dam level exceeds 95% or structural risk detected.\n\n**Documentation:** All operations logged in DAMS within 1 hour of completion.',
+    category: 'Dam Operations',
+    relatedGRs: ['GR-2023-WRD-124'],
+    keywords: ['gate opening', 'procedure', 'notification', 'SOP', 'discharge']
+  },
+  {
+    id: 'faq-dam-4',
+    question: 'Which dams in Maharashtra are classified as critical?',
+    answer: 'Currently, dams are classified as critical based on:\n\n**Critical Status Criteria:**\n- Storage level >90% AND\n- High inflow rate (>10,000 cusecs) OR\n- Downstream areas at flood risk\n\n**Currently Critical Dams (as of latest update):**\n1. **Koyna Dam, Satara** - 92.4% capacity, 45,000 cusecs inflow\n2. **Radhanagari Dam, Kolhapur** - 95% capacity, 25,000 cusecs inflow\n\n**Warning Status Dams:**\n1. Ujani Dam, Solapur - 85%\n2. Ghatghar Dam, Thane - 88%\n\n**Historically Critical Dams:**\n- Jayakwadi (Aurangabad) - Flood 2019\n- Tillari (Sindhudurg) - Flood 2021\n\nStatus changes are updated every 3 hours during monsoon. Check the GIS Map for real-time status.',
+    category: 'Dam Operations',
+    keywords: ['critical dams', 'Koyna', 'Radhanagari', 'status', 'monitoring']
+  },
+  {
+    id: 'faq-dam-5',
+    question: 'What safety measures are in place for dam failure prevention?',
+    answer: 'Dam safety measures include:\n\n**Structural Monitoring:**\n- Instrumentation: Piezometers, inclinometers, settlement gauges\n- Seismic sensors: Real-time earthquake detection\n- Drone surveys: Annual structural imaging\n\n**Operational Safety:**\n- Rule curve compliance: Mandatory storage limits by date\n- Regular gate testing: Monthly during non-monsoon\n- Emergency action plans: Updated annually\n\n**Regulatory Framework:**\n- Dam Safety Bill 2019 compliance\n- Annual safety audit (GR-2022-WRD-067)\n- Dam Safety Review Committee inspections\n\n**Emergency Preparedness:**\n- Downstream evacuation plans\n- Early warning systems\n- Mock drills every 2 years\n\n**Insurance:** All major dams covered under Dam Safety Insurance Scheme.',
+    category: 'Dam Operations',
+    relatedGRs: ['GR-2022-WRD-067', 'GR-2022-WRD-112'],
+    keywords: ['safety', 'failure', 'prevention', 'monitoring', 'insurance']
+  },
+  // Irrigation & Water Rights
+  {
+    id: 'faq-irrigation-1',
+    question: 'What is the water distribution priority in Maharashtra?',
+    answer: 'Water distribution priority as per Maharashtra Irrigation Act and GR-2024-WRD-042:\n\n**Priority Order:**\n1. **Drinking Water** - Highest priority for municipal supply\n2. **Agriculture/Irrigation** - Second priority for crop cultivation\n3. **Industrial Use** - Third priority for factories and processing\n4. **Recreation/Other** - Lowest priority\n\n**During Scarcity (Drought):**\n- Industrial supply reduced by 50%\n- Irrigation limited to protective irrigation (life-saving water)\n- Drinking water supply maintained at all costs\n\n**Real-time Adjustments:**\n- WRD can modify allocations based on storage levels\n- Water User Associations informed 48 hours in advance\n- Grievance redressal through digital portal\n\nViolations: Unauthorized diversion punishable with up to 3 years imprisonment.',
+    category: 'Irrigation & Water Rights',
+    relatedGRs: ['GR-2024-WRD-042'],
+    keywords: ['priority', 'drinking water', 'agriculture', 'industrial', 'scarcity']
+  },
+  {
+    id: 'faq-irrigation-2',
+    question: 'How do I form a Water User Association (WUA)?',
+    answer: 'Water User Association formation process as per GR-2023-WRD-078:\n\n**Eligibility:**\n- Minimum 50 farmer members\n- Command area of 100-500 hectares\n- All members must be landowners/tenants in the area\n\n**Formation Steps:**\n1. **Application:** Submit to Executive Engineer, Irrigation Division\n2. **Verification:** Revenue records checked (30 days)\n3. **Registration:** Society registration under Maharashtra Societies Act\n4. **Election:** Managing committee elected (7 members)\n5. **Recognition:** WRD issues recognition certificate\n\n**WUA Responsibilities:**\n- Water distribution within command area\n- Minor canal maintenance\n- Collection of water cess (5%)\n- Dispute resolution among members\n\n**Benefits:**\n- Direct water allocation from WRD\n- 10% discount on water cess\n- Priority in water allocation during scarcity\n\nApplication form available at wrd.maharashtra.gov.in/wua',
+    category: 'Irrigation & Water Rights',
+    relatedGRs: ['GR-2023-WRD-078'],
+    keywords: ['WUA', 'water user association', 'formation', 'farmer', 'registration']
+  },
+  {
+    id: 'faq-irrigation-3',
+    question: 'What are the rights of a Tahsildar regarding water disputes?',
+    answer: 'Tahsildar\'s water-related powers as per GR-2023-WRD-089:\n\n**Dispute Resolution:**\n- Resolve disputes between farmers for canal water\n- Mediate conflicts between WUAs\n- Order temporary water allocation during scarcity\n\n**Administrative Powers:**\n- Issue NOC for borewell/tubewell\n- Grant temporary water rights (up to 30 days)\n- Impose penalties for unauthorized water use (up to ₹10,000)\n\n**Emergency Powers:**\n- Order water tanker supply during drought\n- Requisition private wells for drinking water\n- Coordinate with WRD for emergency releases\n\n**Limitations:**\n- Cannot modify permanent water rights\n- Cannot override WRD allocation decisions\n- Appeals lie with Sub-Divisional Officer\n\nFor grievances, use: wrd.maharashtra.gov.in/grievance',
+    category: 'Irrigation & Water Rights',
+    relatedGRs: ['GR-2023-WRD-089'],
+    keywords: ['tahsildar', 'powers', 'dispute', 'water rights', 'grievance']
+  },
+  {
+    id: 'faq-irrigation-4',
+    question: 'How is water cess calculated and collected?',
+    answer: 'Water cess calculation and collection:\n\n**Cess Rates (per hectare per season):**\n- Kharif (Monsoon crop): ₹150\n- Rabi (Winter crop): ₹250\n- Perennial (Sugarcane, banana): ₹600\n\n**Collection Process:**\n1. Assessment by Irrigation Department based on cropped area\n2. Bill issued to farmer/WUA\n3. Payment at Talathi office or online via wrd.maharashtra.gov.in\n4. Receipt mandatory for next season\'s water supply\n\n**Concessions:**\n- 10% discount for WUA members\n- 50% concession for SC/ST farmers\n- Full waiver for crop failure due to natural calamity\n\n**Usage of Cess:**\n- 5% retained for local maintenance fund\n- 95% deposited to WRD consolidated fund\n\nDefaulters: Water supply disconnected; penalty of 25% on arrears.',
+    category: 'Irrigation & Water Rights',
+    keywords: ['water cess', 'calculation', 'collection', 'rates', 'payment']
+  },
+  {
+    id: 'faq-irrigation-5',
+    question: 'Can I use groundwater for irrigation without permission?',
+    answer: 'Groundwater extraction rules as per GR-2023-WRD-045:\n\n**Registration Required:**\n- All tubewells/borewells >60m depth\n- Extraction >100 cubic meters/day\n- Commercial/industrial use\n\n**NOC Requirements:**\n- NOC from Tahsildar for wells >60m\n- NOC from Groundwater Authority for >200m\n- Environmental clearance for >500m\n\n**Exemptions (No Permission Needed):**\n- Hand pumps (any depth)\n- Wells <60m for personal use\n- Extraction <50 cubic meters/day for domestic use\n\n**Penalties:**\n- Unauthorized extraction: ₹10,000 fine + well sealing\n- Over-extraction: ₹5,000 per 100 cubic meters\n- Repeated violation: Criminal prosecution\n\n**Apply Online:** groundwater.maharashtra.gov.in\n\nNote: Over-exploited blocks (marked red) have stricter controls.',
+    category: 'Irrigation & Water Rights',
+    relatedGRs: ['GR-2023-WRD-045'],
+    keywords: ['groundwater', 'permission', 'NOC', 'irrigation', 'penalty']
+  },
+  // Compensation & Relief
+  {
+    id: 'faq-compensation-1',
+    question: 'What compensation is available for flood damage?',
+    answer: 'Flood relief compensation under GR-2024-WRD-089:\n\n**Crop Loss:**\n- ₹5,000 per acre (maximum 10 acres)\n- Covers all crops including horticulture\n- Assessment by joint team (Revenue + Agriculture)\n\n**House Damage:**\n- Fully damaged: ₹95,000\n- Partially damaged: ₹50,000\n- Hut/temporary structure: ₹25,000\n\n**Livestock Loss:**\n- Large animals (cow, buffalo): ₹30,000\n- Small animals (goat, sheep): ₹4,000\n- Maximum 5 animals per household\n\n**Eligibility:**\n- Residence in notified flood-affected area\n- Damage during notified period (July 1 - October 31, 2024)\n- Registered with local Tahsildar\n\n**Application Process:**\n1. Submit Form WRD-FLOOD-01 to Tahsildar\n2. Attach damage assessment report\n3. Processing time: 30 days\n4. Payment via direct bank transfer',
+    category: 'Compensation & Relief',
+    relatedGRs: ['GR-2024-WRD-089'],
+    keywords: ['compensation', 'flood', 'crop loss', 'house damage', 'livestock']
+  },
+  {
+    id: 'faq-compensation-2',
+    question: 'How do I apply for flood compensation?',
+    answer: 'Flood compensation application process:\n\n**Step 1: Report Damage (Within 7 Days)**\n- Inform Gram Panchayat/Talathi\n- Get damage report number\n\n**Step 2: Document Damage**\n- Take photos/videos of damage\n- Preserve damaged items for inspection\n- Get witness statements\n\n**Step 3: Submit Application**\n- Form: WRD-FLOOD-01 (available at Tahsil office)\n- Documents: Aadhaar, bank passbook, land records, damage photos\n- Submit to: Tahsildar office\n\n**Step 4: Inspection**\n- Joint team visits within 15 days\n- Assessment report prepared\n- You get inspection copy\n\n**Step 5: Approval & Payment**\n- Tahsildar approves within 7 days\n- Payment within 30 days\n- Direct bank transfer\n\n**Track Application:**\n- SMS "FLOOD <Application ID>" to 9223456789\n- Online: wrd.maharashtra.gov.in/relief\n\n**Appeal:** If rejected, appeal to SDO within 30 days.',
+    category: 'Compensation & Relief',
+    relatedGRs: ['GR-2024-WRD-089'],
+    keywords: ['apply', 'compensation', 'process', 'documents', 'tracking']
+  },
+  {
+    id: 'faq-compensation-3',
+    question: 'What drought relief is available for farmers?',
+    answer: 'Drought relief package (GR-2024-WRD-078 for Vidarbha, similar for other regions):\n\n**Drinking Water Supply:**\n- Free tanker water supply\n- Borewell drilling at government cost\n- Pipeline extension to uncovered villages\n\n**Agricultural Support:**\n- Crop loss compensation: ₹6,800/ha (same as flood)\n- Input subsidy: ₹2,000/ha for re-sowing\n- Seed distribution: Free drought-resistant seeds\n\n**Employment:**\n- MGNREGA works extended (150 days instead of 100)\n- Priority for water conservation works\n- Fodder camp employment\n\n**Livestock Support:**\n- Fodder camps (free fodder + water)\n- Cattle camps with veterinary care\n- Subsidized cattle feed\n\n**Financial:**\n- Crop loan waiver for affected farmers\n- Fresh crop loans at 0% interest\n- Electricity bill waiver for agricultural pumps\n\n**Application:** Through Gram Panchayat to District Collector.',
+    category: 'Compensation & Relief',
+    relatedGRs: ['GR-2024-WRD-078'],
+    keywords: ['drought', 'relief', 'farmer', 'employment', 'MGNREGA']
+  },
+  {
+    id: 'faq-compensation-4',
+    question: 'How long does it take to receive compensation?',
+    answer: 'Compensation processing timelines:\n\n**Standard Timeline (30 Days):**\n- Application submission to payment: 30 days\n- Breakdown:\n  - Inspection: 15 days\n  - Approval: 7 days\n  - Payment processing: 8 days\n\n**Fast-Track Cases (15 Days):**\n- Death compensation\n- Complete house collapse\n- Large-scale crop failure (>50% village)\n\n**Delayed Cases:**\n- Disputed land ownership: Additional 30 days\n- Multiple claimants: Additional 15 days\n- Bank account issues: Resolved within 7 days\n\n**Tracking:**\n- SMS updates at each stage\n- Online portal shows current status\n- Helpline: 1800-XXX-XXXX\n\n**Complaints:**\n- Delay beyond 30 days: Complain to SDO\n- No response in 7 days: Escalate to Collector\n- Grievance portal: wrd.maharashtra.gov.in/grievance\n\n**Interest:** If delayed beyond 45 days, 6% interest payable.',
+    category: 'Compensation & Relief',
+    keywords: ['timeline', 'processing', 'days', 'tracking', 'delay']
+  },
+  {
+    id: 'faq-compensation-5',
+    question: 'What documents are needed for compensation claim?',
+    answer: 'Required documents for compensation claim:\n\n**Identity & Address:**\n- Aadhaar card (mandatory)\n- Ration card\n- Voter ID (if Aadhaar not available)\n\n**Land Documents:**\n- 7/12 extract (Satbara)\n- 8A extract\n- Land ownership proof\n\n**Bank Details:**\n- Bank passbook copy (first page)\n- Account must be Aadhaar-linked\n- Cancelled cheque (optional)\n\n**Damage Evidence:**\n- Photos of damage (minimum 5)\n- Video if available\n- Witness statements (2 witnesses)\n\n**Additional for Specific Claims:**\n- Crop loss: Girdawari report\n- House damage: Structural assessment report\n- Livestock: Veterinary certificate, ear tag number\n\n**Self-Declaration:**\n- Affidavit stating damage details\n- Declaration of no previous claim\n- Signature verification\n\n**Submission:**\n- Originals for verification\n- Self-attested copies retained\n- Online upload option available',
+    category: 'Compensation & Relief',
+    keywords: ['documents', 'required', 'Aadhaar', 'bank', 'evidence']
+  },
+  // GRs & Acts
+  {
+    id: 'faq-grs-1',
+    question: 'What is the difference between a GR, Act, and Circular?',
+    answer: 'Government document types explained:\n\n**Government Resolution (GR):**\n- Executive order by government department\n- Implements policy decisions\n- Can be amended or superseded by later GR\n- Example: GR-2024-WRD-089 (Flood compensation)\n\n**Act (Law):**\n- Passed by State Legislature\n- Creates legal framework\n- Cannot be changed by GR (only amendment by legislature)\n- Example: Maharashtra Irrigation Act, 1976\n\n**Circular:**\n- Administrative instruction\n- Clarifies implementation of GR/Act\n- Internal departmental guidance\n- Example: Monsoon preparedness circular\n\n**Hierarchy:**\nAct > GR > Circular\n\n**Legal Force:**\n- Act: Full legal force, courts enforce\n- GR: Administrative binding, can be challenged\n- Circular: Internal guidance, not legally binding\n\n**Finding Documents:** Use the GR Finder on this portal to search all types.',
+    category: 'GRs & Acts',
+    keywords: ['GR', 'Act', 'Circular', 'difference', 'types']
+  },
+  {
+    id: 'faq-grs-2',
+    question: 'How do I find a specific Government Resolution?',
+    answer: 'Ways to find a Government Resolution:\n\n**On This Portal:**\n1. Go to "GR Finder" from menu\n2. Search by GR number (e.g., "GR-2024-WRD-089")\n3. Or search by keywords (e.g., "flood compensation")\n4. Filter by year, department, category\n\n**Official Sources:**\n- wrd.maharashtra.gov.in → Documents section\n- maharashtra.gov.in → GR search\n- Mantralaya library (in-person)\n\n**GR Number Format:**\nGR-YYYY-DEPT-NUMBER\nExample: GR-2024-WRD-089\n- 2024: Year\n- WRD: Water Resources Department\n- 089: Serial number\n\n**Tips:**\n- Recent GRs are digitized (2015 onwards)\n- Older GRs may need RTI request\n- Popular GRs shown in GR Finder homepage\n\n**Need Help?** Use "GR Helper" AI assistant to find related GRs.',
+    category: 'GRs & Acts',
+    keywords: ['find', 'search', 'GR number', 'portal', 'official']
+  },
+  {
+    id: 'faq-grs-3',
+    question: 'What are the key Acts governing water resources in Maharashtra?',
+    answer: 'Major water resource Acts in Maharashtra:\n\n**Maharashtra Irrigation Act, 1976**\n- Governs irrigation water distribution\n- Defines WRD powers and responsibilities\n- Establishes water rights framework\n- Key sections: 33 (water priority), 45 (maintenance)\n\n**MWRRA Act, 2005**\n- Created Maharashtra Water Resources Regulatory Authority\n- Water pricing and tariff determination\n- Inter-basin water transfer approval\n- Annual water audit requirement\n\n**Maharashtra Groundwater Act, 2013**\n- Groundwater extraction regulation\n- Registration of wells\n- Protection of drinking water sources\n\n**Dam Safety Act, 2021 (Central)**\n- Dam classification and inspection\n- Emergency action plans\n- Safety review committees\n\n**Related Acts:**\n- Maharashtra Water Supply & Sewerage Act, 1976\n- Maharashtra Farmers\' Participation Act, 2005\n\nAll available in Repository section of this portal.',
+    category: 'GRs & Acts',
+    keywords: ['Acts', 'Irrigation Act', 'MWRRA', 'Groundwater', 'Dam Safety']
+  },
+  {
+    id: 'faq-grs-4',
+    question: 'How can I get a copy of an old GR?',
+    answer: 'Methods to obtain old Government Resolutions:\n\n**Online (2015 onwards):**\n- wrd.maharashtra.gov.in → Documents\n- This portal\'s GR Finder\n- Download PDF directly\n\n**RTI Application (Pre-2015):**\n- Apply to WRD Public Information Officer\n- Fee: ₹10 per page\n- Timeline: 30 days\n- Format: RTI application with GR details\n\n**Mantralaya Library:**\n- Visit: Mantralaya, Mumbai\n- Working hours: 10 AM - 5 PM\n- Reference section has GR archives\n- Photocopy available (₹2/page)\n\n**District Collector Office:**\n- Regional GR archives\n- Available in Marathi and English\n- Prior appointment recommended\n\n**GR Helper AI:**\n- Ask "Find GR about [topic] from [year]"\n- AI will search and provide summary\n- Link to download if digitized\n\n**Note:** Some sensitive GRs may have restricted access.',
+    category: 'GRs & Acts',
+    keywords: ['old GR', 'copy', 'RTI', 'archive', 'download']
+  },
+  {
+    id: 'faq-grs-5',
+    question: 'How do I know if a GR is still active or superseded?',
+    answer: 'Checking GR status:\n\n**On This Portal:**\n- GR Finder shows status badge: Active/Amended/Superseded\n- Click GR to see full history\n- Related GRs section shows amendments\n\n**Status Types:**\n- **Active:** Currently in force, follow this\n- **Amended:** Modified by later GR, check both\n- **Superseded:** Replaced by new GR, follow new one\n\n**Official Verification:**\n- WRD website shows current status\n- Contact department for clarification\n- Legal cell can confirm validity\n\n**Common Reasons for Supersession:**\n- Policy change by new government\n- Court order striking down provisions\n- Expiry of time-bound GR\n- Amendment incorporating new provisions\n\n**Example:**\nGR-2022-WRD-089 (Crop compensation) was superseded by GR-2024-WRD-089 with revised rates.\n\n**Best Practice:** Always check the latest GR on the subject before taking action.',
+    category: 'GRs & Acts',
+    keywords: ['status', 'active', 'superseded', 'amended', 'validity']
+  },
+];
+// Helper functions
+export const getFAQsByCategory = (category: string) => faqData.filter(faq => faq.category === category);
+export const searchFAQs = (query: string) => {
+  const q = query.toLowerCase();
+  return faqData.filter(faq =>
+    faq.question.toLowerCase().includes(q) ||
+    faq.answer.toLowerCase().includes(q) ||
+    faq.keywords.some(k => k.includes(q))
+  );
+};

src/data/mockGRs.ts ADDED Viewed

	@@ -0,0 +1,244 @@

+/**
+ * Mock Government Resolutions (GRs) data for WRD demo
+ */
+export interface GRDocument {
+  id: string;
+  title: string;
+  department: string;
+  date: string;
+  year: number;
+  category: 'Flood Management' | 'Dam Safety' | 'Irrigation' | 'Compensation' | 'Water Policy' | 'Administrative';
+  status: 'Active' | 'Superseded' | 'Amended';
+  summary: string;
+  keywords: string[];
+  relatedGRs?: string[];
+  popularQuery?: boolean;
+}
+export const mockGRs: GRDocument[] = [
+  {
+    id: 'GR-2024-WRD-089',
+    title: 'Flood Relief Compensation Guidelines 2024',
+    department: 'Relief & Rehabilitation',
+    date: '2024-07-15',
+    year: 2024,
+    category: 'Compensation',
+    status: 'Active',
+    summary: 'Comprehensive guidelines for flood relief compensation including crop loss (₹5,000/acre), house damage (₹95,000 full), and livestock loss. Covers eligibility criteria, application process through Tahsildar, and direct bank transfer mechanism.',
+    keywords: ['compensation', 'flood relief', 'crop loss', 'house damage', 'tahsildar'],
+    popularQuery: true
+  },
+  {
+    id: 'GR-2024-WRD-056',
+    title: 'Emergency Dam Safety Protocol',
+    department: 'Dam Safety',
+    date: '2024-06-20',
+    year: 2024,
+    category: 'Dam Safety',
+    status: 'Active',
+    summary: 'Mandatory protocols for dam safety during monsoon including 2-hour advance notification for downstream districts, seismic monitoring requirements, and emergency discharge procedures.',
+    keywords: ['dam safety', 'emergency', 'discharge', 'monsoon', 'notification'],
+    relatedGRs: ['GR-2023-WRD-124'],
+    popularQuery: true
+  },
+  {
+    id: 'GR-2024-WRD-042',
+    title: 'Water Resource Allocation Policy',
+    department: 'Water Resources Planning',
+    date: '2024-04-20',
+    year: 2024,
+    category: 'Water Policy',
+    status: 'Active',
+    summary: 'Defines water allocation priority: Drinking water > Agriculture > Industrial use. Includes provisions for real-time allocation adjustments during scarcity periods.',
+    keywords: ['water allocation', 'priority', 'drinking water', 'agriculture', 'scarcity'],
+    popularQuery: true
+  },
+  {
+    id: 'GR-2023-WRD-124',
+    title: 'Dam Gate Operations Standard Operating Procedure',
+    department: 'Operations',
+    date: '2023-08-10',
+    year: 2023,
+    category: 'Dam Safety',
+    status: 'Active',
+    summary: 'Detailed SOP for dam gate operations including pre-opening checklist, gradual opening procedure (10% increments every 15 minutes), downstream notification requirements, and emergency override provisions.',
+    keywords: ['gate operation', 'SOP', 'dam gate', 'discharge', 'downstream'],
+    relatedGRs: ['GR-2024-WRD-056'],
+    popularQuery: true
+  },
+  {
+    id: 'GR-2023-WRD-098',
+    title: 'Canal Maintenance Guidelines',
+    department: 'Irrigation',
+    date: '2023-07-25',
+    year: 2023,
+    category: 'Irrigation',
+    status: 'Active',
+    summary: 'Guidelines for canal maintenance including responsibilities of WRD (major repairs >₹1 lakh) and Water User Associations (minor maintenance). Includes 5% water cess provision for maintenance fund.',
+    keywords: ['canal', 'maintenance', 'WUA', 'repair', 'water cess'],
+  },
+  {
+    id: 'GR-2022-WRD-089',
+    title: 'Crop Damage Compensation Policy',
+    department: 'Revenue & Forest',
+    date: '2022-09-22',
+    year: 2022,
+    category: 'Compensation',
+    status: 'Amended',
+    summary: 'Revised compensation rates and assessment methodology for agricultural losses caused by natural calamities. Superseded by GR-2024-WRD-089.',
+    keywords: ['crop damage', 'compensation', 'agriculture', 'natural calamity'],
+    relatedGRs: ['GR-2024-WRD-089']
+  },
+  {
+    id: 'GR-2024-WRD-023',
+    title: 'Monsoon Preparedness Circular',
+    department: 'Operations',
+    date: '2024-05-01',
+    year: 2024,
+    category: 'Flood Management',
+    status: 'Active',
+    summary: 'Pre-monsoon checklist for all dam control rooms including sensor calibration, alert system testing, control room staffing requirements (min 2 engineers), and coordination protocols.',
+    keywords: ['monsoon', 'preparedness', 'control room', 'sensor', 'alert'],
+  },
+  {
+    id: 'GR-2024-WRD-067',
+    title: 'Real-time Monitoring Guidelines',
+    department: 'IT & Operations',
+    date: '2024-04-10',
+    year: 2024,
+    category: 'Dam Safety',
+    status: 'Active',
+    summary: 'IoT sensor deployment guidelines for live dam monitoring including water level sensors, flow meters, seismic monitors, and data transmission protocols.',
+    keywords: ['IoT', 'monitoring', 'sensor', 'real-time', 'data'],
+  },
+  {
+    id: 'GR-2023-WRD-156',
+    title: 'Flood Evacuation Standard Operating Procedure',
+    department: 'Disaster Management',
+    date: '2023-06-15',
+    year: 2023,
+    category: 'Flood Management',
+    status: 'Active',
+    summary: 'Comprehensive evacuation protocols for flood-affected areas including warning levels, evacuation zones, relief camp setup, and inter-departmental coordination.',
+    keywords: ['evacuation', 'flood', 'relief camp', 'warning', 'coordination'],
+    popularQuery: true
+  },
+  {
+    id: 'GR-2023-WRD-078',
+    title: 'Water User Association Formation Guidelines',
+    department: 'Irrigation',
+    date: '2023-03-20',
+    year: 2023,
+    category: 'Irrigation',
+    status: 'Active',
+    summary: 'Guidelines for forming Water User Associations including membership criteria, election procedures, responsibilities, and water distribution management.',
+    keywords: ['WUA', 'water user association', 'formation', 'irrigation'],
+  },
+  {
+    id: 'GR-2022-WRD-112',
+    title: 'Dam Inspection Frequency Requirements',
+    department: 'Dam Safety',
+    date: '2022-12-05',
+    year: 2022,
+    category: 'Dam Safety',
+    status: 'Active',
+    summary: 'Mandatory inspection schedules for dams: Daily during monsoon, Weekly during normal period, Comprehensive annual inspection before monsoon.',
+    keywords: ['inspection', 'dam', 'frequency', 'monsoon', 'annual'],
+  },
+  {
+    id: 'GR-2024-WRD-034',
+    title: 'Inter-state River Water Sharing Agreement',
+    department: 'Water Resources',
+    date: '2024-03-15',
+    year: 2024,
+    category: 'Water Policy',
+    status: 'Active',
+    summary: 'Agreement with neighboring states on Krishna and Godavari river water sharing including allocation percentages, dispute resolution mechanism, and monitoring committee.',
+    keywords: ['inter-state', 'river', 'water sharing', 'Krishna', 'Godavari'],
+  },
+  {
+    id: 'GR-2023-WRD-045',
+    title: 'Groundwater Extraction Regulation',
+    department: 'Groundwater',
+    date: '2023-05-10',
+    year: 2023,
+    category: 'Water Policy',
+    status: 'Active',
+    summary: 'Regulations for groundwater extraction including registration requirements, permissible limits, NOC requirements, and penalty provisions for over-extraction.',
+    keywords: ['groundwater', 'extraction', 'regulation', 'NOC', 'penalty'],
+  },
+  {
+    id: 'GR-2024-WRD-101',
+    title: 'Digital Grievance Portal Launch',
+    department: 'Administration',
+    date: '2024-08-01',
+    year: 2024,
+    category: 'Administrative',
+    status: 'Active',
+    summary: 'Launch of digital grievance portal (wrd.maharashtra.gov.in/grievance) for water-related complaints including tracking system, response timelines (7-30 days), and escalation matrix.',
+    keywords: ['grievance', 'portal', 'digital', 'complaint', 'tracking'],
+  },
+  {
+    id: 'GR-2023-WRD-089',
+    title: 'Tahsildar Water Rights Powers',
+    department: 'Revenue',
+    date: '2023-04-15',
+    year: 2023,
+    category: 'Administrative',
+    status: 'Active',
+    summary: 'Defines powers of Tahsildar regarding water rights including dispute resolution, temporary water allocation during scarcity, and penalty imposition for unauthorized use.',
+    keywords: ['tahsildar', 'water rights', 'powers', 'dispute', 'scarcity'],
+  },
+  {
+    id: 'GR-2024-WRD-078',
+    title: 'Drought Relief Package for Vidarbha',
+    department: 'Relief & Rehabilitation',
+    date: '2024-05-20',
+    year: 2024,
+    category: 'Compensation',
+    status: 'Active',
+    summary: 'Special drought relief package for Vidarbha region including drinking water supply arrangements, fodder camps, crop loss compensation, and employment guarantee schemes.',
+    keywords: ['drought', 'Vidarbha', 'relief', 'drinking water', 'employment'],
+  },
+  {
+    id: 'GR-2022-WRD-067',
+    title: 'Dam Safety Audit Requirements',
+    department: 'Dam Safety',
+    date: '2022-10-15',
+    year: 2022,
+    category: 'Dam Safety',
+    status: 'Active',
+    summary: 'Mandatory annual safety audit requirements for all large dams including structural integrity assessment, seismic risk evaluation, and emergency action plan review.',
+    keywords: ['safety audit', 'dam', 'structural', 'seismic', 'emergency plan'],
+  },
+  {
+    id: 'GR-2024-WRD-056',
+    title: 'Konkan Region Flood Early Warning System',
+    department: 'Disaster Management',
+    date: '2024-06-01',
+    year: 2024,
+    category: 'Flood Management',
+    status: 'Active',
+    summary: 'Implementation of early warning system for Konkan region including rainfall monitoring, river level sensors, SMS alerts, and community communication network.',
+    keywords: ['early warning', 'Konkan', 'flood', 'SMS', 'monitoring'],
+  },
+];
+// Helper functions
+export const getPopularGRs = () => mockGRs.filter(gr => gr.popularQuery);
+export const getGRsByCategory = (category: string) => mockGRs.filter(gr => gr.category === category);
+export const getGRsByYear = (year: number) => mockGRs.filter(gr => gr.year === year);
+export const searchGRs = (query: string) => {
+  const q = query.toLowerCase();
+  return mockGRs.filter(gr =>
+    gr.title.toLowerCase().includes(q) ||
+    gr.id.toLowerCase().includes(q) ||
+    gr.keywords.some(k => k.includes(q)) ||
+    gr.summary.toLowerCase().includes(q)
+  );
+};
+export const grCategories = ['Flood Management', 'Dam Safety', 'Irrigation', 'Compensation', 'Water Policy', 'Administrative'] as const;
+export const grYears = [...new Set(mockGRs.map(gr => gr.year))].sort((a, b) => b - a);
+export const grDepartments = [...new Set(mockGRs.map(gr => gr.department))];

src/index.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ @import "tailwindcss";

src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

src/pages/Chatbot.tsx ADDED Viewed

	@@ -0,0 +1,781 @@

+import React, { useState, useEffect, useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Input } from '@/src/components/ui/Input';
+import { Button } from '@/src/components/ui/Button';
+import { Badge } from '@/src/components/ui/Badge';
+import {
+  Send, Bot, User, Sparkles, Loader2, X, MessageCircle,
+  ScrollText, BookOpen, Scale, FileText, AlertTriangle,
+  Droplets, MapPin, TrendingUp, Clock,
+  Shield, Waves, Database, Building2, FileSearch,
+  Search, ChevronRight, Star, ArrowRight, HelpCircle
+} from 'lucide-react';
+import { cn } from '@/src/utils/cn';
+import { getPopularGRs, mockGRs } from '@/src/data/mockGRs';
+type DocumentType = 'GR' | 'Act' | 'Circular' | 'Manual' | 'SOP' | 'Report';
+interface Document {
+  id: string;
+  title: string;
+  type: DocumentType;
+  date: string;
+  department: string;
+  relevance: number;
+  summary?: string;
+}
+interface Insight {
+  title: string;
+  value: string;
+  trend?: string;
+  trendUp?: boolean;
+  icon: React.ElementType;
+  color: string;
+}
+type Message = {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  sources?: Document[];
+  insights?: Insight[];
+  timestamp?: Date;
+};
+// Extended mock document database
+const mockDocuments: Document[] = [
+  { id: 'GR-2024-WRD-089', title: 'Flood Relief Compensation Guidelines 2024', type: 'GR', date: '2024-07-15', department: 'Relief & Rehabilitation', relevance: 95, summary: 'Compensation rates: ₹5,000/acre for crop loss, ₹95,000 for house damage' },
+  { id: 'GR-2024-WRD-056', title: 'Emergency Dam Safety Protocol', type: 'GR', date: '2024-06-20', department: 'Dam Safety', relevance: 92, summary: 'Mandatory 2-hour advance notification for downstream districts' },
+  { id: 'ACT-1976-012', title: 'Maharashtra Irrigation Act', type: 'Act', date: '1976-05-15', department: 'Legislative', relevance: 88, summary: 'Governs water distribution, irrigation rights, and canal maintenance' },
+  { id: 'CIRC-2024-WRD-023', title: 'Monsoon Preparedness Circular', type: 'Circular', date: '2024-05-01', department: 'Operations', relevance: 85, summary: 'Pre-monsoon checklist for all dam control rooms' },
+  { id: 'GR-2023-WRD-124', title: 'Dam Gate Operations SOP', type: 'SOP', date: '2023-08-10', department: 'Operations', relevance: 90, summary: 'Standard procedures for gate opening/closing with safety checks' },
+  { id: 'MANUAL-2024-001', title: 'Flood Management Field Manual', type: 'Manual', date: '2024-03-15', department: 'Training', relevance: 82, summary: 'Field guide for emergency response teams' },
+  { id: 'GR-2024-WRD-042', title: 'Water Resource Allocation Policy', type: 'GR', date: '2024-04-20', department: 'Planning', relevance: 78, summary: 'Priority: Drinking > Agriculture > Industrial use' },
+  { id: 'ACT-2005-WRD-003', title: 'MWRRA Act', type: 'Act', date: '2005-08-12', department: 'Legislative', relevance: 75, summary: 'Regulatory authority for water pricing and distribution' },
+  { id: 'CIRC-2024-WRD-015', title: 'Real-time Monitoring Guidelines', type: 'Circular', date: '2024-04-10', department: 'IT & Operations', relevance: 80, summary: 'IoT sensor deployment for live dam monitoring' },
+  { id: 'RPT-2024-001', title: 'Koyna Dam Safety Audit', type: 'Report', date: '2024-06-01', department: 'Dam Safety', relevance: 94, summary: 'Structural integrity: GOOD | Seismic risk: MODERATE' },
+];
+// GR Helper Quick Actions
+const grQuickActions = [
+  { text: 'Find latest flood relief GR', icon: Search, color: 'blue' },
+  { text: 'Explain GR-2024-WRD-089', icon: FileText, color: 'indigo' },
+  { text: 'Compare compensation GRs', icon: Scale, color: 'purple' },
+  { text: 'Dam safety protocols', icon: Shield, color: 'red' },
+];
+// Query suggestions with categories - Focused on rainfall regions and GR rules
+const queryCategories = [
+  {
+    title: 'Rainfall & Weather',
+    icon: Droplets,
+    color: 'blue',
+    queries: [
+      { text: 'Konkan region rainfall data', icon: Droplets },
+      { text: 'Vidarbha drought relief GR', icon: FileText },
+    ]
+  },
+  {
+    title: 'GR Rules & Acts',
+    icon: Scale,
+    color: 'purple',
+    queries: [
+      { text: 'Water distribution priority rules', icon: Shield },
+      { text: 'Canal maintenance responsibility', icon: ScrollText },
+    ]
+  },
+  {
+    title: 'Relief & Compensation',
+    icon: Waves,
+    color: 'red',
+    queries: [
+      { text: 'Flood affected area compensation', icon: FileText },
+      { text: 'Crop damage claim procedure', icon: BookOpen },
+    ]
+  },
+  {
+    title: 'Administrative',
+    icon: Building2,
+    color: 'emerald',
+    queries: [
+      { text: 'Tahsildar water rights powers', icon: Scale },
+      { text: 'WUA formation guidelines', icon: MapPin },
+    ]
+  },
+];
+// Generate insights based on query
+const generateInsights = (query: string): Insight[] => {
+  const q = query.toLowerCase();
+  if (q.includes('koyna')) {
+    return [
+      { title: 'Current Level', value: '92.4%', trend: '+2.1%', trendUp: true, icon: Droplets, color: 'text-blue-600' },
+      { title: 'Storage', value: '2.8 TMC', trend: 'of 3.0 TMC', icon: Database, color: 'text-cyan-600' },
+      { title: 'Inflow', value: '45,000', trend: 'cusecs', icon: Waves, color: 'text-indigo-600' },
+      { title: 'Outflow', value: '32,000', trend: 'cusecs', icon: Waves, color: 'text-orange-600' },
+    ];
+  }
+  if (q.includes('flood') && q.includes('compensation')) {
+    return [
+      { title: 'Crop Loss', value: '₹5,000', trend: 'per acre', icon: FileText, color: 'text-emerald-600' },
+      { title: 'House Damage', value: '₹95,000', trend: 'full damage', icon: Building2, color: 'text-blue-600' },
+      { title: 'Processing Time', value: '30', trend: 'days', icon: Clock, color: 'text-orange-600' },
+      { title: 'Claims 2024', value: '12,450', trend: '+23%', trendUp: true, icon: TrendingUp, color: 'text-purple-600' },
+    ];
+  }
+  if (q.includes('dam') && q.includes('gate')) {
+    return [
+      { title: 'Active Releases', value: '12', trend: '+3 today', trendUp: true, icon: Waves, color: 'text-blue-600' },
+      { title: 'Critical Dams', value: '3', trend: 'High alert', icon: AlertTriangle, color: 'text-red-600' },
+      { title: 'Total Outflow', value: '1.2M', trend: 'cusecs', icon: Droplets, color: 'text-cyan-600' },
+      { title: 'Downstream Alert', value: '18', trend: 'districts', icon: Shield, color: 'text-orange-600' },
+    ];
+  }
+  return [
+    { title: 'Total Dams', value: '287', trend: 'monitored', icon: Database, color: 'text-blue-600' },
+    { title: 'GRs 2024', value: '142', trend: 'indexed', icon: FileText, color: 'text-emerald-600' },
+    { title: 'Active Alerts', value: '7', trend: 'critical', icon: AlertTriangle, color: 'text-red-600' },
+    { title: 'Avg Storage', value: '68%', trend: '+5%', trendUp: true, icon: Droplets, color: 'text-cyan-600' },
+  ];
+};
+// Generate response based on query
+const generateResponse = (query: string): { content: string; docs: Document[] } => {
+  const q = query.toLowerCase();
+  if (q.includes('koyna')) {
+    return {
+      content: `**Koyna Dam - Current Status (as of ${new Date().toLocaleTimeString('en-IN')})**
+• **Storage Level:** 92.4% (2.8 TMC of 3.0 TMC capacity)
+• **Inflow:** 45,000 cusecs | **Outflow:** 32,000 cusecs
+• **Status:** ⚠️ CRITICAL - Emergency discharge initiated
+• **Districts Alerted:** Satara, Sangli, Kolhapur collectors notified
+**Recent Actions:**
+- 4 radial gates opened at 50% capacity
+- Downstream evacuation advisory issued
+- Hourly monitoring activated
+Refer to **GR-2024-WRD-056** for emergency protocols.`,
+      docs: mockDocuments.filter(d => d.id.includes('056') || d.id.includes('RPT-2024-001'))
+    };
+  }
+  if (q.includes('flood') && q.includes('compensation')) {
+    return {
+      content: `**Flood Relief Compensation - 2024 Guidelines (GR-2024-WRD-089)**
+**Eligibility Criteria:**
+• Residence in notified flood-affected area
+• Damage between July 1 - October 31, 2024
+• Registration with local Tahsildar office
+**Compensation Rates:**
+• Crop Loss: ₹5,000 per acre (max 10 acres)
+• House Damage: ₹95,000 (full) / ₹50,000 (partial)
+• Livestock: ₹50,000 per animal (max 5)
+**Application Process:**
+1. Submit Form WRD-FLOOD-01 to Tahsildar
+2. Attach damage assessment report
+3. Processing time: 30 days
+4. Direct bank transfer
+Contact: District Relief Office for assistance.`,
+      docs: mockDocuments.filter(d => d.id.includes('089') || d.id.includes('001'))
+    };
+  }
+  if (q.includes('gate') || q.includes('sop')) {
+    return {
+      content: `**Dam Gate Operations SOP (GR-2023-WRD-124)**
+**Pre-Opening Checklist:**
+✓ Seismic sensors calibrated
+✓ Downstream flow sensors active
+✓ Alert systems tested
+✓ Control room staffed (min 2 engineers)
+**Opening Procedure:**
+1. **Notification** (T-2 hours): Alert downstream districts
+2. **Gradual Opening**: 10% increments every 15 minutes
+3. **Flow Monitoring**: Continuous discharge measurement
+4. **Public Announcement**: Local media + sirens
+**Emergency Override:**
+Chief Engineer can authorize immediate release if dam level exceeds 95%.
+**Documentation:** All gate operations logged in DAMS system within 1 hour.`,
+      docs: mockDocuments.filter(d => d.id.includes('124') || d.id.includes('056'))
+    };
+  }
+  if (q.includes('irrigation') || q.includes('act')) {
+    return {
+      content: `**Maharashtra Irrigation Act, 1976 - Key Provisions**
+**Section 33 - Water Rights:**
+• Priority order: Drinking water > Agriculture > Industry
+• Canal water distribution by WRD, not local bodies
+• Penalty for unauthorized diversion: Up to 3 years imprisonment
+**Section 45 - Maintenance:**
+• WRD responsible for major repairs (>₹1 lakh)
+• Water User Associations (WUAs) for minor maintenance
+• 5% water cess collected for maintenance fund
+**Recent Amendment (2024):**
+• IoT-based usage monitoring mandated
+• Real-time allocation adjustments during scarcity
+• Digital grievance portal: wrd.maharashtra.gov.in/grievance`,
+      docs: mockDocuments.filter(d => d.type === 'Act')
+    };
+  }
+  const relevantDocs = mockDocuments
+    .filter(d => q.includes(d.type.toLowerCase()) ||
+                 d.title.toLowerCase().includes(q.split(' ')[0]))
+    .slice(0, 3);
+  return {
+    content: `I found **${relevantDocs.length} relevant document(s)** for your query on "${query}".
+${relevantDocs.map(d => `**${d.id}** - ${d.title}\n• ${d.summary || 'No summary available'}`).join('\n\n')}
+Would you like me to provide detailed information about any of these documents, or search for something more specific?`,
+    docs: relevantDocs
+  };
+};
+export function Chatbot() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const [showWelcome, setShowWelcome] = useState(true);
+  const [showSidebar, setShowSidebar] = useState(true);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const popularGRs = getPopularGRs();
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const query = searchParams.get('q');
+    if (query) {
+      handleSend(query);
+      setShowWelcome(false);
+    }
+  }, [location]);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+  const handleSend = async (text: string) => {
+    if (!text.trim()) return;
+    setShowWelcome(false);
+    const userMsg: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: text,
+      timestamp: new Date()
+    };
+    setMessages(prev => [...prev, userMsg]);
+    setInput('');
+    setIsLoading(true);
+    await new Promise(r => setTimeout(r, 800));
+    const { content, docs } = generateResponse(text);
+    const insights = generateInsights(text);
+    const aiMsg: Message = {
+      id: (Date.now() + 1).toString(),
+      role: 'assistant',
+      content,
+      sources: docs,
+      insights,
+      timestamp: new Date()
+    };
+    setMessages(prev => [...prev, aiMsg]);
+    setIsLoading(false);
+  };
+  const getTypeIcon = (type: DocumentType) => {
+    switch (type) {
+      case 'GR': return ScrollText;
+      case 'Act': return Scale;
+      case 'Circular': return FileText;
+      case 'Manual': return BookOpen;
+      case 'SOP': return Shield;
+      case 'Report': return FileSearch;
+    }
+  };
+  const formatTime = (date?: Date) => {
+    if (!date) return '';
+    return date.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' });
+  };
+  const WelcomeScreen = () => (
+    <div className="flex flex-col justify-center gap-4 h-full w-full max-w-2xl mx-auto py-2">
+      {/* Top Section - Title */}
+      <div className="text-center">
+        <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center mx-auto mb-2 shadow-md">
+          <Sparkles className="h-6 w-6 text-white" />
+        </div>
+        <h2 className="text-lg font-semibold text-slate-800">GR Helper</h2>
+        <p className="text-xs text-slate-500 mt-1">AI Assistant for Government Resolutions & Acts</p>
+      </div>
+      {/* GR Quick Actions */}
+      <div className="px-2 mt-2">
+        <p className="text-xs font-medium text-slate-500 mb-2 px-1">Quick Actions</p>
+        <div className="grid grid-cols-2 gap-2">
+          {grQuickActions.map((action, idx) => {
+            const Icon = action.icon;
+            return (
+              <button
+                key={idx}
+                onClick={() => handleSend(action.text)}
+                className="text-left p-3 bg-white rounded-lg border border-slate-200 hover:border-indigo-300 hover:shadow-sm active:bg-slate-50 transition-all"
+              >
+                <div className="flex items-center gap-2">
+                  <div className={cn("p-1 rounded", `bg-${action.color}-100`)}>
+                    <Icon className={cn("h-3.5 w-3.5", `text-${action.color}-600`)} />
+                  </div>
+                  <span className="text-xs font-medium text-slate-700 line-clamp-1">{action.text}</span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      {/* Middle Section - Category Cards */}
+      <div className="px-2 mt-2">
+        <p className="text-xs font-medium text-slate-500 mb-2 px-1">Browse by Category</p>
+        <div className="grid grid-cols-2 gap-2">
+          {queryCategories.map((cat, idx) => {
+            const Icon = cat.icon;
+            return (
+              <button
+                key={idx}
+                onClick={() => handleSend(cat.queries[0].text)}
+                className="text-left p-3 bg-white rounded-lg border border-slate-200 hover:border-blue-300 active:bg-slate-50 transition-all shadow-sm"
+              >
+                <div className="flex items-center gap-2 mb-1">
+                  <div className={cn("p-1 rounded", `bg-${cat.color}-100`)}>
+                    <Icon className={cn("h-3.5 w-3.5", `text-${cat.color}-600`)} />
+                  </div>
+                  <span className="text-xs font-semibold text-slate-700">{cat.title}</span>
+                </div>
+                <p className="text-[10px] text-slate-500 truncate">{cat.queries[0].text}</p>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      {/* Bottom Section - Quick Links */}
+      <div className="flex flex-wrap justify-center gap-1.5 px-2 mt-2">
+        {['Konkan rainfall', 'Vidarbha GR', 'Water rights', 'Compensation'].map((s, i) => (
+          <button
+            key={i}
+            onClick={() => handleSend(s)}
+            className="text-[10px] px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full hover:bg-slate-200 transition-colors"
+          >
+            {s}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+  const RecentGRsSidebar = () => (
+    <div className={cn(
+      "w-64 border-l border-slate-200 bg-white flex-col shrink-0 hidden lg:flex",
+      showSidebar ? "lg:flex" : "lg:hidden"
+    )}>
+      <div className="p-3 border-b border-slate-100">
+        <div className="flex items-center justify-between">
+          <h3 className="text-xs font-semibold text-slate-700">Popular GRs</h3>
+          <Star className="h-3 w-3 text-yellow-500" />
+        </div>
+      </div>
+      <div className="flex-1 overflow-y-auto p-2 space-y-1.5">
+        {popularGRs.map(gr => (
+          <button
+            key={gr.id}
+            onClick={() => handleSend(`Explain ${gr.id}: ${gr.title}`)}
+            className="w-full text-left p-2 rounded-md hover:bg-slate-50 transition-colors group"
+          >
+            <div className="flex items-start justify-between gap-1">
+              <p className="text-[10px] font-mono text-indigo-600">{gr.id}</p>
+              <ChevronRight className="h-3 w-3 text-slate-300 group-hover:text-indigo-500 shrink-0 mt-0.5" />
+            </div>
+            <p className="text-xs text-slate-700 line-clamp-2 mt-0.5">{gr.title}</p>
+            <div className="flex items-center gap-1 mt-1">
+              <Badge className="text-[8px] px-1 py-0 h-auto bg-slate-100 text-slate-600">
+                {gr.category}
+              </Badge>
+            </div>
+          </button>
+        ))}
+      </div>
+      <div className="p-2 border-t border-slate-100">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full text-xs h-8"
+          onClick={() => navigate('/gr-finder')}
+        >
+          <Search className="h-3 w-3 mr-1" />
+          Browse All GRs
+        </Button>
+      </div>
+    </div>
+  );
+  const MessageBubble = ({ msg }: { msg: Message }) => (
+    <div className={cn(
+      "flex w-full mb-4",
+      msg.role === 'user' ? "justify-end" : "justify-start"
+    )}>
+      <div className={cn(
+        "flex gap-3 max-w-[90%] md:max-w-[80%]",
+        msg.role === 'user' ? "flex-row-reverse" : "flex-row"
+      )}>
+        <div className={cn(
+          "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+          msg.role === 'user'
+            ? "bg-blue-600 text-white"
+            : "bg-gradient-to-br from-blue-500 to-indigo-600 text-white"
+        )}>
+          {msg.role === 'user' ? <User className="h-4 w-4" /> : <Bot className="h-4 w-4" />}
+        </div>
+        <div className="flex flex-col gap-2">
+          <div className={cn(
+            "px-4 py-3 rounded-2xl text-sm leading-relaxed",
+            msg.role === 'user'
+              ? "bg-blue-600 text-white rounded-tr-sm"
+              : "bg-white border border-slate-200 text-slate-700 rounded-tl-sm shadow-sm"
+          )}>
+            <div className="whitespace-pre-wrap">
+              {msg.content.split('**').map((part, i) =>
+                i % 2 === 0 ? part : <strong key={i} className="font-semibold">{part}</strong>
+              )}
+            </div>
+          </div>
+          {msg.insights && msg.insights.length > 0 && (
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-1">
+              {msg.insights.map((insight, idx) => {
+                const Icon = insight.icon;
+                return (
+                  <div key={idx} className="bg-white border border-slate-200 rounded-lg p-2.5 shadow-sm">
+                    <div className="flex items-center gap-1.5 mb-1">
+                      <Icon className={cn("h-3.5 w-3.5", insight.color)} />
+                      <span className="text-[10px] text-slate-500 uppercase tracking-wider">{insight.title}</span>
+                    </div>
+                    <div className="flex items-baseline gap-1">
+                      <span className="text-lg font-bold text-slate-800">{insight.value}</span>
+                      {insight.trend && (
+                        <span className={cn(
+                          "text-[10px]",
+                          insight.trendUp ? "text-emerald-600" : "text-slate-400"
+                        )}>
+                          {insight.trend}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          {msg.sources && msg.sources.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-1">
+              {msg.sources.map((doc, idx) => {
+                const TypeIcon = getTypeIcon(doc.type);
+                return (
+                  <div
+                    key={idx}
+                    className="flex items-center gap-1.5 text-[11px] px-2.5 py-1.5 bg-slate-100 text-slate-600 rounded-md border border-slate-200"
+                  >
+                    <TypeIcon className="h-3 w-3" />
+                    <span className="font-medium">{doc.id}</span>
+                    <span className="text-slate-400">|</span>
+                    <span className="truncate max-w-[120px]">{doc.title}</span>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          <span className="text-[10px] text-slate-400 ml-1">
+            {formatTime(msg.timestamp)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+  return (
+    <>
+      {/* Desktop */}
+      <div className="hidden md:flex h-full w-full flex-row bg-slate-50 overflow-hidden rounded-lg min-h-0">
+        {/* Main Chat Area */}
+        <div className="flex-1 flex flex-col min-w-0">
+          <div className="bg-white border-b border-slate-200 px-4 py-3 shrink-0">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-sm">
+                  <Sparkles className="h-4 w-4 text-white" />
+                </div>
+                <div>
+                  <h1 className="text-base font-semibold text-slate-900">GR Helper</h1>
+                  <p className="text-[11px] text-slate-500">AI Assistant for Government Resolutions</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs h-8"
+                  onClick={() => navigate('/faq')}
+                >
+                  <HelpCircle className="h-3.5 w-3.5 mr-1" />
+                  FAQ
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs h-8"
+                  onClick={() => navigate('/gr-finder')}
+                >
+                  <Search className="h-3.5 w-3.5 mr-1" />
+                  GR Finder
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex-1 overflow-hidden px-4 py-4 min-h-0">
+            {showWelcome && messages.length === 0 ? (
+              <WelcomeScreen />
+            ) : (
+              <div className="max-w-3xl mx-auto h-full overflow-y-auto pr-2 min-h-0">
+                {messages.map((msg, i) => (
+                  <React.Fragment key={msg.id || String(i)}>
+                    <MessageBubble msg={msg} />
+                  </React.Fragment>
+                ))}
+                {isLoading && (
+                  <div className="flex items-center gap-3 text-slate-500">
+                    <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
+                      <Bot className="h-4 w-4 text-white" />
+                    </div>
+                    <div className="flex items-center gap-2 bg-white border border-slate-200 px-4 py-2.5 rounded-2xl rounded-tl-sm shadow-sm">
+                      <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+                      <span className="text-sm">Searching GR database...</span>
+                    </div>
+                  </div>
+                )}
+                <div ref={messagesEndRef} />
+              </div>
+            )}
+          </div>
+          <div className="bg-white border-t border-slate-200 px-4 py-3 shrink-0">
+            <div className="max-w-3xl mx-auto">
+              <form onSubmit={(e) => { e.preventDefault(); handleSend(input); }} className="flex gap-3">
+                <div className="flex-1 relative">
+                  <Input
+                    ref={inputRef}
+                    type="text"
+                    placeholder="Ask about GRs, Acts, compensation, flood relief..."
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    className="h-11 pl-4 pr-10 bg-slate-50 border-slate-200 text-sm focus:bg-white focus:border-blue-500 transition-all rounded-xl"
+                    disabled={isLoading}
+                  />
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
+                    <FileSearch className="h-4 w-4" />
+                  </div>
+                </div>
+                <Button
+                  type="submit"
+                  disabled={!input.trim() || isLoading}
+                  className="h-11 px-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white text-sm font-medium rounded-xl shadow-sm"
+                >
+                  <Send className="h-4 w-4 mr-1.5" />
+                  Send
+                </Button>
+              </form>
+            </div>
+          </div>
+        </div>
+        {/* Sidebar with Popular GRs */}
+        <RecentGRsSidebar />
+      </div>
+      {/* Mobile */}
+      <>
+        {!isMobileOpen && (
+          <button
+            onClick={() => setIsMobileOpen(true)}
+            className="fixed bottom-20 right-4 z-50 w-14 h-14 bg-gradient-to-br from-blue-600 to-indigo-600 text-white rounded-full shadow-lg flex items-center justify-center md:hidden"
+          >
+            <MessageCircle className="h-6 w-6" />
+          </button>
+        )}
+        {isMobileOpen && (
+          <div className="fixed inset-0 z-50 bg-slate-50 flex flex-col md:hidden">
+            <div className="bg-white border-b border-slate-200 px-4 py-3 flex items-center justify-between">
+              <div className="flex items-center gap-2.5">
+                <div className="w-9 h-9 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
+                  <Sparkles className="h-4 w-4 text-white" />
+                </div>
+                <div>
+                  <h1 className="font-semibold text-slate-900 text-sm">GR Helper</h1>
+                  <p className="text-[10px] text-slate-500">AI Assistant for Government GRs</p>
+                </div>
+              </div>
+              <button
+                onClick={() => setIsMobileOpen(false)}
+                className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100"
+              >
+                <X className="h-5 w-5 text-slate-500" />
+              </button>
+            </div>
+            <div className="flex-1 overflow-hidden px-3 py-1 min-h-0">
+              {showWelcome && messages.length === 0 ? (
+                <div className="flex flex-col justify-center gap-4 h-full w-full max-w-sm mx-auto">
+                  {/* Top */}
+                  <div className="text-center">
+                    <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center mx-auto mb-2 shadow-md">
+                      <Sparkles className="h-5 w-5 text-white" />
+                    </div>
+                    <h2 className="text-base font-semibold text-slate-800">GR Helper</h2>
+                    <p className="text-[11px] text-slate-500 mt-1">AI Assistant for Government GRs</p>
+                  </div>
+                  {/* Quick Actions */}
+                  <div className="px-2">
+                    <p className="text-[10px] font-medium text-slate-500 mb-1.5 px-1">Quick Actions</p>
+                    <div className="grid grid-cols-2 gap-1.5">
+                      {grQuickActions.slice(0, 4).map((action, idx) => (
+                        <button
+                          key={idx}
+                          onClick={() => handleSend(action.text)}
+                          className="text-left p-2 bg-white rounded-lg border border-slate-200 active:bg-slate-50"
+                        >
+                          <div className="flex items-center gap-1.5">
+                            <action.icon className={cn("h-3 w-3", `text-${action.color}-600`)} />
+                            <span className="text-[10px] font-medium text-slate-700 line-clamp-1">{action.text}</span>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                  {/* Middle - Cards */}
+                  <div className="px-2">
+                    <p className="text-[10px] font-medium text-slate-500 mb-1.5 px-1">Browse by Category</p>
+                    <div className="grid grid-cols-2 gap-1.5">
+                      {queryCategories.map((cat, idx) => (
+                        <button
+                          key={idx}
+                          onClick={() => handleSend(cat.queries[0].text)}
+                          className="text-left p-2 bg-white rounded-lg border border-slate-200 active:bg-slate-50"
+                        >
+                          <div className="flex items-center gap-1.5 mb-0.5">
+                            <div className={cn("p-0.5 rounded", `bg-${cat.color}-100`)}>
+                              <cat.icon className={cn("h-3 w-3", `text-${cat.color}-600`)} />
+                            </div>
+                            <span className="text-[10px] font-medium text-slate-700">{cat.title}</span>
+                          </div>
+                          <p className="text-[9px] text-slate-500 truncate">{cat.queries[0].text}</p>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                  {/* Bottom - Quick Links */}
+                  <div className="flex flex-wrap justify-center gap-1.5 px-2">
+                    {['Konkan rainfall', 'Vidarbha GR', 'Water rights', 'Compensation'].map((s, i) => (
+                      <button
+                        key={i}
+                        onClick={() => handleSend(s)}
+                        className="text-[10px] px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full"
+                      >
+                        {s}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div className="w-full h-full overflow-y-auto space-y-3 min-h-0">
+                  {messages.map((msg, i) => (
+                    <React.Fragment key={msg.id || String(i)}>
+                      <MessageBubble msg={msg} />
+                    </React.Fragment>
+                  ))}
+                  {isLoading && (
+                    <div className="flex items-center gap-2 text-slate-500">
+                      <div className="w-7 h-7 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
+                        <Bot className="h-3.5 w-3.5 text-white" />
+                      </div>
+                      <div className="flex items-center gap-2 bg-white border border-slate-200 px-3 py-2 rounded-xl rounded-tl-sm">
+                        <Loader2 className="h-3 w-3 animate-spin text-blue-500" />
+                        <span className="text-xs">Searching...</span>
+                      </div>
+                    </div>
+                  )}
+                  <div ref={messagesEndRef} />
+                </div>
+              )}
+            </div>
+            <div className="bg-white border-t border-slate-200 px-4 py-2 shrink-0">
+              <form onSubmit={(e) => { e.preventDefault(); handleSend(input); }} className="flex gap-2">
+                <Input
+                  type="text"
+                  placeholder="Ask about GRs, Acts, compensation..."
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  className="flex-1 h-10 bg-slate-50 text-sm rounded-xl"
+                  disabled={isLoading}
+                />
+                <Button
+                  type="submit"
+                  size="icon"
+                  disabled={!input.trim() || isLoading}
+                  className="h-10 w-10 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl"
+                >
+                  <Send className="h-4 w-4" />
+                </Button>
+              </form>
+            </div>
+          </div>
+        )}
+      </>
+    </>
+  );
+}

src/pages/Dashboard.tsx ADDED Viewed

	@@ -0,0 +1,320 @@

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/src/components/ui/Card';
+import { Badge } from '@/src/components/ui/Badge';
+import { Button } from '@/src/components/ui/Button';
+import {
+  AlertTriangle,
+  Droplets,
+  FileText,
+  ArrowRight,
+  CloudRain,
+  Bell,
+  Database,
+  MapPin,
+  TrendingUp,
+  TrendingDown,
+  Waves,
+  Calendar,
+  Search,
+  MessageSquare,
+  HelpCircle,
+  FileSearch,
+  Sparkles
+} from 'lucide-react';
+import { cn } from '@/src/utils/cn';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  Legend,
+  PieChart,
+  Pie,
+  Cell
+} from 'recharts';
+// Extended water level data with more WRD-specific metrics
+const waterLevelData = [
+  { name: 'Jan', level: 40, avg: 35, rainfall: 0 },
+  { name: 'Feb', level: 35, avg: 30, rainfall: 2 },
+  { name: 'Mar', level: 30, avg: 25, rainfall: 5 },
+  { name: 'Apr', level: 25, avg: 20, rainfall: 12 },
+  { name: 'May', level: 20, avg: 15, rainfall: 28 },
+  { name: 'Jun', level: 45, avg: 40, rainfall: 85 },
+  { name: 'Jul', level: 75, avg: 65, rainfall: 245 },
+  { name: 'Aug', level: 90, avg: 85, rainfall: 298 },
+  { name: 'Sep', level: 85, avg: 80, rainfall: 180 },
+  { name: 'Oct', level: 70, avg: 65, rainfall: 65 },
+  { name: 'Nov', level: 60, avg: 55, rainfall: 18 },
+  { name: 'Dec', level: 50, avg: 45, rainfall: 3 },
+];
+// Dam storage by region
+const regionData = [
+  { name: 'Konkan', full: 85, capacity: '45 TMC' },
+  { name: 'Western Maharashtra', full: 72, capacity: '120 TMC' },
+  { name: 'Marathwada', full: 45, capacity: '89 TMC' },
+  { name: 'Vidarbha', full: 58, capacity: '67 TMC' },
+  { name: 'North Maharashtra', full: 63, capacity: '34 TMC' },
+];
+// Recent alerts with WRD-specific details
+const alerts = [
+  { id: 1, title: 'Critical Water Level', location: 'Koyna Dam, Satara', severity: 'Critical', time: '30 min ago', type: 'dam', description: '92% capacity - Emergency discharge initiated' },
+  { id: 2, title: 'Flash Flood Warning', location: 'Panchaganga Basin, Kolhapur', severity: 'Critical', time: '1 hour ago', type: 'flood', description: 'Rising levels - Evacuation alert issued' },
+  { id: 3, title: 'Heavy Rainfall Alert', location: 'Ratnagiri District', severity: 'High', time: '3 hours ago', type: 'rain', description: '250mm in 24h - Landslide risk' },
+  { id: 4, title: 'New GR Published', location: 'WRD Circular No. 2024/08', severity: 'Info', time: '5 hours ago', type: 'gr', description: 'Updated flood response protocols' },
+  { id: 5, title: 'Gate Maintenance', location: 'Jayakwadi Dam', severity: 'Medium', time: '1 day ago', type: 'maintenance', description: 'Scheduled maintenance - Reduced outflow' },
+];
+// WRD KPI data
+const kpiData = [
+  { title: 'Critical Alerts', value: '7', trend: '+2', trendUp: false, icon: AlertTriangle, color: 'red', subtitle: 'Immediate action required' },
+  { title: 'Active Releases', value: '12', trend: '+3', trendUp: true, icon: Waves, color: 'blue', subtitle: 'Dams with open gates' },
+  { title: 'Avg Storage', value: '68%', trend: '+5%', trendUp: true, icon: Droplets, color: 'cyan', subtitle: 'Above normal for season' },
+  { title: '24h Rainfall', value: '145mm', trend: '+85mm', trendUp: false, icon: CloudRain, color: 'indigo', subtitle: 'Konkan region' },
+  { title: 'GRs This Month', value: '24', trend: '+8', trendUp: true, icon: FileText, color: 'emerald', subtitle: 'New policies/circulars' },
+  { title: 'Flood Zones', value: '3', trend: '+1', trendUp: false, icon: MapPin, color: 'orange', subtitle: 'Active predictions' },
+];
+const COLORS = ['#3b82f6', '#06b6d4', '#8b5cf6', '#f59e0b', '#ef4444'];
+export function Dashboard() {
+  const navigate = useNavigate();
+  const quickLinks = [
+    { name: 'Find a GR', description: 'Search Government Resolutions', icon: FileSearch, path: '/gr-finder', color: 'blue' },
+    { name: 'Ask GR Helper', description: 'AI assistant for GR queries', icon: Sparkles, path: '/ai-assistant', color: 'indigo' },
+    { name: 'View FAQ', description: 'Common WRD questions', icon: HelpCircle, path: '/faq', color: 'emerald' },
+    { name: 'Flood Map', description: 'Real-time flood prediction', icon: MapPin, path: '/map', color: 'cyan' },
+  ];
+  return (
+    <div className="space-y-4 lg:space-y-6 p-4 lg:p-6">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+        <div>
+          <h1 className="text-xl lg:text-2xl font-bold tracking-tight text-slate-900">JalDrishti Dashboard</h1>
+          <p className="text-sm text-slate-500">Maharashtra WRD - Real-time Water Resources Monitoring</p>
+        </div>
+        <div className="flex items-center gap-2 text-xs lg:text-sm text-slate-500">
+          <Calendar className="h-4 w-4" />
+          <span>Last updated: {new Date().toLocaleString('en-IN', { dateStyle: 'medium', timeStyle: 'short' })}</span>
+        </div>
+      </div>
+      {/* Quick Links */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+        {quickLinks.map((link, idx) => {
+          const Icon = link.icon;
+          return (
+            <Card
+              key={idx}
+              className="cursor-pointer hover:shadow-md transition-all border-slate-200 group"
+              onClick={() => navigate(link.path)}
+            >
+              <CardContent className="p-4">
+                <div className="flex items-start gap-3">
+                  <div className={cn(
+                    "rounded-lg p-2 shrink-0",
+                    link.color === 'blue' ? "bg-blue-100 text-blue-600" :
+                    link.color === 'indigo' ? "bg-indigo-100 text-indigo-600" :
+                    link.color === 'emerald' ? "bg-emerald-100 text-emerald-600" :
+                    "bg-cyan-100 text-cyan-600"
+                  )}>
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-semibold text-slate-900 group-hover:text-blue-600 transition-colors">{link.name}</p>
+                    <p className="text-xs text-slate-500 mt-0.5">{link.description}</p>
+                  </div>
+                  <ArrowRight className="h-4 w-4 text-slate-300 group-hover:text-blue-500 transition-colors shrink-0" />
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+      {/* KPI Cards - Horizontal scroll on mobile */}
+      <div className="overflow-x-auto -mx-4 px-4 lg:mx-0 lg:px-0 pb-2 lg:pb-0">
+        <div className="flex gap-3 lg:grid lg:grid-cols-6 min-w-max lg:min-w-0">
+          {kpiData.map((kpi, idx) => {
+            const Icon = kpi.icon;
+            return (
+              <Card key={idx} className="w-[160px] lg:w-auto shrink-0">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 p-3">
+                  <CardTitle className="text-xs font-medium">{kpi.title}</CardTitle>
+                  <Icon className={cn("h-4 w-4", `text-${kpi.color}-500`)} />
+                </CardHeader>
+                <CardContent className="p-3 pt-0">
+                  <div className="text-xl lg:text-2xl font-bold">{kpi.value}</div>
+                  <div className="flex items-center gap-1 mt-1">
+                    {kpi.trendUp ? (
+                      <TrendingUp className={cn("h-3 w-3", kpi.color === 'red' ? "text-red-500" : "text-green-500")} />
+                    ) : (
+                      <TrendingDown className={cn("h-3 w-3", kpi.color === 'red' ? "text-red-500" : "text-orange-500")} />
+                    )}
+                    <span className={cn("text-xs", kpi.trendUp ? "text-green-600" : "text-red-600")}>
+                      {kpi.trend}
+                    </span>
+                  </div>
+                  <p className="text-[10px] text-slate-400 mt-1 hidden lg:block">{kpi.subtitle}</p>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+      {/* Main Grid */}
+      <div className="grid gap-4 lg:grid-cols-12">
+        {/* Water Level Chart - Full width on mobile */}
+        <Card className="lg:col-span-7">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base lg:text-lg">State Water Storage Trends</CardTitle>
+            <CardDescription className="text-xs lg:text-sm">Current year vs Historical Average with Rainfall overlay</CardDescription>
+          </CardHeader>
+          <CardContent className="pl-0 lg:pl-2">
+            <div className="h-[250px] lg:h-[300px] w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <AreaChart data={waterLevelData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+                  <defs>
+                    <linearGradient id="colorLevel" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
+                    </linearGradient>
+                    <linearGradient id="colorAvg" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#94a3b8" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#94a3b8" stopOpacity={0}/>
+                    </linearGradient>
+                  </defs>
+                  <XAxis dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false} />
+                  <YAxis stroke="#888888" fontSize={10} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}%`} />
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                  <Tooltip
+                    contentStyle={{ backgroundColor: '#fff', borderRadius: '8px', border: '1px solid #e2e8f0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '12px' }}
+                  />
+                  <Legend wrapperStyle={{ fontSize: '12px' }} />
+                  <Area type="monotone" dataKey="level" name="Current Storage %" stroke="#3b82f6" strokeWidth={2} fillOpacity={1} fill="url(#colorLevel)" />
+                  <Area type="monotone" dataKey="avg" name="Historical Avg" stroke="#94a3b8" strokeWidth={2} fillOpacity={1} fill="url(#colorAvg)" />
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+          </CardContent>
+        </Card>
+        {/* Regional Storage + Alerts */}
+        <div className="lg:col-span-5 space-y-4">
+          {/* Regional Storage Chart */}
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm">Storage by Region</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="h-[150px] lg:h-[180px]">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={regionData} layout="vertical" margin={{ top: 5, right: 30, left: 40, bottom: 5 }}>
+                    <XAxis type="number" stroke="#888888" fontSize={10} tickLine={false} axisLine={false} tickFormatter={(v) => `${v}%`} />
+                    <YAxis dataKey="name" type="category" stroke="#888888" fontSize={10} tickLine={false} axisLine={false} width={100} />
+                    <Tooltip
+                      contentStyle={{ fontSize: '12px', borderRadius: '8px' }}
+                      formatter={(value: number) => [`${value}% Full`, 'Storage']}
+                    />
+                    <Bar dataKey="full" fill="#3b82f6" radius={[0, 4, 4, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </CardContent>
+          </Card>
+          {/* Quick Stats */}
+          <Card>
+            <CardContent className="p-4">
+              <div className="grid grid-cols-3 gap-4 text-center">
+                <div>
+                  <div className="text-2xl font-bold text-blue-600">287</div>
+                  <div className="text-xs text-slate-500">Total Dams</div>
+                </div>
+                <div>
+                  <div className="text-2xl font-bold text-red-600">18</div>
+                  <div className="text-xs text-slate-500">Critical</div>
+                </div>
+                <div>
+                  <div className="text-2xl font-bold text-emerald-600">142</div>
+                  <div className="text-xs text-slate-500">Indexed GRs</div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      {/* Recent Alerts Section */}
+      <Card>
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-base lg:text-lg flex items-center gap-2">
+                <Bell className="h-5 w-5 text-slate-500" />
+                Recent Alerts & Notifications
+              </CardTitle>
+              <CardDescription className="text-xs lg:text-sm">System alerts, GR updates, and operational notifications</CardDescription>
+            </div>
+            <Button variant="outline" size="sm" className="hidden sm:flex text-xs h-8">
+              View All <ArrowRight className="ml-2 h-3 w-3" />
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {alerts.map((alert) => (
+              <div key={alert.id} className="flex items-start gap-3 p-3 rounded-lg bg-slate-50/50 border border-slate-100">
+                <div className={cn(
+                  "mt-0.5 rounded-full p-1.5 shrink-0",
+                  alert.severity === 'Critical' ? "bg-red-100 text-red-600" :
+                  alert.severity === 'High' ? "bg-orange-100 text-orange-600" :
+                  alert.severity === 'Medium' ? "bg-yellow-100 text-yellow-600" :
+                  "bg-blue-100 text-blue-600"
+                )}>
+                  {alert.type === 'gr' ? <FileText className="h-4 w-4" /> :
+                   alert.type === 'dam' ? <Database className="h-4 w-4" /> :
+                   alert.type === 'flood' ? <Waves className="h-4 w-4" /> :
+                   <AlertTriangle className="h-4 w-4" />}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <p className="text-sm font-medium">{alert.title}</p>
+                    <Badge variant={
+                      alert.severity === 'Critical' ? 'destructive' :
+                      alert.severity === 'High' ? 'outline' :
+                      alert.severity === 'Medium' ? 'secondary' :
+                      'outline'
+                    } className={cn(
+                      "text-[10px] h-5",
+                      alert.severity === 'High' ? 'border-orange-500 text-orange-700' : ''
+                    )}>
+                      {alert.severity}
+                    </Badge>
+                  </div>
+                  <p className="text-xs text-slate-500 mt-0.5">{alert.location}</p>
+                  <p className="text-xs text-slate-600 mt-1 hidden sm:block">{alert.description}</p>
+                </div>
+                <div className="text-xs text-slate-400 whitespace-nowrap shrink-0">{alert.time}</div>
+              </div>
+            ))}
+          </div>
+          <Button variant="outline" className="w-full mt-4 sm:hidden text-xs h-10">
+            View All Alerts <ArrowRight className="ml-2 h-4 w-4" />
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/pages/Faq.tsx ADDED Viewed

	@@ -0,0 +1,290 @@

+import React, { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/Card';
+import { Input } from '@/src/components/ui/Input';
+import { Button } from '@/src/components/ui/Button';
+import { Badge } from '@/src/components/ui/Badge';
+import {
+  Search, MessageSquare, ChevronDown, ChevronUp,
+  Waves, Database, Droplets, IndianRupee, FileText,
+  HelpCircle, ArrowRight, BookOpen
+} from 'lucide-react';
+import { cn } from '@/src/utils/cn';
+import { faqData, faqCategories, getFAQsByCategory, FAQItem } from '@/src/data/mockFAQs';
+const categoryIcons: Record<string, React.ElementType> = {
+  'Flood Management': Waves,
+  'Dam Operations': Database,
+  'Irrigation & Water Rights': Droplets,
+  'Compensation & Relief': IndianRupee,
+  'GRs & Acts': FileText,
+};
+export function Faq() {
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const filteredFAQs = useMemo(() => {
+    let faqs = selectedCategory === 'All'
+      ? faqData
+      : getFAQsByCategory(selectedCategory);
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      faqs = faqs.filter(faq =>
+        faq.question.toLowerCase().includes(q) ||
+        faq.answer.toLowerCase().includes(q) ||
+        faq.keywords.some(k => k.toLowerCase().includes(q))
+      );
+    }
+    return faqs;
+  }, [searchQuery, selectedCategory]);
+  const handleAskAI = (question: string) => {
+    navigate(`/ai-assistant?q=${encodeURIComponent(question)}`);
+  };
+  const toggleExpand = (id: string) => {
+    setExpandedId(expandedId === id ? null : id);
+  };
+  return (
+    <div className="space-y-6 max-w-4xl mx-auto">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900">Frequently Asked Questions</h1>
+          <p className="text-slate-500">Find answers to common WRD queries</p>
+        </div>
+        <Button onClick={() => navigate('/ai-assistant')} className="bg-indigo-600 hover:bg-indigo-700 text-white">
+          <MessageSquare className="mr-2 h-4 w-4" />
+          Ask GR Helper
+        </Button>
+      </div>
+      {/* Search */}
+      <Card className="border-none shadow-md bg-white/50 backdrop-blur-sm">
+        <CardContent className="p-4 sm:p-6">
+          <div className="relative">
+            <Search className="absolute left-3 top-3 h-5 w-5 text-slate-400" />
+            <Input
+              type="text"
+              placeholder="Search questions..."
+              className="pl-10 h-12 text-base bg-white"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </CardContent>
+      </Card>
+      {/* Category Tabs */}
+      <div className="flex flex-wrap gap-2">
+        <Badge
+          variant={selectedCategory === 'All' ? 'default' : 'secondary'}
+          className="cursor-pointer px-4 py-2 text-sm"
+          onClick={() => setSelectedCategory('All')}
+        >
+          All ({faqData.length})
+        </Badge>
+        {faqCategories.map(cat => {
+          const count = getFAQsByCategory(cat.name).length;
+          const Icon = categoryIcons[cat.name] || HelpCircle;
+          return (
+            <Badge
+              key={cat.id}
+              variant={selectedCategory === cat.name ? 'default' : 'secondary'}
+              className="cursor-pointer px-4 py-2 text-sm flex items-center gap-1"
+              onClick={() => setSelectedCategory(cat.name)}
+            >
+              <Icon className="h-3 w-3" />
+              {cat.name} ({count})
+            </Badge>
+          );
+        })}
+      </div>
+      {/* FAQ List */}
+      <div className="space-y-3">
+        {filteredFAQs.map((faq) => {
+          const isExpanded = expandedId === faq.id;
+          const CategoryIcon = categoryIcons[faq.category] || HelpCircle;
+          return (
+            <Card
+              key={faq.id}
+              className={cn(
+                "overflow-hidden transition-all border-slate-200",
+                isExpanded ? "shadow-md" : "hover:shadow-sm"
+              )}
+            >
+              <div
+                className="p-4 cursor-pointer"
+                onClick={() => toggleExpand(faq.id)}
+              >
+                <div className="flex items-start gap-3">
+                  <div className={cn(
+                    "rounded-full p-2 shrink-0",
+                    faq.category === 'Flood Management' ? "bg-blue-100 text-blue-600" :
+                    faq.category === 'Dam Operations' ? "bg-red-100 text-red-600" :
+                    faq.category === 'Irrigation & Water Rights' ? "bg-cyan-100 text-cyan-600" :
+                    faq.category === 'Compensation & Relief' ? "bg-emerald-100 text-emerald-600" :
+                    "bg-purple-100 text-purple-600"
+                  )}>
+                    <CategoryIcon className="h-4 w-4" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-2">
+                      <h3 className="text-sm font-semibold text-slate-900 pr-4">
+                        {faq.question}
+                      </h3>
+                      {isExpanded ? (
+                        <ChevronUp className="h-5 w-5 text-slate-400 shrink-0" />
+                      ) : (
+                        <ChevronDown className="h-5 w-5 text-slate-400 shrink-0" />
+                      )}
+                    </div>
+                    {!isExpanded && (
+                      <p className="text-xs text-slate-500 mt-1 line-clamp-1">
+                        Click to expand answer
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+              {isExpanded && (
+                <CardContent className="pt-0 pb-4 px-4">
+                  <div className="pl-11">
+                    {/* Answer */}
+                    <div className="text-sm text-slate-700 whitespace-pre-line leading-relaxed">
+                      {faq.answer}
+                    </div>
+                    {/* Related GRs */}
+                    {faq.relatedGRs && faq.relatedGRs.length > 0 && (
+                      <div className="mt-4 pt-4 border-t border-slate-100">
+                        <p className="text-xs font-medium text-slate-500 mb-2">Related GRs:</p>
+                        <div className="flex flex-wrap gap-2">
+                          {faq.relatedGRs.map(grId => (
+                            <Badge
+                              key={grId}
+                              variant="outline"
+                              className="text-xs cursor-pointer hover:bg-slate-100"
+                              onClick={() => navigate(`/gr-finder?search=${grId}`)}
+                            >
+                              {grId}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                    {/* Keywords */}
+                    <div className="mt-3 flex flex-wrap gap-1">
+                      {faq.keywords.map(keyword => (
+                        <span
+                          key={keyword}
+                          className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded"
+                        >
+                          {keyword}
+                        </span>
+                      ))}
+                    </div>
+                    {/* Ask AI Button */}
+                    <div className="mt-4 pt-4 border-t border-slate-100">
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        className="bg-indigo-50 text-indigo-700 hover:bg-indigo-100 border-indigo-100"
+                        onClick={() => handleAskAI(faq.question)}
+                      >
+                        <MessageSquare className="mr-2 h-4 w-4" />
+                        Ask AI about this
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+          );
+        })}
+        {filteredFAQs.length === 0 && (
+          <div className="text-center py-12">
+            <HelpCircle className="mx-auto h-12 w-12 text-slate-300 mb-4" />
+            <h3 className="text-lg font-medium text-slate-900">No questions found</h3>
+            <p className="text-slate-500">Try adjusting your search or category filter.</p>
+            <Button
+              variant="outline"
+              className="mt-4"
+              onClick={() => {
+                setSearchQuery('');
+                setSelectedCategory('All');
+              }}
+            >
+              Clear filters
+            </Button>
+          </div>
+        )}
+      </div>
+      {/* Still have questions? */}
+      <Card className="bg-gradient-to-r from-indigo-50 to-blue-50 border-indigo-100">
+        <CardContent className="p-6">
+          <div className="flex items-start gap-4">
+            <div className="rounded-full bg-indigo-100 p-3">
+              <BookOpen className="h-6 w-6 text-indigo-600" />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-lg font-semibold text-slate-900">Still have questions?</h3>
+              <p className="text-sm text-slate-600 mt-1">
+                Can't find what you're looking for? Our GR Helper AI assistant can help you find answers
+                related to Government Resolutions, Acts, and WRD policies.
+              </p>
+              <Button
+                className="mt-4 bg-indigo-600 hover:bg-indigo-700"
+                onClick={() => navigate('/ai-assistant')}
+              >
+                Open GR Helper <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      {/* Quick Links */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <Card className="border-slate-200 hover:shadow-md transition-shadow cursor-pointer" onClick={() => navigate('/gr-finder')}>
+          <CardContent className="p-4 flex items-center gap-3">
+            <div className="rounded-full bg-blue-100 p-2">
+              <FileText className="h-5 w-5 text-blue-600" />
+            </div>
+            <div>
+              <p className="text-sm font-medium text-slate-900">Browse Government Resolutions</p>
+              <p className="text-xs text-slate-500">Search and filter GRs by category, year, department</p>
+            </div>
+            <ArrowRight className="h-5 w-5 text-slate-400 ml-auto" />
+          </CardContent>
+        </Card>
+        <Card className="border-slate-200 hover:shadow-md transition-shadow cursor-pointer" onClick={() => navigate('/map')}>
+          <CardContent className="p-4 flex items-center gap-3">
+            <div className="rounded-full bg-cyan-100 p-2">
+              <Waves className="h-5 w-5 text-cyan-600" />
+            </div>
+            <div>
+              <p className="text-sm font-medium text-slate-900">View Flood Prediction Map</p>
+              <p className="text-xs text-slate-500">Real-time flood status and predictions</p>
+            </div>
+            <ArrowRight className="h-5 w-5 text-slate-400 ml-auto" />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/pages/GisMap.tsx ADDED Viewed

	@@ -0,0 +1,969 @@

+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { MapContainer, TileLayer, Marker, Popup, Circle, useMap, GeoJSON, useMapEvents } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/Card';
+import { Badge } from '@/src/components/ui/Badge';
+import { Button } from '@/src/components/ui/Button';
+import {
+  Layers, Play, Pause, AlertTriangle, Menu, X, Droplets,
+  MapPin, Waves, ArrowUpRight, Wind, Activity, Gauge,
+  ChevronRight, Info
+} from 'lucide-react';
+import { cn } from '@/src/utils/cn';
+// Fix for default marker icons in react-leaflet
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+});
+const customMarkerIcon = new L.Icon({
+  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+const warningMarkerIcon = new L.Icon({
+  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+const criticalMarkerIcon = new L.Icon({
+  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+// Maharashtra major dams with realistic data
+const dams = [
+  { id: 1, name: 'Koyna Dam', lat: 17.4014, lng: 73.7458, level: 92, capacity: '2.8 TMC', inflow: '45,000 cusecs', outflow: '32,000 cusecs', status: 'Critical', district: 'Satara' },
+  { id: 2, name: 'Jayakwadi Dam', lat: 19.4833, lng: 75.3167, level: 78, capacity: '2.9 TMC', inflow: '5,000 cusecs', outflow: '3,000 cusecs', status: 'Normal', district: 'Aurangabad' },
+  { id: 3, name: 'Ujani Dam', lat: 18.0736, lng: 75.1164, level: 85, capacity: '3.3 TMC', inflow: '15,000 cusecs', outflow: '12,000 cusecs', status: 'Warning', district: 'Solapur' },
+  { id: 4, name: 'Panshet Dam', lat: 18.3858, lng: 73.6158, level: 65, capacity: '0.3 TMC', inflow: '2,000 cusecs', outflow: '0 cusecs', status: 'Normal', district: 'Pune' },
+  { id: 5, name: 'Radhanagari Dam', lat: 16.4100, lng: 73.9900, level: 95, capacity: '0.2 TMC', inflow: '25,000 cusecs', outflow: '18,000 cusecs', status: 'Critical', district: 'Kolhapur' },
+  { id: 6, name: 'Ghatghar Dam', lat: 19.5670, lng: 73.4840, level: 88, capacity: '0.5 TMC', inflow: '8,000 cusecs', outflow: '5,000 cusecs', status: 'Warning', district: 'Thane' },
+  { id: 7, name: 'Bhandardara Dam', lat: 19.5500, lng: 73.7600, level: 72, capacity: '0.3 TMC', inflow: '3,000 cusecs', outflow: '1,500 cusecs', status: 'Normal', district: 'Ahmednagar' },
+];
+// Flood prediction zones (Pur Sadrushya Paristhiti)
+const floodZones = [
+  { id: 1, lat: 16.6965, lng: 74.2433, radius: 15000, risk: 'High', area: 'Kolhapur City & Surroundings', affectedPopulation: '500,000+', river: 'Panchaganga' },
+  { id: 2, lat: 16.8524, lng: 74.5815, radius: 12000, risk: 'Medium', area: 'Sangli City', affectedPopulation: '200,000+', river: 'Krishna' },
+  { id: 3, lat: 17.2777, lng: 74.1844, radius: 8000, risk: 'Low', area: 'Karad', affectedPopulation: '50,000+', river: 'Koyna' },
+  { id: 4, lat: 19.2000, lng: 74.7500, radius: 10000, risk: 'Medium', area: 'Beed District', affectedPopulation: '100,000+', river: 'Godavari' },
+];
+// Maharashtra districts for boundary fetching
+const maharashtraDistricts = [
+  'Kolhapur', 'Sangli', 'Satara', 'Pune', 'Ahmednagar', 'Nashik', 'Aurangabad', 'Thane', 'Raigad', 'Ratnagiri'
+];
+interface DistrictBoundary {
+  name: string;
+  geojson: any;
+  risk: 'High' | 'Medium' | 'Low' | 'None';
+}
+interface LiveCell {
+  id: string;
+  name: string;
+  lat: number;
+  lng: number;
+  intensity: number; // 0..1
+  type: 'rain' | 'flood';
+}
+// Rain drop particle for animation
+interface RainDrop {
+  x: number;
+  y: number;
+  speed: number;
+  length: number;
+  opacity: number;
+}
+// Flood wave parameters
+interface FloodWave {
+  offset: number;
+  amplitude: number;
+  frequency: number;
+  speed: number;
+}
+// Custom canvas layer for rain animation inside polygons
+class RainCanvasLayer extends L.Layer {
+  private _canvas: HTMLCanvasElement | null = null;
+  private _ctx: CanvasRenderingContext2D | null = null;
+  private _rainDrops: RainDrop[] = [];
+  private _polygons: L.Polygon[] = [];
+  private _animationFrame: number = 0;
+  private _isAnimating: boolean = false;
+  constructor(polygons: L.Polygon[]) {
+    super();
+    this._polygons = polygons;
+  }
+  onAdd(map: L.Map) {
+    this._canvas = L.DomUtil.create('canvas', 'leaflet-rain-layer');
+    this._canvas.style.position = 'absolute';
+    this._canvas.style.pointerEvents = 'none';
+    map.getPanes().overlayPane.appendChild(this._canvas);
+    this._ctx = this._canvas.getContext('2d');
+    // Initialize rain drops
+    this._initRainDrops();
+    // Start animation
+    this._isAnimating = true;
+    this._animate();
+    map.on('moveend', this._updateCanvasSize, this);
+    map.on('zoomend', this._updateCanvasSize, this);
+    this._updateCanvasSize();
+    return this;
+  }
+  onRemove(map: L.Map) {
+    this._isAnimating = false;
+    if (this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame);
+    }
+    if (this._canvas && this._canvas.parentNode) {
+      this._canvas.parentNode.removeChild(this._canvas);
+    }
+    map.off('moveend', this._updateCanvasSize, this);
+    map.off('zoomend', this._updateCanvasSize, this);
+    return this;
+  }
+  _initRainDrops() {
+    this._rainDrops = [];
+    for (let i = 0; i < 150; i++) {
+      this._rainDrops.push({
+        x: Math.random() * 2000,
+        y: Math.random() * 2000,
+        speed: 8 + Math.random() * 12,
+        length: 10 + Math.random() * 20,
+        opacity: 0.2 + Math.random() * 0.4
+      });
+    }
+  }
+  _updateCanvasSize() {
+    const map = this._map;
+    if (!map || !this._canvas) return;
+    const size = map.getSize();
+    const topLeft = map.containerPointToLayerPoint([0, 0]);
+    L.DomUtil.setPosition(this._canvas, topLeft);
+    this._canvas.width = size.x;
+    this._canvas.height = size.y;
+  }
+  _animate = () => {
+    if (!this._isAnimating || !this._ctx || !this._canvas || !this._map) return;
+    const ctx = this._ctx;
+    const canvas = this._canvas;
+    const map = this._map;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // Draw rain drops clipped to polygons
+    ctx.save();
+    // Create clipping path from polygons
+    ctx.beginPath();
+    for (const polygon of this._polygons) {
+      const latLngs = polygon.getLatLngs() as L.LatLng[][];
+      if (latLngs[0]) {
+        for (const ring of latLngs) {
+          const firstPoint = map.latLngToContainerPoint(ring[0]);
+          ctx.moveTo(firstPoint.x, firstPoint.y);
+          for (let i = 1; i < ring.length; i++) {
+            const point = map.latLngToContainerPoint(ring[i]);
+            ctx.lineTo(point.x, point.y);
+          }
+          ctx.closePath();
+        }
+      }
+    }
+    ctx.clip();
+    // Draw rain drops
+    for (const drop of this._rainDrops) {
+      const screenPoint = map.containerPointToLayerPoint([drop.x % canvas.width, drop.y % canvas.height]);
+      ctx.beginPath();
+      ctx.strokeStyle = `rgba(100, 180, 255, ${drop.opacity * 0.6})`;
+      ctx.lineWidth = 1.5;
+      ctx.moveTo(screenPoint.x, screenPoint.y);
+      ctx.lineTo(screenPoint.x, screenPoint.y + drop.length);
+      ctx.stroke();
+      // Update position
+      drop.y += drop.speed;
+      if (drop.y > canvas.height + drop.length) {
+        drop.y = -drop.length;
+        drop.x = Math.random() * canvas.width;
+      }
+    }
+    ctx.restore();
+    this._animationFrame = requestAnimationFrame(this._animate);
+  }
+}
+// Custom canvas layer for flood wave animation inside polygons
+class FloodWaveCanvasLayer extends L.Layer {
+  private _canvas: HTMLCanvasElement | null = null;
+  private _ctx: CanvasRenderingContext2D | null = null;
+  private _polygons: L.Polygon[] = [];
+  private _animationFrame: number = 0;
+  private _isAnimating: boolean = false;
+  private _time: number = 0;
+  constructor(polygons: L.Polygon[]) {
+    super();
+    this._polygons = polygons;
+  }
+  onAdd(map: L.Map) {
+    this._canvas = L.DomUtil.create('canvas', 'leaflet-flood-layer');
+    this._canvas.style.position = 'absolute';
+    this._canvas.style.pointerEvents = 'none';
+    map.getPanes().overlayPane.appendChild(this._canvas);
+    this._ctx = this._canvas.getContext('2d');
+    this._isAnimating = true;
+    this._animate();
+    map.on('moveend', this._updateCanvasSize, this);
+    map.on('zoomend', this._updateCanvasSize, this);
+    this._updateCanvasSize();
+    return this;
+  }
+  onRemove(map: L.Map) {
+    this._isAnimating = false;
+    if (this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame);
+    }
+    if (this._canvas && this._canvas.parentNode) {
+      this._canvas.parentNode.removeChild(this._canvas);
+    }
+    map.off('moveend', this._updateCanvasSize, this);
+    map.off('zoomend', this._updateCanvasSize, this);
+    return this;
+  }
+  _updateCanvasSize() {
+    const map = this._map;
+    if (!map || !this._canvas) return;
+    const size = map.getSize();
+    const topLeft = map.containerPointToLayerPoint([0, 0]);
+    L.DomUtil.setPosition(this._canvas, topLeft);
+    this._canvas.width = size.x;
+    this._canvas.height = size.y;
+  }
+  _animate = () => {
+    if (!this._isAnimating || !this._ctx || !this._canvas || !this._map) return;
+    const ctx = this._ctx;
+    const canvas = this._canvas;
+    const map = this._map;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    this._time += 0.03;
+    ctx.save();
+    // Create clipping path from polygons
+    ctx.beginPath();
+    for (const polygon of this._polygons) {
+      const latLngs = polygon.getLatLngs() as L.LatLng[][];
+      if (latLngs[0]) {
+        for (const ring of latLngs) {
+          const firstPoint = map.latLngToContainerPoint(ring[0]);
+          ctx.moveTo(firstPoint.x, firstPoint.y);
+          for (let i = 1; i < ring.length; i++) {
+            const point = map.latLngToContainerPoint(ring[i]);
+            ctx.lineTo(point.x, point.y);
+          }
+          ctx.closePath();
+        }
+      }
+    }
+    ctx.clip();
+    // Draw flood wave layers with low opacity
+    const waveCount = 5;
+    for (let w = 0; w < waveCount; w++) {
+      const waveOffset = (this._time + w * 0.4) % 1;
+      const baseOpacity = 0.08 - w * 0.012;
+      ctx.beginPath();
+      // Create wave pattern across the clipped area
+      for (let x = 0; x < canvas.width; x += 3) {
+        const waveY = canvas.height * 0.3 + Math.sin((x * 0.02) + this._time * 2 + w) * 15 + waveOffset * canvas.height * 0.5;
+        if (x === 0) {
+          ctx.moveTo(x, waveY);
+        } else {
+          ctx.lineTo(x, waveY);
+        }
+      }
+      // Complete the wave shape
+      ctx.lineTo(canvas.width, canvas.height);
+      ctx.lineTo(0, canvas.height);
+      ctx.closePath();
+      // Gradient fill for water effect
+      const gradient = ctx.createLinearGradient(0, canvas.height * 0.3, 0, canvas.height);
+      gradient.addColorStop(0, `rgba(34, 197, 94, ${baseOpacity})`);
+      gradient.addColorStop(0.5, `rgba(14, 165, 233, ${baseOpacity * 0.8})`);
+      gradient.addColorStop(1, `rgba(59, 130, 246, ${baseOpacity * 0.5})`);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+    }
+    // Add ripple circles
+    for (let i = 0; i < 8; i++) {
+      const rippleX = (Math.sin(this._time * 0.5 + i * 1.3) + 1) * canvas.width * 0.5;
+      const rippleY = (Math.cos(this._time * 0.3 + i * 1.7) + 1) * canvas.height * 0.5;
+      const rippleRadius = 20 + Math.sin(this._time * 2 + i) * 10;
+      const rippleOpacity = 0.05 + Math.sin(this._time * 3 + i) * 0.03;
+      ctx.beginPath();
+      ctx.arc(rippleX, rippleY, rippleRadius, 0, Math.PI * 2);
+      ctx.strokeStyle = `rgba(96, 165, 250, ${rippleOpacity})`;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+    }
+    ctx.restore();
+    this._animationFrame = requestAnimationFrame(this._animate);
+  }
+}
+// Component to handle map animations
+function MapAnimator({ isPlaying, timeStep }: { isPlaying: boolean; timeStep: number }) {
+  const map = useMap();
+  useEffect(() => {
+    if (isPlaying) {
+      // Simulate flood spread animation
+    }
+  }, [isPlaying, timeStep, map]);
+  return null;
+}
+// Component to fit bounds to Maharashtra
+function MaharashtraBounds() {
+  const map = useMap();
+  useEffect(() => {
+    map.fitBounds([
+      [15.6, 72.8],
+      [22.0, 80.0]
+    ], { padding: [20, 20] });
+  }, [map]);
+  return null;
+}
+// Component to manage live animation layers (rain + flood)
+function LiveAnimationManager({
+  isActive,
+  polygons
+}: {
+  isActive: boolean;
+  polygons: L.Polygon[];
+}) {
+  const map = useMap();
+  const rainLayerRef = useRef<RainCanvasLayer | null>(null);
+  const floodLayerRef = useRef<FloodWaveCanvasLayer | null>(null);
+  useEffect(() => {
+    if (isActive && polygons.length > 0) {
+      // Add rain animation layer
+      if (!rainLayerRef.current) {
+        rainLayerRef.current = new RainCanvasLayer(polygons);
+        rainLayerRef.current.addTo(map);
+      }
+      // Add flood wave animation layer
+      if (!floodLayerRef.current) {
+        floodLayerRef.current = new FloodWaveCanvasLayer(polygons);
+        floodLayerRef.current.addTo(map);
+      }
+    } else {
+      // Remove animation layers when not active
+      if (rainLayerRef.current) {
+        map.removeLayer(rainLayerRef.current);
+        rainLayerRef.current = null;
+      }
+      if (floodLayerRef.current) {
+        map.removeLayer(floodLayerRef.current);
+        floodLayerRef.current = null;
+      }
+    }
+    return () => {
+      if (rainLayerRef.current) {
+        map.removeLayer(rainLayerRef.current);
+        rainLayerRef.current = null;
+      }
+      if (floodLayerRef.current) {
+        map.removeLayer(floodLayerRef.current);
+        floodLayerRef.current = null;
+      }
+    };
+  }, [isActive, polygons, map]);
+  return null;
+}
+export function GisMap() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [timeStep, setTimeStep] = useState(0);
+  const [activeLayer, setActiveLayer] = useState<'current' | 'prediction'>('prediction');
+  const [showMobileControls, setShowMobileControls] = useState(false);
+  const [districtBoundaries, setDistrictBoundaries] = useState<DistrictBoundary[]>([]);
+  const [loadingBoundaries, setLoadingBoundaries] = useState(false);
+  const [selectedDam, setSelectedDam] = useState<number | null>(null);
+  const [showDistricts, setShowDistricts] = useState(true);
+  const [liveTick, setLiveTick] = useState(0);
+  const districtPolygonsRef = useRef<L.Polygon[]>([]);
+  const [polygonsReady, setPolygonsReady] = useState(false);
+  useEffect(() => {
+    const loadCachedBoundaries = async () => {
+      setLoadingBoundaries(true);
+      try {
+        const res = await fetch('/data/maharashtra-districts.geojson', {
+          headers: { 'Accept': 'application/json' }
+        });
+        const geo = await res.json();
+        const features: any[] = Array.isArray(geo?.features) ? geo.features : [];
+        const boundaries: DistrictBoundary[] = features.map((feature: any, idx: number) => {
+          const district = String(feature?.properties?.name || feature?.properties?.NAME || feature?.properties?.district || `District ${idx + 1}`);
+          const risk = floodZones.some(z => z.area.toLowerCase().includes(district.toLowerCase()))
+            ? 'High'
+            : ['Satara', 'Thane', 'Raigad', 'Ratnagiri'].some((d) => district.toLowerCase().includes(d.toLowerCase()))
+              ? 'Medium'
+              : 'Low';
+          return { name: district, geojson: feature, risk };
+        });
+        setDistrictBoundaries(boundaries);
+      } catch (e) {
+        console.error('Failed to load cached district boundaries:', e);
+        setDistrictBoundaries([]);
+      } finally {
+        setLoadingBoundaries(false);
+      }
+    };
+    loadCachedBoundaries();
+  }, []);
+  // Create polygon references for animation clipping
+  const onEachDistrictFeature = useCallback((feature: any, layer: L.Layer) => {
+    if (layer instanceof L.Polygon) {
+      districtPolygonsRef.current.push(layer);
+      setPolygonsReady(true);
+    }
+  }, []);
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (activeLayer === 'current') {
+      interval = setInterval(() => setLiveTick((t) => t + 1), 900);
+    }
+    return () => clearInterval(interval);
+  }, [activeLayer]);
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (isPlaying) {
+      interval = setInterval(() => {
+        setTimeStep((prev) => (prev >= 48 ? 0 : prev + 1));
+      }, 800);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying]);
+  const togglePlay = useCallback(() => setIsPlaying(!isPlaying), [isPlaying]);
+  const getDamIcon = (status: string) => {
+    switch (status) {
+      case 'Critical': return criticalMarkerIcon;
+      case 'Warning': return warningMarkerIcon;
+      default: return customMarkerIcon;
+    }
+  };
+  const districtStyle = (risk: string) => {
+    const colors: Record<string, { color: string; fillColor: string; fillOpacity: number }> = {
+      High: { color: '#dc2626', fillColor: '#dc2626', fillOpacity: 0.15 },
+      Medium: { color: '#ea580c', fillColor: '#ea580c', fillOpacity: 0.1 },
+      Low: { color: '#ca8a04', fillColor: '#ca8a04', fillOpacity: 0.05 },
+      None: { color: '#64748b', fillColor: '#64748b', fillOpacity: 0.02 }
+    };
+    return colors[risk] || colors.None;
+  };
+  const liveCells: LiveCell[] = [
+    { id: 'konkan-rain', name: 'Konkan Heavy Rain', lat: 17.2, lng: 73.3, intensity: 0.9, type: 'rain' },
+    { id: 'pune-rain', name: 'Pune Thunderstorm', lat: 18.52, lng: 73.86, intensity: 0.6, type: 'rain' },
+    { id: 'kolhapur-flood', name: 'Kolhapur Flood Pulse', lat: 16.70, lng: 74.24, intensity: 0.85, type: 'flood' },
+    { id: 'sangli-flood', name: 'Sangli River Rise', lat: 16.85, lng: 74.58, intensity: 0.55, type: 'flood' },
+  ];
+  return (
+    <div className="flex flex-col h-full w-full min-h-0">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 px-4 py-3 bg-white border-b border-slate-200 shrink-0">
+        <div>
+          <h1 className="text-lg lg:text-2xl font-bold tracking-tight text-slate-900 flex items-center gap-2">
+            <Droplets className="h-5 w-5 lg:h-6 lg:w-6 text-blue-600" />
+            Flood Prediction GIS
+          </h1>
+          <p className="text-xs lg:text-sm text-slate-500">Pur Sadrushya Paristhiti Analysis & Live Monitoring</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="flex bg-slate-100 rounded-lg p-1">
+            <Button
+              variant={activeLayer === 'current' ? 'default' : 'ghost'}
+              onClick={() => setActiveLayer('current')}
+              size="sm"
+              className="text-xs h-7 lg:h-8"
+            >
+              Live Data
+            </Button>
+            <Button
+              variant={activeLayer === 'prediction' ? 'default' : 'ghost'}
+              onClick={() => setActiveLayer('prediction')}
+              size="sm"
+              className="text-xs h-7 lg:h-8"
+            >
+              +48h Prediction
+            </Button>
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            className="lg:hidden h-8 w-8"
+            onClick={() => setShowMobileControls(true)}
+          >
+            <Menu className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col lg:grid lg:grid-cols-4 min-h-0">
+        {/* Map */}
+        <Card className="lg:col-span-3 relative overflow-hidden border-0 rounded-none lg:rounded-lg lg:border lg:m-2">
+          {/* Time Control Overlay */}
+          <div className="absolute top-3 left-3 right-3 lg:right-auto lg:min-w-[200px] z-[1000] bg-white/95 backdrop-blur-sm p-2 rounded-lg shadow-md flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-slate-700">
+                +{timeStep}h Forecast
+              </span>
+              {isPlaying && (
+                <span className="text-xs text-slate-500 animate-pulse">Live</span>
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <Button size="icon" variant="ghost" onClick={togglePlay} className="h-8 w-8">
+                {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+          {/* Legend Overlay */}
+          <div className="absolute bottom-3 left-3 z-[1000] bg-white/95 backdrop-blur-sm p-2 rounded-lg shadow-md hidden sm:block">
+            <div className="text-xs font-medium text-slate-700 mb-1">Risk Zones</div>
+            <div className="space-y-1">
+              <div className="flex items-center gap-2 text-xs">
+                <span className="w-3 h-3 rounded-full bg-red-500/60"></span>
+                <span>High Risk</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <span className="w-3 h-3 rounded-full bg-orange-500/40"></span>
+                <span>Medium Risk</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <span className="w-3 h-3 rounded-full bg-yellow-500/20"></span>
+                <span>Low Risk</span>
+              </div>
+            </div>
+          </div>
+          <MapContainer
+            center={[18.5204, 73.8567]}
+            zoom={7}
+            className="h-full w-full"
+            style={{ zIndex: 0 }}
+          >
+            <TileLayer
+              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <MaharashtraBounds />
+            <MapAnimator isPlaying={isPlaying} timeStep={timeStep} />
+            {/* Live Animation Layers - Rain drops and flood waves inside district boundaries */}
+            <LiveAnimationManager
+              isActive={activeLayer === 'current' && showDistricts}
+              polygons={districtPolygonsRef.current}
+            />
+            {/* District Boundaries */}
+            {showDistricts && districtBoundaries.map((district) => (
+              <GeoJSON
+                key={district.name}
+                data={district.geojson}
+                style={() => districtStyle(district.risk)}
+                onEachFeature={onEachDistrictFeature}
+              >
+                <Popup>
+                  <div className="p-1">
+                    <h3 className="font-bold text-sm">{district.name} District</h3>
+                    <p className="text-xs mt-1">
+                      Flood Risk: <span className={cn(
+                        "font-semibold",
+                        district.risk === 'High' ? "text-red-600" :
+                        district.risk === 'Medium' ? "text-orange-600" :
+                        "text-yellow-600"
+                      )}>{district.risk}</span>
+                    </p>
+                  </div>
+                </Popup>
+              </GeoJSON>
+            ))}
+            {/* Dams */}
+            {dams.map(dam => (
+              <Marker
+                key={dam.id}
+                position={[dam.lat, dam.lng]}
+                icon={getDamIcon(dam.status)}
+                eventHandlers={{
+                  click: () => setSelectedDam(dam.id)
+                }}
+              >
+                <Popup>
+                  <div className="p-2 min-w-[200px]">
+                    <div className="flex items-center justify-between mb-2">
+                      <h3 className="font-bold text-sm">{dam.name}</h3>
+                      <Badge variant={dam.status === 'Critical' ? 'destructive' : dam.status === 'Warning' ? 'outline' : 'secondary'} className={cn(
+                        "text-xs",
+                        dam.status === 'Warning' ? 'border-orange-500 text-orange-700 bg-orange-50' : ''
+                      )}>
+                        {dam.status}
+                      </Badge>
+                    </div>
+                    <div className="space-y-1.5 text-xs">
+                      <div className="flex justify-between">
+                        <span className="text-slate-500">District:</span>
+                        <span className="font-medium">{dam.district}</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-slate-500">Storage:</span>
+                        <span className={cn(
+                          "font-medium",
+                          dam.level > 90 ? "text-red-600" : dam.level > 75 ? "text-orange-600" : "text-green-600"
+                        )}>{dam.level}% ({dam.capacity})</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-slate-500">Inflow:</span>
+                        <span className="font-medium text-blue-600">{dam.inflow}</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-slate-500">Outflow:</span>
+                        <span className="font-medium text-cyan-600">{dam.outflow}</span>
+                      </div>
+                    </div>
+                  </div>
+                </Popup>
+              </Marker>
+            ))}
+            {/* Flood Risk Zones */}
+            {activeLayer === 'prediction' && floodZones.map(zone => {
+              const currentRadius = isPlaying ? zone.radius * (1 + (timeStep * 0.015)) : zone.radius;
+              const opacity = zone.risk === 'High' ? 0.5 : zone.risk === 'Medium' ? 0.35 : 0.2;
+              const color = zone.risk === 'High' ? '#dc2626' : zone.risk === 'Medium' ? '#ea580c' : '#ca8a04';
+              return (
+                <Circle
+                  key={zone.id}
+                  center={[zone.lat, zone.lng]}
+                  radius={currentRadius}
+                  pathOptions={{
+                    color: color,
+                    fillColor: color,
+                    fillOpacity: isPlaying ? opacity * (0.8 + Math.sin(timeStep * 0.2) * 0.2) : opacity,
+                    weight: 2
+                  }}
+                >
+                  <Popup>
+                    <div className="p-2 min-w-[180px]">
+                      <div className="flex items-center gap-2 mb-2">
+                        <AlertTriangle className={cn(
+                          "h-4 w-4",
+                          zone.risk === 'High' ? "text-red-500" :
+                          zone.risk === 'Medium' ? "text-orange-500" :
+                          "text-yellow-500"
+                        )} />
+                        <h3 className="font-bold text-sm">{zone.area}</h3>
+                      </div>
+                      <div className="space-y-1 text-xs">
+                        <p><span className="text-slate-500">Risk Level:</span> <span className="font-semibold">{zone.risk}</span></p>
+                        <p><span className="text-slate-500">River:</span> <span className="font-medium">{zone.river}</span></p>
+                        <p><span className="text-slate-500">Population at Risk:</span> <span className="font-medium">{zone.affectedPopulation}</span></p>
+                        <p><span className="text-slate-500">Impact Radius:</span> <span className="font-medium">{Math.round(currentRadius / 1000)} km</span></p>
+                      </div>
+                    </div>
+                  </Popup>
+                </Circle>
+              );
+            })}
+            {/* Live layer: Rainfall/Flood indicator circles with pulsing opacity */}
+            {activeLayer === 'current' && liveCells.map((cell) => {
+              const phase = (liveTick % 20) / 20;
+              const pulse = 0.65 + Math.sin((phase * 2 * Math.PI) + (cell.lat + cell.lng)) * 0.25;
+              const intensity = Math.max(0.15, Math.min(1, cell.intensity * pulse));
+              const baseRadius = cell.type === 'rain' ? 12000 : 15000;
+              const radius = baseRadius * (0.75 + phase * 0.5);
+              const color = cell.type === 'rain' ? '#3b82f6' : '#06b6d4';
+              const fill = cell.type === 'rain' ? '#60a5fa' : '#22d3ee';
+              return (
+                <Circle
+                  key={cell.id}
+                  center={[cell.lat, cell.lng]}
+                  radius={radius}
+                  pathOptions={{
+                    color,
+                    fillColor: fill,
+                    fillOpacity: 0.06 + intensity * 0.12,
+                    weight: 1,
+                    dashArray: cell.type === 'rain' ? '4 8' : undefined,
+                  }}
+                >
+                  <Popup>
+                    <div className="p-2 min-w-[180px]">
+                      <div className="flex items-center justify-between">
+                        <h3 className="font-bold text-sm">{cell.name}</h3>
+                        <Badge className={cn(
+                          'text-xs',
+                          cell.type === 'rain' ? 'bg-blue-600' : 'bg-cyan-600'
+                        )}>
+                          {cell.type === 'rain' ? 'Rain' : 'Flood'}
+                        </Badge>
+                      </div>
+                      <p className="text-xs text-slate-600 mt-1">
+                        Intensity: <span className="font-semibold">{Math.round(intensity * 100)}%</span>
+                      </p>
+                      <p className="text-[11px] text-slate-500 mt-1">
+                        Animation visible inside district boundaries.
+                      </p>
+                    </div>
+                  </Popup>
+                </Circle>
+              );
+            })}
+          </MapContainer>
+        </Card>
+        {/* Sidebar - Desktop */}
+        <div className="hidden lg:block space-y-3 p-2 overflow-y-auto">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm flex items-center">
+                <AlertTriangle className="h-4 w-4 mr-2 text-red-500" />
+                Critical Alert Areas
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="p-3 bg-red-50 border border-red-100 rounded-md">
+                <div className="flex items-center justify-between mb-1">
+                  <h4 className="text-sm font-semibold text-red-900">Kolhapur City</h4>
+                  <Badge variant="destructive" className="text-xs">Critical</Badge>
+                </div>
+                <p className="text-xs text-red-700">Panchaganga river flowing above danger mark. Evacuation recommended for low-lying areas.</p>
+                <p className="text-xs text-red-600 mt-1 font-medium">500,000+ people at risk</p>
+              </div>
+              <div className="p-3 bg-orange-50 border border-orange-100 rounded-md">
+                <div className="flex items-center justify-between mb-1">
+                  <h4 className="text-sm font-semibold text-orange-900">Sangli District</h4>
+                  <Badge variant="outline" className="text-xs border-orange-500 text-orange-700">High</Badge>
+                </div>
+                <p className="text-xs text-orange-700">Water level rising steadily. Keep emergency response teams on standby.</p>
+              </div>
+              <div className="p-3 bg-yellow-50 border border-yellow-100 rounded-md">
+                <h4 className="text-sm font-semibold text-yellow-900">Satara Region</h4>
+                <p className="text-xs text-yellow-700 mt-1">Koyna dam at 92% capacity. Monitor discharge rates.</p>
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm flex items-center">
+                <Layers className="h-4 w-4 mr-2 text-blue-500" />
+                Dam Status Overview
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {dams.slice(0, 5).map(dam => (
+                <div
+                  key={dam.id}
+                  className={cn(
+                    "flex justify-between items-center text-sm p-2 rounded-md cursor-pointer transition-colors",
+                    selectedDam === dam.id ? "bg-slate-100" : "hover:bg-slate-50"
+                  )}
+                  onClick={() => setSelectedDam(dam.id)}
+                >
+                  <div>
+                    <span className="font-medium text-slate-700 block">{dam.name}</span>
+                    <span className="text-xs text-slate-500">{dam.district}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-slate-500">{dam.level}%</span>
+                    <Badge
+                      variant={dam.status === 'Critical' ? 'destructive' : dam.status === 'Warning' ? 'outline' : 'secondary'}
+                      className={cn(
+                        "text-xs",
+                        dam.status === 'Warning' ? 'border-orange-500 text-orange-700 bg-orange-50' : ''
+                      )}
+                    >
+                      {dam.status}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm">District Boundaries</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-slate-600">Show district boundaries</span>
+                <Button
+                  variant={showDistricts ? "default" : "outline"}
+                  size="sm"
+                  className="h-7 text-xs"
+                  onClick={() => setShowDistricts(!showDistricts)}
+                >
+                  {showDistricts ? 'On' : 'Off'}
+                </Button>
+              </div>
+              {loadingBoundaries && (
+                <p className="text-xs text-slate-500 mt-2">Loading cached boundaries...</p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      {/* Mobile Controls Overlay */}
+      {showMobileControls && (
+        <div className="fixed inset-0 z-[1001] lg:hidden">
+          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowMobileControls(false)} />
+          <div className="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl p-4 max-h-[70vh] overflow-y-auto animate-in slide-in-from-bottom duration-200">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold">Controls & Alerts</h2>
+              <Button variant="ghost" size="icon" onClick={() => setShowMobileControls(false)}>
+                <X className="h-5 w-5" />
+              </Button>
+            </div>
+            {/* Mobile: Critical Areas */}
+            <div className="space-y-3 mb-4">
+              <h3 className="text-sm font-semibold flex items-center">
+                <AlertTriangle className="h-4 w-4 mr-2 text-red-500" />
+                Critical Alert Areas
+              </h3>
+              <div className="p-3 bg-red-50 border border-red-100 rounded-md">
+                <div className="flex items-center justify-between mb-1">
+                  <h4 className="text-sm font-semibold text-red-900">Kolhapur City</h4>
+                  <Badge variant="destructive" className="text-xs">Critical</Badge>
+                </div>
+                <p className="text-xs text-red-700">Panchaganga river above danger mark. Evacuation recommended.</p>
+              </div>
+              <div className="p-3 bg-orange-50 border border-orange-100 rounded-md">
+                <div className="flex items-center justify-between mb-1">
+                  <h4 className="text-sm font-semibold text-orange-900">Sangli District</h4>
+                  <Badge variant="outline" className="text-xs border-orange-500 text-orange-700">High</Badge>
+                </div>
+                <p className="text-xs text-orange-700">Water level rising steadily. Emergency teams on standby.</p>
+              </div>
+            </div>
+            {/* Mobile: Dam Status */}
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold flex items-center">
+                <Layers className="h-4 w-4 mr-2 text-blue-500" />
+                Dam Status
+              </h3>
+              {dams.slice(0, 5).map(dam => (
+                <div key={dam.id} className="flex justify-between items-center text-sm p-2 bg-slate-50 rounded-md">
+                  <span className="font-medium text-slate-700">{dam.name}</span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-slate-500">{dam.level}%</span>
+                    <Badge
+                      variant={dam.status === 'Critical' ? 'destructive' : dam.status === 'Warning' ? 'outline' : 'secondary'}
+                      className={cn(
+                        "text-xs",
+                        dam.status === 'Warning' ? 'border-orange-500 text-orange-700 bg-orange-50' : ''
+                      )}
+                    >
+                      {dam.status}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/GrFinder.tsx ADDED Viewed

	@@ -0,0 +1,355 @@

+import React, { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent, CardHeader, CardTitle } from '@/src/components/ui/Card';
+import { Input } from '@/src/components/ui/Input';
+import { Button } from '@/src/components/ui/Button';
+import { Badge } from '@/src/components/ui/Badge';
+import {
+  Search, Filter, FileText, Calendar, Building, ChevronRight,
+  MessageSquare, Download, Eye, Clock, TrendingUp, Star
+} from 'lucide-react';
+import { cn } from '@/src/utils/cn';
+import { mockGRs, grCategories, grYears, grDepartments, GRDocument } from '@/src/data/mockGRs';
+export function GrFinder() {
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [selectedYear, setSelectedYear] = useState<string>('All');
+  const [selectedDepartment, setSelectedDepartment] = useState<string>('All');
+  const [showFilters, setShowFilters] = useState(false);
+  const filteredGRs = useMemo(() => {
+    return mockGRs.filter(gr => {
+      const matchesSearch = searchQuery === '' ||
+        gr.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        gr.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        gr.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase()));
+      const matchesCategory = selectedCategory === 'All' || gr.category === selectedCategory;
+      const matchesYear = selectedYear === 'All' || gr.year.toString() === selectedYear;
+      const matchesDepartment = selectedDepartment === 'All' || gr.department === selectedDepartment;
+      return matchesSearch && matchesCategory && matchesYear && matchesDepartment;
+    });
+  }, [searchQuery, selectedCategory, selectedYear, selectedDepartment]);
+  const popularGRs = mockGRs.filter(gr => gr.popularQuery);
+  const handleAskAI = (gr: GRDocument) => {
+    navigate(`/ai-assistant?q=${encodeURIComponent(`Explain ${gr.id}: ${gr.title}`)}`);
+  };
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'Active': return 'bg-green-100 text-green-700 border-green-200';
+      case 'Amended': return 'bg-yellow-100 text-yellow-700 border-yellow-200';
+      case 'Superseded': return 'bg-red-100 text-red-700 border-red-200';
+      default: return 'bg-slate-100 text-slate-700 border-slate-200';
+    }
+  };
+  const getCategoryColor = (category: string) => {
+    const colors: Record<string, string> = {
+      'Flood Management': 'bg-blue-100 text-blue-700',
+      'Dam Safety': 'bg-red-100 text-red-700',
+      'Irrigation': 'bg-cyan-100 text-cyan-700',
+      'Compensation': 'bg-emerald-100 text-emerald-700',
+      'Water Policy': 'bg-purple-100 text-purple-700',
+      'Administrative': 'bg-orange-100 text-orange-700',
+    };
+    return colors[category] || 'bg-slate-100 text-slate-700';
+  };
+  return (
+    <div className="space-y-6 max-w-6xl mx-auto">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900">GR Finder</h1>
+          <p className="text-slate-500">Search Government Resolutions, Acts, and Circulars</p>
+        </div>
+        <Button onClick={() => navigate('/ai-assistant')} className="bg-indigo-600 hover:bg-indigo-700 text-white">
+          <MessageSquare className="mr-2 h-4 w-4" />
+          Ask GR Helper
+        </Button>
+      </div>
+      {/* Search Card */}
+      <Card className="border-none shadow-md bg-white/50 backdrop-blur-sm">
+        <CardContent className="p-4 sm:p-6">
+          <div className="flex flex-col sm:flex-row gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-3 h-5 w-5 text-slate-400" />
+              <Input
+                type="text"
+                placeholder="Search by GR number, title, or keywords..."
+                className="pl-10 h-12 text-base bg-white"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <Button
+              variant="outline"
+              className="h-12 px-6 bg-white shrink-0"
+              onClick={() => setShowFilters(!showFilters)}
+            >
+              <Filter className="mr-2 h-4 w-4" />
+              Filters
+              {(selectedCategory !== 'All' || selectedYear !== 'All' || selectedDepartment !== 'All') && (
+                <span className="ml-2 bg-indigo-100 text-indigo-700 rounded-full px-2 py-0.5 text-xs">
+                  Active
+                </span>
+              )}
+            </Button>
+          </div>
+          {/* Expanded Filters */}
+          {showFilters && (
+            <div className="mt-4 pt-4 border-t border-slate-200 grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <div>
+                <label className="text-xs font-medium text-slate-500 mb-1 block">Category</label>
+                <select
+                  className="w-full h-10 rounded-md border border-slate-200 bg-white px-3 text-sm"
+                  value={selectedCategory}
+                  onChange={(e) => setSelectedCategory(e.target.value)}
+                >
+                  <option value="All">All Categories</option>
+                  {grCategories.map(cat => (
+                    <option key={cat} value={cat}>{cat}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-slate-500 mb-1 block">Year</label>
+                <select
+                  className="w-full h-10 rounded-md border border-slate-200 bg-white px-3 text-sm"
+                  value={selectedYear}
+                  onChange={(e) => setSelectedYear(e.target.value)}
+                >
+                  <option value="All">All Years</option>
+                  {grYears.map(year => (
+                    <option key={year} value={year}>{year}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="text-xs font-medium text-slate-500 mb-1 block">Department</label>
+                <select
+                  className="w-full h-10 rounded-md border border-slate-200 bg-white px-3 text-sm"
+                  value={selectedDepartment}
+                  onChange={(e) => setSelectedDepartment(e.target.value)}
+                >
+                  <option value="All">All Departments</option>
+                  {grDepartments.map(dept => (
+                    <option key={dept} value={dept}>{dept}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          )}
+          {/* Quick Category Filters */}
+          <div className="flex flex-wrap gap-2 mt-4">
+            <Badge
+              variant={selectedCategory === 'All' ? 'default' : 'secondary'}
+              className="cursor-pointer px-3 py-1 text-sm"
+              onClick={() => setSelectedCategory('All')}
+            >
+              All
+            </Badge>
+            {grCategories.slice(0, 4).map(cat => (
+              <Badge
+                key={cat}
+                variant={selectedCategory === cat ? 'default' : 'secondary'}
+                className="cursor-pointer px-3 py-1 text-sm"
+                onClick={() => setSelectedCategory(cat)}
+              >
+                {cat}
+              </Badge>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+      {/* Popular GRs Section (shown when no search) */}
+      {searchQuery === '' && selectedCategory === 'All' && (
+        <Card className="border-none shadow-md bg-gradient-to-r from-indigo-50 to-blue-50">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base flex items-center gap-2">
+              <Star className="h-4 w-4 text-yellow-500" />
+              Popular GRs
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {popularGRs.slice(0, 4).map(gr => (
+                <div
+                  key={gr.id}
+                  className="bg-white rounded-lg p-3 border border-slate-200 hover:shadow-md transition-shadow cursor-pointer"
+                  onClick={() => {
+                    setSearchQuery(gr.id);
+                  }}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1 min-w-0">
+                      <p className="text-xs font-mono text-indigo-600">{gr.id}</p>
+                      <p className="text-sm font-medium text-slate-900 truncate">{gr.title}</p>
+                    </div>
+                    <Badge className={cn("text-[10px] shrink-0", getCategoryColor(gr.category))}>
+                      {gr.category}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+      {/* Results Count */}
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-slate-500">
+          Found <span className="font-semibold text-slate-700">{filteredGRs.length}</span> Government Resolutions
+        </p>
+        {(selectedCategory !== 'All' || selectedYear !== 'All' || selectedDepartment !== 'All' || searchQuery) && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-xs"
+            onClick={() => {
+              setSearchQuery('');
+              setSelectedCategory('All');
+              setSelectedYear('All');
+              setSelectedDepartment('All');
+            }}
+          >
+            Clear filters
+          </Button>
+        )}
+      </div>
+      {/* Results List */}
+      <div className="space-y-4">
+        {filteredGRs.map((gr) => (
+          <Card key={gr.id} className="overflow-hidden transition-all hover:shadow-md border-slate-200">
+            <CardContent className="p-0">
+              <div className="flex flex-col sm:flex-row">
+                <div className="p-6 flex-1">
+                  <div className="flex items-start justify-between gap-2 mb-2">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Badge className={cn("text-[10px]", getStatusColor(gr.status))}>
+                        {gr.status}
+                      </Badge>
+                      <Badge className={cn("text-[10px]", getCategoryColor(gr.category))}>
+                        {gr.category}
+                      </Badge>
+                      <span className="text-xs font-mono text-slate-600">{gr.id}</span>
+                    </div>
+                    {gr.popularQuery && (
+                      <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
+                    )}
+                  </div>
+                  <h3 className="text-lg font-semibold text-slate-900 mb-2 leading-tight">
+                    {gr.title}
+                  </h3>
+                  <p className="text-sm text-slate-600 mb-4 line-clamp-2">
+                    {gr.summary}
+                  </p>
+                  <div className="flex flex-wrap items-center gap-4 text-xs text-slate-500">
+                    <div className="flex items-center">
+                      <Building className="mr-1 h-3.5 w-3.5" />
+                      {gr.department}
+                    </div>
+                    <div className="flex items-center">
+                      <Calendar className="mr-1 h-3.5 w-3.5" />
+                      {gr.date}
+                    </div>
+                    {gr.relatedGRs && gr.relatedGRs.length > 0 && (
+                      <div className="flex items-center">
+                        <FileText className="mr-1 h-3.5 w-3.5" />
+                        {gr.relatedGRs.length} Related
+                      </div>
+                    )}
+                  </div>
+                  {/* Keywords */}
+                  <div className="flex flex-wrap gap-1 mt-3">
+                    {gr.keywords.slice(0, 4).map(keyword => (
+                      <span
+                        key={keyword}
+                        className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded"
+                      >
+                        {keyword}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <div className="bg-slate-50 border-t sm:border-t-0 sm:border-l border-slate-100 p-4 sm:p-6 flex sm:flex-col items-center justify-center gap-3 sm:w-48">
+                  <Button variant="outline" size="sm" className="w-full justify-start bg-white">
+                    <Eye className="mr-2 h-4 w-4" /> View
+                  </Button>
+                  <Button variant="outline" size="sm" className="w-full justify-start bg-white">
+                    <Download className="mr-2 h-4 w-4" /> Download
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    className="w-full justify-start bg-indigo-50 text-indigo-700 hover:bg-indigo-100 border-indigo-100"
+                    onClick={() => handleAskAI(gr)}
+                  >
+                    <MessageSquare className="mr-2 h-4 w-4" /> Ask AI
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+        {filteredGRs.length === 0 && (
+          <div className="text-center py-12">
+            <FileText className="mx-auto h-12 w-12 text-slate-300 mb-4" />
+            <h3 className="text-lg font-medium text-slate-900">No GRs found</h3>
+            <p className="text-slate-500">Try adjusting your search or filters.</p>
+            <Button
+              variant="outline"
+              className="mt-4"
+              onClick={() => {
+                setSearchQuery('');
+                setSelectedCategory('All');
+                setSelectedYear('All');
+                setSelectedDepartment('All');
+              }}
+            >
+              Clear all filters
+            </Button>
+          </div>
+        )}
+      </div>
+      {/* Help Section */}
+      <Card className="bg-slate-50 border-slate-200">
+        <CardContent className="p-4">
+          <div className="flex items-start gap-3">
+            <MessageSquare className="h-5 w-5 text-indigo-600 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium text-slate-900">Can't find what you're looking for?</p>
+              <p className="text-sm text-slate-500 mt-1">
+                Try asking the GR Helper AI assistant for personalized help with your query.
+              </p>
+              <Button
+                variant="link"
+                className="px-0 text-indigo-600 mt-1"
+                onClick={() => navigate('/ai-assistant')}
+              >
+                Open GR Helper <ChevronRight className="ml-1 h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/pages/Repository.tsx ADDED Viewed

	@@ -0,0 +1,192 @@

+import React, { useState } from 'react';
+import { Card, CardContent } from '@/src/components/ui/Card';
+import { Input } from '@/src/components/ui/Input';
+import { Button } from '@/src/components/ui/Button';
+import { Badge } from '@/src/components/ui/Badge';
+import {
+  Search,
+  Filter,
+  FileText,
+  Download,
+  Eye,
+  MessageSquare,
+  Calendar,
+  Building
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+const documents = [
+  {
+    id: 'GR-2023-01',
+    title: 'Guidelines for Flood Management and Evacuation Procedures',
+    type: 'GR',
+    department: 'Disaster Management',
+    date: '2023-06-15',
+    summary: 'Comprehensive guidelines for district administrations regarding flood preparedness, evacuation protocols, and relief camp management.'
+  },
+  {
+    id: 'ACT-1976',
+    title: 'Maharashtra Irrigation Act, 1976',
+    type: 'Act',
+    department: 'Water Resources',
+    date: '1976-08-05',
+    summary: 'An Act to unify and amend the law relating to irrigation in the State of Maharashtra.'
+  },
+  {
+    id: 'CIR-2024-45',
+    title: 'Standard Operating Procedure for Dam Gate Operations during Monsoon',
+    type: 'Circular',
+    department: 'Water Resources',
+    date: '2024-05-10',
+    summary: 'Updated SOPs for dam engineers regarding phased water discharge and coordination with downstream authorities.'
+  },
+  {
+    id: 'GR-2022-89',
+    title: 'Compensation Policy for Crop Damage due to Floods',
+    type: 'GR',
+    department: 'Revenue & Forest',
+    date: '2022-09-22',
+    summary: 'Revised compensation rates and assessment methodology for agricultural losses caused by natural calamities including floods.'
+  },
+  {
+    id: 'ACT-2005',
+    title: 'Maharashtra Water Resources Regulatory Authority Act, 2005',
+    type: 'Act',
+    department: 'Water Resources',
+    date: '2005-05-04',
+    summary: 'Act to provide for the establishment of the Maharashtra Water Resources Regulatory Authority to regulate water resources within the State.'
+  },
+];
+export function Repository() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeFilter, setActiveFilter] = useState('All');
+  const navigate = useNavigate();
+  const filteredDocs = documents.filter(doc => {
+    const matchesSearch = doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                          doc.id.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesFilter = activeFilter === 'All' || doc.type === activeFilter;
+    return matchesSearch && matchesFilter;
+  });
+  const handleAskAI = (docTitle: string) => {
+    navigate(`/ai-assistant?q=Summarize the key points of ${encodeURIComponent(docTitle)}`);
+  };
+  return (
+    <div className="space-y-6 max-w-6xl mx-auto">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900">Centralized Repository</h1>
+          <p className="text-slate-500">Search and access GRs, Acts, and Circulars</p>
+        </div>
+        <Button onClick={() => navigate('/ai-assistant')} className="bg-indigo-600 hover:bg-indigo-700 text-white">
+          <MessageSquare className="mr-2 h-4 w-4" />
+          Ask AI Assistant
+        </Button>
+      </div>
+      <Card className="border-none shadow-md bg-white/50 backdrop-blur-sm">
+        <CardContent className="p-4 sm:p-6">
+          <div className="flex flex-col sm:flex-row gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-3 h-5 w-5 text-slate-400" />
+              <Input
+                type="text"
+                placeholder="Search by title, GR number, or keywords..."
+                className="pl-10 h-12 text-base bg-white"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <Button variant="outline" className="h-12 px-6 bg-white shrink-0">
+              <Filter className="mr-2 h-4 w-4" />
+              Advanced Filters
+            </Button>
+          </div>
+          <div className="flex flex-wrap gap-2 mt-4">
+            {['All', 'GR', 'Act', 'Circular'].map(filter => (
+              <Badge
+                key={filter}
+                variant={activeFilter === filter ? 'default' : 'secondary'}
+                className="cursor-pointer px-3 py-1 text-sm"
+                onClick={() => setActiveFilter(filter)}
+              >
+                {filter}
+              </Badge>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+      <div className="space-y-4">
+        {filteredDocs.map((doc) => (
+          <Card key={doc.id} className="overflow-hidden transition-all hover:shadow-md border-slate-200">
+            <CardContent className="p-0">
+              <div className="flex flex-col sm:flex-row">
+                <div className="p-6 flex-1">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <div className="flex items-center space-x-2 mb-2">
+                        <Badge variant={
+                          doc.type === 'GR' ? 'default' :
+                          doc.type === 'Act' ? 'destructive' : 'secondary'
+                        }>
+                          {doc.type}
+                        </Badge>
+                        <span className="text-xs font-medium text-slate-500">{doc.id}</span>
+                      </div>
+                      <h3 className="text-lg font-semibold text-slate-900 mb-2 leading-tight">
+                        {doc.title}
+                      </h3>
+                      <p className="text-sm text-slate-600 mb-4 line-clamp-2">
+                        {doc.summary}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-4 text-xs text-slate-500">
+                    <div className="flex items-center">
+                      <Building className="mr-1 h-3.5 w-3.5" />
+                      {doc.department}
+                    </div>
+                    <div className="flex items-center">
+                      <Calendar className="mr-1 h-3.5 w-3.5" />
+                      {doc.date}
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-slate-50 border-t sm:border-t-0 sm:border-l border-slate-100 p-4 sm:p-6 flex sm:flex-col items-center justify-center gap-3 sm:w-48">
+                  <Button variant="outline" size="sm" className="w-full justify-start bg-white">
+                    <Eye className="mr-2 h-4 w-4" /> View
+                  </Button>
+                  <Button variant="outline" size="sm" className="w-full justify-start bg-white">
+                    <Download className="mr-2 h-4 w-4" /> Download
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    className="w-full justify-start bg-indigo-50 text-indigo-700 hover:bg-indigo-100 border-indigo-100"
+                    onClick={() => handleAskAI(doc.title)}
+                  >
+                    <MessageSquare className="mr-2 h-4 w-4" /> Ask AI
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+        {filteredDocs.length === 0 && (
+          <div className="text-center py-12">
+            <FileText className="mx-auto h-12 w-12 text-slate-300 mb-4" />
+            <h3 className="text-lg font-medium text-slate-900">No documents found</h3>
+            <p className="text-slate-500">Try adjusting your search or filters.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/utils/cn.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,29 @@

+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      preview: {
+        host: true, // Listen on all addresses
+        port: 7860,
+        strictPort: true,
+        allowedHosts: ['devarshia5-wrd-drishti.hf.space'] // Add this line
+    },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});