// app.jsx — Top-level shell. Tablet frame > sidebar nav > screen. const PALETTE_OPTIONS = [ '#E55B13', // safety orange (default) '#1D6FB8', // rail blue '#137C50', // signal green '#7C2D12', // boxcar / brick '#0E1418', // pure black ]; function deepenHex(hex) { const h = hex.replace('#', ''); const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16); return `#${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')}`; } function softenHex(hex, amt = 0.86) { const h = hex.replace('#', ''); const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16); const sr = Math.round(r + (255 - r) * amt), sg = Math.round(g + (255 - g) * amt), sb = Math.round(b + (255 - b) * amt); return `#${sr.toString(16).padStart(2, '0')}${sg.toString(16).padStart(2, '0')}${sb.toString(16).padStart(2, '0')}`; } function applyTheme(accent) { const root = document.documentElement; root.style.setProperty('--accent', accent); root.style.setProperty('--accent-deep', deepenHex(accent)); root.style.setProperty('--accent-soft', softenHex(accent)); } // ─── App root ──────────────────────────────────────────────── function App() { const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS); useEffect(() => { window.__currentTweaks = tweaks; window.dispatchEvent(new Event('tweaks-changed')); applyTheme(tweaks.accent); document.title = `${tweaks.companyName} — RWIC Tablet`; }, [tweaks]); useEffect(() => { applyTheme(tweaks.accent); }, []); return ( setTweak('companyName', v)} placeholder="RailFlagsPro" /> setTweak('logoMark', (v || '').slice(0, 3).toUpperCase())} placeholder="RF" /> setTweak('tagline', v)} placeholder="RWIC Field Operations" /> setTweak('accent', v)} /> ); } // Tweaks-panel section to flip between Setup / Login / App for the demo function AuthSection() { return ( {(ctx) => ctx ? (
{[ { v: 'setup', label: 'Setup wizard' }, { v: 'login', label: 'PIN login' }, { v: 'ready', label: 'In app (auto-login)' }, ].map(o => { const on = ctx.authStage === o.v; return ( ); })}
) : null} ); } // Tweaks-panel preset list function DemoPresetSection({ setTweak }) { return (
{[ { name: 'RailFlagsPro', mark: 'RF', tag: 'RWIC Field Operations', accent: '#E55B13' }, { name: 'Granite Pacific',mark: 'GP', tag: 'Roadway Worker Suite', accent: '#1D6FB8' }, { name: 'SafeTrack Co', mark: 'ST', tag: 'Field Operations', accent: '#137C50' }, { name: 'Boxcar Ops', mark: 'BC', tag: 'Crew Management', accent: '#7C2D12' }, ].map(p => ( ))}
); } // ─── Stage — centers the tablet on a dark backdrop ───────────── function Stage({ children }) { return (
{children}
); } // ─── AuthGate — chooses between setup/login/main app ─────────── function AuthGate() { const { authStage, user } = useApp(); if (authStage === 'setup') return ; if (authStage === 'login' || !user) return ; return ; } // ─── Main app shell — sidebar nav + active screen ────────────── function AppShell() { const [tab, setTab] = useState('today'); const [auditOpen, setAuditOpen] = useState(false); const { user, logout, briefingSubmitted, reportSubmitted, timecardSubmitted, clockState, isMaster, auditTrail } = useApp(); const isOn = clockState.status !== 'off'; const tabs = [ { id: 'today', label: 'Today', icon: }, { id: 'briefing', label: 'Briefing', icon: , done: briefingSubmitted }, { id: 'report', label: 'Field Report', icon: , done: reportSubmitted }, { id: 'timecard', label: 'Timecard', icon: , done: timecardSubmitted }, ]; return (
{/* Master-mode banner — pinned to top when active */} {isMaster && setAuditOpen(true)} count={auditTrail.length} />}
{/* SIDEBAR */} {/* SCREEN */}
{tab === 'today' && } {tab === 'briefing' && } {tab === 'report' && } {tab === 'timecard' && }
setAuditOpen(false)} trail={auditTrail} />
); } // ─── Master-mode banner ──────────────────────────────────────── function MasterBanner({ onOpen, count }) { return (
MASTER ACCESS
Diagnostic backdoor active · all actions are recorded and reported to the audit server.
); } // ─── Audit drawer ────────────────────────────────────────────── function AuditDrawer({ open, onClose, trail }) { if (!open) return null; return (
MASTER ACCESS · AUDIT TRAIL
{trail.length} event{trail.length === 1 ? '' : 's'} this session
{trail.length === 0 && ( } title="No events yet" hint="All actions during this session will appear here." /> )} {trail.map((e, i) => (
{new Date(e.ts).toLocaleTimeString('en-US', { hour12: false })}
{new Date(e.ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
{e.event}
{e.detail && (
{e.detail}
)}
))}
NOTE: This trail is read-only and tamper-evident. In production it is streamed to the audit server in real time.
); } // Small dark-theme version of the Mark text lockup for the sidebar function BrandLockup() { const { tweaks } = useTweakValues(); return (
{tweaks.companyName}
{tweaks.tagline}
); } // Day status — live shift summary in the bottom of the sidebar function DayStatusFootblock() { const { clockState, liveHrs, shift } = useApp(); const isOn = clockState.status !== 'off'; const ac = codeByValue(clockState.currentCode); return (
{isOn ? 'ON SHIFT' : 'OFF DUTY'}
{isOn ? ( <>
{fmtClock(liveHrs)}
{ac?.code} · {ac?.short || ac?.label}
) : (
Ready to clock in.
Job: {shift.projectNumber}
)}
); } // ─── Boot ──────────────────────────────────────────────────── ReactDOM.createRoot(document.getElementById('root')).render();