const _logoImg = document.getElementById('logo-img'); if (_logoImg) _logoImg.onerror = function(){ this.style.display='none'; }; document.getElementById('btn-refresh').addEventListener('click', () => reloadActiveTab()); // ─── Formatação ──────────────────────────────────────────────────────────── const R = v => 'R$ ' + (+v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}); const N = v => (+v||0).toLocaleString('pt-BR'); const P = v => (+v||0).toFixed(2)+'%'; const VA = v => v==null ? '' : (v>=0 ? '▲ '+v.toFixed(1)+'%' : '▼ '+Math.abs(v).toFixed(1)+'%'); const VC = v => v==null ? 'flat' : v>=0 ? 'up' : 'down'; function kpi(lbl, val, variation) { return '

'+lbl+'

'+val+'

'+(variation!==undefined?'

'+VA(variation)+'

':'')+'

'; } function errHtml(msg) { return '

Erro ao carregar dados'+msg+'

'; } function tHead(cols) { return ''+cols.map(c=>''+c+'').join('')+''; } function tRows(rows) { return ''+rows.map(r=>''+r.map(c=>{const isNum=typeof c==='number'||(typeof c==='string'&&c!==''&&!isNaN(c.replace(/[R$\s%,.▲▼]/g,'')));return ''+c+'';}).join('')+'').join('')+''; } function badge(s) { const u=(s||'').toUpperCase(); if(u==='ACTIVE'||u==='ENABLED'||u.includes('ATIV')) return 'Ativa'; if(u==='PAUSED'||u.includes('PAUS')) return 'Pausada'; return ''+(s||'—')+''; } const PALETTE = ['#FF6B00','#CC0000','#ff8c33','#ff3333','#ffb347','#ff6666','#ffd700','#ff9966']; const charts = {}; function mkChart(id, type, labels, datasets, extra) { const el = document.getElementById(id); if (!el) return; if (charts[id]) charts[id].destroy(); charts[id] = new Chart(el, { type, data:{labels,datasets}, options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{labels:{color:'#888',font:{size:11},boxWidth:12}}}, scales:type!=='doughnut'?{x:{ticks:{color:'#666',font:{size:11}},grid:{color:'#1f1f1f'}},y:{ticks:{color:'#666',font:{size:11}},grid:{color:'#1f1f1f'}}}:undefined, ...(extra||{}), }, }); } // ─── Datas ───────────────────────────────────────────────────────────────── const now = new Date(); const d30 = new Date(); d30.setDate(d30.getDate()-30); const fmtD = d => d.toISOString().slice(0,10); document.getElementById('dt-since').value = fmtD(d30); document.getElementById('dt-until').value = fmtD(now); document.getElementById('ft-time').textContent = now.toLocaleString('pt-BR'); document.getElementById('last-update').textContent = 'Hoje '+now.toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'}); // ─── Tabs ────────────────────────────────────────────────────────────────── const panels = { meta:false, google:false, influencer:false, kpis:false }; document.querySelectorAll('.tab').forEach(tab => { tab.addEventListener('click', () => { document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active')); document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active')); tab.classList.add('active'); const t = tab.dataset.tab; document.getElementById('panel-'+t).classList.add('active'); if (t==='google'&&!panels.google) loadGoogle(); if (t==='influencer') { loadInfluencer(); panels.influencer=true; } if (t==='kpis') { loadKpis(); panels.kpis=true; } }); }); // ═══════════════════════════════════════════════════════════════════════════ // META ADS // ═══════════════════════════════════════════════════════════════════════════ const CAMP_COLS = [ {key:'name',label:'Campanha',lock:true,right:false}, {key:'status',label:'Status',lock:true,right:false}, {key:'spend',label:'Investimento',lock:true,right:true}, {key:'impressions',label:'Impressões',lock:false,right:true}, {key:'clicks',label:'Cliques',lock:false,right:true}, {key:'cpc',label:'CPC',lock:false,right:true}, {key:'ctr',label:'CTR',lock:false,right:true}, {key:'purchases',label:'Compras',lock:false,right:true}, {key:'costPerPurchase',label:'Custo/Compra',lock:false,right:true}, {key:'revenue',label:'Faturamento',lock:false,right:true}, {key:'roas',label:'ROAS',lock:false,right:true}, {key:'ticketMedio',label:'Ticket Médio',lock:false,right:true}, ]; const campColVis = Object.fromEntries(CAMP_COLS.map(c=>[c.key,true])); function campCellVal(c,key) { switch(key) { case 'name': return [c.name,c.name]; case 'status': return [badge(c.status),c.status]; case 'spend': return [R(c.spend),c.spend]; case 'impressions': return [N(c.impressions),c.impressions]; case 'clicks': return [N(c.clicks),c.clicks]; case 'cpc': return [R(c.cpc),c.cpc]; case 'ctr': return [P(c.ctr),c.ctr]; case 'purchases': return [N(c.purchases),c.purchases]; case 'costPerPurchase': return [R(c.costPerPurchase),c.costPerPurchase]; case 'revenue': return [R(c.revenue),c.revenue]; case 'roas': { const v=c.spend>0?c.revenue/c.spend:0; return [v?v.toFixed(2)+'x':'—',v]; } case 'ticketMedio': { const v=c.purchases>0?c.revenue/c.purchases:0; return [v?R(v):'—',v]; } default: return ['',0]; } } async function reloadMeta() { document.getElementById('meta-body').innerHTML='

