chips inside a standard "requires …" Tip sentence.
- gateNote: extra ReactNode appended inside the same Tip (use for the
"sidebar-only gate" / copy-paste-perm-leak honesty notes).
- explainer: ReactNode (rendered verbatim — pass your own )
OR { title?, bullets?, body? } (built into an ).
- actions: ReactNode — buttons for the header right side.
…
Sub-section wrapper for multi-part reports (tab bodies, "Cashiers"
tables under card lists, per-provider blocks).
hrsCsv(rows, headers, filename)
CSV download; headers: [{ key, label, get?(row) }] — same column shape
as the engine's PAYBO.downloadCSV, which it delegates to when present.
hrsPeriodOptions(mode, fromYear?) → [{ value:"iso|iso", label }]
hrsMoney(n, cur?) / hrsInt(n) / hrsPct(n) — en-US number formatting
hrsToast(title, detail) — PAYBO toast-bus wrapper
------------------------- WORKED EXAMPLE -------------------------
const RxDemo = () => {
const FIELDS = [
{ key:"skin", label:"Skin", type:"select", icon:"flag", placeholder:"- Select -", options:[{value:"iwakiri",label:"Iwakiri"}] },
{ key:"period", label:"Month", type:"month-period", icon:"calendar", mode:"commission", defaultValue: hrsPeriodOptions("commission")[0].value },
{ key:"range", label:"Custom range", type:"daterange", withTime:true, icon:"calendar" },
{ key:"cats", label:"Category", type:"multi", options:["Sport","Casino","Casino Live","Virtual"] },
{ key:"cumulate", label:"Cumulable", type:"toggle", defaultValue:true },
];
const [draft, setDraft] = useState(() => Object.fromEntries(FIELDS.map(f => [f.key, f.defaultValue ?? ""])));
const [applied, setApplied] = useState(null); // null = not searched yet (no-auto-load)
const rows = applied ? myRows(applied) : [];
const [sort, setSort] = useState({ key:"profit", dir:"desc" });
return (
Gates bind Customer Care only; other roles pass.}
explainer={{ bullets:[<>One row per day.] }}>
setDraft(d => ({ ...d, [k]:v }))}
onSearch={(v) => setApplied(v)}
onReset={() => { const d = Object.fromEntries(FIELDS.map(f => [f.key, f.defaultValue ?? (f.type==="multi"?[]:f.type==="toggle"?false:f.type==="daterange"?{from:"",to:""}:"")])); setDraft(d); setApplied(null); }}
resultLabel={applied ? `${rows.length} rows` : "—"} />
hrsMoney(r.bet,"ARS") },
{ key:"profit", label:"Profit", align:"right", sortable:true, render:r => hrsMoney(r.profit,"ARS"),
cellClass:r => r.profit >= 0 ? "hrs-pos" : "hrs-neg" },
]}
rows={rows} sort={sort} onSort={setSort}
totals={{ _label:"Totals", bet:hrsMoney(999,"ARS"), profit:hrsMoney(1,"ARS") }}
renderCard={r => <>
{r.date}{hrsMoney(r.profit,"ARS")}
Bet{hrsMoney(r.bet,"ARS")}
}
empty="Choose a period and press Search to load the report." />
hrsCsv(rows, [{ key:"date", label:"date" }, { key:"bet", label:"bet" }], "demo_report.csv")} />
{}} onPageSize={() => {}} />
);
};
==================================================================== */
const { useState: hrsUseState, useRef: hrsUseRef } = React;
/* ---------- formatting helpers ---------- */
const hrsPad = (n) => String(n).padStart(2, "0");
const hrsMoney = (n, cur) => `${Number(n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}${cur ? " " + cur : ""}`;
const hrsInt = (n) => Number(n || 0).toLocaleString("en-US");
const hrsPct = (n) => `${Number(n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%`;
const HRS_MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const hrsIsoDate = (d) => `${d.getFullYear()}-${hrsPad(d.getMonth() + 1)}-${hrsPad(d.getDate())}`;
const hrsDM = (d) => `${d.getDate()}/${hrsPad(d.getMonth() + 1)}`;
/* First Monday of (year, month 0-11) — the anchor of real "commission months"
(app/Helpers/utils.php getDateCalendario). */
const hrsFirstMonday = (y, m) => { const first = new Date(y, m, 1); return new Date(y, m, 1 + ((8 - first.getDay()) % 7)); };
/* THE PERIOD MODEL, RESOLVED TO TWO DATES.
------------------------------------------------------------------------
Every report screen carries the same filter shape — `period` plus one of
`range_val` / `month` / `year` / `custom` — and until now every screen turned
it into a DAY COUNT, used only to scale invented volumes. None of them could
say which dates the operator had actually asked for, which is precisely what
a real query needs.
So thirteen screens each had a `Days(v)` and not one had a
`Range(v)`. That is the shape of a codebase that has never fetched:
the mock needs "how many days", the database needs "which days".
Returns { from, to } as YYYY-MM-DD inclusive, ready for PostgREST's
gte./lte. on a `day` column. The preset numbering is isystem's and is not
ours to renumber: 1 Today, 2 Yesterday, 3 This week, 4 Previous week,
5 This month, 6 Previous month.
Weeks start MONDAY, matching hrsFirstMonday and the commission calendar —
getDay() returns 0 for Sunday, so the (d+6)%7 shift is what makes Monday 0
rather than Sunday. Getting that backwards moves every weekly figure by a
day and looks entirely plausible. */
const hrsPeriodRange = (v) => {
const t = new Date();
const day = (d) => hrsIsoDate(d);
const shift = (d, n) => { const x = new Date(d); x.setDate(x.getDate() + n); return x; };
const monday = (d) => shift(d, -(((d.getDay() + 6) % 7)));
if (!v) return { from: day(t), to: day(t) };
if (v.period === "range") {
switch (Number(v.range_val) || 1) {
case 1: return { from: day(t), to: day(t) };
case 2: return { from: day(shift(t, -1)), to: day(shift(t, -1)) };
case 3: return { from: day(monday(t)), to: day(t) };
case 4: { const m = shift(monday(t), -7); return { from: day(m), to: day(shift(m, 6)) }; }
case 5: return { from: day(new Date(t.getFullYear(), t.getMonth(), 1)), to: day(t) };
case 6: return { from: day(new Date(t.getFullYear(), t.getMonth() - 1, 1)),
to: day(new Date(t.getFullYear(), t.getMonth(), 0)) };
default: return { from: day(t), to: day(t) };
}
}
if (v.period === "periodo_mese") {
const [a, b] = String(v.month || "").split("|");
/* The option value is already two ISO dates; splitting it is the whole
job. A malformed value falls back to this month rather than to an empty
range, because an empty range renders as a report with no rows and
nothing saying why. */
if (a && b) return { from: a, to: b };
return { from: day(new Date(t.getFullYear(), t.getMonth(), 1)), to: day(t) };
}
if (v.period === "periodo_anno") {
const y = Number(v.year) || t.getFullYear();
return { from: `${y}-01-01`, to: y < t.getFullYear() ? `${y}-12-31` : day(t) };
}
const c = v.custom || {};
if (c.from && c.to) return { from: c.from, to: c.to };
return { from: day(new Date(t.getFullYear(), t.getMonth(), 1)), to: day(t) };
};
/* Period option generator for the "month-period" filter type.
mode "commission": first Monday of month → day before next month's first
Monday. mode "calendar": 1st → last day. mode "week": Mon–Sun weeks.
Newest first; future periods skipped. Value = "YYYY-MM-DD|YYYY-MM-DD". */
const hrsPeriodOptions = (mode = "commission", fromYear = 2021) => {
const today = new Date();
const out = [];
if (mode === "week") {
const monday = new Date(today);
monday.setDate(monday.getDate() - ((monday.getDay() + 6) % 7));
for (let d = monday; d.getFullYear() >= fromYear; d = new Date(d.getFullYear(), d.getMonth(), d.getDate() - 7)) {
const end = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 6);
out.push({ value: `${hrsIsoDate(d)}|${hrsIsoDate(end)}`, label: `Week ${hrsDM(d)} – ${hrsDM(end)}/${end.getFullYear()}` });
}
return out;
}
for (let y = today.getFullYear(); y >= fromYear; y--) {
for (let m = 11; m >= 0; m--) {
if (mode === "calendar") {
const start = new Date(y, m, 1);
if (start > today) continue;
const end = new Date(y, m + 1, 0);
out.push({ value: `${hrsIsoDate(start)}|${hrsIsoDate(end)}`, label: `${HRS_MONTHS[m]} ${y}` });
} else {
const start = hrsFirstMonday(y, m);
if (start > today) continue;
const nextStart = m === 11 ? hrsFirstMonday(y + 1, 0) : hrsFirstMonday(y, m + 1);
const end = new Date(nextStart.getFullYear(), nextStart.getMonth(), nextStart.getDate() - 1);
out.push({ value: `${hrsIsoDate(start)}|${hrsIsoDate(end)}`, label: `${HRS_MONTHS[m]} ${y} (${hrsDM(start)} – ${hrsDM(end)})` });
}
}
}
return out;
};
/* ---------- filter-field plumbing ---------- */
const hrsOpts = (options) => (options || []).map(o => (typeof o === "object" && o !== null) ? o : { value: o, label: String(o) });
const hrsFieldDefault = (f) => {
if (f.defaultValue !== undefined) return f.defaultValue;
switch (f.type) {
case "multi": return [];
case "toggle": return false;
case "daterange": return { from: "", to: "", fromTime: "", toTime: "" };
default: return "";
}
};
const hrsFieldNorm = (f, v) => {
switch (f.type) {
case "multi": return (v || []).slice().sort().join(",");
case "toggle": return v ? "1" : "0";
case "daterange": { const x = v || {}; return [x.from || "", x.to || "", x.fromTime || "", x.toTime || ""].join("|"); }
default: return v == null ? "" : String(v);
}
};
const hrsFieldActive = (f, v) => hrsFieldNorm(f, v) !== hrsFieldNorm(f, hrsFieldDefault(f));
const hrsPillLabel = (f, v) => {
const opts = f.type === "month-period" ? hrsPeriodOptions(f.mode || "commission", f.fromYear) : hrsOpts(f.options);
switch (f.type) {
case "toggle": return v ? f.label : `${f.label}: off`;
case "multi": {
const labels = (v || []).map(x => (opts.find(o => o.value === x) || { label: x }).label);
return `${f.label}: ${labels.length <= 2 ? labels.join(", ") : labels.length + " selected"}`;
}
case "daterange": { const x = v || {}; return `${f.label}: ${x.from || "…"} → ${x.to || "…"}`; }
case "select": case "month-period": {
const hit = opts.find(o => String(o.value) === String(v));
return `${f.label}: ${hit ? hit.label : v}`;
}
default: return `${f.label}: ${v}`;
}
};
/* ---------- CSV + toast helpers ---------- */
const hrsCsv = (rows, headers, filename) => {
/* notify:false — Host screens own their own messaging (HrsExport posts an
"Export ready" line and an Export Requests audit row), so letting the
engine also announce it would show the same download twice. */
if (window.PAYBO && window.PAYBO.downloadCSV) { window.PAYBO.downloadCSV(filename, rows, headers, { notify: false }); return; }
/* Fallback mirrors src/engine.jsx toCSV/downloadCSV */
const esc = (v) => {
if (v == null) return "";
const s = typeof v === "object" ? JSON.stringify(v) : String(v);
return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
};
const head = headers.map(c => esc(c.label != null ? c.label : c.key)).join(",");
const body = rows.map(r => headers.map(c => esc(c.get ? c.get(r) : r[c.key])).join(","));
const blob = new Blob([[head, ...body].join("\n")], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = filename;
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(url), 250);
};
const hrsToast = (title, detail) => {
window.PAYBO && window.PAYBO.emitToast && window.PAYBO.emitToast({
id: `hrs-${Date.now()}-${Math.floor(Math.random() * 1e6)}`,
tx_id: title, amount: 0, currency: "HOST", player: "Report", reason: detail,
});
};
const hrsAlignCls = (align) => align === "right" ? "hrs-al-r" : align === "center" ? "hrs-al-c" : "";
/* ==================================================================
HrsShell — page chrome
================================================================== */
const HrsShell = ({ title, subtitle, gate, gateNote, explainer, actions, children }) => {
window.useLocale && window.useLocale();
const gateChips = gate == null ? [] : (Array.isArray(gate) ? gate : (typeof gate === "string" ? [gate] : null));
const tipBody = (gate != null || gateNote != null) && (
<>
{gateChips ? (
<>Real-platform access requires {gateChips.map((g, i) => (
{i > 0 && " + "}{g}
))}.{" "}
) : gate}
{gateNote}
);
return (
{title}
{tipBody && {tipBody} }
{subtitle && {subtitle}}
{actions && {actions}}
{explainer && (React.isValidElement(explainer)
? explainer
: {explainer.body} )}
{children}
);
};
/* ==================================================================
HrsKpis — KPI strip + optional "ignores filters" note
================================================================== */
const HrsKpis = ({ items, note }) => {
if (!items || !items.length) return null;
return (
{items.map((k, i) => (
{k.label}{k.tip && {k.tip} }
{k.value}
{k.sub != null && {k.sub}}
))}
{note && {note}}
);
};
/* ==================================================================
HrsFilters — declarative filter bar
Desktop: hero card strip + pills + Clear all.
Mobile ≤860px: "Filters (n)" button → full-height sheet.
================================================================== */
const HrsFieldControl = ({ field: f, value, onChange }) => {
const t = f.type || "text";
if (t === "custom" && f.render) return f.render(value, onChange, f);
if (t === "toggle") return (
onChange(v)} onLabel={f.onLabel != null ? f.onLabel : ""} offLabel={f.offLabel != null ? f.offLabel : ""} size="sm" disabled={f.disabled} />
);
if (t === "select" || t === "month-period") {
const opts = t === "month-period" ? hrsPeriodOptions(f.mode || "commission", f.fromYear) : hrsOpts(f.options);
return (
);
}
if (t === "multi") return {f.tip} }
onChange && onChange(f.key, v)} />
))}
{children}
{resultLabel != null && (
onChange && onChange(f.key, v)} />
))}
)}
);
};
/* ==================================================================
HrsTable — sortable table, totals rows, drill-down details,
mobile stacked cards via renderCard
================================================================== */
const HrsTable = ({ columns = [], rows = [], sort, onSort, totals, renderCard, empty, rowKey, onRowClick, rowDetail, maxHeight, dense }) => {
const [openDetail, setOpenDetail] = hrsUseState({});
const keyOf = (r, i) => typeof rowKey === "function" ? rowKey(r, i) : (rowKey ? r[rowKey] : (r && r.id != null ? r.id : i));
const cols = columns.filter(c => !c.hidden);
const colCount = cols.length + (rowDetail ? 1 : 0);
const totalRows = totals == null ? [] : (Array.isArray(totals) ? totals : [totals]);
const nextSort = (c) => (sort && sort.key === c.key)
? { key: c.key, dir: sort.dir === "asc" ? "desc" : "asc" }
: { key: c.key, dir: c.firstDir || "desc" };
const emptyNode = empty || "No rows match your filters.";
return (
{cols.map(c => (
{c.sortable ? (
) : c.label}
))}
{rowDetail &&
{rows.length === 0 && (
)}
{rows.map((r, i) => {
const k = keyOf(r, i);
const expanded = !!openDetail[k];
return (
onRowClick(r) : undefined}>
{cols.map(c => (
{c.render ? c.render(r) : r[c.key]}
))}
{rowDetail && (
)}
{rowDetail && expanded && (
{rowDetail(r)}
);
})}
{totalRows.length > 0 && rows.length > 0 && (
{totalRows.map((t, ti) => (
{cols.map((c, ci) => (
{ci === 0
? (t._label != null ? t._label : (t[c.key] != null ? t[c.key] : "Totals"))
: (c.renderTotal ? c.renderTotal(t) : (t[c.key] != null ? t[c.key] : ""))}
))}
{rowDetail &&
))}
)}
{/* Mobile stacked cards */}
{renderCard && (
{rows.length === 0 && {emptyNode}}
{rows.map((r, i) => (
onRowClick(r) : undefined}>
{renderCard(r)}
))}
{totalRows.length > 0 && rows.length > 0 && totalRows.map((t, ti) => (
{t._label != null ? t._label : "Totals"}
{cols.slice(t._label != null ? 0 : 1).map(c => (t[c.key] != null || c.renderTotal) && (
{c.label}
{c.renderTotal ? c.renderTotal(t) : t[c.key]}
))}
))}
)}
);
};
/* ==================================================================
HrsBars — IN / OUT / NET summary boxes (ledger reports)
================================================================== */
const HRS_BAR_TONES = { in: "ok", out: "err", net: "warn", ok: "ok", err: "err", warn: "warn", neutral: "neutral", brand: "brand" };
const HrsBars = ({ items }) => {
if (!items || !items.length) return null;
return (
{items.map((b, i) => (
{b.label}{b.tip && {b.tip} }
{b.value}
{b.sub != null && {b.sub}}
))}
);
};
/* ==================================================================
HrsExport — two-phase export + Export Requests audit line
================================================================== */
const HrsExport = ({ onCsv, filename = "report.csv", gate, twoPhase, count = 0, note }) => {
const [audit, setAudit] = hrsUseState([]);
const [open, setOpen] = hrsUseState(false);
const seq = hrsUseRef(0);
const limit = twoPhase === true ? 10000 : (typeof twoPhase === "number" ? twoPhase : Infinity);
const emailed = count > limit;
const doExport = () => {
seq.current += 1;
const at = new Date();
const entry = {
id: seq.current,
ts: `${hrsPad(at.getHours())}:${hrsPad(at.getMinutes())}:${hrsPad(at.getSeconds())}`,
filename, rows: count, mode: emailed ? "emailed" : "direct",
};
if (emailed) {
hrsToast("Export queued", `${hrsInt(count)} rows exceed the ${hrsInt(limit)}-row direct-download limit — the file is generated in the background and a download link is emailed to the account on file.`);
} else {
onCsv && onCsv();
hrsToast("Export ready", `${filename} · ${hrsInt(count)} rows · direct download. Recorded in the Export Requests line below.`);
}
setAudit(a => [entry, ...a]);
};
return (
{Number.isFinite(limit) && (
≤ {hrsInt(limit)} rows download directly · larger exports are emailed as a link
Mirrors the real platform's two-phase export: up to the web limit the file streams straight to the browser; beyond it a queued job builds the file and emails a download link.
)}
{gate && (
Gated by {gate}
On the real platform the Export button is hidden from Customer Care accounts lacking {gate}; every other role always sees it.
)}
{note && {note}}
{audit.length > 0 && (
{open && (
Time File Rows Delivery Status
{a.ts}
{a.filename}
{hrsInt(a.rows)}
{a.mode === "emailed" ? "Emailed link" : "Direct download"}
Completed
))}
)}
)}
);
};
/* ==================================================================
HrsPager — DataTables-style footer pager (page is 0-based)
================================================================== */
const HrsPager = ({ page = 0, pageSize = 50, total = 0, onPage, onPageSize, sizes = [10, 25, 50, 100] }) => {
const totalPages = Math.max(1, Math.ceil(total / pageSize));
const from = total === 0 ? 0 : page * pageSize + 1;
const to = Math.min(total, (page + 1) * pageSize);
return (
{onPageSize && (
Show
entries
)}
Showing {hrsInt(from)}–{hrsInt(to)} of {hrsInt(total)} · Page {Math.min(page + 1, totalPages)} of {totalPages}
);
};
/* ==================================================================
HrsSection — sub-section wrapper for multi-part reports
================================================================== */
const HrsSection = ({ title, sub, actions, children }) => (
{(title || actions) && (
{title && {title}}
{sub && {sub}}
{actions && {actions}}
)}
{children}
);
/* ---------- window globals (Babel makes top-level consts implicit
globals already; explicit assignment is the project convention) ---------- */
window.HrsShell = HrsShell;
window.HrsKpis = HrsKpis;
window.HrsFilters = HrsFilters;
window.HrsFieldControl = HrsFieldControl;
window.HrsMultiSelect = HrsMultiSelect;
window.HrsTable = HrsTable;
window.HrsBars = HrsBars;
window.HrsExport = HrsExport;
window.HrsPager = HrsPager;
window.HrsSection = HrsSection;
window.hrsCsv = hrsCsv;
window.hrsToast = hrsToast;
window.hrsMoney = hrsMoney;
window.hrsInt = hrsInt;
window.hrsPct = hrsPct;
window.hrsPeriodOptions = hrsPeriodOptions;
window.hrsPeriodRange = hrsPeriodRange;
/* ==================================================================
HrsAsync — the loading / empty / error contract, once.
Every wired screen renders through this. The alternative was each of the
23 hand-rolled tables inventing its own spinner and its own error text,
which is exactly the cost docs/ARCHITECTURE_AUDIT.md item 3 priced.
It takes the api.js envelope directly, so a screen never unpacks
{ok, data, error} by hand:
const st = useHrsFetch(() => api.players({start, length}), [start, length]);
{rows => }
The error state is not a dead end: `retriable` errors get a Retry button,
and auth/shape errors get the reason instead, because retrying those just
fails again. ================================================== */
const HrsSkeleton = ({ rows = 6, cols = 5 }) => (
{Array.from({ length: cols }, (_, i) =>
{Array.from({ length: rows }, (_, r) => (
{Array.from({ length: cols }, (_, c) => (
))}
Loading…
);
const HRS_ERR_TITLE = {
offline: "Could not reach the API",
timeout: "The API did not respond",
auth: "Not authorised",
notfound: "Endpoint not found",
server: "The server returned an error",
shape: "Unexpected response",
aborted: "Cancelled",
};
const HrsError = ({ error, onRetry }) => (
{HRS_ERR_TITLE[error.kind] || "Error"}
{error.status ? HTTP {error.status} : null}
{error.message}
{error.retriable && onRetry && (
)}
);
const HrsEmpty = ({ children }) => (
;
if (state.error) return ;
const d = state.data;
if (d == null || (Array.isArray(d) && d.length === 0)) return {empty} ;
return children(d, state.meta || {});
};
/* The hook side of the same contract. Handles the two things every hand-rolled
fetch gets wrong: it aborts the in-flight request when deps change (so a
slow first response cannot overwrite a fast second one — and it must, since
isystem hardcodes sEcho to 0 and gives callers no ordering token), and it
never sets state after unmount. */
const useHrsFetch = (fn, deps) => {
const [state, setState] = hrsUseState({ loading: true, data: null, error: null, meta: null });
const [nonce, setNonce] = hrsUseState(0);
React.useEffect(() => {
let alive = true;
const ctrl = new AbortController();
setState(s => ({ ...s, loading: true, error: null }));
Promise.resolve(fn({ signal: ctrl.signal })).then(res => {
if (!alive) return;
if (!res || typeof res.ok !== "boolean") {
setState({ loading: false, data: null, meta: null,
error: { kind: "shape", status: 0, retriable: false,
message: "The data layer returned something that is not an api.js envelope." } });
return;
}
setState(res.ok
? { loading: false, data: res.data, meta: res.meta, error: null, source: res.source }
: { loading: false, data: null, meta: null, error: res.error, source: res.source });
});
return () => { alive = false; ctrl.abort(); };
}, [...(deps || []), nonce]);
return { ...state, retry: () => setNonce(n => n + 1) };
};
/* The write counterpart to useHrsFetch. Three things every hand-rolled save
gets wrong, and all three are the difference between a screen that lies and
one that does not:
1. It reports success before the server has answered. The row on screen
moves, the row in the database does not, and nobody finds out until
someone reloads.
2. It does not refetch. A save that triggers a default, a trigger or a
generated column leaves the screen showing what was SENT rather than
what was STORED — and those differ by design.
3. It swallows the reason. "Something went wrong" over a constraint
violation throws away the one sentence that says which rule was broken.
`run` returns the envelope so a caller can branch (close a modal, keep it
open with the field highlighted); it never throws. */
const useHrsSave = (feeds) => {
const [busy, setBusy] = hrsUseState(false);
const list = Array.isArray(feeds) ? feeds : (feeds ? [feeds] : []);
const run = async (fn, { done, fail } = {}) => {
if (busy) return { ok: false, error: { kind: "busy", message: "A save is already in flight." } };
setBusy(true);
let res;
try {
res = await Promise.resolve(fn());
} catch (e) {
res = { ok: false, error: { kind: "server", message: (e && e.message) || "The save threw." } };
}
setBusy(false);
if (res && res.ok) {
/* Refetch before the toast, so by the time the operator reads "saved"
the table under it already shows the stored row. */
list.forEach(f => f && f.retry && f.retry());
const dropped = res.meta && res.meta.droppedFields;
hrsToast(done || "Saved",
dropped && dropped.length
/* A field the write layer refused is NOT a saved field, and it is
invisible unless it is said out loud. */
? `Stored. ${dropped.length} field(s) were not writable and were ignored: ${dropped.join(", ")}.`
: "Stored, and the table below has been refreshed from the database.");
} else {
const msg = (res && res.error && res.error.message) || "The save failed.";
hrsToast(fail || "Not saved", msg);
}
return res;
};
return { busy, run };
};
window.useHrsSave = useHrsSave;
window.HrsAsync = HrsAsync;
window.HrsSkeleton = HrsSkeleton;
window.HrsError = HrsError;
window.HrsEmpty = HrsEmpty;
window.useHrsFetch = useHrsFetch;
/* ==================================================================
Wave 0 shared primitives — Host surface (design-alignment plan §4).
CSS for all of these lives in styles/tokens.css ("Wave 0" section).
================================================================== */
/* HrsModal — THE shared modal chrome (plan §4.1).
Usage: {open &&
}>
Body copy…
}
The canonical hpx-modal shape promoted out of HostPlayers.jsx page CSS
(scrim / head / body / foot, full-screen ≤860px), portaled to .
Footer buttons are the `.btn` family per canon §2.4 (secondary cancel
before primary/danger action). Scrim click, the X and Escape all call
onClose unless dismissable={false} (use for typed confirms / mid-save).
Replaces the ~36 per-page modal skins, window.confirm() and hand-rolled
position:fixed scrims. */
const HrsModal = ({ open = true, title, size = "md", onClose, foot, dismissable = true, children }) => {
React.useEffect(() => {
if (!open || !dismissable || !onClose) return;
const onEsc = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onEsc);
return () => document.removeEventListener("keydown", onEsc);
}, [open, dismissable, onClose]);
if (!open) return null;
return ReactDOM.createPortal(
e.stopPropagation()}>
{title}
{onClose && }
{children}
{foot && {foot}}
,
document.body
);
};
/* HrsConfirm — shared confirm dialog on HrsModal (plan §4.1).
Usage: {ask && setAsk(false)}>
This hides the program from players.
}
- danger: confirm button renders .btn--danger (destructive actions).
- typed="NAME": typed-confirmation variant — the operator must type the
string exactly before Confirm enables (skin deletes, kill-jobs).
- busy: disables both buttons while a save is in flight.
Replaces the 4 window.confirm() call sites and per-page confirm skins. */
const HrsConfirm = ({ open = true, title = "Are you sure?", children, confirmLabel = "Confirm", cancelLabel = "Cancel", danger, typed, busy, onConfirm, onCancel }) => {
const [typedVal, setTypedVal] = hrsUseState("");
const ready = !typed || typedVal === typed;
return (
}>
{children}
{typed && (
setTypedVal(e.target.value)}
onKeyDown={e => { if (e.key === "Enter" && ready && !busy) onConfirm && onConfirm(); }} />
)}
);
};
/* hrsColsLoad — seed a page's column-visibility state from localStorage.
Usage: const [cols, setCols] = useState(() => hrsColsLoad("tx.cols", COLUMNS));
Returns the persisted visible-key array (intersected with the current
column set, required columns always included), or every non-defaultHidden
key when nothing is stored / storage is unavailable. */
const hrsColsLoad = (storageKey, columns = [], defaultHidden = []) => {
const all = columns.map(c => c.key);
const req = columns.filter(c => c.required).map(c => c.key);
const fallback = all.filter(k => !defaultHidden.includes(k) || req.includes(k));
if (!storageKey) return fallback;
try {
const raw = window.localStorage.getItem(`hrscols:${storageKey}`);
if (!raw) return fallback;
const saved = JSON.parse(raw);
if (!Array.isArray(saved)) return fallback;
const vis = all.filter(k => saved.includes(k) || req.includes(k));
return vis.length ? vis : fallback;
} catch (_e) { return fallback; }
};
/* HrsColsMenu — THE column-visibility picker (plan §4.2).
Usage: edit(r) },
{ icon:"trash", title:"Delete", tone:"danger", onClick:() => del(r) },
{ icon:"mail", title:"Resend", need:"POST /messages/resend" }, // renders via NoBackend
]} />
Builds on `.btn--icon` (tokens.css); tone ∈ "danger" | "primary".
`need` renders the honest disabled NoBackend form instead of a live
button. Replaces the ~13 per-page `*-act` families. */
const HrsRowActions = ({ actions = [] }) => (
e.stopPropagation()}>
{actions.filter(a => a && !a.hidden).map((a, i) => {
const cls = `btn btn--ghost btn--icon btn--sm${a.tone ? ` hrs-rowact--${a.tone}` : ""}`;
if (a.need) return u.username} getSub={u => u.skin} minChars={3} />
Prefix-matches getLabel (override with filterFn(option, term)), sorts
ascending, caps at maxResults with an honest "first N shown" hint —
mirroring the real platform's select2 paging. Generalizes HostDeposit's
HtfSearchSelect and HostSportBet's player search. */
const HrsSearchSelect = ({ placeholder, options = [], picked, onPick, minChars = 3, maxResults = 10,
getLabel, getSub, getKey, filterFn, renderItem, hint, note, emptyText = "No matches.", disabled }) => {
const lab = getLabel || ((o) => o == null ? "" : (o.label != null ? o.label : (o.username != null ? o.username : String(o))));
const sub = getSub || ((o) => o && o.sub);
const keyOf = getKey || ((o, i) => (o && (o.id != null ? o.id : o.value)) != null ? (o.id != null ? o.id : o.value) : i);
const [q, setQ] = hrsUseState(picked ? lab(picked) : "");
const [open, setOpen] = hrsUseState(false);
const wrapRef = hrsUseRef(null);
React.useEffect(() => {
const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, []);
React.useEffect(() => { setQ(picked ? lab(picked) : ""); }, [picked ? lab(picked) : ""]);
const term = q.trim().toLowerCase();
const match = filterFn || ((o, t) => lab(o).toLowerCase().startsWith(t));
const results = term.length >= minChars
? options.filter(o => match(o, term)).sort((a, b) => lab(a).localeCompare(lab(b))).slice(0, maxResults)
: [];
return (
Showing the first 2,000 rows.
tone ∈ "info" (default) | "warn" | "err" | "ok"; children may be prose
or a of validation errors. `actions` renders trailing buttons,
compact tightens padding. Replaces the borrowed hu-errbox / hma-errs /
hpc-warn one-offs and inline truncation banners. */
const HRS_NOTICE_ICON = { info: "info", warn: "alert", err: "alert", ok: "check" };
const HrsNotice = ({ tone = "info", title, children, actions, compact, icon }) => (