/* screen_admin_users_detail.jsx — drawer 720px de edição.
7 tabs: Identidade · Empresas · Permissões · Acesso Portal · Apollo · Conversas Digi · Audit log.
Sticky header, prev/next entre filtrados, auto-save mock (state local).
*/
const AdminUserDrawer = ({ user: initial, currentUserTipo, onClose, onPrev, onNext }) => {
const D = window.AdminUsersData;
const UI = window.AdminUsers;
const [user, setUser] = React.useState(initial);
const [tab, setTab] = React.useState('identidade');
const [permExpanded, setPermExpanded] = React.useState(false);
const [savedAt, setSavedAt] = React.useState(null);
const dirtyRef = React.useRef(false);
React.useEffect(() => { setUser(initial); setTab('identidade'); setSavedAt(null); }, [initial?.id]);
// ESC fecha · ←/→ navegam
React.useEffect(() => {
const h = (e) => {
if (e.key === 'Escape') { onClose(); return; }
if (e.target.matches('input, textarea, select')) return;
if (e.key === 'ArrowLeft' && onPrev) onPrev();
if (e.key === 'ArrowRight' && onNext) onNext();
};
document.addEventListener('keydown', h);
return () => document.removeEventListener('keydown', h);
}, [onClose, onPrev, onNext]);
// Auto-save mock — qualquer mudança em `user` marca "Guardado há Xs"
const update = (patch) => {
setUser(prev => ({ ...prev, ...patch }));
dirtyRef.current = true;
clearTimeout(update._t);
update._t = setTimeout(() => {
setSavedAt(new Date());
dirtyRef.current = false;
}, 600);
};
const tabs = [
{ id: 'identidade', label: 'Identidade', icon: 'user' },
{ id: 'empresas', label: 'Empresas', icon: 'building' },
{ id: 'permissoes', label: 'Permissões', icon: 'layers' },
{ id: 'portal', label: 'Acesso Portal', icon: 'link' },
{ id: 'apollo', label: 'Apollo', icon: 'sparkle' },
{ id: 'conversas', label: 'Conversas Digi', icon: 'chat' },
{ id: 'audit', label: 'Audit log', icon: 'history' },
];
const auditLog = D.auditLogFor(user);
const sessions = D.sessionsFor(user);
const conversas = D.conversasMensal(user);
const def = D.TIPOS_DEFAULTS[user.tipo_utilizador];
const cur = user.permissoes || def;
const hasOverride = JSON.stringify({...cur, modos: undefined}) !== JSON.stringify({...def, modos: undefined});
// Indicadores de tab (badges)
const indicator = {
permissoes: hasOverride ? '!' : null,
portal: user.portal_activo ? '●' : '○',
apollo: user.apollo_enriched ? '✓' : '∅',
audit: auditLog.length > 0 ? auditLog.length : null,
};
return (
<>
{/* Overlay */}
{/* Drawer */}
{/* ═══ STICKY HEADER ═══ */}
{/* ═══ BODY (scrollable) ═══ */}
{tab === 'identidade' &&
}
{tab === 'empresas' &&
}
{tab === 'permissoes' &&
}
{tab === 'portal' &&
}
{tab === 'apollo' &&
}
{tab === 'conversas' &&
}
{tab === 'audit' &&
}
Auto-save activo · alterações registadas em colaboradores_audit
Fechar
);
};
// ════════════════════════════════════════════════════════════════
// TAB 1 · IDENTIDADE
// ════════════════════════════════════════════════════════════════
const IdentidadeTab = ({ user, update }) => {
const D = window.AdminUsersData;
const UI = window.AdminUsers;
return (
update({ nome_apresentar: v })} />
update({ telemovel: v })} />
update({ linkedin_url: v })} />
update({ pais: v })} />
update({ localidade: v })} />
update({ distrito: v })} />
update({ codigo_postal: v })} />
update({ office: v })} />
update({ perfil_cargo: v })} />
update({ funcao: v })} />
({ id: t.id, label: t.label }))}
onChange={v => update({ tipo_utilizador: v })} />
update({ seniority: v })} />
update({ nivel_tecnico: v })} />
({ id: m.id, label: m.label }))} onChange={v => update({ modo_digi: v })} />
update({ idioma_preferido: v })} />
update({ tom_preferido: v })} />
update({ areas_expertise: v })} />
update({ perfil_resumo: v })} />
update({ personalidade_notas: v })} />
);
};
// ════════════════════════════════════════════════════════════════
// TAB 2 · EMPRESAS
// ════════════════════════════════════════════════════════════════
const EmpresasTab = ({ user, update, currentUserTipo }) => {
const UI = window.AdminUsers;
return (
update({ empresas })}
/>
Multi-empresa. Um colaborador pode pertencer a múltiplas empresas do Grupo Farben Consulting.
A empresa primária é a que aparece no header. As outras dão acesso aos respectivos dados (clientes, leads, etc.) via permissões.
);
};
// ════════════════════════════════════════════════════════════════
// TAB 3 · PERMISSÕES
// ════════════════════════════════════════════════════════════════
const PermissoesTab = ({ user, update, expanded, setExpanded }) => {
const D = window.AdminUsersData;
const UI = window.AdminUsers;
const def = D.TIPOS_DEFAULTS[user.tipo_utilizador] || { dados: [], marcas: [], skills: [], features: [], modos: [] };
const cur = user.permissoes || def;
return (
As permissões deste utilizador herdam dos defaults do tipo{' '}
{D.getTipo(user.tipo_utilizador)?.label} .
Podes adicionar overrides pontuais — ficam marcados na lista.
update({ permissoes })}
expanded={expanded}
setExpanded={setExpanded}
/>
update({ permissoes: { ...cur, modos } })}
/>
);
};
const PermCheck = ({ label, passed }) => (
{passed ? '✓' : ''}
{label}
);
// ════════════════════════════════════════════════════════════════
// TAB 4 · PORTAL
// ════════════════════════════════════════════════════════════════
const PortalTab = ({ user, update, sessions }) => {
const UI = window.AdminUsers;
return (
);
};
// ════════════════════════════════════════════════════════════════
// TAB 5 · APOLLO
// ════════════════════════════════════════════════════════════════
const ApolloTab = ({ user, update }) => {
const UI = window.AdminUsers;
if (!user.apollo_enriched) {
return (
Utilizador não enriquecido
O enriquecimento via Apollo.io adiciona dados de LinkedIn, perfil profissional e empresa anterior.
update({ apollo_enriched: true })}>
);
}
return (
} />
);
};
// ════════════════════════════════════════════════════════════════
// TAB 6 · CONVERSAS
// ════════════════════════════════════════════════════════════════
const ConversasTab = ({ user, conversas }) => {
const UI = window.AdminUsers;
if (!user.portal_activo) {
return (
Portal inactivo
Sem conversas porque o utilizador não tem acesso ao portal.
);
}
const total = conversas.reduce((s, c) => s + c.count, 0);
return (
);
};
// ════════════════════════════════════════════════════════════════
// TAB 7 · AUDIT
// ════════════════════════════════════════════════════════════════
const AuditTab = ({ auditLog }) => {
const UI = window.AdminUsers;
return (
Cada alteração regista: campo, valor antigo, valor novo, autor, timestamp.
);
};
// ════════════════════════════════════════════════════════════════
// HELPERS
// ════════════════════════════════════════════════════════════════
const ModoDigiInline = ({ modo }) => {
const D = window.AdminUsersData;
const m = D?.MODOS_DIGI?.find(x => x.id === modo);
if (!m) return — ;
return {m.label.toLowerCase()} ;
};
const fmtSavedAt = (d) => {
const diff = (Date.now() - d.getTime()) / 1000;
if (diff < 5) return 'agora mesmo';
if (diff < 60) return `há ${Math.floor(diff)}s`;
return `às ${d.toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit' })}`;
};
// Inject keyframes once
if (typeof document !== 'undefined' && !document.getElementById('au-drawer-keyframes')) {
const s = document.createElement('style');
s.id = 'au-drawer-keyframes';
s.textContent = `
@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
`;
document.head.appendChild(s);
}
window.AdminUserDrawer = AdminUserDrawer;