big ui and intel updates

drb-frontend/app/map/page.tsx

@@ -1,17 +1,52 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import Link from "next/link";
 import { useNodes } from "@/lib/useNodes";
 import { useActiveCalls } from "@/lib/useCalls";
 import { useActiveIncidents } from "@/lib/useIncidents";
+import type { IncidentRecord } from "@/lib/types";
 
-// Leaflet is browser-only — must be dynamically imported with no SSR
 const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
 
+const TYPE_COLORS: Record<string, string> = {
+  fire:     "border-red-800 bg-red-950 text-red-300",
+  police:   "border-blue-800 bg-blue-950 text-blue-300",
+  ems:      "border-yellow-800 bg-yellow-950 text-yellow-300",
+  accident: "border-orange-800 bg-orange-950 text-orange-300",
+  other:    "border-gray-700 bg-gray-900 text-gray-300",
+};
+
+function IncidentCard({ incident }: { incident: IncidentRecord }) {
+  const cls = TYPE_COLORS[incident.type ?? "other"] ?? TYPE_COLORS.other;
+  return (
+    <Link
+      href={`/incidents/${incident.incident_id}`}
+      className={`block border rounded-lg p-3 hover:brightness-110 transition-all ${cls}`}
+    >
+      <div className="flex items-center justify-between gap-2 mb-1">
+        <span className="text-xs font-mono font-semibold uppercase tracking-wide">
+          {incident.type ?? "other"}
+        </span>
+        <span className="text-xs opacity-60 font-mono">
+          {incident.call_ids.length} call{incident.call_ids.length !== 1 ? "s" : ""}
+        </span>
+      </div>
+      <p className="text-sm font-bold leading-tight">{incident.title ?? "Incident"}</p>
+      {incident.location && (
+        <p className="text-xs opacity-70 mt-1 font-mono truncate">{incident.location}</p>
+      )}
+      {!incident.location_coords && (
+        <p className="text-xs opacity-40 mt-1 font-mono italic">location not geocoded yet</p>
+      )}
+    </Link>
+  );
+}
+
 export default function MapPage() {
   const { nodes, loading } = useNodes();
   const activeCalls = useActiveCalls();
-  const incidents = useActiveIncidents();
+  const incidents   = useActiveIncidents();
 
   return (
     <div className="space-y-4">
@@ -34,10 +69,24 @@ export default function MapPage() {
           Loading map…
         </div>
       ) : (
-        <div style={{ height: "calc(100vh - 160px)" }}>
+        <div style={{ height: "calc(100vh - 280px)", minHeight: "400px" }}>
           <MapView nodes={nodes} activeCalls={activeCalls} incidents={incidents} />
         </div>
       )}
+
+      {/* Active incidents — shown even without geocoded location */}
+      {incidents.length > 0 && (
+        <section>
+          <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
+            Active Incidents ({incidents.length})
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+            {incidents.map((inc) => (
+              <IncidentCard key={inc.incident_id} incident={inc} />
+            ))}
+          </div>
+        </section>
+      )}
     </div>
   );
 }