// NO PROD JSON API (bucket B — feed is a DataTables render payload or // {"html":...}, not data) — mock until backend (see PROD_API_INVENTORY.md) // Represents: GET /payments/activity/ · AdminPaymentsController::show('activity') → activityData() — see docs/ISYSTEM_REFERENCE.md §Batch 10.1 /* Traced Aug 2026 (architecture item 2). This screen was built before ISYSTEM_REFERENCE existed and its data shape had never been matched to a controller. It IS a real isystem section: activityData() builds a read-only operator audit feed, paginated, scoped to the selected skin, with activityFilters() and its own CSV export at GET /payments/activity/export. Two things to reconcile before wiring: the real feed is server-paginated (->appends(filters)) rather than sliced client-side, and single-skin operators have brandLocked = true, which hides the brand filter entirely. */ /* Activity Feed — operator action history Tracks what each operator / support agent did: PSP logins, transaction approvals / rejections, method edits, notes left on a player. Designed for quick scanning, not deep analysis. THAT DESCRIPTION WAS THE MOCK'S, not the schema's. `activity_logs` holds an actor, a free-text action, an optional target user, a jsonb detail and an IP — there is no action taxonomy and no field-level diff. The five kinds this screen used to chip-filter on existed only in `window.MOCK.ACTIVITY`, which is the most dangerous place for invented data on the whole build: the page's own explainer called itself the compliance source-of-truth while showing six invented operators approving invented transactions. */ /* Deterministic avatar colour from the actor's id. PRESENTATION, not data — the old version read a `color` and an `avatar` off a MOCK.OP_USERS row, so every operator on screen was one of six invented people. Initials come from the real username; the colour is a hash of the real id, which is a rendering choice and is labelled as one. */ const ACT_AVATAR_COLORS = ["#2563eb", "#7c3aed", "#0891b2", "#16a34a", "#ea580c", "#be123c"]; const actAvatarColor = (id) => ACT_AVATAR_COLORS[Math.abs(Number(id) || 0) % ACT_AVATAR_COLORS.length]; const actInitials = (name) => String(name || "?") .split(/[\s._-]+/).filter(Boolean).slice(0, 2).map(x => x[0].toUpperCase()).join("") || "?"; const ACT_PRESET_MS = { "1h": 3600e3, "24h": 24 * 3600e3, "7d": 7 * 86400e3, "all": Infinity }; const Activity = ({ brand }) => { window.useLocale && window.useLocale(); const T = window.T || ((k, fb) => fb || k); const [actionFilter, setActionFilter] = useState("all"); const [userFilter, setUserFilter] = useState("all"); const [query, setQuery] = useState(""); const [range, setRange] = useState("24h"); const [customRange, setCustomRange] = useState(null); // { startMs, endMs, label } const [customOpen, setCustomOpen] = useState(false); const clearFilters = () => { setActionFilter("all"); setUserFilter("all"); setQuery(""); setRange("24h"); setCustomRange(null); }; const anyFilter = actionFilter !== "all" || userFilter !== "all" || query !== "" || range !== "24h"; /* AN INFINITE FETCH LOOP LIVED HERE, and it was mine. `const now = Date.now()` ran on every render and fed `windowStart` / `windowEnd` straight into the fetch's dependency array. So: fetch resolves -> setState -> re-render -> a new `now` -> the deps changed -> fetch again. Forever, against a real database, on the one screen whose table is the largest. Caught by the console-error stream of tools/smoke.js ("Maximum update depth exceeded"), NOT by its pass/fail: all 80 routes rendered, so the run was green. A route that renders is not a route that behaves. The window is pinned to a timestamp taken when the RANGE changes, not when React re-renders. "Last 24h" now means 24h before you chose it, which is also what the operator means. */ const [actAnchor, setActAnchor] = useState(() => Date.now()); React.useEffect(() => { setActAnchor(Date.now()); }, [range, customRange]); const windowStart = range === "custom" && customRange ? customRange.startMs : Math.max(0, actAnchor - (ACT_PRESET_MS[range] || ACT_PRESET_MS["24h"])); const windowEnd = range === "custom" && customRange ? customRange.endMs : actAnchor; /* THE FEED. `window.MOCK.ACTIVITY` was a fabricated audit trail — the one kind of invented data that is actively dangerous, because this screen's own explainer calls itself "the compliance source-of-truth". Six invented operators approving invented transactions, under a heading that says the entries are immutable evidence. THE TIME WINDOW IS SENT TO THE SERVER. An audit log is the table most likely to be large, and slicing a page of it client-side means "no activity in this window" whenever the window is older than the last N rows. */ const actFeed = useHrsFetch(() => window.sb.list("activityLogs", { limit: 500, filters: { ...(brand && !brand.isAll && brand.id ? { skin: brand.id } : {}), ...(userFilter !== "all" ? { actor: userFilter } : {}), ...(actionFilter !== "all" ? { type: actionFilter } : {}), ...(query.trim() ? { action: query.trim() } : {}), ...(windowStart > 0 ? { from: new Date(windowStart).toISOString() } : {}), to: new Date(windowEnd).toISOString(), }, }), [brand && brand.id, brand && brand.isAll, userFilter, actionFilter, query, windowStart, windowEnd]); const actTypeFeed = useHrsFetch(() => window.sb.list("activityLogTypes", { limit: 50 }), []); const filtered = useMemo(() => (actFeed.data || []).map(r => ({ id: r.id, ts: r.occurred_at ? Date.parse(r.occurred_at) : null, actorId: r.actor_id, /* An actor_id with ON DELETE SET NULL: the row survives the account. Named as a deleted account rather than left blank, because a blank actor in an audit trail reads as a system action. */ actorName: r.actor ? r.actor.username : (r.actor_id ? `user ${r.actor_id}` : "deleted account"), actorRole: r.actor ? roleLabelFor(r.actor.user_level) : "—", targetName: r.target ? r.target.username : null, targetId: r.target_user_id, action: r.action || "—", typeLabel: r.type ? r.type.label : `type ${r.log_type_id}`, typeId: r.log_type_id, skinName: r.skin ? r.skin.name : "—", ip: r.ip || null, /* jsonb. Rendered as compact JSON rather than interpreted: this build does not know what any given writer puts in there, and a made-up field name is how a diff turns into a claim. */ detail: (r.detail && Object.keys(r.detail).length) ? JSON.stringify(r.detail) : null, })), [actFeed.data]); /* The operator dropdown, built from the actors actually present. Was MOCK.OP_USERS — six invented names that did not correspond to any account that could have taken an action. */ const actActors = useMemo(() => { const seen = new Map(); filtered.forEach(a => { if (a.actorId && !seen.has(a.actorId)) seen.set(a.actorId, a.actorName); }); return [...seen.entries()].sort((x, y) => String(x[1]).localeCompare(String(y[1]))); }, [filtered]); // Group by day const groups = {}; filtered.forEach(a => { const key = a.ts ? new Date(a.ts).toLocaleDateString("en-GB", { weekday: "long", day: "2-digit", month: "short" }) : "Undated"; if (!groups[key]) groups[key] = []; groups[key].push(a); }); const timeAgo = (ts) => { if (!ts) return "—"; const diff = Date.now() - ts; if (diff < 60_000) return "just now"; if (diff < 3600_000) return `${Math.floor(diff/60_000)}m ago`; if (diff < 86400_000) return `${Math.floor(diff/3600_000)}h ago`; return `${Math.floor(diff/86400_000)}d ago`; }; /* THE CHIP ROW WAS A TAXONOMY THIS SCHEMA DOES NOT HAVE. Five hardcoded kinds — psp_login / approve / reject / method_edit / note — with icons and colours, none of which is a value `activity_logs` can hold: `action` is free text and the only classification on the row is `log_type_id`, which isystem persists as a BOOLEAN and so can separate exactly two things. Built from activity_log_types, which is what the database actually distinguishes. */ const ACT_TYPE_CHIPS = useMemo(() => [ ["all", "All", null, "var(--text-secondary)"], ...(actTypeFeed.data || []).map(t => [ String(t.id), t.label, t.code === "block" ? "lock" : "activity", t.code === "block" ? "var(--err-600)" : "var(--p-600)", ]), ], [actTypeFeed.data]); return (
{T("page.activity","Activity log")} Immutable audit trail of every back-office action: PSP logins, withdrawal approvals / rejections, payment-method edits, player notes, alarm fires. One row per event with operator id, timestamp (minute precision), and a short diff. Read-only — this log is the compliance source-of-truth.
Logged back-office events — actor, action, affected user · {brand.name}
{/* THE EXPLAINER DESCRIBED A SCHEMA THAT DOES NOT EXIST — five action kinds with field-level diffs, none of which `activity_logs` holds. What it holds is an actor, a free-text action, an optional target user, a jsonb detail and an IP. Said plainly, including the part that matters most: upstream, almost nothing writes to it. */} Who — actor_id, the signed-in operator, with their role at the time of reading. ON DELETE SET NULL, so a row outlives the account and shows as "deleted account" rather than blank., <>What — action is free text written by whoever logged the event. It is shown verbatim; this screen does not classify it, because the only classification the table carries is log_type_id, and isystem persists that as a boolean., <>To whom — target_user_id when the action was about somebody. Rows without one are visible to any operator of the brand; rows with one are visible only inside that user's subtree., <>Detail — a jsonb blob, printed as-is. Interpreting it would mean inventing field names, and an invented field name in an audit trail is a claim., <>Read-only — update and delete are revoked on the table itself, not merely absent from the UI., <>Expect it to be empty. Upstream, LogsController::saveLog is a no-op — its body is entirely commented out — so every "audit row written" in the player-create, user-update and coupon-cancel flows writes nothing. There is no history to import., ]}> Operator audit trail: one row per logged back-office event, with the actor, the action text, the affected user, an IP and a jsonb detail.
{/* Filter bar — search, operator, range */}
setQuery(e.target.value)} placeholder="Search by operator, Tx ID, player…" style={{width:"100%", border:"none", outline:"none", padding:"8px 12px 8px 34px", fontSize:12.5, borderRadius:10, background:"transparent", fontFamily:"inherit"}}/>
Operator Filter the log to a single back-office user. Useful when auditing one team member's approvals / rejections, or when investigating a compromised account.
{[["1h","1h"],["24h","24h"],["7d","7d"],["all","All"]].map(([k,l])=>( ))}
{customOpen && ( { setCustomRange(r); setRange("custom"); setCustomOpen(false); }} onCancel={() => setCustomOpen(false)}/> )}
{anyFilter && ( )}
{filtered.length.toLocaleString()} {filtered.length===1?"event":"events"}
{/* Action-type chip row */}
{ACT_TYPE_CHIPS.map(([k, lab, icon, color]) => { const active = actionFilter === k; return ( ); })}
{/* Feed */}
{actFeed.loading && } {!actFeed.loading && actFeed.error && } {!actFeed.loading && !actFeed.error && Object.keys(groups).length === 0 && (
No logged activity in this window
{/* NOT "try a wider range" ALONE. The likeliest reason this is empty is that nothing writes to the table — saying only "expand the range" sends an operator hunting for events that were never recorded. */}
Either nothing was logged in this range, or nothing writes to activity_logs yet — upstream, the function that was supposed to is commented out. Widening the range is worth a try; an empty log is not evidence that nothing happened.
)} {Object.entries(groups).map(([day, items]) => (
{day} {items.length}
{items.map(a => (
e.currentTarget.style.background="var(--n-25)"} onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
{actInitials(a.actorName)}
{a.actorName} · {a.actorRole} {/* THE ACTION, VERBATIM. `activity_logs.action` is free text written by whoever logged the event; the old version rendered a verb from a five-value taxonomy that does not exist in this schema, so a row could be shown as "approved" whatever it recorded. */} {a.action} {a.targetName && ( <> {a.targetName} #{a.targetId} )}
{a.skinName} {a.ip && (<>·{a.ip})} {a.detail && ( <> · {a.detail} )}
{a.typeLabel} {timeAgo(a.ts)}
))}
))}
); }; window.Activity = Activity;