Massive update

drb-frontend/app/map/page.tsx

@@ -3,6 +3,7 @@
 import dynamic from "next/dynamic";
 import { useNodes } from "@/lib/useNodes";
 import { useActiveCalls } from "@/lib/useCalls";
+import { useActiveIncidents } from "@/lib/useIncidents";
 
 // Leaflet is browser-only — must be dynamically imported with no SSR
 const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
@@ -10,6 +11,7 @@ const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
 export default function MapPage() {
   const { nodes, loading } = useNodes();
   const activeCalls = useActiveCalls();
+  const incidents = useActiveIncidents();
 
   return (
     <div className="space-y-4">
@@ -20,6 +22,10 @@ export default function MapPage() {
           <span><span className="text-orange-400 animate-pulse">●</span> Recording</span>
           <span><span className="text-indigo-400">●</span> Unconfigured</span>
           <span><span className="text-gray-600">●</span> Offline</span>
+          <span className="border-l border-gray-700 pl-4"><span className="text-red-500">■</span> Fire</span>
+          <span><span className="text-blue-500">■</span> Police</span>
+          <span><span className="text-yellow-500">■</span> EMS</span>
+          <span><span className="text-orange-500">■</span> Accident</span>
         </div>
       </div>
 
@@ -29,7 +35,7 @@ export default function MapPage() {
         </div>
       ) : (
         <div style={{ height: "calc(100vh - 160px)" }}>
-          <MapView nodes={nodes} activeCalls={activeCalls} />
+          <MapView nodes={nodes} activeCalls={activeCalls} incidents={incidents} />
         </div>
       )}
     </div>