{!storeLocked && storeOpen && (
<>
setStoreOpen(false)}/>
{canSeeAll && (
)}
{visibleStores.map(s => (
))}
)}
{/* nav */}
{/* footer: user + azioni */}
{/* Footer utente: profilo (sx) + impostazioni (dx) — due button fratelli */}
{onLock && (
)}
);
};
// — Campanella notifiche: avvisi reali dal backend (/api/notifiche), badge non-letti,
// pannello a tendina; clic su un avviso porta alla sezione. "Letti" persistiti in localStorage.
const NOTIF_META = {
scorta: { icon: 'Box', fg: 'var(--warning-700)', bg: 'var(--warning-50)' },
scadenza: { icon: 'Clock', fg: 'var(--danger-700)', bg: 'var(--danger-50)' },
richiesta: { icon: 'Box', fg: 'var(--accent-blue)', bg: 'rgba(0,122,255,0.12)' },
trasferimento: { icon: 'Truck', fg: 'var(--accent-blue)', bg: 'rgba(0,122,255,0.12)' },
cassa: { icon: 'Wallet', fg: 'var(--accent-blue)', bg: 'rgba(0,122,255,0.12)' },
turno: { icon: 'Clock', fg: 'var(--warning-700)', bg: 'var(--warning-50)' },
};
const sevDot = (s) => s === 'danger' ? 'var(--danger-500)' : s === 'warning' ? 'var(--warning-500)' : 'var(--accent-blue)';
const NotificheBell = () => {
const [open, setOpen] = useStateSH(false);
const [items, setItems] = useStateSH([]);
const [seen, setSeen] = useStateSH(() => {
try { return new Set(JSON.parse(localStorage.getItem('e2s_notif_seen') || '[]')); } catch { return new Set(); }
});
const persistSeen = (set) => { try { localStorage.setItem('e2s_notif_seen', JSON.stringify([...set])); } catch (e) {} };
const load = React.useCallback(async () => {
if (window.__API__ && window.__API__.get) {
const r = await window.__API__.get('/api/notifiche');
if (r && r.ok) setItems(r.items || []);
}
}, []);
React.useEffect(() => { load(); const t = setInterval(load, 120000); return () => clearInterval(t); }, [load]);
const unread = items.filter(it => !seen.has(it.id)).length;
const markAll = () => { const s = new Set(seen); items.forEach(it => s.add(it.id)); setSeen(s); persistSeen(s); };
const go = (it) => {
const s = new Set(seen); s.add(it.id); setSeen(s); persistSeen(s);
setOpen(false);
if (it.section && window.__nav) window.__nav(it.section);
};
return (
{open && (
<>
setOpen(false)}/>
Notifiche {items.length > 0 && · {items.length}}
{items.length > 0 && unread > 0 && (
)}
{items.length === 0 ? (
Nessuna notifica · tutto in ordine
) : items.map(it => {
const m = NOTIF_META[it.type] || NOTIF_META.cassa;
const Ico = I[m.icon] || I.Bell;
const isNew = !seen.has(it.id);
return (
);
})}
)}
);
};
// — Data e ora REALI (orologio del dispositivo), aggiornate ogni minuto.
const LiveClock = () => {
const [now, setNow] = useStateSH(() => new Date());
React.useEffect(() => {
const t = setInterval(() => setNow(new Date()), 30000);
return () => clearInterval(t);
}, []);
const data = now.toLocaleDateString('it-IT', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
const ora = now.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' });
return (
);
};
// — Top bar (per-section)
// DS §4.3: topbar in materiale .glass-thin, hairline inferiore, z-index sticky.
const Topbar = ({ title, eyebrow, right, dense = false }) => (
{eyebrow &&
{eyebrow}
}
{title}
);
// — Overlay di blocco accesso con sblocco temporaneo via PIN supervisore.
// Chiama i figli blurrati+disabilitati quando l'accesso non è consentito.
// Stato locale: si azzera ogni volta che il componente smonta (= ogni cambio sezione).
const AccessGate = ({ allowed, section, children, onDismiss, operators: opList }) => {
const [unlocked, setUnlocked] = useStateSH(false);
const [gateView, setGateView] = useStateSH('blocked'); // 'blocked' | 'select' | 'pin'
const [sup, setSup] = useStateSH(null);
const [pin, setPin] = useStateSH('');
const PIN_LEN = 4;
// Tastiera fisica: quando il pannello PIN è attivo, digita coi numeri, Backspace cancella, Enter conferma.
// NB: hook PRIMA del return anticipato (regole degli hook); usa aggiornamenti funzionali.
React.useEffect(() => {
if (gateView !== 'pin') return;
const onKey = (e) => {
if (e.key >= '0' && e.key <= '9') {
e.preventDefault();
setPin(prev => {
if (prev.length >= PIN_LEN) return prev;
const next = prev + e.key;
if (next.length === PIN_LEN) setTimeout(() => setUnlocked(true), 180);
return next;
});
} else if (e.key === 'Backspace') { e.preventDefault(); setPin(p => p.slice(0, -1)); }
else if (e.key === 'Enter') { e.preventDefault(); setPin(p => { if (p.length === PIN_LEN) setUnlocked(true); return p; }); }
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [gateView]);
if (allowed || unlocked) return children;
// Solo i ruoli alti (Admin / Area Manager) possono autorizzare le sezioni protette
const supers = (opList || OPERATORS).filter(op =>
['Admin', 'Manager', 'Area Manager'].includes(op.role) && op.active !== false
);
const SEC_LABELS = { dashboard: 'Dashboard incassi', pos: 'Cassa (POS)', acquisti: 'Acquisti', impostazioni: 'Impostazioni' };
const secLabel = SEC_LABELS[section] || section;
const pressPin = (k) => {
if (pin.length >= PIN_LEN) return;
const next = pin + k;
setPin(next);
if (next.length === PIN_LEN) setTimeout(() => setUnlocked(true), 180);
};
const backSvg = (
);
return (
<>
{/* Contenuto sfocato e non interattivo dietro il gate */}
{children}
{/* Overlay fisso — il bg ha pointer-events:none così la sidebar resta cliccabile */}
{gateView === 'blocked' && (
{onDismiss && (
)}
Accesso non consentito
Il tuo ruolo non consente l'accesso a {secLabel}.
Un supervisore può sbloccare questa sezione temporaneamente.
} onClick={() => setGateView('select')}>
Sblocca con PIN supervisore
)}
{gateView === 'select' && (
Seleziona supervisore
Accedi con il tuo account supervisore per sbloccare.
{supers.map(op => (
))}
)}
{gateView === 'pin' && sup && (
{sup.initials}
{sup.name}
{sup.role}
PIN di autorizzazione
{Array.from({ length: PIN_LEN }).map((_, i) => (
))}
{['1','2','3','4','5','6','7','8','9'].map(k => (
))}
)}
);
};
Object.assign(window, { Card, Btn, Pill, Stat, Sidebar, Topbar, AccessGate, fmtEur, fmtInt, fmtPct, ROLE_BADGE_TONE, NAV });