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

Massive update

Browse Source
This commit is contained in:
Logan
2026-04-11 13:44:08 -04:00
parent fd6c2fd8bf
commit 3b3a136d04
31 changed files with 1919 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
drb-frontend/app/alerts/page.tsx
+289
View File
@@ -0,0 +1,289 @@
"use client";
import { useState } from "react";
import { useAuth } from "@/components/AuthProvider";
import { useAlerts } from "@/lib/useAlerts";
import { c2api } from "@/lib/c2api";
import type { AlertRule } from "@/lib/types";
function fmtTime(iso: string) {
try { return new Date(iso).toLocaleString(); } catch { return iso; }
}
function RulesTab({ isAdmin }: { isAdmin: boolean }) {
const [rules, setRules] = useState<AlertRule[]>([]);
const [loaded, setLoaded] = useState(false);
const [name, setName] = useState("");
const [keywords, setKeywords] = useState("");
const [tgIds, setTgIds] = useState("");
const [webhook, setWebhook] = useState("");
const [saving, setSaving] = useState(false);
const [error, setError] = useState<string | null>(null);
async function load() {
if (loaded) return;
try {
const data = await c2api.getAlertRules() as AlertRule[];
setRules(data);
setLoaded(true);
} catch (e) {
console.error(e);
}
}
// Load on first render of this tab
if (!loaded) { load(); }
async function handleCreate(e: React.FormEvent) {
e.preventDefault();
setSaving(true);
setError(null);
try {
const body = {
name,
keywords: keywords.split(",").map((k) => k.trim()).filter(Boolean),
talkgroup_ids: tgIds.split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !isNaN(n)),
enabled: true,
discord_webhook: webhook || null,
};
const created = await c2api.createAlertRule(body) as AlertRule;
setRules((prev) => [created, ...prev]);
setName(""); setKeywords(""); setTgIds(""); setWebhook("");
} catch {
setError("Failed to create rule.");
} finally {
setSaving(false);
}
}
async function handleToggle(rule: AlertRule) {
try {
await c2api.updateAlertRule(rule.rule_id, { enabled: !rule.enabled });
setRules((prev) => prev.map((r) => r.rule_id === rule.rule_id ? { ...r, enabled: !r.enabled } : r));
} catch (e) { console.error(e); }
}
async function handleDelete(id: string) {
try {
await c2api.deleteAlertRule(id);
setRules((prev) => prev.filter((r) => r.rule_id !== id));
} catch (e) { console.error(e); }
}
return (
<div className="space-y-6">
{isAdmin && (
<form onSubmit={handleCreate} className="bg-gray-900 border border-gray-800 rounded-xl p-5 space-y-4">
<h3 className="text-white font-mono text-sm font-bold">New Alert Rule</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="text-xs text-gray-400 block mb-1">Name</label>
<input
required value={name} onChange={(e) => setName(e.target.value)}
placeholder="e.g. Structure Fire"
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
</div>
<div>
<label className="text-xs text-gray-400 block mb-1">Keywords (comma-separated)</label>
<input
value={keywords} onChange={(e) => setKeywords(e.target.value)}
placeholder="fire, smoke, structure"
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
</div>
<div>
<label className="text-xs text-gray-400 block mb-1">Talkgroup IDs (comma-separated)</label>
<input
value={tgIds} onChange={(e) => setTgIds(e.target.value)}
placeholder="9048, 9600"
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
</div>
<div>
<label className="text-xs text-gray-400 block mb-1">Discord Webhook URL (optional)</label>
<input
value={webhook} onChange={(e) => setWebhook(e.target.value)}
placeholder="https://discord.com/api/webhooks/…"
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
</div>
</div>
{error && <p className="text-red-400 text-xs">{error}</p>}
<button
type="submit" disabled={saving}
className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm rounded-lg px-4 py-2 transition-colors"
>
{saving ? "Creating…" : "Create Rule"}
</button>
</form>
)}
<div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
{rules.length === 0 ? (
<p className="text-gray-600 text-sm font-mono p-4">No alert rules configured.</p>
) : (
<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">Name</th>
<th className="px-4 py-3">Keywords</th>
<th className="px-4 py-3">Talkgroups</th>
<th className="px-4 py-3">Webhook</th>
<th className="px-4 py-3">Enabled</th>
{isAdmin && <th className="px-4 py-3"></th>}
</tr>
</thead>
<tbody>
{rules.map((rule) => (
<tr key={rule.rule_id} className="border-b border-gray-800">
<td className="px-4 py-3 text-white text-sm">{rule.name}</td>
<td className="px-4 py-3 text-gray-400 text-xs font-mono">{rule.keywords.join(", ") || "—"}</td>
<td className="px-4 py-3 text-gray-400 text-xs font-mono">{rule.talkgroup_ids.join(", ") || "—"}</td>
<td className="px-4 py-3 text-gray-400 text-xs">
{rule.discord_webhook ? (
<span className="text-green-400">configured</span>
) : "—"}
</td>
<td className="px-4 py-3">
{isAdmin ? (
<button
onClick={() => handleToggle(rule)}
className={`text-xs px-2 py-0.5 rounded-full transition-colors ${
rule.enabled
? "bg-green-900 text-green-300 hover:bg-green-800"
: "bg-gray-800 text-gray-400 hover:bg-gray-700"
}`}
>
{rule.enabled ? "enabled" : "disabled"}
</button>
) : (
<span className={`text-xs ${rule.enabled ? "text-green-400" : "text-gray-500"}`}>
{rule.enabled ? "enabled" : "disabled"}
</span>
)}
</td>
{isAdmin && (
<td className="px-4 py-3">
<button
onClick={() => handleDelete(rule.rule_id)}
className="text-xs text-red-400 hover:text-red-300 transition-colors"
>
Delete
</button>
</td>
)}
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
);
}
export default function AlertsPage() {
const { isAdmin } = useAuth();
const { alerts, loading } = useAlerts();
const [tab, setTab] = useState<"events" | "rules">("events");
async function handleAcknowledge(id: string) {
try {
await c2api.acknowledgeAlert(id);
} catch (e) { console.error(e); }
}
const unacked = alerts.filter((a) => !a.acknowledged);
return (
<div className="p-6 max-w-7xl mx-auto space-y-6">
<div className="flex items-center gap-4">
<h1 className="text-white text-xl font-bold font-mono">Alerts</h1>
{unacked.length > 0 && (
<span className="text-xs bg-red-900 text-red-300 px-2 py-0.5 rounded-full font-mono">
{unacked.length} unacknowledged
</span>
)}
</div>
{/* Tabs */}
<div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-1 w-fit">
{(["events", ...(isAdmin ? ["rules"] : [])] as const).map((t) => (
<button
key={t}
onClick={() => setTab(t as "events" | "rules")}
className={`text-sm font-mono px-4 py-1.5 rounded-md transition-colors capitalize ${
tab === t ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"
}`}
>
{t === "events" ? "Triggered Alerts" : "Rules"}
</button>
))}
</div>
{tab === "events" && (
loading ? (
<p className="text-gray-500 text-sm font-mono">Loading…</p>
) : alerts.length === 0 ? (
<p className="text-gray-600 text-sm font-mono">No alerts triggered yet.</p>
) : (
<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">Rule</th>
<th className="px-4 py-3">Talkgroup</th>
<th className="px-4 py-3">Matched</th>
<th className="px-4 py-3">Snippet</th>
<th className="px-4 py-3">Time</th>
<th className="px-4 py-3">Status</th>
</tr>
</thead>
<tbody>
{alerts.map((alert) => (
<tr
key={alert.alert_id}
className={`border-b border-gray-800 ${alert.acknowledged ? "opacity-50" : ""}`}
>
<td className="px-4 py-3 text-white text-sm">{alert.rule_name}</td>
<td className="px-4 py-3 text-gray-400 text-xs font-mono">
{alert.talkgroup_name || alert.talkgroup_id || "—"}
</td>
<td className="px-4 py-3">
<div className="flex flex-wrap gap-1">
{alert.matched_keywords.map((kw) => (
<span key={kw} className="text-xs bg-red-900 text-red-300 px-1.5 py-0.5 rounded">
{kw}
</span>
))}
</div>
</td>
<td className="px-4 py-3 text-gray-400 text-xs font-mono max-w-xs truncate">
{alert.transcript_snippet || "—"}
</td>
<td className="px-4 py-3 text-gray-400 text-xs font-mono">{fmtTime(alert.triggered_at)}</td>
<td className="px-4 py-3">
{alert.acknowledged ? (
<span className="text-xs text-gray-500">acked</span>
) : (
<button
onClick={() => handleAcknowledge(alert.alert_id)}
className="text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 px-2 py-1 rounded transition-colors"
>
Acknowledge
</button>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
)
)}
{tab === "rules" && <RulesTab isAdmin={isAdmin} />}
</div>
);
}
drb-frontend/app/calls/page.tsx
+1
View File
@@ -36,6 +36,7 @@ export default function CallsPage() {
<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>
drb-frontend/app/incidents/page.tsx
+285
View File
@@ -0,0 +1,285 @@
"use client";
import { useState } from "react";
import { useAuth } from "@/components/AuthProvider";
import { useIncidents } from "@/lib/useIncidents";
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: 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 fmtTime(iso: string) {
try { return new Date(iso).toLocaleString(); } catch { return iso; }
}
function IncidentRow({ incident, isAdmin, onResolve }: {
incident: IncidentRecord;
isAdmin: boolean;
onResolve: (id: string) => void;
}) {
const [expanded, setExpanded] = useState(false);
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>
)}
</>
);
}
function CreateModal({ onClose, onCreate }: {
onClose: () => void;
onCreate: (body: object) => Promise<void>;
}) {
const [title, setTitle] = useState("");
const [type, setType] = useState("other");
const [summary, setSummary] = useState("");
const [saving, setSaving] = useState(false);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setSaving(true);
try {
await onCreate({ title, type, summary: summary || null, status: "active" });
onClose();
} finally {
setSaving(false);
}
}
return (
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
<form
onSubmit={handleSubmit}
className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md space-y-4"
>
<h2 className="text-white font-bold">Create Incident</h2>
<div>
<label className="text-xs text-gray-400 block mb-1">Title</label>
<input
required value={title} onChange={(e) => setTitle(e.target.value)}
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
</div>
<div>
<label className="text-xs text-gray-400 block mb-1">Type</label>
<select
value={type} onChange={(e) => setType(e.target.value)}
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none"
>
{["fire", "police", "ems", "accident", "other"].map((t) => (
<option key={t} value={t}>{t}</option>
))}
</select>
</div>
<div>
<label className="text-xs text-gray-400 block mb-1">Summary (optional)</label>
<textarea
value={summary} onChange={(e) => setSummary(e.target.value)} rows={2}
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none resize-none"
/>
</div>
<div className="flex gap-3 justify-end">
<button type="button" onClick={onClose} className="text-sm text-gray-400 hover:text-gray-200 px-4 py-2">
Cancel
</button>
<button
type="submit" disabled={saving}
className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm rounded-lg px-4 py-2"
>
{saving ? "Creating…" : "Create"}
</button>
</div>
</form>
</div>
);
}
export default function IncidentsPage() {
const { isAdmin } = useAuth();
const { incidents, loading } = useIncidents();
const [showCreate, setShowCreate] = useState(false);
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);
}
return (
<div className="p-6 max-w-7xl mx-auto space-y-8">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<h1 className="text-white text-xl font-bold font-mono">Incidents</h1>
{active.length > 0 && (
<span className="text-xs bg-red-900 text-red-300 px-2 py-0.5 rounded-full font-mono">
{active.length} active
</span>
)}
</div>
{isAdmin && (
<button
onClick={() => setShowCreate(true)}
className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg px-4 py-2 transition-colors"
>
+ Create Incident
</button>
)}
</div>
{loading ? (
<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>
</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>
</section>
)}
{incidents.length === 0 && (
<p className="text-gray-600 text-sm font-mono">No incidents recorded yet.</p>
)}
</>
)}
{showCreate && (
<CreateModal onClose={() => setShowCreate(false)} onCreate={handleCreate} />
)}
</div>
);
}
drb-frontend/app/login/page.tsx
+65 -31
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import { signInWithEmailAndPassword } from "firebase/auth";
import { signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "@/lib/firebase";
import { useRouter } from "next/navigation";
@@ -26,44 +26,78 @@ export default function LoginPage() {
}
}
async function handleGoogle() {
setLoading(true);
setError(null);
try {
await signInWithPopup(auth, new GoogleAuthProvider());
router.push("/dashboard");
} catch {
setError("Google sign-in failed. Try again.");
} finally {
setLoading(false);
}
}
return (
<div className="max-w-sm mx-auto pt-16">
<form
onSubmit={handleSubmit}
className="bg-gray-900 border border-gray-700 rounded-xl p-8 space-y-5 font-mono"
>
<div className="bg-gray-900 border border-gray-700 rounded-xl p-8 space-y-5 font-mono">
<h1 className="text-white text-lg font-bold">DRB Portal</h1>
<div>
<label className="text-xs text-gray-400 block mb-1">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
autoComplete="email"
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="text-xs text-gray-400 block mb-1">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
autoComplete="email"
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
</div>
<div>
<label className="text-xs text-gray-400 block mb-1">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
autoComplete="current-password"
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
</div>
{error && <p className="text-red-400 text-xs">{error}</p>}
<button
type="submit"
disabled={loading}
className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg py-2 text-sm font-semibold transition-colors"
>
{loading ? "Signing in…" : "Sign in"}
</button>
</form>
<div className="flex items-center gap-3">
<div className="flex-1 h-px bg-gray-700" />
<span className="text-xs text-gray-500">or</span>
<div className="flex-1 h-px bg-gray-700" />
</div>
<div>
<label className="text-xs text-gray-400 block mb-1">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
autoComplete="current-password"
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
/>
</div>
{error && <p className="text-red-400 text-xs">{error}</p>}
<button
type="submit"
type="button"
onClick={handleGoogle}
disabled={loading}
className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg py-2 text-sm font-semibold transition-colors"
className="w-full flex items-center justify-center gap-3 bg-white hover:bg-gray-100 disabled:opacity-50 text-gray-900 rounded-lg py-2 text-sm font-semibold transition-colors"
>
{loading ? "Signing in…" : "Sign in"}
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
<path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.859-3.048.859-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z" fill="#34A853"/>
<path d="M3.964 10.706A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.706V4.962H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332z" fill="#FBBC05"/>
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.962L3.964 6.294C4.672 4.169 6.656 3.58 9 3.58z" fill="#EA4335"/>
</svg>
Continue with Google
</button>
</form>
</div>
</div>
);
}
drb-frontend/app/map/page.tsx
+7 -1
View File
@@ -3,6 +3,7 @@
import dynamic from "next/dynamic";
import { useNodes } from "@/lib/useNodes";
import { useActiveCalls } from "@/lib/useCalls";
import { useActiveIncidents } from "@/lib/useIncidents";
// Leaflet is browser-only — must be dynamically imported with no SSR
const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
@@ -10,6 +11,7 @@ const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
export default function MapPage() {
const { nodes, loading } = useNodes();
const activeCalls = useActiveCalls();
const incidents = useActiveIncidents();
return (
<div className="space-y-4">
@@ -20,6 +22,10 @@ export default function MapPage() {
<span><span className="text-orange-400 animate-pulse">●</span> Recording</span>
<span><span className="text-indigo-400">●</span> Unconfigured</span>
<span><span className="text-gray-600">●</span> Offline</span>
<span className="border-l border-gray-700 pl-4"><span className="text-red-500">■</span> Fire</span>
<span><span className="text-blue-500">■</span> Police</span>
<span><span className="text-yellow-500">■</span> EMS</span>
<span><span className="text-orange-500">■</span> Accident</span>
</div>
</div>
@@ -29,7 +35,7 @@ export default function MapPage() {
</div>
) : (
<div style={{ height: "calc(100vh - 160px)" }}>
<MapView nodes={nodes} activeCalls={activeCalls} />
<MapView nodes={nodes} activeCalls={activeCalls} incidents={incidents} />
</div>
)}
</div>
drb-frontend/components/CallRow.tsx
+96 -31
View File
@@ -1,3 +1,6 @@
"use client";
import { useState } from "react";
import type { CallRecord } from "@/lib/types";
interface Props {
@@ -12,40 +15,102 @@ function duration(started: string, ended: string | null): string {
return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
}
const TAG_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",
};
export function CallRow({ call, systemName }: Props) {
const [expanded, setExpanded] = useState(false);
const isActive = call.status === "active";
const hasDetails = call.transcript || (call.tags && call.tags.length > 0) || call.incident_id;
return (
<tr className="border-b border-gray-800 hover:bg-gray-900/50 font-mono text-sm">
<td className="px-4 py-2 text-gray-400 text-xs">
{new Date(call.started_at).toLocaleTimeString()}
</td>
<td className="px-4 py-2 text-gray-300">
{call.talkgroup_name || call.talkgroup_id || "—"}
</td>
<td className="px-4 py-2 text-gray-400">{systemName ?? call.system_id ?? "—"}</td>
<td className="px-4 py-2 text-gray-400">{call.node_id}</td>
<td className="px-4 py-2">
{isActive ? (
<span className="text-orange-400 animate-pulse">● live</span>
) : (
<span className="text-gray-500">{duration(call.started_at, call.ended_at)}</span>
)}
</td>
<td className="px-4 py-2">
{call.audio_url ? (
<a
href={call.audio_url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:text-blue-300 text-xs"
>
audio
</a>
) : (
<span className="text-gray-700 text-xs">—</span>
)}
</td>
</tr>
<>
<tr
className={`border-b border-gray-800 font-mono text-sm ${hasDetails ? "cursor-pointer hover:bg-gray-900/50" : "hover:bg-gray-900/30"}`}
onClick={() => hasDetails && setExpanded((v) => !v)}
>
<td className="px-4 py-2 text-gray-400 text-xs">
{new Date(call.started_at).toLocaleTimeString()}
</td>
<td className="px-4 py-2 text-gray-300">
<span>{call.talkgroup_name || call.talkgroup_id || "—"}</span>
{call.tags && call.tags.length > 0 && (
<span className={`ml-2 text-xs px-1.5 py-0.5 rounded-full capitalize ${TAG_COLORS[call.tags[0]] ?? "bg-gray-800 text-gray-400"}`}>
{call.tags[0]}
</span>
)}
</td>
<td className="px-4 py-2 text-gray-400">{systemName ?? call.system_id ?? "—"}</td>
<td className="px-4 py-2 text-gray-400">{call.node_id}</td>
<td className="px-4 py-2">
{isActive ? (
<span className="text-orange-400 animate-pulse">● live</span>
) : (
<span className="text-gray-500">{duration(call.started_at, call.ended_at)}</span>
)}
</td>
<td className="px-4 py-2">
{call.audio_url ? (
<a
href={call.audio_url}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="text-blue-400 hover:text-blue-300 text-xs"
>
audio
</a>
) : (
<span className="text-gray-700 text-xs">—</span>
)}
</td>
<td className="px-4 py-2 text-gray-600 text-xs">
{hasDetails && (expanded ? "▲" : "▼")}
</td>
</tr>
{expanded && hasDetails && (
<tr className="bg-gray-900/60 border-b border-gray-800">
<td colSpan={7} className="px-6 py-3 space-y-2">
{/* Tags */}
{call.tags && call.tags.length > 0 && (
<div className="flex flex-wrap gap-1">
{call.tags.map((tag) => (
<span
key={tag}
className={`text-xs px-2 py-0.5 rounded-full capitalize ${TAG_COLORS[tag] ?? "bg-gray-800 text-gray-400"}`}
>
{tag}
</span>
))}
</div>
)}
{/* Incident link */}
{call.incident_id && (
<p className="text-xs font-mono text-indigo-400">
Incident:{" "}
<a href="/incidents" className="underline hover:text-indigo-300">
{call.incident_id.slice(0, 8)}…
</a>
</p>
)}
{/* Transcript */}
{call.transcript ? (
<pre className="text-xs text-gray-300 bg-gray-800 rounded-lg px-4 py-3 whitespace-pre-wrap font-mono leading-relaxed max-h-40 overflow-y-auto">
{call.transcript}
</pre>
) : (
<p className="text-xs text-gray-600 font-mono italic">No transcript available.</p>
)}
</td>
</tr>
)}
</>
);
}
drb-frontend/components/MapView.tsx
+56 -4
View File
@@ -1,9 +1,9 @@
"use client";
import { useEffect } from "react";
import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import type { NodeRecord, CallRecord } from "@/lib/types";
import type { NodeRecord, CallRecord, IncidentRecord } from "@/lib/types";
// Fix Leaflet default icon paths broken by webpack
delete (L.Icon.Default.prototype as unknown as Record<string, unknown>)._getIconUrl;
L.Icon.Default.mergeOptions({
@@ -25,16 +25,45 @@ const nodeIcon = (status: string) =>
iconAnchor: [7, 7],
});
const INCIDENT_COLORS: Record<string, string> = {
fire: "#ef4444",
police: "#3b82f6",
ems: "#eab308",
accident: "#f97316",
other: "#6b7280",
};
const incidentIcon = (type: string | null) => {
const color = INCIDENT_COLORS[type ?? "other"] ?? INCIDENT_COLORS.other;
return L.divIcon({
className: "",
html: `<div style="
width:16px;height:16px;border-radius:3px;
background:${color};border:2px solid #111827;
display:flex;align-items:center;justify-content:center;
font-size:9px;color:#111827;font-weight:bold;line-height:1;
">!</div>`,
iconSize: [16, 16],
iconAnchor: [8, 8],
});
};
interface Props {
nodes: NodeRecord[];
activeCalls: CallRecord[];
incidents?: IncidentRecord[];
}
export default function MapView({ nodes, activeCalls }: Props) {
export default function MapView({ nodes, activeCalls, incidents = [] }: Props) {
const activeByNode = Object.fromEntries(
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
);
const center: [number, number] =
nodes.length > 0 ? [nodes[0].lat, nodes[0].lon] : [39.5, -98.35];
@@ -49,6 +78,8 @@ export default function MapView({ nodes, activeCalls }: Props) {
url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
attribution='&copy; <a href="https://carto.com/">CARTO</a>'
/>
{/* Node markers */}
{nodes.map((node) => (
<Marker
key={node.node_id}
@@ -70,6 +101,27 @@ export default function MapView({ nodes, activeCalls }: Props) {
</Popup>
</Marker>
))}
{/* Incident markers */}
{mappableIncidents.map((inc) => (
<Marker
key={inc.incident_id}
position={[inc.location!.lat, inc.location!.lng]}
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"] }}>
{inc.type ?? "other"}
</p>
<p className="text-xs mt-1 capitalize">{inc.status}</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>}
</div>
</Popup>
</Marker>
))}
</MapContainer>
);
}
drb-frontend/components/Nav.tsx
+18 -9
View File
@@ -3,14 +3,17 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useUnconfiguredNodes } from "@/lib/useNodes";
import { useUnacknowledgedAlerts } from "@/lib/useAlerts";
import { useAuth } from "@/components/AuthProvider";
const links = [
{ href: "/dashboard", label: "Dashboard" },
{ href: "/nodes", label: "Nodes" },
{ href: "/systems", label: "Systems" },
{ href: "/calls", label: "Calls" },
{ href: "/map", label: "Map" },
{ href: "/dashboard", label: "Dashboard" },
{ href: "/nodes", label: "Nodes" },
{ href: "/systems", label: "Systems" },
{ href: "/calls", label: "Calls" },
{ href: "/incidents", label: "Incidents" },
{ href: "/map", label: "Map" },
{ href: "/alerts", label: "Alerts" },
];
const adminLinks = [
@@ -21,17 +24,18 @@ export function Nav() {
const { user, isAdmin, signOut } = useAuth();
const pathname = usePathname();
const { nodes: pending } = useUnconfiguredNodes();
const unackedAlerts = useUnacknowledgedAlerts();
if (!user) return null;
return (
<nav className="border-b border-gray-800 bg-gray-950 px-6 py-3 flex items-center gap-6">
<span className="font-mono font-bold text-white tracking-tight mr-4">DRB</span>
<nav className="border-b border-gray-800 bg-gray-950 px-6 py-3 flex items-center gap-6 overflow-x-auto">
<span className="font-mono font-bold text-white tracking-tight mr-4 shrink-0">DRB</span>
{[...links, ...(isAdmin ? adminLinks : [])].map(({ href, label }) => (
<Link
key={href}
href={href}
className={`text-sm font-mono transition-colors ${
className={`text-sm font-mono transition-colors shrink-0 ${
pathname.startsWith(href)
? "text-white"
: "text-gray-500 hover:text-gray-300"
@@ -43,9 +47,14 @@ export function Nav() {
{pending.length}
</span>
)}
{label === "Alerts" && unackedAlerts.length > 0 && (
<span className="ml-1.5 inline-flex items-center justify-center min-w-[1rem] h-4 rounded-full bg-red-600 text-white text-xs font-bold px-1">
{unackedAlerts.length}
</span>
)}
</Link>
))}
<div className="ml-auto">
<div className="ml-auto shrink-0">
<button
onClick={signOut}
className="text-sm font-mono text-gray-500 hover:text-gray-300 transition-colors"
drb-frontend/lib/c2api.ts
+34
View File
@@ -55,4 +55,38 @@ export const c2api = {
const qs = params ? "?" + new URLSearchParams(params).toString() : "";
return request<unknown[]>(`/calls${qs}`);
},
// Incidents
getIncidents: (params?: { status?: string; type?: string }) => {
const qs = params ? "?" + new URLSearchParams(params as Record<string, string>).toString() : "";
return request<unknown[]>(`/incidents${qs}`);
},
getIncident: (id: string) => request<unknown>(`/incidents/${id}`),
createIncident: (body: object) =>
request("/incidents", { method: "POST", body: JSON.stringify(body) }),
updateIncident: (id: string, body: object) =>
request(`/incidents/${id}`, { method: "PUT", body: JSON.stringify(body) }),
deleteIncident: (id: string) =>
request(`/incidents/${id}`, { method: "DELETE" }),
linkCallToIncident: (incidentId: string, callId: string) =>
request(`/incidents/${incidentId}/calls/${callId}`, { method: "POST" }),
// Alerts
getAlerts: (acknowledged?: boolean) => {
const qs = acknowledged !== undefined ? `?acknowledged=${acknowledged}` : "";
return request<unknown[]>(`/alerts${qs}`);
},
acknowledgeAlert: (id: string) =>
request(`/alerts/${id}/acknowledge`, { method: "POST" }),
getAlertRules: () => request<unknown[]>("/alert-rules"),
createAlertRule: (body: object) =>
request("/alert-rules", { method: "POST", body: JSON.stringify(body) }),
updateAlertRule: (id: string, body: object) =>
request(`/alert-rules/${id}`, { method: "PUT", body: JSON.stringify(body) }),
deleteAlertRule: (id: string) =>
request(`/alert-rules/${id}`, { method: "DELETE" }),
// Node key management
reissueNodeKey: (nodeId: string) =>
request(`/nodes/${nodeId}/reissue-key`, { method: "POST" }),
};
drb-frontend/lib/types.ts
+24
View File
@@ -49,3 +49,27 @@ export interface IncidentRecord {
summary: string | null;
tags: string[];
}
export interface AlertRule {
rule_id: string;
name: string;
keywords: string[];
talkgroup_ids: number[];
enabled: boolean;
discord_webhook: string | null;
created_at?: string;
}
export interface AlertEvent {
alert_id: string;
rule_id: string;
rule_name: string;
call_id: string;
node_id: string;
talkgroup_id: number | null;
talkgroup_name: string | null;
matched_keywords: string[];
transcript_snippet: string | null;
triggered_at: string;
acknowledged: boolean;
}
drb-frontend/lib/useAlerts.ts
+95
View File
@@ -0,0 +1,95 @@
"use client";
import { useEffect, useState } from "react";
import { collection, onSnapshot, query, orderBy, limit, where, FirestoreError } from "firebase/firestore";
import { onAuthStateChanged } from "firebase/auth";
import { db, auth } from "@/lib/firebase";
import type { AlertEvent } from "@/lib/types";
const toISO = (v: unknown): string =>
(v as { toDate?: () => Date })?.toDate?.()?.toISOString?.() ??
(typeof v === "string" ? v : new Date().toISOString());
export function useAlerts(limitCount = 50) {
const [alerts, setAlerts] = useState<AlertEvent[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
let unsubFirestore: (() => void) | undefined;
const unsubAuth = onAuthStateChanged(auth, (user) => {
if (unsubFirestore) { unsubFirestore(); unsubFirestore = undefined; }
if (!user) {
setAlerts([]);
setLoading(false);
return;
}
const q = query(
collection(db, "alert_events"),
orderBy("triggered_at", "desc"),
limit(limitCount)
);
unsubFirestore = onSnapshot(q, (snap) => {
setAlerts(snap.docs.map((d) => {
const data = d.data();
return {
...data,
triggered_at: toISO(data.triggered_at),
} as AlertEvent;
}));
setLoading(false);
}, (err: FirestoreError) => {
console.error("useAlerts:", err);
setError(err.message);
setLoading(false);
});
});
return () => {
unsubAuth();
if (unsubFirestore) unsubFirestore();
};
}, [limitCount]);
return { alerts, loading, error };
}
export function useUnacknowledgedAlerts() {
const [alerts, setAlerts] = useState<AlertEvent[]>([]);
useEffect(() => {
let unsubFirestore: (() => void) | undefined;
const unsubAuth = onAuthStateChanged(auth, (user) => {
if (unsubFirestore) { unsubFirestore(); unsubFirestore = undefined; }
if (!user) {
setAlerts([]);
return;
}
const q = query(
collection(db, "alert_events"),
where("acknowledged", "==", false),
orderBy("triggered_at", "desc"),
limit(100)
);
unsubFirestore = onSnapshot(q, (snap) => {
setAlerts(snap.docs.map((d) => {
const data = d.data();
return { ...data, triggered_at: toISO(data.triggered_at) } as AlertEvent;
}));
}, (err: FirestoreError) => { console.error("useUnacknowledgedAlerts:", err); });
});
return () => {
unsubAuth();
if (unsubFirestore) unsubFirestore();
};
}, []);
return alerts;
}
drb-frontend/lib/useIncidents.ts
+95
View File
@@ -0,0 +1,95 @@
"use client";
import { useEffect, useState } from "react";
import { collection, 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";
const toISO = (v: unknown): string =>
(v as { toDate?: () => Date })?.toDate?.()?.toISOString?.() ??
(typeof v === "string" ? v : new Date().toISOString());
export function useIncidents(limitCount = 100) {
const [incidents, setIncidents] = useState<IncidentRecord[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
let unsubFirestore: (() => void) | undefined;
const unsubAuth = onAuthStateChanged(auth, (user) => {
if (unsubFirestore) { unsubFirestore(); unsubFirestore = undefined; }
if (!user) {
setIncidents([]);
setLoading(false);
return;
}
const q = query(
collection(db, "incidents"),
orderBy("started_at", "desc"),
limit(limitCount)
);
unsubFirestore = onSnapshot(q, (snap) => {
setIncidents(snap.docs.map((d) => {
const data = d.data();
return {
...data,
started_at: toISO(data.started_at),
updated_at: toISO(data.updated_at),
} as IncidentRecord;
}));
setLoading(false);
}, (err: FirestoreError) => {
console.error("useIncidents:", err);
setError(err.message);
setLoading(false);
});
});
return () => {
unsubAuth();
if (unsubFirestore) unsubFirestore();
};
}, [limitCount]);
return { incidents, loading, error };
}
export function useActiveIncidents() {
const [incidents, setIncidents] = useState<IncidentRecord[]>([]);
useEffect(() => {
let unsubFirestore: (() => void) | undefined;
const unsubAuth = onAuthStateChanged(auth, (user) => {
if (unsubFirestore) { unsubFirestore(); unsubFirestore = undefined; }
if (!user) {
setIncidents([]);
return;
}
const q = query(collection(db, "incidents"), where("status", "==", "active"));
unsubFirestore = onSnapshot(q, (snap) => {
setIncidents(snap.docs.map((d) => {
const data = d.data();
return {
...data,
started_at: toISO(data.started_at),
updated_at: toISO(data.updated_at),
} as IncidentRecord;
}));
}, (err: FirestoreError) => { console.error("useActiveIncidents:", err); });
});
return () => {
unsubAuth();
if (unsubFirestore) unsubFirestore();
};
}, []);
return incidents;
}