// Layout — Full OM GROUP logo in sidebar const { useState: uSt, useEffect: uEf, useContext: uCtx, useRef: uRf } = React; const Icons = { dashboard: , reports: , materials: , customers: , vendors: , crusher: , sales: , purchases: , transport: , rates: , diesel: , companies: , users: , audit: , datahealth: , transfers: , stockyard: , rmcplants: , debris: , tmmaster: , calendar: , priceorders:, settlement:, settlementpolicy:, analytics: , vendorsettlement:, }; const NAV = [ { id:'dashboard', label:'Dashboard', icon:'dashboard' }, { id:'calendar', label:'Calendar', icon:'calendar' }, { id:'analytics', label:'Analytics', icon:'analytics', guard:'IntelCenterPage' }, { id:'reports', label:'Reports', icon:'reports' }, { id:'materials', label:'Materials', icon:'materials' }, { id:'customers', label:'Customers', icon:'customers' }, { id:'vendors', label:'Vendors', icon:'vendors' }, { id:'crusher', label:'Crusher', icon:'crusher' }, { id:'priceorders',label:'Price Orders', icon:'priceorders'}, { id:'sales', label:'Sales Orders', icon:'sales' }, { id:'purchases', label:'Purchases', icon:'purchases' }, { id:'vendorsettlement', label:'Vendor Settlement', icon:'vendorsettlement' }, { id:'transfers', label:'Internal Transfers',icon:'transfers' }, { id:'debris', label:'Debris Movement', icon:'debris' }, { id:'stockyard', label:'Stockyard', icon:'stockyard' }, { id:'rmcplants', label:'RMC Plants', icon:'rmcplants' }, { id:'transportermaster', label:'Transporter Master', icon:'tmmaster' }, { id:'transport', label:'Transporter Reports', icon:'transport' }, { id:'transportsettlement', label:'Transporter Settlement', icon:'settlement' }, { id:'settlementpolicy', label:'Settlement Policy', icon:'settlementpolicy'}, { id:'rates', label:'Transport Rates', icon:'rates' }, { id:'diesel', label:'Diesel', icon:'diesel' }, { id:'companies', label:'Companies', icon:'companies' }, { id:'users', label:'Users', icon:'users' }, { id:'audit', label:'Audit Logs', icon:'audit' }, { id:'datahealth', label:'Data Health', icon:'datahealth', guard:'DataHealthPage' }, ]; function Sidebar({ page, navigate, open, onClose }) { const { setCompany } = uCtx(window.AppCtx); function goToGroup() { setCompany('group'); navigate('dashboard'); onClose(); } return ( <> {open &&

} ); } function TopBar({ page, session, onHam, onLogout }) { const { companyId, setCompany } = uCtx(window.AppCtx); const [coOpen, setCoOpen] = uSt(false); const [udOpen, setUdOpen] = uSt(false); const [undoAvail, setUndoAvail] = uSt(false); const [companies, setCompanies] = uSt(()=>Store.all('companies')); const coRef = uRf(); const udRef = uRf(); const coPanelRef = uRf(); const udPanelRef = uRf(); const [profileOpen, setProfileOpen] = uSt(false); // Keep company list in sync with store (create/update/delete) uEf(()=>{ const unsub = Store.on(()=>setCompanies(Store.all('companies'))); return unsub; },[]); // If currently selected company was deleted, fall back to group uEf(()=>{ if(companyId && companyId!=='group' && !companies.find(c=>c.id===companyId)){ setCompany('group'); } },[companies, companyId, setCompany]); const userCos = session?.userRole==='SUPER_ADMIN' ? companies : companies.filter(c=>{const u=Store.byId('users',session?.userId);return u?.companies?.includes(c.id);}); const currentCo = Store.currentCompany; const isGroupMode = companyId === 'group'; const allDisplayCos = session?.userRole==='SUPER_ADMIN' ? [{id:'group',name:'OM GROUP',isGroup:true}, ...userCos] : userCos; const initials = session?.userName?.split(' ').map(w=>w[0]).join('').slice(0,2)||'U'; const PAGE_LABELS = { dashboard: isGroupMode ? 'OM Group Dashboard' : 'Dashboard', calendar: 'OM Group Calendar', analytics: 'Analytics & Intelligence Center', reports:'Reports',materials:'Materials',customers:'Customers', vendors:'Vendors',crusher:'Crusher',priceorders:'Price Orders',sales:'Sales Orders',purchases:'Purchases', transfers:'Internal Transfers',stockyard:'Stockyard Management',transportermaster:'Transporter Master',transport:'Transporter Reports',rates:'Transport Rates',diesel:'Diesel', rmcplants:'RMC Plants',debris:'Debris Movement', companies:'Companies',users:'Users',audit:'Audit Logs', }; uEf(()=>{ const unsub = Store.on(()=>setUndoAvail(!!(Store.data._lastDeleted))); return unsub; },[]); uEf(()=>{ const h = e => { if (coRef.current&&!coRef.current.contains(e.target)&&coPanelRef.current&&!coPanelRef.current.contains(e.target)) setCoOpen(false); if (udRef.current&&!udRef.current.contains(e.target)&&udPanelRef.current&&!udPanelRef.current.contains(e.target)) setUdOpen(false); }; document.addEventListener('mousedown',h); return ()=>document.removeEventListener('mousedown',h); },[]); function handleUndo() { const last = Store.data._lastDeleted; if (!last) return; Store.add(last.entity, last.item); Store.data._lastDeleted = null; Store.save('_lastDeleted'); window.toast&&window.toast('Record restored','ok'); } return (

OM GROUP ERP Enterprise Resource Platform

setCoOpen(p=>!p)} title={isGroupMode ? 'OM Group' : currentCo?.name}>

