feat: Add Interactive AI Explainability & Telemetry Hub Issue#15

[Yashm2610]

This PR implements the AI Explainability & Telemetry Hub on the Supervisor Dashboard. It bridges the gap between AI backend inference models (LSTM Danger Predictor, Computer Vision CCTV Analyzer, Transformer NLP Report Classifier) and the front-end operator console.

Supervisors can now click on map nodes or select citizen incident reports to inspect real-time token-level word attention highlights, emotion distributions, credibility metrics, and sensor score aggregation details. Additionally, a dynamic "What-If Simulator" has been added, allowing operators to run simulated NLP classifications directly against the FastAPI /reports/analyze backend endpoint.

Changes Made

1. Interactive Maps (src/components/Explorer.jsx)
   Added onSelectIntersection callback prop.
   Attached click event handlers on Leaflet CircleMarker nodes to update selected intersection states across the dashboard context in real-time.
2. AI Telemetry Panel (src/components/ExplainablePanel.jsx)
   Fully redesigned from a simple stub to a comprehensive XAI diagnostic console:
   Word Attention Highlights: Custom tokenizer that splits incident reports into tags and highlights vocabulary matching critical threats (red), high distress (orange), medium issues (yellow), and infrastructure factors (green).
   Emotion confidence bars: Added an interactive Recharts vertical bar chart displaying scores for all 7 emotions.
   What-If incident simulator: Added a sandbox textarea that feeds directly to the FastAPI /reports/analyze endpoint.
   Sensor Aggregator gauges: Visual breakdown of safety weights (LSTM, CV, Anomaly, Graph) showing active status and dynamic redistribution.
3. Supervisor Dashboard Integration (src/pages/SupervisorDashboard.jsx)
   Imported ExplainablePanel.
   Tracked a new selectedReport hook, which highlights report cards with custom borders and shadows when active.
   Added a new draggable glassmorphic FloatingWindow (ID: telemetry) holding the Explainable panel.
   Connected map clicks via onSelectIntersection={setSelectedIntersection} to update danger aggregation scores.

[Ishwarpatra]

Critical Bug:
Inside src/components/ExplainablePanel.jsx (around line 124):

<BookOpen className="w-8 h-8 mx-auto mb-2 opacity-30" />
The BookOpen component is used in the placeholder UI when no report is selected, but it is not imported from lucide-react at the top of the file:

import {   
  AlertCircle, Cpu, ShieldAlert, Sparkles, Activity,   
  HelpCircle, RefreshCw, Layers, CheckCircle2, AlertTriangle
} from 'lucide-react';

Because the dashboard loads with no report selected by default, this missing import will immediately trigger a fatal ReferenceError: BookOpen is not defined and crash the dashboard page.

How to Fix:
Add BookOpen to the lucide-react import statement at the top of src/components/ExplainablePanel.jsx:

import {   
  AlertCircle, Cpu, ShieldAlert, Sparkles, Activity,   
  HelpCircle, RefreshCw, Layers, CheckCircle2, AlertTriangle, BookOpen
} from 'lucide-react';```

[umang24-cyber]

@Yashm2610 please respond and update the pr within 3 days!!

[Yashm2610]

yes yes sure i will do it

[Yashm2610]

plz check i create a new commit