// finance.jsx — Receitas e Despesas (módulo financeiro) // Compartilha: KPI cards, barra de filtros por período, lista de lançamentos // e drawer "Nova Entrada". (function () { // ---------- Catálogos compartilhados ---------- const CONTAS = [ 'Carteira', 'Conta Corrente Itaú', 'Conta Corrente BB', 'Caixa Loja', 'Cofre', 'Mercado Pago']; const FORMAS_PAGAMENTO = [ 'Dinheiro', 'PIX', 'Cartão de Débito', 'Cartão de Crédito', 'Boleto', 'Transferência', 'Carnê']; // Formas que abrem o parcelamento (divide o valor líquido em N vezes). const FORMAS_PARCELAVEIS = ['Boleto', 'Carnê', 'Cartão de Crédito']; const FUNCIONARIOS = [ 'Karla Zambelly', 'Magno Vieira', 'Paulo Henrique', 'Francisco Junior', 'Carlos Endwer']; const CATEGORIES_RECEITAS = [ 'Venda de Serviço', 'Venda de Produto', 'Pacote / Assinatura', 'Comissão', 'Curso / Treinamento', 'Outras Receitas']; const CATEGORIES_DESPESAS = [ 'Aluguel', 'Fornecedor', 'Folha de Pagamento', 'Energia', 'Internet', 'Marketing', 'Materiais', 'Impostos', 'Pró-labore', 'Manutenção', 'Outras Despesas']; const TIPOS = [ { id: 'unica', label: 'Entrada Única' }, { id: 'recorrente', label: 'Recorrente' }, { id: 'carne', label: 'Carnê (parcelado)' }]; const STATUS_LIST = [ { id: 'aberto', label: 'Em aberto', color: '#1d4ed8', dot: '#3b82f6' }, { id: 'paga', label: 'Paga', color: '#047857', dot: '#10b981' }, { id: 'vence-hoje', label: 'Hoje', color: '#b45309', dot: '#f59e0b' }, { id: 'atraso', label: 'Atrasada', color: '#b91c1c', dot: '#ef4444' }]; // ---------- Usuário logado (exibido na sidebar) ---------- const CURRENT_USER = 'Magnno Vieira'; // ---------- Catálogo de serviços / produtos por CATEGORIA ---------- const CATALOGO_RECEITAS = { 'Venda de Serviço': ['Corte de Cabelo', 'Coloração', 'Escova / Hidratação', 'Manicure & Pedicure', 'Limpeza de Pele', 'Drenagem Linfática'], 'Venda de Produto': ['Shampoo Profissional', 'Máscara Hidratante', 'Kit Linha Premium', 'Óleo de Tratamento', 'Esmalte em Gel'], 'Pacote / Assinatura': ['Pacote Noiva', 'Pacote Spa Day', 'Assinatura Mensal', 'Plano Trimestral'], 'Comissão': ['Comissão de Indicação', 'Comissão de Parceria'], 'Curso / Treinamento': ['Workshop de Estética', 'Curso de Maquiagem', 'Mentoria'], 'Outras Receitas': [] }; const CATALOGO_DESPESAS = { 'Aluguel': ['Aluguel do Salão', 'Aluguel de Equipamento'], 'Fornecedor': ['Fornecedor de Cosméticos', 'Fornecedor de Descartáveis'], 'Folha de Pagamento': ['Salário', 'Adiantamento', 'Férias'], 'Energia': ['Conta de Luz'], 'Internet': ['Plano de Internet', 'Telefonia'], 'Marketing': ['Tráfego Pago', 'Material Gráfico', 'Influenciador'], 'Materiais': ['Material de Consumo', 'Material de Limpeza'], 'Impostos': ['Simples Nacional', 'ISS', 'INSS'], 'Pró-labore': ['Pró-labore Sócios'], 'Manutenção': ['Manutenção de Equipamento', 'Reforma'], 'Outras Despesas': [] }; // ---------- Mock de lançamentos ---------- // Hoje é 27/05/2026 — montamos status realistas em torno disso. const TODAY = '27/05/2026'; const MOCK_RECEITAS = [ { codigo: 'RCB-88451', cliente: 'Cícera Vanderlânia da Silva Paz', funcionario: 'Karla Zambelly', categoria: 'Pacote / Assinatura', conta: 'Conta Corrente Itaú', tipo: 'carne', status: 'atraso', venc: '27/03/2026', valor: 426.32, parcAtual: 0, parcTotal: 4, forma: 'Carnê', desc: 'Pacote Noiva — entrada' }, { codigo: 'RCB-88452', cliente: 'Roberto Lima Advocacia', funcionario: 'Paulo Henrique', categoria: 'Venda de Serviço', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'aberto', venc: '02/06/2026', valor: 1850.00, forma: 'Boleto', desc: 'Consultoria de marca' }, { codigo: 'RCB-88453', cliente: 'Cesar Veículos', funcionario: 'Magno Vieira', categoria: 'Venda de Serviço', conta: 'Mercado Pago', tipo: 'unica', status: 'paga', venc: '12/05/2026', valor: 980.00, forma: 'PIX', desc: 'Pacote de marketing digital' }, { codigo: 'RCB-88454', cliente: 'Patrícia Furtado', funcionario: 'Karla Zambelly', categoria: 'Venda de Serviço', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'vence-hoje', venc: TODAY, valor: 320.00, forma: 'PIX', desc: 'Limpeza de pele profunda' }, { codigo: 'RCB-88455', cliente: 'Júlia Mendes', funcionario: 'Francisco Junior', categoria: 'Pacote / Assinatura', conta: 'Conta Corrente BB', tipo: 'carne', status: 'aberto', venc: '05/06/2026', valor: 540.00, parcAtual: 2, parcTotal: 5, forma: 'Carnê', desc: 'Microagulhamento — 3ª parcela' }, { codigo: 'RCB-88456', cliente: 'Bruno Aragão Imóveis', funcionario: 'Paulo Henrique', categoria: 'Venda de Serviço', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'paga', venc: '20/05/2026', valor: 4500.00, forma: 'Transferência', desc: 'Consultoria + plano anual' }, { codigo: 'RCB-88457', cliente: 'Fátima Coelho — Coelho Modas', funcionario: 'Magno Vieira', categoria: 'Venda de Produto', conta: 'Carteira', tipo: 'unica', status: 'atraso', venc: '15/04/2026', valor: 286.40, forma: 'Dinheiro', desc: 'Kit produtos linha premium' }, { codigo: 'RCB-88458', cliente: 'Iany Maia — Casa das Lentes', funcionario: 'Karla Zambelly', categoria: 'Pacote / Assinatura', conta: 'Mercado Pago', tipo: 'carne', status: 'paga', venc: '10/05/2026', valor: 778.00, parcAtual: 2, parcTotal: 4, forma: 'Carnê', desc: 'Pacote Drenagem — 2ª parcela' }, { codigo: 'RCB-88459', cliente: 'Letícia Maranhão Studio', funcionario: 'Francisco Junior', categoria: 'Curso / Treinamento', conta: 'Conta Corrente BB', tipo: 'unica', status: 'vence-hoje', venc: TODAY, valor: 297.00, forma: 'Boleto', desc: 'Workshop estética 2026' }, { codigo: 'RCB-88460', cliente: 'Alex Soares — Construma', funcionario: 'Paulo Henrique', categoria: 'Venda de Serviço', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'aberto', venc: '14/06/2026', valor: 5500.00, forma: 'Boleto', desc: 'Pacote anual de gestão' }, { codigo: 'RCB-88461', cliente: 'Talita Souto Acessórios', funcionario: 'Magno Vieira', categoria: 'Venda de Produto', conta: 'Carteira', tipo: 'unica', status: 'paga', venc: '24/05/2026', valor: 180.00, forma: 'PIX', desc: 'Repasse comissão fornecedor' }, { codigo: 'RCB-88462', cliente: 'Henrique Castro Modas', funcionario: 'Karla Zambelly', categoria: 'Comissão', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'aberto', venc: '30/05/2026', valor: 420.00, forma: 'PIX', desc: 'Comissão de indicação' }, { codigo: 'RCB-88463', cliente: 'Pedro Mafra Distribuidora', funcionario: 'Paulo Henrique', categoria: 'Venda de Serviço', conta: 'Conta Corrente BB', tipo: 'unica', status: 'paga', venc: '18/05/2026', valor: 2100.00, forma: 'Transferência', desc: 'Reestruturação de catálogo' }, { codigo: 'RCB-88464', cliente: 'Sueline Barros — Escola Modelo', funcionario: 'Francisco Junior', categoria: 'Pacote / Assinatura', conta: 'Conta Corrente Itaú', tipo: 'carne', status: 'atraso', venc: '20/04/2026', valor: 389.00, parcAtual: 1, parcTotal: 6, forma: 'Carnê', desc: 'Pacote Spa Day — 2ª parcela' }, { codigo: 'RCB-88465', cliente: 'Marcela Tavares Beauty', funcionario: 'Karla Zambelly', categoria: 'Venda de Serviço', conta: 'Mercado Pago', tipo: 'unica', status: 'aberto', venc: '08/06/2026', valor: 720.00, forma: 'Cartão de Crédito', desc: 'Pacote noiva — sessão extra' }]; const MOCK_DESPESAS = [ { codigo: 'DSP-10101', cliente: 'Imobiliária Centro', funcionario: '', categoria: 'Aluguel', conta: 'Conta Corrente Itaú', tipo: 'recorrente', status: 'aberto', venc: '05/06/2026', valor: 3800.00, forma: 'Boleto', desc: 'Aluguel sala comercial — junho/2026' }, { codigo: 'DSP-10102', cliente: 'Energisa Ceará', funcionario: '', categoria: 'Energia', conta: 'Conta Corrente Itaú', tipo: 'recorrente', status: 'vence-hoje', venc: TODAY, valor: 612.40, forma: 'Boleto', desc: 'Conta de energia — 05/2026' }, { codigo: 'DSP-10103', cliente: 'Vivo Empresas', funcionario: '', categoria: 'Internet', conta: 'Conta Corrente BB', tipo: 'recorrente', status: 'paga', venc: '15/05/2026', valor: 289.90, forma: 'Boleto', desc: 'Internet fibra 500MB — 05/2026' }, { codigo: 'DSP-10104', cliente: 'Folha Maio 2026', funcionario: 'Karla Zambelly', categoria: 'Folha de Pagamento', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'paga', venc: '05/05/2026', valor: 4200.00, forma: 'Transferência', desc: 'Salário + benefícios' }, { codigo: 'DSP-10105', cliente: 'Folha Maio 2026', funcionario: 'Magno Vieira', categoria: 'Folha de Pagamento', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'paga', venc: '05/05/2026', valor: 3100.00, forma: 'Transferência', desc: 'Salário + comissão maio' }, { codigo: 'DSP-10106', cliente: 'Fornecedor Cosmédica', funcionario: '', categoria: 'Fornecedor', conta: 'Conta Corrente BB', tipo: 'unica', status: 'aberto', venc: '10/06/2026', valor: 1860.50, forma: 'Boleto', desc: 'Reposição linha estética' }, { codigo: 'DSP-10107', cliente: 'Google Ads', funcionario: '', categoria: 'Marketing', conta: 'Conta Corrente Itaú', tipo: 'recorrente', status: 'paga', venc: '20/05/2026', valor: 480.00, forma: 'Cartão de Crédito', desc: 'Campanhas Maio 2026' }, { codigo: 'DSP-10108', cliente: 'Meta Ads', funcionario: '', categoria: 'Marketing', conta: 'Conta Corrente Itaú', tipo: 'recorrente', status: 'paga', venc: '20/05/2026', valor: 360.00, forma: 'Cartão de Crédito', desc: 'Instagram + Facebook Ads' }, { codigo: 'DSP-10109', cliente: 'Prefeitura de Fortaleza', funcionario: '', categoria: 'Impostos', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'atraso', venc: '15/04/2026', valor: 920.00, forma: 'Boleto', desc: 'ISS competência 03/2026' }, { codigo: 'DSP-10110', cliente: 'Contador Silva & Associados', funcionario: '', categoria: 'Pró-labore', conta: 'Conta Corrente BB', tipo: 'recorrente', status: 'aberto', venc: '10/06/2026', valor: 690.00, forma: 'PIX', desc: 'Honorários contábeis junho' }, { codigo: 'DSP-10111', cliente: 'AR Manutenção', funcionario: '', categoria: 'Manutenção', conta: 'Carteira', tipo: 'unica', status: 'paga', venc: '12/05/2026', valor: 240.00, forma: 'Dinheiro', desc: 'Higienização ar-condicionado' }, { codigo: 'DSP-10112', cliente: 'Distribuidora Bella Pele', funcionario: '', categoria: 'Fornecedor', conta: 'Conta Corrente BB', tipo: 'unica', status: 'aberto', venc: '03/06/2026', valor: 1245.80, forma: 'Boleto', desc: 'Produtos consumíveis' }, { codigo: 'DSP-10113', cliente: 'Folha Maio 2026', funcionario: 'Francisco Junior', categoria: 'Folha de Pagamento', conta: 'Conta Corrente Itaú', tipo: 'unica', status: 'paga', venc: '05/05/2026', valor: 2400.00, forma: 'Transferência', desc: 'Salário maio' }, { codigo: 'DSP-10114', cliente: 'Tarifa bancária Itaú', funcionario: '', categoria: 'Outras Despesas', conta: 'Conta Corrente Itaú', tipo: 'recorrente', status: 'paga', venc: '01/05/2026', valor: 89.90, forma: 'Transferência', desc: 'Pacote PJ' }, { codigo: 'DSP-10115', cliente: 'Materiais de Escritório', funcionario: '', categoria: 'Materiais', conta: 'Carteira', tipo: 'unica', status: 'vence-hoje', venc: TODAY, valor: 138.50, forma: 'Cartão de Débito', desc: 'Reposição papelaria' }]; // ---------- Helpers ---------- function fmtBRL(v) { return 'R$ ' + (Number(v) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } function fmtBRLcompact(v) { const n = Number(v) || 0; if (n >= 1_000_000) return 'R$ ' + (n / 1_000_000).toFixed(1).replace('.', ',') + ' Mi'; if (n >= 10_000) return 'R$ ' + (n / 1_000).toFixed(1).replace('.', ',') + ' mil'; return fmtBRL(n); } // Converte 'dd/mm/yyyy' -> Date function parseBR(s) { if (!s) return null; const [d, m, y] = s.split('/').map(Number); return new Date(y, (m || 1) - 1, d || 1); } // Conversões entre ISO (banco: 'YYYY-MM-DD') e BR ('dd/mm/yyyy') function isoToBR(s) { if (!s) return ''; const p = String(s).slice(0, 10).split('-'); return p.length === 3 ? `${p[2]}/${p[1]}/${p[0]}` : ''; } function brToIso(s) { if (!s) return null; const p = String(s).split('/'); return p.length === 3 ? `${p[2]}-${p[1].padStart(2, '0')}-${p[0].padStart(2, '0')}` : null; } const TODAY_DATE = parseBR(TODAY); function diffDays(a, b) { return Math.round((a - b) / 86400000); } function inRange(itemDate, from, to) { if (!itemDate) return false; if (from && itemDate < from) return false; if (to && itemDate > to) return false; return true; } // Reavalia status vs hoje (em caso de mock de filtro) function effectiveStatus(item) { if (item.status === 'paga') return 'paga'; const d = parseBR(item.venc); if (!d) return item.status; const delta = diffDays(d, TODAY_DATE); if (delta < 0) return 'atraso'; if (delta === 0) return 'vence-hoje'; return 'aberto'; } // ---------- KPI card ---------- const KPI_TONES = { total: { bar: '#a855f7', bg: 'color-mix(in oklab, #a855f7 12%, white)', fg: '#7e22ce' }, aberto: { bar: '#3b82f6', bg: 'color-mix(in oklab, #3b82f6 12%, white)', fg: '#1d4ed8' }, paga: { bar: '#10b981', bg: 'color-mix(in oklab, #10b981 12%, white)', fg: '#047857' }, 'vence-hoje': { bar: '#f59e0b', bg: 'color-mix(in oklab, #f59e0b 16%, white)', fg: '#b45309' }, atraso: { bar: '#ef4444', bg: 'color-mix(in oklab, #ef4444 12%, white)', fg: '#b91c1c' } }; function FinKpiCard({ tone, icon, label, value }) { const t = KPI_TONES[tone] || KPI_TONES.total; return (
{label}
{value}
); } // Skeleton do KPI — mesma estrutura/medidas do FinKpiCard real (só o valor vira bloco). function FinKpiCardSkeleton({ tone, icon, label }) { const t = KPI_TONES[tone] || KPI_TONES.total; return (
{label}
); } // Skeleton da linha — reusa o mesmo grid (.fin-row) e as colunas do real. function FinRowSkeleton({ isReceita }) { return (
CÓDIGO
); } // ---------- Period filter ---------- const PERIOD_OPTIONS = [ { id: 'todos', label: 'TODOS', sub: '', icon: 'check-double' }, { id: 'mes', label: 'MÊS', sub: '', icon: 'calendar' }, { id: '7d', label: '07', sub: 'DIAS', icon: null }, { id: '15d', label: '15', sub: 'DIAS', icon: null }, { id: '30d', label: '30', sub: 'DIAS', icon: null }, { id: 'periodo', label: 'DATA', sub: '', icon: 'calendar' }]; function PeriodFilter({ value, onChange, fromDate, toDate, setFromDate, setToDate }) { const rowRef = React.useRef(null); const btnRefs = React.useRef({}); const [pill, setPill] = React.useState({ x: 0, w: 0, ready: false }); const updatePill = React.useCallback(() => { const row = rowRef.current; const btn = btnRefs.current[value]; if (!row || !btn) {setPill((p) => ({ ...p, ready: false }));return;} const rRect = row.getBoundingClientRect(); const bRect = btn.getBoundingClientRect(); setPill({ x: bRect.left - rRect.left, w: bRect.width, ready: true }); }, [value]); React.useLayoutEffect(() => {updatePill();}, [updatePill]); React.useEffect(() => { const onResize = () => updatePill(); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [updatePill]); return (
); } // ---------- Status pill (compact, on the row) ---------- function StatusPill({ status }) { const map = { aberto: { bg: 'color-mix(in oklab, #3b82f6 14%, white)', fg: '#1d4ed8', label: 'EM ABERTO' }, paga: { bg: 'color-mix(in oklab, #10b981 16%, white)', fg: '#047857', label: 'PAGA' }, 'vence-hoje': { bg: 'color-mix(in oklab, #f59e0b 22%, white)', fg: '#b45309', label: 'HOJE' }, atraso: { bg: 'color-mix(in oklab, #ef4444 18%, white)', fg: '#b91c1c', label: 'ATRASADA' } }; const s = map[status] || map.aberto; return ( {s.label}); } // ---------- Status select (dropdown colorido, usado no drawer) ---------- function StatusSelect({ value, onChange }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); const cur = STATUS_LIST.find((s) => s.id === value) || STATUS_LIST[0]; React.useEffect(() => { if (!open) return; const onDoc = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [open]); return (
{open &&
{STATUS_LIST.map((s) => )}
}
); } // ---------- Main list ---------- function FinanceList({ kind }) { const isReceita = kind === 'receivables'; const { auth } = useStore(); const cfg = { title: isReceita ? 'Receitas' : 'Despesas', subtitle: isReceita ? 'Todas as entradas financeiras · contas a receber' : 'Todas as saídas financeiras · contas a pagar', newLabel: isReceita ? 'Nova receita' : 'Nova despesa', drawerTitle: isReceita ? 'Nova Receita' : 'Nova Despesa', drawerKind: isReceita ? 'entrada' : 'saida', personLabel: isReceita ? 'Cliente / Origem' : 'Fornecedor / Destino', personPh: isReceita ? 'Origem...' : 'Fornecedor...', valueLabel: isReceita ? 'DADOS DO RECEBIMENTO' : 'DADOS DO PAGAMENTO', codePrefix: isReceita ? 'RCB' : 'DSP', categorias: isReceita ? CATEGORIES_RECEITAS : CATEGORIES_DESPESAS, headerIcon: isReceita ? 'arrow-up-right' : 'download', payIcon: 'dollar', payColor: isReceita ? '#10b981' : '#3b82f6' }; const [period, setPeriod] = React.useState('mes'); const [from, setFrom] = React.useState(''); const [to, setTo] = React.useState(''); const [query, setQuery] = React.useState(''); // (items, contasMap e loaded agora vêm dos hooks de cache abaixo — definidos // logo após entradaToRow/skelKey, que eles utilizam.) // API entrada -> linha da UI const entradaToRow = (e) => ({ _id: e.id, codigo: e.codigo, cliente: e.clienteOrigem || '—', funcionario: e.responsavel || '', categoria: e.categoria || '', conta: e.contaNome || '', tipo: e.recorrente ? 'recorrente' : 'unica', status: e.pago ? 'paga' : 'aberto', venc: isoToBR(e.vencimento), valor: e.valor || 0, forma: e.forma || '', desc: e.descricao || '', parcelas: e.parcelas || null, parcTotal: e.parcelas || undefined, parcAtual: e.parcelas ? 0 : undefined, }); const skelKey = 'fin-entradas'; // Mapa de contas (id<->nome) via cache por empresa. const { data: contasMap } = useCachedQuery( ['fin-contas-map'], async () => { const r = await API.getContas(); const byId = {}, byName = {}; (r.contas || []).forEach((c) => { byId[c.id] = c.descricao; byName[(c.descricao || '').toLowerCase()] = c.id; }); return { byId, byName }; }, { empresaId: auth.empresaId, initialData: { byId: {}, byName: {} } }, ); // Lançamentos (entradas/saídas) via cache — a chave inclui o tipo (receita/despesa), // então receita e despesa têm caches separados e não se misturam. const { data: items, setData: setItems, loading: itemsLoading } = useCachedQuery( ['fin-entradas', isReceita ? 'entrada' : 'saida'], async () => { let rows; try { const r = await API.getEntradas(isReceita ? 'entrada' : 'saida'); rows = (r.entradas || []).map(entradaToRow); } catch (e) { rows = []; } // erro -> vazio (igual ao .catch antigo) if (typeof skelRemember === 'function') skelRemember(skelKey, rows.length); return rows; }, { empresaId: auth.empresaId, initialData: [] }, ); const loaded = !itemsLoading; const [showNew, setShowNew] = React.useState(false); const [editItem, setEditItem] = React.useState(null); const [drawerMode, setDrawerMode] = React.useState('new'); // 'new' | 'view' | 'edit' const [confirmPay, setConfirmPay] = React.useState(null); const [faturItem, setFaturItem] = React.useState(null); const [confirmDel, setConfirmDel] = React.useState(null); const [statusFilter, setStatusFilter] = React.useState('todos'); // 'todos' | aberto | paga | vence-hoje | atraso // Lista com status reavaliado const evaluated = React.useMemo(() => items.map((it) => ({ ...it, _status: effectiveStatus(it) })), [items]); // Filtro por período const filtered = React.useMemo(() => { let fromD = null,toD = null; if (period === 'mes') { fromD = new Date(TODAY_DATE.getFullYear(), TODAY_DATE.getMonth(), 1); toD = new Date(TODAY_DATE.getFullYear(), TODAY_DATE.getMonth() + 1, 0); } else if (period === '7d') { fromD = new Date(TODAY_DATE);fromD.setDate(TODAY_DATE.getDate() - 7); toD = new Date(TODAY_DATE);toD.setDate(TODAY_DATE.getDate() + 7); } else if (period === '15d') { fromD = new Date(TODAY_DATE);fromD.setDate(TODAY_DATE.getDate() - 15); toD = new Date(TODAY_DATE);toD.setDate(TODAY_DATE.getDate() + 15); } else if (period === '30d') { fromD = new Date(TODAY_DATE);fromD.setDate(TODAY_DATE.getDate() - 30); toD = new Date(TODAY_DATE);toD.setDate(TODAY_DATE.getDate() + 30); } else if (period === 'periodo') { fromD = from ? new Date(from) : null; toD = to ? new Date(to) : null; } const q = (query || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); return evaluated.filter((it) => { const d = parseBR(it.venc); if (period !== 'todos' && !inRange(d, fromD, toD)) return false; if (statusFilter !== 'todos' && it._status !== statusFilter) return false; if (q) { const hay = (it.cliente + ' ' + it.codigo + ' ' + it.desc + ' ' + it.categoria).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ''); if (!hay.includes(q)) return false; } return true; }); }, [evaluated, period, from, to, query, statusFilter]); // KPIs (sobre filtered) const kpis = React.useMemo(() => { const sum = (arr) => arr.reduce((s, x) => s + (x.valor || 0), 0); return { total: sum(filtered), aberto: sum(filtered.filter((x) => x._status === 'aberto')), paga: sum(filtered.filter((x) => x._status === 'paga')), 'vence-hoje': sum(filtered.filter((x) => x._status === 'vence-hoje')), atraso: sum(filtered.filter((x) => x._status === 'atraso')) }; }, [filtered]); // linha/entry da UI -> DTO da API const rowToDto = (entry) => ({ tipo: cfg.drawerKind, descricao: entry.desc || '', valor: Number(entry.valor) || 0, categoria: entry.categoria || '', contaId: contasMap.byName[(entry.conta || '').toLowerCase()] || null, forma: entry.forma || '', responsavel: entry.funcionario || '', clienteOrigem: entry.cliente || '', recorrente: entry.tipo === 'recorrente', pago: entry.status === 'paga', parcelas: entry.parcelas || null, vencimento: entry.venc ? brToIso(entry.venc) : null, }); const onSave = async (entry) => { const editing = !!(editItem && editItem._id); const nome = isReceita ? 'Receita' : 'Despesa'; try { if (editing) { const r = await API.updateEntrada(editItem._id, rowToDto(entry)); setItems((prev) => prev.map((it) => it._id === editItem._id ? entradaToRow(r.entrada) : it)); } else { const r = await API.createEntrada(rowToDto(entry)); setItems((prev) => [entradaToRow(r.entrada), ...prev]); } window.showToast({ tipo: 'sucesso', titulo: editing ? nome + ' atualizada' : nome + ' criada', descricao: entry.cliente || entry.desc || '' }); } catch (e) { window.showToast({ tipo: 'erro', titulo: 'Falha ao salvar ' + nome.toLowerCase(), descricao: (e && e.message) || 'Tente novamente.' }); } setShowNew(false); setEditItem(null); }; const onPay = async (item, extra) => { const dto = { pago: true }; if (extra && extra.forma) dto.forma = extra.forma; if (extra && extra.conta && contasMap.byName[(extra.conta || '').toLowerCase()]) dto.contaId = contasMap.byName[extra.conta.toLowerCase()]; try { const r = await API.updateEntrada(item._id, dto); setItems((prev) => prev.map((it) => it._id === item._id ? entradaToRow(r.entrada) : it)); window.showToast({ tipo: 'sucesso', titulo: isReceita ? 'Recebimento registrado' : 'Pagamento registrado', descricao: (item.cliente || item.codigo || '') + ' · ' + fmtBRL(item.valor) }); } catch (e) { window.showToast({ tipo: 'erro', titulo: isReceita ? 'Falha ao receber' : 'Falha ao pagar', descricao: (e && e.message) || 'Tente novamente.' }); } setConfirmPay(null); setFaturItem(null); }; const onDelete = async (item) => { try { if (item._id) await API.deleteEntrada(item._id); window.showToast({ tipo: 'sucesso', titulo: 'Lançamento excluído', descricao: item.codigo || '' }); } catch (e) { window.showToast({ tipo: 'erro', titulo: 'Falha ao excluir', descricao: (e && e.message) || 'Tente novamente.' }); } setItems((prev) => prev.filter((it) => it._id !== item._id)); setConfirmDel(null); }; return ( {setEditItem(null);setDrawerMode('new');setShowNew(true);}} /> }> {/* KPI strip */}
{!loaded ? ( [ { tone: 'total', icon: 'reports', label: 'TOTAL' }, { tone: 'aberto', icon: 'reports', label: 'EM ABERTO' }, { tone: 'paga', icon: 'check-circle', label: isReceita ? 'PAGA' : 'PAGO' }, { tone: 'vence-hoje', icon: 'wallet', label: 'VENCE HOJE' }, { tone: 'atraso', icon: 'alert', label: 'EM ATRASO' } ].map((k) => ) ) : ( <> )}
{/* Toolbar: search + period filter + status pills */}
setQuery(e.target.value)} style={{ paddingLeft: 36 }} /> {query && }
Status: {[ { id: 'todos', label: 'Todos', dot: null }, { id: 'aberto', label: 'Em aberto', dot: '#3b82f6' }, { id: 'paga', label: isReceita ? 'Paga' : 'Pago', dot: '#10b981' }, { id: 'vence-hoje', label: 'Vence hoje', dot: '#f59e0b' }, { id: 'atraso', label: 'Em atraso', dot: '#ef4444' }]. map((s) => )}
{filtered.length.toLocaleString('pt-BR')} {filtered.length === 1 ? 'lançamento' : 'lançamentos'}
{/* List */}
CÓDIGO
{isReceita ? 'CLIENTE / ORIGEM' : 'FORNECEDOR / DESTINO'}
VENCIMENTO
TIPO
VALOR
{!loaded ? Array.from({ length: skelCount('fin-entradas', 3) }).map((_, i) => ) : filtered.length === 0 ?
Nenhum lançamento encontrado
Ajuste o período ou cadastre uma nova {isReceita ? 'receita' : 'despesa'}.
: filtered.map((it) => { const stat = it._status; const borderColor = stat === 'atraso' ? '#ef4444' : stat === 'vence-hoje' ? '#f59e0b' : stat === 'paga' ? '#10b981' : '#3b82f6'; const tipoLabel = TIPOS.find((t) => t.id === it.tipo)?.label || it.tipo; const isCarne = it.tipo === 'carne'; return (
{setEditItem(it);setDrawerMode('view');setShowNew(true);}} title="Ver detalhes">
CÓDIGO {it.codigo}
{it.cliente}
{it.categoria}{it.desc ? ' · ' + it.desc : ''}
VENCIMENTO {it.venc}
{isCarne ? 'CARNÊ' : it.tipo === 'recorrente' ? 'RECORRENTE' : 'ÚNICA'}
{isCarne &&
PAGAS: {it.parcAtual || 0} DE {it.parcTotal}
} {!isCarne &&
{it.forma}
}
R$ {(it.valor || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
); }) }
{showNew && {setShowNew(false);setEditItem(null);}} onSave={onSave} /> } {faturItem && setFaturItem(null)} onConfirm={(extra) => onPay(faturItem, extra)} /> } {confirmPay && setConfirmPay(null)} size="sm" footer={<>
}>
{isReceita ? 'Marcar como recebido?' : 'Marcar como pago?'}
{confirmPay.cliente} · {confirmPay.categoria} · Venc. {confirmPay.venc}
} {confirmDel && setConfirmDel(null)} size="sm" footer={<>
}>
Excluir lançamento {confirmDel.codigo}?
Esta ação não pode ser desfeita.
} ); } // ---------- New Entry drawer (form) ---------- // Busca de produto/serviço por nome (autocomplete) — puxa do catálogo (window.API.getProdutos). function ProdutoAutocomplete({ value, onChange, onPick, placeholder }) { const [produtos, setProdutos] = React.useState([]); const [open, setOpen] = React.useState(false); const [query, setQuery] = React.useState(value || ''); const ref = React.useRef(null); React.useEffect(() => { setQuery(value || ''); }, [value]); React.useEffect(() => { let alive = true; if (window.API && window.API.getProdutos) { window.API.getProdutos().then((r) => { if (alive) setProdutos(r.produtos || []); }).catch(() => {}); } return () => { alive = false; }; }, []); React.useEffect(() => { const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, []); const norm = (s) => (s || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, ''); const q = norm(query.trim()); const matches = (q ? produtos.filter((p) => norm(p.nome).includes(q)) : produtos).slice(0, 8); const moeda = (v) => 'R$ ' + Number(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const pick = (p) => { setQuery(p.nome); setOpen(false); onChange && onChange(p.nome); onPick && onPick(p); }; return (
{ setQuery(e.target.value); onChange && onChange(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} /> {open && matches.length > 0 &&
{matches.map((p) => )}
}
); } function NewEntryDrawer({ kind, title, personLabel, personPh, valueSection, categorias, codePrefix, entry, mode = 'new', onClose, onSave }) { const isEntrada = kind === 'entrada'; const today = TODAY; // Converte "DD/MM/YYYY" -> "YYYY-MM-DD" (formato do DateField) const toISO = (d) => { if (!d || typeof d !== 'string') return today; if (d.includes('-')) return d; const p = d.split('/'); return p.length === 3 ? `${p[2]}-${p[1]}-${p[0]}` : today; }; // Modo de visualização (somente leitura) vs edição const [readOnly, setReadOnly] = React.useState(mode === 'view'); const [f, setF] = React.useState(() => { if (entry) { // Preenche TODOS os campos com dados simulados a partir do lançamento const valor = Number(entry.valor) || 0; return { cliente: entry.cliente || '', funcionario: entry.funcionario || CURRENT_USER, status: entry.status || 'aberto', categoria: entry.categoria || '', conta: entry.conta || CONTAS[0], tipo: entry.tipo || 'unica', desc: entry.desc || entry.item || entry.categoria || '', item: entry.item || '', subtotal: entry.subtotal != null ? entry.subtotal : valor, desconto: entry.desconto || 0, acrescimo: entry.acrescimo || 0, forma: entry.forma || FORMAS_PAGAMENTO[0], parcelas: entry.parcTotal || 1, emissao: toISO(entry.emissao || entry.venc), venc: toISO(entry.venc), competencia: toISO(entry.competencia || entry.venc), obs: entry.obs || '' }; } return { cliente: '', funcionario: CURRENT_USER, status: 'aberto', categoria: '', conta: '', tipo: 'unica', desc: '', item: '', subtotal: 0, desconto: 0, acrescimo: 0, forma: '', parcelas: 1, emissao: today, venc: today, competencia: today, obs: '' }; }); const set = (k, v) => setF((p) => ({ ...p, [k]: v })); // Categorias + catálogo de itens (editáveis no próprio drawer) const [categoriasList, setCategoriasList] = React.useState(categorias); const [catalogo, setCatalogo] = React.useState(isEntrada ? CATALOGO_RECEITAS : CATALOGO_DESPESAS); const [showCatModal, setShowCatModal] = React.useState(false); // Garante que o usuário logado apareça nas opções de funcionário const funcionariosOpts = React.useMemo( () => FUNCIONARIOS.includes(CURRENT_USER) ? FUNCIONARIOS : [CURRENT_USER, ...FUNCIONARIOS], [] ); const addCategoria = (nome) => { const label = (nome || '').trim(); if (!label) return; setCategoriasList((p) => p.includes(label) ? p : [...p, label]); setCatalogo((p) => ({ ...p, [label]: p[label] || [] })); setF((p) => ({ ...p, categoria: label, item: '' })); setShowCatModal(false); window.showToast({ tipo: 'sucesso', titulo: 'Categoria criada', descricao: label }); }; const liquido = (Number(f.subtotal) || 0) - (Number(f.desconto) || 0) + (Number(f.acrescimo) || 0); // Parcelamento (boleto/carnê/cartão): valor da parcela = líquido ÷ parcelas. const isParcelavel = FORMAS_PARCELAVEIS.includes(f.forma); const nParc = Math.max(1, parseInt(f.parcelas, 10) || 1); const valorParcela = isParcelavel ? liquido / nParc : liquido; // Ao escolher um produto/serviço do catálogo, puxa o preço para o subtotal. const pickProduto = (prod) => setF((p) => ({ ...p, item: prod.nome, subtotal: Number(prod.preco) || 0, desc: (p.desc && p.desc.trim()) ? p.desc : prod.nome, })); const code = React.useMemo( () => entry?.codigo ? entry.codigo : codePrefix + '-' + Math.floor(10000 + Math.random() * 90000), [entry, codePrefix] ); const valid = f.cliente.trim().length >= 2 && liquido > 0; const drawerTitle = mode === 'new' ? title : readOnly ? isEntrada ? 'Detalhes da Receita' : 'Detalhes da Despesa' : isEntrada ? 'Editar Receita' : 'Editar Despesa'; // Cor do código interno: nasce cinza (nova) e ganha cor conforme o status salvo const CODE_COLORS = { paga: '#10b981', 'vence-hoje': '#f59e0b', aberto: '#3b82f6', atraso: '#ef4444' }; const codeColor = mode === 'new' ? null : CODE_COLORS[f.status] || null; const codePillStyle = codeColor ? { background: `color-mix(in oklab, ${codeColor} 14%, transparent)`, borderColor: codeColor, color: codeColor } : {}; const handleSave = () => { const item = { cliente: f.cliente, funcionario: f.funcionario, item: f.item, categoria: f.categoria || categorias[0], conta: f.conta || CONTAS[0], tipo: f.tipo, status: f.status, venc: f.venc.includes('-') ? f.venc.split('-').reverse().join('/') : f.venc, valor: liquido, forma: f.forma || FORMAS_PAGAMENTO[0], desc: f.desc, parcelas: isParcelavel && nParc > 1 ? nParc : null, parcTotal: isParcelavel && nParc > 1 ? nParc : undefined, parcAtual: isParcelavel && nParc > 1 ? 0 : undefined }; onSave(item); }; return ( {drawerTitle} } onClose={onClose} width={780} leftHead={null} rightHead={
CÓDIGO {code}
} footer={(close) => readOnly ? <>
setReadOnly(false)} /> : <>
close(handleSave)} /> }>
DADOS PRINCIPAIS
{/* Linha 1 — Cliente */} set('cliente', e.target.value)} placeholder={personPh} /> {/* Linha 2 — Serviço / Produto (busca no catálogo) */} set('item', nome)} onPick={pickProduto} placeholder="Digite para buscar no catálogo..." /> {/* Linha 3 — Categoria + Funcionário */}
{/* Linha 4 — Status */} set('status', v)} /> set('desc', e.target.value)} placeholder="Descrição..." />
{valueSection}
set('subtotal', v)} /> set('desconto', v)} /> set('acrescimo', v)} />
set('emissao', e.target.value)} /> set('venc', e.target.value)} /> set('competencia', e.target.value)} />
{isParcelavel &&
set('parcelas', Math.max(1, parseInt(e.target.value, 10) || 1))} />
{nParc}× de {'R$ ' + Number(valorParcela || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
}