File size: 5,130 Bytes
b4856f1 aa3c874 b4856f1 aa3c874 b4856f1 aa3c874 b4856f1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 'use client'
import { useState } from "react";
import SriLankaMap from "./SriLankaMap";
import DistrictInfoPanel from "./DistrictInfoPanel";
import { Card } from "../ui/card";
import { MapPin, Activity } from "lucide-react";
import { useRogerData } from "../../hooks/use-roger-data";
import { Badge } from "../ui/badge";
const MapView = () => {
const [selectedDistrict, setSelectedDistrict] = useState<string | null>(null);
const { events, isConnected } = useRogerData();
// Province to districts mapping
const provinceToDistricts: Record<string, string[]> = {
"western province": ["Colombo", "Gampaha", "Kalutara"],
"western": ["Colombo", "Gampaha", "Kalutara"],
"central province": ["Kandy", "Matale", "Nuwara Eliya"],
"central": ["Kandy", "Matale", "Nuwara Eliya"],
"southern province": ["Galle", "Matara", "Hambantota"],
"southern provinces": ["Galle", "Matara", "Hambantota"],
"southern": ["Galle", "Matara", "Hambantota"],
"south": ["Galle", "Matara", "Hambantota"],
"northern province": ["Jaffna", "Kilinochchi", "Mannar", "Vavuniya", "Mullaitivu"],
"northern": ["Jaffna", "Kilinochchi", "Mannar", "Vavuniya", "Mullaitivu"],
"north": ["Jaffna", "Kilinochchi", "Mannar", "Vavuniya", "Mullaitivu"],
"eastern province": ["Batticaloa", "Ampara", "Trincomalee"],
"eastern": ["Batticaloa", "Ampara", "Trincomalee"],
"east": ["Batticaloa", "Ampara", "Trincomalee"],
"north western province": ["Kurunegala", "Puttalam"],
"north western": ["Kurunegala", "Puttalam"],
"north central province": ["Anuradhapura", "Polonnaruwa"],
"north central": ["Anuradhapura", "Polonnaruwa"],
"uva province": ["Badulla", "Moneragala"],
"uva": ["Badulla", "Moneragala"],
"sabaragamuwa province": ["Ratnapura", "Kegalle"],
"sabaragamuwa": ["Ratnapura", "Kegalle"],
};
const allDistricts = [
'Colombo', 'Gampaha', 'Kandy', 'Jaffna', 'Galle', 'Matara', 'Hambantota',
'Anuradhapura', 'Polonnaruwa', 'Batticaloa', 'Ampara', 'Trincomalee',
'Kurunegala', 'Puttalam', 'Kalutara', 'Ratnapura', 'Kegalle', 'Nuwara Eliya',
'Badulla', 'Moneragala', 'Kilinochchi', 'Mannar', 'Vavuniya', 'Mullaitivu', 'Matale'
];
// Count alerts per district with province awareness
const districtAlertCounts: Record<string, number> = {};
(events ?? []).forEach(event => {
const summary = (event.summary ?? '').toLowerCase();
const matchedDistricts = new Set<string>();
// Check for direct district mentions
allDistricts.forEach(district => {
if (summary.includes(district.toLowerCase())) {
matchedDistricts.add(district);
}
});
// Check for province mentions and add their districts
for (const [province, districts] of Object.entries(provinceToDistricts)) {
if (summary.includes(province)) {
districts.forEach(d => matchedDistricts.add(d));
}
}
// Count for each matched district
matchedDistricts.forEach(district => {
districtAlertCounts[district] = (districtAlertCounts[district] || 0) + 1;
});
});
// Count critical events
const criticalEvents = events.filter(e => e.severity === 'critical' || e.severity === 'high');
return (
<div className="space-y-4">
<Card className="p-4 sm:p-6 bg-card border-border">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
<div className="flex items-center gap-2">
<MapPin className="w-5 h-5 text-primary" />
<h2 className="text-base sm:text-lg font-bold">TERRITORY MAP</h2>
</div>
<div className="flex items-center gap-2 sm:gap-3 flex-wrap">
{isConnected ? (
<Badge className="bg-success/20 text-success flex items-center gap-2 text-xs">
<span className="w-2 h-2 rounded-full bg-success animate-pulse"></span>
Live
</Badge>
) : (
<Badge className="bg-warning/20 text-warning text-xs">Reconnecting...</Badge>
)}
<Badge className="border border-border flex items-center gap-2 text-xs">
<Activity className="w-3 h-3" />
{criticalEvents.length} Critical
</Badge>
<span className="text-xs font-mono text-muted-foreground hidden sm:inline">
Click any district for detailed intelligence
</span>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
<div className="lg:col-span-2 order-1">
<div className="h-[350px] sm:h-[450px] lg:h-[550px] w-full">
<SriLankaMap
selectedDistrict={selectedDistrict}
onDistrictSelect={setSelectedDistrict}
alertCounts={districtAlertCounts}
className="w-full h-full"
/>
</div>
</div>
<div className="lg:col-span-1 order-2">
<DistrictInfoPanel district={selectedDistrict} />
</div>
</div>
</Card>
</div>
);
};
export default MapView;
|