/* Studio shell — auth gate, role switch, responsive nav, routing, real data. */
const Sshell = window.SparkleClassicDesignSystem_7a1470;
function navItems(role) {
const items = [{ id: 'orders', label: 'Orders', icon: 'list' }];
if (can(role, 'manageTeam') || can(role, 'editRetention')) items.push({ id: 'settings', label: 'Settings', icon: 'sliders' });
return items;
}
function Sidebar({ role, view, onView }) {
const { Icon } = Sshell;
return (
);
}
function NarrowNav({ role, view, onView }) {
const { Icon } = Sshell;
return (
{navItems(role).map((it) => (
))}
);
}
// Read-only badge of the signed-in role — the role comes from the session, not a toggle.
function RoleBadge({ role }) {
return (
SIGNED IN AS
{role === 'crp' ? 'Support' : 'Admin'}
);
}
function TopBar({ role, attention, narrow, onSignOut }) {
const { Icon, Avatar, Badge } = Sshell;
return (
{narrow
?
Studio
:
}
{attention > 0 &&
{attention} need attention}
Loading order…
;
if (data.error) {
return (
Couldn’t load this order: {data.error}
);
}
return ;
}
function AdminApp() {
const narrow = useIsNarrow();
const [signedIn, setSignedIn] = React.useState(false);
const [booting, setBooting] = React.useState(true);
const [role, setRole] = React.useState('admin');
const [orders, setOrders] = React.useState([]);
const [loadErr, setLoadErr] = React.useState(null);
const [view, setView] = React.useState('orders');
const [openId, setOpenId] = React.useState(null);
const [crpPerms, setCrpPermsState] = React.useState({});
const loadOrders = React.useCallback(
() => apiFetch('/api/orders').then((d) => { setOrders((d.orders || []).map(studioOrderFromApi)); if (d.role) setRole(d.role); setCrpPermsState(d.crpPerms || {}); setCrpOverrides(d.crpPerms || {}); setLoadErr(null); }),
[]
);
// On mount: if a session cookie is still valid, /api/orders succeeds and we skip sign in.
React.useEffect(() => {
let alive = true;
apiFetch('/api/orders')
.then((d) => { if (!alive) return; setOrders((d.orders || []).map(studioOrderFromApi)); if (d.role) setRole(d.role); setCrpPermsState(d.crpPerms || {}); setCrpOverrides(d.crpPerms || {}); setSignedIn(true); })
.catch(() => {})
.finally(() => { if (alive) setBooting(false); });
return () => { alive = false; };
}, []);
if (booting) return Loading…
;
if (!signedIn) return { setSignedIn(true); loadOrders().catch((e) => setLoadErr(e.message)); }} />;
const signOut = () => {
fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'same-origin', body: JSON.stringify({ action: 'logout' }) })
.finally(() => { setSignedIn(false); setOrders([]); setOpenId(null); });
};
const goView = (v) => { setView(v); setOpenId(null); };
const update = (id, patch) => setOrders((os) => os.map((o) => o.id === id ? { ...o, ...patch } : o));
const attention = orders.filter((o) => o.status === 'action').length;
return (
{!narrow &&
}
{narrow &&
}
{narrow &&
}
{openId ? (
{ setOpenId(null); loadOrders().catch(() => {}); }} onUpdate={update} />
) : view === 'settings' ? (
{ setCrpPermsState(p); setCrpOverrides(p); }} />
) : (
{loadErr && Couldn’t refresh orders: {loadErr}
}
setOpenId(o.id)} />
)}