// app.jsx — main app shell with login + routing + tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "light",
"density": "comfortable",
"sidebar": "expanded"
}/*EDITMODE-END*/;
// Resolve which page ids a signed-in user may access, from the loaded
// permission matrix. If the sheet has no page columns yet (col C onward empty),
// fall back to "all visible" so the app stays usable during setup.
function resolveAllowed(perms, user) {
if (!perms || !user) return null;
if (perms.pageCols.length === 0) {
const all = {};
(window.NAV_PAGE_IDS || []).forEach((id) => { all[id] = true; });
return all;
}
const entry = perms.byRole[user.role];
return entry ? entry.pages : {};
}
function App() {
const [user, setUser] = useStateApp(null);
const [route, setRoute] = useStateApp('home');
const [perms, setPerms] = useStateApp(null); // { pageCols, byRole } or null while loading
const [permsErr, setPermsErr] = useStateApp('');
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
// Apply theme + density to
useEffectApp(() => {
document.documentElement.setAttribute('data-theme', t.theme);
document.documentElement.setAttribute('data-density', t.density);
}, [t.theme, t.density]);
// Reset route to home when user changes
useEffectApp(() => { if (user) setRoute('home'); }, [user]);
// Load the permission matrix from the sheet once a user signs in.
useEffectApp(() => {
if (!user) { setPerms(null); setPermsErr(''); return; }
let cancelled = false;
setPerms(null); setPermsErr('');
window.RTDC_SHEETS.loadPermissions()
.then((p) => { if (!cancelled) setPerms(p); })
.catch(() => { if (!cancelled) setPermsErr('Could not load access permissions from the sheet.'); });
return () => { cancelled = true; };
}, [user]);
// Route guard: if the current page isn't permitted, jump to the first allowed page.
useEffectApp(() => {
if (!user || !perms) return;
const allowed = resolveAllowed(perms, user);
if (allowed && !allowed[route]) {
const first = (window.NAV_PAGE_IDS || []).find((id) => allowed[id]);
if (first && first !== route) setRoute(first);
}
}, [perms, route, user]);
const handleLogout = () => {
setUser(null);
setRoute('home');
setPerms(null);
setPermsErr('');
};
if (!user) {
return (
<>
);
}
const roleEntry = perms ? perms.byRole[user.role] : null;
const allowed = resolveAllowed(perms, user);
const permsReady = !!perms;
const roleDisplay = (roleEntry && roleEntry.displayName) || user.role;
const hasAnyAccess = !!(allowed && Object.keys(allowed).some((k) => allowed[k]));
const Page = ROUTES[route] || ROUTES.home;
return (
setTweak('sidebar', t.sidebar === 'icon-only' ? 'expanded' : 'icon-only')}
/>
{!permsReady && !permsErr && Loading your workspace…}
{permsErr && {permsErr}}
{permsReady && !permsErr && !hasAnyAccess && (
Your role “{user.role}” has no page access configured.
Please contact your administrator.
)}
{permsReady && hasAnyAccess && allowed[route] && (
)}
);
}
// Simple centered message pane for loading / empty / error states.
function CenterPane({ children, tone }) {
return (
);
}
const ROUTES = {
'home': (p) => ,
'talent-box': (p) => ,
'ccd': (p) => ,
'kpi': (p) => ,
'core': (p) => ,
'comp': (p) => ,
'report': (p) => ,
};
// ─── Tweaks Panel ───
function Tweaks({ t, setTweak }) {
const { TweaksPanel, TweakSection, TweakRadio, TweakSelect } = window;
return (
setTweak('theme', v)}
/>
setTweak('density', v)}
/>
setTweak('sidebar', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render();