/* === App shell + module router === */ const NAV = [ { id: 'home', label: 'Home', num: '01' }, { id: 'pay', label: 'Pay', num: '02' }, { id: 'timeoff', label: 'Time off', num: '03' }, { id: 'benefits', label: 'Benefits', num: '04' }, { id: 'expenses', label: 'Expenses', num: '05' }, { id: 'career', label: 'Career', num: '06' }, { id: 'team', label: 'Team', num: '07' }, { id: 'tasks', label: 'Tasks', num: '08' }, { id: 'learning', label: 'Learning', num: '09' }, { id: 'documents', label: 'Documents', num: '10' }, { id: 'messages', label: 'Messages', num: '11' }, ]; const Sidebar = ({ current, onNav, employee, onSwitch, onTheme, theme }) => { const [showSwitch, setShowSwitch] = React.useState(false); return ( ); }; const Topbar = ({ section, employee }) => { const now = new Date(); const dateStr = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }); const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); return (
Workday ——— {employee.firstName} {employee.lastName} / {employee.title}
{dateStr.toUpperCase()} · {timeStr}
⌘K Search
); }; const App = () => { const [section, setSection] = React.useState(() => { const hash = (location.hash || '#home').slice(1); return NAV.find(n => n.id === hash) ? hash : 'home'; }); const [employeeId, setEmployeeId] = React.useState(() => localStorage.getItem('wd_employee') || 'sarah'); const [theme, setTheme] = React.useState(() => localStorage.getItem('wd_theme') || 'light'); const employee = window.WD_EMPLOYEES[employeeId]; React.useEffect(() => { document.documentElement.classList.toggle('dark', theme === 'dark'); localStorage.setItem('wd_theme', theme); }, [theme]); React.useEffect(() => { location.hash = section; }, [section]); const onSwitch = (id) => { window.WD.set(id); setEmployeeId(id); if (window.WDVoice) setTimeout(() => window.WDVoice.mount(), 50); }; const Module = window.WDModules[section] || window.WDModules.home; return (
setTheme(t => t === 'dark' ? 'light' : 'dark')} theme={theme}/>
); }; window.WDApp = App;