/* 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', kbd: '4' },
{ id: 'agents', label: 'Sub-agentes', kbd: '5' },
{ id: 'skills', label: 'Skills', kbd: '6' },
{ id: 'tools', label: 'Tools', kbd: '7' },
{ id: 'routing', label: 'Routing', kbd: '8' },
{ id: 'conversations', label: 'Replay', kbd: '9' },
{ id: 'deploy', label: 'Deploy', kbd: 'D' },
{ id: 'integracoes', label: 'Integrações', kbd: 'I' },
{ id: 'roadmap', label: 'Roadmap', kbd: 'R' },
{ id: 'sales_sat_f1', label: 'SALES & SAT F1', kbd: 'S' },
{ id: 'costs', label: 'Custos & ROI', kbd: 'C' },
{ id: 'backups', label: 'Backups', kbd: 'B' },
];
// ADMIN (governance · gestão) — modo privilegiado, gating por lista nominal
const ADMIN_SUBNAV = [
{ id: 'inicio', label: 'Início', kbd: '1' },
{ id: 'utilizadores', label: 'Utilizadores', kbd: '2' },
{ id: 'empresas', label: 'Empresas', kbd: '3' },
{ id: 'audit', label: 'Audit log', kbd: '4' },
{ id: 'integracoes', label: 'Integrações', kbd: '5' },
{ id: 'importar', label: 'Importar Dados', kbd: '6' },
];
// SISTEMA (run · observar) — operar e monitorizar
const SISTEMA_SUBNAV = [
{ id: 'inbox', label: 'Inbox · Live', kbd: '1' },
{ id: 'overview', label: 'Overview', kbd: '2' },
{ id: 'kpis', label: 'KPIs', kbd: '3' },
{ id: 'costs', label: 'Costs', kbd: '4' },
{ id: 'integrations', label: 'Integrations', kbd: '5' },
{ id: 'primavera', label: 'Ligação Primavera', kbd: '6' },
{ id: 'agentes', label: 'Agentes', kbd: '7' },
{ id: 'gestor', label: 'Gestor CRM', kbd: '8' },
{ id: 'm365', label: 'M365 Sync', kbd: '9' },
{ id: 'alerts', label: 'Alerts', kbd: 'A' },
];
// RH (Recursos Humanos) — diretório e organograma
const RH_SUBNAV = [
{ id: 'organograma', label: 'Organograma', kbd: '1' },
];
const MARKETING_SUBNAV = [
{ id: 'inicio', label: 'Início', kbd: '1' },
{ id: 'objectivos', label: 'Objectivos', kbd: '2' },
{ id: 'resultados', label: 'Resultados', kbd: '3' },
{ id: 'marcas', label: 'Marcas e Estratégia', kbd: '4' },
{ id: 'plano-comunicacao', label: 'Plano de Comunicação', kbd: '5' },
{ id: 'briefings', label: 'Briefings', kbd: '6' },
{ id: 'campanhas', label: 'Campanhas', kbd: '7' },
{ id: 'conteudos', label: 'Produção de Conteúdos', kbd: '8' },
{ id: 'publicacao', label: 'Activação', kbd: '9' },
{ id: 'crm', label: 'CRM', kbd: '0' },
{ id: 'sdr', label: 'SDR', kbd: 'A' },
{ id: 'performance-ads', label: 'Performance Ads', kbd: 'B' },
{ id: 'agentes', label: 'Sub-agentes', kbd: 'C' },
{ id: 'open-houses', label: 'Open Houses', kbd: 'D' },
{ id: 'budget', label: 'Budget', kbd: 'E' },
{ id: 'producao', label: 'Produção', kbd: 'F' },
];
const FINANCE_SUBNAV = [
{ id: 'cobrancas', label: 'Cobranças', kbd: '1', tag: 'Em desenvolvimento' },
{ id: 'tesouraria', label: 'Tesouraria', kbd: '2', tag: 'Em desenvolvimento' },
{ id: 'contabilidade', label: 'Contabilidade', kbd: '3', tag: 'Em desenvolvimento' },
{ id: 'controlling', label: 'Controlling', kbd: '4', tag: 'Em desenvolvimento' },
{ id: 'primavera', label: 'Primavera Finance', kbd: '5', tag: 'Em desenvolvimento' },
{ id: 'reports-pl', label: 'Reports P&L', kbd: '6', tag: 'Não existe' },
{ id: 'clientes-stocks', label: 'Clientes & Stocks', kbd: '7', tag: 'Não existe' },
{ id: 'objectivos-financeiros', label: 'Objectivos Financeiros', kbd: '8', tag: 'Não existe' },
{ id: 'reconciliacao', label: 'Reconciliação Faturas', kbd: '9' },
{ id: 'printplan', label: 'PrintPlan', kbd: '0' },
];
const BUSINESS_AI_SUBNAV = [ { id: 'pipeline', label: 'Pipeline', kbd: '1' }, { id: 'roadmap', label: 'Roadmap', kbd: '2' }, { id: 'sugestoes', label: 'Board Intake', kbd: '3' }, { id: 'editar', label: 'Editar Roadmap', kbd: '4' }, { id: 'definir-dashboard', label: 'Gerar Pedido', kbd: '5' }, { id: 'gerir-dashboards', label: 'Gestão de Pedidos', kbd: '6' },];
const COMERCIAL_SUBNAV = [
{ id: 'dashboard', label: 'Dashboard v1', kbd: '1' },
{ id: 'dashboard-v2', label: 'Dashboard', kbd: '2' },
{ id: 'rpc', label: 'Prod. Comercial', kbd: '3' },
{ id: 'bp', label: 'Business Plan v1', kbd: '4' },
{ id: 'bp-v2', label: 'Business Plan', kbd: '5' },
{ id: 'oportunidades', label: 'Oportunidades', kbd: '6' },
{ id: 'prospeccao', label: 'Prospecção', kbd: '7' },
{ id: 'clientes', label: 'Clientes', kbd: '8' },
{ id: 'simulador', label: 'Simulador', kbd: '9' },
{ id: 'digi', label: 'Chat AI', kbd: 'A', ai: true },
{ id: 'vendas', label: 'Vendas & Performance', kbd: 'B', restricted: true },
{ id: 'gestor-classic', label: 'Monitor de Vendas ERP', kbd: 'C', restricted: true },
{ id: 'rel-rpc', label: 'RPC', kbd: 'D', restricted: true },
{ id: 'performance', label: 'Performance Mimaki', kbd: 'E' },
{ id: 'performance-media', label: 'Performance Media', kbd: 'F' },
{ id: 'bp-studio', label: 'Objectivos Performance', kbd: 'G' },
];
const LOGISTICA_SUBNAV = [
{ id: 'dias-stock', label: 'Dias de Stock', kbd: '1', tag: 'Não existe' },
{ id: 'nivel-servico', label: 'Nível de Serviço de Entregas', kbd: '2', tag: 'Não existe' },
{ id: 'rotacao-stock', label: 'Rotação de Stock', kbd: '3', tag: 'Não existe' },
{ id: 'print-plan', label: 'Print Plan e Consignações', kbd: '4', tag: 'Não existe' },
];
const PRODUCAO_SUBNAV = [
{ id: 'kpis', label: 'KPIs Produção', kbd: '1' },
{ id: 'stock-pi', label: 'Stock PI', kbd: '2' },
{ id: 'plano-mensal', label: 'Plano Mensal', kbd: '3' },
{ id: 'nao-conformes', label: 'Não Conformes', kbd: '4' },
{ id: 'desperdicios', label: 'Desperdícios', kbd: '5' },
{ id: 'planeamento-mrp', label: 'Planeamento MRP', kbd: '6' },
];
const QUALIDADE_SUBNAV = [
{ id: 'rec-fornecedores', label: 'Rec. Fornecedores', kbd: '1' },
{ id: 'rec-clientes', label: 'Rec. Clientes', kbd: '2' },
{ id: 'avaliacao', label: 'Aval. Fornecedores', kbd: '3' },
];
const SAT_SUBNAV = [
{ id: 'overview', label: 'Overview', kbd: '1' },
{ id: 'inbox', label: 'Inbox WA', kbd: '2' },
{ id: 'historico', label: 'Histórico', kbd: '3' },
];
const NAV = [
{ section: 'Departamentos' },
{ id: 'marketing', label: 'Marketing', icon: 'marketing', target: 'marketing', subKey: 'marketing', sub: MARKETING_SUBNAV, subStorage: 'digi-marketing-sub', subDefault: 'inicio' },
{ 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 },
];
// Expose module → subnav map for BI forms (Definir Pedido)
window.PORTAL_MODULES = NAV
.filter(it => it.sub && it.label && !it.section && !['dev','admin'].includes(it.id))
.map(it => ({
label: it.label.toUpperCase(),
submenus: it.sub.filter(s => s.id !== 'definir-dashboard').map(s => s.label).concat(['Outro']),
}));
// Full nav catalog (id + subnav ids+labels) — used by admin PORTAL_SUBS_CATALOG getter
window.PORTAL_NAV_CATALOG = NAV
.filter(it => it.sub && it.label && !it.section && !['dev','admin'].includes(it.id))
.map(it => ({
id: it.id,
label: it.label,
sub: it.sub.map(s => ({ id: s.id, label: s.label })),
}));
// 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;
function useBreakpoint() {
const [w, setW] = React.useState(window.innerWidth);
React.useEffect(() => {
const fn = () => setW(window.innerWidth);
window.addEventListener('resize', fn);
return () => window.removeEventListener('resize', fn);
}, []);
return {
isMobile: w < 768,
isTablet: w >= 768 && w < 1024,
isDesktop: w >= 1024,
};
}
window.useBreakpoint = useBreakpoint;
// Indented accordion sub-list. Each row has: vertical rail, label, badge, kbd.
const SubNavList = ({ items, storageKey, fallback, isParentActive, onNavigateParent, userTipo, userModos, subKey, userSubs }) => {
const [subActive, setSubActive] = useSubNav(storageKey, fallback);
const isDev = userTipo === 'admin' || (Array.isArray(userModos) && userModos.includes('dev'));
const allowedSubs = userSubs && subKey ? (userSubs[subKey] || null) : null;
const visibleItems = items.filter(s => {
if (s.devOnly && !isDev) return false;
if (s.requiresTipo && s.requiresTipo !== userTipo) return false;
if (s.restricted && !isDev && !allowedSubs?.includes(s.id)) return false;
if (allowedSubs && !allowedSubs.includes(s.id)) return false;
return true;
});
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, userModos, userSubs }) => {
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}
userModos={userModos}
subKey={item.subKey}
userSubs={userSubs}
/>
)}
);
};
const Sidebar = ({ active, onNavigate, variation, allowedScreens, userRole, userEmail, userTipo, userModos, userSubs, drawerOpen, onClose }) => {
const { isDesktop } = window.useBreakpoint();
// 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 subOk = (it) => {
if (!userSubs || !it.subKey) return true; // sem restrições
if (!(it.subKey in userSubs)) return false; // ausente na whitelist = oculto
const allowedSubs = userSubs[it.subKey];
if (Array.isArray(allowedSubs) && allowedSubs.length === 0) return false; // [] = oculto
if (!allowedSubs) return true; // null = livre (todos os submenus)
return it.sub && it.sub.some(s => allowedSubs.includes(s.id));
};
const passes = (it) => roleOk(it) && adminOk(it) && subOk(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);
}, []);
const isDrawer = !isDesktop;
return (
<>
{/* Scrim — só em drawer mode quando aberto */}
{isDrawer && drawerOpen && (
)}
);
};
// "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, onOpenSidebar }) => {
const { isMobile, isTablet } = window.useBreakpoint();
const isCompact = isMobile || isTablet;
return (
);
};
// Mapa screen-id → NAV item, para o MobileSubNav de index.html
window.NAV_MAP = Object.fromEntries(
NAV.filter(n => n.id).map(n => [n.id, n])
);
window.Sidebar = Sidebar;
window.Topbar = Topbar;