Conectando à Meta Ads API…

'; const since=document.getElementById('dt-since').value; const until=document.getElementById('dt-until').value; const d=await fetch('/api/meta?since='+since+'&until='+until).then(r=>r.json()).catch(e=>({ok:false,error:e.message})); if(!d.ok){document.getElementById('meta-body').innerHTML=errHtml(d.error);return;} const t=d.totals; const roasTotal=t.spend>0?t.revenue/t.spend:0; const kpis=[ kpi('Impressões',N(t.impressions)), kpi('CTR',P(t.ctr)), kpi('Cliques',N(t.clicks)), kpi('Compras',N(t.purchases)), kpi('Custo/Compra',R(t.costPerPurchase)), kpi('Faturamento',R(t.revenue)), kpi('Investimento',R(t.spend)), kpi('ROAS',roasTotal?roasTotal.toFixed(2)+'x':'—'), ].join(''); const dDates=(d.daily||[]).map(x=>x.date.slice(5).replace('-','/')); const dFat=(d.daily||[]).map(x=>x.revenue); const dCompras=(d.daily||[]).map(x=>x.purchases); const names=d.campaigns.map(c=>c.name.length>30?c.name.slice(0,30)+'…':c.name); let campFilter='',campSort={key:'spend',dir:-1}; function renderCampTable() { const visCols=CAMP_COLS.filter(c=>campColVis[c.key]); const filtered=d.campaigns.filter(c=>c.name.toLowerCase().includes(campFilter.toLowerCase())); const sorted=[...filtered].sort((a,b)=>{const[,av]=campCellVal(a,campSort.key);const[,bv]=campCellVal(b,campSort.key);return typeof av==='number'?(av-bv)*campSort.dir:String(av).localeCompare(String(bv))*campSort.dir;}); const arrow=key=>key===campSort.key?(campSort.dir===-1?' ▼':' ▲'):''; const ths=visCols.map(col=>''+col.label+arrow(col.key)+'').join(''); const trs=sorted.map(c=>''+visCols.map(col=>{const[cell]=campCellVal(c,col.key);return ''+cell+'';}).join('')+'').join(''); document.getElementById('t-m-camp').innerHTML=''+ths+''+trs+''; } window.sortCamp=key=>{campSort=campSort.key===key?{key,dir:-campSort.dir}:{key,dir:-1};renderCampTable();}; window.toggleCampCol=key=>{if(CAMP_COLS.find(c=>c.key===key)?.lock)return;campColVis[key]=!campColVis[key];document.querySelectorAll('.toggle-btn').forEach(btn=>{if(btn.dataset.col===key)btn.classList.toggle('on',campColVis[key]);});renderCampTable();}; const toggleBtns=CAMP_COLS.filter(c=>!c.lock).map(c=>'').join(''); document.getElementById('meta-body').innerHTML= '

'+kpis+'

'+ '

Distribuição do Faturamento

'+ '

Investimento por Campanha

'+ '

Faturamento por Dia

'+ '

Compras por Dia

