toggleNode(email) : undefined}
style={{
display: 'flex', alignItems: 'center', gap: 10,
padding: '8px 16px', paddingLeft: 16 + depth * 28,
borderBottom: '1px solid var(--border)',
cursor: hasKids ? 'pointer' : 'default',
background: highlight ? 'rgba(59,130,246,0.07)' : 'transparent',
}}
>
{hasKids ? (isExpanded ? '▼' : '▶') : ''}
<_OrgAvatar nome={p.nome_completo || p.nome_apresentar} size={30} />
{p.nome_completo || p.nome_apresentar || email}
{p.perfil_cargo && {p.perfil_cargo}}
{p.departamento && · {p.departamento}}
{p.empresa && depth === 0 && · {p.empresa}}
{p.office && {p.office}}
{hasKids && {kids.length}}
{hasKids && isExpanded && kids.map(c => (
<_OrgNode key={c} email={c} depth={depth + 1} byEmail={byEmail} children={children} expanded={expanded} toggleNode={toggleNode} q={q} />
))}
);
};
const _OrgOrganogramaTab = ({ pessoas, q, expanded, setExpanded }) => {
const byEmail = {};
const children = {};
for (const p of pessoas) {
byEmail[p.email_profissional] = p;
children[p.email_profissional] = [];
}
for (const p of pessoas) {
const mgr = p.manager_email;
if (mgr && byEmail[mgr]) children[mgr].push(p.email_profissional);
}
const toggleNode = email => setExpanded(v => ({ ...v, [email]: !v[email] }));
const matchRoot = (em) => {
if (!q) return true;
const check = (e) => {
const person = byEmail[e];
if (!person) return false;
const direct = (person.nome_completo || '').toLowerCase().includes(q)
|| (person.perfil_cargo || '').toLowerCase().includes(q)
|| (person.email_profissional || '').toLowerCase().includes(q);
if (direct) return true;
return (children[e] || []).some(c => check(c));
};
return check(em);
};
const roots = pessoas
.filter(p => !p.manager_email || !byEmail[p.manager_email])
.map(p => p.email_profissional)
.filter(matchRoot)
.sort((a, b) => (byEmail[a]?.nome_completo || '').localeCompare(byEmail[b]?.nome_completo || ''));
if (roots.length === 0) return (
{q ? 'Sem resultados.' : 'Sem dados. Define a hierarquia no editor.'}
);
return (
Hierarquia de reporte
{roots.length} raízes · {pessoas.length} total
{roots.map(email => (
<_OrgNode key={email} email={email} depth={0} byEmail={byEmail} children={children} expanded={expanded} toggleNode={toggleNode} q={q} />
))}
);
};
// ── Tab: Editor de hierarquia ──────────────────────────────────────────────
const _OrgEditorTab = ({ pessoas, load, q }) => {
const [edits, setEdits] = React.useState({});
const [saving, setSaving] = React.useState(false);
const [saveMsg, setSaveMsg] = React.useState(null);
React.useEffect(() => {
const init = {};
for (const p of pessoas) init[p.email_profissional] = p.manager_email || '';
setEdits(init);
}, [pessoas.length]);
const byEmail = {};
for (const p of pessoas) byEmail[p.email_profissional] = p;
const hasCycle = (email, managerEmail, depth = 0) => {
if (depth > 30 || !managerEmail) return false;
if (managerEmail === email) return true;
return hasCycle(email, edits[managerEmail], depth + 1);
};
const empresaMap = {};
const sorted = [...pessoas].sort((a, b) => {
const ea = a.empresa || ''; const eb = b.empresa || '';
if (ea !== eb) return ea.localeCompare(eb);
return (a.nome_completo || '').localeCompare(b.nome_completo || '');
});
for (const p of sorted) {
const emp = p.empresa || '(sem empresa)';
if (!empresaMap[emp]) empresaMap[emp] = [];
empresaMap[emp].push(p);
}
const saveHierarquia = async () => {
setSaving(true); setSaveMsg(null);
try {
const payload = Object.entries(edits).map(([email, manager_email]) => ({
email, manager_email: manager_email || null,
}));
const r = await fetch('/api/organograma/hierarquia', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
const data = await r.json();
if (!r.ok) throw new Error(data.error || r.statusText);
setSaveMsg({ ok: true, msg: `${data.updated} registos guardados.` });
load();
} catch (e) {
setSaveMsg({ ok: false, msg: e.message });
} finally {
setSaving(false);
}
};
const pessoasFiltered = q
? pessoas.filter(p =>
(p.nome_completo || '').toLowerCase().includes(q) ||
(p.perfil_cargo || '').toLowerCase().includes(q) ||
(p.empresa || '').toLowerCase().includes(q) ||
(p.departamento || '').toLowerCase().includes(q)
)
: pessoas;
const comSuperior = Object.values(edits).filter(v => v).length;
return (
Define o superior hierárquico de cada colaborador. Deixa em branco para topo da hierarquia.
{saveMsg && (
{saveMsg.msg}
)}
Colaboradores ({pessoasFiltered.length})
{comSuperior} com superior definido
{pessoasFiltered.map(p => {
const currentMgr = edits[p.email_profissional] ?? (p.manager_email || '');
const cycle = !!currentMgr && hasCycle(p.email_profissional, currentMgr);
return (
<_OrgAvatar nome={p.nome_completo || p.nome_apresentar} size={30} />
{p.nome_completo || p.nome_apresentar || p.email_profissional}
{p.perfil_cargo || '—'}{p.empresa ? ` · ${p.empresa}` : ''}
{cycle && ⚠ ciclo}
);
})}
);
};
// ── Componente principal ───────────────────────────────────────────────────
const SistemaOrganograma = () => {
const [tab, setTab] = React.useState('directorio');
const [pessoas, setPessoas] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);
const [search, setSearch] = React.useState('');
const [expanded, setExpanded] = React.useState({});
const load = React.useCallback(() => {
setLoading(true);
fetch('/api/organograma')
.then(r => { if (!r.ok) throw new Error(r.statusText); return r.json(); })
.then(data => { setPessoas(data); setLoading(false); })
.catch(e => { setError(e.message); setLoading(false); });
}, []);
React.useEffect(() => { load(); }, []);
const q = search.toLowerCase().trim();
const filtered = q
? pessoas.filter(p =>
(p.nome_completo || '').toLowerCase().includes(q) ||
(p.perfil_cargo || '').toLowerCase().includes(q) ||
(p.departamento || '').toLowerCase().includes(q) ||
(p.empresa || '').toLowerCase().includes(q) ||
(p.email_profissional || '').toLowerCase().includes(q)
)
: pessoas;
const tabs = [
{ id: 'directorio', label: 'Diretório' },
{ id: 'organograma', label: 'Organograma' },
{ id: 'editor', label: 'Editar hierarquia' },
];
return (
{tabs.map(t => (
))}
{tab !== 'editor' ? `${filtered.length} / ${pessoas.length}` : `${pessoas.length} colaboradores`}
{loading &&
A carregar…
}
{error &&
Erro: {error}
}
{!loading && !error && tab === 'directorio' && <_OrgDirectorioTab filtered={filtered} q={q} />}
{!loading && !error && tab === 'organograma' && <_OrgOrganogramaTab pessoas={pessoas} q={q} expanded={expanded} setExpanded={setExpanded} />}
{!loading && !error && tab === 'editor' && <_OrgEditorTab pessoas={pessoas} load={load} q={q} />}
);
};
window.SistemaOrganograma = SistemaOrganograma;