// portal-app.jsx β€” Employee portal shell: browser frame β†’ login β†’ sidebar app. const PORTAL_PALETTE = ['#E55B13', '#1D6FB8', '#137C50', '#5B3FB8', '#0F172A']; function portalTheme(accent) { const root = document.documentElement; root.style.setProperty('--accent', accent); const h = accent.replace('#', ''); const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16); root.style.setProperty('--accent-deep', `#${Math.round(r*0.78).toString(16).padStart(2,'0')}${Math.round(g*0.78).toString(16).padStart(2,'0')}${Math.round(b*0.78).toString(16).padStart(2,'0')}`); root.style.setProperty('--accent-soft', `#${Math.round(r+(255-r)*0.86).toString(16).padStart(2,'0')}${Math.round(g+(255-g)*0.86).toString(16).padStart(2,'0')}${Math.round(b+(255-b)*0.86).toString(16).padStart(2,'0')}`); } function PortalApp() { const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS); useEffect(() => { window.__currentTweaks = tweaks; window.dispatchEvent(new Event('tweaks-changed')); portalTheme(tweaks.accent); document.title = `${tweaks.companyName} β€” Employee Portal`; }, [tweaks]); useEffect(() => { portalTheme(tweaks.accent); }, []); return (
setTweak('companyName', v)} /> setTweak('tagline', v)} /> setTweak('accent', v)} /> ); } // Browser-window frame, scales to fit function PortalFrame({ children }) { const W = 1440, H = 1000; const [scale, setScale] = useState(1); useEffect(() => { const compute = () => setScale(Math.min((window.innerWidth - 32) / W, (window.innerHeight - 32) / H, 1)); compute(); window.addEventListener('resize', compute); return () => window.removeEventListener('resize', compute); }, []); return (
{['#FF5F57', '#FEBC2E', '#28C840'].map(c => )}
πŸ”’ my.railflagspro.com
{children}
); } function PortalGate() { const { authed } = usePortal(); return authed ? : ; } // ── Login ──────────────────────────────────────────────────── function PortalLogin() { const { setAuthed, me } = usePortal(); const { tweaks } = useTweakValues(); const [email, setEmail] = useState('mhale@demo-rwic.com'); const [pw, setPw] = useState('demo123'); const [err, setErr] = useState(''); const [loading, setLoading] = useState(false); const submit = async () => { setErr(''); setLoading(true); try { let res; if (RFP.loginAsync) { res = await RFP.loginAsync(email, pw, 'portal'); } else { res = RFP.login(email, pw, 'portal'); } if (res.ok) setAuthed(true); else setErr(res.error); } catch (e) { setErr(e.message || 'Login failed.'); } finally { setLoading(false); } }; return (
{/* Left brand panel */}
{(tweaks.companyName||'RF').split(/\s+/).map(w=>w[0]).join('').slice(0,2).toUpperCase()}
{tweaks.companyName}
Your pay, time,
and documents.
Pay stubs, W-2s, time-off, reimbursements, certifications, and signed documents β€” all in one place.
{tweaks.tagline} Β· v1.0
{/* Right form */}
Sign in
Use your company email and password.
setEmail(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} style={pInputStyle} /> setPw(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} style={pInputStyle} /> {err &&
{err}
}
Forgot password? Β· Contact HR
Demo β€” mhale@demo-rwic.com Β· password demo123
); } // ── Shell ──────────────────────────────────────────────────── function PortalShell() { const { me, setAuthed, inbox, certs, toasts, activeDoc, setActiveDoc } = usePortal(); const [screen, setScreen] = useState('home'); const { tweaks } = useTweakValues(); const actionDocs = inbox.filter(d => d.status === 'action-required').length; const certIssues = certs.filter(c => c.status !== 'current').length; const nav = [ { id: 'home', label: 'Home', icon: }, { id: 'pay', label: 'Pay & documents', icon: }, { id: 'timecards', label: 'Timecards', icon: }, { id: 'pto', label: 'Time off', icon: }, { id: 'reimb', label: 'Reimbursements', icon: }, { id: 'certs', label: 'Certifications', icon: , badge: certIssues }, { id: 'inbox', label: 'Documents', icon: , badge: actionDocs }, { id: 'profile', label: 'My profile', icon: }, ]; return ( <> {/* Sidebar */} {/* Screen */}
{screen === 'home' && } {screen === 'pay' && } {screen === 'timecards' && } {screen === 'pto' && } {screen === 'reimb' && } {screen === 'certs' && } {screen === 'inbox' && } {screen === 'profile' && }
{/* Doc viewer */} {activeDoc && ( setActiveDoc(null)} title={activeDoc.title} subtitle={activeDoc.subtitle} accent="var(--accent)"> {activeDoc.el === 'paystub' && } {activeDoc.el === 'w2' && } )} {/* Toasts */}
{toasts.map(t => (
{t.text}
))}
); } ReactDOM.createRoot(document.getElementById('root')).render();