big ui and intel updates

drb-frontend/app/incidents/[id]/page.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { useIncident } from "@/lib/useIncidents";
+import { useCallsByIncident } from "@/lib/useCalls";
+import { useSystems } from "@/lib/useSystems";
+import { useAuth } from "@/components/AuthProvider";
+import { CallRow } from "@/components/CallRow";
+import { c2api } from "@/lib/c2api";
+import type { IncidentRecord } from "@/lib/types";
+
+const TYPE_COLORS: Record<string, string> = {
+  fire:     "bg-red-900 text-red-300",
+  police:   "bg-blue-900 text-blue-300",
+  ems:      "bg-yellow-900 text-yellow-300",
+  accident: "bg-orange-900 text-orange-300",
+  other:    "bg-gray-800 text-gray-300",
+};
+
+function TypeBadge({ type }: { type: string | null }) {
+  const cls = TYPE_COLORS[type ?? "other"] ?? TYPE_COLORS.other;
+  return (
+    <span className={`text-xs font-mono px-2 py-0.5 rounded-full capitalize ${cls}`}>
+      {type ?? "other"}
+    </span>
+  );
+}
+
+function StatusBadge({ status }: { status: IncidentRecord["status"] }) {
+  return (
+    <span className={`text-xs px-2 py-0.5 rounded-full font-mono ${
+      status === "active" ? "bg-green-900 text-green-300" : "bg-gray-800 text-gray-400"
+    }`}>
+      {status}
+    </span>
+  );
+}
+
+export default function IncidentDetailPage() {
+  const params  = useParams();
+  const id      = params.id as string;
+  const router  = useRouter();
+
+  const { incident, loading }        = useIncident(id);
+  const { calls, loading: callsLoading } = useCallsByIncident(id);
+  const { systems }                  = useSystems();
+  const { isAdmin }                  = useAuth();
+
+  const [summarizing, setSummarizing] = useState(false);
+  const [resolving,   setResolving]   = useState(false);
+
+  const systemMap = Object.fromEntries(systems.map((s) => [s.system_id, s]));
+
+  async function handleResolve() {
+    setResolving(true);
+    try { await c2api.updateIncident(id, { status: "resolved" }); }
+    catch (e) { console.error(e); }
+    finally   { setResolving(false); }
+  }
+
+  async function handleSummarize() {
+    setSummarizing(true);
+    try { await c2api.summarizeIncident(id); }
+    catch (e) { console.error(e); }
+    finally   { setSummarizing(false); }
+  }
+
+  if (loading) {
+    return <p className="text-gray-500 text-sm font-mono p-6">Loading…</p>;
+  }
+  if (!incident) {
+    return <p className="text-gray-500 text-sm font-mono p-6">Incident not found.</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Back */}
+      <button
+        onClick={() => router.back()}
+        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors"
+      >
+        ← Incidents
+      </button>
+
+      {/* Header */}
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex items-center gap-3 flex-wrap">
+          <TypeBadge type={incident.type} />
+          <h1 className="text-xl font-bold text-white font-mono">
+            {incident.title ?? "Incident"}
+          </h1>
+          <StatusBadge status={incident.status} />
+        </div>
+        {isAdmin && (
+          <div className="flex gap-2 shrink-0">
+            <button
+              onClick={handleSummarize}
+              disabled={summarizing}
+              className="text-xs bg-indigo-700 hover:bg-indigo-600 disabled:opacity-50 text-white px-3 py-1.5 rounded-lg transition-colors"
+            >
+              {summarizing ? "Generating…" : "Regenerate summary"}
+            </button>
+            {incident.status === "active" && (
+              <button
+                onClick={handleResolve}
+                disabled={resolving}
+                className="text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-50 text-gray-300 px-3 py-1.5 rounded-lg transition-colors"
+              >
+                {resolving ? "Resolving…" : "Resolve"}
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Summary */}
+      <section>
+        <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">
+          Summary
+        </h2>
+        {incident.summary ? (
+          <p className="text-sm text-gray-300 bg-gray-900 border border-gray-800 rounded-lg p-4 leading-relaxed">
+            {incident.summary}
+          </p>
+        ) : (
+          <p className="text-sm text-gray-600 font-mono italic">
+            No summary yet.{" "}
+            {isAdmin && (
+              <button
+                onClick={handleSummarize}
+                disabled={summarizing}
+                className="text-indigo-400 hover:text-indigo-300 not-italic transition-colors"
+              >
+                Generate now
+              </button>
+            )}
+          </p>
+        )}
+      </section>
+
+      {/* Tags + Location */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <section>
+          <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Tags</h2>
+          {incident.tags.length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {incident.tags.map((t) => (
+                <span key={t} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded-full">
+                  {t}
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-600 text-sm font-mono">No tags.</p>
+          )}
+        </section>
+
+        {incident.location && (
+          <section>
+            <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Location</h2>
+            <p className="text-sm text-gray-300 font-mono">{incident.location}</p>
+          </section>
+        )}
+      </div>
+
+      {/* Metadata */}
+      <div className="text-xs text-gray-600 font-mono flex flex-wrap gap-x-6 gap-y-1">
+        <span>Started: <span className="text-gray-400">{new Date(incident.started_at).toLocaleString()}</span></span>
+        <span>Updated: <span className="text-gray-400">{new Date(incident.updated_at).toLocaleString()}</span></span>
+        <span>Calls: <span className="text-gray-400">{incident.call_ids.length}</span></span>
+        {incident.talkgroup_ids?.length > 0 && (
+          <span>Talkgroups: <span className="text-gray-400">{incident.talkgroup_ids.join(", ")}</span></span>
+        )}
+      </div>
+
+      {/* Calls */}
+      <section>
+        <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Calls</h2>
+        {callsLoading ? (
+          <p className="text-gray-600 text-sm font-mono">Loading calls…</p>
+        ) : calls.length === 0 ? (
+          <p className="text-gray-600 text-sm font-mono">No calls linked yet.</p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
+                  <th className="px-4 py-2 text-left">Time</th>
+                  <th className="px-4 py-2 text-left">Talkgroup</th>
+                  <th className="px-4 py-2 text-left">System</th>
+                  <th className="px-4 py-2 text-left">Node</th>
+                  <th className="px-4 py-2 text-left">Duration</th>
+                  <th className="px-4 py-2 text-left">Audio</th>
+                  <th className="px-4 py-2"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {calls.map((c) => (
+                  <CallRow
+                    key={c.call_id}
+                    call={c}
+                    systemName={systemMap[c.system_id ?? ""]?.name}
+                    isAdmin={isAdmin}
+                  />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

drb-frontend/app/incidents/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { useAuth } from "@/components/AuthProvider";
 import { useIncidents } from "@/lib/useIncidents";
 import { c2api } from "@/lib/c2api";
 import type { IncidentRecord } from "@/lib/types";
+import { useState } from "react";
 
 const TYPE_COLORS: Record<string, string> = {
   fire:     "bg-red-900 text-red-300",
@@ -32,65 +33,38 @@ function IncidentRow({ incident, isAdmin, onResolve }: {
   isAdmin: boolean;
   onResolve: (id: string) => void;
 }) {
-  const [expanded, setExpanded] = useState(false);
+  const router = useRouter();
 
   return (
-    <>
-      <tr
-        className="border-b border-gray-800 hover:bg-gray-900 cursor-pointer"
-        onClick={() => setExpanded((v) => !v)}
-      >
-        <td className="px-4 py-3">{typeBadge(incident.type)}</td>
-        <td className="px-4 py-3 text-white text-sm">{incident.title ?? "—"}</td>
-        <td className="px-4 py-3">
-          <span className={`text-xs px-2 py-0.5 rounded-full ${
-            incident.status === "active"
-              ? "bg-green-900 text-green-300"
-              : "bg-gray-800 text-gray-400"
-          }`}>
-            {incident.status}
-          </span>
-        </td>
-        <td className="px-4 py-3 text-gray-400 text-xs font-mono">{incident.call_ids.length}</td>
-        <td className="px-4 py-3 text-gray-400 text-xs font-mono">{fmtTime(incident.started_at)}</td>
-        <td className="px-4 py-3 text-gray-400 text-xs font-mono">{fmtTime(incident.updated_at)}</td>
-        <td className="px-4 py-3">
-          {isAdmin && incident.status === "active" && (
-            <button
-              onClick={(e) => { e.stopPropagation(); onResolve(incident.incident_id); }}
-              className="text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 px-2 py-1 rounded transition-colors"
-            >
-              Resolve
-            </button>
-          )}
-        </td>
-      </tr>
-      {expanded && (
-        <tr className="bg-gray-900 border-b border-gray-800">
-          <td colSpan={7} className="px-6 py-3">
-            {incident.summary && (
-              <p className="text-sm text-gray-300 mb-2">{incident.summary}</p>
-            )}
-            {incident.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1 mb-2">
-                {incident.tags.map((t) => (
-                  <span key={t} className="text-xs bg-gray-800 text-gray-400 px-2 py-0.5 rounded-full">{t}</span>
-                ))}
-              </div>
-            )}
-            <div className="text-xs text-gray-500 font-mono">
-              <span className="text-gray-400">Linked calls: </span>
-              {incident.call_ids.length === 0 ? "none" : incident.call_ids.map((id, i) => (
-                <span key={id}>
-                  <a href={`/calls?highlight=${id}`} className="text-indigo-400 hover:underline">{id.slice(0, 8)}…</a>
-                  {i < incident.call_ids.length - 1 && ", "}
-                </span>
-              ))}
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
+    <tr
+      className="border-b border-gray-800 hover:bg-gray-900 cursor-pointer"
+      onClick={() => router.push(`/incidents/${incident.incident_id}`)}
+    >
+      <td className="px-4 py-3">{typeBadge(incident.type)}</td>
+      <td className="px-4 py-3 text-white text-sm">{incident.title ?? "—"}</td>
+      <td className="px-4 py-3">
+        <span className={`text-xs px-2 py-0.5 rounded-full ${
+          incident.status === "active"
+            ? "bg-green-900 text-green-300"
+            : "bg-gray-800 text-gray-400"
+        }`}>
+          {incident.status}
+        </span>
+      </td>
+      <td className="px-4 py-3 text-gray-400 text-xs font-mono">{incident.call_ids.length}</td>
+      <td className="px-4 py-3 text-gray-400 text-xs font-mono">{fmtTime(incident.started_at)}</td>
+      <td className="px-4 py-3 text-gray-400 text-xs font-mono">{fmtTime(incident.updated_at)}</td>
+      <td className="px-4 py-3">
+        {isAdmin && incident.status === "active" && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onResolve(incident.incident_id); }}
+            className="text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 px-2 py-1 rounded transition-colors"
+          >
+            Resolve
+          </button>
+        )}
+      </td>
+    </tr>
   );
 }
 
@@ -98,10 +72,10 @@ function CreateModal({ onClose, onCreate }: {
   onClose: () => void;
   onCreate: (body: object) => Promise<void>;
 }) {
-  const [title, setTitle] = useState("");
-  const [type, setType] = useState("other");
+  const [title,   setTitle]   = useState("");
+  const [type,    setType]    = useState("other");
   const [summary, setSummary] = useState("");
-  const [saving, setSaving] = useState(false);
+  const [saving,  setSaving]  = useState(false);
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -162,24 +136,51 @@ function CreateModal({ onClose, onCreate }: {
   );
 }
 
+function IncidentTable({ incidents, isAdmin, onResolve }: {
+  incidents: IncidentRecord[];
+  isAdmin: boolean;
+  onResolve: (id: string) => void;
+}) {
+  return (
+    <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
+      <table className="w-full text-left">
+        <thead>
+          <tr className="border-b border-gray-800 text-xs text-gray-500 uppercase">
+            <th className="px-4 py-3">Type</th>
+            <th className="px-4 py-3">Title</th>
+            <th className="px-4 py-3">Status</th>
+            <th className="px-4 py-3">Calls</th>
+            <th className="px-4 py-3">Started</th>
+            <th className="px-4 py-3">Updated</th>
+            <th className="px-4 py-3"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {incidents.map((inc) => (
+            <IncidentRow
+              key={inc.incident_id}
+              incident={inc}
+              isAdmin={isAdmin}
+              onResolve={onResolve}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 export default function IncidentsPage() {
-  const { isAdmin } = useAuth();
-  const { incidents, loading } = useIncidents();
+  const { isAdmin }              = useAuth();
+  const { incidents, loading }   = useIncidents();
   const [showCreate, setShowCreate] = useState(false);
 
-  const active = incidents.filter((i) => i.status === "active");
+  const active   = incidents.filter((i) => i.status === "active");
   const resolved = incidents.filter((i) => i.status === "resolved");
 
   async function handleResolve(id: string) {
-    try {
-      await c2api.updateIncident(id, { status: "resolved" });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async function handleCreate(body: object) {
-    await c2api.createIncident(body);
+    try { await c2api.updateIncident(id, { status: "resolved" }); }
+    catch (e) { console.error(e); }
   }
 
   return (
@@ -207,67 +208,17 @@ export default function IncidentsPage() {
         <p className="text-gray-500 text-sm font-mono">Loading…</p>
       ) : (
         <>
-          {/* Active incidents */}
           {active.length > 0 && (
             <section>
               <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Active</h2>
-              <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
-                <table className="w-full text-left">
-                  <thead>
-                    <tr className="border-b border-gray-800 text-xs text-gray-500 uppercase">
-                      <th className="px-4 py-3">Type</th>
-                      <th className="px-4 py-3">Title</th>
-                      <th className="px-4 py-3">Status</th>
-                      <th className="px-4 py-3">Calls</th>
-                      <th className="px-4 py-3">Started</th>
-                      <th className="px-4 py-3">Updated</th>
-                      <th className="px-4 py-3"></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {active.map((inc) => (
-                      <IncidentRow
-                        key={inc.incident_id}
-                        incident={inc}
-                        isAdmin={isAdmin}
-                        onResolve={handleResolve}
-                      />
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+              <IncidentTable incidents={active} isAdmin={isAdmin} onResolve={handleResolve} />
             </section>
           )}
 
-          {/* Resolved incidents */}
           {resolved.length > 0 && (
             <section>
               <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Resolved</h2>
-              <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
-                <table className="w-full text-left">
-                  <thead>
-                    <tr className="border-b border-gray-800 text-xs text-gray-500 uppercase">
-                      <th className="px-4 py-3">Type</th>
-                      <th className="px-4 py-3">Title</th>
-                      <th className="px-4 py-3">Status</th>
-                      <th className="px-4 py-3">Calls</th>
-                      <th className="px-4 py-3">Started</th>
-                      <th className="px-4 py-3">Updated</th>
-                      <th className="px-4 py-3"></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {resolved.map((inc) => (
-                      <IncidentRow
-                        key={inc.incident_id}
-                        incident={inc}
-                        isAdmin={isAdmin}
-                        onResolve={handleResolve}
-                      />
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+              <IncidentTable incidents={resolved} isAdmin={isAdmin} onResolve={handleResolve} />
             </section>
           )}
 
@@ -278,7 +229,7 @@ export default function IncidentsPage() {
       )}
 
       {showCreate && (
-        <CreateModal onClose={() => setShowCreate(false)} onCreate={handleCreate} />
+        <CreateModal onClose={() => setShowCreate(false)} onCreate={(b) => c2api.createIncident(b)} />
       )}
     </div>
   );

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>
   );
 }

drb-frontend/components/MapView.tsx

@@ -59,9 +59,11 @@ export default function MapView({ nodes, activeCalls, incidents = [] }: Props) {
     activeCalls.map((c) => [c.node_id, c])
   );
 
-  // Only show incidents that have coordinates
-  const mappableIncidents = incidents.filter(
-    (i) => i.location && i.location.lat != null && i.location.lng != null
+  // Only show incidents that have been geocoded (location_coords set by the server).
+  const plottedIncidents = incidents.flatMap((inc) =>
+    inc.location_coords
+      ? [{ inc, pos: [inc.location_coords.lat, inc.location_coords.lng] as [number, number] }]
+      : []
   );
 
   const center: [number, number] =
@@ -102,22 +104,26 @@ export default function MapView({ nodes, activeCalls, incidents = [] }: Props) {
         </Marker>
       ))}
 
-      {/* Incident markers */}
-      {mappableIncidents.map((inc) => (
+      {/* Incident markers — positioned at the node covering the incident's system */}
+      {plottedIncidents.map(({ inc, pos }) => (
         <Marker
           key={inc.incident_id}
-          position={[inc.location!.lat, inc.location!.lng]}
+          position={pos}
           icon={incidentIcon(inc.type)}
         >
           <Popup className="font-mono">
             <div className="text-gray-900">
               <p className="font-bold">{inc.title ?? "Incident"}</p>
-              <p className="text-xs capitalize" style={{ color: INCIDENT_COLORS[inc.type ?? "other"] }}>
+              <p className="text-xs capitalize" style={{ color: INCIDENT_COLORS[inc.type ?? "other"] ?? INCIDENT_COLORS.other }}>
                 {inc.type ?? "other"}
               </p>
               <p className="text-xs mt-1 capitalize">{inc.status}</p>
+              {inc.location && <p className="text-xs text-gray-600 mt-1">{inc.location}</p>}
               <p className="text-xs text-gray-500">{inc.call_ids.length} call{inc.call_ids.length !== 1 ? "s" : ""}</p>
               {inc.summary && <p className="text-xs mt-1">{inc.summary}</p>}
+              <a href={`/incidents/${inc.incident_id}`} className="text-xs text-blue-600 hover:underline mt-1 block">
+                View incident →
+              </a>
             </div>
           </Popup>
         </Marker>

drb-frontend/lib/c2api.ts

@@ -72,6 +72,8 @@ export const c2api = {
     request(`/incidents/${id}`, { method: "DELETE" }),
   linkCallToIncident: (incidentId: string, callId: string) =>
     request(`/incidents/${incidentId}/calls/${callId}`, { method: "POST" }),
+  summarizeIncident: (id: string) =>
+    request(`/incidents/${id}/summarize`, { method: "POST" }),
 
   // Alerts
   getAlerts: (acknowledged?: boolean) => {

drb-frontend/lib/types.ts

@@ -40,7 +40,7 @@ export interface CallRecord {
   transcript_corrected: string | null;
   segments: TranscriptSegment[] | null;
   incident_id: string | null;
-  location: { lat: number; lng: number } | null;
+  location: string | null;
   tags: string[];
   status: "active" | "ended";
 }
@@ -50,8 +50,11 @@ export interface IncidentRecord {
   title: string | null;
   type: string | null;
   status: "active" | "resolved";
-  location: { lat: number; lng: number } | null;
+  location: string | null;
+  location_coords: { lat: number; lng: number } | null;
   call_ids: string[];
+  system_ids: string[];
+  talkgroup_ids: string[];
   started_at: string;
   updated_at: string;
   summary: string | null;

drb-frontend/lib/useCalls.ts

@@ -48,6 +48,39 @@ export function useCalls(limitCount = 50) {
   return { calls, loading, error };
 }
 
+export function useCallsByIncident(incidentId: string | null) {
+  const [calls, setCalls] = useState<CallRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!incidentId) { setLoading(false); return; }
+    let unsubFirestore: (() => void) | undefined;
+
+    const unsubAuth = onAuthStateChanged(auth, (user) => {
+      if (unsubFirestore) { unsubFirestore(); unsubFirestore = undefined; }
+      if (!user) { setLoading(false); return; }
+
+      const toISO = (v: any): string | null =>
+        v?.toDate?.()?.toISOString?.() ?? (typeof v === "string" ? v : null);
+
+      const q = query(collection(db, "calls"), where("incident_id", "==", incidentId));
+      unsubFirestore = onSnapshot(q, (snap) => {
+        const docs = snap.docs.map((d) => {
+          const data = d.data();
+          return { ...data, started_at: toISO(data.started_at) ?? "", ended_at: toISO(data.ended_at) } as CallRecord;
+        });
+        docs.sort((a, b) => a.started_at.localeCompare(b.started_at));
+        setCalls(docs);
+        setLoading(false);
+      }, (err: FirestoreError) => { console.error("useCallsByIncident:", err); setLoading(false); });
+    });
+
+    return () => { unsubAuth(); if (unsubFirestore) unsubFirestore(); };
+  }, [incidentId]);
+
+  return { calls, loading };
+}
+
 export function useActiveCalls() {
   const [calls, setCalls] = useState<CallRecord[]>([]);
 

drb-frontend/lib/useIncidents.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { collection, onSnapshot, query, orderBy, limit, where, FirestoreError } from "firebase/firestore";
+import { collection, doc, onSnapshot, query, orderBy, limit, where, FirestoreError } from "firebase/firestore";
 import { onAuthStateChanged } from "firebase/auth";
 import { db, auth } from "@/lib/firebase";
 import type { IncidentRecord } from "@/lib/types";
@@ -58,6 +58,43 @@ export function useIncidents(limitCount = 100) {
   return { incidents, loading, error };
 }
 
+export function useIncident(incidentId: string | null) {
+  const [incident, setIncident] = useState<IncidentRecord | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!incidentId) { setLoading(false); return; }
+    let unsubFirestore: (() => void) | undefined;
+
+    const unsubAuth = onAuthStateChanged(auth, (user) => {
+      if (unsubFirestore) { unsubFirestore(); unsubFirestore = undefined; }
+      if (!user) { setLoading(false); return; }
+
+      const ref = doc(db, "incidents", incidentId);
+      unsubFirestore = onSnapshot(ref, (snap) => {
+        if (snap.exists()) {
+          const data = snap.data();
+          setIncident({
+            ...data,
+            started_at: toISO(data.started_at),
+            updated_at: toISO(data.updated_at),
+          } as IncidentRecord);
+        } else {
+          setIncident(null);
+        }
+        setLoading(false);
+      }, (err: FirestoreError) => {
+        console.error("useIncident:", err);
+        setLoading(false);
+      });
+    });
+
+    return () => { unsubAuth(); if (unsubFirestore) unsubFirestore(); };
+  }, [incidentId]);
+
+  return { incident, loading };
+}
+
 export function useActiveIncidents() {
   const [incidents, setIncidents] = useState<IncidentRecord[]>([]);