// Represents: GET /vouchers/ · VouchersController — see docs/ISYSTEM_REFERENCE.md §Batch 1 "Voucher"
/* Vouchers — top-level header page (sidebar key `backend.vouchers`, sits between Reports and
Commissions payments). List (getVouchers) + New voucher / Redeem voucher / View-print modals.
Fidelity notes (all cites are VouchersController.php unless said otherwise):
- Columns, filters, sortable set, pagination, statuses and both modal flows follow the
reference 1:1. The real screen has NO export (Buttons/pdfmake are loaded but never
configured), no bulk actions and no KPIs — none are added here.
- KNOWN BUG (implemented as evident intent, per build policy): the real Status filter
matches `users.stato` — the CREATOR's account status — instead of `vouchers.stato`
(getVouchers L163-165). This prototype filters the voucher's own status.
- Real modal titles are hardcoded Italian "Nuovo voucher" on BOTH modals (the redeem one
is a copy-paste mistake — modals/cashoutVoucher.blade.php). Evident intent used here.
- saveNewVoucher's success response includes the generated voucher_code (L408) but the
generic modal handler ignores it — the operator only finds the code in the reloaded
table. Here the reloaded-table behavior is kept (new row appears on top, ID desc) and
the toast also names the code, since the backend already returns it.
- Label policy: every label on this screen resolves only to raw backend.* keys in-repo
(backend.vouchers, created_by, voucher_code, value, status, redeem_by, creation_date,
redeem_date, skin, enter_amount_voucher, insert_amount, invalid_amount, min_amount,
max_amount, insufficient_funds, enter_voucher_code, insert_voucher_code,
wrong_voucher_code, voucher_not_exists, print, all_selections, voucher_pending,
voucher_redeemed, voucher_canceled). Operator-facing English written here — labels
inferred. Filter placeholders are hardcoded Italian in the real blade ("Inserisci
username" / "Inserisci codice"); English used, per the same policy.
- Permission honesty: `support_vouchers` gates ONLY the sidebar entry. No controller
method re-checks it — any authenticated 2FA'd BO user can hit /vouchers/* directly;
only getVouchers' row scoping limits visibility, and create/redeem are open to every
BO role. Surfaced in the page Tip, not hidden.
- Demo session = Super admin (level 0): shows the superadmin-only Skin column + filter
(index() L28-30, getVouchers L288-290) and the header buttons, which render only for
isshop() (SHOP, 20) or isadmin() (SUPERADMIN, 0) — index.blade L53-62.
- Mock rows are deterministic (seeded PRNG) so the list renders identically each load.
Canceled(5)/Error(3) rows are included ONCE each to exercise the real status renderer —
nothing in the real codebase ever writes stato 5 or 3 (ref Enums note); such rows can
only originate outside the app. */
const { useState: useStateHv, useEffect: useEffectHv, useMemo: useMemoHv } = React;
const hvToast = (m, isErr) => window.PAYBO?.emitToast && window.PAYBO.emitToast({
id: `hv-${Date.now()}`, tx_id: m, amount: 0, currency: isErr ? "ERR" : "HOST",
player: "Vouchers", reason: isErr ? "Fix this before continuing." : "Prototype state only \u2014 not persisted.",
});
const hvEsc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]));
/* Real print, no backend needed. The slip's whole content (skin, date, amount, code) is
rendered client-side here, so the honest behaviour of `?print=1` — write the slip into a
document and call window.print() on it — is reproducible verbatim. A hidden same-origin
iframe stands in for the real modal's getVoucherPDF iframe: the operator gets the browser
print dialog with the slip alone on the sheet, which is what the admin build does. */
const hvPrintDoc = (title, bodyHtml) => {
const fr = document.createElement("iframe");
fr.setAttribute("aria-hidden", "true");
fr.style.cssText = "position:fixed;left:-10000px;top:0;width:380px;height:520px;border:0;";
document.body.appendChild(fr);
const doc = fr.contentDocument || fr.contentWindow.document;
doc.open();
doc.write(
'' + hvEsc(title) + "" + bodyHtml + ""
);
doc.close();
let fired = false;
const go = () => {
if (fired) return;
fired = true;
try { fr.contentWindow.focus(); fr.contentWindow.print(); } catch (e) { /* print dialog unavailable */ }
setTimeout(() => { if (fr.parentNode) fr.parentNode.removeChild(fr); }, 1000);
};
// A written document is usually "complete" the moment doc.close() returns, but the load
// event can also still be pending — take whichever happens first, with a timer so the
// dialog cannot be lost to a load event that already fired.
if (doc.readyState === "complete") go();
else { fr.onload = go; setTimeout(go, 300); }
};
/* Deterministic PRNG (mulberry32) — mock rows render identically each load. */
const hvRng = pbRng; // was a local copy of mulberry32 — see pbRng in src/data.jsx
/* 5-char code from [0-9A-Z] — mirrors generateVoucherCode(5) L323-330. The real generator
makes a SINGLE attempt; a collision aborts with "System error, try again". */
const hvCode = (rng) => Array.from({ length: 5 }, () => "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"[Math.floor(rng() * 36)]).join("");
const hvTs = (dd, mm, yyyy, h, mi) => new Date(yyyy, mm - 1, dd, h, mi).getTime();
/* date("d/m/Y G:i", ts) — day/month padded, hour NOT padded, exactly like the real list. */
const hvFmtDate = (ts) => {
if (!ts) return "";
const d = new Date(ts), p2 = (n) => String(n).padStart(2, "0");
return `${p2(d.getDate())}/${p2(d.getMonth() + 1)}/${d.getFullYear()} ${d.getHours()}:${p2(d.getMinutes())}`;
};
/* Real Value column prints vouchers.amount raw (no formatting) — thousands separators added
here as pure visual elevation, the underlying number is untouched. */
const hvFmtAmt = (n) => Number(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
/* vouchers.stato → label + chip. Any unknown value renders "Error" (L261-271). */
const HV_STATUS = {
1: { label: "Pending", chip: "chip--warn" }, // backend.voucher_pending (span.pending-w)
2: { label: "Redeemed", chip: "chip--ok" }, // backend.voucher_redeemed (span.approved-w)
5: { label: "Canceled", chip: "chip--err" }, // backend.voucher_canceled (span.error-w)
3: { label: "Error", chip: "chip--err" }, // hardcoded "Error" (span.error-w) — never written by the app
};
/* Mock skins + their `voucher` withdraw-method row (skin_withdraw_methods: min_with/max_with
bound the voucher amount; the method existing at all is the create precondition). */
/* WHAT WAS HERE
HV_SKINS two invented skins with currencies and invented voucher
min/max bounds, driving the create-modal validation.
HV_ME an invented signed-in operator, including `available: 12500`
shown to them as their own spendable balance.
HV_FEATURED four vouchers with real-looking codes and usernames.
hvBuild thirty more, with seeded codes and amounts.
Showing an operator an invented figure labelled "available funds" and then
validating their input against it is the shape of a bug that only surfaces
when it is real: the form says yes, the server says no, and nothing on the
screen explains why. The bounds now come from the skin's voucher method and
the balance from the operator's own wallet.
The codes were the other half. A 5-character client-generated code can
collide, and a client that chooses the code chooses which voucher exists.
issue_voucher() mints it (supabase/027). */
const hvRowFromDb = (r) => {
const ms = (t) => (t ? Date.parse(t) : null);
return {
id: r.id,
code: r.code,
val: Number(r.amount || 0),
currency: r.currency,
stato: Number(r.status_id),
by: (r.createdBy && r.createdBy.username) || "",
byId: (r.createdBy && r.createdBy.id) || null,
byRole: (r.createdBy && r.createdBy.user_level) ?? null,
redeemBy: (r.redeemedBy && r.redeemedBy.username) || "",
redeemRole: (r.redeemedBy && r.redeemedBy.user_level) ?? null,
cts: ms(r.created_at),
rts: ms(r.redeemed_at),
skin: (r.skin && r.skin.name) || "",
skinId: r.skin_id,
};
};
const HV_EMPTY_FILTERS = { createdBy: "", redeemBy: "", code: "", cFrom: "", cTo: "", rFrom: "", rTo: "", aFrom: "", aTo: "", status: "", skin: "" };
/* Server-side ordering exists ONLY for id, amount, addedTime, CashingTime, stato (L168-210);
the other four columns are not sortable in the real screen and stay plain here. */
const HV_SORT_GET = { id: r => r.id, val: r => r.val, created: r => r.cts, redeemed: r => r.rts, status: r => r.stato };
const HvChip = ({ stato }) => {
const s = HV_STATUS[stato] || HV_STATUS[3];
return {s.label};
};
const HvPill = ({ label, onClear }) => (
{label}
);
const HvTh = ({ label, k, sort, onSort, right }) => (
onSort(k)}
title="Sortable — one of the five columns the real screen orders server-side (id, amount, creation date, redeem date, status)">
{label}{sort.key === k ? (sort.dir === "asc" ? "▲" : "▼") : "↕"}
);
/* Filter fields — rendered inside the desktop hero strip AND the mobile full-height sheet.
Field set is exactly the real one (index.blade L76-141): created by, redeem by, code,
creation-date range, redeem-date range, amount range, status, skin (superadmin only). */
const HvFilterFields = ({ f, set, skins = [] }) => (
<>
Created by
Matches from the start of the creator's username — the server applies users.username LIKE 'value%' (getVouchers L111-113), unlike the other two text filters which match anywhere.
Status
Filters the voucher's own status. Known real-platform bug: the server matches users.stato — the CREATOR's account status — instead of vouchers.stato (getVouchers L163-165); this prototype implements the evident intent. "Error" (3) is displayed by the list but has never been a filter option.
{/* Option set + order from voucherStatus() L34-41: all, redeemed=2, pending=1, canceled=5. */}
Skin
Super admin only — the real screen renders this filter and the Skin column only for level 0 (index.blade L128-139). Everyone else is already scoped: skin admin / administration to their own skin, all other roles to vouchers they created or redeemed, always inside their user_path subtree (getVouchers L214-229).
);
/* Compact modal shell on the shared .bp-modal chrome; full-screen on mobile via .hv-modal. */
const HvModal = ({ title, onClose, children, footer }) => (
e.stopPropagation()}>
{title}
{children}
{footer &&
{footer}
}
);
/* New voucher — GET /vouchers/newVoucher/ + POST /vouchers/saveNewVoucher/. One field.
Real modal title is hardcoded Italian "Nuovo voucher"; evident intent used (see header). */
const HvCreateModal = ({ onClose, onCreate, bounds, available, currency }) => {
/* Bounds come from the skin's `voucher` method row, and its ABSENCE is a real
state: isystem hard-fails voucher creation when there is no such row, so
the modal says that rather than validating against invented limits. */
const m = bounds || null;
const skin = { currency: currency || (m && m.currency) || "" };
const [amount, setAmount] = useStateHv("");
const [err, setErr] = useStateHv("");
const save = () => {
// Inline validation mirror of saveNewVoucher L346-365 (no FormRequest in the real controller).
const raw = amount.trim();
if (!raw) return setErr("Insert an amount"); // backend.insert_amount (label inferred)
const n = Number(raw);
if (!isFinite(n)) return setErr("Invalid amount"); // backend.invalid_amount (is_numeric)
if (!m) return setErr("This skin has no voucher method enabled, so vouchers cannot be issued on it");
if (m.min != null && n < m.min) return setErr(`Minimum voucher amount is ${hvFmtAmt(m.min)} ${skin.currency}`);
if (m.max != null && n > m.max) return setErr(`Maximum voucher amount is ${hvFmtAmt(m.max)} ${skin.currency}`);
/* Client-side courtesy only. post_transaction refuses to take a balance
below zero, so the real answer comes from the server and this just saves
a round trip. */
if (n > available) return setErr("Insufficient funds");
onCreate(n);
onClose();
};
return (
}>
{/* backend.enter_amount_voucher — label inferred */}
{ setAmount(e.target.value); setErr(""); }}
onKeyDown={e => { if (e.key === "Enter") save(); }} />
{err &&
{err}
}
Allowed range {hvFmtAmt(m.min)} – {hvFmtAmt(m.max)} {skin.currency} — the min/max of this skin's voucher withdraw
method (skin_withdraw_methods). If that method isn't enabled for the skin, creation fails with "Method not enabled".
Available funds (balance + credits): {hvFmtAmt(available)} {skin.currency}. On save, the server mints an 8-character code
is generated and the amount moves from your account to the skin-admin account ("Voucher CODE"). If that transfer
fails, the voucher row is deleted again.
);
};
/* Redeem voucher — GET /vouchers/cashoutVoucher/ + POST /vouchers/doCashoutVoucher/.
Real flow marks stato=2 / cashed_by / CashingOutAdded_time BEFORE the money moves, then
pays skin-admin → redeemer ("Cashout Voucher CODE"); a failed transfer reverts the row
(non-transactional window in between, L474-497). Player redeemers additionally get a
transaction_history row: transaction_type=150 (CASHOUT_VOUCHER), res_type=8 (undocumented). */
const HvRedeemModal = ({ rows, onClose, onRedeem, meName }) => {
const [code, setCode] = useStateHv("");
const [err, setErr] = useStateHv("");
const save = () => {
// Inline validation mirror of doCashoutVoucher L424-448.
const c = code.trim().toUpperCase();
if (!c) return setErr("Insert the voucher code"); // backend.insert_voucher_code (label inferred)
if (c.length !== 5) return setErr("Wrong voucher code"); // backend.wrong_voucher_code — length must be exactly 5
const row = rows.find(r => r.code === c);
// Nonexistent, already-redeemed (stato 2) and canceled (stato 5) deliberately share one
// message in the real controller. Error (3) is NOT screened there — replicated as-is.
if (!row || row.stato === 2 || row.stato === 5) return setErr("Voucher does not exist"); // backend.voucher_not_exists
/* Also enforced server-side by redeem_voucher(): issuing and redeeming your
own voucher is a round trip that moves nothing and leaves a paper trail
suggesting it did. */
if (meName && row.by === meName) return setErr("You can't collect vouchers created by yourself");
onRedeem(row);
onClose();
};
return (
}>
{/* backend.enter_voucher_code — label inferred */}
{ setCode(e.target.value.toUpperCase()); setErr(""); }}
onKeyDown={e => { if (e.key === "Enter") save(); }} />
{err &&
{err}
}
Redeeming marks the voucher Redeemed and pays its amount from the skin-admin account to your account
("Cashout Voucher CODE"). You can't redeem vouchers you created yourself.
);
};
/* View / print voucher — GET /vouchers/getVoucher/{code}/ → iframe-loads getVoucherPDF (an
HTML slip despite the name, voucher.blade.php; ?print=1 appends window.print()). Slip
content 1:1: skin logo (skins.logo_black → logo_img; wordmark stands in for the mock),
date (d/m/Y + G:i), amount + creator's currency, 30px bold code. */
const HvSlipModal = ({ row, onClose }) => {
/* The currency is on the voucher row itself — it is the currency the
voucher was ISSUED in, which is what the slip must show even if the skin
has since changed its own. */
const skin = { currency: row.currency || "" };
const d = new Date(row.cts);
const dateStr = `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}/${d.getFullYear()} · ${d.getHours()}:${String(d.getMinutes()).padStart(2, "0")}`;
const amtStr = `${hvFmtAmt(row.val)} ${skin.currency}`;
// backend.print — the real button appends ?print=1 to the slip iframe, which fires
// window.print(). Reproduced for real: the slip below is printed as-is (see hvPrintDoc).
const doPrint = () => hvPrintDoc(`Voucher ${row.code}`,
'
' + hvEsc(row.skin) + "
" +
'
Date' + hvEsc(dateStr) + "
" +
'
Amount' + hvEsc(amtStr) + "
" +
'
' + hvEsc(row.code) + "
");
return (
}>
{row.skin}
Date{dateStr}
Amount{amtStr}
{row.code}
Real gate, honestly: this slip route has no scoping or permission check — any authenticated backoffice user
(and the player web side) can render any voucher by guessing its 5-character code.
);
};
/* Mobile stacked card — code, amount, status, created scan first; the rest behind a tap. */
const HvMobileCard = ({ r, open, onToggle, onView }) => (
);
const HostVouchers = ({ brand }) => {
window.useLocale && window.useLocale();
const feed = useHrsFetch(() => window.sb.list("vouchers", { limit: 500 }), []);
const rows = useMemoHv(() => (feed.data || []).map(hvRowFromDb), [feed.data]);
const meFeed = useHrsFetch(() => window.sb.me(), []);
const me = meFeed.data || null;
/* The operator's own spendable balance, from their own wallet row — the
figure the create modal validates against. */
const balFeed = useHrsFetch(
() => (me ? window.sb.list("balances", { limit: 1, filters: { user: me.id } })
: Promise.resolve({ ok: true, data: [] })), [me && me.id]);
const myAvailable = (balFeed.data && balFeed.data[0] && Number(balFeed.data[0].available)) || 0;
/* Voucher bounds per skin: the `voucher` method row on skin_payment_methods.
isystem reads exactly this to bound voucher creation, and hard-fails if the
row is absent — so an absent row is a real, visible state here too. */
const boundsFeed = useHrsFetch(() => window.sb.list("skinPaymentMethods", { limit: 500 }), []);
const skinBounds = useMemoHv(() => {
const out = {};
(boundsFeed.data || []).forEach(r => {
if (r.method && r.method.code === "voucher") {
out[r.skin_id] = {
currency: r.currency || (r.skin && r.skin.currency) || "",
min: r.min_amount == null ? null : Number(r.min_amount),
max: r.max_amount == null ? null : Number(r.max_amount),
name: (r.skin && r.skin.name) || String(r.skin_id),
};
}
});
return out;
}, [boundsFeed.data]);
const save = useHrsSave([feed, balFeed]);
const skinOpts = useMemoHv(
() => Object.entries(skinBounds).map(([id, b]) => ({ id: Number(id), name: b.name })),
[skinBounds]);
const [f, setF] = useStateHv(HV_EMPTY_FILTERS);
const [sort, setSort] = useStateHv({ key: "id", dir: "desc" }); // real client default: column 0 (ID) desc — ajax.js L20
const [page, setPage] = useStateHv(0);
const [pageSize, setPageSize] = useStateHv(100); // real default 100/page, length menu [5,10,25,50,100] — ajax.js L17-24
const [sheetOpen, setSheetOpen] = useStateHv(false);
const [modal, setModal] = useStateHv(null); // "create" | "redeem" | { slip: row }
const [expanded, setExpanded] = useStateHv(() => new Set());
const setFilter = (patch) => setF(s => ({ ...s, ...patch }));
const clearAll = () => setF(HV_EMPTY_FILTERS);
const filtered = useMemoHv(() => {
const dayStart = (s) => (s ? new Date(s + "T00:00:00").getTime() : null);
const dayEnd = (s) => (s ? new Date(s + "T23:59:59").getTime() : null);
const cF = dayStart(f.cFrom), cT = dayEnd(f.cTo), rF = dayStart(f.rFrom), rT = dayEnd(f.rTo);
const aF = parseFloat(f.aFrom), aT = parseFloat(f.aTo);
return rows.filter(r => {
if (f.createdBy && !r.by.toLowerCase().startsWith(f.createdBy.trim().toLowerCase())) return false; // prefix — LIKE 'value%'
if (f.redeemBy && !r.redeemBy.toLowerCase().includes(f.redeemBy.trim().toLowerCase())) return false;
if (f.code && !r.code.includes(f.code.trim().toUpperCase())) return false;
if (cF !== null && r.cts < cF) return false;
if (cT !== null && r.cts > cT) return false;
if (rF !== null && (!r.rts || r.rts < rF)) return false;
if (rT !== null && (!r.rts || r.rts > rT)) return false;
if (!isNaN(aF) && r.val < aF) return false;
if (!isNaN(aT) && r.val > aT) return false;
// DIVERGENCE (evident intent): filters vouchers.stato. The real server matches
// users.stato — the creator's ACCOUNT status — here (getVouchers L163-165). See header.
if (f.status && String(r.stato) !== f.status) return false;
if (f.skin && r.skin !== f.skin) return false; // superadmin only — users.skin_id = value
return true;
});
}, [rows, f]);
const sorted = useMemoHv(() => {
const get = HV_SORT_GET[sort.key] || HV_SORT_GET.id;
const dir = sort.dir === "asc" ? 1 : -1;
return [...filtered].sort((a, b) => (get(a) - get(b)) * dir || (a.id - b.id) * dir);
}, [filtered, sort]);
useEffectHv(() => { setPage(0); }, [f, sort, pageSize]);
const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
const paged = sorted.slice(page * pageSize, page * pageSize + pageSize);
const from = sorted.length === 0 ? 0 : page * pageSize + 1;
const to = Math.min(sorted.length, (page + 1) * pageSize);
const onSort = (k) => setSort(s => s.key === k ? { key: k, dir: s.dir === "asc" ? "desc" : "asc" } : { key: k, dir: "asc" });
const toggleCard = (id) => setExpanded(s => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
const doCreate = (amt) => save.run(
/* The server debits the issuer, mints the code and inserts the voucher in
one transaction. The old version generated a 5-character code in the
browser and retried locally on collision — a client that chooses the code
chooses which voucher exists. */
() => window.sb.rpc("issue_voucher", { p_amount: amt, p_currency: null, p_skin_id: null }));
const doRedeem = (row) => save.run(
/* Locks on the code server-side. A voucher is bearer money and two people
presenting the same code in the same second is the ordinary case, not the
exotic one. */
() => window.sb.rpc("redeem_voucher", { p_code: row.code }));
// Active-filter pills (Transactions-shape).
const pills = [];
const addPill = (cond, label, patch) => { if (cond) pills.push({ label, patch }); };
addPill(f.createdBy, `Created by “${f.createdBy}”`, { createdBy: "" });
addPill(f.redeemBy, `Redeem by “${f.redeemBy}”`, { redeemBy: "" });
addPill(f.code, `Code “${f.code}”`, { code: "" });
addPill(f.cFrom || f.cTo, `Created ${f.cFrom || "…"} — ${f.cTo || "…"}`, { cFrom: "", cTo: "" });
addPill(f.rFrom || f.rTo, `Redeemed ${f.rFrom || "…"} — ${f.rTo || "…"}`, { rFrom: "", rTo: "" });
addPill(f.aFrom || f.aTo, `Amount ${f.aFrom || "0"} — ${f.aTo || "∞"}`, { aFrom: "", aTo: "" });
addPill(f.status, `Status: ${(HV_STATUS[Number(f.status)] || {}).label || f.status}`, { status: "" });
addPill(f.skin, `Skin: ${f.skin}`, { skin: "" });
return (
Vouchers
Real gate, honestly: the sidebar entry is gated by support_vouchers (checkUserBoPerm) — but that
gate exists only in the sidebar. No VouchersController method re-checks it, so any
authenticated 2FA'd backoffice user can open /vouchers/* directly; only the row scoping inside
getVouchers limits what they see, and the create/redeem endpoints are open to every BO role. Quirk: the
sidebar's role gate references usertypes.AMMINISTRATORE_LEVEL, which doesn't exist — so
Administration (level 6) users never even see the menu entry.
Printable cash-out slips backed by the skin's "voucher" withdraw method
These two buttons render only for Cashier (SHOP, level 20) and Super admin (level 0) —
index.blade L53-62. Skin admins (2) and Customer care (4) see the list without them. This demo session is a Super
admin, so both show — though the underlying endpoints are not role-gated at all (see the page tip).
Voucher — a printable 5-character cash-out slip (code from 0-9 A-Z) a cashier or admin hands to a player. Pending codes in the table open the printable slip.,
<>Create — moves the amount from the creator's balance to the skin-admin account ("Voucher CODE"). The amount must sit inside the skin's voucher withdraw-method min/max, and the feature only works at all if that method (method_code = 'voucher') is enabled for the skin.,
<>Redeem — marks the voucher Redeemed, then pays the amount from the skin-admin account to the redeemer ("Cashout Voucher CODE"). Player redeemers also get a transaction-history row (type 150 · Cashout Voucher). Self-redeem is blocked.,
<>Statuses — Pending (1) → Redeemed (2). Canceled (5) and Error (3) are displayed but never written by the app — rows like that can only originate outside it.,
]}>
The full voucher ledger for {brand?.name || "the platform"}. Who sees what is role-scoped: super admin sees everything
(plus the Skin column and filter), skin admin/administration their own skin, everyone else only vouchers they created
or redeemed.
{/* Mobile: filters collapse into one button + full-height sheet (brief §11) */}
{/* Desktop: hero filter-card strip (Transactions shape) */}
Results
{sorted.length.toLocaleString()}
of {rows.length.toLocaleString()}