// users-page.jsx — Página de Usuários (lista) + drawer "Novo usuário". // A lista é REAL (GET /api/agenda/usuarios). O drawer replica as sub-abas do // Perfil do Usuário (Dados pessoais · Segurança · Preferências — sem Sessões). // A CRIAÇÃO ainda não tem endpoint no back (decisões pendentes) → "Criar usuário" // é placeholder honesto por enquanto. // ID no padrão do sistema: PK + UF + "-" + 6 dígitos ESTÁVEIS (hash do id, não // muda a cada render; único por usuário). Ex.: PKCE-236358. UF real quando houver // (default BR enquanto o cadastro não traz o estado). function userCode(id, uf) { const s = String(id || ''); let h = 0; for (let i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; } const u = (String(uf || 'BR').toUpperCase().replace(/[^A-Z]/g, '') + 'BR').slice(0, 2); return 'PK' + u + '-' + String(h % 1000000).padStart(6, '0'); } // CSS da lista de Usuários (padrão Clientes: grid de colunas, linha com hover, // ações cinza com hover colorido — ver=verde, editar=azul, excluir=vermelho). function UsersStyles() { return ( ); } function UsersPage() { const { back, auth } = useStore(); // Usuários via cache por empresa (api.jsx): revisita instantânea + revalida no fundo. const { data: users, setData: setUsers, loading: usersLoading, reload } = useCachedQuery( ['usuarios'], async () => { let list; try { const r = await window.API.getUsuarios(); list = (r.usuarios || []).map((u) => ({ id: u.id, code: userCode(u.id, u.uf), name: u.nome || '—', nomeCompleto: u.nomeCompleto || '', email: u.email || '', telefone: u.telefone || '', cpf: u.cpf || '', cargo: u.cargo || '', departamento: u.departamento || '', departamentoId: u.departamentoId != null ? u.departamentoId : null, nascimento: u.nascimento || '', endereco: u.endereco || '', bio: u.bio || '', cidade: u.cidade || '', uf: u.uf || '', fotoUrl: u.fotoUrl || '', tipo: u.papelNome || u.papel || '—', papelCodigo: u.papel || 'atendente', status: u.status || 'ativo', })); if (window.semearFotosUsuarios) window.semearFotosUsuarios(r.usuarios); // foto única em todo Avatar if (list.length && typeof skelRemember === 'function') skelRemember('usuarios', list.length); } catch (e) { list = []; } // erro -> vazio (igual ao .catch antigo) return list; }, { empresaId: auth.empresaId, initialData: [] }, ); const loaded = !usersLoading; const [drawer, setDrawer] = React.useState(null); // { modo, inicial } const [excluir, setExcluir] = React.useState(null); // usuário a excluir (confirmação) const [criado, setCriado] = React.useState(null); // resultado de criação/reset (mostra a senha 1x) const [query, setQuery] = React.useState(''); const [filterTipo, setFilterTipo] = React.useState('all'); const [filterStatus, setFilterStatus] = React.useState('all'); // all | ativo | inativo const [showFilters, setShowFilters] = React.useState(false); // (A busca de usuários e seu ciclo de vida vivem agora no hook useCachedQuery // acima: carrega no mount, cacheia por empresa, revalida no fundo e expõe `reload`.) const tipos = React.useMemo(() => Array.from(new Set(users.map((u) => u.tipo).filter((t) => t && t !== '—'))), [users]); const filtered = React.useMemo(() => { const q = query.trim().toLowerCase(); return users.filter((u) => { if (filterTipo !== 'all' && u.tipo !== filterTipo) return false; if (filterStatus !== 'all' && u.status !== filterStatus) return false; if (!q) return true; return (u.name || '').toLowerCase().includes(q) || (u.code || '').toLowerCase().includes(q) || (u.email || '').toLowerCase().includes(q); }); }, [users, query, filterTipo, filterStatus]); const cidadeUF = (u) => [u.cidade, u.uf].filter(Boolean).join(' - ') || '—'; const setAtivoUsuario = async (u, v) => { try { await window.API.editarUsuario(u.id, { ativo: v }); reload(); } catch (e) { window.showToast && window.showToast({ tipo: 'erro', titulo: 'Não foi possível alterar', descricao: (e && e.message) || 'Tente novamente.' }); } }; const activeFilters = (filterTipo !== 'all' ? 1 : 0) + (filterStatus !== 'all' ? 1 : 0); const clearFilters = () => { setFilterTipo('all'); setFilterStatus('all'); }; const showSkel = !loaded; return ( setDrawer({ modo: 'novo' })} />}> {/* Toolbar: busca (nome/ID) + filtros Tipo e Status */}
setQuery(e.target.value)} style={{ paddingLeft: 40, width: '100%' }} /> {query && }
{filtered.length} usuário{filtered.length === 1 ? '' : 's'}
{showFilters &&
Filtros
{activeFilters > 0 && }
Tipo
setFilterTipo('all')}>Todos {tipos.map((t) => setFilterTipo(t)}>{t})}
Status
{[['all', 'Todos'], ['ativo', 'Ativo'], ['inativo', 'Inativo']].map(([id, l]) => setFilterStatus(id)}>{l})}
}
{/* Tabela */}
ID
Usuário
Contato
Tipo
Status
Ações
{showSkel ? ( Array.from({ length: skelCount('usuarios', 4) }).map((_, i) =>
) ) : filtered.length === 0 ? ( ) : ( filtered.map((u) => { const cor = colorFor ? colorFor(u.name) : '#6366f1'; const statusColor = u.status === 'ativo' ? '#10b981' : '#ef4444'; return (
{/* ID */}
{u.code}
{/* Avatar + Nome + Cidade-UF */}
{u.fotoUrl ? : }
{u.name}
{cidadeUF(u)}
{/* Telefone + e-mail */}
{u.telefone || '—'}
{u.email || '—'}
{/* Tipo */}
{u.tipo}
{/* Status + ativar/desativar */}
e.stopPropagation()}> setAtivoUsuario(u, v)} /> {u.status === 'ativo' ? 'Ativo' : 'Inativo'}
{/* Ações */}
); }) )}
{drawer && setDrawer(null)} onResultado={(r) => { reload(); setCriado(r); }} onChanged={reload} />} {criado && setCriado(null)} />} {excluir && setExcluir(null)} onDone={reload} />} ); } // Confirmação de exclusão — desvincula o membro da loja (não apaga o Auth global). function ConfirmExcluirUsuario({ user, onClose, onDone }) { const [removendo, setRemovendo] = React.useState(false); const remover = async (close) => { setRemovendo(true); try { await window.API.excluirUsuario(user.id); window.showToast && window.showToast({ tipo: 'sucesso', titulo: 'Usuário removido', descricao: `${user.name} foi desvinculado da loja.` }); onDone && onDone(); if (close) close(); else onClose && onClose(); } catch (e) { window.showToast && window.showToast({ tipo: 'erro', titulo: 'Não foi possível remover', descricao: (e && e.message) || 'Tente novamente.' }); } finally { setRemovendo(false); } }; return ( <> close()} />
remover(close)} />}>
Remover {user.name} da sua loja?
Ele perde o acesso a esta empresa. A conta em si não é apagada (pode pertencer a outras lojas).
); } // Modal de confirmação pós-criação — mostra a senha provisória UMA vez (copiável). function ResultadoUsuario({ info, onClose }) { const copiar = () => { const txt = `E-mail: ${info.email}` + (info.senhaProvisoria ? `\nSenha provisória: ${info.senhaProvisoria}` : ''); try { navigator.clipboard.writeText(txt); window.showToast && window.showToast({ tipo: 'sucesso', titulo: 'Copiado' }); } catch (e) {} }; return ( <>
close()} />}> {info.convidado ? (
Convite enviado para {info.email}
O usuário vai receber um e-mail com um link para criar a senha e acessar. O link expira em 24 horas.
) : (
Entregue estes dados ao usuário. A senha não será exibida de novo.
{info.email}
{info.senhaProvisoria}
)} ); } // Drawer "Novo usuário" — réplica das sub-abas do Perfil (sem Sessões). function NovoUsuarioDrawer({ modo = 'novo', inicial = null, onClose, onResultado, onChanged }) { const ro = modo === 'ver'; // só leitura const ed = modo === 'editar'; const novo = modo === 'novo'; const [tab, setTab] = React.useState('dados'); const [f, setF] = React.useState(() => ({ nomeCompleto: (inicial && (inicial.nomeCompleto || inicial.name || inicial.nome)) || '', name: (inicial && (inicial.name || inicial.nome)) || '', email: (inicial && inicial.email) || '', telefone: (inicial && inicial.telefone) || '', cpf: (inicial && inicial.cpf) || '', papel: 'atendente', cargo: (inicial && inicial.cargo) || '', departamento: (inicial && inicial.departamento) || '', departamentoId: (inicial && inicial.departamentoId != null) ? String(inicial.departamentoId) : '', nascimento: (inicial && inicial.nascimento) || '', endereco: (inicial && inicial.endereco) || '', bio: (inicial && inicial.bio) || '', cidade: (inicial && inicial.cidade) || '', uf: (inicial && inicial.uf) || '', })); const [pw, setPw] = React.useState({ nova: '', conf: '' }); const [salvando, setSalvando] = React.useState(false); // Departamentos reais (p/ o seletor). Best-effort: pré-seleciona pelo nome nos usuários antigos. const [departamentos, setDepartamentos] = React.useState([]); React.useEffect(() => { let alive = true; window.API.getDepartamentos().then((r) => { if (!alive) return; const ds = (r.departamentos || []).filter((d) => d.ativo !== false); setDepartamentos(ds); setF((p) => { if (p.departamentoId || !p.departamento) return p; const m = ds.find((d) => (d.nome || '').toLowerCase() === p.departamento.toLowerCase()); return m ? { ...p, departamentoId: String(m.id) } : p; }); }).catch(() => {}); return () => { alive = false; }; }, []); const setDepartamento = (id) => { const d = departamentos.find((x) => String(x.id) === String(id)); setF((p) => ({ ...p, departamentoId: id, departamento: d ? d.nome : '' })); }; const [prefs, setPrefs] = React.useState({ tema: 'light', densidade: 'regular', notifNovaMensagem: true, notifTransferida: true, notifAguardando: true, notifResumoEmail: false, notifPlataforma: false }); const set = (k, v) => { if (ro) return; setF((p) => ({ ...p, [k]: v })); }; const setPwK = (k, v) => setPw((p) => ({ ...p, [k]: v })); const setPref = (k, v) => { if (ro) return; setPrefs((p) => ({ ...p, [k]: v })); }; const maskData = (v) => { const n = (v || '').replace(/\D/g, '').slice(0, 8); if (n.length <= 2) return n; if (n.length <= 4) return `${n.slice(0, 2)}/${n.slice(2)}`; return `${n.slice(0, 2)}/${n.slice(2, 4)}/${n.slice(4)}`; }; const initials = (n) => (n || '?').split(' ').filter(Boolean).slice(0, 2).map((s) => s[0]).join('').toUpperCase() || 'NU'; const [foto, setFoto] = React.useState(() => (inicial && inicial.fotoUrl) || ''); // preview (URL salva ou data URL local) const [fotoFile, setFotoFile] = React.useState(null); // arquivo a subir (se trocou) const [fotoRemovida, setFotoRemovida] = React.useState(false); const fileRef = React.useRef(null); const escolherFoto = () => { if (!ro) fileRef.current && fileRef.current.click(); }; const enviarFoto = (file) => { if (!file) return; setFotoFile(file); setFotoRemovida(false); const r = new FileReader(); r.onload = () => setFoto(r.result); r.readAsDataURL(file); }; const removerFoto = () => { setFoto(''); setFotoFile(null); setFotoRemovida(true); }; const EmailInput = window.EmailInput || ((p) => ); const PhoneInput = window.PhoneInput || ((p) => p.onChange && p.onChange(e.target.value)} />); const CpfInput = window.CpfInput || ((p) => p.onChange && p.onChange(e.target.value)} placeholder="000.000.000-00" />); const displayName = f.nomeCompleto || f.name || (novo ? 'Novo usuário' : 'Usuário'); const titulo = novo ? 'Novo usuário' : ed ? 'Editar usuário' : 'Usuário'; const subt = novo ? 'Cadastre um membro com acesso à loja' : ed ? 'Atualize os dados do membro' : 'Detalhes do membro'; const tabs = [ { id: 'dados', label: 'Dados pessoais', icon: 'user' }, { id: 'seg', label: 'Segurança', icon: 'shield' }, { id: 'pref', label: 'Preferências', icon: 'settings' }, ]; // Obrigatórios: nome, apelido, e-mail, telefone e CPF. const obrigatorios = [ ['nomeCompleto', 'o nome completo'], ['name', 'como prefere ser chamado(a)'], ['email', 'o e-mail'], ['telefone', 'o telefone'], ['cpf', 'o CPF'], ]; const validar = () => { const falta = obrigatorios.find(([k]) => !(f[k] || '').trim()); if (falta) { setTab('dados'); window.showToast && window.showToast({ tipo: 'aviso', titulo: 'Campo obrigatório', descricao: `Informe ${falta[1]}.` }); return false; } return true; }; const criar = async (close) => { if (!validar()) return; setSalvando(true); try { const r = await window.API.criarUsuario({ nomeCompleto: f.nomeCompleto, name: f.name, email: f.email, telefone: f.telefone, cpf: f.cpf, cargo: f.cargo, papel: f.papel, departamento: f.departamento, departamentoId: f.departamentoId ? Number(f.departamentoId) : null, nascimento: f.nascimento, endereco: f.endereco, bio: f.bio, cidade: f.cidade, uf: f.uf, }); if (fotoFile && r.userId) { try { await window.API.uploadFotoUsuario(r.userId, fotoFile); } catch (e) {} } window.showToast && window.showToast({ tipo: 'sucesso', titulo: 'Convite enviado', descricao: 'O usuário vai receber um e-mail para criar a senha e acessar.' }); onResultado && onResultado(r); if (close) close(); else onClose && onClose(); } catch (e) { window.showToast && window.showToast({ tipo: 'erro', titulo: 'Não foi possível criar', descricao: (e && e.message) || 'Tente novamente.' }); } finally { setSalvando(false); } }; const salvarEdicao = async (close) => { if (!validar()) return; setSalvando(true); try { await window.API.editarUsuario(inicial.id, { nomeCompleto: f.nomeCompleto, name: f.name, telefone: f.telefone, cpf: f.cpf, cargo: f.cargo, departamento: f.departamento, departamentoId: f.departamentoId ? Number(f.departamentoId) : null, nascimento: f.nascimento, endereco: f.endereco, bio: f.bio, cidade: f.cidade, uf: f.uf, removerFoto: fotoRemovida, }); if (fotoFile) { try { await window.API.uploadFotoUsuario(inicial.id, fotoFile); } catch (e) {} } window.showToast && window.showToast({ tipo: 'sucesso', titulo: 'Usuário atualizado', descricao: 'Alterações salvas.' }); onChanged && onChanged(); if (close) close(); else onClose && onClose(); } catch (e) { window.showToast && window.showToast({ tipo: 'erro', titulo: 'Não foi possível salvar', descricao: (e && e.message) || 'Tente novamente.' }); } finally { setSalvando(false); } }; const resetar = async () => { setSalvando(true); try { const r = await window.API.resetSenhaUsuario(inicial.id); onResultado && onResultado(r); // mostra a nova senha no modal } catch (e) { window.showToast && window.showToast({ tipo: 'erro', titulo: 'Não foi possível resetar', descricao: (e && e.message) || 'Tente novamente.' }); } finally { setSalvando(false); } }; const footer = ro ? undefined : (close) => <>
(novo ? criar(close) : salvarEdicao(close))} />; return ( {/* input de arquivo (oculto) — alimenta a pré-visualização da foto */} { const file = e.target.files && e.target.files[0]; e.target.value = ''; enviarFoto(file); }} /> {/* cabeçalho do membro */}
{foto ? : initials(displayName)}
{!ro && }
{displayName}
{f.email || 'Preencha os dados abaixo · campos com * são obrigatórios'}
{/* sub-abas */}
{tabs.map((t) =>
setTab(t.id)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 0', fontSize: 'var(--type-sm)', fontWeight: tab === t.id ? 600 : 500, color: tab === t.id ? 'var(--text)' : 'var(--text-muted)', borderBottom: tab === t.id ? '2px solid var(--accent)' : '2px solid transparent', marginBottom: -1, cursor: 'pointer' }}> {t.label}
)}
{tab === 'dados' && (
{/* Foto de perfil — avatar + carregar/trocar/remover (preview local) */}
{foto ? : initials(displayName)}
{!ro && }
Foto de perfil
PNG, JPG ou WebP · até 2MB
{!ro &&
}
set('nomeCompleto', e.target.value)} placeholder="Ex: Mariana Sousa" />
set('name', e.target.value)} placeholder="Ex: Mari" />
set('email', typeof v === 'string' ? v : (v && v.target ? v.target.value : ''))} />
set('telefone', v)} />
set('cpf', v)} />
{novo ? ( ) : ( )}
Vendedor acessa a tela de atendente.
set('cargo', e.target.value)} />
{ro ? ( ) : ( )}
set('nascimento', maskData(e.target.value))} inputMode="numeric" maxLength={10} placeholder="dd/mm/aaaa" />
set('endereco', e.target.value)} />
set('cidade', e.target.value)} placeholder="Ex: Fortaleza" />
set('uf', e.target.value.toUpperCase().replace(/[^A-Z]/g, '').slice(0, 2))} placeholder="CE" />