// admin-app.jsx — Top-level back-office shell: browser window > sidebar // (role switcher) > active role view. Plus the employee + timecard drawers // and access-code gate. const A_PALETTE = ['#E55B13', '#1D6FB8', '#137C50', '#5B3FB8', '#0F172A']; function adminApplyTheme(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 AdminApp() { const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS); useEffect(() => { window.__currentTweaks = tweaks; window.dispatchEvent(new Event('tweaks-changed')); adminApplyTheme(tweaks.accent); document.title = `${tweaks.companyName} — Operations Console`; }, [tweaks]); useEffect(() => { adminApplyTheme(tweaks.accent); }, []); return (
setTweak('companyName', v)} /> setTweak('tagline', v)} /> setTweak('accent', v)} /> ); } // ── Auth gate ──────────────────────────────────────────────── function ConsoleGate() { const [session, setSession] = useState(() => RFP.session()); const [sub, setSub] = useState(null); const [subLoaded, setSubLoaded] = useState(false); const [paywalled, setPaywalled] = useState(false); const handleAuthed = async (newSession) => { setSession(newSession); try { // Load subscription via RFP_ENTITLEMENTS (new spec helper) with RFP.subscription fallback let s = null; if (typeof RFP_ENTITLEMENTS !== 'undefined') { RFP_ENTITLEMENTS.clearCache(); s = await RFP_ENTITLEMENTS.getSubscription(); } // Fallback to old helper if (!s) s = await RFP.subscription.load(); setSub(s); // Gate check: if Supabase is live and explicitly returned null, show paywall // If Supabase is unavailable (null due to network), fall through (don't lock demo) const hasActive = s ? (s.status === 'active' || s.status === 'trialing') : null; // null = unknown (offline/demo mode) if (hasActive === false) { setPaywalled(true); } } catch (e) { console.warn('ConsoleGate: subscription load failed', e); } finally { setSubLoaded(true); } }; // Load subscription on mount if already logged in useEffect(() => { if (session && session.app === 'console' && !subLoaded) { const loadSub = async () => { try { let s = null; if (typeof RFP_ENTITLEMENTS !== 'undefined') { s = await RFP_ENTITLEMENTS.getSubscription(); } if (!s) s = await RFP.subscription.load(); setSub(s); if (s && !(s.status === 'active' || s.status === 'trialing')) { setPaywalled(true); } } catch (e) { console.warn('ConsoleGate mount: subscription load failed', e); } finally { setSubLoaded(true); } }; loadSub(); } }, []); const handleLogout = () => { RFP.logout(); RFP.subscription.clear(); if (typeof RFP_ENTITLEMENTS !== 'undefined') RFP_ENTITLEMENTS.clearCache(); setSession(null); setSub(null); setSubLoaded(false); setPaywalled(false); }; if (!session || session.app !== 'console') return ; // Full-screen paywall when subscription is explicitly inactive if (paywalled) return ; return ; } // ── Full-screen subscription paywall ───────────────────────── function SubscriptionPaywall({ onSignOut }) { return (
🚂

Subscription Required