{isGroupMode ?

: currentCo?.logo ?

: }

{isGroupMode ? 'OM GROUP' : currentCo?.name}

Switch Company

{allDisplayCos.map(c=>(

{setCompany(c.id);setCoOpen(false);}}> {c.id===companyId&&}

{c.isGroup&&

} {!c.isGroup&&c.logo&&

}

{c.name}

))}

setUdOpen(p=>!p)}>{initials}

{session?.userName}

{session?.userRole?.replace('_',' ')}

{setUdOpen(false);setProfileOpen(true);}}>My Profile

{setUdOpen(false);onLogout();}}>Sign Out

{profileOpen&&setProfileOpen(false)}/>}

); } // ── Profile menu → OM Group AI Agent preference ────────────────────────────── // Reads and writes the shared preference store; the agent listens on the same // event, so nothing here knows anything about the agent's internals or emotion. function AgentPrefRow() { const [on, setOn] = uSt(() => (window.OMAgentPref ? window.OMAgentPref.get() : true)); // Derive from the store rather than holding an independent copy: the switch // always renders what is actually stored, so UI and preference cannot diverge. uEf(() => { if (!window.OMAgentPref) return; setOn(window.OMAgentPref.get()); return window.OMAgentPref.subscribe(setOn); }, []); function toggle(e) { e.stopPropagation(); // The store flips from its own stored value; we never send it a stale one. if (window.OMAgentPref) setOn(window.OMAgentPref.toggle()); } return (

{if(e.key==='Enter'||e.key===' '){e.preventDefault();toggle(e);}}}>

OM Group AI Agent

); } function AppLayout({ children, page, navigate, session, onLogout }) { const [sbOpen, setSbOpen] = uSt(false); return (

setSbOpen(false)} />

setSbOpen(p=>!p)} onLogout={onLogout} />

{children}

); } window.AppLayout = AppLayout; // ── User Profile Modal Components ──────────────────────────────────────────── function ProfileSection({ title, children }) { return (

{title}

{children}

); } function ProfileRow({ label, value, mono, highlight, badge, last }) { return (

{label}

{badge ? {value||'—'} :

{value||'—'}

}

); } function UserProfileModal({ session, onClose }) { const [user, setUser] = uSt(()=>Store.all('users').find(u=>u.id===session?.userId)||null); const [edit, setEdit] = uSt(false); const [form, setForm] = uSt({}); const [saving, setSaving] = uSt(false); const [notifSpeed, setNotifSpeedState] = uSt(()=>window.getNotifSpeed?window.getNotifSpeed():'fast'); function pickSpeed(v){ window.setNotifSpeed&&window.setNotifSpeed(v); setNotifSpeedState(v); } // Stay in sync with store (admin edits user record → profile reflects instantly) uEf(()=>{ const unsub = Store.on(()=>{ const u = Store.all('users').find(u=>u.id===session?.userId); if (u) setUser(u); }); return unsub; },[session?.userId]); const ROLE_LABELS = {SUPER_ADMIN:'Super Admin',ADMIN:'Admin',MANAGER:'Manager',ACCOUNTANT:'Accountant',OPERATOR:'Operator',VIEWER:'Staff'}; const companies = Store.all('companies','group')||[]; const userCompNames = (user?.companies||[]).map(cid=>companies.find(c=>c.id===cid)?.name).filter(Boolean); const initials = (user?.name||'?').split(' ').filter(Boolean).map(w=>w[0]).join('').slice(0,2).toUpperCase(); function startEdit(){ setForm({name:user?.name||'',email:user?.email||''}); setEdit(true); } function cancelEdit(){ setEdit(false); setForm({}); } function saveEdit(){ if(!(form.name||'').trim()){ window.toast&&window.toast('Name is required','er'); return; } if(!(form.email||'').trim()){ window.toast&&window.toast('Email is required','er'); return; } setSaving(true); setTimeout(()=>{ Store.update('users',user.id,{name:form.name.trim(),email:form.email.trim()}); Store.addLog('UPDATE','User Profile','Updated own profile: '+form.name.trim()); setUser({...user,name:form.name.trim(),email:form.email.trim()}); setEdit(false); setSaving(false); window.toast&&window.toast('Profile updated','ok'); },400); } const fmtDt = dt => { if(!dt) return '—'; const date = dt.slice(0,10); const time = dt.slice(11,16); return (window.fmtDate?window.fmtDate(date):date) + (time?' · '+time:''); }; if(!user) return null; return (

My Profile

{/* ─ Avatar Header ─ */}

{initials}

{user.name}

{ROLE_LABELS[user.role]||user.role}

{user.email}

{user.status||'Active'}

{!edit ? ( <>

{userCompNames.length>0 ? userCompNames.map((c,i)=>{c}) : No company access assigned}

How long success confirmations stay on screen. Errors always stay until dismissed.

{[{v:'standard',l:'Standard',s:'2.0s'},{v:'fast',l:'Fast',s:'0.8s'},{v:'highspeed',l:'High-Speed Entry',s:'0.55s'}].map(o=>( ))}

) : (

Edit Personal Information

Full Name * setForm(p=>({...p,name:e.target.value}))} placeholder="Full name" autoFocus/>

Email Address * setForm(p=>({...p,email:e.target.value}))} placeholder="Email address"/>

Note: Role, permissions, and company access can only be modified by an administrator.

)}

{!edit ? ( <> ) : ( <> )}

); }