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