logan/server-26
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Big updates

Browse Source
This commit is contained in:
Logan
2026-04-21 01:51:23 -04:00
parent 788afca339
commit 6612e4b683
13 changed files with 168 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
drb-frontend/app/incidents/[id]/page.tsx
+10 -8
View File
@@ -88,16 +88,18 @@ export default function IncidentDetailPage() {
</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">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
<div className="flex flex-col gap-1.5">
<div className="flex items-center gap-2 flex-wrap">
<TypeBadge type={incident.type} />
<StatusBadge status={incident.status} />
</div>
<h1 className="text-lg sm:text-xl font-bold text-white font-mono leading-snug">
{incident.title ?? "Incident"}
</h1>
<StatusBadge status={incident.status} />
</div>
{isAdmin && (
<div className="flex gap-2 shrink-0">
<div className="flex gap-2 shrink-0 flex-wrap">
<button
onClick={handleSummarize}
disabled={summarizing}
@@ -261,8 +263,8 @@ export default function IncidentDetailPage() {
<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 hidden sm:table-cell">System</th>
<th className="px-4 py-2 text-left hidden sm:table-cell">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>
drb-frontend/app/incidents/page.tsx
+73 -25
View File
@@ -136,37 +136,85 @@ function CreateModal({ onClose, onCreate }: {
);
}
function IncidentCards({ incidents, isAdmin, onResolve }: {
incidents: IncidentRecord[];
isAdmin: boolean;
onResolve: (id: string) => void;
}) {
const router = useRouter();
return (
<div className="space-y-2">
{incidents.map((inc) => (
<div
key={inc.incident_id}
className="bg-gray-900 border border-gray-800 rounded-xl p-4 cursor-pointer active:bg-gray-800"
onClick={() => router.push(`/incidents/${inc.incident_id}`)}
>
<div className="flex items-center justify-between gap-2 mb-1.5">
<div className="flex items-center gap-2">
{typeBadge(inc.type)}
<span className={`text-xs px-2 py-0.5 rounded-full ${
inc.status === "active" ? "bg-green-900 text-green-300" : "bg-gray-800 text-gray-400"
}`}>{inc.status}</span>
</div>
{isAdmin && inc.status === "active" && (
<button
onClick={(e) => { e.stopPropagation(); onResolve(inc.incident_id); }}
className="text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 px-2 py-1 rounded transition-colors"
>
Resolve
</button>
)}
</div>
<p className="text-white text-sm font-semibold leading-snug">{inc.title ?? "—"}</p>
<p className="text-gray-500 text-xs mt-1 font-mono">
{fmtTime(inc.started_at)} · {inc.call_ids.length} call{inc.call_ids.length !== 1 ? "s" : ""}
</p>
</div>
))}
</div>
);
}
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>
<>
{/* Mobile card view */}
<div className="sm:hidden">
<IncidentCards incidents={incidents} isAdmin={isAdmin} onResolve={onResolve} />
</div>
{/* Desktop table view */}
<div className="hidden sm:block 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>
</>
);
}