feat: explainable activity log — reasons, subscriber names, snapshot gaps
The live activity feed flagged anomalies with no explanation and showed opaque session keys. Make events self-describing and clickable. - Clickable feed rows → read-only event-detail modal: humanized fields, entry/exit snapshots, and signed-chain provenance collapsed behind an audit disclosure (operator sees the story, auditor expands for crypto). - Localized reason codes (backend i18n): the signed ledger now carries a stable REASON_CODE + params (+ English fallback) instead of free-text English. The UI translates via reason.<code> catalogs in sq/en, so an Albanian operator reads Albanian — from the same immutable event. Adding a language is a catalog change, no re-signing. (@parking/shared REASON_CODES, reasonPayload; entry/exit/subscription flows emit codes.) - Subscriber-name resolution: a SUBSESS-… occurrence now shows the subscription holder's name (fallback "Abonent"/"Subscriber"). Resolved read-time server-side (events API + WS push) as a non-signed subscriberLabel; cached with invalidation on subscription edit/delete. - Failed-snapshot visibility: a camera that was attempted but unreachable now shows a "⚠ camera unreachable" tile instead of a silent gap. The snapshots API returns failures[] from telemetry, filtered so a recovered capture shows no stale warning. Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { useRef, useState, type ReactNode } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { fetchEvents, fetchOccupancy, type LedgerEvent, type Occupancy } from "./api.js";
|
||||
import { formatMoney } from "./lib/format.js";
|
||||
import { qk } from "./lib/query.js";
|
||||
import { useLiveStore } from "./lib/live-store.js";
|
||||
import { useShift } from "./lib/use-shift.js";
|
||||
@@ -9,6 +10,9 @@ import { Panel } from "./ui/Panel.js";
|
||||
import { StatusDot } from "./ui/StatusDot.js";
|
||||
import { BoothPayModal } from "./BoothPayModal.js";
|
||||
import { ActiveSessions } from "./ActiveSessions.js";
|
||||
import { Modal } from "./ui/Modal.js";
|
||||
import { SnapshotStrip } from "./ui/SnapshotStrip.js";
|
||||
import { renderReason } from "./lib/reason.js";
|
||||
|
||||
// The live operator booth view — the real-time heart of the console. Occupancy
|
||||
// gauge + a streaming entry/exit/payment ticker. Query owns the initial load and
|
||||
@@ -70,20 +74,226 @@ function OccupancyGauge({ occ }: { occ: Occupancy }) {
|
||||
);
|
||||
}
|
||||
|
||||
function EventRow({ e }: { e: LedgerEvent }) {
|
||||
/** Translated classification badges derived from a payload's boolean flags. Unlike
|
||||
* `reason` (an immutable English sentence baked into the signed ledger, shown
|
||||
* verbatim), these are computed client-side so they CAN be localized. They give a
|
||||
* glanceable "what kind of anomaly" tag without parsing the free-text reason. */
|
||||
function eventBadges(p: LedgerEvent["payload"]): string[] {
|
||||
if (!p) return [];
|
||||
const keys: string[] = [];
|
||||
if (p.entryRefused) keys.push("booth.badgeEntryRefused");
|
||||
if (p.exitRefused) keys.push("booth.badgeExitRefused");
|
||||
if (p.full) keys.push("booth.badgeLotFull");
|
||||
if (p.exitOpenFailed) keys.push("booth.badgeBarrierFailed");
|
||||
if (p.permitRefused) keys.push("booth.badgeSubRefused");
|
||||
if (p.ticketPrinted === false) keys.push("booth.badgeNoTicket");
|
||||
if (p.source === "manual") keys.push("booth.badgeManualOpen");
|
||||
return keys;
|
||||
}
|
||||
|
||||
/** A short money summary for payment events (e.g. "350.00 ALL"). */
|
||||
function paymentSummary(p: LedgerEvent["payload"]): string | null {
|
||||
if (!p || typeof p.amountMinor !== "number" || !p.currency) return null;
|
||||
return formatMoney(p.amountMinor, p.currency);
|
||||
}
|
||||
|
||||
/** What to SHOW for an event's actor. A subscription occurrence has an opaque
|
||||
* `SUBSESS-…` identity; the server resolves the holder's name into `subscriberLabel`,
|
||||
* so we show that (e.g. "Aqif Kopertoni") instead. Otherwise the identity itself. */
|
||||
function displayIdentity(e: LedgerEvent): string {
|
||||
return e.subscriberLabel ?? e.identity ?? "—";
|
||||
}
|
||||
|
||||
function EventRow({ e, onOpen }: { e: LedgerEvent; onOpen: (e: LedgerEvent) => void }) {
|
||||
const { t } = useTranslation();
|
||||
const style = EVENT_STYLE[e.type];
|
||||
const label = style ? t(style.labelKey) : e.type.toUpperCase();
|
||||
const isAnomaly = e.type === "anomaly";
|
||||
const p = e.payload;
|
||||
// Localize the reason from the signed reasonCode (falls back to the English text on
|
||||
// legacy events). Anomalies ALWAYS get a detail line so a red flag is never silent.
|
||||
const reason = renderReason(p, t);
|
||||
const amount = paymentSummary(p);
|
||||
const badges = eventBadges(p);
|
||||
const detail = reason ?? amount ?? (isAnomaly ? t("booth.evtNoReason") : null);
|
||||
const showDetail = detail != null || badges.length > 0;
|
||||
|
||||
// The whole row is a button → opens the event-detail modal (full payload + the
|
||||
// session's entry/exit snapshots). A grid keeps the time/label/identity/index
|
||||
// columns aligned across rows; the detail line lives in its own row, indented to
|
||||
// start under the identity column so it never collides with the ticket code.
|
||||
return (
|
||||
<div className="flex items-center gap-3 border-b border-term-border/50 py-1 text-[12px] tabular-nums">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpen(e)}
|
||||
className={`grid w-full grid-cols-[auto_5rem_1fr_auto] items-center gap-x-3 gap-y-0.5 border-b border-term-border/50 px-1 py-1 text-left text-[12px] tabular-nums hover:bg-term-panel-2 ${
|
||||
isAnomaly ? "bg-term-red/5" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="text-term-muted">{hhmmss(e.occurredAt)}</span>
|
||||
<span className={`w-20 shrink-0 font-semibold ${style?.color ?? "text-term-text"}`}>{label}</span>
|
||||
<span className="truncate text-term-text">{e.identity ?? "—"}</span>
|
||||
<span className="ml-auto text-term-muted">#{e.index}</span>
|
||||
<span className={`shrink-0 font-semibold ${style?.color ?? "text-term-text"}`}>{label}</span>
|
||||
<span className="truncate text-term-text">{displayIdentity(e)}</span>
|
||||
<span className="text-term-muted">#{e.index}</span>
|
||||
{showDetail && (
|
||||
<div className="col-start-3 col-end-5 flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
{badges.map((k) => (
|
||||
<span
|
||||
key={k}
|
||||
className="rounded-sm bg-term-red/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide text-term-red"
|
||||
>
|
||||
{t(k)}
|
||||
</span>
|
||||
))}
|
||||
{detail && (
|
||||
<span className={`text-[11px] ${isAnomaly ? "text-term-red/90" : "text-term-muted"}`}>{detail}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/** One label/value line in the event-detail modal. */
|
||||
function DetailRow({ label, children }: { label: string; children: ReactNode }) {
|
||||
return (
|
||||
<div className="grid grid-cols-[8rem_1fr] gap-3 border-b border-term-border/40 py-1.5 text-[12px]">
|
||||
<span className="text-[11px] uppercase tracking-wider text-term-muted">{label}</span>
|
||||
<span className="min-w-0 break-words text-term-text">{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Full read-only detail for one ledger event: business fields + the human-readable
|
||||
* reason + the session's entry/exit snapshots, then the signed-chain provenance
|
||||
* (signature/prev-hash/key) for an audit trail. Read-only — the ledger is immutable;
|
||||
* this only DISPLAYS the signed record. */
|
||||
function EventDetailModal({ e, onClose }: { e: LedgerEvent; onClose: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const style = EVENT_STYLE[e.type];
|
||||
const label = style ? t(style.labelKey) : e.type.toUpperCase();
|
||||
const p = e.payload;
|
||||
const reason = renderReason(p, t);
|
||||
const amount = paymentSummary(p);
|
||||
const badges = eventBadges(p);
|
||||
const isAnomaly = e.type === "anomaly";
|
||||
|
||||
// Pretty money for any minor-unit amount in the payload.
|
||||
const money =
|
||||
p && typeof p.amountMinor === "number" && typeof p.currency === "string"
|
||||
? formatMoney(p.amountMinor, p.currency)
|
||||
: null;
|
||||
// Pull out the business fields worth a labelled row. Everything else (and the raw
|
||||
// bytes) lives behind the audit disclosure — the operator sees a clean summary.
|
||||
const sessionRef = typeof p?.sessionRef === "string" ? p.sessionRef : null;
|
||||
const plate = typeof p?.plate === "string" ? p.plate : null;
|
||||
const category = typeof p?.category === "string" ? p.category : null;
|
||||
const operator = typeof p?.operator === "string" ? p.operator : null;
|
||||
const tariffVersionId = typeof p?.tariffVersionId === "string" ? p.tariffVersionId : null;
|
||||
|
||||
return (
|
||||
<Modal open onClose={onClose} title={t("booth.eventDetail")} width="max-w-2xl">
|
||||
<div className="flex flex-col gap-3">
|
||||
{/* Headline: the type + localized reason, prominent for anomalies. */}
|
||||
<div className={`rounded-term border p-3 ${isAnomaly ? "border-term-red/50 bg-term-red/5" : "border-term-border bg-term-panel-2"}`}>
|
||||
<div className={`text-sm font-bold uppercase tracking-widest ${style?.color ?? "text-term-text"}`}>{label}</div>
|
||||
{(reason || money) && (
|
||||
<div className={`mt-1 text-[13px] ${isAnomaly ? "text-term-red/90" : "text-term-text"}`}>
|
||||
{reason ?? money}
|
||||
</div>
|
||||
)}
|
||||
{!reason && !money && isAnomaly && (
|
||||
<div className="mt-1 text-[13px] text-term-red/90">{t("booth.evtNoReason")}</div>
|
||||
)}
|
||||
{badges.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{badges.map((k) => (
|
||||
<span
|
||||
key={k}
|
||||
className="rounded-sm bg-term-red/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide text-term-red"
|
||||
>
|
||||
{t(k)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Humanized fields — labelled rows, not raw JSON. Only what applies renders. */}
|
||||
<div>
|
||||
<DetailRow label={t("booth.edTime")}>{new Date(e.occurredAt).toLocaleString()}</DetailRow>
|
||||
<DetailRow label={t("booth.edIndex")}>#{e.index}</DetailRow>
|
||||
{e.direction && <DetailRow label={t("booth.edDirection")}>{e.direction}</DetailRow>}
|
||||
{e.source && <DetailRow label={t("booth.edSource")}>{e.source}</DetailRow>}
|
||||
<DetailRow label={t("booth.edIdentity")}>{displayIdentity(e)}</DetailRow>
|
||||
{/* When we showed a subscriber NAME above, also expose the raw occurrence id
|
||||
(the SUBSESS-… session key) for traceability against the ledger. */}
|
||||
{e.subscriberLabel && e.identity && (
|
||||
<DetailRow label={t("booth.edOccurrence")}>
|
||||
<code className="text-[11px] text-term-muted">{e.identity}</code>
|
||||
</DetailRow>
|
||||
)}
|
||||
{money && (
|
||||
<DetailRow label={t("booth.edAmount")}>
|
||||
<span className="text-term-cyan">{money}</span>
|
||||
</DetailRow>
|
||||
)}
|
||||
{typeof p?.tender === "string" && <DetailRow label={t("booth.edTender")}>{p.tender}</DetailRow>}
|
||||
{category && <DetailRow label={t("booth.edCategory")}>{category}</DetailRow>}
|
||||
{plate && <DetailRow label={t("booth.edPlate")}>{plate}</DetailRow>}
|
||||
{operator && <DetailRow label={t("booth.edOperator")}>{operator}</DetailRow>}
|
||||
{sessionRef && sessionRef !== e.identity && (
|
||||
<DetailRow label={t("booth.edSession")}>{sessionRef}</DetailRow>
|
||||
)}
|
||||
{tariffVersionId && (
|
||||
<DetailRow label={t("booth.edTariffVersion")}>
|
||||
<code className="text-[11px] text-term-muted">{tariffVersionId}</code>
|
||||
</DetailRow>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* The entry/exit evidence images for this session's identity. */}
|
||||
{e.identity && (
|
||||
<div>
|
||||
<div className="mb-1.5 text-[11px] uppercase tracking-wider text-term-muted">{t("booth.edSnapshots")}</div>
|
||||
<SnapshotStrip identity={e.identity} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Audit data — collapsed by default. The signed-chain provenance (signature,
|
||||
key, prev-hash) and the raw payload are an auditor's concern, not the
|
||||
operator's; tucking them behind a disclosure keeps the common view clean
|
||||
while preserving the tamper-evidence trail on demand. */}
|
||||
<details className="rounded-term border border-term-border bg-term-panel-2">
|
||||
<summary className="cursor-pointer select-none px-3 py-2 text-[11px] uppercase tracking-wider text-term-muted hover:text-term-text">
|
||||
{t("booth.edAuditData")}
|
||||
</summary>
|
||||
<div className="border-t border-term-border px-3 pb-3 pt-1">
|
||||
<DetailRow label={t("booth.edSignature")}>
|
||||
<code className="break-all text-[11px] text-term-muted">{e.signature}</code>
|
||||
</DetailRow>
|
||||
<DetailRow label={t("booth.edKeyId")}>
|
||||
<code className="text-[11px] text-term-muted">{e.keyId}</code>
|
||||
</DetailRow>
|
||||
<DetailRow label={t("booth.edPrevHash")}>
|
||||
<code className="break-all text-[11px] text-term-muted">{e.prevHash ?? "—"}</code>
|
||||
</DetailRow>
|
||||
<div className="mb-1.5 mt-3 text-[11px] uppercase tracking-wider text-term-muted">
|
||||
{t("booth.edRawPayload")}
|
||||
</div>
|
||||
{p && Object.keys(p).length > 0 ? (
|
||||
<pre className="overflow-x-auto rounded-term border border-term-border bg-term-bg p-2 text-[11px] text-term-text">
|
||||
{JSON.stringify(p, null, 2)}
|
||||
</pre>
|
||||
) : (
|
||||
<div className="text-[12px] text-term-muted">{t("booth.edNoPayload")}</div>
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
/** Ticket entry: an HID barcode scanner types the id and presses Enter; a manual
|
||||
* operator types it. Either way, submit opens the pay/exit modal for that id. The
|
||||
* input auto-focuses and re-focuses after a scan so the scanner always lands here. */
|
||||
@@ -138,6 +348,8 @@ export function BoothScreen() {
|
||||
|
||||
// The ticket currently open in the pay/exit modal (null = no modal).
|
||||
const [activeTicket, setActiveTicket] = useState<string | null>(null);
|
||||
// The ledger event open in the read-only detail modal (null = closed).
|
||||
const [detailEvent, setDetailEvent] = useState<LedgerEvent | null>(null);
|
||||
|
||||
// Live overlays from the WS store.
|
||||
const liveOcc = useLiveStore((s) => s.occupancy);
|
||||
@@ -195,12 +407,13 @@ export function BoothScreen() {
|
||||
) : events.length === 0 ? (
|
||||
<div className="text-term-muted">{eventsQuery.isLoading ? t("common.loading") : t("booth.noEventsYet")}</div>
|
||||
) : (
|
||||
events.map((e) => <EventRow key={e.id} e={e} />)
|
||||
events.map((e) => <EventRow key={e.id} e={e} onOpen={setDetailEvent} />)
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
{activeTicket && <BoothPayModal identity={activeTicket} onClose={() => setActiveTicket(null)} />}
|
||||
{detailEvent && <EventDetailModal e={detailEvent} onClose={() => setDetailEvent(null)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+14
-3
@@ -747,9 +747,20 @@ export interface SnapshotMeta {
|
||||
capturedAt: string;
|
||||
}
|
||||
|
||||
/** Snapshot metadata for a session identity (newest first). Image bytes are at
|
||||
* `/api/snapshots/:id` — use that URL directly as an <img src>. */
|
||||
export function fetchSnapshots(identity: string): Promise<{ snapshots: SnapshotMeta[] }> {
|
||||
/** A capture that was ATTEMPTED but failed (camera offline, config) — surfaced so a
|
||||
* missing image isn't a silent gap. From snapshot telemetry, not the image store. */
|
||||
export interface SnapshotFailure {
|
||||
direction: "entry" | "exit" | null;
|
||||
deviceId: string;
|
||||
error: string;
|
||||
occurredAt: string;
|
||||
}
|
||||
|
||||
/** Snapshot metadata for a session identity (newest first) PLUS failed capture
|
||||
* attempts. Image bytes are at `/api/snapshots/:id` — use that as an <img src>. */
|
||||
export function fetchSnapshots(
|
||||
identity: string,
|
||||
): Promise<{ snapshots: SnapshotMeta[]; failures?: SnapshotFailure[] }> {
|
||||
return apiFetch(`/api/snapshots/by-identity/${encodeURIComponent(identity)}`);
|
||||
}
|
||||
|
||||
|
||||
@@ -103,6 +103,67 @@ export const en: Catalog = {
|
||||
evtShiftZ: "SHIFT Z",
|
||||
evtCashMovement: "CASH",
|
||||
evtAnomaly: "ANOMALY",
|
||||
// live-feed event detail line + classification badges (computed from payload)
|
||||
evtNoReason: "no reason recorded",
|
||||
badgeEntryRefused: "entry refused",
|
||||
badgeExitRefused: "exit refused",
|
||||
badgeLotFull: "lot full",
|
||||
badgeBarrierFailed: "barrier did not open",
|
||||
badgeManualOpen: "manual open",
|
||||
badgeSubRefused: "subscription refused",
|
||||
badgeNoTicket: "ticket not printed",
|
||||
feedSourceBooth: "booth",
|
||||
feedSourceReader: "reader",
|
||||
// event-detail modal
|
||||
eventDetail: "Event detail",
|
||||
edType: "Type",
|
||||
edTime: "Time",
|
||||
edIndex: "Ledger index",
|
||||
edDirection: "Direction",
|
||||
edSource: "Source",
|
||||
edIdentity: "Identity",
|
||||
edReason: "Reason",
|
||||
edSnapshots: "Snapshots",
|
||||
edPayload: "Signed payload",
|
||||
edChain: "Chain",
|
||||
edSignature: "Signature",
|
||||
edKeyId: "Key",
|
||||
edPrevHash: "Prev hash",
|
||||
edNoPayload: "No payload on this event.",
|
||||
edCopy: "Copy",
|
||||
edCopied: "Copied",
|
||||
edDetails: "Details",
|
||||
edAuditData: "Audit data (signature & chain)",
|
||||
edAmount: "Amount",
|
||||
edTender: "Tender",
|
||||
edSession: "Session",
|
||||
edPlate: "Plate",
|
||||
edCategory: "Category",
|
||||
edOperator: "Operator",
|
||||
edTariffVersion: "Tariff version",
|
||||
edRawPayload: "Raw signed payload",
|
||||
edOccurrence: "Occurrence id",
|
||||
subscriber: "Subscriber",
|
||||
},
|
||||
// Localized messages for the signed REASON_CODES (see @parking/shared). Keys MUST
|
||||
// match the codes 1:1; {{param}} placeholders are filled from the event's
|
||||
// reasonParams. Legacy events with no code fall back to the signed English `reason`.
|
||||
reason: {
|
||||
"entry.refused.full": "Entry refused — lot full ({{count}}/{{capacity}})",
|
||||
"entry.held.noTicket": "Entry held — ticket not printed: {{detail}}",
|
||||
"exit.refused.closed": "Exit refused — session already closed",
|
||||
"exit.refused.noSession": "Exit refused — no open session for ticket",
|
||||
"exit.refused.unpaid": "Exit refused — not paid (take payment first)",
|
||||
"exit.refused.graceExpired": "Exit refused — walk-back grace expired (top-up required)",
|
||||
"exit.open.noBarrier": "Exit recorded, but no exit barrier is configured — open manually",
|
||||
"exit.open.unavailable": "Exit recorded, but the barrier is unavailable — open manually",
|
||||
"exit.open.failed": "Exit recorded, but the barrier did not open — open manually",
|
||||
"exit.freeGrace": "Free entry-grace (no charge)",
|
||||
"exit.manualOpen": "Manual barrier open (human intervention)",
|
||||
"sub.refused.notFound": "Subscription refused — not found",
|
||||
"sub.refused.outOfWindow": "Subscription refused — {{status}}/out-of-window",
|
||||
"sub.refused.noSession": "Subscription exit with no open session (already out / never entered)",
|
||||
"sub.refused.atCapacity": "Subscription refused — at capacity ({{inUse}}/{{max}} cars in)",
|
||||
},
|
||||
tariff: {
|
||||
title: "Tariff",
|
||||
@@ -446,5 +507,8 @@ export const en: Catalog = {
|
||||
reprinting: "printing…",
|
||||
noSnapshots: "no snapshots",
|
||||
loadingSnapshots: "loading snapshots…",
|
||||
snapEntry: "entry",
|
||||
snapExit: "exit",
|
||||
snapFailed: "camera unreachable",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -105,6 +105,66 @@ export const sq = {
|
||||
evtShiftZ: "TURN Z",
|
||||
evtCashMovement: "ARKË",
|
||||
evtAnomaly: "ANOMALI",
|
||||
// rreshti i detajeve të eventit live + etiketat e klasifikimit (nga payload)
|
||||
evtNoReason: "pa arsye të regjistruar",
|
||||
badgeEntryRefused: "hyrje e refuzuar",
|
||||
badgeExitRefused: "dalje e refuzuar",
|
||||
badgeLotFull: "parkimi plot",
|
||||
badgeBarrierFailed: "barriera nuk u hap",
|
||||
badgeManualOpen: "hapje manuale",
|
||||
badgeSubRefused: "abonimi u refuzua",
|
||||
badgeNoTicket: "bileta nuk u printua",
|
||||
feedSourceBooth: "kabinë",
|
||||
feedSourceReader: "lexues",
|
||||
// dritarja e detajeve të eventit
|
||||
eventDetail: "Detajet e eventit",
|
||||
edType: "Lloji",
|
||||
edTime: "Ora",
|
||||
edIndex: "Indeksi në regjistër",
|
||||
edDirection: "Drejtimi",
|
||||
edSource: "Burimi",
|
||||
edIdentity: "Identiteti",
|
||||
edReason: "Arsyeja",
|
||||
edSnapshots: "Fotot",
|
||||
edPayload: "Të dhënat e nënshkruara",
|
||||
edChain: "Zinxhiri",
|
||||
edSignature: "Nënshkrimi",
|
||||
edKeyId: "Çelësi",
|
||||
edPrevHash: "Hash-i i mëparshëm",
|
||||
edNoPayload: "Ky event nuk ka të dhëna shtesë.",
|
||||
edCopy: "Kopjo",
|
||||
edCopied: "U kopjua",
|
||||
edDetails: "Detajet",
|
||||
edAuditData: "Të dhënat e auditimit (nënshkrimi & zinxhiri)",
|
||||
edAmount: "Shuma",
|
||||
edTender: "Mënyra e pagesës",
|
||||
edSession: "Sesioni",
|
||||
edPlate: "Targa",
|
||||
edCategory: "Kategoria",
|
||||
edOperator: "Operatori",
|
||||
edTariffVersion: "Versioni i tarifës",
|
||||
edRawPayload: "Të dhënat e papërpunuara të nënshkruara",
|
||||
edOccurrence: "ID e hyrjes",
|
||||
subscriber: "Abonent",
|
||||
},
|
||||
// Mesazhet e përkthyera për REASON_CODES e nënshkruara (shih @parking/shared).
|
||||
// Çelësat përputhen 1:1 me kodet; {{param}} mbushet nga reasonParams i eventit.
|
||||
reason: {
|
||||
"entry.refused.full": "Hyrja u refuzua — parkimi plot ({{count}}/{{capacity}})",
|
||||
"entry.held.noTicket": "Hyrja u mbajt — bileta nuk u printua: {{detail}}",
|
||||
"exit.refused.closed": "Dalja u refuzua — sesioni është mbyllur tashmë",
|
||||
"exit.refused.noSession": "Dalja u refuzua — biletë e panjohur",
|
||||
"exit.refused.unpaid": "Dalja u refuzua — e papaguar (bëj pagesën në fillim)",
|
||||
"exit.refused.graceExpired": "Dalja u refuzua — afati i daljes skadoi (kërkohet pagesë shtesë)",
|
||||
"exit.open.noBarrier": "Dalja u regjistrua, por nuk ka barrierë daljeje të konfiguruar — hape me dorë",
|
||||
"exit.open.unavailable": "Dalja u regjistrua, por barriera është e padisponueshme — hape me dorë",
|
||||
"exit.open.failed": "Dalja u regjistrua, por barriera nuk u hap — hape me dorë",
|
||||
"exit.freeGrace": "Periudhë pa pagesë në hyrje (pa tarifë)",
|
||||
"exit.manualOpen": "Hapje manuale e barrierës (ndërhyrje njerëzore)",
|
||||
"sub.refused.notFound": "Abonimi u refuzua — nuk u gjet",
|
||||
"sub.refused.outOfWindow": "Abonimi u refuzua — {{status}}/jashtë afatit",
|
||||
"sub.refused.noSession": "Dalje me abonim pa sesion të hapur (tashmë jashtë / nuk ka hyrë kurrë)",
|
||||
"sub.refused.atCapacity": "Abonimi u refuzua — në kapacitet ({{inUse}}/{{max}} makina brenda)",
|
||||
},
|
||||
tariff: {
|
||||
title: "Tarifa",
|
||||
@@ -459,6 +519,9 @@ export const sq = {
|
||||
// snapshots
|
||||
noSnapshots: "asnjë foto",
|
||||
loadingSnapshots: "duke ngarkuar fotot…",
|
||||
snapEntry: "hyrje",
|
||||
snapExit: "dalje",
|
||||
snapFailed: "kamera e paarritshme",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { TFunction } from "i18next";
|
||||
import { REASON_CODES, type LedgerEvent } from "@parking/shared";
|
||||
|
||||
// Localize a signed event's reason. The ledger signs a STABLE `reasonCode` (+ params)
|
||||
// plus an English `reason` fallback (see @parking/shared REASON_CODES). We translate
|
||||
// the code via the `reason.<code>` catalog so an Albanian operator reads Albanian and
|
||||
// an English operator reads English — from the SAME immutable event. Legacy events
|
||||
// (signed before reason codes existed) carry only `reason`, so we show that verbatim.
|
||||
|
||||
const CODE_SET = new Set<string>(REASON_CODES);
|
||||
|
||||
/** The localized reason sentence for an event, or null if it has no reason at all. */
|
||||
export function renderReason(payload: LedgerEvent["payload"], t: TFunction): string | null {
|
||||
if (!payload) return null;
|
||||
const code = typeof payload.reasonCode === "string" ? payload.reasonCode : null;
|
||||
if (code && CODE_SET.has(code)) {
|
||||
// i18next fills {{param}} from reasonParams; an absent key renders the raw token.
|
||||
return t(`reason.${code}`, (payload.reasonParams ?? {}) as Record<string, unknown>);
|
||||
}
|
||||
// No code (legacy) or an unknown code (forward-compat) → the signed English fallback.
|
||||
return typeof payload.reason === "string" ? payload.reason : null;
|
||||
}
|
||||
@@ -17,20 +17,26 @@ export function SnapshotStrip({ identity }: { identity: string }) {
|
||||
const [zoom, setZoom] = useState<string | null>(null);
|
||||
|
||||
const shots = data?.snapshots ?? [];
|
||||
const failures = data?.failures ?? [];
|
||||
|
||||
/** Localized direction label for a snapshot/failure tile. */
|
||||
const dirLabel = (dir: "entry" | "exit" | null): string =>
|
||||
dir === "entry" ? t("pay.snapEntry") : dir === "exit" ? t("pay.snapExit") : "—";
|
||||
|
||||
if (isLoading) return <div className="text-[11px] text-term-muted">{t("pay.loadingSnapshots")}</div>;
|
||||
if (shots.length === 0) return <div className="text-[11px] text-term-muted">{t("pay.noSnapshots")}</div>;
|
||||
if (shots.length === 0 && failures.length === 0)
|
||||
return <div className="text-[11px] text-term-muted">{t("pay.noSnapshots")}</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{shots.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
type="button"
|
||||
onClick={() => setZoom(s.id)}
|
||||
className="group flex flex-col items-center gap-1 rounded-term border border-term-border bg-term-panel-2 p-1 hover:border-term-amber"
|
||||
title={`${s.direction ?? "snapshot"} · ${new Date(s.capturedAt).toLocaleString()}`}
|
||||
title={`${dirLabel(s.direction)} · ${new Date(s.capturedAt).toLocaleString()}`}
|
||||
>
|
||||
<img
|
||||
src={snapshotImageUrl(s.id)}
|
||||
@@ -43,10 +49,25 @@ export function SnapshotStrip({ identity }: { identity: string }) {
|
||||
s.direction === "entry" ? "text-term-green" : s.direction === "exit" ? "text-term-red" : "text-term-muted"
|
||||
}`}
|
||||
>
|
||||
{s.direction ?? "—"}
|
||||
{dirLabel(s.direction)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Failed captures — a placeholder tile so an absent image is explained, not
|
||||
silently missing. Shown only when no successful shot exists for the same
|
||||
direction (the server already filters recovered captures out). */}
|
||||
{failures.map((f, i) => (
|
||||
<div
|
||||
key={`fail-${f.direction ?? "both"}-${i}`}
|
||||
className="flex h-[6.75rem] w-28 flex-col items-center justify-center gap-1 rounded-term border border-dashed border-term-amber/60 bg-term-amber/5 p-1 text-center"
|
||||
title={`${dirLabel(f.direction)} · ${f.error}${f.occurredAt ? ` · ${new Date(f.occurredAt).toLocaleString()}` : ""}`}
|
||||
>
|
||||
<span className="text-lg leading-none text-term-amber">⚠</span>
|
||||
<span className="text-[9px] uppercase tracking-wider text-term-amber">{dirLabel(f.direction)}</span>
|
||||
<span className="px-1 text-[9px] leading-tight text-term-muted">{t("pay.snapFailed")}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{zoom && (
|
||||
|
||||
Reference in New Issue
Block a user