/* Zona C — Settings page (#screen=settings).
Layout 2-col: sidebar 240px com lista de secções + main content.
Identidade · Empresas&Permissões (read-only) · Aparência · Notificações ·
Integrações · Modo Demo · Segurança · Sobre. */
const SETTINGS_SECTIONS = [
{ id: 'identity', label: 'Identidade', icon: 'user' },
{ id: 'permissions', label: 'Empresas & Permissões', icon: 'building' },
{ id: 'appearance', label: 'Aparência', icon: 'sun' },
{ id: 'notifications', label: 'Notificações', icon: 'bell' },
{ id: 'integrations', label: 'Integrações pessoais', icon: 'link' },
{ id: 'demo', label: 'Modo Demo', icon: 'eye', requiresRole: ['admin','director','dev'] },
{ id: 'security', label: 'Segurança', icon: 'flag' },
{ id: 'about', label: 'Sobre', icon: 'info' },
];
const SettingsScreen = ({ user, theme, onToggleTheme }) => {
const u = user || {};
const [section, setSection] = React.useState(() => {
try { return localStorage.getItem('digi-settings-section') || 'identity'; } catch { return 'identity'; }
});
React.useEffect(() => { try { localStorage.setItem('digi-settings-section', section); } catch {} }, [section]);
const visibleSections = SETTINGS_SECTIONS.filter(s => {
if (!s.requiresRole) return true;
return s.requiresRole.includes(u.role);
});
return (
{/* Section sidebar */}
{/* Main content */}
{section === 'identity' && }
{section === 'permissions' && }
{section === 'appearance' && }
{section === 'notifications' && }
{section === 'integrations' && }
{section === 'demo' && }
{section === 'security' && }
{section === 'about' && }
{title}
{subtitle &&
{subtitle}
}
);
const SCard = ({ children, style }) => (
{children}
);
const SRow = ({ label, value, mono }) => (
{label}
{value}
);
const SRadio = ({ name, value, options, onChange }) => (
{options.map(o => (
))}
);
const STitle = ({ children, sub }) => (
{children}
{sub &&
{sub}
}
);
// === Identidade
const SettingsIdentity = ({ user }) => (
{user.iniciais}
{user.nome}
{user.cargo} · {user.departamento}
Para alterar, contactar HR.
);
// === Empresas & Permissões
const SettingsPermissions = ({ user }) => {
const companies = (window.FARBEN_COMPANIES || []).filter(c => (user.empresas || []).includes(c.id));
return (
Empresa primária
{(window.farbenCompany?.(user.empresaId)?.name) || user.empresa}
Empresas acessíveis
{companies.map(c => (
{c.code}
{c.name}
{c.country} · {c.tipo}
))}
{(user.role || 'user').toUpperCase()}
{(window.FARBEN_ROLES || []).find(r => r.id === user.role)?.desc}
Modos permitidos
{(user.modos || []).map(m => (
{m}
))}
Marcas
{(user.marcas || []).map(m => (
{m}
))}
Mercados
{(user.mercados || []).map(m => (
{m}
))}
);
};
// === Aparência
const SettingsAppearance = ({ theme, onToggleTheme }) => {
const [themeChoice, setThemeChoice] = React.useState(theme === 'dark' ? 'dark' : 'light');
const [lang, setLang] = React.useState(() => { try { return localStorage.getItem('digi-lang') || 'PT'; } catch { return 'PT'; } });
const [density, setDensity] = React.useState(() => { try { return localStorage.getItem('digi-density') || 'comfortable'; } catch { return 'comfortable'; } });
React.useEffect(() => { try { localStorage.setItem('digi-lang', lang); } catch {} }, [lang]);
React.useEffect(() => { try { localStorage.setItem('digi-density', density); } catch {} }, [density]);
const onTheme = (t) => { setThemeChoice(t); if ((t === 'dark') !== (theme === 'dark')) onToggleTheme && onToggleTheme(); };
return (
Tema
Idioma
Densidade
Atalhos de teclado
);
};
// === Notificações
const SettingsNotifications = ({ user }) => {
const [op, setOp] = React.useState({
lead: ['wa','email','portal'],
sat: ['wa','email','portal'],
urgent: ['wa','email','portal'],
cost: ['email','portal'],
});
const [comm, setComm] = React.useState({
novidades: ['email'],
tips: [],
surveys: [],
});
const [dnd, setDnd] = React.useState({ start: '19:00', end: '08:00', weekend: true });
const showCost = user.role === 'admin' || user.role === 'director';
const toggle = (state, setState, key, ch) => setState(s => ({ ...s, [key]: s[key].includes(ch) ? s[key].filter(c => c !== ch) : [...s[key], ch] }));
return (
toggle(op, setOp, 'lead', ch)} />
toggle(op, setOp, 'sat', ch)} />
toggle(op, setOp, 'urgent', ch)} />
{showCost && toggle(op, setOp, 'cost', ch)} adminOnly />}
Comunicações Digi
toggle(comm, setComm, 'novidades', ch)} channelsAvailable={['email']} />
toggle(comm, setComm, 'tips', ch)} channelsAvailable={['portal']} />
toggle(comm, setComm, 'surveys', ch)} channelsAvailable={['email']} />
Horário não-perturbar
Canais disponíveis: WhatsApp · Email · Portal
);
};
const NotifRow = ({ label, channels, onToggle, channelsAvailable, adminOnly }) => {
const all = channelsAvailable || ['wa','email','portal'];
const labels = { wa: 'WA', email: 'Email', portal: 'Portal' };
return (
{label}
{adminOnly && ADMIN}
{all.map(ch => {
const on = channels.includes(ch);
return (
);
})}
);
};
// === Integrações pessoais
const SettingsIntegrations = ({ user }) => {
const integ = [
{ id: 'ms365', name: 'Microsoft 365 (SSO)', status: 'connected', meta: 'fabio.costa@digidelta.pt' },
{ id: 'clickup', name: 'ClickUp', status: 'connected', meta: '7 tarefas abertas' },
{ id: 'apollo', name: 'Apollo seat', status: user.role === 'user' ? 'n/a' : 'connected', meta: user.role === 'user' ? 'Sem perfil' : 'seat 12 / 50' },
{ id: 'vnnox', name: 'VNNOX user', status: user.empresas?.includes('NSC') ? 'connected' : 'n/a', meta: user.empresas?.includes('NSC') ? 'NSC tenant' : 'Sem perfil' },
{ id: 'primavera', name: 'Primavera', status: 'connected', meta: `User code: ${user.iniciais?.toUpperCase()}001` },
];
return (
{integ.map((i, idx) => (
{i.status === 'connected' ? (
● CONNECTED
) : i.status === 'n/a' ? (
n/a
) : (
)}
))}
);
};
// === Modo Demo
const SettingsDemo = ({ user }) => {
const [on, setOn] = React.useState(false);
return (
Activar modo demo
);
};
// === Segurança
const SettingsSecurity = ({ user }) => {
const sessions = [
{ device: 'MacBook Pro · Safari 17', ip: '94.62.143.21 · Lisboa', lastSeen: 'há 2 min', current: true },
{ device: 'iPhone 15 · Safari', ip: '188.250.49.7 · Porto', lastSeen: 'há 14h' },
{ device: 'Windows · Edge', ip: '85.244.218.4 · Lisboa', lastSeen: 'há 3 dias' },
];
const showApiKeys = user.role === 'admin' || user.role === 'dev';
return (
2FA
{user.tfa ? '● ACTIVO' : '○ INACTIVO'}
Sessões activas
{sessions.map((s, i) => (
{s.device} {s.current && ● ESTA SESSÃO}
{s.ip} · {s.lastSeen}
{!s.current &&
}
))}
Histórico de login
{showApiKeys && (
API keys
)}
);
};
// === Sobre
const SettingsAbout = () => (
);
const SettingsLink = ({ icon, label, meta, last }) => (
);
window.SettingsScreen = SettingsScreen;