// super.jsx — Super Admin screens function SuperDashboard() { const [loading, setLoading] = React.useState(true); React.useEffect(() => setLoading(false), []); return (
{loading ? Array.from({ length: 4 }).map((_, i) => (
)) : <> }
2 alertas críticos
Biofarma IBLATU — pagamento atrasado há 5 dias
Iguabela Beleza — webhook Instagram falhou (504)
Crescimento de clientes · 12 meses
{loading ? (
) : (
{[8,12,15,18,22,25,28,32,35,38,40,42].map((v,i)=>(
{['J','F','M','A','M','J','J','A','S','O','N','D'][i]}
))}
)}
Top 5 por volume
{loading ? Array.from({ length: 5 }).map((_, i) => (
)) : TENANTS.slice(0,5).sort((a,b)=>b.conv-a.conv).map((t,i)=>(
{i+1} {t.name} {t.conv.toLocaleString('pt-BR')}
))}
); } function ClientDrawer({ initial, onClose, onSave, onDelete }) { const isEdit = !!initial; const blank = { type: 'pj', // PJ razao: '', fantasia: '', cnpj: '', ie: '', segment: 'Beleza & Estética', // PF nome: '', cpf: '', rg: '', birth: '', // contato email: '', phone: '', whatsapp: '', // endereço cep: '', address: '', city: '', uf: '', // responsável respName: '', respRole: 'Sócio', respEmail: '', respPhone: '', // plano plan: 'Pro', billingCycle: 'mensal', mrr: 397, start: new Date().toLocaleDateString('pt-BR'), renew: '', discount: 0, // pagamento paymentMethod: 'cartao', cardLast: '', dueDay: 5, // limites & customizações convLimit: 2000, userLimit: 5, channels: ['whatsapp','instagram','facebook'], aiTokens: 1000000, // acesso subdomain: '', adminEmail: '', sendCredentials: true, force2fa: false, // operação notes: '', tags: [], status: 'ativo', conv: 0, }; const [f, setF] = React.useState(() => initial ? { ...blank, ...initial } : blank); const [tab, setTab] = React.useState('dados'); const [confirmDel, setConfirmDel] = React.useState(false); const [delClosing, setDelClosing] = React.useState(false); const drawerClose = React.useRef(null); const set = (k,v) => setF(p => ({...p, [k]:v})); const toggle = (k, val) => setF(p => ({...p, [k]: p[k].includes(val) ? p[k].filter(x=>x!==val) : [...p[k], val]})); const tabs = [ { id:'dados', label:'Dados', icon:'card-id' }, { id:'contato', label:'Contato & Endereço', icon:'phone' }, { id:'plano', label:'Plano', icon:'wallet' }, { id:'pagamento', label:'Pagamento', icon:'wallet' }, { id:'acesso', label:'Acesso', icon:'shield' }, { id:'operacao', label:'Operação', icon:'settings' }, ]; const planOpts = (typeof PLANS !== 'undefined' ? PLANS : [{name:'Starter', price:197},{name:'Pro', price:397},{name:'Business', price:897}]); const handleSave = () => { const displayName = f.type === 'pj' ? (f.fantasia || f.razao) : f.nome; if (!displayName) { setTab('dados'); return; } const member = { ...f, id: f.id || ('c' + Date.now().toString(36)), name: displayName, mrr: Number(f.mrr) || 0, conv: Number(f.conv) || 0, }; onSave(member); }; const headColor = colorFor(f.fantasia || f.razao || f.nome || 'Cliente'); return ( {initials(f.fantasia || f.razao || f.nome || 'CL')}
} footer={(close) => { drawerClose.current = close; return <> {isEdit && setConfirmDel(true)} />}
{!isEdit && close(() => { handleSave(); window.showToast({ tipo:'sucesso', titulo:'Boas-vindas enviadas', descricao:'Cliente cadastrado e e-mail de boas-vindas enviado.', duracao:4000 }); })} />} close(() => { handleSave(); window.showToast(isEdit ? { tipo:'sucesso', titulo:'Alterações salvas', descricao:'As alterações do cliente foram salvas.', duracao:4000 } : { tipo:'sucesso', titulo:'Cliente criado!', descricao:'Novo cliente cadastrado com sucesso.', duracao:4000 }); })} /> ; }} >
{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:'default'}}> {t.label}
))}
{tab==='dados' && (
{[['pj','Pessoa Jurídica','CNPJ, razão social, IE'],['pf','Pessoa Física','CPF, RG, nascimento']].map(([id,l,d])=>{ const on = f.type===id; return ( ); })}
{f.type==='pj' ? ( <>
set('razao',e.target.value)} placeholder="Iguabela Beleza Comércio Ltda"/>
set('fantasia',e.target.value)} placeholder="Iguabela Beleza"/>
set('cnpj',v)}/>
set('ie',e.target.value)} placeholder="Isento"/>
) : ( <>
set('nome',e.target.value)}/>
set('birth',v)}/>
set('cpf',v)}/>
set('rg',e.target.value)}/>
)}
A IA pode preencher automaticamente os dados via {f.type==='pj'?'CNPJ':'CPF'} se a integração estiver ativa.
)} {tab==='contato' && (
set('email',v)}/>
set('phone',v)}/>
set('whatsapp',v)}/>
Endereço
set('cep',v)} onResolve={(r)=>{ set('address', `${r.logradouro}, ${r.bairro}`); set('city', r.cidade); set('uf', r.uf); }}/>
set('address',e.target.value)}/>
set('city',e.target.value)}/>
set('uf',v)}/>
Responsável / Contato comercial
set('respName',e.target.value)}/>
set('respEmail',v)}/>
set('respPhone',v)}/>
)} {tab==='plano' && (
{planOpts.map((p)=>{ const on = f.plan===p.name; return (
set('mrr',n)}/>
set('discount',e.target.value)}/>
set('start',v)}/>
set('renew',v)}/>
Limites operacionais
set('convLimit',e.target.value)}/>
set('userLimit',e.target.value)}/>
set('aiTokens',e.target.value)}/>
{[['whatsapp','WhatsApp'],['instagram','Instagram'],['facebook','Facebook']].map(([ic,l])=>{ const on = f.channels.includes(ic); return ( ); })}
)} {tab==='pagamento' && (
{[['cartao','Cartão','wallet'],['pix','Pix','dollar'],['boleto','Boleto','file'],['transferencia','Transferência','bank']].map(([id,l,ic])=>{ const on = f.paymentMethod===id; return ( ); })}
{f.paymentMethod==='cartao' && (
set('cardLast',e.target.value)} placeholder="••• •••• •••• 4242" maxLength={4}/>
set('dueDay',e.target.value)} min={1} max={28}/>
)} {f.paymentMethod!=='cartao' && (
set('dueDay',e.target.value)} min={1} max={28} style={{maxWidth:120}}/>
)}
Resumo financeiro
Plano
{f.plan}
Valor mensal
{formatBRL(f.mrr)}
Desconto
{f.discount}%
Total mensal
R$ {(Number(f.mrr) * (1 - f.discount/100)).toFixed(2)}
)} {tab==='acesso' && (
set('subdomain',e.target.value.toLowerCase().replace(/[^a-z0-9-]/g,''))} placeholder="iguabela" style={{borderTopRightRadius:0, borderBottomRightRadius:0, borderRight:'none'}}/> .atende.ia
set('adminEmail',v)}/>
{[['trial','Trial 14d'],['ativo','Ativo'],['pendente','Pendente'],['inativo','Inativo']].map(([id,l])=>{ const on = f.status===id; return ( ); })}
)} {tab==='operacao' && (
{['VIP','Indicação','Onboarding','Caso de sucesso','Risco churn','Multi-loja','Beta tester'].map(tg=>{ const on = f.tags.includes(tg); return ( ); })}