'+ '

Campanhas — '+d.period.since+' a '+d.period.until+'

'+ '

'+ ''+ '

Colunas:'+toggleBtns+'

'+ '

'; renderCampTable(); mkChart('ch-m-fat','doughnut',names,[{data:d.campaigns.map(c=>c.revenue),backgroundColor:PALETTE,borderColor:'#0d0d0d',borderWidth:2}]); mkChart('ch-m-inv','bar',names,[{label:'Investimento (R$)',data:d.campaigns.map(c=>c.spend),backgroundColor:'#FF6B0099',borderColor:'#FF6B00',borderWidth:1,borderRadius:4}]); mkChart('ch-m-fat-dia','bar',dDates,[{label:'Faturamento (R$)',data:dFat,backgroundColor:'#FF6B0088',borderColor:'#FF6B00',borderWidth:1,borderRadius:3}]); mkChart('ch-m-comp-dia','bar',dDates,[{label:'Compras',data:dCompras,backgroundColor:'#CC000088',borderColor:'#CC0000',borderWidth:1,borderRadius:3}]); panels.meta=true; } // ═══════════════════════════════════════════════════════════════════════════ // GOOGLE ADS // ═══════════════════════════════════════════════════════════════════════════ async function loadGoogle(force) { if(panels.google&&!force)return; const panel=document.getElementById('panel-google'); const kpiEl=document.getElementById('g-kpis'); const campEl=document.getElementById('t-g-camp'); const termEl=document.getElementById('t-g-terms'); kpiEl.innerHTML='

Conectando ao Google Ads…

'; const since=document.getElementById('dt-since').value; const until=document.getElementById('dt-until').value; const d=await fetch('/api/google-ads?since='+since+'&until='+until).then(r=>r.json()).catch(e=>({ok:false,error:e.message})); if(!d.ok){kpiEl.innerHTML=errHtml(d.error);return;} const warn=panel.querySelector('.warn-box'); if(warn)warn.remove(); const t=d.totals; kpiEl.innerHTML=[ kpi('Impressões',N(t.impressions)),kpi('CTR',P(t.ctr)),kpi('Cliques',N(t.clicks)), kpi('Conversões',N(t.conversions)),kpi('Custo/Conv.',R(t.costPerConv)), kpi('Valor Conv.',R(t.convValue)),kpi('Investimento',R(t.spend)),kpi('ROAS',t.roas.toFixed(2)+'x'), ].join(''); const cH=['Campanha','Status','Investimento','Impressões','Cliques','CPC','CTR','Conv.','Custo/Conv.','Valor Conv.']; campEl.innerHTML=tHead(cH)+tRows(d.campaigns.map(c=>[c.name,badge(c.status),R(c.spend),N(c.impressions),N(c.clicks),R(c.cpc),P(c.ctr),N(c.conversions),R(c.costPerConv),R(c.convValue)])); const tH=['Termo','Impressões','Cliques','CTR','CPC','Conv.']; termEl.innerHTML=tHead(tH)+tRows(d.searchTerms.map(s=>[s.term,N(s.impressions),N(s.clicks),P(s.ctr),R(s.cpc),N(s.conversions)])); const dLabels=d.daily.map(r=>{const p=r.date.split('-');return p[2]+'/'+p[1];}); mkChart('ch-g-conv','line',dLabels,[{label:'Conversões',data:d.daily.map(r=>r.conversions),borderColor:'#FF6B00',backgroundColor:'#FF6B0022',fill:true,tension:.4,pointBackgroundColor:'#FF6B00',pointRadius:4}]); mkChart('ch-g-spend','bar',d.campaigns.map(c=>c.name.slice(0,22)),[{label:'Investimento (R$)',data:d.campaigns.map(c=>c.spend),backgroundColor:'#CC000099',borderColor:'#CC0000',borderWidth:1,borderRadius:4}]); panels.google=true; } // ═══════════════════════════════════════════════════════════════════════════ // INFLUENCER // ═══════════════════════════════════════════════════════════════════════════ async function loadInfluencer(force) { if(panels.influencer&&!force)return; const el=document.getElementById('inf-body'); el.innerHTML='

Carregando planilha de Influencers…