Your company does not have an active Railflagging Pro subscription. Subscribe to access the Operations Console.

); } // ── Plan badge ─────────────────────────────────────────────── function PlanBadge({ sub }) { if (!sub) return null; const isActive = sub && (sub.status === 'active' || sub.status === 'trialing'); if (!isActive) { return ( Inactive — Renew ); } const planLabel = sub.plan === 'large_crew' ? 'Large Crew' : sub.plan === 'trial' ? 'Trial' : 'Small Crew'; const isTrial = sub.plan === 'trial' || sub.status === 'trialing'; return ( {planLabel} ); } // ── Subscription banner (shown when inactive) ───────────────── function SubBanner({ sub }) { const [dismissed, setDismissed] = useState(false); if (!sub || dismissed) return null; const isActive = sub.status === 'active' || sub.status === 'trialing'; if (isActive) return null; return (
⚠️ Your subscription is inactive. Subscribe at{' '} railflagging-pro.madethis.app/#pricing
); } // ── Console — sidebar + role view ──────────────────────────── function Console({ session, sub, onLogout }) { const allRoleIds = ROLES.map(r => r.id); const visible = RFP.visibleRoles(allRoleIds); const isOfficer = session.role === 'officer'; const [role, setRole] = useState(isOfficer ? 'officer' : (visible[0] || session.role)); const { tweaks } = useTweakValues(); const { exceptions, timecards, employeeDrawer, setEmployeeDrawer, timecardDrawer, setTimecardDrawer, toasts } = useAdmin(); const visibleRolesList = ROLES.filter(r => visible.includes(r.id)); const pendingTotal = timecards.filter(t => t.status === 'pending-ops' || t.status === 'pending-acct').length; const roleBadges = { safety: exceptions.length, accounting: timecards.filter(t => t.status === 'pending-acct').length, }; return ( <> {/* Sidebar */} {/* Main */}
{role === 'officer' && } {role === 'ops' && } {role === 'safety' && } {role === 'dispatch' && } {role === 'accounting' && } {role === 'system' && } {role === 'developer' && } {/* Drawers live over main */} {/* Toasts */}
{toasts.map(t => (
{t.text}
))}
); } // ── Employee drawer ────────────────────────────────────────── function EmployeeDrawer() { const { employeeDrawer, setEmployeeDrawer, timecards, jobs, taxPolicy, ytdGross, launchDoc } = useAdmin(); const e = employeeDrawer; if (!e) return null; const myCards = timecards.filter(t => t.employeeId === e.id); const hrs = myCards.reduce((s, t) => s + t.total, 0); const ot = myCards.reduce((s, t) => s + t.overtime, 0); const gross = hrs * e.baseRate; const expDays = Math.round((new Date(e.certExpires) - new Date()) / 86400000); return ( setEmployeeDrawer(null)} eyebrow={`${e.role} · ${e.badge}`} title={e.name} width={560} footer={<> }> {/* Header card */}
{e.avatar}
{e.status === 'on-duty' ? On duty : Off duty} {e.rrbContributor ? Railroad Retirement : FICA only}
{e.cert}
{e.phone} · {e.homeBase}
{/* Period stats */}
{/* Payroll profile */}
PAYROLL PROFILE
{[ ['Base rate', `${A_fmtCurrency(e.baseRate)}/hr`], ['Resident state', e.resident], ['Pay frequency', e.payrollFreq], ['Retirement', e.rrbContributor ? 'Railroad Retirement (Tier I + II)' : 'FICA (Social Security + Medicare)'], ['Cert expires', `${e.certExpires} · ${expDays} days`], ['Hire date', e.hireDate], ].map(([k, v], i) => (
{k} {v}
))}
{/* Recent timecards */}
TIMECARDS THIS PERIOD
{myCards.map((t, i) => { const job = jobs.find(j => j.id === t.jobId); return (
{A_fmtDateShort(t.date)}
{t.blocks.map(b => b.code).join(' · ')} · {job?.id}
{t.total.toFixed(1)}h
); })}
); } function DrawerStat({ label, value, tone }) { return (
{label}
{value}
); } // ── Timecard drawer ────────────────────────────────────────── function TimecardDrawer() { const { timecardDrawer, setTimecardDrawer, employees, jobs, updateTimecard, toast } = useAdmin(); const t = timecardDrawer; if (!t) return null; const e = employees.find(x => x.id === t.employeeId); const job = jobs.find(j => j.id === t.jobId); const gross = t.total * (e?.baseRate || 0); const act = (action) => { const next = action === 'approve' ? (t.status === 'pending-ops' ? 'pending-acct' : 'approved') : 'rejected'; updateTimecard(t.id, { status: next }); toast(action === 'approve' ? 'Timecard advanced' : 'Timecard returned to employee', action === 'approve' ? 'success' : 'warn'); setTimecardDrawer(null); }; return ( setTimecardDrawer(null)} eyebrow={`${e?.name} · ${A_fmtDateMed(t.date)}`} title={`Timecard ${t.id.slice(-8)}`} width={580} footer={(t.status === 'pending-ops' || t.status === 'pending-acct') && ( <> )}>
{t.gpsVerified && GPS verified} {t.flags.includes('extreme-ot') && High OT} {t.flags.includes('missing-photo') && Missing photo}
JOB
{job?.name}
{job?.id} · {job?.railroad} · {job?.subdivision} · MP {job?.mp} · {job?.state}
ACTIVITY BLOCKS
{t.blocks.map((b, i) => { const ac = codeByValue ? codeByValue(b.code) : null; return (
{b.code}
{ac?.label || b.code}
worked in {b.state}
{b.hrs.toFixed(2)}h
); })}
); } // codeByValue may not exist in this bundle — provide a minimal fallback map const RFL_LABELS = { F10: 'RWIC — Railroad Flagger', F20: 'RWIC — Supervisor / Manager', F30: 'Track Inspector', F40: 'Observer / Construction Inspector', F50: 'Field Supervision', F60: 'CSX FCI', V10: 'Travel Time', L30: 'Sick', L20: 'Holiday', }; function codeByValue(c) { return { code: c, label: RFL_LABELS[c] || c }; } ReactDOM.createRoot(document.getElementById('root')).render();