/* Shared shell: Sidebar, Topbar, Digi AI chat drawer, Command palette (⌘K) */
// Sub-navegação por departamento. Se existir, o item expande (accordion).
// DEV (build · modificar) — construir e alterar a plataforma
const DEV_SUBNAV = [
{ id: 'inicio', label: 'Início', kbd: '1' },
{ id: 'architecture', label: 'Architecture', kbd: '2' },
{ id: 'prompts', label: 'Prompts', kbd: '3' },
{ id: 'kb', label: 'Knowledge Base', badge: 21, kbd: '4' },
{ id: 'agents', label: 'Sub-agentes', badge: 7, kbd: '5' },
{ id: 'skills', label: 'Skills', badge: '7+21', kbd: '6' },
{ id: 'tools', label: 'Tools', badge: '3+2', kbd: '7' },
{ id: 'routing', label: 'Routing', kbd: '8' },
{ id: 'conversations', label: 'Replay', kbd: '9' },
{ id: 'costs', label: 'Costs', kbd: 'C' },
{ id: 'deploy', label: 'Deploy', kbd: 'D' },
{ id: 'integracoes', label: 'Integrações', badge: 16, kbd: 'I' },
{ id: 'roadmap', label: 'Roadmap', badge: 'P1', kbd: 'R' },
];
// ADMIN (governance · gestão) — modo privilegiado, gating por lista nominal
const ADMIN_SUBNAV = [
{ id: 'inicio', label: 'Início', kbd: '1' },
{ id: 'utilizadores', label: 'Utilizadores', badge: 193, kbd: '2' },
{ id: 'empresas', label: 'Empresas', badge: 10, kbd: '3' },
{ id: 'audit', label: 'Audit log', kbd: '4' },
{ id: 'integracoes', label: 'Integrações', badge: 3, kbd: '5' },
];
// SISTEMA (run · observar) — operar e monitorizar
const SISTEMA_SUBNAV = [
{ id: 'inbox', label: 'Inbox · Live', badge: '6 prod', kbd: '1' },
{ id: 'overview', label: 'Overview', kbd: '2' },
{ id: 'kpis', label: 'KPIs', badge: 'NEW', kbd: '3' },
{ id: 'costs', label: 'Costs', kbd: '4' },
{ id: 'integrations', label: 'Integrations', kbd: '5' },
{ id: 'alerts', label: 'Alerts', badge: 2, kbd: 'A' },
];
const MARKETING_SUBNAV = [
{ id: 'performance', label: 'Performance', kbd: '1' },
{ id: 'plano', label: 'Plano Comunicação 2026', badge: 109, kbd: '2' },
{ id: 'estrategia', label: 'Estratégia', kbd: '3' },
{ id: 'agentes', label: 'Sub-agentes', badge: 6, kbd: '4' },
];
const FINANCE_SUBNAV = [
{ id: 'cobrancas', label: 'Cobranças', badge: 9, kbd: '1' },
{ id: 'tesouraria', label: 'Tesouraria', muted: true, kbd: '2' },
{ id: 'contabilidade', label: 'Contabilidade', muted: true, kbd: '3' },
{ id: 'controlling', label: 'Controlling', muted: true, kbd: '4' },
];
const COMERCIAL_SUBNAV = [
{ id: 'dashboard', label: 'Dashboard', kbd: '1' },
{ id: 'digi', label: 'Chat', kbd: '2', ai: true },
{ id: 'clientes', label: 'Clientes', kbd: '3' },
{ id: 'carteira', label: 'Carteira', kbd: '4' },
{ id: 'prospeccao', label: 'Prospecção', kbd: '5' },
{ id: 'simulador', label: 'Simulador', kbd: '6' },
{ id: 'bp', label: 'Business Plan', kbd: '7' },
];
const NAV = [
{ section: 'Plataforma' },
{ id: 'dev', label: 'DEV', subtitle: 'build · modificar', icon: 'dev', iconColor: 'var(--ai-500)', target: 'dev', subKey: 'dev', sub: DEV_SUBNAV, subStorage: 'digi-dev-sub', subDefault: 'inicio' },
{ id: 'sistema', label: 'SISTEMA', subtitle: 'run · observar', icon: 'pulse', iconColor: 'var(--warning, #f59e0b)', target: 'sistema', subKey: 'sistema', sub: SISTEMA_SUBNAV, subStorage: 'digi-sistema-sub', subDefault: 'kpis' },
{ section: 'Gestão' },
{ id: 'board', label: 'Board', icon: 'board' },
{ section: 'Departamentos' },
{ id: 'comercial', label: 'Comercial', icon: 'sales', target: 'comercial', badge: 3, subKey: 'comercial', sub: COMERCIAL_SUBNAV, subStorage: 'digi-comercial-sub', subDefault: 'dashboard' },
{ id: 'sat', label: 'SAT', icon: 'sat', target: 'sat', badge: 1 },
{ id: 'operacoes', label: 'Operações', icon: 'ops' },
{ id: 'marketing', label: 'Marketing', icon: 'marketing', target: 'marketing', subKey: 'marketing', sub: MARKETING_SUBNAV, subStorage: 'digi-marketing-sub', subDefault: 'plano' },
{ id: 'financeiro', label: 'Financeiro', icon: 'finance', target: 'financeiro', badge: 9, subKey: 'financeiro', sub: FINANCE_SUBNAV, subStorage: 'digi-financeiro-sub', subDefault: 'cobrancas' },
{ id: 'rh', label: 'Recursos Humanos', icon: 'hr' },
{ id: 'bi', label: 'BI', icon: 'bi' },
{ section: 'Admin', requiresAdminMode: true },
{ id: 'admin', label: 'ADMIN', subtitle: 'governance · gestão', icon: 'user', iconColor: 'oklch(0.58 0.16 30)', target: 'admin', subKey: 'admin', sub: ADMIN_SUBNAV, subStorage: 'digi-admin-sub', subDefault: 'inicio', requiresAdminMode: true },
];
// Shared sub-nav state across Sidebar and screens. Source of truth: localStorage per storage-key.
const useSubNav = (storageKey, fallback) => {
const [val, setVal] = React.useState(() => {
if (!storageKey) return fallback;
try { return localStorage.getItem(storageKey) || fallback; } catch { return fallback; }
});
React.useEffect(() => {
if (!storageKey) return;
try { localStorage.setItem(storageKey, val); } catch {}
window.dispatchEvent(new CustomEvent('digi-subnav', { detail: { storageKey, val } }));
}, [val, storageKey]);
React.useEffect(() => {
if (!storageKey) return;
const onSync = (e) => {
if (e.detail && e.detail.storageKey === storageKey && e.detail.val !== val) setVal(e.detail.val);
};
window.addEventListener('digi-subnav', onSync);
return () => window.removeEventListener('digi-subnav', onSync);
}, [storageKey, val]);
return [val, setVal];
};
window.useSubNav = useSubNav;
// Indented accordion sub-list. Each row has: vertical rail, label, badge, kbd.
const SubNavList = ({ items, storageKey, fallback, isParentActive, onNavigateParent, userTipo }) => {
const [subActive, setSubActive] = useSubNav(storageKey, fallback);
const visibleItems = items.filter(s => !s.requiresTipo || s.requiresTipo === userTipo);
return (
{visibleItems.map(s => {
const active = isParentActive && s.id === subActive;
return (
);
})}
);
};
// Item de nav com sub-menu — extracto em componente próprio para que useSubNav
// não seja chamado dentro de um .map() (viola a regra dos hooks do React).
const NavItemWithSub = ({ item, active, compact, openSub, setOpenSub, onNavigate, userTipo }) => {
const [subActive] = useSubNav(item.subStorage, item.subDefault);
const isActive = item.id === active;
const isExpanded = !compact && openSub === item.subKey;
return (
{isExpanded && (
{ if (!isActive && item.target) onNavigate(item.target); }}
userTipo={userTipo}
/>
)}
);
};
const Sidebar = ({ active, onNavigate, variation, allowedScreens, userRole, userEmail, userTipo }) => {
// Se allowedScreens for null → tudo. Senão, só itens cujo target está na lista
// (ou items section/sem target são mantidos se houver algum item visível à volta).
// requiresRole filtra também por role do utilizador.
// requiresAdminMode consulta AdminUsersData.canAccessAdminMode (lista nominal de 5 emails).
const adminGate = window.AdminUsersData?.canAccessAdminMode;
const filterNav = (items) => {
const allowed = allowedScreens ? new Set(allowedScreens) : null;
const roleOk = (it) => !it.requiresRole || (userRole && it.requiresRole.includes(userRole));
const adminOk = (it) => !it.requiresAdminMode || (adminGate && adminGate({ email_profissional: userEmail }));
const passes = (it) => roleOk(it) && adminOk(it);
// Primeiro passo: determina items cujo target é permitido
const visibleByTarget = items.map(it => {
if (it.section) return false;
if (!passes(it)) return false;
if (!it.target) return false;
return allowed ? allowed.has(it.target) : true;
});
// Segundo passo: mantém sections que tenham pelo menos 1 item visível à sua frente
return items.filter((it, i) => {
if (it.section) {
if (!passes(it)) return false;
for (let j = i + 1; j < items.length; j++) {
if (items[j].section) return false;
if (visibleByTarget[j]) return true;
}
return false;
}
return visibleByTarget[i];
});
};
const visibleNav = filterNav(NAV);
const [compact, setCompact] = React.useState(() => {
try { return localStorage.getItem('sidebar-compact') === '1'; } catch { return false; }
});
// Which accordion section is open. Only ONE at a time. null = none open.
const [openSub, setOpenSub] = React.useState(() => {
try { return localStorage.getItem('sidebar-open-sub') || null; } catch { return null; }
});
// Auto-open on mount/when switching to a dept-with-sub; close when switching to dept without sub.
const prevActiveRef = React.useRef(null);
React.useEffect(() => {
const item = NAV.find(n => n.target === active && n.sub);
const prev = prevActiveRef.current;
if (prev !== active) {
if (item) setOpenSub(item.subKey);
else if (prev !== null) setOpenSub(null);
}
prevActiveRef.current = active;
}, [active]);
React.useEffect(() => {
try { localStorage.setItem('sidebar-open-sub', openSub || ''); } catch {}
}, [openSub]);
const toggle = () => {
setCompact(v => {
const next = !v;
try { localStorage.setItem('sidebar-compact', next ? '1' : '0'); } catch {}
return next;
});
};
// ⌘/ keyboard shortcut to toggle sidebar
React.useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key === '/') {
e.preventDefault();
toggle();
}
};
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, []);
return (
);
};
// "Ver como" — só visível para admins. Permite ao JP simular a vista de qualquer colaborador.
const ViewAsPicker = ({ viewAs, onViewAs, currentUser }) => {
const [open, setOpen] = React.useState(false);
const [search, setSearch] = React.useState('');
const [_tick, setTick] = React.useState(0);
const ref = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); setSearch(''); } };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
React.useEffect(() => {
const h = () => setTick(t => t + 1);
window.addEventListener('digi-users-loaded', h);
return () => window.removeEventListener('digi-users-loaded', h);
}, []);
const isAdmin = window.AdminUsersData?.canAccessAdminMode?.({ email_profissional: currentUser?.email });
if (!isAdmin) return null;
const users = window.AdminUsersData?.ALL_USERS || [];
const q = search.toLowerCase();
const filtered = q
? users.filter(u => (u.nome_apresentar || u.nome_completo || '').toLowerCase().includes(q) || (u.tipo_utilizador || '').includes(q))
: users;
const groups = {};
filtered.forEach(u => {
const t = u.tipo_utilizador || 'outros';
if (!groups[t]) groups[t] = [];
groups[t].push(u);
});
if (viewAs) {
return (
Ver como:
{viewAs.nome_apresentar || viewAs.nome_completo}
);
}
return (
{open && (
setSearch(e.target.value)} placeholder="Pesquisar colaborador…" style={{ width: '100%', padding: '5px 8px', borderRadius: 'var(--r-2)', border: '1px solid var(--border)', background: 'var(--bg)', fontSize: 12, color: 'var(--text)', outline: 'none' }} />
{Object.entries(groups).map(([tipo, list]) => (
{tipo}
{list.slice(0, 30).map(u => {
const display = u.nome_apresentar || u.nome_completo || '?';
const initials = display.trim().split(' ').filter(Boolean).slice(0, 2).map(p => p[0]).join('').toUpperCase();
return (
);
})}
))}
{filtered.length === 0 &&
Sem resultados
}
)}
);
};
const Topbar = ({ title, subtitle, brand, onOpenChat, onOpenCmd, onToggleTheme, theme, right, livePill, user, onSwitchUser, onOpenDrawer, onNavigate, viewAs, onViewAs }) => {
return (
);
};
window.Sidebar = Sidebar;
window.Topbar = Topbar;