'; const since=document.getElementById('dt-since').value; const until=document.getElementById('dt-until').value; const d=await fetch('/api/influencer?since='+since+'&until='+until).then(r=>r.json()).catch(e=>({ok:false,error:e.message})); if(!d.ok){el.innerHTML=errHtml(d.error);return;} const t=d.totals; const kpis=[kpi('Influencers Ativos',N(t.influencersAtivos)),kpi('Parceiros Ativos',N(t.parceirosAtivos)),kpi('Cupons',N(t.cupons)),kpi('Total Receita',R(t.totalReceita))].join(''); const cLabels=Object.keys(d.channels); const cVals=Object.values(d.channels); const dLabels=Object.keys(d.cupomByDate).sort(); const dVals=dLabels.map(k=>d.cupomByDate[k].count||0); const dValores=dLabels.map(k=>d.cupomByDate[k].valor||0); const dTicketMedio=dLabels.map(k=>{const{count,valor}=d.cupomByDate[k];return count>0?valor/count:0;}); const rH=['#','Influencer','Canal','Cupom','Receita','Status']; const rRows=d.ranking.map((r,i)=>[i+1,r.nome,r.canal,r.cupom,R(r.receita),badge(r.status)]); const diaMes=new Date().toLocaleString('pt-BR',{month:'long',year:'numeric'}); const diaLabels=(d.dailyMes||[]).map(x=>x.date.split('/')[0]); const diaVals=(d.dailyMes||[]).map(x=>x.valor); const diaCupons=(d.dailyMes||[]).map(x=>x.count); const maxCupons=Math.max(...dVals,1); const maxFat=Math.max(...dValores,1); const maxTM=Math.max(...dTicketMedio,1); const maxY2=Math.max(maxFat,maxTM); el.innerHTML= '

'+kpis+'

'+ '

Cupons ao Longo do Tempo (mensal)

'+ '

Receita por Canal

'+ '

Faturamento com Cupons por Dia — '+diaMes+'

'+ '

Ranking de Influencers por Receita

'+tHead(rH)+tRows(rRows)+'

'; mkChart('ch-i-time','line',dLabels,[ {label:'Cupons Utilizados',data:dVals,borderColor:'#FF6B00',backgroundColor:'#FF6B0025',fill:true,tension:.4,pointBackgroundColor:'#FF6B00',pointRadius:4,borderWidth:2,yAxisID:'y'}, {label:'Faturamento (R$)',data:dValores,borderColor:'#CC0000',backgroundColor:'transparent',fill:false,tension:.4,pointBackgroundColor:'#CC0000',pointRadius:4,borderWidth:2,yAxisID:'y2'}, {label:'Ticket Médio (R$)',data:dTicketMedio,borderColor:'#f59e0b',backgroundColor:'transparent',fill:false,tension:.4,pointBackgroundColor:'#f59e0b',pointRadius:4,borderDash:[5,4],borderWidth:1.5,yAxisID:'y2'}, ],{scales:{x:{ticks:{color:'#666',font:{size:11}},grid:{color:'#1f1f1f'}},y:{position:'left',min:0,max:maxCupons*2.2,ticks:{color:'#FF6B00',font:{size:11}},grid:{color:'#1f1f1f'},title:{display:true,text:'Cupons',color:'#FF6B00'}},y2:{position:'right',min:-(maxY2*0.6),max:maxY2*1.15,ticks:{color:'#CC0000',font:{size:11},callback:v=>v<0?'':'R$'+(v/1000).toFixed(0)+'k'},grid:{drawOnChartArea:false},title:{display:true,text:'R$',color:'#CC0000'}}}}); mkChart('ch-i-canal','doughnut',cLabels,[{data:cVals,backgroundColor:PALETTE,borderColor:'#0d0d0d',borderWidth:2}]); mkChart('ch-i-dia','bar',diaLabels,[ {label:'Faturamento (R$)',data:diaVals,backgroundColor:'#FF6B0088',borderColor:'#FF6B00',borderWidth:1,borderRadius:3,yAxisID:'y'}, {label:'Cupons',data:diaCupons,type:'line',borderColor:'#CC0000',backgroundColor:'transparent',tension:.4,pointRadius:3,pointBackgroundColor:'#CC0000',yAxisID:'y2'}, ],{scales:{x:{ticks:{color:'#666',font:{size:11}},grid:{color:'#1f1f1f'}},y:{position:'left',ticks:{color:'#FF6B00',font:{size:11}},grid:{color:'#1f1f1f'},title:{display:true,text:'R$',color:'#FF6B00'}},y2:{position:'right',ticks:{color:'#CC0000',font:{size:11}},grid:{drawOnChartArea:false},title:{display:true,text:'Cupons',color:'#CC0000'}}}}); } // ═══════════════════════════════════════════════════════════════════════════ // KPIs // ═══════════════════════════════════════════════════════════════════════════ async function loadKpis(force) { if(panels.kpis&&!force)return; const el=document.getElementById('kpi-body'); el.innerHTML='

