[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68f6d210a9c88191bddd8492ae60e03d","versionInt","title","Traffic Roi Calculator – App Para Gestores De Tráfego","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\nimport { Download, Upload, Plus, Trash2, RefreshCw, Calculator } from \"lucide-react\";\nimport { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, LineChart, Line, Legend } from \"recharts\";\n\n// Utils\nconst currencyFormat = (n: number, currency: string) =>\n new Intl.NumberFormat(\"pt-BR\", { style: \"currency\", currency }).format(isFinite(n) ? n : 0);\nconst pct = (n: number) => `${isFinite(n) ? (n * 100).toFixed(1) : \"0.0\"}%`;\nconst clamp0 = (n?: number) => (typeof n === 'number' && isFinite(n) ? Math.max(0, n) : 0);\n\n// Types\ntype ChannelRow = {\n id: string;\n nome: string;\n investimento: number; // ad spend\n receita: number; // revenue\n cliques?: number;\n leads?: number;\n conversoes?: number; // vendas\n // Funil por canal (opcional)\n adsLeads?: number;\n crmLeads?: number;\n descartados?: number;\n qualificados?: number;\n emQualificacao?: number;\n agendados?: number;\n assinatura?: number;\n fechados?: number;\n};\n\nconst newRow = (i: number): ChannelRow => ({\n id: crypto.randomUUID(),\n nome: `Canal ${i + 1}`,\n investimento: 0,\n receita: 0,\n});\n\nexport default function TrafficRoiCalculatorOnePage() {\n const [currency, setCurrency] = useState(\"BRL\");\n const [rows, setRows] = useState([newRow(0), newRow(1)]);\n const [feeType, setFeeType] = useState<\"fixed\" | \"pctSpend\" | \"pctRevenue\">(\"fixed\");\n const [feeValue, setFeeValue] = useState(2600);\n const [otherCosts, setOtherCosts] = useState(0);\n const [taxPct, setTaxPct] = useState(0);\n const [saveLocal, setSaveLocal] = useState(true);\n\n // Metas do funil (percentual da etapa anterior)\n const [targets, setTargets] = useState({\n toCRM: 0.80,\n toQualified: 0.40,\n toInQual: 0.50,\n toScheduled: 0.60,\n toSigned: 0.70,\n toClosed: 0.80,\n });\n const setT = (k: keyof typeof targets, v: number) => setTargets(prev => ({ ...prev, [k]: v }));\n\n // Funil Comercial (geral)\n const [funnel, setFunnel] = useState({\n adsLeads: 0, // leads no gerenciador\n crmLeads: 0, // leads que chegaram ao CRM\n descartados: 0,\n qualificados: 0,\n emQualificacao: 0,\n agendados: 0,\n assinatura: 0,\n fechados: 0,\n });\n const setF = (k: keyof typeof funnel, v: number) => setFunnel(prev => ({ ...prev, [k]: v }));\n\n // Load / Save local\n useEffect(() => {\n const saved = localStorage.getItem(\"traffic-roi-calc\");\n if (saved) {\n try {\n const parsed = JSON.parse(saved);\n setCurrency(parsed.currency ?? \"BRL\");\n setRows(parsed.rows ?? [newRow(0), newRow(1)]);\n setFeeType(parsed.feeType ?? \"fixed\");\n setFeeValue(parsed.feeValue ?? 0);\n setOtherCosts(parsed.otherCosts ?? 0);\n setTaxPct(parsed.taxPct ?? 0);\n if (parsed.funnel) setFunnel(parsed.funnel);\n if (parsed.targets) setTargets(parsed.targets);\n } catch {}\n }\n }, []);\n useEffect(() => {\n if (!saveLocal) return;\n const data = { currency, rows, feeType, feeValue, otherCosts, taxPct, funnel, targets };\n localStorage.setItem(\"traffic-roi-calc\", JSON.stringify(data));\n }, [currency, rows, feeType, feeValue, otherCosts, taxPct, funnel, targets, saveLocal]);\n\n // Totais\n const totals = useMemo(() => {\n const investimento = rows.reduce((s, r) => s + clamp0(r.investimento), 0);\n const receitaBruta = rows.reduce((s, r) => s + clamp0(r.receita), 0);\n const fee = feeType === \"fixed\" ? feeValue : feeType === \"pctSpend\" ? investimento * (feeValue / 100) : receitaBruta * (feeValue / 100);\n const receitaLiquida = receitaBruta * (1 - taxPct / 100);\n const investimentoTotal = investimento + fee + otherCosts;\n const lucro = receitaLiquida - investimentoTotal;\n const roi = investimentoTotal > 0 ? lucro / investimentoTotal : 0;\n const roas = investimento > 0 ? receitaBruta / investimento : 0;\n\n const leads = rows.reduce((s, r) => s + clamp0(r.leads), 0);\n const vendas = rows.reduce((s, r) => s + clamp0(r.conversoes), 0);\n const cpa = vendas > 0 ? investimento / vendas : 0;\n const cac = vendas > 0 ? investimentoTotal / vendas : 0;\n const cpl = leads > 0 ? investimento / leads : 0;\n\n const breakevenRevenue = investimentoTotal / (1 - taxPct / 100);\n const breakevenRoas = investimento > 0 ? breakevenRevenue / investimento : 0;\n\n return { investimento, receitaBruta, receitaLiquida, fee, otherCosts, investimentoTotal, lucro, roi, roas, leads, vendas, cpa, cac, cpl, breakevenRevenue, breakevenRoas };\n }, [rows, feeType, feeValue, otherCosts, taxPct]);\n\n const chartData = useMemo(() => rows.map(r => ({\n canal: r.nome,\n Investimento: clamp0(r.investimento),\n Receita: clamp0(r.receita),\n ROAS: clamp0(r.investimento) > 0 ? clamp0(r.receita) / clamp0(r.investimento) : 0,\n })), [rows]);\n\n // Conversões de etapa (geral)\n const step = (from: number, to: number) => (from > 0 ? to / from : 0);\n const totalPct = (n: number) => (funnel.adsLeads > 0 ? n / funnel.adsLeads : 0);\n const rateBadge = (rate: number, target: number) => {\n if (!isFinite(rate)) rate = 0;\n if (rate >= target) return 'bg-emerald-100 text-emerald-800';\n if (rate >= target * 0.8) return 'bg-yellow-100 text-yellow-800';\n return 'bg-rose-100 text-rose-800';\n };\n\n // Handlers\n const addRow = () => setRows(prev => [...prev, newRow(prev.length)]);\n const removeRow = (id: string) => setRows(prev => prev.filter(r => r.id !== id));\n const updateRow = (id: string, patch: Partial) => setRows(prev => prev.map(r => (r.id === id ? { ...r, ...patch } : r)));\n const loadPreset = () => {\n setRows([\n { id: crypto.randomUUID(), nome: \"Facebook\", investimento: 6500, receita: 123000, cliques: 20000, leads: 800, conversoes: 30, adsLeads: 1200, crmLeads: 900, descartados: 250, qualificados: 380, emQualificacao: 170, agendados: 115, assinatura: 58, fechados: 42 },\n { id: crypto.randomUUID(), nome: \"Instagram\", investimento: 0, receita: 15000, conversoes: 3, adsLeads: 150, crmLeads: 120, descartados: 40, qualificados: 45, emQualificacao: 20, agendados: 12, assinatura: 6, fechados: 4 },\n { id: crypto.randomUUID(), nome: \"Indicações\", investimento: 0, receita: 27000, conversoes: 6, adsLeads: 0, crmLeads: 60, descartados: 5, qualificados: 40, emQualificacao: 18, agendados: 14, assinatura: 9, fechados: 6 },\n { id: crypto.randomUUID(), nome: \"Clientes antigos\", investimento: 0, receita: 17500, conversoes: 7, adsLeads: 0, crmLeads: 70, descartados: 6, qualificados: 45, emQualificacao: 22, agendados: 16, assinatura: 10, fechados: 7 },\n ]);\n setFeeType(\"fixed\");\n setFeeValue(2600);\n setOtherCosts(0);\n setTaxPct(0);\n setFunnel({ adsLeads: 1350, crmLeads: 1150, descartados: 301, qualificados: 510, emQualificacao: 230, agendados: 157, assinatura: 83, fechados: 59 });\n setTargets({ toCRM: 0.8, toQualified: 0.4, toInQual: 0.5, toScheduled: 0.6, toSigned: 0.7, toClosed: 0.8 });\n };\n const exportJSON = () => {\n const blob = new Blob([JSON.stringify({ currency, rows, feeType, feeValue, otherCosts, taxPct, funnel, targets }, null, 2)], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url; a.download = \"traffic-roi-config.json\"; a.click();\n URL.revokeObjectURL(url);\n };\n const onImport = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0]; if (!file) return;\n const reader = new FileReader();\n reader.onload = () => {\n try {\n const json = JSON.parse(String(reader.result));\n setCurrency(json.currency ?? \"BRL\");\n setRows(json.rows ?? []);\n setFeeType(json.feeType ?? \"fixed\");\n setFeeValue(json.feeValue ?? 0);\n setOtherCosts(json.otherCosts ?? 0);\n setTaxPct(json.taxPct ?? 0);\n if (json.funnel) setFunnel(json.funnel);\n if (json.targets) setTargets(json.targets);\n } catch { alert(\"Arquivo inválido\"); }\n };\n reader.readAsText(file);\n };\n\n return (\n

\n {/* Cabeçalho */}\n

Calculadora de ROI – Gestor de Tráfego

\n \n \n

\n \n Salvar no navegador\n

\n\n {/* Barra Resumo Sticky */}\n

Investimento Total

{currencyFormat(totals.investimentoTotal, currency)}

Receita Bruta

{currencyFormat(totals.receitaBruta, currency)}

Lucro

{currencyFormat(totals.lucro, currency)}

ROI

{(totals.roi * 100).toFixed(1)}%

ROAS

{totals.roas.toFixed(2)}x

\n\n {/* Configurações */}\n \n Configurações\n \n

\n Moeda\n \n

\n Tipo de Fee\n \n

\n {feeType === \"fixed\" ? \"Valor do Fee\" : \"Percentual do Fee\"}\n setFeeValue(parseFloat(e.target.value)||0)} />\n

\n Outros Custos\n setOtherCosts(parseFloat(e.target.value)||0)} />\n

\n Impostos/Encargos (%)\n setTaxPct(parseFloat(e.target.value)||0)} />\n

