feat(booth): active sessions panel + audited barrier re-open

Active Sessions panel lists sessions that are open OR exited-but-within-grace (barrier state is unconfirmed, so a paid car is presumed possibly-present until grace expires). Row click → pay/exit modal; 'Open barrier' (paid sessions only — no payment, no button) fires a human-intervention re-pulse signed as an attributed anomaly, never a second vehicle_exit. Wiki: booth-exit-flow.md. Note: the backend (PayStation.activeSessions, ExitFlow.reopenBarrier, routes, api.ts) landed with the prior commit's shared files.
2026-06-18 11:05:26 +02:00
parent 06dab1e790
commit eb3dc18e67
2 changed files with 246 additions and 0 deletions
@@ -0,0 +1,115 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { fetchActiveSessions, reopenBarrier, type ActiveSession } from "./api.js";
+import { qk } from "./lib/query.js";
+import { formatDuration, formatTime } from "./lib/format.js";
+import { Panel } from "./ui/Panel.js";
+
+// Active Sessions panel. A session is "active" while still inside OR exited-but-
+// within-grace (the barrier is UNCONFIRMED, so a paid/exited car is presumed
+// possibly-present until grace runs out). Lets the operator find a stuck car —
+// damaged ticket, dead scanner, or a phantom barrier re-close — without a scan:
+//   - click a row → the pay/exit modal (pay an unpaid car, or review),
+//   - "Open barrier" (PAID sessions only) → an audited human-intervention re-pulse.
+// No payment → no Open barrier button (the no-unpaid-bypass rule).
+// See wiki/concepts/booth-exit-flow.md.
+
+function statusBadge(s: ActiveSession): { label: string; cls: string } {
+  if (!s.open && s.withinGrace) return { label: "exiting", cls: "text-term-cyan" };
+  if (s.paidAt) return { label: "paid", cls: "text-term-green" };
+  return { label: "unpaid", cls: "text-term-amber" };
+}
+
+export function ActiveSessions({ onPick }: { onPick: (identity: string) => void }) {
+  const qc = useQueryClient();
+  const { data, isLoading } = useQuery({
+    queryKey: qk.activeSessions,
+    queryFn: fetchActiveSessions,
+    // Belt-and-braces refresh in case a grace window expires with no ledger event
+    // to invalidate the cache (the WS only pushes on appends).
+    refetchInterval: 15_000,
+  });
+
+  const reopen = useMutation({
+    mutationFn: (identity: string) => reopenBarrier(identity),
+    onSettled: () => {
+      void qc.invalidateQueries({ queryKey: qk.activeSessions });
+      void qc.invalidateQueries({ queryKey: qk.events });
+    },
+  });
+  const [reopenMsg, setReopenMsg] = useState<{ id: string; text: string; ok: boolean } | null>(null);
+
+  const sessions = data?.sessions ?? [];
+
+  async function handleReopen(s: ActiveSession) {
+    setReopenMsg(null);
+    try {
+      const r = await reopen.mutateAsync(s.identity);
+      setReopenMsg({
+        id: s.identity,
+        ok: r.opened,
+        text: r.opened ? "barrier opened" : r.reason ?? "open manually",
+      });
+    } catch (e) {
+      setReopenMsg({ id: s.identity, ok: false, text: (e as Error).message });
+    }
+  }
+
+  return (
+    <Panel
+      title="Active sessions"
+      right={<span className="text-[10px] uppercase tracking-wider text-term-muted">{sessions.length} inside</span>}
+      className="min-h-0"
+    >
+      <div className="h-full overflow-y-auto pr-1">
+        {sessions.length === 0 ? (
+          <div className="text-term-muted">{isLoading ? "loading…" : "no active sessions."}</div>
+        ) : (
+          sessions.map((s) => {
+            const badge = statusBadge(s);
+            const msg = reopenMsg?.id === s.identity ? reopenMsg : null;
+            return (
+              <div
+                key={s.identity}
+                className="flex items-center gap-3 border-b border-term-border/50 py-1.5 text-[12px] tabular-nums"
+              >
+                <button
+                  type="button"
+                  onClick={() => onPick(s.identity)}
+                  className="flex flex-1 items-center gap-3 text-left hover:text-term-amber"
+                  title="Open pay / exit"
+                >
+                  <span className="text-term-text">{s.identity}</span>
+                  <span className="text-term-muted">in {formatTime(s.enteredAt)}</span>
+                  <span className="text-term-muted">{formatDuration(s.enteredAt, new Date().toISOString())}</span>
+                  <span className={`ml-auto w-16 text-right font-semibold uppercase ${badge.cls}`}>{badge.label}</span>
+                </button>
+
+                {/* Open barrier — PAID sessions only (no payment, no button). */}
+                {s.paidAt ? (
+                  <button
+                    type="button"
+                    disabled={reopen.isPending}
+                    onClick={() => handleReopen(s)}
+                    className="shrink-0 rounded-term border border-term-cyan px-2 py-0.5 text-[10px] uppercase tracking-wider text-term-cyan hover:bg-term-cyan/10 disabled:opacity-50"
+                    title="Human-intervention barrier open (audited)"
+                  >
+                    Open barrier
+                  </button>
+                ) : (
+                  <span className="w-[88px] shrink-0" />
+                )}
+
+                {msg && (
+                  <span className={`shrink-0 text-[10px] ${msg.ok ? "text-term-green" : "text-term-red"}`}>
+                    {msg.text}
+                  </span>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </Panel>
+  );
+}