Carregando KPIs…

'; const since=document.getElementById('dt-since').value; const until=document.getElementById('dt-until').value; const d=await fetch('/api/kpis?since='+since+'&until='+until).then(r=>r.json()).catch(e=>({ok:false,error:e.message})); if(!d.ok){el.innerHTML=errHtml(d.error);return;} const warnings=(d.errors||[]).map(e=>'

⚠️ '+e+'

').join(''); const k=d.kpis; const sessoes=k.sessoes||d.ga4?.sessoes||{atual:0,variacao:null}; const checkout=k.checkout||d.ga4?.checkout||{atual:0,variacao:null}; const kpis=[ kpi('Receita Total',R(k.receita?.atual),k.receita?.variacao), kpi('Compras',N(k.compras?.atual),k.compras?.variacao), kpi('Clientes',N(k.clientes?.atual),k.clientes?.variacao), kpi('Sessões',N(sessoes.atual),sessoes.variacao), kpi('Finalizações Checkout',N(checkout.atual),checkout.variacao), ].join(''); const cH=['Canal','Receita Total','Share %','Sessões','Compras','Tx. Conversão']; const cRows=(d.channels||[]).map(c=>[c.canal,R(c.receita),P(c.share),N(c.sessoes),N(c.compras),P(c.txConv)]); const emptyRow=cRows.length?'':'Dados de canal não disponíveis na planilha configurada'; const auLabels=(d.activeByDay||[]).map(x=>{const s=String(x.date);return s.slice(6)+'/'+s.slice(4,6);}); const auVals=(d.activeByDay||[]).map(x=>x.activeUsers); el.innerHTML= warnings+ '

'+kpis+'

'+ '

Usuários Ativos por Dia — Últimos 30 dias

'+ '

Desempenho por Canal de Aquisição

'+tHead(cH)+(cRows.length?tRows(cRows):emptyRow)+'

'; mkChart('ch-k-au','line',auLabels,[{label:'Usuários Ativos',data:auVals,borderColor:'#FF6B00',backgroundColor:'#FF6B0020',fill:true,tension:.4,pointRadius:auLabels.length>20?2:4,pointBackgroundColor:'#FF6B00'}]); } // ─── Reload active tab ───────────────────────────────────────────────────── function reloadActiveTab() { const t=document.querySelector('.tab.active')?.dataset.tab; if(t==='meta')reloadMeta(); else if(t==='influencer')loadInfluencer(true); else if(t==='kpis')loadKpis(true); else if(t==='google')loadGoogle(true); } // ─── Auto-refresh countdown timer ────────────────────────────────────────── const REFRESH_SECS=5*60; const CIRCUMFERENCE=2*Math.PI*8; let refreshRemaining=REFRESH_SECS; function tickTimer() { refreshRemaining--; const m=Math.floor(refreshRemaining/60),s=refreshRemaining%60; const el=document.getElementById('timer-text'); const circle=document.getElementById('timer-circle'); if(el)el.textContent=m+':'+String(s).padStart(2,'0'); if(circle){const used=1-(refreshRemaining/REFRESH_SECS);circle.style.strokeDashoffset=CIRCUMFERENCE*used;} if(refreshRemaining<=0){reloadActiveTab();refreshRemaining=REFRESH_SECS;const lu=document.getElementById('last-update');if(lu)lu.textContent='Hoje '+new Date().toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'});} } setInterval(tickTimer,1000); // ─── Init ────────────────────────────────────────────────────────────────── reloadMeta();