/* ================================================================
Khronus — Configurações (Time + Categorias)
Tudo dentro de uma IIFE: os .jsx do Khronus são carregados como
script global no navegador (sem bundler), então dois arquivos
declarando a mesma const no escopo de topo derrubam o app inteiro.
Isolar aqui dentro evita esse problema pra sempre neste arquivo.
================================================================ */
(function () {
const { useState, useEffect, useRef } = React;
const { LucideIcon, Btn, Badge, TopBar, SectionCard, IniciaisAvatar, useEscapeToClose } = window;
const CORES = ['var(--accent)', 'var(--clr-info)', 'var(--clr-pos)', '#f472b6', '#a78bfa', 'var(--clr-neg)',
'#fb923c', '#34d399', '#94a3b8', '#facc15', '#ffffff'];
const inputStyle = {
width: '100%', boxSizing: 'border-box', padding: '8px 12px', borderRadius: 'var(--r-sm)',
background: 'var(--app-surface-2)', border: '1px solid var(--app-border)',
color: 'var(--text-1)', fontFamily: 'Roboto, sans-serif', fontSize: 'var(--fs-lg)', outline: 'none',
};
function Campo({ label, children }) {
return (
{label}
{children}
);
}
function SeletorCor({ value, onChange }) {
return (
{CORES.map(c => (
);
}
function ModalBase({ titulo, onClose, children, onSalvar, salvando, erro, onExcluir }) {
useEscapeToClose(onClose);
return (
e.stopPropagation()}>
{titulo}
{children}
{erro && (
{erro}
)}
{onExcluir ?
Excluir :
}
Cancelar
{salvando ? 'Salvando…' : 'Salvar'}
);
}
/* ── Time ─────────────────────────────────────────────────────*/
function TimeSection() {
const [membros, setMembros] = useState([]);
const [limite, setLimite] = useState(3);
const [loading, setLoading] = useState(true);
const [modal, setModal] = useState(null); // { item } | null
async function load() {
setLoading(true);
const [{ data: m }, { data: est }] = await Promise.all([
window.db.from('crm_team_members').select('*').eq('ativo', true).order('ordem'),
window.db.from('crm_studios').select('limite_membros').single(),
]);
setMembros(m || []);
setLimite(est?.limite_membros ?? 3);
setLoading(false);
}
useEffect(() => { load(); }, []);
const atingiuLimite = membros.length >= limite;
async function excluir(m) {
if (!confirm(`Remover "${m.nome}" do time?`)) return;
await window.db.from('crm_team_members').update({ ativo: false }).eq('id', m.id);
setModal(null);
load();
}
return (
{membros.length} de {limite} membros
setModal({ item: null })}>
Adicionar
{atingiuLimite && (
Limite de {limite} membros atingido. Remova alguém pra adicionar outro.
)}
{loading ? (
Carregando…
) : (
{membros.map(m => (
setModal({ item: m })}
style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px',
borderRadius: 'var(--r-sm)', background: 'var(--app-surface-2)', border: '1px solid var(--app-border)',
cursor: 'pointer' }}>
{m.nome}
))}
)}
{modal && (
setModal(null)}
onSaved={() => { setModal(null); load(); }} onExcluir={excluir} />
)}
);
}
function MembroModal({ item, onClose, onSaved, onExcluir }) {
const [nome, setNome] = useState(item?.nome || '');
const [cor, setCor] = useState(item?.cor || CORES[0]);
const [salvando, setSalvando] = useState(false);
const [erro, setErro] = useState('');
async function salvar() {
if (!nome.trim()) { setErro('Dê um nome.'); return; }
setSalvando(true); setErro('');
try {
const iniciais = nome.trim().split(/\s+/).map(p => p[0]).slice(0, 2).join('').toUpperCase();
if (item?.id) {
const { error } = await window.db.from('crm_team_members').update({ nome: nome.trim(), cor, iniciais }).eq('id', item.id);
if (error) throw error;
} else {
const { error } = await window.db.from('crm_team_members').insert({ nome: nome.trim(), cor, iniciais });
if (error) throw error;
}
onSaved();
} catch (e) {
setErro(e.message?.includes('Limite') ? e.message : (e.message || String(e)));
} finally {
setSalvando(false);
}
}
return (
onExcluir(item) : null}>
setNome(e.target.value)} placeholder="Ex.: Felipe" />
);
}
/* ── Categorias ───────────────────────────────────────────────*/
const APLICA_EM_OPCOES = [
{ id: 'ambos', label: 'Eventos e tarefas' },
{ id: 'evento', label: 'Só eventos' },
{ id: 'tarefa', label: 'Só tarefas' },
];
function CategoriasSection() {
const [categorias, setCategorias] = useState([]);
const [loading, setLoading] = useState(true);
const [modal, setModal] = useState(null);
async function load() {
setLoading(true);
const { data } = await window.db.from('crm_agenda_categories').select('*').eq('ativo', true).order('ordem');
setCategorias(data || []);
setLoading(false);
}
useEffect(() => { load(); }, []);
async function excluir(c) {
if (!confirm(`Remover a categoria "${c.nome}"? Itens que já usam ela mantêm a cor, só some da lista de opções.`)) return;
await window.db.from('crm_agenda_categories').update({ ativo: false }).eq('id', c.id);
setModal(null);
load();
}
return (
setModal({ item: null })}>Adicionar
{loading ? (
Carregando…
) : (
{categorias.map(c => (
setModal({ item: c })}
style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px',
borderRadius: 'var(--r-sm)', background: 'var(--app-surface-2)', border: '1px solid var(--app-border)',
cursor: 'pointer' }}>
{c.nome}
{APLICA_EM_OPCOES.find(o => o.id === c.aplica_em)?.label || c.aplica_em}
))}
)}
{modal && (
setModal(null)}
onSaved={() => { setModal(null); load(); }} onExcluir={excluir} />
)}
);
}
function CategoriaModal({ item, onClose, onSaved, onExcluir }) {
const [nome, setNome] = useState(item?.nome || '');
const [cor, setCor] = useState(item?.cor || CORES[0]);
const [aplicaEm, setAplicaEm] = useState(item?.aplica_em || 'ambos');
const [salvando, setSalvando] = useState(false);
const [erro, setErro] = useState('');
async function salvar() {
if (!nome.trim()) { setErro('Dê um nome.'); return; }
setSalvando(true); setErro('');
try {
const payload = { nome: nome.trim(), cor, aplica_em: aplicaEm };
if (item?.id) {
const { error } = await window.db.from('crm_agenda_categories').update(payload).eq('id', item.id);
if (error) throw error;
} else {
const { error } = await window.db.from('crm_agenda_categories').insert(payload);
if (error) throw error;
}
onSaved();
} catch (e) {
setErro(e.message || String(e));
} finally {
setSalvando(false);
}
}
return (
onExcluir(item) : null}>
setNome(e.target.value)} placeholder="Ex.: Sessão" />
);
}
/* ── Empresas ─────────────────────────────────────────────────*/
function EmpresasSection() {
const [tags, setTags] = useState([]);
const [loading, setLoading] = useState(true);
const [modal, setModal] = useState(null);
async function load() {
setLoading(true);
const { data } = await window.db.from('crm_company_tags').select('*').eq('ativo', true).order('ordem');
setTags(data || []);
setLoading(false);
}
useEffect(() => { load(); }, []);
async function excluir(t) {
if (!confirm(`Remover a tag "${t.nome}"? Cards que já usam ela mantêm a cor, só some da lista de opções.`)) return;
await window.db.from('crm_company_tags').update({ ativo: false }).eq('id', t.id);
setModal(null);
load();
}
return (
setModal({ item: null })}>Adicionar
{loading ? (
Carregando…
) : (
{tags.map(t => (
setModal({ item: t })}
style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px',
borderRadius: 'var(--r-sm)', background: 'var(--app-surface-2)', border: '1px solid var(--app-border)',
cursor: 'pointer' }}>
{t.nome}
))}
)}
{modal && (
setModal(null)}
onSaved={() => { setModal(null); load(); }} onExcluir={excluir} />
)}
);
}
function EmpresaModal({ item, onClose, onSaved, onExcluir }) {
const [nome, setNome] = useState(item?.nome || '');
const [cor, setCor] = useState(item?.cor || CORES[0]);
const [salvando, setSalvando] = useState(false);
const [erro, setErro] = useState('');
async function salvar() {
if (!nome.trim()) { setErro('Dê um nome.'); return; }
setSalvando(true); setErro('');
try {
const payload = { nome: nome.trim(), cor };
if (item?.id) {
const { error } = await window.db.from('crm_company_tags').update(payload).eq('id', item.id);
if (error) throw error;
} else {
const { error } = await window.db.from('crm_company_tags').insert(payload);
if (error) throw error;
}
onSaved();
} catch (e) {
setErro(e.message || String(e));
} finally {
setSalvando(false);
}
}
return (
onExcluir(item) : null}>
setNome(e.target.value)} placeholder="Ex.: Ferreira e Maciel" />
);
}
/* ── Tela ─────────────────────────────────────────────────────*/
function ConfiguracoesScreen() {
return (
);
}
window.ConfiguracoesScreen = ConfiguracoesScreen;
})();