Notifications
{/* Filtres */}
{FILTERS.map(([k, l]) => (
))}
{filtered.length === 0 ? (
Aucune notification
) : (
{filtered.map((n, i) => {
const isUnread = n.ts && n.ts > lastReadTs && !isNoisy(n);
const navKind = n.entity?.kind;
const canNav = navKind && NOTIF_ENTITY_NAV[navKind];
return (
canNav && handleClick(n)}
style={{
padding: '9px 14px', borderBottom: '1px solid var(--hairline)',
display: 'grid', gridTemplateColumns: '6px 1fr auto', gap: 10, alignItems: 'start',
background: isUnread ? 'rgba(34,197,94,.04)' : 'transparent',
cursor: canNav ? 'pointer' : 'default',
transition: 'background 120ms',
}}
onMouseEnter={e => { if (canNav) e.currentTarget.style.background = 'var(--paper-2)'; }}
onMouseLeave={e => { e.currentTarget.style.background = isUnread ? 'rgba(34,197,94,.04)' : 'transparent'; }}>
{n.title || n.type}
{canNav && →}
{n.message &&
{n.message.slice(0, 80)}{n.message.length > 80 ? '…' : ''}
}
{n.source} · {fmtTime(n.ts)}{navKind ? ` · ${navKind}` : ''}
{n.level || 'info'}
);
})}
)}
{filtered.length} affichée{filtered.length > 1 ? 's' : ''} · {notifs.length} total
);
}
function Shell({ current, onNav, children, onToggleTheme, theme, onOpenCopilot, copilotOpen, onOpenPalette }) {
const [collapsed, setCollapsed] = useState(() => localStorage.getItem('dcee_sb_collapsed') === '1');
useEffect(() => { localStorage.setItem('dcee_sb_collapsed', collapsed ? '1' : '0'); }, [collapsed]);
const { notifs, toasts, dismissToast, unread, lastReadTs, markRead } = useNotifications();
const [notifOpen, setNotifOpen] = useState(false);
const handleBell = () => { setNotifOpen(v => !v); if (!notifOpen) markRead(); };
// ── Mobile drawer state (responsive) ──────────────────────────────────
const [isMobile, setIsMobile] = useState(() => typeof window !== 'undefined' && window.innerWidth <= 768);
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
useEffect(() => {
const onResize = () => setIsMobile(window.innerWidth <= 768);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
// Wrap onNav to auto-close drawer on mobile
const handleNavMobile = (k) => { onNav(k); if (isMobile) setMobileDrawerOpen(false); };
// Badge dynamique "Calendrier" — nombre RDV à venir aujourd'hui
const [calTodayCount, setCalTodayCount] = useState(null);
useEffect(() => {
const BASE2 = (window.AE_API && window.AE_API.BASE) || '';
const tick = async () => {
try {
const r = await fetch(`${BASE2}/api/calendar/appointments`).then(x => x.json());
if (!r.ok) return;
const now = new Date();
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const todayEnd = new Date(todayStart.getTime() + 86400_000);
const count = (r.appointments || []).filter(a => {
const t = new Date(a.scheduledAt).getTime();
return a.status === 'scheduled' && t >= now.getTime() && t < todayEnd.getTime();
}).length;
setCalTodayCount(count);
try { window.CAL_TODAY_COUNT = count; } catch (_) {}
} catch (_) {}
};
tick();
const id = setInterval(tick, 60_000); // refresh chaque minute
// refresh aussi quand un event RDV passe dans les notifs
const onEvt = (e) => {
try {
const evt = e.detail || JSON.parse(e.data || '{}');
if (evt.source === 'calendar' || (evt.type || '').startsWith('appointment.')) tick();
} catch (_) {}
};
window.addEventListener('ae:bus-event', onEvt);
return () => { clearInterval(id); window.removeEventListener('ae:bus-event', onEvt); };
}, []);
const sbWidth = isMobile ? 0 : (collapsed ? 60 : 228);
// En mobile : sidebar sort du flux (fixed drawer), main column = 100%
return (
{/* Backdrop drawer mobile */}
{isMobile && mobileDrawerOpen && (
setMobileDrawerOpen(false)} style={{
position: 'fixed', inset: 0, background: 'rgba(14,16,16,0.45)',
zIndex: 99, animation: 'fadeIn 200ms ease',
}} />
)}
{/* Sidebar */}
{/* Main column */}
{/* Topbar */}
{/* sidebar toggle (mobile : ouvre drawer ; desktop : collapse) */}
{/* breadcrumb + time — desktop seulement */}
{!isMobile && (
~/
{NAV.find(n => n.type !== 'section' && n.key === current)?.label || ''}
·
)}
{/* Quick search / palette trigger — compact en mobile (icône only) */}
{/* Market ticker — desktop seulement */}
{!isMobile && (
CEE SPOT
7,82 €/MWh
▲ 0,14
)}
{/* Notification bell */}
{notifOpen && setNotifOpen(false)} onNav={onNav} onMarkAllRead={markRead} />}
{!isMobile && }>Nouveau dossier}
{/* A1 — Avatar utilisateur + menu déconnexion */}
{/* Page content */}
{children}
{/* Toaster global — erreurs + rappels H-1 */}
{/* Animation slide-in */}
);
}
// A1 — UserMenu : avatar + déconnexion + lien vers Paramètres
function UserMenu() {
const [open, setOpen] = useState(false);
const [me, setMe] = useState(window.ME || {});
const [installAvailable, setInstallAvailable] = useState(false);
useEffect(() => {
const onUser = (e) => setMe({ ...e.detail, name: e.detail.name, initials: e.detail.initials });
window.addEventListener('ae:user-changed', onUser);
// B4 — détection install A2HS
const onInstall = () => setInstallAvailable(true);
const onPrompted = () => setInstallAvailable(false);
window.addEventListener('ae:install-available', onInstall);
window.addEventListener('ae:install-prompted', onPrompted);
return () => {
window.removeEventListener('ae:user-changed', onUser);
window.removeEventListener('ae:install-available', onInstall);
window.removeEventListener('ae:install-prompted', onPrompted);
};
}, []);
const initials = me.initials || ((me.firstName?.[0] || '') + (me.lastName?.[0] || '')).toUpperCase() || '?';
return (
{open && (
<>
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 30 }} />
{me.name || me.email || '—'}
{me.role || '—'} · {me.email || ''}
{installAvailable && (
)}
)}
);
}
function LiveClock() {
const [t, setT] = useState(new Date());
useEffect(() => { const id = setInterval(() => setT(new Date()), 1000); return () => clearInterval(id); }, []);
const hh = String(t.getHours()).padStart(2, '0');
const mm = String(t.getMinutes()).padStart(2, '0');
const ss = String(t.getSeconds()).padStart(2, '0');
return <>live · {hh}:{mm}:{ss} Paris;
}
Object.assign(window, { Shell });