// team-drawer.jsx — Drawer (80vw) for creating/editing a Team function TeamDrawer({ initial, allMembers, onClose, onSave, onDelete }) { const isEdit = !!initial && !!initial.id; const blank = React.useMemo(() => ({ id: '', teamName: '', responsibleId: '', description: '', region: '', status: 'ativo', color: '#16a34a', meta: 40000, vendido: 0, metaAtend: 200, conv: 35, tmr: 5, commType: '% sobre vendas', commPct: '5%', commBonus: 'R$ 500', channels: ['whatsapp', 'instagram'], funnels: ['Pré-Venda'], memberIds: [], memberMetas: {}, // { [memberId]: { meta, vendido, conv } } notes: '' }), []); const [f, setF] = React.useState(() => { if (initial && initial.id) { const defaultMemberIds = initial.memberIds || allMembers.filter((m) => m.id !== initial.id).slice(0, 3).map((m) => m.id); const defaultMetas = initial.memberMetas || {}; // Fill defaults so existing members get a meta from their own record defaultMemberIds.forEach((id) => { if (!defaultMetas[id]) { const mb = allMembers.find((m) => m.id === id); defaultMetas[id] = { meta: mb?.meta || 15000, vendido: mb?.vendido || 0, conv: 30 }; } }); return { ...blank, ...initial, teamName: initial.teamName || `Equipe ${initial.name?.split(' ')[0] || ''}`, responsibleId: initial.responsibleId || initial.id, description: initial.description || `Equipe responsável por ${(initial.role || '').toLowerCase()} — atende clientes ativos e prospects nos canais conectados.`, memberIds: defaultMemberIds, memberMetas: defaultMetas, color: initial.color || '#16a34a' }; } return 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 [showAddMember, setShowAddMember] = React.useState(false); const [memberSearch, setMemberSearch] = React.useState(''); const [pendingMemberId, setPendingMemberId] = React.useState(''); const [pendingMeta, setPendingMeta] = React.useState({ meta: 15000, vendido: 0, conv: 30 }); const [expandedMemberId, setExpandedMemberId] = React.useState(null); const set = (k, v) => setF((p) => ({ ...p, [k]: v })); const toggleArr = (k, val) => setF((p) => ({ ...p, [k]: p[k].includes(val) ? p[k].filter((x) => x !== val) : [...p[k], val] })); const setMemberMeta = (id, patch) => setF((p) => ({ ...p, memberMetas: { ...p.memberMetas, [id]: { ...(p.memberMetas[id] || { meta: 0, vendido: 0, conv: 0 }), ...patch } } })); const removeMember = (id) => setF((p) => { const mm = { ...p.memberMetas }; delete mm[id]; return { ...p, memberIds: p.memberIds.filter((x) => x !== id), memberMetas: mm }; }); const responsible = allMembers.find((m) => m.id === f.responsibleId); const members = f.memberIds.map((id) => allMembers.find((m) => m.id === id)).filter(Boolean); const norm = (s) => (s || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); const available = allMembers.filter((m) => m.id !== f.responsibleId && !f.memberIds.includes(m.id) && (memberSearch.trim() === '' || norm(m.name).includes(norm(memberSearch))) ); const handleAddMember = () => { if (!pendingMemberId) return; setF((p) => ({ ...p, memberIds: [...p.memberIds, pendingMemberId], memberMetas: { ...p.memberMetas, [pendingMemberId]: { ...pendingMeta } } })); setPendingMemberId(''); setPendingMeta({ meta: 15000, vendido: 0, conv: 30 }); setMemberSearch(''); setShowAddMember(false); }; const handleSave = () => { if (!f.teamName.trim()) { setTab('dados'); return; } if (!f.responsibleId) { setTab('dados'); return; } const out = { ...f, id: f.id || 't' + Date.now().toString(36), name: responsible ? responsible.name : f.teamName, role: responsible ? responsible.role : 'Equipe', email: responsible?.email || '', phone: responsible?.phone || '', meta: Number(f.meta) || 0, vendido: Number(f.vendido) || 0, metaAtend: Number(f.metaAtend) || 0, conv: Number(f.conv) || 0, tmr: Number(f.tmr) || 0 }; onSave(out); window.showToast && window.showToast({ tipo: 'sucesso', titulo: isEdit ? 'Equipe atualizada' : 'Equipe criada', descricao: out.teamName }); }; const valid = f.teamName.trim().length >= 2 && f.responsibleId; const pct = Number(f.meta) > 0 ? Math.round((Number(f.vendido) || 0) / Number(f.meta) * 100) : 0; const COLORS = ['#16a34a', '#0ea5e9', '#a855f7', '#f59e0b', '#ec4899', '#ef4444', '#14b8a6', '#6366f1', '#f97316']; const CHANNELS = [['whatsapp', 'WhatsApp'], ['instagram', 'Instagram'], ['facebook', 'Facebook'], ['mail', 'E-mail']]; const FUNNELS = ['Pré-Venda', 'Pós-Venda', 'Recuperação', 'Indicações', 'Suporte']; const TABS = [ { id: 'dados', label: 'Dados gerais', icon: 'user' }, { id: 'membros', label: 'Membros & Metas', icon: 'team' }, { id: 'canais', label: 'Canais, funis & obs.', icon: 'link' } ]; return ( { drawerClose.current = close; return <> {isEdit && setConfirmDel(true)} />}
close(handleSave)} disabled={!valid} style={{ opacity: valid ? 1 : .5 }} /> ; }}> {/* Header */}
{f.teamName || 'Nova equipe'}
{f.status === 'ativo' ? 'Ativa' : 'Inativa'}
{responsible ? `Responsável: ${responsible.name}` : 'Sem responsável definido'} {members.length > 0 && ` · ${members.length} membro${members.length > 1 ? 's' : ''}`} {' · Meta '} {pct}%
{/* Sub-tabs */}
{TABS.map((t) => { const on = tab === t.id; return (
setTab(t.id)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', fontSize: 'var(--type-sm)', fontWeight: on ? 700 : 500, color: on ? 'var(--accent-700)' : 'var(--text-muted)', borderBottom: on ? '2px solid var(--accent)' : '2px solid transparent', marginBottom: -1, cursor: 'pointer' }}> {t.label}
); })}
{/* === TAB 1: Dados gerais + Responsável === */} {tab === 'dados' &&
set('teamName', e.target.value)} placeholder="Ex: Equipe Comercial" />
set('region', e.target.value)} placeholder="Ex: Fortaleza" />