/* ============================================================
APP SHELL — sidebar, header, notifications
============================================================ */
const NAV = [
{ id:'dashboard', label:'Dashboard', icon:'home', roles:['commerciale','backoffice','admin'] },
{ id:'catalogo', label:'Catalogo', icon:'boxes', roles:['commerciale','backoffice','admin'] },
{ id:'prenotazioni', label:'Prenotazioni', icon:'calendar', roles:['commerciale','backoffice','admin'] },
{ id:'noleggi', label:'Noleggi in corso', icon:'clock', roles:['commerciale','backoffice','admin'] },
{ id:'archivio', label:'Archivio', icon:'boxes', roles:['commerciale','backoffice','admin'] },
{ id:'anagrafica', label:'Anagrafica clienti', icon:'users', roles:['commerciale','backoffice','admin'] },
{ id:'notifiche', label:'Notifiche', icon:'bell', roles:['commerciale','backoffice','admin'] },
{ id:'attivita', label:'Log attività', icon:'log', roles:['backoffice','admin'] },
{ id:'admin', label:'Console Admin', icon:'shield', roles:['admin'] },
];
function Sidebar({ role, view, nav, dark, currentUser }) {
const items = NAV.filter(n => n.roles.includes(role));
const userName = currentUser?.nome || (role==='admin'?'Omar Menabue':role==='backoffice'?'Sara Ferrari':'Marco Bianchi');
const C = {
bg: dark ? 'var(--ad-surface)' : 'var(--surface)',
line: dark ? 'var(--ad-line)' : 'var(--line)',
txt: dark ? 'var(--ad-text)' : 'var(--ink)',
txt2: dark ? 'var(--ad-text-2)' : 'var(--ink-3)',
activeBg: dark ? 'rgba(255,64,90,.14)' : 'var(--red-tint)',
activeTx: dark ? 'var(--ad-red)' : 'var(--red)',
hover: dark ? 'rgba(255,255,255,.04)' : 'var(--line-2)',
};
return (
);
}
const NOTIF_ICON = {
'booking.created': 'calendar', 'booking.modified': 'edit', 'booking.confirmed': 'check',
'booking.freed': 'unlock', 'booking.extended': 'refresh', 'booking.expiring_soon': 'clock',
'booking.expired': 'alertCircle',
'rental.return_in_7d': 'clock', 'rental.return_today': 'clock', 'rental.return_date_changed': 'edit',
'product.created': 'sparkle', 'product.modified': 'edit', 'product.status_changed': 'refresh',
'client.created': 'users', 'client.updated': 'edit', 'client.deleted': 'x',
};
function timeAgo(iso) {
const d = new Date(iso);
const diff = (Date.now() - d.getTime()) / 1000;
if (diff < 60) return 'ora';
if (diff < 3600) return Math.floor(diff/60) + ' min fa';
if (diff < 86400) return Math.floor(diff/3600) + ' h fa';
if (diff < 2*86400) return 'ieri';
return d.toLocaleDateString('it-IT', { day:'2-digit', month:'short' });
}
function NotifPanel({ open, onClose, items, onMarkAllRead, onNavToPrefs }) {
if(!open) return null;
const unreadCount = items.filter(n => !n.read).length;
return (
<>
Notifiche
{unreadCount > 0 ? (
{unreadCount} {unreadCount===1?'nuova':'nuove'}
) : (
Tutto letto
)}
{items.length === 0 ? (
) : items.map(n => (
{n.title}
{!n.read && }
{n.body &&
{n.body}
}
{timeAgo(n.created_at)}
))}
{unreadCount > 0 && (
)}
);
}
function Header({ title, subtitle, role, onLogout, search, setSearch, theme, setTheme, currentUser, onNavToPrefs }) {
const [notifOpen, setNotifOpen] = useState(false);
const [notifs, setNotifs] = useState([]);
const [unread, setUnread] = useState(0);
const user = currentUser?.nome || (role==='admin'?'Omar Menabue':role==='backoffice'?'Sara Ferrari':'Marco Bianchi');
const isDark = theme==='dark';
// Carica notifiche al mount + ogni 30 sec
useEffect(() => {
let mounted = true;
const load = async () => {
if (!window.LogAPI) return;
const items = await window.LogAPI.listNotifications({ limit: 20 });
if (mounted) {
setNotifs(items);
setUnread(items.filter(n => !n.read).length);
}
};
load();
const iv = setInterval(load, 30000);
return () => { mounted = false; clearInterval(iv); };
}, []);
// Quando si apre il panel, segna come "lette" quelle visualizzate (dopo 1.5s)
useEffect(() => {
if (!notifOpen || unread === 0) return;
const t = setTimeout(async () => {
await window.LogAPI.markAllAsRead();
setNotifs(prev => prev.map(n => ({ ...n, read: true })));
setUnread(0);
}, 1500);
return () => clearTimeout(t);
}, [notifOpen]);
const handleMarkAll = async () => {
await window.LogAPI.markAllAsRead();
setNotifs(prev => prev.map(n => ({ ...n, read: true })));
setUnread(0);
};
const goPrefs = () => {
setNotifOpen(false);
onNavToPrefs && onNavToPrefs();
};
return (
{title}
{subtitle &&
{subtitle}
}
{setSearch && (
setSearch(e.target.value)} placeholder="Cerca per codice, marca, modello…"
style={{ width:'100%', padding:'10px 14px 10px 40px', fontSize:13.5, borderRadius:'var(--r-md)',
border:'1.5px solid var(--line)', background:'var(--surface-2)', outline:'none' }}
onFocus={e=>e.target.style.borderColor='var(--red)'} onBlur={e=>e.target.style.borderColor='var(--line)'} />
)}
setNotifOpen(false)} items={notifs}
onMarkAllRead={handleMarkAll} onNavToPrefs={goPrefs} />
{setTheme && (
)}
);
}
/* ============================================================
MOBILE COMPONENTS — BottomNav, MobileHeader, MobileDrawer
============================================================ */
// Le 4 voci principali nella bottom bar; il resto va nel drawer
const BOTTOM_NAV_IDS = ['dashboard', 'catalogo', 'prenotazioni', 'noleggi'];
// Icona hamburger inline (Icon "menu" non è nel set standard)
function HamburgerIcon({ size=22, stroke=1.7 }) {
return (
);
}
function BottomNav({ role, view, nav, onOpenDrawer }) {
const items = NAV.filter(n => n.roles.includes(role) && BOTTOM_NAV_IDS.includes(n.id));
// Ordina secondo BOTTOM_NAV_IDS
items.sort((a,b) => BOTTOM_NAV_IDS.indexOf(a.id) - BOTTOM_NAV_IDS.indexOf(b.id));
const drawerActive = !BOTTOM_NAV_IDS.includes(view);
return (
);
}
function MobileDrawer({ open, onClose, role, view, nav, currentUser, onLogout, theme, setTheme }) {
if (!open) return null;
const items = NAV.filter(n => n.roles.includes(role) && !BOTTOM_NAV_IDS.includes(n.id));
const userName = currentUser?.nome || (role==='admin'?'Omar Menabue':role==='backoffice'?'Sara Ferrari':'Marco Bianchi');
const isDark = theme==='dark';
const goTo = (v) => { nav(v); onClose(); };
return (
<>
);
}
function MobileHeader({ title, subtitle, onOpenDrawer, search, setSearch, currentUser, onNavToPrefs }) {
const [searchOpen, setSearchOpen] = useState(false);
const [notifOpen, setNotifOpen] = useState(false);
const [notifs, setNotifs] = useState([]);
const [unread, setUnread] = useState(0);
const searchInputRef = React.useRef(null);
// Carica notifiche
useEffect(() => {
let mounted = true;
const load = async () => {
if (!window.LogAPI) return;
const items = await window.LogAPI.listNotifications({ limit: 20 });
if (mounted) {
setNotifs(items);
setUnread(items.filter(n => !n.read).length);
}
};
load();
const iv = setInterval(load, 30000);
return () => { mounted = false; clearInterval(iv); };
}, []);
useEffect(() => {
if (!notifOpen || unread === 0) return;
const t = setTimeout(async () => {
await window.LogAPI.markAllAsRead();
setNotifs(prev => prev.map(n => ({ ...n, read: true })));
setUnread(0);
}, 1500);
return () => clearTimeout(t);
}, [notifOpen]);
// Focus input search quando si apre
useEffect(() => {
if (searchOpen && searchInputRef.current) {
searchInputRef.current.focus();
}
}, [searchOpen]);
const handleMarkAll = async () => {
await window.LogAPI.markAllAsRead();
setNotifs(prev => prev.map(n => ({ ...n, read: true })));
setUnread(0);
};
const goPrefs = () => {
setNotifOpen(false);
onNavToPrefs && onNavToPrefs();
};
return (
<>
{searchOpen && setSearch ? (
setSearch(e.target.value)}
placeholder="Cerca…"
style={{ width:'100%', padding:'8px 12px', fontSize:14, fontWeight:500,
borderRadius:'var(--r-md)', border:'1.5px solid var(--red)', background:'var(--surface-2)', outline:'none' }} />
) : (
<>
{title}
{subtitle &&
{subtitle}
}
)}
{/* Notifiche panel su mobile: sheet full-width sotto l'header */}
{notifOpen && (
<>
setNotifOpen(false)} style={{ position:'fixed', inset:0, zIndex:40, background:'rgba(15,17,21,.35)' }} />
Notifiche
{unread > 0 ? (
{unread} {unread===1?'nuova':'nuove'}
) : (
Tutto letto
)}
{notifs.length === 0 ? (
) : notifs.map(n => (
{n.title}
{!n.read && }
{n.body &&
{n.body}
}
{timeAgo(n.created_at)}
))}
{unread > 0 && (
)}
)}
);
}
Object.assign(window, { Sidebar, Header, NotifPanel, NAV, BottomNav, MobileHeader, MobileDrawer, BOTTOM_NAV_IDS });