// ──────────────────────────── App root ──────────────────────────── // Convertito al Cupertino Enterprise Design System. // Logica di navigazione/stato invariata: cambiano solo i valori d'accento // (ora Apple System Colors) e il target dell'attributo data-theme (). // Accenti del design system — Apple System Colors (vedi tokens.css). const ACCENT_OPTIONS = [ { id: 'blue', value: '#007AFF', label: 'Blu (sistema)' }, { id: 'indigo', value: '#5856D6', label: 'Indaco' }, { id: 'teal', value: '#30B0C7', label: 'Teal' }, { id: 'purple', value: '#AF52DE', label: 'Viola' }, ]; // Ritorna la prima voce di menu visibile per un dato ruolo, // specchiando la logica di visibleNav in shell.jsx. const computeFirstSection = (role) => { const item = NAV.find(n => { if (role === 'Magazziniere' && (n.id === 'dashboard' || n.id === 'pos')) return false; return true; }); return item?.id || 'dashboard'; }; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#007AFF", "density": "comfortable", "theme": "light", "posLayout": "auto" }/*EDITMODE-END*/; const App = () => { const [session, setSession] = useState(window.__SESSION__ ?? null); // ripristinata dal cookie (backend) const [activeStoreId, setActiveStoreId] = useState(STORE.id); const [operators, setOperators] = useState(window.__OPERATORS__ ?? OPERATORS); // Top-level section + sub-state per section. Sezione iniziale in base al ruolo. const [section, setSection] = useState(() => window.__SESSION__?.op?.role ? computeFirstSection(window.__SESSION__.op.role) : 'pos'); const [articleId, setArticleId] = useState(null); const [customerId, setCustomerId] = useState(null); const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useEffect(() => { document.documentElement.style.setProperty('--accent', t.accent); document.documentElement.style.setProperty('--accent-blue', t.accent); document.body.setAttribute('data-density', t.density); document.documentElement.setAttribute('data-theme', t.theme); document.body.setAttribute('data-pos-layout', t.posLayout); }, [t.accent, t.density, t.theme, t.posLayout]); // Permessi calcolati prima del conditional return (richiesto da Rules of Hooks) const rolePerms = session ? ((ROLES || []).find(r => r.id === session.op.role)?.permissions || {}) : {}; const effectiveStoreId = (rolePerms.storeSwitcher === 'locked' && session?.op?.storeId) ? session.op.storeId : activeStoreId; const canDashboard = session ? rolePerms.dashboard !== false : true; const canPOS = session ? rolePerms.pos !== false : true; const canAcquisti = session ? rolePerms.acquisti !== false : true; const canImpostazioni = session ? rolePerms.impostazioni === true : false; const canScadenzario = session ? ['Admin','Manager','Area Manager','Negozio'].includes(session.op.role) : false; // Cassiere con canMagazzinoWrite ottiene accesso completo al magazzino const opFromList = operators.find(op => op.id === session?.op?.id); const maggReadOnly = rolePerms.magazzino === 'read' && !opFromList?.canMagazzinoWrite; // Redirect di sicurezza: se per qualsiasi motivo la sezione corrente non è // nel menu del ruolo, torna alla prima voce valida. useEffect(() => { if (!session) return; const safe = computeFirstSection(session.op.role); if (!canPOS && section === 'pos') setSection(safe); if (!canDashboard && section === 'dashboard') setSection(safe); }, [session, canPOS, canDashboard, section]); // Schermata di login / blocco if (!session) { return ( window.location.reload()} /> ); } const goTo = (sec) => { setArticleId(null); setCustomerId(null); setSection(sec); }; // Navigazione globale tra sezioni: permette a qualunque vista (es. Anagrafiche) // di portare l'utente in un'altra sezione (Cassa, Acquisti, ...). // NB: assegnazione normale (NON un hook): questo punto è dopo i return anticipati // del gate di login, quindi un useEffect qui violerebbe le regole degli hook. window.__nav = goTo; // POS opera sempre su un negozio concreto (non 'all') const posStoreId = effectiveStoreId === 'all' ? STORE.id : effectiveStoreId; let view; switch (section) { case 'pos': view = ( goTo('catalogo')} operators={operators}> goTo('apertura')} onCloseCassa={() => goTo('eod')} activeStoreId={posStoreId}/> ); break; case 'catalogo': view = setArticleId(id)} onBack={()=>setArticleId(null)} activeStoreId={effectiveStoreId}/>; break; case 'magazzino': view = ; break; case 'anagrafiche': view = setCustomerId(id)} onBack={()=>setCustomerId(null)} role={session.op.role}/>; break; case 'documenti': view = ; break; case 'eod': view = goTo('dashboard')} onEndSession={async () => { if (window.__API__) await window.__API__.logout(); window.location.reload(); }}/>; break; case 'apertura': view = { setSession(prev => ({ ...prev, fondo: f })); goTo('dashboard'); }} onClose={() => goTo('dashboard')}/>; break; case 'acquisti': view = ( goTo('catalogo')} operators={operators}> goTo('catalogo')}/> ); break; // 'impostazioni' non è più una sezione del menu: le impostazioni aziendali sono // nel pannello account (rotella → tab Azienda). case 'scadenzario': view = ( goTo('documenti')} operators={operators}> ); break; case 'timbrature': view = ; break; case 'utenti': view = goTo(computeFirstSection(session.op.role))} onUpdateOperators={setOperators}/>; break; case 'dashboard': default: view = ( goTo('magazzino')} operators={operators}> ); } return (

window.postMessage({ type: '__activate_edit_mode' }, '*')} session={session} onLock={async () => { if (window.__API__) await window.__API__.logout(); window.location.reload(); }} activeStoreId={effectiveStoreId} onStoreChange={setActiveStoreId} onOpenUserPanel={() => goTo('utenti')} />

{view}

o.value)} onChange={(v) => setTweak('accent', v)} /> setTweak('density', v)} /> setTweak('theme', v)} /> setTweak('posLayout', v)} /> goTo(v)} />

); }; // Render delegato a boot-entry.jsx (vedi shared/jsx-order.json). Object.assign(window, { App });