\n\n {/* Metas do Funil */}\n

Metas do Funil (da etapa anterior)\n (semáforo: verde ≥ meta, amarelo ≥ 80% da meta, vermelho < 80%)\n

Ads → CRMsetT('toCRM', (parseFloat(e.target.value)||0)/100)} />

CRM → Qualif.setT('toQualified', (parseFloat(e.target.value)||0)/100)} />

Qualif. → Em Qualif.setT('toInQual', (parseFloat(e.target.value)||0)/100)} />

Em Qualif. → Agend.setT('toScheduled', (parseFloat(e.target.value)||0)/100)} />

Agend. → Assin.setT('toSigned', (parseFloat(e.target.value)||0)/100)} />

Assin. → FechadossetT('toClosed', (parseFloat(e.target.value)||0)/100)} />

\n \n \n\n {/* Tabela de Canais */}\n \n \n Canais\n \n \n \n

Canal

Investimento

Receita

Cliques

Leads

Vendas

Ações

\n {rows.map((r) => (\n

\n updateRow(r.id,{nome:e.target.value})}/>\n updateRow(r.id,{investimento: parseFloat(e.target.value)||0})} />\n updateRow(r.id,{receita: parseFloat(e.target.value)||0})} />\n updateRow(r.id,{cliques: e.target.value===\"\"? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>\n updateRow(r.id,{leads: e.target.value===\"\"? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>\n updateRow(r.id,{conversoes: e.target.value===\"\"? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>\n

\n \n

\n\n {/* Funil por canal (opcional) */}\n \n \n Detalhar funil do canal\n \n

Ads LeadsupdateRow(r.id,{adsLeads: e.target.value===''? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>

CRMupdateRow(r.id,{crmLeads: e.target.value===''? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>

Desc.updateRow(r.id,{descartados: e.target.value===''? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>

Qualif.updateRow(r.id,{qualificados: e.target.value===''? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>

Em Qualif.updateRow(r.id,{emQualificacao: e.target.value===''? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>

Agend.updateRow(r.id,{agendados: e.target.value===''? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>

Assin.updateRow(r.id,{assinatura: e.target.value===''? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>

FechadosupdateRow(r.id,{fechados: e.target.value===''? undefined : parseFloat(e.target.value)||0})} placeholder=\"-\"/>

\n\n {/* Mini barra empilhada */}\n {(() => {\n const total = clamp0(r.adsLeads) || 1;\n const parts = [\n { label: 'CRM', value: clamp0(r.crmLeads), color: 'bg-blue-200 text-blue-800' },\n { label: 'Desc.', value: clamp0(r.descartados), color: 'bg-rose-200 text-rose-800' },\n { label: 'Qualif.', value: clamp0(r.qualificados), color: 'bg-emerald-200 text-emerald-800' },\n { label: 'Em Qualif.', value: clamp0(r.emQualificacao), color: 'bg-yellow-200 text-yellow-800' },\n { label: 'Agend.', value: clamp0(r.agendados), color: 'bg-indigo-200 text-indigo-800' },\n { label: 'Assin.', value: clamp0(r.assinatura), color: 'bg-purple-200 text-purple-800' },\n { label: 'Fech.', value: clamp0(r.fechados), color: 'bg-green-300 text-green-900' },\n ];\n return (\n

\n {parts.map((p, i) => (\n

\n {p.value > 0 && {p.label} {Math.round((p.value/total)*100)}%}\n

\n ))}\n

\n );\n })()}\n\n {/* Tabelinha de taxas com semáforo */}\n

\n {(() => {\n const ads = clamp0(r.adsLeads);\n const crm = clamp0(r.crmLeads);\n const desc = clamp0(r.descartados);\n const qual = clamp0(r.qualificados);\n const emq = clamp0(r.emQualificacao);\n const ag = clamp0(r.agendados);\n const as = clamp0(r.assinatura);\n const fe = clamp0(r.fechados);\n const rowsRates = [\n { label: 'Ads→CRM', rate: step(ads, crm), target: targets.toCRM },\n { label: 'CRM→Qualif.', rate: step(Math.max(0, crm - desc), qual), target: targets.toQualified },\n { label: 'Qualif.→Em Qualif.', rate: step(qual, emq), target: targets.toInQual },\n { label: 'Em Qualif.→Agend.', rate: step(emq, ag), target: targets.toScheduled },\n { label: 'Agend.→Assin.', rate: step(ag, as), target: targets.toSigned },\n { label: 'Assin.→Fech.', rate: step(as || ag, fe), target: targets.toClosed },\n ];\n return rowsRates.map((it, idx) => (\n

\n {it.label}\n {pct(it.rate)}\n

\n ));\n })()}\n

\n \n \n \n

\n ))}\n \n \n\n {/* Gráficos */}\n \n Visualizações\n \n

\n \n \n \n \n \n currencyFormat(v, currency)} />\n \n \n \n \n \n

\n \n \n \n \n \n `${Number(v).toFixed(2)}x`} />\n \n \n \n

\n \n \n\n {/* Funil Comercial (Geral) */}\n \n \n Funil Comercial (Geral)\n \n \n

\n Leads (Gerenciador de Anúncios)\n setF('adsLeads', parseInt(e.target.value||'0', 10))} />\n

\n Leads no CRM\n setF('crmLeads', parseInt(e.target.value||'0', 10))} />\n

\n Descartados\n setF('descartados', parseInt(e.target.value||'0', 10))} />\n

\n Qualificados\n setF('qualificados', parseInt(e.target.value||'0', 10))} />\n

\n Em Qualificação\n setF('emQualificacao', parseInt(e.target.value||'0', 10))} />\n

\n Agendamentos\n setF('agendados', parseInt(e.target.value||'0', 10))} />\n

\n Assinatura de Contrato\n setF('assinatura', parseInt(e.target.value||'0', 10))} />\n

\n Fechados\n setF('fechados', parseInt(e.target.value||'0', 10))} />\n

\n\n

\n {(() => {\n const total = funnel.adsLeads || 1;\n const parts = [\n { label: 'CRM', value: funnel.crmLeads, color: 'bg-blue-200 text-blue-800' },\n { label: 'Desc.', value: funnel.descartados, color: 'bg-rose-200 text-rose-800' },\n { label: 'Qualif.', value: funnel.qualificados, color: 'bg-emerald-200 text-emerald-800' },\n { label: 'Em Qualif.', value: funnel.emQualificacao, color: 'bg-yellow-200 text-yellow-800' },\n { label: 'Agend.', value: funnel.agendados, color: 'bg-indigo-200 text-indigo-800' },\n { label: 'Assin.', value: funnel.assinatura, color: 'bg-purple-200 text-purple-800' },\n { label: 'Fechados', value: funnel.fechados, color: 'bg-green-300 text-green-900' },\n ];\n return (\n

\n {parts.map((p, i) => (\n

\n {p.value > 0 && {p.label} {Math.round((p.value/total)*100)}%}\n

\n ))}\n

\n );\n })()}\n

\n\n

\n \n \n \n \n \n \n \n \n \n \n {[\n { label: 'Entraram no CRM', val: funnel.crmLeads, from: funnel.adsLeads, target: targets.toCRM, color: 'text-blue-700' },\n { label: 'Descartados', val: funnel.descartados, from: funnel.crmLeads, target: 0, color: 'text-rose-700' },\n { label: 'Qualificados', val: funnel.qualificados, from: funnel.crmLeads - funnel.descartados, target: targets.toQualified, color: 'text-emerald-700' },\n { label: 'Em Qualificação', val: funnel.emQualificacao, from: funnel.qualificados, target: targets.toInQual, color: 'text-yellow-700' },\n { label: 'Agendamentos', val: funnel.agendados, from: funnel.emQualificacao, target: targets.toScheduled, color: 'text-indigo-700' },\n { label: 'Assinatura de Contrato', val: funnel.assinatura, from: funnel.agendados, target: targets.toSigned, color: 'text-purple-700' },\n { label: 'Fechados', val: funnel.fechados, from: funnel.assinatura || funnel.agendados, target: targets.toClosed, color: 'text-green-700' },\n ].map((row, idx) => (\n \n \n \n \n \n \n ))}\n \n

Etapa	Qtd	% da etapa anterior	% do total (Ads)
{row.label}	{row.val}	\n \n {(step(row.from, row.val) * 100 \|\| 0).toFixed(1)}%\n \n	\n {(totalPct(row.val) * 100 \|\| 0).toFixed(1)}%\n

\n \n \n\n {/* Métricas Avançadas */}\n \n \n Métricas avançadas\n \n

\n Funil\n \n

Leads{totals.leads || 0}

Vendas{totals.vendas || 0}

CPL{currencyFormat(totals.cpl || 0, currency)}

CPA{currencyFormat(totals.cpa || 0, currency)}

CAC{currencyFormat(totals.cac || 0, currency)}

\n \n Break-even\n \n

Receita p/ Empatar{currencyFormat(totals.breakevenRevenue || 0, currency)}

ROAS de Empate{totals.breakevenRoas.toFixed(2)}x

*Considera impostos/encargos e fee.

\n \n Parâmetros\n \n

Fee: {feeType === \"fixed\" ? currencyFormat(totals.fee, currency) : pct(totals.fee / (feeType === \"pctSpend\" ? totals.investimento : Math.max(1, totals.receitaBruta)))} ({currencyFormat(totals.fee, currency)})

Outros custos: {currencyFormat(totals.otherCosts, currency)}

Impostos: {taxPct}%

\n \n

\n \n \n \n\n \n \n Dica: defina metas por etapa nas Configurações e use o semáforo para atacar gargalos. Em seguida, detalhe o funil por canal para ver onde está a perda.\n \n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","1795300613542086911","traceTime",1776637359502]