/* global React, Icon, Button, Badge, Card, brl, PageHead, Toolbar, FooterPager, KpiMini, FormShell, FormSection, FieldLabel, FText, FNum, FDate, FSelect, FCombo, FTextarea, FSwitch, PRODUTOS */ const { useState: usePedState } = React; // ============================================================ // SEED DATA — vazio; dados reais vêm do Supabase // ============================================================ const PEDIDOS_SEED = []; // ── Hook: carrega nomes reais de clientes / salões / distribuidores do Supabase ── function useClientesOpts() { const [opts, setOpts] = React.useState([]); const load = React.useCallback(() => { if (!window.tmSupabase) return; Promise.all([ window.tmSupabase.from('clientes').select('nome').order('nome'), window.tmSupabase.from('saloes').select('nome').order('nome'), window.tmSupabase.from('distribuidores').select('nome').order('nome'), ]).then(results => { const names = results .flatMap(({ data }) => (data || []).map(r => r.nome)) .filter(Boolean) .sort((a, b) => a.localeCompare(b, 'pt-BR')); setOpts([...new Set(names)]); }).catch(() => {}); }, []); React.useEffect(() => { load(); }, [load]); return { opts, reload: load }; } // Vendedores — lidos da listagem viva do CRM (window.TM_VENDEDORES); sem nomes fictícios function getVendedoresOptions() { const live = (typeof window !== "undefined" && window.TM_VENDEDORES) || null; return (live && live.length) ? live.map(v => v.nome) : []; } const LOJAS = ["Matriz · SP","Filial · RJ","Filial · BH","E-commerce","Marketplace"]; const UNIDADES = ["Cosméticos B2B","Cosméticos B2C","Profissional Salão","Linha Barbearia","Marca Própria"]; const LISTAS_PRECO = ["Distribuidor Ouro","Distribuidor Prata","Salão Premium","Salão Padrão","Cliente Final","Promocional · Maio"]; const CONDICOES = ["À vista","30 dias","30/60","30/60/90","Boleto 30/45/60","Boleto à vista","PIX à vista","PIX","Cartão 2×","Cartão 3×","Cartão 6×"]; const CATEGORIAS_FIN = ["Vendas B2B","Vendas B2C","Marketplace","Bonificação","Amostras","Cancelado","Sem categoria"]; const FRETES_CONTA = [ { value: "0", label: "0 - Contratação do Frete por conta do Remetente (CIF)" }, { value: "1", label: "1 - Contratação do Frete por conta do Destinatário (FOB)" }, { value: "2", label: "2 - Contratação por terceiros" }, { value: "3", label: "3 - Transporte próprio por conta do remetente" }, { value: "4", label: "4 - Transporte próprio por conta do destinatário" }, { value: "9", label: "9 - Sem ocorrência de transporte" }, ]; // ============================================================ // Geração automática de número de pedido // ============================================================ function gerarNumPedido() { const d = new Date(); const yy = String(d.getFullYear()).slice(2); const mm = String(d.getMonth() + 1).padStart(2, "0"); const dd = String(d.getDate()).padStart(2, "0"); const rnd = String(Math.floor(Math.random() * 900) + 100); return `PV-${yy}${mm}${dd}-${rnd}`; } // ============================================================ // SearchableSelect — dropdown com filtro por digitação // ============================================================ function SearchableSelect({ label: labelText, hint, value, onChange, options, placeholder, required, onCreateNew }) { const { useState: useSSt, useEffect: useSSe, useRef: useSSr } = React; const [q, setQ] = useSSt(value || ""); const [open, setOpen] = useSSt(false); const ref = useSSr(null); useSSe(() => { setQ(value || ""); }, [value]); useSSe(() => { if (!open) return; const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [open]); const filtered = (options || []) .filter(opt => (opt || "").toLowerCase().includes((q || "").toLowerCase())) .slice(0, 9); const pick = (opt) => { setQ(opt); onChange(opt); setOpen(false); }; const showCreate = onCreateNew && q.length > 1 && filtered.length === 0; return (
{ setQ(e.target.value); onChange(e.target.value); setOpen(true); }} onFocus={() => { if ((options || []).length > 0 || onCreateNew) setOpen(true); }} placeholder={placeholder || "Digite para buscar…"} /> {q && ( { e.preventDefault(); pick(""); }} style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", cursor: "pointer", color: "var(--tm-fg-3)", fontSize: 16, lineHeight: 1, userSelect: "none" }} >× )}
{open && q.length > 0 && (filtered.length > 0 || showCreate) && (
{filtered.map((opt, i) => (
pick(opt)} style={{ padding: "9px 14px", cursor: "pointer", fontSize: 13, color: opt === value ? "var(--tm-brand-champagne)" : "var(--tm-fg-1)", background: opt === value ? "rgba(201,163,107,0.08)" : "transparent", borderBottom: "1px solid var(--tm-line-1)", }}> {opt}
))} {showCreate && (
{ setOpen(false); onCreateNew(q); }} style={{ padding: "10px 14px", cursor: "pointer", fontSize: 13, color: "var(--tm-brand-champagne)", display: "flex", alignItems: "center", gap: 8, background: "rgba(201,163,107,0.06)", }}> Cadastrar "{q}"
)}
)}
); } // ============================================================ // ProdSearchInput — campo de busca de produto inline (tabela de itens) // ============================================================ function ProdSearchInput({ value, onSelect, todos, placeholder }) { const { useState: usePSt, useEffect: usePSe, useRef: usePSr } = React; const [q, setQ] = usePSt(value || ""); const [open, setOpen] = usePSt(false); const ref = usePSr(null); usePSe(() => { setQ(value || ""); }, [value]); usePSe(() => { if (!open) return; const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [open]); const matches = q.trim().length >= 1 ? (todos || []).filter(p => { const sq = q.toLowerCase(); return (p.name||"").toLowerCase().includes(sq) || (p.sku ||"").toLowerCase().includes(sq) || (p.ean ||"").toLowerCase().includes(sq); }).slice(0, 8) : []; return (
{ setQ(e.target.value); setOpen(true); }} onFocus={() => { if (q.trim().length >= 1) setOpen(true); }} /> {open && matches.length > 0 && (
{matches.map((prod, i) => (
{ onSelect(prod); setQ(prod.name); setOpen(false); }} style={{ padding: "9px 12px", cursor: "pointer", display: "flex", alignItems: "center", gap: 10, borderBottom: i < matches.length - 1 ? "1px solid var(--tm-line-1)" : "none", }}> {prod.sku} {prod.name} {prod.linha && ( {prod.linha} )} {prod.temVariacoes ? ( escolher variação ) : prod.venda > 0 && ( R$ {brl(prod.venda)} )}
))}
)}
); } // ============================================================ // PedidoForm — página completa de criação/edição // ============================================================ function PedidoForm({ state, set, onCancel, onSave, onDelete, onPreview }) { const p = state.draft; const isNew = state.mode === "new"; const VENDEDORES = getVendedoresOptions(); const { opts: CLIENTES_OPTS, reload: reloadClientes } = useClientesOpts(); // ── Quick-register client modal ──────────────────────────── const [quickClient, setQuickClient] = usePedState(null); // null or { nome, tipo } const [quickSaving, setQuickSaving] = usePedState(false); const openQuickClient = (nome) => { setQuickClient({ nome: nome || '', tipo: 'cliente', // 'cliente' | 'salao' | 'distribuidor' tipoPessoa: 'PF', cnpj: '', cpf: '', celular: '', email: '', cidade: '', uf: '', ie: '', }); }; const saveQuickClient = async () => { if (!quickClient?.nome?.trim()) { alert('Nome é obrigatório.'); return; } if (!window.tmSupabase) return; setQuickSaving(true); const tableMap = { cliente: 'clientes', salao: 'saloes', distribuidor: 'distribuidores' }; const table = tableMap[quickClient.tipo] || 'clientes'; const isPJ = quickClient.tipoPessoa === 'PJ'; const payload = { nome: quickClient.nome.trim(), tipo_pessoa: quickClient.tipoPessoa, ...(isPJ ? { cnpj: quickClient.cnpj || null } : { cpf: quickClient.cpf || null }), celular: quickClient.celular || null, email: quickClient.email || null, geral_cidade: quickClient.cidade || null, geral_uf: quickClient.uf || null, inscricao_estadual: quickClient.ie || null, situacao: 'Ativo', tipos_contato: quickClient.tipo === 'salao' ? ['Cliente','Salão'] : quickClient.tipo === 'distribuidor' ? ['Distribuidor'] : ['Cliente'], }; if (quickClient.tipo === 'salao') payload.tipo_salao = 'Cabelo'; const { error } = await window.tmSupabase.from(table).insert(payload); setQuickSaving(false); if (error) { alert('Erro ao cadastrar: ' + error.message); return; } set('cli', quickClient.nome.trim()); reloadClientes(); setQuickClient(null); }; // ── Produtos e tabelas de preço carregados do Supabase ────── const todosProds = useProdutosList([]); const todasTabelas = useTabelasPrecoList([]); // ── Variações de produto (Fase 2) ─────────────────────────── const [variacoesPedido, setVariacoesPedido] = usePedState([]); const [varPicker, setVarPicker] = usePedState(null); React.useEffect(() => { if (window.tmDb) window.tmDb.loadVariacoes().then(setVariacoesPedido); }, []); const variacoesDoProduto = (produtoId) => variacoesPedido.filter(v => v.produtoId === produtoId); const listasOpts = todasTabelas.rows.length > 0 ? todasTabelas.rows.filter(t => t.status === "Ativa").map(t => t.nome) : LISTAS_PRECO; // ── Resolve preço a partir da tabela selecionada ──────────── const getPrecoFromTabela = (prod, tabelaNome) => { if (!prod) return 0; const tabela = todasTabelas.rows.find(r => r.nome === tabelaNome); const tipo = (tabela && tabela.tipo) || "Cliente Final"; let preco = prod.venda || 0; if (tipo === "Distribuidor") preco = prod.precoDiv || prod.venda || 0; if (tipo === "Salão") preco = prod.precoSalao || prod.venda || 0; if (tipo === "Promocional") preco = prod.precoPromo || prod.venda || 0; if (tipo === "Personalizada" && tabela) { const pct = parseFloat(String(tabela.desconto || "0").replace("%","")) || 0; preco = (prod.venda || 0) * (1 - pct / 100); } return Math.round(preco * 100) / 100; }; // ── Preenche a linha a partir de uma variação ─────────────── const fillLineFromVariacao = (idx, prodPai, v) => { const preco = getPrecoFromTabela(v, p.listaPreco); const next = items.map((it, i) => i === idx ? { ...it, produtoId: prodPai ? prodPai.id : (v.produtoId || it.produtoId), variacaoId: v.id, sku: v.sku || "", desc: `${prodPai ? prodPai.name : "Produto"} · ${v.nome || ""}`.trim(), un: (prodPai && prodPai.unidade) || it.un || "UN", precoLista: preco || it.precoLista, } : it); set("items", next); }; // ── Auto-fill linha do pedido quando SKU é digitado ───────── const fillItemFromSku = (idx, sku) => { // SKU de uma variação? — preenche direto com a variação const vari = sku ? variacoesPedido.find(v => (v.sku || "") === sku) : null; if (vari) { const prodPai = todosProds.rows.find(r => r.id === vari.produtoId); fillLineFromVariacao(idx, prodPai, vari); return; } const prod = todosProds.rows.find(r => (r.sku || "") === sku); // Produto-vitrine: não preenche pelo SKU do pai — usar a busca p/ escolher variação if (prod && prod.temVariacoes) { setItem(idx, "sku", sku); return; } const preco = prod ? getPrecoFromTabela(prod, p.listaPreco) : 0; const next = items.map((it, i) => i === idx ? { ...it, sku, variacaoId: null, produtoId: prod ? prod.id : it.produtoId, desc: prod ? prod.name : it.desc, un: prod ? (prod.unidade||"UN"): it.un, precoLista: preco || it.precoLista, } : it); set("items", next); }; // ── Auto-fill a partir de um objeto produto (ProdSearchInput) ─ const fillItemWithProd = (idx, prod) => { // Produto com variações → abre o seletor de variação if (prod.temVariacoes) { setVarPicker({ itemIdx: idx, produto: prod }); return; } const preco = getPrecoFromTabela(prod, p.listaPreco); const next = items.map((it, i) => i === idx ? { ...it, produtoId: prod.id || null, variacaoId: null, sku: prod.sku || "", desc: prod.name || "", un: prod.unidade || "UN", precoLista: preco || it.precoLista, } : it); set("items", next); }; // ── Atualiza preços de todos os itens quando tabela muda ──── const refreshAllPrices = () => { const next = items.map(it => { const prod = todosProds.rows.find(r => r.sku === it.sku); if (!prod) return it; return { ...it, precoLista: getPrecoFromTabela(prod, p.listaPreco) }; }); set("items", next); }; // Items helpers ------------------------------------------------ const items = p.items || [{ sku: "", desc: "", un: "UN", qty: "", precoLista: "", descPct: 0 }]; const setItem = (idx, key, value) => { const next = items.map((it, i) => i === idx ? { ...it, [key]: value } : it); set("items", next); }; const addItem = () => set("items", [...items, { sku: "", desc: "", un: "UN", qty: "", precoLista: "", descPct: 0 }]); const removeItem = (idx) => set("items", items.filter((_, i) => i !== idx)); // Sub-tab state (Itens / Comissões) const [tab, setTab] = usePedState("itens"); // Computed totals --------------------------------------------- const numItens = items.filter(i => i.sku || i.desc).length; const somaQtd = items.reduce((s, i) => s + (Number(i.qty) || 0), 0); const subtotal = items.reduce((s, i) => s + (Number(i.qty) || 0) * (Number(i.precoLista) || 0), 0); const descLinha = items.reduce((s, i) => s + (Number(i.qty) || 0) * (Number(i.precoLista) || 0) * ((Number(i.descPct) || 0) / 100), 0); const descExtra = Number(p.descontoExtra) || 0; const outras = Number(p.outrasDespesas) || 0; const frete = Number(p.transp && p.transp.valor) || 0; const impostos = (subtotal - descLinha - descExtra) * 0.18; const totalVenda = subtotal - descLinha - descExtra + outras + frete; const custoTotal = subtotal * 0.42; // simulated COGS for display // Peso bruto calculado a partir dos itens (produto.pesoBruto está em gramas → ÷1000 = kg) const pesoBrutoCalc = Math.round( items.reduce((tot, it) => { const prod = todosProds.rows.find(r => r.sku === it.sku); const g = prod ? (Number(prod.pesoBruto) || 0) : 0; return tot + (Number(it.qty) || 0) * (g / 1000); }, 0) * 100 ) / 100; const pesoBrutoManual = !!(p.transp && p.transp.pesoBrutoManual); // Transportador setter const setTransp = (key, value) => set("transp", { ...(p.transp || {}), [key]: value }); // Parcelas — usamos p.parcelas (editável) quando existe, senão calculamos const parcelasComp = parseParcelas(p.condPag, totalVenda, p.dataVenda); const parcelas = p.parcelas || parcelasComp; const setParcelaField = (i, key, val) => { const base = p.parcelas || parcelasComp; set("parcelas", base.map((par, idx) => idx === i ? { ...par, [key]: val } : par)); }; const removerParcela = (i) => { const base = p.parcelas || parcelasComp; const novo = base.filter((_, idx) => idx !== i); set("parcelas", novo.length ? novo : undefined); }; return (
{varPicker && (
setVarPicker(null)} style={{ position: "fixed", inset: 0, zIndex: 340, background: "rgba(0,0,0,0.65)", display: "flex", alignItems: "center", justifyContent: "center" }}>
e.stopPropagation()} style={{ background: "var(--tm-bg-1)", borderRadius: 14, width: 520, maxHeight: "80vh", border: "1px solid var(--tm-line-1)", boxShadow: "0 24px 64px rgba(0,0,0,0.5)", display: "flex", flexDirection: "column" }}>
Escolher variação
{varPicker.produto.name}
{variacoesDoProduto(varPicker.produto.id).length === 0 ? (
Este produto ainda não tem variações cadastradas.
) : variacoesDoProduto(varPicker.produto.id).map((v, vi) => (
{ fillLineFromVariacao(varPicker.itemIdx, varPicker.produto, v); setVarPicker(null); }} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px", borderRadius: 8, cursor: "pointer", borderBottom: "1px solid var(--tm-line-0)" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--tm-bg-2)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
{v.nome || `Variação ${vi + 1}`}
{[v.tipo, v.sku].filter(Boolean).join(" · ") || "sem SKU"}
{Number(v.est) || 0} un R$ {brl(getPrecoFromTabela(v, p.listaPreco))}
))}
)} ${p.status} · criado em ${p.data}`} isNew={isNew} onCancel={onCancel} onSave={onSave} onDelete={onDelete} extraActions={onPreview ? ( ) : null} > {/* ---------- Dados do cliente ---------- */}
set("cli", v)} options={CLIENTES_OPTS} placeholder="Digite o nome do cliente…" onCreateNew={openQuickClient} /> set("vendedor", v)} options={VENDEDORES} placeholder="Digite o nome do vendedor…" /> set("loja", v)} options={LOJAS} /> set("unidade", v)} options={UNIDADES} />
set("listaPreco", v)} options={listasOpts} />
{/* ---------- Itens / Comissões ---------- */}
setTab("itens")}>Itens do pedido de venda setTab("comissoes")}>Comissões
{tab === "itens" ? ( <>
Descrição i
Código
Un
Quantidade
Preço lista
Desc (%)
Preço un
Preço total
{items.map((it, i) => { if (!it) return null; // guarda contra itens nulos/undefined const precoUn = (Number(it.precoLista) || 0) * (1 - (Number(it.descPct) || 0) / 100); const total = precoUn * (Number(it.qty) || 0); return (
{i + 1}
fillItemWithProd(i, prod)} placeholder="Pesquise por SKU, nome ou EAN…" /> fillItemFromSku(i, e.target.value)} /> setItem(i, "un", e.target.value)} /> setItem(i, "qty", e.target.value)} /> setItem(i, "precoLista", e.target.value)} /> setItem(i, "descPct", e.target.value)} />
{precoUn ? `R$ ${brl(precoUn)}` : ""}
{total ? `R$ ${brl(total)}` : ""}
); })} {items.length === 0 &&
Nenhum item ainda. Clique em "Adicionar outro item" para começar.
}
{p.listaPreco && items.some(it => it.sku) && ( )}
) : ( )} {/* ---------- Totais ---------- */}
set("descontoExtra", v)} /> set("prazoEntrega", v)} /> set("outrasDespesas", v)} />
{/* ---------- Movimentação de estoque ---------- */}
{p.afetaEstoque !== false ? "Baixa de estoque ativada" : "Sem baixa de estoque"}
{p.afetaEstoque !== false ? "As quantidades dos itens serão deduzidas do estoque ao confirmar o pedido." : "Modo informativo — útil para amostras, bonificações ou pedidos externos. O estoque não é alterado."}
set("afetaEstoque", v)} />
{/* ---------- Detalhes da venda ---------- */}
set("num", e.target.value)} />
set("dataVenda", v)} /> set("dataSaida", v)} /> set("dataPrevista", v)} /> set("pedidoCompra", v)} />
{/* ---------- Pagamento ---------- */}
set("condPag", v)} options={CONDICOES} placeholder="Ex: 30/60/90 ou Boleto 30 dias…" />
set("categoria", v)} options={CATEGORIAS_FIN} />
{parcelas.length > 0 && (
Nº
Vencimento
Valor
Forma
Conta
{parcelas.map((par, i) => (
{i + 1}
setParcelaField(i, "venc", e.target.value)} /> setParcelaField(i, "conta", e.target.value)} />
))}
)} {/* ---------- Transportador ---------- */} {/* Quem paga o frete — toggle visual */} {(() => { const conta = (p.transp && p.transp.fretePorConta) || "0"; const opts = [ { value: "0", icon: "building-2", label: "Empresa paga", hint: "CIF — frete incluso no pedido" }, { value: "1", icon: "user", label: "Cliente paga", hint: "FOB — cliente arca com o frete" }, { value: "9", icon: "package-x", label: "Sem frete", hint: "Retirada ou sem envio" }, ]; return (
{opts.map(o => { const active = conta === o.value; return ( ); })}
); })()}
setTransp("nome", v)} placeholder="Razão social da transportadora" /> setTransp("qtd", v)} />
{pesoBrutoManual ? ( setTransp("pesoBruto", e.target.value)} /> ) : (
0 ? "var(--tm-fg-2)" : "var(--tm-fg-4)", fontVariantNumeric: "tabular-nums" }}> {pesoBrutoCalc > 0 ? pesoBrutoCalc : "0"} kg
)}
setTransp("valor", v)} />
setTransp("logistica", v)} options={["Selecione a integração","Jadlog · Standard","Total Express · Sedex","Jamef · Standard","Loggi · Express","Correios · PAC","Correios · Sedex","Mercado Envios"]} />
{p.transp && p.transp.enderecoDiferente && (
setTransp("entregaCep", v)} /> setTransp("entregaEnd", v)} /> setTransp("entregaCidade", v)} /> setTransp("entregaRecebedor", v)} placeholder="Nome de quem recebe" />
)} {/* ---------- Dados adicionais ---------- */} set("obs", v)} placeholder="Texto que aparece na nota fiscal e/ou para o cliente" /> set("obsInternas", v)} placeholder="Apenas para o time interno · não vai na NF-e" /> {/* ── Modal: Cadastro rápido de cliente ── */} {quickClient && (
setQuickClient(null)} />

Cadastro rápido

Cadastre um novo cliente, salão ou distribuidor
{[{ k: 'cliente', l: 'Cliente', i: 'user' }, { k: 'salao', l: 'Salão / Barbearia', i: 'scissors' }, { k: 'distribuidor', l: 'Distribuidor', i: 'truck' }].map(t => ( ))}
setQuickClient(prev => ({ ...prev, nome: v }))} placeholder="Nome completo ou razão social" /> setQuickClient(prev => ({ ...prev, tipoPessoa: v }))} options={[{ value: 'PF', label: 'Pessoa Física' }, { value: 'PJ', label: 'Pessoa Jurídica' }]} />
{quickClient.tipoPessoa === 'PJ' ? ( setQuickClient(prev => ({ ...prev, cnpj: v }))} placeholder="00.000.000/0000-00" /> ) : ( setQuickClient(prev => ({ ...prev, cpf: v }))} placeholder="000.000.000-00" /> )} setQuickClient(prev => ({ ...prev, ie: v }))} placeholder="Opcional" />
setQuickClient(prev => ({ ...prev, celular: v }))} placeholder="(00) 00000-0000" /> setQuickClient(prev => ({ ...prev, email: v }))} placeholder="email@exemplo.com" />
setQuickClient(prev => ({ ...prev, cidade: v }))} placeholder="São Paulo" /> setQuickClient(prev => ({ ...prev, uf: v }))} options={['','AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO']} />
)}
); } // Read-only display field used in the Totais bar function ReadOnlyField({ label, value, muted, highlight }) { return ( ); } function brlSafe(n) { if (!isFinite(n) || n === 0) return "0,00"; return brl(n); } // Simulated comissões tab (display only — placeholder for the second sub-tab) function ComissoesTab({ pedido }) { const VENDEDORES = getVendedoresOptions(); return (
{}} options={VENDEDORES} /> {}} suffix="%" /> {}} />
O pagamento das comissões é registrado no módulo Financeiro quando o pedido for marcado como Atendido.
); } // Naive parser of common condições for parcelas display function parseParcelas(cond, total, dataVenda) { if (!cond || !total) return []; const formaForCond = (c) => { if (/PIX/i.test(c)) return "PIX"; if (/Cart/i.test(c)) return "Cartão"; if (/Boleto/i.test(c)) return "Boleto"; return "Dinheiro"; }; const conta = "Conta corrente · Itaú"; // Match prazos: "30/45/60", "30/60/90", "30 dias", "à vista", "Cartão 3×" if (/\u00e0?\s*vista/i.test(cond) || /à vista/i.test(cond)) { return [{ venc: dataVenda || "—", valor: total, forma: formaForCond(cond), conta }]; } const m = cond.match(/(\d+)(?:[\/x×](\d+))?(?:[\/x×](\d+))?/i); if (!m) return []; const dias = [m[1], m[2], m[3]].filter(Boolean).map(Number); const isCartao = /cart/i.test(cond); const nParc = isCartao ? dias[0] : dias.length; const parcArr = []; const each = total / nParc; for (let i = 0; i < nParc; i++) { const offsetDias = isCartao ? (i + 1) * 30 : dias[i]; parcArr.push({ venc: addDias(dataVenda, offsetDias), valor: each, forma: formaForCond(cond), conta }); } return parcArr; } function addDias(dataStr, dias) { if (!dataStr) return `+${dias}d`; const m = dataStr.match(/^(\d{2})\/(\d{2})\/(\d{4})$/); if (!m) return `+${dias}d`; const d = new Date(+m[3], +m[2] - 1, +m[1]); d.setDate(d.getDate() + dias); return `${String(d.getDate()).padStart(2,"0")}/${String(d.getMonth()+1).padStart(2,"0")}/${d.getFullYear()}`; } // ============================================================ // Error Boundary — evita tela preta em erros de render // ============================================================ class PedidoFormBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, errorMsg: "" }; } static getDerivedStateFromError(error) { return { hasError: true, errorMsg: error && error.message ? error.message : String(error) }; } componentDidCatch(error, info) { console.error("[PedidoForm] Erro de render:", error, info && info.componentStack); } render() { if (this.state.hasError) { return (
Erro ao exibir o pedido
Ocorreu um erro inesperado. Seu rascunho foi preservado.
); } return this.props.children; } } // ============================================================ // Shared list-state hook // ============================================================ function usePedListState(seed) { const [rows, setRows] = usePedState(seed); const [edit, setEdit] = usePedState(null); const open = (mode, idx, blank) => setEdit({ mode, idx, draft: { ...(idx != null ? rows[idx] : blank) } }); const close = () => setEdit(null); const save = () => { if (edit.mode === "new") setRows([{ ...edit.draft }, ...rows]); else setRows(rows.map((r, i) => i === edit.idx ? edit.draft : r)); setEdit(null); }; const remove = (idx) => { if (!confirm(`Excluir pedido ${rows[idx].num}?`)) return; setRows(rows.filter((_, i) => i !== idx)); if (edit && edit.idx === idx) setEdit(null); }; // Usa forma funcional do setEdit para evitar stale closure const set = (k, v) => setEdit(prev => prev ? { ...prev, draft: { ...prev.draft, [k]: v } } : prev ); return { rows, edit, open, close, save, remove, set }; } const blankPedido = () => ({ num: gerarNumPedido(), cli: "", canal: "", vendedor: "", loja: "Matriz · SP", unidade: "Cosméticos B2B", listaPreco: "", items: [{ sku: "", desc: "", un: "UN", qty: 1, precoLista: 0, descPct: 0 }], descontoExtra: 0, prazoEntrega: 5, outrasDespesas: 0, dataVenda: hoje(), dataSaida: "", dataPrevista: "", pedidoCompra: "", condPag: "PIX à vista", categoria: "Vendas B2B", transp: { nome: "", fretePorConta: "0", qtd: 0, pesoBruto: 0, valor: 0, logistica: "", enderecoDiferente: false }, obs: "", obsInternas: "", status: "Em andamento", total: 0, pgto: "", data: hojeHora(), afetaEstoque: true, }); function hoje() { const d = new Date(); return `${String(d.getDate()).padStart(2,"0")}/${String(d.getMonth()+1).padStart(2,"0")}/${d.getFullYear()}`; } function hojeHora() { const d = new Date(); return `${hoje()} · ${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}`; } // ============================================================ // LIST view (shared by Abertos / Faturados / Cancelados) // ============================================================ function PedidosLista({ filter, title, sub, onNav }) { const s = usePedidosList(PEDIDOS_SEED); const [previewPed, setPreviewPed] = usePedState(null); // Contagem de itens por pedido (para a coluna "Itens" da lista) const [itensPorPedido, setItensPorPedido] = usePedState({}); const reloadContagens = () => { if (!window.tmSupabase) return; window.tmSupabase.from("pedido_itens").select("pedido_id").then(({ data }) => { const map = {}; (data || []).forEach(r => { map[r.pedido_id] = (map[r.pedido_id] || 0) + 1; }); setItensPorPedido(map); }); }; React.useEffect(() => { reloadContagens(); }, []); // ── 3-dot actions menu ────────────────────────────────────── const [menuOpen, setMenuOpen] = usePedState(null); // pedido.id of open menu const [menuUp, setMenuUp] = usePedState(false); // true = open upward const menuRef = React.useRef(null); React.useEffect(() => { if (!menuOpen) return; const close = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(null); }; document.addEventListener('mousedown', close); return () => document.removeEventListener('mousedown', close); }, [menuOpen]); // Auto-position: detect if menu overflows viewport and flip upward React.useEffect(() => { if (!menuOpen || !menuRef.current) return; const dropdown = menuRef.current.querySelector('[data-ctx-menu]'); if (!dropdown) return; const rect = dropdown.getBoundingClientRect(); if (rect.bottom > window.innerHeight - 10) { setMenuUp(true); } else { setMenuUp(false); } }, [menuOpen]); // ── Faturar pedido ────────────────────────────────────────── const [faturando, setFaturando] = usePedState(null); // id do pedido sendo faturado // ── Filtros e busca da toolbar ────────────────────────────── const [searchQ, setSearchQ] = usePedState(''); const [fStatus, setFStatus] = usePedState(''); const [fCanal, setFCanal] = usePedState(''); const [fPgto, setFPgto] = usePedState(''); const [fPeriodo, setFPeriodo] = usePedState(''); // ── Paginação (must be before any early return to preserve hooks order) ── const PER_PAGE = 15; const [page, setPage] = usePedState(1); React.useEffect(() => { setPage(1); }, [searchQ, fStatus, fCanal, fPgto, fPeriodo]); const handleFaturar = async (pedido) => { if (!window.tmSupabase || !pedido.id) return; if (!confirm(`Faturar pedido #${pedido.num} de ${pedido.cli}?\n\nIsso irá criar as entradas em Contas a Receber.`)) return; setFaturando(pedido.id); try { const { error } = await window.tmSupabase .from('pedidos').update({ status: 'Atendido' }).eq('id', pedido.id); if (error) throw error; // Criar parcelas no contas_receber const parcelas = pedido.parcelas || parseParcelas(pedido.condPag, pedido.total, pedido.dataVenda); if (parcelas.length > 0) { const toIso = (br) => { const m = String(br||'').match(/^(\d{2})\/(\d{2})\/(\d{4})$/); return m ? `${m[3]}-${m[2]}-${m[1]}` : null; }; const rows = parcelas.map((par, i) => ({ referencia: `${pedido.num}/${i + 1}`, cliente_nome: pedido.cli, pedido_ref: pedido.num, pedido_id: pedido.id, vencimento: toIso(par.venc), parcela: i + 1, valor: typeof par.valor === 'number' ? par.valor : parseFloat(par.valor) || 0, valor_recebido: 0, status: 'Em aberto', forma_pagamento: par.forma || 'Dinheiro', conta_bancaria: par.conta || null, })); const { error: crErr } = await window.tmSupabase.from('contas_receber').insert(rows); if (crErr) console.warn('Erro contas_receber:', crErr); } s.reload(); } catch(e) { alert('Erro ao faturar: ' + (e.message || String(e))); } finally { setFaturando(null); } }; const handleCancelarPedido = async (pedido) => { if (!window.tmSupabase || !pedido.id) return; if (!confirm(`Cancelar pedido #${pedido.num}?`)) return; await window.tmSupabase.from('pedidos').update({ status: 'Cancelado' }).eq('id', pedido.id); s.reload(); }; // ── Alterar status do pedido ── const handleAlterarStatus = async (pedido, novoStatus) => { if (!window.tmSupabase || !pedido.id) return; if (!confirm(`Alterar pedido #${pedido.num} para "${novoStatus}"?`)) return; await window.tmSupabase.from('pedidos').update({ status: novoStatus }).eq('id', pedido.id); s.reload(); }; // ── Clonar pedido ── const handleClonar = async (pedido) => { if (!window.tmSupabase || !pedido.id) return; const novoNum = gerarNumPedido(); const clone = { numero: novoNum, cliente_nome: pedido.cli || pedido.cliente_nome, cliente_doc: pedido.cliId || pedido.cliente_doc, vendedor: pedido.vendedor, canal: pedido.canal, tabela_preco: pedido.tabelaPreco || pedido.tabela_preco, cond_pagamento: pedido.condPag || pedido.cond_pagamento, forma_pagamento: pedido.pgto || pedido.forma_pagamento, status: 'Em andamento', observacoes: pedido.obs || pedido.observacoes, observacoes_internas: pedido.obsInternas || pedido.observacoes_internas, transportador: pedido.transp || pedido.transportador || {}, total: pedido.total, data_venda: new Date().toISOString().slice(0, 10), }; const { data: novo, error } = await window.tmSupabase.from('pedidos').insert(clone).select().single(); if (error) { alert('Erro ao clonar: ' + error.message); return; } // Clonar itens if (novo) { const itens = await window.tmDb.loadPedidoItens(pedido.id); if (itens.length > 0) { const rows = itens.map(it => ({ pedido_id: novo.id, produto_id: it.produtoId || it.produto_id || null, sku: it.sku, descricao: it.desc || it.descricao, unidade: it.un || it.unidade || 'UN', quantidade: parseFloat(it.qty || it.quantidade) || 0, preco_lista: parseFloat(it.precoLista || it.preco_lista) || 0, desconto_pct: parseFloat(it.descPct || it.desconto_pct) || 0, })); await window.tmSupabase.from('pedido_itens').insert(rows); } } alert(`Pedido clonado com sucesso! Novo pedido: #${novoNum}`); s.reload(); }; // ── Enviar por e-mail ── const handleEnviarEmail = async (pedido) => { let email = ''; if (pedido.cli && window.tmSupabase) { const [c, sal, d] = await Promise.all([ window.tmSupabase.from('clientes').select('email').eq('nome', pedido.cli).maybeSingle(), window.tmSupabase.from('saloes').select('email').eq('nome', pedido.cli).maybeSingle(), window.tmSupabase.from('distribuidores').select('email').eq('nome', pedido.cli).maybeSingle(), ]); email = c.data?.email || sal.data?.email || d.data?.email || ''; } if (!email) email = prompt('E-mail do destinatário:') || ''; if (!email) return; const subject = encodeURIComponent(`Pedido #${pedido.num} — TopMix Profissional`); const body = encodeURIComponent(`Olá ${pedido.cli},\n\nSegue o pedido #${pedido.num} no valor de R$ ${brl(pedido.total)}.\n\nAtenciosamente,\nTopMix Profissional`); window.open(`mailto:${email}?subject=${subject}&body=${body}`, '_blank'); }; // ── Enviar por WhatsApp ── const handleEnviarWhatsApp = async (pedido) => { let fone = ''; if (pedido.cli && window.tmSupabase) { const [c, sal, d] = await Promise.all([ window.tmSupabase.from('clientes').select('whats,celular').eq('nome', pedido.cli).maybeSingle(), window.tmSupabase.from('saloes').select('celular,fone').eq('nome', pedido.cli).maybeSingle(), window.tmSupabase.from('distribuidores').select('celular,fone').eq('nome', pedido.cli).maybeSingle(), ]); fone = c.data?.whats || c.data?.celular || sal.data?.celular || sal.data?.fone || d.data?.celular || d.data?.fone || ''; } const num = fone.replace(/\D/g, ''); const phone = num.startsWith('55') ? num : '55' + num; const msg = encodeURIComponent(`Olá ${pedido.cli}! Segue seu pedido #${pedido.num} no valor de R$ ${brl(pedido.total)}. Obrigado pela preferência! — TopMix Profissional`); if (num) { window.open(`https://wa.me/${phone}?text=${msg}`, '_blank'); } else { const manual = prompt('Número de WhatsApp (com DDD):'); if (manual) { const m = manual.replace(/\D/g, ''); window.open(`https://wa.me/55${m}?text=${msg}`, '_blank'); } } }; // ── Gerar nota fiscal (navega para NF/emissão) ── const handleGerarNF = (pedido) => { if (onNav) onNav('nf/emissao'); }; // ── Helper: fetch NFe.io IDs for a pedido's NF ── const getNfDownloadIds = async (pedido) => { if (!pedido.notaFiscalId || !window.tmSupabase) return null; const { data: nf } = await window.tmSupabase.from('notas_fiscais') .select('nfeio_id, numero, serie, status, empresa_emissora_id').eq('id', pedido.notaFiscalId).single(); if (!nf || !nf.nfeio_id) return null; const { data: emp } = await window.tmSupabase.from('empresas_emissoras') .select('nfeio_company_id').eq('id', nf.empresa_emissora_id).single(); if (!emp?.nfeio_company_id) return null; return { companyId: emp.nfeio_company_id, invoiceId: nf.nfeio_id, numero: nf.numero }; }; // ── Visualizar DANFE do pedido faturado ── const [danfePreviewUrl, setDanfePreviewUrl] = usePedState(null); const [danfePreviewLoading, setDanfePreviewLoading] = usePedState(false); const [danfePreviewNum, setDanfePreviewNum] = usePedState(''); const handleVisualizarDanfe = async (pedido) => { if (!pedido.notaFiscalId) { alert('Este pedido não tem nota fiscal vinculada.'); return; } setDanfePreviewLoading(true); setDanfePreviewNum(pedido.num || ''); try { const ids = await getNfDownloadIds(pedido); if (!ids) { alert('NF-e sem dados de integração NFe.io para visualização.'); setDanfePreviewLoading(false); setDanfePreviewNum(''); return; } if (window.nfeApi && window.nfeApi.previewDanfe) { const url = await window.nfeApi.previewDanfe(ids.companyId, ids.invoiceId); setDanfePreviewUrl(url); } } catch (err) { alert('Erro ao carregar DANFE: ' + (err.message || err)); setDanfePreviewNum(''); } finally { setDanfePreviewLoading(false); } }; const closeDanfePreview = () => { if (danfePreviewUrl) URL.revokeObjectURL(danfePreviewUrl); setDanfePreviewUrl(null); setDanfePreviewNum(''); }; // ── Imprimir DANFE do pedido faturado ── const handleImprimirDanfe = async (pedido) => { if (!pedido.notaFiscalId) { alert('Este pedido não tem nota fiscal vinculada.'); return; } try { const ids = await getNfDownloadIds(pedido); if (!ids) { alert('NF-e sem dados de integração NFe.io para download.'); return; } if (window.nfeApi && window.nfeApi.downloadDanfe) { await window.nfeApi.downloadDanfe(ids.companyId, ids.invoiceId, 'danfe-' + (ids.numero || '') + '.pdf', true); } } catch (err) { alert('Erro ao imprimir DANFE: ' + (err.message || err)); } }; // ── Download DANFE PDF do pedido faturado ── const handleDownloadDanfe = async (pedido) => { if (!pedido.notaFiscalId) { alert('Este pedido não tem nota fiscal vinculada.'); return; } try { const ids = await getNfDownloadIds(pedido); if (!ids) { alert('NF-e sem dados de integração NFe.io para download.'); return; } if (window.nfeApi && window.nfeApi.downloadDanfe) { await window.nfeApi.downloadDanfe(ids.companyId, ids.invoiceId, 'danfe-' + (ids.numero || '') + '.pdf', false); } } catch (err) { alert('Erro ao baixar DANFE: ' + (err.message || err)); } }; // ── Download XML do pedido faturado ── const handleDownloadXml = async (pedido) => { if (!pedido.notaFiscalId) { alert('Este pedido não tem nota fiscal vinculada.'); return; } try { const ids = await getNfDownloadIds(pedido); if (!ids) { alert('NF-e sem dados de integração NFe.io para download.'); return; } if (window.nfeApi && window.nfeApi.downloadXml) { await window.nfeApi.downloadXml(ids.companyId, ids.invoiceId, 'nfe-' + (ids.numero || '') + '.xml'); } } catch (err) { alert('Erro ao baixar XML: ' + (err.message || err)); } }; // Carrega os itens do pedido em edição para dentro do rascunho React.useEffect(() => { const ed = s.edit; if (!ed || ed.mode !== "edit" || !ed.draft.id || ed.draft._itensCarregados) return; let cancel = false; window.tmDb.loadPedidoItens(ed.draft.id).then(its => { if (cancel) return; s.set({ items: its.length ? its : [{ sku: "", desc: "", un: "UN", qty: 1, precoLista: 0, descPct: 0 }], _itensCarregados: true, }); }); return () => { cancel = true; }; // eslint-disable-next-line }, [s.edit && s.edit.draft && s.edit.draft.id, s.edit && s.edit.draft && s.edit.draft._itensCarregados]); const salvarPedidoLista = async () => { const r = await window.tmDb.salvarPedido(s.edit.draft); if (r && r.error) { alert("Erro ao salvar o pedido: " + (r.error.message || r.error)); return; } await s.reload(); reloadContagens(); s.close(); }; if (s.edit) { return ( s.remove(s.edit.idx)} onPreview={() => setPreviewPed(s.edit.draft)} /> {previewPed && setPreviewPed(null)} />} ); } // ── Opções de filtro construídas a partir dos dados reais ── const baseRows = filter ? s.rows.filter(p => p.status === filter) : s.rows; const statusOpts = [...new Set(s.rows.map(p => p.status).filter(Boolean))].sort(); const canalOpts = [...new Set(s.rows.map(p => p.canal).filter(Boolean))].sort(); const pgtoOpts = [...new Set(s.rows.map(p => (p.pgto || p.condPag || '')).filter(Boolean))].sort(); const toolbarFilterOpts = []; if (!filter) toolbarFilterOpts.push({ key: 'status', label: 'Todos os status', options: statusOpts }); toolbarFilterOpts.push({ key: 'canal', label: 'Canal', options: canalOpts }); toolbarFilterOpts.push({ key: 'periodo', label: 'Período', options: ['Hoje', 'Esta semana', 'Este mês', 'Últimos 3 meses', 'Este ano'] }); toolbarFilterOpts.push({ key: 'pgto', label: 'Forma de pagamento', options: pgtoOpts }); const toolbarFilterValues = { status: fStatus, canal: fCanal, periodo: fPeriodo, pgto: fPgto }; const handleToolbarFilter = (key, val) => { if (key === 'status') setFStatus(val); if (key === 'canal') setFCanal(val); if (key === 'periodo') setFPeriodo(val); if (key === 'pgto') setFPgto(val); }; let filtered = baseRows; if (fStatus) filtered = filtered.filter(p => p.status === fStatus); if (fCanal) filtered = filtered.filter(p => p.canal === fCanal); if (fPgto) filtered = filtered.filter(p => (p.pgto || p.condPag || '') === fPgto); if (fPeriodo) { const now = new Date(); filtered = filtered.filter(p => { const m = String(p.dataVenda || p.data || '').match(/(\d{2})\/(\d{2})\/(\d{4})/); if (!m) return true; const dt = new Date(+m[3], +m[2] - 1, +m[1]); if (fPeriodo === 'Hoje') return dt.toDateString() === now.toDateString(); if (fPeriodo === 'Esta semana') { const d = new Date(now); d.setDate(d.getDate() - d.getDay()); d.setHours(0,0,0,0); return dt >= d; } if (fPeriodo === 'Este mês') return dt.getMonth() === now.getMonth() && dt.getFullYear() === now.getFullYear(); if (fPeriodo === 'Últimos 3 meses') { const d = new Date(now); d.setMonth(d.getMonth() - 3); return dt >= d; } if (fPeriodo === 'Este ano') return dt.getFullYear() === now.getFullYear(); return true; }); } if (searchQ) { const q = searchQ.toLowerCase(); filtered = filtered.filter(p => String(p.num || '').toLowerCase().includes(q) || String(p.cli || '').toLowerCase().includes(q) || String(p.canal || '').toLowerCase().includes(q) || String(p.pgto || p.condPag || '').toLowerCase().includes(q) || String(p.status || '').toLowerCase().includes(q) || String(p.vendedor|| '').toLowerCase().includes(q) ); } const indexFor = (row) => s.rows.findIndex(r => r.num === row.num); // KPIs computados a partir dos dados reais const emAberto = s.rows.filter(p => p.status === "Em andamento" || p.status === "Verificado"); const faturados = s.rows.filter(p => p.status === "Atendido"); const cancelados = s.rows.filter(p => p.status === "Cancelado"); const valorAberto = emAberto.reduce((a, p) => a + (Number(p.total) || 0), 0); const valorFat = faturados.reduce((a, p) => a + (Number(p.total) || 0), 0); const taxaCancel = s.rows.length > 0 ? `${(cancelados.length / s.rows.length * 100).toFixed(1)}%` : "—"; // Mensagem do empty state de acordo com o filtro ativo const hasActiveFilter = searchQ || fStatus || fCanal || fPgto || fPeriodo; const emptyMsg = hasActiveFilter ? "Nenhum pedido corresponde aos filtros aplicados." : filter === "Em andamento" ? "Nenhum pedido em aberto no momento." : filter === "Atendido" ? "Nenhum pedido faturado ainda." : filter === "Cancelado" ? "Nenhum pedido cancelado." : "Nenhum pedido cadastrado ainda."; return (
}/>
0 ? `R$ ${brl(valorAberto)} a faturar` : "Nenhum em aberto"} /> 0 ? `R$ ${brl(valorFat)}` : "Nenhum faturado"} />
{s.rows.length === 0 ? (
Nenhum pedido encontrado
{emptyMsg}
) : ( <> {filtered.length === 0 ? (
{emptyMsg}
) : ( <> {filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE).map((p, i) => { const realIdx = indexFor(p); return ( s.open("edit", realIdx)}> ); })}
NºClienteCanalItensTotalPagamentoStatusData da venda
#{p.num}
{p.cli}
 {p.canal} {itensPorPedido[p.id] || 0} R$ {brl(p.total)} {p.pgto} {p.status} {p.dataVenda || p.data}
e.stopPropagation()} ref={menuOpen === p.id ? menuRef : undefined}> {menuOpen === p.id && (
{/* ── Nota Fiscal ── */} {p.status === 'Em andamento' && ( )} {p.status === 'Atendido' && !p.notaFiscalId && ( )} {p.status === 'Atendido' && p.notaFiscalId && ( <>
)} {/* ── Lançamentos ── */} {p.status === 'Em andamento' && ( )} {/* ── Duplicar ── */}
{/* ── Impressão ── */}
{/* ── Comunicação ── */}
{/* ── Alterar status ── */} {p.status !== 'Atendido' && ( )} {p.status !== 'Cancelado' && ( )} {p.status !== 'Em andamento' && ( )}
{/* ── Editar / Excluir ── */}
)}
)} )} {/* DANFE Preview Modal */} {danfePreviewNum && (
{ if (e.target === e.currentTarget) closeDanfePreview(); }}>
DANFE — Pedido #{danfePreviewNum}
{danfePreviewLoading ? (
Carregando DANFE...
) : danfePreviewUrl ? (