// AGÊNCIA LOGUE — sistema claro, funcional e persistente. // Home (Financeiro · Comercial · Produção) + CRM arrastável + edição. Exporta window.LogueHub. (function () { const { useState, useEffect, useRef } = React; const h = React.createElement; const S = () => window.LogueStore; const AC = "#FF78B0"; const PAG_COR = { pago: "#3F9E6B", pendente: "#C77D2E", atrasado: "#C9524F", permuta: "#7E6BB0" }; const PAG_BG = { pago: "#E6F3EC", pendente: "#FBEEDD", atrasado: "#F8E4E3", permuta: "#EFEAF8" }; const PAG_LABEL = { pago: "pago", pendente: "a receber", atrasado: "atrasado", permuta: "permuta" }; const STATUS_OPTS = [["pago", "Pago"], ["pendente", "A receber"], ["atrasado", "Atrasado"], ["permuta", "Permuta"]]; const brl = (n) => "R$ " + Number(n || 0).toLocaleString("pt-BR"); const ini = (nm) => (nm || "?").trim().charAt(0).toUpperCase() || "?"; const MES_ORD = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"]; const mesKey = (m) => { const [nm, y] = m.split("/"); return (+y) * 100 + (MES_ORD.indexOf(nm.slice(0, 3)) + 1); }; function useLogue() { const [, force] = useState(0); useEffect(() => S().subscribe(() => force((x) => x + 1)), []); return S().get(); } // ── inputs editáveis (uncontrolled, commit no blur) ── function Inp({ val, onSave, type, placeholder, area, className }) { return h(area ? "textarea" : "input", { className: "lg-inp" + (area ? " area" : "") + (className ? " " + className : ""), type: type || "text", defaultValue: val == null ? "" : val, placeholder, rows: area ? 3 : undefined, onBlur: (e) => { const v = type === "number" ? (parseFloat(e.target.value) || 0) : e.target.value; if (v !== val) onSave(v); }, onKeyDown: (e) => { if (!area && e.key === "Enter") e.target.blur(); }, }); } function Sel({ val, opts, onSave }) { return h("select", { className: "lg-inp lg-sel", value: val, onChange: (e) => onSave(e.target.value) }, opts.map(([v, l]) => h("option", { key: v, value: v }, l))); } // ══════════════════ HUB ══════════════════ function LogueHub() { const [view, setView] = useState("home"); const [sel, setSel] = useState(null); const [lead, setLead] = useState(null); const st = useLogue(); const clientes = st.clientes, leads = st.leads; const mrr = clientes.reduce((s, c) => s + c.receita, 0); const recebido = clientes.filter((c) => c.pagamento.status_mes === "pago").reduce((s, c) => s + c.receita, 0); const receber = clientes.filter((c) => c.pagamento.status_mes === "pendente").reduce((s, c) => s + c.receita, 0); const atrasado = clientes.filter((c) => c.pagamento.status_mes === "atrasado").reduce((s, c) => s + c.receita, 0); const pagantes = clientes.filter((c) => c.receita > 0); const ticket = pagantes.length ? Math.round(mrr / pagantes.length) : 0; const byMes = {}; clientes.forEach((c) => (c.pagamento.historico || []).forEach((p) => { if (p.status === "pago") byMes[p.mes] = (byMes[p.mes] || 0) + p.valor; })); const serie = Object.entries(byMes).map(([mes, v]) => ({ mes, v })).sort((a, b) => mesKey(a.mes) - mesKey(b.mes)); const fin = { mrr, recebido, receber, atrasado, ticket, serie }; const pipeline = leads.filter((x) => x.status !== "fechado").reduce((s, x) => s + (x.valor || 0), 0); const totalIdeias = clientes.reduce((s, c) => s + (c.insights ? c.insights.length : 0), 0); const totalTarefas = clientes.reduce((s, c) => s + (c.tarefas || []).filter((t) => t.status !== "concluida").length, 0); const openCli = (c) => setSel(c.id); const selCli = sel ? clientes.find((c) => c.id === sel) : null; const leadObj = lead ? leads.find((l) => l.id === lead) : null; return h("div", { className: "lg" }, h("header", { className: "lg-top" }, h("button", { className: "lg-brand", onClick: () => setView("home") }, h("span", { className: "lg-mark" }, "L"), h("span", null, h("span", { className: "lg-brand-name" }, "Agência Logue"), h("span", { className: "lg-brand-sub" }, "CRM · Financeiro · Produção"))), view !== "home" && h("nav", { className: "lg-nav" }, [["financeiro", "Financeiro"], ["comercial", "Comercial"], ["producao", "Produção"]].map(([k, l]) => h("button", { key: k, className: "lg-nav-btn" + (view === k ? " on" : ""), onClick: () => setView(k) }, l)))), view === "home" && h(Home, { go: setView }), view === "financeiro" && h(Financeiro, { clientes, fin, onOpen: openCli }), view === "comercial" && h(Comercial, { leads, metas: st.metas, onEdit: setLead }), view === "producao" && h(Producao, { clientes, onOpen: openCli }), selCli && h(CliModal, { c: selCli, onClose: () => setSel(null) }), leadObj && h(LeadModal, { l: leadObj, onClose: () => setLead(null) }) ); } // ══════════════════ HOME ══════════════════ function Home({ go }) { const cards = [ { k: "financeiro", emoji: "💰", nome: "Financeiro", desc: "Receita, faturas e pagamentos do mês", tint: "var(--t-sage-bg)", bd: "var(--t-sage-bd)" }, { k: "comercial", emoji: "🎯", nome: "Comercial", desc: "Funil de leads e propostas em negociação", tint: "var(--t-sky-bg)", bd: "var(--t-sky-bd)" }, { k: "producao", emoji: "🎬", nome: "Produção", desc: "Ideias de conteúdo e tarefas por cliente", tint: "var(--t-pink-bg)", bd: "var(--t-pink-bd)" }, ]; return h("div", { className: "lg-home" }, h("div", { className: "lg-home-head" }, h("div", { className: "lg-eyebrow" }, "Agência Logue"), h("h1", { className: "lg-home-title" }, "Onde você quer trabalhar agora?"), h("p", { className: "lg-home-sub" }, "Escolha uma área para começar")), h("div", { className: "lg-home-grid" }, cards.map((c) => h("button", { key: c.k, className: "lg-choice", style: { background: c.tint, borderColor: c.bd }, onClick: () => go(c.k) }, h("div", { className: "lg-choice-emoji" }, c.emoji), h("div", { className: "lg-choice-nome" }, c.nome), h("div", { className: "lg-choice-desc" }, c.desc), h("div", { className: "lg-choice-go" }, "Abrir ", h("span", { "aria-hidden": true }, "→"))))) ); } // ══════════════════ FINANCEIRO ══════════════════ function Financeiro({ clientes, fin, onOpen }) { const maxV = Math.max(...fin.serie.map((s) => s.v), 1); const hoje = new Date(); const meta = 6000, metaPct = Math.min(100, Math.round((fin.mrr / meta) * 100)); return h("div", { className: "lg-page" }, h(SecHead, { title: "Financeiro", sub: "Receita, faturas e pagamentos do mês · edite o status direto na fatura" }), h("div", { className: "lg-kpis" }, [["Recorrente / mês", brl(fin.mrr), AC], ["Recebido no mês", brl(fin.recebido), PAG_COR.pago], ["A receber", brl(fin.receber), PAG_COR.pendente], ["Ticket médio", brl(fin.ticket), "#5F9BD1"]] .map(([l, v, cor]) => h("div", { key: l, className: "lg-kpi" }, h("div", { className: "lg-kpi-dot", style: { background: cor } }), h("div", { className: "lg-kpi-l" }, l), h("div", { className: "lg-kpi-v" }, v)))), h("div", { className: "lg-card" }, h("div", { className: "lg-card-t" }, "Meta de faturamento", h("span", { className: "lg-card-t-r", style: { color: AC } }, metaPct + "% de " + brl(meta))), h("div", { className: "lg-meta-bar" }, h("div", { className: "lg-meta-fill", style: { width: metaPct + "%" } }))), h("div", { className: "lg-2col" }, h("div", { className: "lg-card" }, h("div", { className: "lg-card-t" }, "Receita recebida por mês"), fin.serie.length ? h("div", { className: "lg-chart" }, fin.serie.map((s) => h("div", { key: s.mes, className: "lg-bar-col" }, h("div", { className: "lg-bar-v" }, brl(s.v).replace("R$ ", "")), h("div", { className: "lg-bar-track" }, h("div", { className: "lg-bar-fill", style: { height: Math.round((s.v / maxV) * 100) + "%" } })), h("div", { className: "lg-bar-x" }, s.mes.split("/")[0])))) : h("div", { className: "lg-fcol-empty" }, "sem pagamentos registrados")), h("div", { className: "lg-card" }, h("div", { className: "lg-card-t" }, "Faturas do mês"), h("div", { className: "lg-inv-head" }, h("span", null, "Cliente"), h("span", null, "Vencimento"), h("span", null, "Valor"), h("span", null, "Status")), clientes.slice().sort((a, b) => a.pagamento.dia - b.pagamento.dia).map((c) => { const stt = c.pagamento.status_mes, venc = daysToVenc(c.pagamento.dia, hoje); return h("div", { key: c.id, className: "lg-inv-row" }, h("span", { className: "lg-inv-cli", onClick: () => onOpen(c), style: { cursor: "pointer" } }, h("span", { className: "lg-av sm", style: { background: PAG_BG[stt] } }, ini(c.nome)), c.nome), h("span", { className: "lg-inv-venc" }, "dia " + c.pagamento.dia, (stt === "pendente" || stt === "atrasado") && venc != null && h("span", { className: "lg-inv-in" }, venc >= 0 ? " · em " + venc + "d" : " · " + Math.abs(venc) + "d atrás")), h("span", { className: "lg-inv-val" }, c.receita ? brl(c.receita) : "—"), h("span", null, h(Sel, { val: stt, opts: STATUS_OPTS, onSave: (v) => S().updatePayment(c.id, { status_mes: v }) }))); }), h("div", { className: "lg-inv-total" }, h("span", null, "Total previsto"), h("span", null, brl(fin.mrr))))) , h("div", { className: "lg-mini-label" }, "Clientes ativos"), h("div", { className: "lg-cli-grid" }, clientes.map((c) => { const stt = c.pagamento.status_mes, pend = (c.tarefas || []).filter((t) => t.status !== "concluida").length; return h("button", { key: c.id, className: "lg-cli", onClick: () => onOpen(c) }, h("div", { className: "lg-cli-top" }, h("span", { className: "lg-av", style: { background: (c.cor || AC) } }, ini(c.nome)), h("div", { className: "grow" }, h("div", { className: "lg-cli-nome" }, c.nome), h("div", { className: "lg-cli-setor" }, c.setor)), h("span", { className: "lg-pill", style: { background: PAG_BG[stt], color: PAG_COR[stt] } }, PAG_LABEL[stt])), h("div", { className: "lg-cli-row" }, h("div", { className: "lg-cli-metric" }, h("span", null, "Receita/mês"), h("b", null, c.receita ? brl(c.receita) : "permuta")), h("div", { className: "lg-cli-metric" }, h("span", null, "Vencimento"), h("b", null, "dia " + c.pagamento.dia)), h("div", { className: "lg-cli-metric" }, h("span", null, "Pendências"), h("b", null, pend))), h("div", { className: "lg-cli-pac" }, c.pacote)); }), h("button", { className: "lg-cli lg-cli-add", onClick: () => S().addClient() }, h("span", null, "＋"), h("span", null, "Adicionar cliente")) ) ); } function daysToVenc(dia, hoje) { const d = new Date(hoje.getFullYear(), hoje.getMonth(), dia); return Math.round((d - new Date(hoje.getFullYear(), hoje.getMonth(), hoje.getDate())) / 86400000); } // ══════════════════ COMERCIAL (funil arrastável + editável) ══════════════════ const CRM_COLS = [["potencial", "Potencial", "#8E86A8"], ["em_contato", "Em contato", "#5F9BD1"], ["negociando", "Negociando", "#C77D2E"], ["fechado", "Fechado", "#3F9E6B"]]; // ── Metas do dia: pequenas ações pra prospectar e aumentar o lucro ── function MetasDia({ metas, editMetas, setEditMetas }) { const itens = (metas && metas.itens) || []; const feitos = itens.filter((x) => x.done).length; const pct = itens.length ? Math.round((feitos / itens.length) * 100) : 0; return h("div", { className: "lg-metas" }, h("div", { className: "lg-metas-head" }, h("div", null, h("div", { className: "lg-metas-t" }, "🎯 Metas do dia"), h("div", { className: "lg-metas-sub" }, "Pequenas ações pra prospectar todo dia e aumentar o lucro · zeram sozinhas amanhã")), h("div", { className: "lg-metas-right" }, h("div", { className: "lg-metas-count" }, feitos + "/" + itens.length), h("button", { className: "lg-metas-edit", onClick: () => setEditMetas((v) => !v) }, editMetas ? "Concluir" : "Editar"))), h("div", { className: "lg-metas-bar" }, h("div", { className: "lg-metas-fill", style: { width: pct + "%" } })), h("div", { className: "lg-metas-list" }, itens.map((m) => h("div", { key: m.id, className: "lg-meta" + (m.done ? " done" : "") }, h("button", { className: "lg-meta-chk", onClick: () => S().toggleMeta(m.id), "aria-label": "concluir" }, m.done ? "✓" : ""), editMetas ? h(Inp, { val: m.t, onSave: (v) => S().updateMeta(m.id, v) }) : h("span", { className: "lg-meta-t", onClick: () => S().toggleMeta(m.id) }, m.t), editMetas && h("button", { className: "lg-meta-del", onClick: () => S().deleteMeta(m.id), title: "remover" }, "✕"))), editMetas && h("button", { className: "lg-add-btn", onClick: () => S().addMeta() }, "＋ Nova ação")), pct === 100 && itens.length > 0 && h("div", { className: "lg-metas-win" }, "Todas as metas do dia batidas — é assim que o lucro cresce 💪")); } function Comercial({ leads, metas, onEdit }) { const [drag, setDrag] = useState(null); const [over, setOver] = useState(null); const [editMetas, setEditMetas] = useState(false); const pipeline = leads.filter((x) => x.status !== "fechado").reduce((s, x) => s + (x.valor || 0), 0); const fechado = leads.filter((x) => x.status === "fechado").reduce((s, x) => s + (x.valor || 0), 0); const dropCol = (st) => { if (drag) { S().moveLead(drag, st); S().reorderLead(drag, null); } setDrag(null); setOver(null); }; const dropCard = (e, st, beforeId) => { e.stopPropagation(); if (drag) { S().moveLead(drag, st); S().reorderLead(drag, beforeId); } setDrag(null); setOver(null); }; return h("div", { className: "lg-page" }, h(SecHead, { title: "Comercial", sub: "Arraste os cards entre etapas · clique pra editar · +Novo lead em cada coluna" }), h("div", { className: "lg-kpis three" }, h("div", { className: "lg-kpi" }, h("div", { className: "lg-kpi-l" }, "Em negociação"), h("div", { className: "lg-kpi-v" }, brl(pipeline))), h("div", { className: "lg-kpi" }, h("div", { className: "lg-kpi-l" }, "Fechado"), h("div", { className: "lg-kpi-v", style: { color: PAG_COR.pago } }, brl(fechado))), h("div", { className: "lg-kpi" }, h("div", { className: "lg-kpi-l" }, "Oportunidades"), h("div", { className: "lg-kpi-v" }, leads.length))), h(MetasDia, { metas, editMetas, setEditMetas }), h("div", { className: "lg-funil" }, CRM_COLS.map(([st, label, cor]) => { const inCol = leads.filter((x) => x.status === st); return h("div", { key: st, className: "lg-fcol" + (over === st ? " over" : ""), onDragOver: (e) => { e.preventDefault(); setOver(st); }, onDragLeave: () => setOver((o) => (o === st ? null : o)), onDrop: () => dropCol(st), }, h("div", { className: "lg-fcol-head" }, h("span", { className: "lg-fdot", style: { background: cor } }), h("span", null, label), h("span", { className: "lg-fcount" }, inCol.length)), h("div", { className: "lg-fcol-body" }, inCol.map((x) => h("div", { key: x.id, className: "lg-fcard" + (drag === x.id ? " dragging" : ""), draggable: true, style: { borderLeftColor: cor }, onDragStart: () => setDrag(x.id), onDragEnd: () => { setDrag(null); setOver(null); }, onDrop: (e) => dropCard(e, st, x.id), onClick: () => onEdit(x.id), }, h("div", { className: "lg-fcard-top" }, h("span", { className: "lg-fcard-nome" }, x.nome), x.valor ? h("span", { className: "lg-fcard-val" }, brl(x.valor)) : null), x.proposta && h("div", { className: "lg-fcard-prop" }, x.proposta), x.proxima && h("div", { className: "lg-fcard-prox" }, "→ " + x.proxima), x.followup && h("div", { className: "lg-fcard-fu" }, "⏰ follow-up " + x.followup))), h("button", { className: "lg-add-btn", onClick: () => onEdit(S().addLead(st)) }, "＋ Novo lead")) ); })) ); } // ══════════════════ PRODUÇÃO ══════════════════ function Producao({ clientes, onOpen }) { return h("div", { className: "lg-page" }, h(SecHead, { title: "Produção", sub: "Ideias e tarefas por cliente · arraste tarefas pra reordenar · tudo editável" }), h("div", { className: "lg-prod" }, clientes.map((c) => h(ProdCli, { key: c.id, c, onOpen }))) ); } const STORY_POOL = [ { t: "Bastidor com propósito", s: "Mostre 15s de um momento real do dia + 1 frase do porquê você faz isso. Fecha com pergunta na caixinha." }, { t: "Mini-aula de 3 slides", s: "Ensine 1 coisa útil do nicho em 3 stories. No último, convide: \"quer que eu faça isso pra você? me chama\"." }, { t: "Prova social leve", s: "Print de um elogio/resultado + sua reação humana. Sem discurso de venda — só gratidão e contexto." }, { t: "Antes & depois", s: "Um antes/depois do trabalho ou rotina. Termine com CTA suave: \"tem algo assim que você quer melhorar?\"." }, { t: "Enquete de valor", s: "Pergunte algo que revela dor do público (2 opções). Amanhã, responda com dica — vira autoridade." }, { t: "Você por dentro", s: "Conte 1 escolha/valor da marca em tom de conversa. Aproxima sem parecer institucional." }, { t: "Oferta sem peso", s: "Mostre um detalhe do serviço/produto em uso + \"tem vaga essa semana\". Uma vez só, natural." }, ]; function storyOfDay(cid) { const seed = new Date().getDate() + (cid || "").split("").reduce((a, ch) => a + ch.charCodeAt(0), 0); return STORY_POOL[seed % STORY_POOL.length]; } function ProdCli({ c, onOpen }) { const [drag, setDrag] = useState(null); const pend = (c.tarefas || []).filter((t) => t.status !== "concluida"); const tasks = c.tarefas || []; const story = storyOfDay(c.id); return h("div", { className: "lg-prod-cli" }, h("div", { className: "lg-prod-head" }, h("span", { className: "lg-av", style: { background: (c.cor || AC) } }, ini(c.nome)), h("div", { className: "grow" }, h("div", { className: "lg-cli-nome" }, c.nome), h("div", { className: "lg-cli-setor" }, c.pacote)), h("button", { className: "lg-prod-open", onClick: () => onOpen(c) }, "Ver cliente →")), h("div", { className: "lg-story" }, h("div", { className: "lg-story-l" }, h("span", { className: "lg-story-ic" }, "🎬"), h("span", null, "Roteiro de story do dia")), h("div", { className: "lg-story-t" }, story.t), h("p", { className: "lg-story-s" }, story.s), h("div", { className: "lg-story-tag" }, "autoridade + monetização · tom leve, nada comercial demais")), h("div", { className: "lg-prod-cols" }, h("div", null, h("div", { className: "lg-prod-col-t" }, "💡 Ideias de conteúdo", h("span", { className: "lg-fcount" }, (c.insights || []).length)), h("div", { className: "lg-fmt-hint" }, "Base é vídeo (6/mês), mas varie: 🎥 vídeo · 🖼️ estático · 🎠 carrossel"), (c.insights || []).map((ins, i) => h("div", { key: i, className: "lg-idea lg-idea-edit" }, h("div", { className: "lg-idea-top" }, h(Inp, { val: ins.titulo, className: "lg-idea-tt", onSave: (v) => S().updateIdea(c.id, i, { titulo: v }) }), h(Inp, { val: ins.custo, className: "lg-idea-cc", onSave: (v) => S().updateIdea(c.id, i, { custo: v }) }), h("button", { className: "lg-x", title: "excluir", onClick: () => S().deleteIdea(c.id, i) }, "✕")), h(Inp, { val: ins.ideia, area: true, placeholder: "descreva a ideia…", onSave: (v) => S().updateIdea(c.id, i, { ideia: v }) }))), h("button", { className: "lg-add-btn", onClick: () => S().addIdea(c.id) }, "＋ Nova ideia")), h("div", null, h("div", { className: "lg-prod-col-t" }, "📋 Tarefas", h("span", { className: "lg-fcount" }, pend.length)), h("div", null, tasks.map((t) => h("div", { key: t.id, className: "lg-ptask" + (drag === t.id ? " dragging" : "") + (t.status === "concluida" ? " done" : ""), draggable: true, onDragStart: () => setDrag(t.id), onDragEnd: () => setDrag(null), onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); if (drag && drag !== t.id) S().reorderTask(c.id, drag, t.id); setDrag(null); }, }, h("span", { className: "lg-drag" }, "⠿"), h("button", { className: "lg-chk" + (t.status === "concluida" ? " on" : ""), onClick: () => S().toggleTask(c.id, t.id) }, t.status === "concluida" ? "✓" : ""), h(Inp, { val: t.titulo, className: "grow lg-task-tt", onSave: (v) => S().updateTask(c.id, t.id, { titulo: v }) }), h(Inp, { val: t.deadline, className: "lg-task-dd", placeholder: "dd/mm", onSave: (v) => S().updateTask(c.id, t.id, { deadline: v }) }), h("button", { className: "lg-x", title: "excluir", onClick: () => S().deleteTask(c.id, t.id) }, "✕")))), h("button", { className: "lg-add-btn", onClick: () => S().addTask(c.id) }, "＋ Nova tarefa")) ) ); } function SecHead({ title, sub }) { return h("div", { className: "lg-sec-head" }, h("h2", { className: "lg-sec-title" }, title), h("p", { className: "lg-sec-sub" }, sub)); } // ══════════════════ MODAL DE LEAD (editável) ══════════════════ const TIPO_OPTS = [["marca", "Marca"], ["influencer", "Influencer"], ["collab", "Collab"]]; const LEAD_STATUS = CRM_COLS.map(([v, l]) => [v, l]); function LeadModal({ l, onClose }) { const [edit, setEdit] = useState(false); const up = (patch) => S().updateLead(l.id, patch); const stLabel = (LEAD_STATUS.find(([v]) => v === l.status) || ["", l.status])[1]; const tpLabel = (TIPO_OPTS.find(([v]) => v === l.tipo) || ["", l.tipo])[1]; const ro = (label, val) => h("div", { className: "lg-frow" }, h("span", { className: "lg-frow-l" }, label), h("div", { className: "lg-ro" }, val || "—")); return h("div", { className: "lg-modal-bg", onClick: onClose }, h("div", { className: "lg-modal", onClick: (e) => e.stopPropagation() }, h("button", { className: "lg-modal-x", onClick: onClose }, "✕"), h("div", { className: "lg-modal-head" }, h("h2", { className: "lg-modal-title" }, edit ? "Editar lead" : l.nome), !edit && h("button", { className: "lg-edit-btn", onClick: () => setEdit(true) }, "✎ Editar")), edit ? h("div", { className: "lg-form" }, h(FRow, { label: "Nome" }, h(Inp, { val: l.nome, onSave: (v) => up({ nome: v }) })), h("div", { className: "lg-form-2" }, h(FRow, { label: "Etapa" }, h(Sel, { val: l.status, opts: LEAD_STATUS, onSave: (v) => up({ status: v }) })), h(FRow, { label: "Tipo" }, h(Sel, { val: l.tipo, opts: TIPO_OPTS, onSave: (v) => up({ tipo: v }) }))), h(FRow, { label: "Valor (R$)" }, h(Inp, { val: l.valor, type: "number", onSave: (v) => up({ valor: v }) })), h(FRow, { label: "Proposta" }, h(Inp, { val: l.proposta, area: true, onSave: (v) => up({ proposta: v }) })), h(FRow, { label: "Próxima ação" }, h(Inp, { val: l.proxima, onSave: (v) => up({ proxima: v }) })), h(FRow, { label: "Follow-up" }, h(Inp, { val: l.followup, placeholder: "ex: amanhã", onSave: (v) => up({ followup: v }) })), h(FRow, { label: "Notas" }, h(Inp, { val: l.notas, area: true, onSave: (v) => up({ notas: v }) }))) : h("div", { className: "lg-form" }, h("div", { className: "lg-form-2" }, ro("Etapa", stLabel), ro("Tipo", tpLabel)), ro("Valor", l.valor ? brl(l.valor) : "—"), ro("Proposta", l.proposta), ro("Próxima ação", l.proxima), ro("Follow-up", l.followup), ro("Notas", l.notas)), h("div", { className: "lg-form-foot" }, h("button", { className: "lg-del", onClick: () => { S().deleteLead(l.id); onClose(); } }, "Excluir lead"), edit ? h("button", { className: "lg-done", onClick: () => setEdit(false) }, "Salvar") : h("button", { className: "lg-done", onClick: onClose }, "Fechar")) ) ); } function FRow({ label, children }) { return h("label", { className: "lg-frow" }, h("span", { className: "lg-frow-l" }, label), children); } // ══════════════════ MODAL DE CLIENTE (editável) ══════════════════ function CliModal({ c, onClose }) { const stt = c.pagamento.status_mes; const up = (patch) => S().updateClient(c.id, patch); const upP = (patch) => S().updatePayment(c.id, patch); return h("div", { className: "lg-modal-bg", onClick: onClose }, h("div", { className: "lg-modal", onClick: (e) => e.stopPropagation() }, h("button", { className: "lg-modal-x", onClick: onClose }, "✕"), h("div", { className: "lg-modal-head" }, h("span", { className: "lg-av lg-big", style: { background: (c.cor || AC) } }, ini(c.nome)), h("div", { className: "grow" }, h(Inp, { val: c.nome, className: "lg-modal-name", onSave: (v) => up({ nome: v }) }), h(Inp, { val: c.setor, className: "lg-modal-setor", placeholder: "setor / segmento", onSave: (v) => up({ setor: v }) }))), h("div", { className: "lg-form-2" }, h(FRow, { label: "Receita / mês (R$)" }, h(Inp, { val: c.receita, type: "number", onSave: (v) => up({ receita: v }) })), h(FRow, { label: "Status do mês" }, h(Sel, { val: stt, opts: STATUS_OPTS, onSave: (v) => upP({ status_mes: v }) }))), h("div", { className: "lg-form-2" }, h(FRow, { label: "Dia de vencimento" }, h(Inp, { val: c.pagamento.dia, type: "number", onSave: (v) => upP({ dia: v }) })), h(FRow, { label: "Cliente desde" }, h(Inp, { val: c.inicio, onSave: (v) => up({ inicio: v }) }))), h(FRow, { label: "Contato / respons\u00e1veis" }, h(Inp, { val: c.contato, placeholder: "nome dos respons\u00e1veis", onSave: (v) => up({ contato: v }) })), h(FRow, { label: "Pacote" }, h(Inp, { val: c.pacote, onSave: (v) => up({ pacote: v }) })), h("div", { className: "lg-msec", style: { marginTop: 20 } }, h("div", { className: "lg-msec-t" }, "Histórico de pagamento"), (c.pagamento.historico || []).length ? (c.pagamento.historico || []).map((p, i) => h("div", { key: i, className: "lg-pay" }, h("span", null, p.mes), h("span", { className: "lg-pay-v" }, p.valor ? brl(p.valor) : "—"), h("span", { className: "lg-pill", style: { background: PAG_BG[p.status], color: PAG_COR[p.status] } }, PAG_LABEL[p.status]), h("span", { className: "lg-pay-d" }, p.data))) : h("div", { className: "lg-fcol-empty" }, "sem histórico ainda")), c.influencers && h("div", { className: "lg-msec" }, h("div", { className: "lg-msec-t" }, "Agenda de influencers"), h("div", { className: "lg-inf-grid" }, c.influencers.map((x, i) => h("div", { key: i, className: "lg-inf" + (x.vazio ? " empty" : "") }, h("div", { className: "lg-inf-dia" }, x.dia), x.vazio ? h("div", { className: "lg-inf-livre" }, "livre") : h("div", null, h("div", { className: "lg-inf-nome" }, x.nome), h("div", { className: "lg-inf-tipo" }, x.tipo)))))), h("div", { className: "lg-msec" }, h("div", { className: "lg-msec-t" }, "Tarefas"), (c.tarefas || []).map((t) => h("div", { key: t.id, className: "lg-task" }, h("button", { className: "lg-chk" + (t.status === "concluida" ? " on" : ""), onClick: () => S().toggleTask(c.id, t.id) }, t.status === "concluida" ? "✓" : ""), h(Inp, { val: t.titulo, className: "grow lg-task-tt", onSave: (v) => S().updateTask(c.id, t.id, { titulo: v }) }), h(Inp, { val: t.deadline, className: "lg-task-dd", placeholder: "dd/mm", onSave: (v) => S().updateTask(c.id, t.id, { deadline: v }) }), h("button", { className: "lg-x", onClick: () => S().deleteTask(c.id, t.id) }, "✕"))), h("button", { className: "lg-add-btn", onClick: () => S().addTask(c.id) }, "＋ Nova tarefa")), h("div", { className: "lg-form-foot" }, h("button", { className: "lg-del", onClick: () => { if (confirm("Excluir " + c.nome + "?")) { S().deleteClient(c.id); onClose(); } } }, "Excluir cliente"), h("button", { className: "lg-done", onClick: onClose }, "Concluído")) ) ); } Object.assign(window, { LogueHub }); })();