{/* ------- 1. navy top strip ------- */}
setMobileOpen(true)}>
I
IWAKIRI
{/* Three-column grid layout: [Logo] [Stats · centered] [Actions · right] */}
{T("navy.saldo","Saldo")}
{fmtEUR(wallet && wallet.saldo)}
{T("navy.fido","Fido")}
{fmtEUR(wallet && wallet.fido)}
{T("navy.disponibilita","Disponibilità")}
{fmtEUR(wallet && wallet.dispon)}
{/* This used to be a bare ⟳ glyph that did nothing. Upstream it is a
real control: header.blade.php:333 renders fa-refresh wired to
updateBalance(user_id, '#cur_agent_balance', …), which re-reads
the operator's balance and credits without a page load. */}
{
loadWallet(); setBalanceStamp(new Date().toLocaleTimeString());
window.PAYBO && window.PAYBO.emitToast && window.PAYBO.emitToast({
id: `bal-${Date.now()}`, tx_id: T("navy.balanceRefreshed","Balance refreshed"),
amount: 0, currency: "HOST", player: T("navy.title","Iwakiri White Label"),
reason: "Real platform: updateBalance() re-reads users.balance and users.credits over AJAX. Prototype figures are fixed, so the values do not move.",
});
}}>
{muted && / }
{onOpenTweaks && (
{T("navy.tweaks","Tweaks")}
⌘K
)}
{/* Display-currency selector — same fixed-position dropdown trick
as the language selector below. Only changes how the navy
strip's Balance / Credit / Available are displayed; the
underlying network ledger stays in EUR. */}
{currentCur.symbol} {currentCur.code}
{curOpen && (
{curList.map(c => (
{ setDisplayCurrency(c.code); setCurOpen(false); }}
style={{
display:"flex", alignItems:"center", gap:8, width:"100%",
padding:"8px 10px", border:0, background: displayCurrency===c.code ? "var(--p-50)" : "transparent",
borderRadius:6, cursor:"pointer", fontSize:12.5, fontFamily:"inherit", textAlign:"left",
color:"var(--text-primary)",
}}>
{c.symbol}
{c.label}
{c.code}
{displayCurrency===c.code && }
))}
)}
{/* Language selector — trigger stays inside the navy strip but the
dropdown renders with position: fixed so it escapes the navy's
overflow: hidden clip. Click outside / Escape closes. */}
{currentLang.flag}
{langOpen && (
{(window.AVAILABLE_LOCALES || []).map(l => (
{ window.setLocale(l.id); setLangOpen(false); }}
style={{
display:"flex", alignItems:"center", gap:8, width:"100%",
padding:"8px 10px", border:0, background: currentLang.id===l.id ? "var(--p-50)" : "transparent",
color:"var(--text-primary)", fontSize:13, fontWeight:500, cursor:"pointer",
borderRadius:6, fontFamily:"inherit",
}}>
{l.flag}
{l.label}
{currentLang.id===l.id && }
))}
)}
{userOpen && (
j.moreno
Skin admin · Iwakiri BR
{ setUserOpen(false); onNav("host-myaccount"); }}
style={{
display:"flex", alignItems:"center", gap:8, width:"100%",
padding:"8px 10px", border:0, background:"transparent",
color:"var(--text-primary)", fontSize:13, fontWeight:500, cursor:"pointer",
borderRadius:6, fontFamily:"inherit", textAlign:"left",
}}>
My account
{/* Logout IS in the real dropdown (header.blade.php:425 — GET /logout
behind a confirm), so leaving it out made this menu structurally
wrong. It is not an invented action; it is a real one the
prototype cannot perform, which is exactly what NoBackend is
for — there is no session to end. */}
{T("navy.logout","Logout")}
)}
{/* ------- 2. blue host nav (White Label top) ------- */}
{HOST_NAV.map(item => {
const isActive = item.id === activeNav || (navMenu && navMenu.id === item.id);
const isPayments = item.id === "payments";
const handleClick = (e) => {
// Items that own a real page (e.g. Promozioni Bonus) navigate.
if (item.route) { onNav(item.route); return; }
// Payments opens the PayBO dashboard (and reveals the PayBO subnav).
if (isPayments) { onNav("dashboard"); return; }
// Items with a click submenu (e.g. CMS) toggle a navigable dropdown.
if (item.children && item.children.length) {
if (navMenu && navMenu.id === item.id) { setNavMenu(null); return; }
const r = e.currentTarget.getBoundingClientRect();
setNavMenu({ id: item.id, top: r.bottom, left: r.left });
return;
}
if (!isPayments && window.PAYBO?.emitToast) {
// Safety net only: as of Aug 2026 every HOST_NAV entry and every
// submenu item resolves to a route, so this branch is unreachable.
// It stays so a newly added item that forgets its `route` says so
// instead of silently doing nothing.
window.PAYBO.emitToast({
id: `host-${item.id}-${Date.now()}`,
tx_id: item.label,
amount: 0, currency: "HOST",
player: "Iwakiri White Label",
reason: `No prototype page is registered for this menu item.`,
});
}
};
const hasMenu = Array.isArray(item.menu) && item.menu.length > 0;
return (
openNavMenu(item.id, e.currentTarget) : handleClick}
onMouseEnter={hasMenu ? (e) => openNavMenu(item.id, e.currentTarget) : undefined}
onMouseLeave={hasMenu ? scheduleNavMenuClose : undefined}>
{T(item.i18n, item.label)}
{navCount(item) != null && {navCount(item)} }
{item.dropdown && ▾ }
{item.primary && ▾ }
);
})}
{/* Host-nav dropdowns — fixed-positioned so they escape the blue nav's
overflow clip. "Report" uses a hover `menu`; "CMS" uses a click
`children` submenu whose entries can route into PayBO (e.g. Skins). */}
{navMenu && (() => {
const item = HOST_NAV.find(i => i.id === navMenu.id);
if (!item) return null;
// Report-style hover menu (items carrying `menu`).
if (item.menu) {
return (
{item.menu.map(m => {
const label = T(m.i18n, m.label);
return (
{
setNavMenu(null);
// Implemented reports navigate; the rest emit the demo toast.
if (m.route) { onNav(m.route); return; }
if (window.PAYBO?.emitToast) {
window.PAYBO.emitToast({
id: `host-report-${m.id}-${Date.now()}`,
tx_id: label, amount: 0, currency: "HOST",
player: "Iwakiri White Label",
reason: `${T(item.i18n, item.label)} · no prototype page is registered for this menu item.`,
});
}
}}>
{label}
);
})}
);
}
// CMS-style click submenu (items carrying `children`).
if (item.children) {
const handleSub = (c) => {
setNavMenu(null);
if (c.nav) { onNav(c.nav); return; }
if (window.PAYBO?.emitToast) {
window.PAYBO.emitToast({
id: `host-${c.id}-${Date.now()}`,
tx_id: c.label, amount: 0, currency: "HOST",
player: "Iwakiri White Label",
reason: `No prototype page is registered for this menu item.`,
});
}
};
return (
{item.children.map(c => (
handleSub(c)}
style={{
display:"flex", alignItems:"center", gap:8, width:"100%",
padding:"9px 11px", border:0, background:"transparent",
color:"var(--text-primary)", fontSize:13, fontWeight: c.nav ? 600 : 500,
cursor:"pointer", borderRadius:6, fontFamily:"inherit", textAlign:"left",
}}
onMouseEnter={e=>e.currentTarget.style.background="var(--p-50)"}
onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
{T(c.i18n, c.label)}
{c.nav && }
))}
);
}
return null;
})()}
{/* ------- 3. secondary nav (PayBO sections) — Payments only ------- */}
{showPaybo && (
{PAYBO_ITEMS.map(it => (
onNav(it.id)}
title={it.hint || it.label}>
{T(it.i18n, it.label)}
{it.v2 && v2 }
{it.badge != null && {it.badge} }
))}
{/* The brand switcher lives here and ONLY here — same as upstream
(admin/payments/index.blade.php:87-94, POST /payments/brand/). It is
not in the host header, the host sidebar, or any mobile menu.
brandLocked: an operator with a single skin does not get a switcher
at all upstream. The button becomes a static div with a padlock, and
the brand modal is not even included in the page
(index.blade.php:78-85 and :113). Modelled so the state is visible
rather than only described. */}
{brandLocked ? (
{brand.short}
{brand.name}
) : (
{brand.short}
{brand.name}
)}
{/* View-currency override — only meaningful once a single brand is
selected (its own currency is the baseline to convert from).
Distinct from the navy strip's picker, which only affects the
host-wide Balance/Credit/Available. */}
{!brand.isAll && onSetViewCurrency && (
{viewCurrency ? `View: ${viewCurrency}` : `View: ${brand.currency}`}
)}
)}
{viewCurOpen && (
{ onSetViewCurrency(null); setViewCurOpen(false); }}
style={{
display:"flex", alignItems:"center", gap:8, width:"100%",
padding:"8px 10px", border:0, background: !viewCurrency ? "var(--p-50)" : "transparent",
borderRadius:6, cursor:"pointer", fontSize:12.5, fontFamily:"inherit", textAlign:"left",
color:"var(--text-primary)", fontWeight:600,
}}>
{brand.currency && window.currencySymbol ? window.currencySymbol(brand.currency) : ""}
{brand.name}'s own currency ({brand.currency})
{!viewCurrency && }
{curList.map(c => (
{ onSetViewCurrency(c.code); setViewCurOpen(false); }}
style={{
display:"flex", alignItems:"center", gap:8, width:"100%",
padding:"8px 10px", border:0, background: viewCurrency===c.code ? "var(--p-50)" : "transparent",
borderRadius:6, cursor:"pointer", fontSize:12.5, fontFamily:"inherit", textAlign:"left",
color:"var(--text-primary)",
}}>
{c.symbol}
{c.label}
{c.code}
{viewCurrency===c.code && }
))}
)}
{/* ------- 4. floating icon rail — Payments only ------- */}
{showPaybo && (
{PAYBO_ITEMS.map(it => (
onNav(it.id)}>
{it.badge != null && (
{it.badge}
)}
))}
{onOpenTweaks && (
)}
)}
{/* ------- main content (PayBO page area) ------- */}
{/* data-route is additive: a per-screen CSS scoping hook so a screen can be
styled without editing its (protected) file and without widening a shared
rule onto other screens. No behaviour, no layout, no existing class changes. */}
{children}
{/* ------- 5. mobile drawer — shown only on narrow widths.
Contains every nav reach-point: host nav (Dashboard, Lista utenti,
Payments, ...), PayBO subnav (Transactions, Deposits, Players, ...),
Tweaks, and the stats strip (Saldo / Fido / Disponibilità) so the
whole app is reachable from a single left-hand menu. */}
{T("navy.saldo","Saldo")}
{fmtEUR(wallet && wallet.saldo)}
{T("navy.fido","Fido")}
{fmtEUR(wallet && wallet.fido)}
{T("navy.disponibilita","Disponibilità")}
{fmtEUR(wallet && wallet.dispon)}
{T("sub.hostGroup","White Label host")}
{HOST_NAV.map(item => {
const isPayments = item.id === "payments";
const label = T(item.i18n, item.label);
/* Sub-entries arrive three ways now:
· CMS carries `children` (each with `nav`)
· Report / Impostazioni / Commissioni carry `menu` (each with `route`)
· Payments has neither — it IS the PayBO surface, so it takes
PAYBO_GROUPS as its children.
The drawer used to render only `children`, so the three `menu`
dropdowns had no reachable items on a phone at all, and PayBO
lived in a second "PayBO sections" block further down that
duplicated the Payments row above it. One expandable group per
area now, the same way the desktop dropdowns behave. */
const subs = isPayments
? PAYBO_GROUPS.flatMap(g => g.items.map(it => ({
id: it.id, label: T(it.i18n, it.label), route: it.id,
icon: it.icon, badge: it.badge, group: T(g.i18n, g.label),
})))
: (item.children || item.menu || []).map(c => ({
id: c.id, label: T(c.i18n, c.label), route: c.nav || c.route,
}));
const go = (routeId) => { closeMobile(); if (routeId) onNav(routeId); };
/* The old code hardcoded `item.id === "payments"`, so the
Payments row was highlighted permanently no matter where the
operator actually was. Highlight what is really open. */
const onPayboSurface = ((window.pathForActive && window.pathForActive(active)) || "").startsWith("/payments");
const isActive = isPayments
? onPayboSurface
: (item.route === active || subs.some(x => x.route === active));
const holdsActive = subs.some(x => x.route === active);
const expanded = openGroups[item.id] !== undefined ? openGroups[item.id] : holdsActive;
return (
{
// A parent toggles its own section instead of navigating.
/* Payments now has subs too, so it expands like the rest
instead of jumping straight to the PayBO dashboard. */
if (subs.length) { toggleGroup(item.id); return; }
/* This used to fire a toast for EVERY host item instead of
navigating, so the entire Host nav was dead on phones
while the same items worked on desktop. */
go(item.route);
}}>
{label}
{navCount(item) != null && {navCount(item)} }
{subs.length > 0 && (
)}
{subs.length > 0 && expanded && (
{subs.map((c, i) => (
{/* PayBO's own grouping (Overview / Payments / Players /
Finance / Platform) is worth keeping — 10 flat rows
read as a list, 10 grouped rows read as a map. */}
{c.group && c.group !== (subs[i - 1] || {}).group && (
{c.group}
)}
go(c.route)}>
{c.icon && }
{c.label}
{c.badge != null && {c.badge} }
))}
);
})}
{/* The standalone "PayBO sections" block that used to sit here was
removed (Arbi, Aug 2026): it listed the same ten destinations that
the Payments row above already owns, so the drawer showed PayBO
twice. Payments is now an expandable group like Report or CMS and
carries them as its children. */}
{/* My account. The real sidebar carries this entry as mobile-only
(sidebar.blade.php:80-82, class `hide-on-desktop`) — on desktop
it lives in the header dropdown instead. Same split here. */}
{ onNav("host-myaccount"); closeMobile(); }}>
{T("navy.myAccount","My account")}
{onOpenTweaks && (
{ onOpenTweaks(); closeMobile(); }}>
{T("navy.tweaks","Tweaks")}
⌘K
)}
{/* NO brand switcher here. Upstream the switcher exists in exactly one
place — the PayBO subnav (admin/payments/index.blade.php:87-94,
POST /payments/brand/). It is not in the host header, not in the
host sidebar, and not in any mobile menu. Putting it in this
drawer implied the whole backoffice is brand-scoped; it is not,
the host is scoped by user hierarchy and skin assignment.
Removed Aug 2026 on the same reasoning that removed the
duplicate "PayBO sections" block. */}
{/* Mobile language picker */}
{(window.AVAILABLE_LOCALES || []).length > 1 && (
{T("tweaks.language","Language")}
{window.AVAILABLE_LOCALES.map(l => (
{ window.setLocale(l.id); }}
style={{
display:"inline-flex", alignItems:"center", gap:6,
padding:"6px 10px", borderRadius:7, cursor:"pointer",
border: "1px solid " + (currentLang.id===l.id ? "var(--p-500)" : "var(--paybo-border)"),
background: currentLang.id===l.id ? "var(--p-50)" : "#fff",
color:"var(--text-primary)", fontSize:12, fontWeight:600, fontFamily:"inherit",
}}>
{l.flag}
{l.label}
))}
)}
);
};