big ui and intel updates

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