Nenhum alvo de impersonação permitido para este usuário.
`);\n picker = `\n
\n
\n
\n
Sessão inválida
\n
Não foi possível validar seu acesso. Faça login novamente pela Consultoria Natura para continuar.
\n
\n
`;\n }\n\n const topBar = d2.param('topBar','natura-x-piloto@pilotMTopBar');\n const userHeader = d2.param('userHeader','natura-x-piloto@pilotMUserHeader');\n const controls = d2.param('controls','natura-x-piloto@pilotMControls');\n const groupGrid = d2.param('groupGrid','natura-x-piloto@pilotMGroupGrid');\n const kpiGrid = d2.param('kpiGrid','natura-x-piloto@pilotMKpiGrid');\n const typeBadge = d2.param('typeBadge','natura-x-piloto@pilotMTypeBadge');\n\n // ── LIDER branch — own-performance drill view (no group grid) ──────────────\n if (!loading && data && data.perfil === 'lider'){\n const accL = d2.param('sectorAccordion','natura-x-piloto@pilotMSectorAccordion');\n const lh = (data.header) || {};\n const barL = d2.render(topBar, { title: 'Meu Desempenho', userName: (lh.leaderName || lh.name || '') }, { key:'barL', style:'display:block' });\n // STEP 3: a locked Líder (effective perfil = lider) has NO sector to return to,\n // so the back affordance is omitted entirely. Only a GV/GN who DRILLED down to a\n // leader sees \"Voltar ao Setor\".\n const backBtn = scopeLockedToGroup(d2) ? '' : `
\n `;\n const headerHostL = d2.render(userHeader, {\n name: (lh.leaderName || lh.name || ''),\n perfil: 'lider',\n nivel: (lh.nivel || data.nivel || ''),\n rede: (lh.rede || data.rede || ''),\n grupo: (lh.grupo || data.structureCode || ''),\n gvName: (lh.gvName || ''),\n cycle: (lh.cycle || data.cycle || ''),\n remuneracao: (data.remuneracao || 0),\n typeBadge: typeBadge\n }, { key:'hdrL-'+(data.structureCode||''), style:'display:block' });\n\n const aceleradores = (data.aceleradores) || [];\n const indicadores = (data.indicadores) || [];\n const acSection = aceleradores.length ? d2.render(accL, {\n items: aceleradores,\n sectionTitle: 'Aceleradores de Ganhos',\n startExpandedRef: (aceleradores[0] && aceleradores[0].ref) || ''\n }, { key:'acel-'+(data.structureCode||'')+'-'+aceleradores.length, style:'display:block' }) : '';\n const inSection = indicadores.length ? d2.render(accL, {\n items: indicadores,\n sectionTitle: 'Indicadores de Performance'\n }, { key:'indic-'+(data.structureCode||'')+'-'+indicadores.length, style:'display:block' }) : '';\n\n return `
\n
${barL}
\n ${impBar(d2)}\n
\n ${fechamentoChip(d2)}\n
${backBtn}
\n ${headerHostL}\n ${acSection}\n ${inSection}\n
\n
`;\n }\n\n // ── GV branch — GN-card grid + REDE toggle + Totalizador Rede ──────────────\n if (!loading && data && data.perfil === 'gv'){\n const gh = (data.header) || {};\n const rede = data.rede || (store ? store.get('rede','rede1') : 'rede1');\n const groupCard = d2.param('groupCard','natura-x-piloto@pilotMGroupCard');\n const totRede = (data.totalizadorRede) || {};\n const gns = (data.gns) || [];\n\n const barGv = d2.render(topBar, { title: 'Gerentes de Negócio', userName: (gh.gvName || '') }, { key:'barGv', style:'display:block' });\n const headerHostGv = d2.render(userHeader, {\n name: (gh.gvName || ''),\n perfil: 'gv',\n cycle: (gh.cycle || data.cycle || ''),\n sectorCount: (gh.sectorCount != null ? gh.sectorCount : gns.length),\n remuneracao: (totRede.remuneracao || 0)\n }, { key:'hdrGv-'+rede, style:'display:block' });\n\n const seg = (r, lbl) => `
${lbl} `;\n const toggle = `
${seg('rede1','REDE 1')}${seg('rede2','REDE 2')}
`;\n\n const totRedeComp = compOf(totRede);\n const totCard = (totRede.stats && totRede.stats.length) ? d2.render(groupCard, {\n variant: 'totalizador',\n totalLabel: (totRede.label || ('Totalizador Rede ' + String(rede).replace('rede',''))),\n rede: rede,\n stats: totRede.stats,\n remuneracao: (totRede.remuneracao || 0),\n composition: totRedeComp.composition,\n gainByRef: totRedeComp.gainByRef\n }, { key:'totrede-'+rede+'-'+(totRede.remuneracao||0), style:'display:block;height:100%;overflow:visible' }) : '';\n\n const gnCards = gns.map((g, i) => {\n const gnNatura = Number(g.compNatura || 0);\n const gnAvon = Number(g.compAvon || 0);\n const gnBonusAmbas = Number(g.compBonusAmbas || 0);\n const gnComp = { natura: gnNatura, avon: gnAvon, remunBase: (gnNatura + gnAvon), bonusAmbasMarcas: gnBonusAmbas, bonusTotal: gnBonusAmbas };\n const gnGain = (gnNatura + gnAvon) > 0 ? [{ ref: (g.rede==='rede2'?'lider-volume-pontos-marca':'lider-ativas-por-marca'), amount: (gnNatura + gnAvon), natura: gnNatura, avon: gnAvon }] : [];\n const host = d2.render(groupCard, {\n name: g.gnName,\n nivel: 'gn',\n rede: g.rede,\n remuneracao: g.remuneracao,\n codigoGrupo: g.sectorCode,\n drillCode: g.sectorCode,\n drillEvent: 'drill:gn',\n stats: g.stats || [],\n composition: gnComp,\n gainByRef: gnGain\n }, { key:'gn-'+g.sectorCode+'-'+(g.remuneracao||0), style:'display:block;height:100%;overflow:visible' });\n return `
${host}
`;\n }).join('');\n\n const totCell = totCard ? `
${totCard}
` : '';\n\n return `
\n
${barGv}
\n ${impBar(d2)}\n
\n ${fechamentoChip(d2)}\n ${headerHostGv}\n ${toggle}\n
Gerentes de Negócio · Rede ${String(rede).replace('rede','')}
\n
${totCell}${gnCards}
\n
\n
`;\n }\n\n const header = (data && data.header) || {};\n const tot = (data && data.totalizador) || {};\n const leaders = (data && data.leaders) || [];\n const sectorCode = header.sectorCode || (data && data.structureCode) || (store ? store.get('structureCode','') : '');\n const gnName = header.gnName || '';\n const sectorName = header.sectorName || ('Setor ' + sectorCode);\n const cycle = header.cycle || (data && data.cycle) || (store ? store.get('cycle','') : '');\n const rede = header.rede || tot.rede || '';\n\n const bar = d2.render(topBar, { title: 'Ranking de Líderes', userName: (gnName || sectorName) }, { key:'bar', style:'display:block' });\n\n const dataReady = !loading && !!data && !!data.perfil;\n if (!dataReady && !d2.state.loaderDone){\n const loadingCmp = d2.param('loading','natura-x-piloto@pilotMLoading');\n const loadDetail = (d2.state.loadDetail != null) ? d2.state.loadDetail : '';\n const loadingHost = d2.render(loadingCmp, {\n label: 'Carregando painel',\n detail: loadDetail,\n estimateMs: 18000,\n cardCount: 6,\n done: dataReady\n }, { key:'loader', style:'display:block', onDone: ()=>{ d2.state.loaderDone = true; d2.refresh(); } });\n return `
\n
${bar}
\n ${impBar(d2)}\n ${loadingHost}\n
`;\n }\n\n const headerHost = d2.render(userHeader, {\n name: (gnName || sectorName),\n perfil: perfil,\n rede: rede,\n sectorCode: sectorCode,\n cycle: cycle,\n remuneracao: tot.remuneracao || 0,\n leaderCount: (data.leaderCount != null ? data.leaderCount : leaders.length)\n }, { key:'hdr-'+sectorCode, style:'display:block' });\n\n const allGroups = mapLeaders(leaders);\n const cycles = [{ code: cycle }];\n const controlsHost = d2.render(controls, {\n groups: allGroups,\n cycles: cycles\n }, { key:'ctl', style:'display:block', onChange: (payload)=>{ d2.state.filterTick = Date.now(); } });\n\n const filtered = selectedGroup\n ? allGroups.filter(g => String(g.codigoGrupo) === String(selectedGroup))\n : allGroups;\n const totComp = compOf(tot);\n const showTot = !selectedGroup ? Object.assign({}, tot, { composition: totComp.composition, gainByRef: totComp.gainByRef }) : null;\n const titleSuffix = selectedGroup ? (' · Grupo ' + selectedGroup) : (gnName ? (' · ' + gnName) : '');\n const groupSection = d2.render(groupGrid, {\n groups: filtered,\n totalizador: showTot,\n sectionTitle: 'Ranking de Líderes' + titleSuffix\n }, { key:'groups-' + (selectedGroup || 'all'), style:'display:block' });\n\n const sectorItems = (data && data.sectorItems) || [];\n const sectorKpis = (data && data.sectorKpis) || [];\n const sectorAccordion = d2.param('sectorAccordion','natura-x-piloto@pilotMSectorAccordion');\n let sectorSection = '';\n if (!selectedGroup && sectorItems.length){\n sectorSection = d2.render(sectorAccordion, {\n items: sectorItems,\n sectionTitle: 'Indicadores do Setor',\n startExpandedRef: (sectorItems[0] && sectorItems[0].ref) || ''\n }, { key:'sectoritems-' + sectorCode + '-' + sectorItems.length, style:'display:block' });\n } else if (!selectedGroup && sectorKpis.length){\n sectorSection = d2.render(kpiGrid, {\n kpis: sectorKpis,\n sectionTitle: 'Indicadores do Setor'\n }, { key:'sectorkpis-' + sectorCode + '-' + sectorKpis.length, style:'display:block' });\n }\n\n const cameFromGv = !!(d2.shared.get('pilotGvRede','', { global:true }));\n const gnBack = cameFromGv ? `
` : '';\n\n return `
\n
${bar}
\n ${impBar(d2)}\n
\n ${fechamentoChip(d2)}\n ${gnBack}\n ${headerHost}\n ${controlsHost}\n ${groupSection}\n ${sectorSection}\n
\n
`;\n },\n async mounted(d2){\n // Bootstrap overrides from URL query (?perfil=gv&rede=rede1&structureCode=3253&gvName=...)\n // Lets a GV/GN/LIDER view be opened directly for verification without a role-switch UI.\n try{\n const store = d2.store('pilotDashboardStore');\n const q = new URLSearchParams((typeof location!=='undefined' && location.search) || '');\n if(store){\n if(q.get('perfil')) store.set('perfil', q.get('perfil'));\n if(q.get('rede')) store.set('rede', q.get('rede'));\n if(q.get('structureCode')) store.set('structureCode', q.get('structureCode'));\n if(q.get('gvName')) store.set('gvName', q.get('gvName'));\n if(q.get('cycle')){ store.set('cycle', q.get('cycle')); store.set('cycleForced', true); }\n }\n }catch(e){ d2.log('bootstrap query error', e); }\n // ── STEP 2/3 — resolve identity (token vs gv-admin) then seed + clamp scope ──\n // Runs AFTER the raw ?perfil=/?structureCode= bootstrap so the effective\n // identity's scope OVERRIDES any stale/hostile query param for a GN/Líder.\n await resolveIdentityAndSeed(d2);\n // ── ACCESS TRACKING (additive) — runs AFTER identity resolves so the session\n // carries the effective identity/scope. Reuses a stored sessionId (heartbeat)\n // or mints one (login). Never blocks the dashboard load below.\n await pilotTrackMount(d2);\n // Impersonation-bar UI events (gv-admin mode only; the render hides them in token mode).\n d2.on('.pil-switch','change',(e,el)=>{ onSwitchActingUser(d2, el && el.value); });\n d2.on('.pil-imp-open','click',()=>{ d2.state.impPickerOpen = true; d2.state.impQuery=''; ensureAllowedTargets(d2); d2.refresh(); });\n d2.on('.pil-imp-close','click',()=>{ d2.state.impPickerOpen = false; d2.refresh(); });\n d2.on('.pil-imp-search','input',(e,el)=>{ d2.state.impQuery = el ? el.value : ''; d2.refresh(); });\n d2.on('.pil-imp-pick','click',(e,el)=>{ onPickImpersonationTarget(d2, el && el.getAttribute('data-uid')); });\n d2.on('.pil-imp-exit','click',()=>{ onExitImpersonation(d2); });\n // Group selector: non-empty -> drill into that group's LIDER view; empty -> back to sector.\n d2.bus.on('filter:group', (v)=>{\n const store = d2.store('pilotDashboardStore');\n const code = (v || '');\n if(code){\n drillToLider(d2, code);\n } else if(store && store.get('perfil','gn') === 'lider'){\n backToSector(d2);\n } else {\n d2.state.selGroup = '';\n d2.refresh();\n }\n });\n // GV → GN drill: clicking a GN card emits 'drill:gn' with the sector code.\n d2.bus.on('drill:gn', (v)=>{ drillToGn(d2, (v || '')); });\n // Explicit back signal (from another component if needed)\n d2.bus.on('pilot:back', ()=>{ backToSector(d2); });\n // Back button inside this shell's LIDER header\n d2.on('.lider-back','click',()=>{ backToSector(d2); });\n // REDE 1 / REDE 2 toggle in the GV branch → switch rede param and refetch.\n d2.on('.rede-seg','click',(e,el)=>{\n const store = d2.store('pilotDashboardStore');\n const r = el && el.getAttribute('data-rede');\n if(!store || !r || store.get('rede','rede1') === r) return;\n pilotTrackView(d2, 'dashboard:gv:'+r, 'gv');\n store.set('rede', r);\n store.set('data', null);\n loadData(d2);\n });\n // GN → GV back button (only present when we drilled from a GV grid)\n d2.on('.gn-back','click',()=>{ backToGv(d2); });\n // App B: an invalid token shows the \"sessão inválida\" screen — do NOT fetch\n // default dashboard data (that would render a silent full-GV view = scope leak).\n const storeM = d2.store('pilotDashboardStore');\n if(storeM && storeM.get('pilotTokenInvalid', false)){\n pilotTrackEnd(d2); // token invalid → end any session from this browser session\n d2.state.loaderDone = true; d2.refresh(); return;\n }\n await loadData(d2);\n // Initial section view for the entry screen (after data resolves so perfil is known).\n try{\n const p = storeM ? storeM.get('perfil','gn') : 'gn';\n pilotTrackView(d2, 'dashboard:'+p, p);\n }catch(e){}\n // NOTE: intentionally NO 'pagehide'/'beforeunload' session-end — those fire on a\n // plain RELOAD too, which would end the session and break the one-session-per-browser\n // guarantee (a reload must REUSE the stored sessionId). Abandoned sessions are derived\n // as expired in the stats screen via the 30-min lastSeenAt TTL; explicit session-end is\n // reserved for logout / token-invalid (handled above and on the invalid-token branch).\n }\n};"}},"store":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"store"}}}},"api":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"api"}}}},"topBar":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"topBar"}}}},"userHeader":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"userHeader"}}}},"controls":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"controls"}}}},"kpiGrid":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"kpiGrid"}}}},"groupGrid":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"groupGrid"}}}}}}}}}},{"_id":"6a484afcb0a857d0aa64c9f0","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotMTokenProbe","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"export default {\n render(d2){\n return `
pending… `;\n },\n async mounted(d2, root){\n const show = (msg)=>{ const p=root.querySelector('.probe'); if(p) p.textContent=msg; };\n let out = [];\n // 1) d2.exec of the headless CD\n try {\n const r = await d2.exec({ component:'natura-x-piloto@pilotMTokens', params:{} });\n out.push('exec='+(r&&r.color?('OK '+r.color.naturaMagenta):(typeof r)));\n } catch(e){ out.push('exec THREW '+String(e).slice(0,60)); }\n // 2) d2.process\n try {\n const pr = d2.process ? d2.process('pilotMTokens') : null;\n const keys = pr ? Object.keys(pr).slice(0,8).join(',') : '';\n let val;\n try { val = pr && pr.invoke ? await pr.invoke({}) : undefined; } catch(e2){ val = 'invErr:'+String(e2).slice(0,40); }\n const shape = (val&&val.color)?('OK '+val.color.naturaMagenta):(typeof val==='string'?val:typeof val);\n out.push('invoke='+shape);\n } catch(e){ out.push('process THREW '+String(e).slice(0,40)); }\n show(out.join(' | '));\n }\n};"}}}}}}}},{"_id":"6a490aa7e3014dd5bb70bd32","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotMControls","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"function esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(//g,'>').replace(/\"/g,'"'); }\nexport default {\n css: `\n :host{display:block}\n .ctl{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:#FFFFFF;border:1px solid rgba(16,24,40,0.08);\n border-radius:14px;padding:14px 16px;box-sizing:border-box;box-shadow:0 1px 3px rgba(16,24,40,.06);\n font-family:Roboto,system-ui,sans-serif}\n .fld{display:flex;flex-direction:column;gap:5px;min-width:0}\n .fld.grow{flex:1 1 260px}\n .lbl{font:600 10px/1 'Roboto',sans-serif;letter-spacing:.6px;text-transform:uppercase;color:#6B7280}\n .sel{appearance:none;-webkit-appearance:none;width:100%;box-sizing:border-box;height:40px;padding:0 34px 0 12px;\n border:1px solid rgba(16,24,40,0.14);border-radius:10px;background:#FFFFFF;color:#1A1C1E;font:500 13px/1 'Roboto',sans-serif;\n cursor:pointer;transition:border-color 150ms ease-out,box-shadow 150ms ease-out;\n background-image:url(\"data:image/svg+xml;utf8,
\");\n background-repeat:no-repeat;background-position:right 10px center}\n .sel:focus{outline:none;border-color:#E5004B;box-shadow:0 0 0 3px rgba(229,0,75,.12)}\n .sel.cycle{min-width:150px}\n .clr{height:40px;padding:0 14px;border:1px solid rgba(16,24,40,0.14);border-radius:10px;background:#F7F8FA;color:#4A5560;\n font:600 12px/1 'Roboto',sans-serif;cursor:pointer;transition:background 150ms ease-out}\n .clr:hover{background:#EEF0F3}\n .clr[disabled]{opacity:.45;cursor:default}\n @media (max-width:640px){.ctl{flex-direction:column;align-items:stretch}.fld.grow{flex:1 1 auto}}\n `,\n render(d2){\n const store = d2.store('pilotDashboardStore');\n const groups = d2.param('groups', []) || [];\n const cycles = d2.param('cycles', []) || [];\n const selGroup = d2.shared.get('pilotSelectedGroup', '', { global:true });\n const selCycle = store ? (store.get('cycle','') || '') : '';\n\n const grpOpts = ['
Todos os grupos '].concat(\n groups.map(g => {\n const code = (g.codigoGrupo != null ? g.codigoGrupo : g.grupo);\n const nm = g.name || g.leaderName || '';\n const txt = code + (nm ? (' — ' + nm) : '');\n const sel = (String(code) === String(selGroup)) ? ' selected' : '';\n return `
${esc(txt)} `;\n })\n ).join('');\n\n const cycOpts = (cycles.length ? cycles : [selCycle]).map(c => {\n const code = (c && c.code != null) ? c.code : c;\n const sel = (String(code) === String(selCycle)) ? ' selected' : '';\n return `
Ciclo ${esc(code)} `;\n }).join('');\n\n return `
\n
\n Grupo \n ${grpOpts} \n
\n
\n Ciclo \n ${cycOpts} \n
\n
Limpar \n
`;\n },\n mounted(d2){\n d2.on('.group','change',(e,el)=>{\n const store = d2.store('pilotDashboardStore');\n if(store) store.set('selectedGroup', el.value || '');\n d2.shared.set('pilotSelectedGroup', el.value || '', { global:true });\n d2.bus.emit('filter:group', el.value || '');\n d2.emit('onChange', { type:'group', value: el.value || '' });\n });\n d2.on('.cycle','change',(e,el)=>{\n const store = d2.store('pilotDashboardStore');\n if(store){ store.set('cycle', el.value || ''); store.set('data', null); store.set('loading', false); }\n d2.emit('onChange', { type:'cycle', value: el.value || '' });\n });\n d2.on('.clr','click',()=>{\n const store = d2.store('pilotDashboardStore');\n if(store) store.set('selectedGroup', '');\n d2.shared.set('pilotSelectedGroup', '', { global:true });\n d2.bus.emit('filter:group', '');\n d2.emit('onChange', { type:'group', value:'' });\n });\n }\n};"}},"store":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"store"}}}},"groups":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"groups"}}}},"cycles":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"cycles"}}}},"onChange":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"onChange"}}}}}}}}}},{"_id":"6a4bbd245059efc0d0a5247e","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotMSectorAccordion","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const FALLBACK = { color:{ surface:'#FFFFFF', ink:'#1A1C1E', muted:'#6B7280', hairline:'rgba(16,24,40,0.08)', rampRed:'#FF1418', rampAmber:'#FAA000', rampGreen:'#29AC56', goldIap:'#FFCF30', naturaMagenta:'#E5004B', naturaOrange:'#EB6619', money:'#29AC56' } };\nlet TOK;\nfunction tok(d2){ if(!TOK){ try{ TOK = d2.call('natura-x-piloto@pilotMTokens'); }catch(e){} if(!TOK||!TOK.color) TOK = FALLBACK; } return TOK; }\nfunction statusColor(t, status){\n if(status==='green') return t.color.rampGreen;\n if(status==='amber') return t.color.rampAmber;\n if(status==='red') return t.color.rampRed;\n return t.color.muted;\n}\nfunction attColor(t, pct){ const p=Number(pct||0); if(p>=100) return t.color.rampGreen; if(p>=60) return t.color.rampAmber; return t.color.rampRed; }\nfunction num(n){ if(n===null||n===undefined) return '—'; try{ return Number(n).toLocaleString('pt-BR',{maximumFractionDigits:0}); }catch(e){ return String(n); } }\nfunction brl(n){ try{ return Number(n||0).toLocaleString('pt-BR',{style:'currency',currency:'BRL'}); }catch(e){ return 'R$ '+Number(n||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}); } }\nfunction esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(//g,'>'); }\nfunction svgIcon(iconId, color){\n const c = color || '#6B7280';\n const w = 'width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"'+c+'\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"';\n const P = {\n 'people': '
',\n 'crown': '';\n return ''+path+' ';\n}\nexport default {\n css: `\n :host{display:block;overflow:visible!important}\n /* Shadow fix: the accordion's own code-component host clips at its edge; pad the shadow-root\n content 18px on the sides + bottom so each hover-lifted line's box-shadow stays within the host. */\n .sa{display:flex;flex-direction:column;gap:12px;padding:2px 18px 18px;box-sizing:border-box}\n .sa-h{font:600 15px/1 'Roboto',system-ui,sans-serif;color:#1A1C1E;display:flex;align-items:center;gap:8px}\n .sa-h::before{content:'';width:4px;height:16px;border-radius:2px;background:linear-gradient(135deg,#E5004B 0%,#EB6619 100%)}\n .sa-list{display:flex;flex-direction:column;gap:12px}\n .it{background:#FFFFFF;border:1px solid rgba(16,24,40,0.08);border-radius:16px;box-sizing:border-box;overflow:visible;\n box-shadow:0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.08);\n transition:box-shadow 150ms ease-out,transform 150ms ease-out}\n .it:hover{box-shadow:0 4px 12px rgba(16,24,40,0.10);transform:translateY(-1px)}\n .it[data-open]{box-shadow:0 6px 18px rgba(16,24,40,0.12)}\n .it-head{display:flex;align-items:center;gap:14px;padding:16px;cursor:pointer;position:relative;border-radius:16px;\n transition:background 150ms ease-out}\n .it-head:hover{background:#F7F8FA}\n .it-ic{width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;\n background:#F3F4F6}\n .it[data-iap] .it-ic{background:rgba(255,207,48,0.22)}\n .it-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}\n .it-toprow{display:flex;align-items:center;gap:8px}\n .it-lbl{font:600 15px/1.2 'Roboto',sans-serif;color:#1A1C1E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n .it-iapchip{flex:none;display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:999px;\n background:#FFCF30;color:#5A4600;font:700 9.5px/1 'Roboto',sans-serif;letter-spacing:.5px}\n .it-bonuschip{flex:none;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 10px;border-radius:999px;\n font:700 10px/1 'Roboto',sans-serif;letter-spacing:.3px}\n .it-bonuschip.yes{background:rgba(41,172,86,0.14);color:#1E7D3E}\n .it-bonuschip.no{background:#F1F2F4;color:#8A929B}\n .it-bonuschip svg{width:12px;height:12px}\n .it-gain{flex:none;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 11px;border-radius:999px;\n background:rgba(41,172,86,0.12);color:#1E7D3E;font:700 13px/1 'Roboto',sans-serif;letter-spacing:.2px;white-space:nowrap;\n font-variant-numeric:tabular-nums}\n .it-gain.zero{background:#F1F2F4;color:#8A929B}\n .it-gain svg{width:13px;height:13px}\n .it-right{flex:none;display:flex;align-items:center;gap:10px}\n .it-bar{display:flex;align-items:center;gap:10px}\n .it-track{flex:1 1 auto;height:6px;border-radius:999px;background:rgba(16,24,40,0.07);overflow:hidden}\n .it-fill{height:100%;border-radius:999px;width:0;transition:width 500ms cubic-bezier(0.4,0,0.2,1)}\n .it-vals{flex:none;display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}\n .it-v{font:700 15px/1 'Roboto',sans-serif;color:#1A1C1E}\n .it-g{font:400 12px/1 'Roboto',sans-serif;color:#9AA1A9}\n .it-pct{flex:none;font:700 13px/1 'Roboto',sans-serif;min-width:42px;text-align:right}\n .it-caret{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;color:#6B7280;font-size:16px;\n transition:transform 280ms cubic-bezier(0.2,0,0,1)}\n .it[data-open] .it-caret{transform:rotate(180deg)}\n .it-body{max-height:0;opacity:0;overflow:hidden;\n transition:max-height 280ms cubic-bezier(0.2,0,0,1),opacity 280ms cubic-bezier(0.2,0,0,1)}\n .it[data-open] .it-body{max-height:900px;opacity:1}\n .it-bodyin{padding:2px 16px 16px 16px}\n .it-dettitle{font:700 10.5px/1 'Roboto',sans-serif;color:#6B7280;letter-spacing:.6px;text-transform:uppercase;margin:6px 0 12px}\n .it-kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}\n @media (prefers-reduced-motion: reduce){.it,.it-caret,.it-body,.it-fill{transition:none}.it:hover{transform:none}\n .it[data-open] .it-body{max-height:none}}\n `,\n render(d2){\n const t = tok(d2);\n const items = d2.param('items', []) || [];\n const title = d2.param('sectionTitle','Indicadores do Setor');\n const kpiCard = d2.param('kpiCard','natura-x-piloto@pilotMKpiCard');\n const brandMark = d2.param('brandMark','natura-x-piloto@pilotMBrandMark');\n if(!d2.state.open){\n const initial = {};\n const startRef = d2.param('startExpandedRef','');\n if(startRef) initial[startRef] = true;\n d2.state.open = initial;\n }\n const openMap = d2.state.open || {};\n\n const lines = items.map((it, idx) => {\n const ref = it.ref || ('item-'+idx);\n const open = !!openMap[ref];\n const main = it.main || {};\n const isIap = it.agrupamento === 'indicador-iap';\n const isBonus = !!it.isBonus;\n const status = main.status || 'none';\n const sCol = statusColor(t, status);\n const at = main.atingimento;\n const hasGoal = main.goal !== null && main.goal !== undefined && Number(main.goal) > 0;\n const clamped = (at !== null && at !== undefined) ? Math.max(0, Math.min(100, Number(at))) : 0;\n\n const iconTint = isIap ? '#8A6D00' : (sCol || t.color.muted);\n const iconHtml = svgIcon(it.icon || main.icon || '', iconTint);\n const iapChip = isIap ? `IAP ` : '';\n\n // right-side: bonus → chip; else value/goal + pct\n let rightHtml;\n if(isBonus){\n const will = it.willReceive === true;\n const chk = '${chk} Vai receber `\n : `${dash} Não atingido `;\n } else {\n const goalHtml = hasGoal ? `/ ${num(main.goal)} ` : '';\n rightHtml = `${num(main.value)} ${goalHtml}+${brl(g)} ` : '';\n } else {\n const upSvg = '${upSvg} +${brl(g)} `\n : `R$ 0 `;\n }\n }\n const rightGroup = `${rightHtml}${gainHtml} `;\n\n // slim progress bar in collapsed line (only when the main KPI has a goal)\n const barHtml = (hasGoal)\n ? `\n
\n
${(at!==null&&at!==undefined)?Number(at).toFixed(0)+'%':''} \n
Sem meta
`);\n\n // DETALHES sub-cards — related KPIs, else the main itself as a single detail card\n const detailSource = (it.related && it.related.length) ? it.related : [{\n code: main.code, label: main.label, value: main.value, goal: main.goal, description: it.detailNote || main.label\n }];\n const subCards = detailSource.map((k, ki) => {\n return d2.render(kpiCard, {\n cardTitle: k.label,\n value: k.value,\n goal: k.goal,\n description: k.description || '',\n iap: false\n }, { key: 'kc-'+ref+'-'+(k.code||ki)+'-'+(open?'o':'c'), style:'display:block;height:100%' });\n }).join('');\n\n const bodyHtml = `\n
Detalhes${(it.related&&it.related.length)?'':' do indicador'}
\n
${subCards}
\n
\n
\n ${iconHtml} \n \n ${esc(it.label)} ${iapChip} \n ${rightGroup}\n ⌄ \n
\n ${bodyHtml}\n
\n
${esc(title)}
\n
${lines}
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n ${String(label).replace(/\n 0% \n
\n
\n
${String(detail).replace(/\n
\n
\n
\n
${cards.join('')}
\n
\n
`;\n },\n mounted(d2, root){\n const start = (typeof performance!=='undefined' ? performance.now() : Date.now());\n const estimate = Math.max(3000, Number(d2.param('estimateMs', 18000)) || 18000);\n const fillEl = root.querySelector('[data-fill]');\n const pctEl = root.querySelector('[data-pct]');\n const detEl = root.querySelector('[data-detail]');\n const subEl = root.querySelector('[data-sub]');\n const rootEl = root.querySelector('[data-root]');\n const reduce = (typeof window!=='undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);\n let shown = 0; // 0..100, monotonic\n let fading = false;\n let finishing = false;\n let capActive = false; // whether the indeterminate stripe / creep phase is engaged\n let subLevel = 0; // 0 none, 1 \"consolidando\", 2 \"quase lá\"\n const paint = (p) => {\n const v = Math.max(0, Math.min(100, p));\n if(v > shown) shown = v; // never go backwards\n if(fillEl) fillEl.style.width = shown.toFixed(1) + '%';\n if(pctEl) pctEl.textContent = Math.round(shown) + '%';\n };\n // Engage the \"alive at the cap\" treatment: travelling indeterminate stripe (skipped under reduced motion).\n const setCap = (on) => {\n if(on === capActive) return;\n capActive = on;\n if(fillEl){ if(on && !reduce) fillEl.setAttribute('data-cap',''); else fillEl.removeAttribute('data-cap'); }\n };\n // Reassuring secondary line — appears after a few seconds, escalates once more further in.\n const setSub = (level) => {\n if(level === subLevel || !subEl) return;\n subLevel = level;\n if(level === 0){ subEl.removeAttribute('data-on'); return; }\n subEl.textContent = level >= 2 ? 'Quase lá…' : 'Consolidando dados do setor…';\n subEl.setAttribute('data-on','');\n };\n const done = () => {\n const p = d2.param('progress', null);\n return d2.param('done', false) === true || (typeof p === 'number' && p >= 1);\n };\n // Real-progress override (stretch): if a numeric `progress` (0..1) is supplied,\n // follow it instead of the eased estimate. Never regresses (paint clamps).\n d2.raf(() => {\n // refresh detail text live (real \"X de N\" if the shell supplies it)\n if(detEl){ const d = d2.param('detail',''); if(d !== detEl.textContent) detEl.textContent = String(d); }\n if(done()){\n if(!finishing){\n finishing = true;\n setCap(false); // drop the indeterminate stripe; this is a determinate finish now\n if(reduce){\n // reduced motion: jump straight to 100 and skip the fade entirely\n paint(100);\n d2.emit('onDone');\n } else {\n // VISIBLE completion: tween current -> 100 over ~350ms, hold ~150ms, then fade ~300ms.\n if(fillEl) fillEl.setAttribute('data-finish',''); // engages the 350ms width transition\n shown = 100;\n if(fillEl) fillEl.style.width = '100%';\n if(pctEl) pctEl.textContent = '100%';\n setSub(0);\n fading = true;\n setTimeout(() => { if(rootEl) rootEl.setAttribute('data-fading',''); }, 500); // 350 fill + 150 hold\n setTimeout(() => { d2.emit('onDone'); }, 800); // + ~300ms fade\n }\n }\n return false; // stop the loop once completion has been kicked off\n }\n const now = (typeof performance!=='undefined' ? performance.now() : Date.now());\n const elapsed = now - start;\n const pOverride = d2.param('progress', null);\n let target;\n if(typeof pOverride === 'number'){\n target = Math.min(90, pOverride * 100); // hold below the cap until `done`\n } else {\n target = eased(elapsed / estimate) * 100;\n }\n // Once the eased fill has reached the ~90% ceiling and we're still waiting, keep the bar alive:\n // - engage the travelling indeterminate stripe, and\n // - apply a slow asymptotic micro-creep 90 -> ~97 so the numbers keep inching (never hits 100).\n if(target >= 89.5){\n setCap(true);\n const secPastCap = Math.max(0, (elapsed - estimate) / 1000);\n target = Math.max(target, creep(secPastCap));\n }\n paint(target);\n // reassuring sub-label: appears after ~7s still loading, escalates after ~14s\n if(elapsed >= 14000) setSub(2);\n else if(elapsed >= 7000) setSub(1);\n });\n }\n};"}},"done":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"done"}}}},"estimateMs":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"estimateMs"}}}},"label":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"label"}}}},"detail":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"detail"}}}},"progress":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"progress"}}}},"cardCount":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"cardCount"}}}}}}}}}},{"_id":"6a4c0ae108850cd753f0647a","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotAdmCard","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const FALLBACK = {\n color:{surface:'#FFFFFF',ground:'#FAFAFB',ink:'#1A1C1E',muted:'#6B7280',hairline:'rgba(16,24,40,0.08)',naturaMagenta:'#E5004B',naturaOrange:'#EB6619',brandGradient:'linear-gradient(135deg,#E5004B 0%,#EB6619 100%)',gold:'#F7BE00',money:'#29AC56'},\n radius:{sm:8,md:12,lg:16,pill:999},\n type:{family:\"'Roboto',system-ui,-apple-system,sans-serif\",h2:'20px',title:'15px',body:'13px',caption:'11px'},\n shadow:{card:'0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.08)',raised:'0 8px 24px rgba(16,24,40,0.18)'}\n};\nlet TOK;\nfunction tok(d2){ if(!TOK){ try{ TOK = d2.call('natura-x-piloto@pilotMTokens'); }catch(e){} if(!TOK||!TOK.color) TOK = FALLBACK; } return TOK; }\n\nconst GLYPH = {\n 'brand-natura':'🌸','brand-avon':'💧','people':'👥','target':'🎯','crown':'👑',\n 'swap':'🔁','user-add':'➕','coins':'🪙','user':'👤'\n};\nconst ICON = (()=>{\n const S = (p)=>`
${p} `;\n return {\n edit:S('
'),\n dup:S('
')\n };\n})();\nconst AGRUP_LABEL = { 'ranking-stat':'Ranking', 'acelerador':'Acelerador', 'indicador-iap':'IAP' };\nconst PERFIL_LABEL = { gn:'GN', lider:'Líder', gv:'GV', all:'Todos' };\nconst REDE_LABEL = { rede1:'Rede 1', rede2:'Rede 2', both:'Ambas' };\nfunction sectionLabel(s){\n const m = {'leader-card':'Cartão Líder','sector':'Setor','sector-kpi':'KPI Setor','leader':'Líder','kpis':'KPIs','totalizador':'Totalizador'};\n return m[s] || (s||'—');\n}\nfunction esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(//g,'>').replace(/\"/g,'"'); }\n\nexport default {\n css: `\n :host{display:block}\n .pad{padding:9px;box-sizing:border-box;height:100%}\n .card{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:var(--rlg);\n padding:14px 16px;box-sizing:border-box;box-shadow:var(--sh);display:flex;gap:12px;align-items:flex-start;\n transition:box-shadow .15s ease-out, transform .15s ease-out;overflow:hidden}\n .card:hover{box-shadow:var(--shr);transform:translateY(-1px)}\n .card.drag{box-shadow:var(--shr);transform:scale(1.015)}\n .card.off{opacity:.55}\n .card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);border-radius:4px 0 0 4px}\n .handle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:34px;margin-top:2px;\n color:var(--muted);cursor:grab;border-radius:8px;font-size:16px;line-height:1;user-select:none;touch-action:none;\n transition:background .15s}\n .handle:hover{background:var(--ground);color:var(--ink)}\n .glyph{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;\n font-size:20px;background:var(--ground)}\n .body{flex:1 1 auto;min-width:0}\n .top{display:flex;align-items:center;gap:8px}\n .label{font:600 15px/1.25 var(--fam);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n .order{flex:0 0 auto;font:700 11px/1 var(--fam);color:var(--muted);background:var(--ground);border-radius:999px;padding:4px 8px}\n .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}\n .chip{font:600 11px/1 var(--fam);padding:5px 9px;border-radius:999px;background:var(--ground);color:var(--muted);white-space:nowrap}\n .chip.p{background:rgba(229,0,75,.10);color:var(--mag)}\n .kpi{margin-top:9px;font:500 12px/1.3 var(--fam);color:var(--muted)}\n .kpi b{color:var(--ink);font-weight:600}\n .tag{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font:700 10px/1 var(--fam);letter-spacing:.04em;\n text-transform:uppercase;padding:5px 8px;border-radius:999px}\n .tag.iap{background:rgba(247,190,0,.16);color:#9a7400}\n .actions{flex:0 0 auto;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s}\n .card:hover .actions{opacity:1}\n .act{width:30px;height:30px;border:none;border-radius:9px;background:var(--ground);color:var(--muted);cursor:pointer;\n font-size:13px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}\n .act:hover{background:rgba(229,0,75,.10);color:var(--mag)}\n .ic-svg{display:block;flex:0 0 auto}\n .handle .ic-svg{width:18px;height:18px}\n .act .ic-svg{width:16px;height:16px}\n .act.del:hover{background:rgba(229,0,75,.14);color:var(--mag)}\n .act.del.confirm{width:auto;padding:0 10px;background:var(--mag);color:#fff;font:700 11px/1 var(--fam);animation:cfpop .18s ease-out}\n @keyframes cfpop{from{transform:scale(.8);opacity:.5}to{transform:scale(1);opacity:1}}\n .toggle{flex:0 0 auto;width:38px;height:22px;border-radius:999px;background:#D1D5DB;position:relative;cursor:pointer;\n transition:background .18s;border:none;padding:0}\n .toggle.on{background:var(--green)}\n .toggle i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s;\n box-shadow:0 1px 2px rgba(0,0,0,.2)}\n .toggle.on i{transform:translateX(16px)}\n @media (prefers-reduced-motion: reduce){\n .card,.card:hover,.act,.toggle,.toggle i,.handle,.actions{transition:none!important}\n .card:hover{transform:none}\n }\n `,\n render(d2){\n const t = tok(d2);\n const it = d2.param('item', {}) || {};\n const dragging = !!d2.param('dragging', false);\n const kpiName = d2.param('kpiName','');\n const accent = it.isBonus ? t.color.gold : t.color.naturaMagenta;\n const glyph = GLYPH[it.icon] || '📊';\n const visible = it.visible !== false;\n const mainLine = it.mainKpiCode ? `KPI principal · ${esc(kpiName || it.mainKpiCode)} ` : 'Sem KPI principal';\n const rel = Array.isArray(it.relatedKpiCodes) ? it.relatedKpiCodes.length : 0;\n return `\n \n
\n
${ICON.grip}
\n
${glyph}
\n
\n
\n ${esc(it.label||'(sem título)')} \n #${esc(it.displayOrder!=null?it.displayOrder:'—')} \n
\n
\n ${esc(PERFIL_LABEL[it.perfil]||it.perfil||'—')} \n ${esc(REDE_LABEL[it.rede]||it.rede||'—')} \n ${esc(sectionLabel(it.section))} \n ${esc(AGRUP_LABEL[it.agrupamento]||it.agrupamento||'—')} \n
\n
${mainLine}${rel?` · ${rel} relacionado${rel>1?'s':''}`:''}
\n ${it.isBonus?`
★ IAP / Bônus `:''}\n
\n
\n ${ICON.edit} \n ${ICON.dup} \n ${d2.state.confirmDel\n ? `Excluir? `\n : `${ICON.del} `}\n
\n
\n
\n
\n \n ${esc(enumLabel(field,current))} ▾ \n \n \n
`;\n\n const mainPicker = `\n \n \n ${dr.mainKpiCode?esc(kpiName(kpis,dr.mainKpiCode)+' ('+dr.mainKpiCode+')'):'Selecione o KPI principal…'} ▾ \n \n \n
`;\n\n const relPicker = `\n \n \n Adicionar KPI relacionado… ▾ \n \n \n
`;\n\n return `\n \n
\n
\n
${isNew?'✨':'✎'}
\n
\n
${isNew?'Novo indicador':'Editar indicador'} \n
${isNew?'Adicione um indicador ao dashboard':esc(dr.ref||'')}
\n
\n
✕ \n
\n
\n \n
\n
\n
📋
Nenhum indicador neste filtro.
Use “+ Novo indicador” para começar.
` : '';\n const indA = dropAfter===id ? `
` : '';\n return `${ind}\n
\n
${d2.render(card,{ item:it, kpiName:kpiName(kpiList,it.mainKpiCode), dragging:dragId===id },{ key:id })}
\n
⠿ ${esc(d2.state.ghost.label||'')} `;\n g.style.transform = `translate3d(${d2.state.ghost.x+14}px,${d2.state.ghost.y-6}px,0)`;\n }\n};\n"}},"items":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"items"}}}},"kpiList":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"kpiList"}}}},"card":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"card"}}}},"orderVersion":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"orderVersion"}}}},"busy":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"busy"}}}}}}}}}},{"_id":"6a4c0c5afe6887479ea7e300","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotAdmScreen","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const FALLBACK = {\n color:{surface:'#FFFFFF',ground:'#FAFAFB',ink:'#1A1C1E',muted:'#6B7280',hairline:'rgba(16,24,40,0.08)',naturaMagenta:'#E5004B',naturaOrange:'#EB6619',brandGradient:'linear-gradient(135deg,#E5004B 0%,#EB6619 100%)',gold:'#F7BE00',money:'#29AC56'},\n radius:{sm:8,md:12,lg:16,pill:999},\n type:{family:\"'Roboto',system-ui,-apple-system,sans-serif\",h1:'28px',h2:'20px',title:'15px',body:'13px',caption:'11px'},\n shadow:{card:'0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.08)',raised:'0 8px 24px rgba(16,24,40,0.18)'}\n};\nlet TOK;\nfunction tok(d2){ if(!TOK){ try{ TOK = d2.call('natura-x-piloto@pilotMTokens'); }catch(e){} if(!TOK||!TOK.color) TOK = FALLBACK; } return TOK; }\nfunction esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(//g,'>').replace(/\"/g,'"'); }\n\nconst ICON = (()=>{\n const S = (p)=>`${p} `;\n return {\n plus:S('${opts.map(([v,l])=>`${esc(l)} `).join('')}
`;\n\n const listHost = loading\n ? `Carregando indicadores…
`\n : d2.render(d2.param('list','natura-x-piloto@pilotAdmList'), {\n items: filtered, kpiList: kpiList, card:'natura-x-piloto@pilotAdmCard', orderVersion: version\n }, {\n key:'admlist-'+(kpiList.length>0?'k1':'k0')+'-'+f.perfil+'-'+f.rede+'-'+f.section+'-'+(f.q||'').length\n });\n\n const formHost = d2.state.formOpen\n ? d2.render(d2.param('form','natura-x-piloto@pilotAdmForm'), {\n item: d2.state.formItem || null, kpiList: kpiList, openKey: d2.state.formKey || 1\n }, {\n key:'admform-'+(d2.state.formKey||1)\n })\n : '';\n\n return `\n \n
\n ${filtered.length} indicador${filtered.length===1?'':'es'}
\n
${listHost}
\n ${formHost}\n
${esc(d2.state.toast||'')}
\n
${p} `;\n return {\n edit:S('Nenhuma faixa ou tabela para este filtro.
\n
\n ${b.nivel?`${esc(b.nivel)} `:'— '}\n
\n
${b.brand?`${esc(b.brand)} `:'total '}
\n
\n
${nf(lo)} a ${hi>=9999?'∞':nf(hi)} ${isPct?'% de atingimento':''}
\n
\n
\n
${isPct?nf(b.value):money(b.value)}
\n
\n ${ICON.edit} \n ${armed?ICON.ok:ICON.del} \n
\n
${esc(bt.kpiName)} ` : (bt&&bt.kpiCode?`KPI ${esc(bt.kpiCode)} `:'sem KPI');\n const scopeTxt = bt ? `${esc(REDE_LABEL[bt.rede]||bt.rede||'')} · ${esc(PERFIL_LABEL[bt.perfil]||bt.perfil||'')}` : '';\n const editBtn = bt ? `${ICON.gear} ` : '';\n const inner = rows.length\n ? `${rows.map(b=>rowHtml(b,vt)).join('')}
`\n : `Nenhuma faixa nesta tabela ainda.
`;\n return `\n
\n
\n
\n
${esc(label)} \n
\n ${kpiTxt} \n ${esc(VT_LABEL[vt]||vt)} \n ${scopeTxt?`${scopeTxt} `:''}\n
\n
\n
${rows.length} \n ${editBtn}\n
\n ${inner}\n
${ICON.plus} Adicionar faixa em ${esc(label)}
\n
${groupHtml}
`;\n },\n mounted(d2){\n d2.on('[data-edit]','click',(e,el)=>{ d2.state.armDel=null; d2.bus.emit('rule:band:edit', findBand(d2, el.dataset.edit)); });\n d2.on('[data-add]','click',(e,el)=>{ d2.state.armDel=null; d2.bus.emit('rule:band:add', el.dataset.add); });\n d2.on('[data-edittable]','click',(e,el)=>{ d2.state.armDel=null; d2.bus.emit('rule:table:edit', findTable(d2, el.dataset.edittable)); });\n d2.on('[data-del]','click',(e,el)=>{\n const id = el.dataset.del;\n if(d2.state.armDel === id){ d2.state.armDel=null; d2.bus.emit('rule:band:del', findBand(d2,id)); }\n else { d2.state.armDel = id; d2.refresh(); setTimeout(()=>{ if(d2.state.armDel===id){ d2.state.armDel=null; d2.refresh(); } }, 3000); }\n });\n }\n};\nfunction cssVars(t){\n return `--surface:${t.color.surface};--ground:${t.color.ground};--ink:${t.color.ink};--muted:${t.color.muted};--hair:${t.color.hairline};--mag:${t.color.naturaMagenta};--grad:${t.color.brandGradient};--money:${t.color.money};--fam:${t.type.family};--shadowcard:${t.shadow.card}`;\n}\nfunction findBand(d2,id){ return (d2.param('bands',[])||[]).find(b=>b._id===id) || null; }\nfunction findTable(d2,ref){\n const bt = (d2.param('bandTables',[])||[]).find(x=>x.ref===ref) || null;\n if(!bt) return null;\n // Emit a plain band-table row shape the parent modal expects (strip derived kpiName).\n return { _id:bt._id, ref:bt.ref, label:bt.label, kpiCode:bt.kpiCode, rede:bt.rede, perfil:bt.perfil, valueType:bt.valueType, displayOrder:bt.displayOrder, active:bt.active };\n}"}},"bands":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"bands"}}}},"filter":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"filter"}}}},"flashId":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"flashId"}}}},"bandTables":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"bandTables"}}}}}}}}}},{"_id":"6a4c1473be5b19656f26461f","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotRuleBonusEditor","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const FALLBACK = {\n color:{surface:'#FFFFFF',ground:'#FAFAFB',ink:'#1A1C1E',muted:'#6B7280',hairline:'rgba(16,24,40,0.08)',naturaMagenta:'#E5004B',naturaOrange:'#EB6619',avonMagenta:'#E5014B',brandGradient:'linear-gradient(135deg,#E5004B 0%,#EB6619 100%)',gold:'#F7BE00',money:'#29AC56'},\n radius:{sm:8,md:12,lg:16,pill:999},\n type:{family:\"'Roboto',system-ui,-apple-system,sans-serif\",h1:'28px',h2:'20px',title:'15px',body:'13px',caption:'11px'},\n shadow:{card:'0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.08)',raised:'0 8px 24px rgba(16,24,40,0.18)'}\n};\nlet TOK;\nfunction tok(d2){ if(!TOK){ try{ TOK = d2.call('natura-x-piloto@pilotMTokens'); }catch(e){} if(!TOK||!TOK.color) TOK = FALLBACK; } return TOK; }\nfunction esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(//g,'>').replace(/\"/g,'"'); }\nfunction money(n){ try{ return Number(n||0).toLocaleString('pt-BR',{style:'currency',currency:'BRL',minimumFractionDigits:0,maximumFractionDigits:2}); }catch(e){ return 'R$'+n; } }\n\nconst ICON = (()=>{\n const S = (p)=>`${p} `;\n return {\n edit:S('${ICON.plus} Nova regra de bônus
`;\n\n let cards;\n if(bonuses.length===0){\n cards = `Nenhuma regra de bônus neste perfil. Crie a primeira com “Nova regra de bônus”.
`;\n } else {\n cards = bonuses.map(b=>{\n const isUnit=(b.payoutType||b.basis)==='per-unit';\n const val=(b.payoutValue!=null?b.payoutValue:b.amount)||0;\n const summ=summarize(b).replace(money(val), ''+money(val)+' ');\n const confirming = confirmDel===b._id;\n return `\n
\n
${esc(b.label||b.bonusType||'Bônus')}
\n
${isUnit?'Por unidade':'Total fixo'} \n
\n
\n ${esc(PERFIL_LABEL[b.perfil]||b.perfil||'')} \n ${esc(REDE_LABEL[b.rede]||b.rede||'')} \n
\n
${summ}
\n
\n ${ICON.edit} Editar \n ${ICON.dup} Duplicar \n ${confirming?'Confirmar?':ICON.del+' Excluir'} \n
\n
\n ${toolbar}\n
${cards}
\n ${renderModal(d2,t)}\n
${esc(l)} `; }\nfunction kpiOpts(cur){ return KPIS.map(k=>opt(k.code,k.label,cur)).join(''); }\nfunction renderModal(d2,t){\n if(!d2.state.modalOpen) return '';\n const m=d2.state.modal||{};\n const isNew=!m._id;\n const isUnit=m.payoutType==='per-unit';\n const conds=m.conditions||[];\n const condRows = conds.length? conds.map((c,i)=>`\n \n
Indicador ${kpiOpts(c.kpiCode)}
\n
Métrica ${opt('atingimento','Atingimento %',c.metric)}${opt('value','Valor',c.metric)}
\n
Op. ${opt('gte','≥',c.op)}${opt('gt','>',c.op)}${opt('eq','=',c.op)}
\n
Limite
\n
${ICON.x} \n
Nenhuma condição — o bônus é pago sempre (útil para aceleradores por unidade).
`;\n\n return `\n
\n
${isNew?'Nova regra de bônus':'Editar regra de bônus'} \n
Defina condições sobre indicadores e o pagamento. Nomes amigáveis dos indicadores.
\n\n
Nome da regra
\n\n
\n
Perfil ${opt('lider','Líder',m.perfil)}${opt('gn','GN',m.perfil)}
\n
Rede ${opt('rede1','Rede 1',m.rede)}${opt('rede2','Rede 2',m.rede)}
\n
\n\n
\n
Condições${isUnit?' (ignoradas em Por unidade)':''} ${ICON.plus} Condição
\n ${condRows}\n
\n\n
\n
Pagamento
\n
Tipo \n
\n Total fixo \n Por unidade \n
\n
\n
\n
${isUnit?'Valor por unidade (R$)':'Valor total (R$)'}
\n ${isUnit?`
Indicador (contagem) ${kpiOpts(m.perUnitKpiCode)}
`:''}\n
\n
\n\n
\n
Pré-visualização
\n
${summarize(normalize(m)).replace(money(Number(m.payoutValue)||0),''+money(Number(m.payoutValue)||0)+' ')}
\n
\n\n \n
\n
${p} `;\n return {\n x:S('\n
✅ \n
Fórmulas estruturadas são interpretadas ao vivo pelo cálculo. \n Monte a remuneração com blocos amigáveis — cada edição salva altera o ganho real (sem string Formula()).\n Afeta o cálculo ao vivo
\n
${banner}
Nenhuma fórmula neste perfil.
${banner}
${cards}
${renderPicker(d2,t,bandTables)}
{\n const {fm,p}=parseDouble(el.dataset.pup);\n mutate(d2,fm,st=>{ if(p>0){ const x=st.parcelas[p]; st.parcelas[p]=st.parcelas[p-1]; st.parcelas[p-1]=x; } });\n });\n d2.on('[data-pdown]','click',(e,el)=>{\n const {fm,p}=parseDouble(el.dataset.pdown);\n mutate(d2,fm,st=>{ if(p{\n const {fm,p}=parseDouble(el.dataset.pdel);\n mutate(d2,fm,st=>{ st.parcelas.splice(p,1); });\n });\n d2.on('[data-addparc]','click',(e,el)=>{\n const fm=el.dataset.addparc;\n mutate(d2,fm,st=>{ st.parcelas.push({ label:'Parcela '+(st.parcelas.length+1), factors:[] }); });\n });\n d2.on('[data-addfac]','click',(e,el)=>{\n const {fm,p}=parseDouble(el.dataset.addfac);\n d2.setState({ picker:{ fm, p, tab:'band', brand:'natura', constVal:'1' } });\n });\n // picker\n d2.on('[data-pktab]','click',(e,el)=>{ const pk={...(d2.state.picker||{})}; pk.tab=el.dataset.pktab; d2.setState({picker:pk}); });\n d2.on('[data-pkbrand]','click',(e,el)=>{ const pk={...(d2.state.picker||{})}; pk.brand=el.dataset.pkbrand; d2.setState({picker:pk}); });\n d2.on('[data-pkconst]','input',(e,el)=>{ const pk={...(d2.state.picker||{})}; pk.constVal=el.value; d2.state.picker=pk; });\n d2.on('[data-pkclose]','click',()=>d2.setState({picker:null}));\n d2.on('[data-pkbg]','click',(e,el)=>{ if(e.target===el) d2.setState({picker:null}); });\n d2.on('[data-pkpick-band]','click',(e,el)=>{\n const pk=d2.state.picker||{}; const ref=el.dataset.pkpickBand;\n const bts=d2.param('bandTables',[])||[]; const bt=bts.find(x=>x.ref===ref)||{};\n const brand = pk.brand||'natura';\n const fac={ kind:'band-table', ref, brand, label:(bt.label||ref), op:'mul' };\n addFactor(d2, pk.fm, pk.p, fac);\n });\n d2.on('[data-pkpick-kpi]','click',(e,el)=>{\n const pk=d2.state.picker||{}; const code=el.dataset.pkpickKpi;\n const kpis=d2.param('kpis',[])||[]; const k=kpis.find(x=>String(x.code)===String(code))||{};\n const fac={ kind:'kpi', kpiCode:String(code), label:(k.label||k.name||('KPI '+code)), op:'mul' };\n addFactor(d2, pk.fm, pk.p, fac);\n });\n d2.on('[data-pkpick-const]','click',()=>{\n const pk=d2.state.picker||{}; const n=Number(pk.constVal); const val=isNaN(n)?1:n;\n addFactor(d2, pk.fm, pk.p, { kind:'const', n:val, label:String(val), op:'mul' });\n });\n d2.on('[data-reset]','click',(e,el)=>{\n const fm=el.dataset.reset; const d=d2.state.drafts||{}; delete d[fm]; d2.state.drafts=d; d2.refresh(); recompute(d2,fm);\n });\n d2.on('[data-save]','click',(e,el)=>{\n const id=el.dataset.save;\n const base=(d2.param('formulas',[])||[]).find(x=>x._id===id); if(!base) return;\n const structure=(d2.state.drafts||{})[id]; if(structure==null) return;\n const next={ ...base, structure };\n const d=d2.state.drafts||{}; delete d[id]; d2.state.drafts=d;\n d2.bus.emit('rule:formula:save', next);\n });\n }\n};\n\nfunction parseTriple(s){ const [fm,p,f]=String(s).split('|'); return { fm, p:Number(p), f:Number(f) }; }\nfunction parseDouble(s){ const [fm,p]=String(s).split('|'); return { fm, p:Number(p) }; }\n\nfunction currentStructure(d2, fmId){\n const drafts = d2.state.drafts||{};\n if(drafts[fmId]!=null) return clone(drafts[fmId]);\n const base=(d2.param('formulas',[])||[]).find(x=>x._id===fmId);\n return clone((base&&base.structure) || emptyStructure());\n}\nfunction mutate(d2, fmId, fn){\n const st = currentStructure(d2, fmId);\n fn(st);\n const d = d2.state.drafts||{}; d[fmId]=st; d2.state.drafts=d;\n d2.refresh();\n recompute(d2, fmId);\n}\nfunction addFactor(d2, fmId, p, fac){\n mutate(d2, fmId, st=>{ if(st.parcelas[p]){ st.parcelas[p].factors.push(fac); } });\n d2.setState({ picker:null });\n}\nasync function recompute(d2, fmId){\n const base=(d2.param('formulas',[])||[]).find(x=>x._id===fmId);\n if(!base) return;\n const st = currentStructure(d2, fmId);\n const sample = SAMPLE[base.rede] || SAMPLE.rede1;\n const pv = {...(d2.state.previews||{})}; pv[fmId]={...(pv[fmId]||{}), loading:true}; d2.setState({previews:pv});\n try{\n const r = await d2.rush('pilotGetGroupEarnings').invoke({ structureCode:sample.code, cycle:sample.cycle, structureOverride:st });\n const data = (r && r.data) || r || {};\n const val = data.remuneracao;\n const base2 = data.breakdown && data.breakdown.components ? data.breakdown.components.structuredBase : null;\n const pv2 = {...(d2.state.previews||{})};\n pv2[fmId]={ loading:false, value:val, structuredBase:base2, sample:sample.code };\n d2.setState({previews:pv2});\n }catch(e){\n const pv2={...(d2.state.previews||{})}; pv2[fmId]={ loading:false, error:true }; d2.setState({previews:pv2});\n }\n}\n\nfunction renderCard(d2, t, fm, structure, dirty, pv, bandTables, flashId){\n const parcelas = structure.parcelas||[];\n const parcHtml = parcelas.map((p,pi)=>renderParcela(d2,t,fm._id,p,pi,parcelas.length,bandTables)).join(`${ICON.plus}
`);\n const line = humanLine(structure, bandTables);\n const resVal = pv.loading ? '' : (pv.error ? 'erro' : (pv.value!=null ? Number(pv.value).toLocaleString('pt-BR',{style:'currency',currency:'BRL'}) : '—'));\n const sampleCode = pv.sample || (SAMPLE[fm.rede]||SAMPLE.rede1).code;\n return `\n
\n ${esc(PERFIL_LABEL[fm.perfil]||fm.perfil)} \n ${esc(fm.rede)} \n Estruturada · ao vivo \n
\n
${humanHtml(line)}
\n
\n
\n Ganho — grupo ${esc(sampleCode)}${dirty?' (rascunho)':''} \n ${pv.loading?`${esc(resVal)} `}\n
\n
Cálculo ao vivo via motor de ganhos (mesmo avaliador do dashboard). \n
\n
\n ${parcHtml || `
Nenhuma parcela — adicione a primeira abaixo.
`}\n
\n
${ICON.plus} Parcela (nova soma) \n
\n Descartar \n Salvar fórmula \n
\n
${isDiv?'÷':'×'} `;\n }\n const tag=factorKindTag(f);\n chain += `\n ${esc(tag)} \n ${esc(factorLabel(f,bandTables))} \n \n ${ICON.left} \n ${ICON.right} \n ${ICON.x} \n \n `;\n });\n return `\n
\n
${esc(p.label||('Parcela '+(pi+1)))} \n
\n ${ICON.up} \n ${ICON.down} \n ${ICON.x} \n
\n
\n
\n ${chain}\n ${ICON.plus} fator \n
\n
× ').replace(/÷/g,'÷ ').replace(/\\+/g,'+ ');\n}\n\nfunction renderPicker(d2,t,bandTables){\n const pk = d2.state.picker;\n if(!pk) return '';\n const tab = pk.tab||'band';\n const kpis = d2.param('kpis',[])||[];\n // dedupe kpis by code\n const seen={}; const kpiList=[];\n (kpis||[]).slice().sort((a,b)=>(a.displayOrder||0)-(b.displayOrder||0)).forEach(k=>{ const c=String(k.code); if(!seen[c]){ seen[c]=1; kpiList.push({code:c,name:(k.label||k.name||c)}); } });\n const bts = (bandTables||[]).filter(b=>b && b.ref);\n const seg = `\n Tabela de faixas \n Indicador (KPI) \n Constante \n
`;\n let body='';\n if(tab==='band'){\n const brand=pk.brand||'natura';\n const brow=`\n ${[['natura','Natura'],['avon','Avon'],['','Total']].map(([v,l])=>`${esc(l)} `).join('')}\n
`;\n const opts = bts.map(b=>`\n
${esc(b.label||b.ref)}
${esc(b.valueType==='multiplier'?'% multiplicador':'R$ fixo')} · KPI ${esc(b.kpiCode||'—')}
\n
Nenhuma tabela de faixas.
`;\n body = `Escolha a marca e a tabela. O valor da faixa correspondente ao grupo entra no produto (multiplicador vira % automaticamente).
${brow}${opts}`;\n } else if(tab==='kpi'){\n const opts = kpiList.map(k=>`\n
${esc(k.name)}
Valor realizado do indicador · código ${esc(k.code)}
\n
Nenhum indicador.
`;\n body = `O valor realizado do indicador (ex.: pontos, ativas) entra direto como fator.
${opts}`;\n } else {\n body = `Um número fixo (ex.: 1.1 para +10%, 100 como base).
\n
\n `;\n }\n const foot = tab==='const' ? '' : ``;\n return `\n
Adicionar fator \n ${seg}\n ${body}\n ${foot}\n ${opts.map(([v,l])=>`${esc(l)} `).join('')}
`;\n const tabs = `${TAB_SEG.map(([v,l])=>`${esc(l)} `).join('')}
`;\n const rsstatus = ``;\n const perfilSeg = `Perfil ${PERFIL_SEG.map(([v,l])=>`${esc(l)} `).join('')}
Rede ${PERFIL_REDE_SEG.map(([v,l])=>`${esc(l)} `).join('')}
\n
Tabela ${seg('bandTable',TABLE_SEG,f.bandTable)}
\n
Nível ${seg('nivel',NIVEL_SEG,f.nivel)}
\n
Marca ${seg('brand',BRAND_SEG,f.brand)}
\n
＋ Nova tabela de faixas \n
Carregando regras…
`;\n } else if(tab==='bands'){\n const vis = perfilBands.filter(b=>(f.bandTable==='all'||b.bandTable===f.bandTable)&&(f.nivel==='all'||(b.nivel||'')===f.nivel)&&(f.brand==='all'||(b.brand||'')===f.brand));\n count = vis.length;\n // Pass band-tables (with valueType + kpi friendly names) so the grid groups by band-table and shows headers.\n const btForGrid = perfilTables.map(bt=>({ _id:bt._id, ref:bt.ref, label:bt.label, valueType:bt.valueType, rede:bt.rede, perfil:bt.perfil, kpiCode:bt.kpiCode, displayOrder:bt.displayOrder, active:bt.active, kpiName:kpiName(kpis,bt.kpiCode) }));\n bodyHost = d2.render('natura-x-piloto@pilotRuleBandGrid', { bands:perfilBands, filter:f, flashId:d2.state.flashId||'', bandTables:btForGrid }, { key:'bg-v'+selVer+'-'+perfil+'-'+rede+'-'+f.bandTable+'-'+f.nivel+'-'+f.brand+'-'+perfilBands.length+'-'+perfilTables.length+'-'+(d2.state.flashId||'') });\n } else if(tab==='bonus'){\n count = perfilBonuses.length;\n bodyHost = d2.render('natura-x-piloto@pilotRuleBonusEditor', { bonuses:perfilBonuses, flashId:d2.state.flashId||'', perfilHint:perfil }, { key:'bn-v'+selVer+'-'+perfil+'-'+rede+'-'+perfilBonuses.length+'-'+(d2.state.flashId||'') });\n } else {\n count = perfilFormulas.length;\n const btForFormula = perfilTables.map(bt=>({ _id:bt._id, ref:bt.ref, label:bt.label, valueType:bt.valueType, rede:bt.rede, perfil:bt.perfil, kpiCode:bt.kpiCode }));\n bodyHost = d2.render('natura-x-piloto@pilotRuleFormulaEditor', { formulas:perfilFormulas, bandTables:btForFormula, kpis:kpis, flashId:d2.state.flashId||'' }, { key:'fm-v'+selVer+'-'+perfil+'-'+rede+'-'+perfilFormulas.length+'-'+perfilTables.length+'-'+(d2.state.flashId||'') });\n }\n\n const scopeLabel = `${PERFIL_LABEL[perfil]||perfil} · ${REDE_LABEL[rede]||rede}`;\n const countLabel = tab==='bands' ? `${count} faixa${count===1?'':'s'} · ${perfilTables.length} tabela${perfilTables.length===1?'':'s'}` : tab==='bonus' ? `${count} regra${count===1?'':'s'} de bônus` : `${count} fórmula${count===1?'':'s'}`;\n const metaLabel = `${scopeLabel} — ${countLabel}`;\n const draftHint = isDraft ? `Editando rascunho v${esc(selectedRs.version)} — não afeta ciclos usando outra versão.` : '';\n const baseHint = tab==='bands' ? `Faixas de tabelas já referenciadas pelo cálculo impactam ganhos ao vivo. Uma tabela nova só afeta o cálculo após ser referenciada por uma fórmula (construtor de fórmulas — próxima etapa).` : '';\n const metaHint = [draftHint, baseHint].filter(Boolean).join(' ');\n\n return `\n \n
${perfilSeg}${redeSeg}
\n ${filterBar}\n
${metaLabel} ${esc(metaHint)} `:''}
\n
${bodyHost}
\n ${renderModal(d2,t)}\n ${renderTableModal(d2,t,kpis)}\n
${esc(d2.state.toast||'')}
\n
\n
\n
${isNew?'Nova faixa':'Editar faixa'} \n
${esc(TABLE_LABEL[m.bandTable]||m.bandTable||'')} · ${esc(m.rede||'')} · ${esc(vtLabel)}
\n
\n
Nível \n ${['diamante','ouro','prata',''].map(v=>`${v||'—'} `).join('')} \n
\n
Marca \n ${['natura','avon',''].map(v=>`${v||'total'} `).join('')} \n
\n
\n
\n
Mín %
\n
Máx %
\n
Valor (resultado) \n
${isPct?'%':'R$'}
\n
\n
\n
${esc(valNote)}
\n \n
\n
\n
\n
${isNew?'Nova tabela de faixas':'Editar tabela de faixas'} \n
Uma tabela agrupa faixas por KPI. ${isNew?'Ela fica inerte até ser referenciada por uma fórmula.':esc('Slug: '+(m.ref||''))}
\n
\n
\n
KPI vinculado \n — ${kpiList.map(k=>`${esc(k.name)} (${esc(k.code)}) `).join('')}
\n
\n
\n
Rede \n ${['rede1','rede2'].map(v=>`${v==='rede1'?'Rede 1':'Rede 2'} `).join('')} \n
\n
Perfil \n ${[['lider','Líder'],['gn','GN']].map(([v,l])=>`${l} `).join('')} \n
\n
Tipo de valor \n ${VALUETYPE_SEG.map(([v,l])=>`${l} `).join('')} \n
\n
\n ${isNew?`
Tabela nova: as faixas dela ainda NÃO afetam o cálculo. Só passam a valer quando uma fórmula referenciar esta tabela (construtor de fórmulas — próxima etapa).
`:''}\n \n
\n
${l.glyph} ${esc(l.label)}\n
\n A \n AdministraçãoPainel de Remuneração \n
\n
${links}
\n
\n
⌂ Início \n
\n
${c.glyph} \n
${esc(c.title)} ${esc(c.tag)} \n
${esc(c.desc)}
\n
Abrir → \n
\n
\n
Administração do Painel \n
Central de configuração do piloto Natura. Gerencie os indicadores do dashboard e as regras de remuneração a partir de um só lugar.
\n
\n
${cards}
\n
${p} `;\n return {\n edit:S('${esc(STATUS_LABEL[s]||s)} `;\n}\n\nfunction renderCard(d2, rs, bands, formulas, bonuses, cycles){\n const v = rs.version;\n const nb = countBy(bands,v), nf = countBy(formulas,v), nbo = countBy(bonuses,v);\n const bc = boundCycles(cycles,v);\n const bcLabel = bc.length ? bc.map(c=>esc(c.code)).join(', ') : 'nenhum ciclo';\n return `\n
\n
\n
v${esc(v)}
\n ${statusChip(rs.status)}\n
\n
\n ${ICON.edit} Editar \n ${ICON.dup} Duplicar \n
\n
\n
${esc(rs.label||'—')}
\n
\n ${nb} faixas${nf} fórmulas${nbo} bônus
\n
Ciclos vinculados: ${bcLabel}
\n \n
\n
\n
${esc(title)} \n
${esc(sub)}
\n
\n
\n ${(!isNew&&!isDup)?`
Status \n ${STATUS_ORDER.map(s=>`${STATUS_LABEL[s]} `).join('')} \n
`:''}\n ${canDelete?'':(!isNew&&!isDup?`
Só é possível excluir um rascunho sem ciclos vinculados. Esta versão está protegida.
`:'')}\n \n
\n
\n \n
\n ${loading?`
Carregando rulesets…
`:`
${cards}
`}\n
\n ${renderEditModal(d2)}\n
${esc(d2.state.toast||'')}
\n
${p} `;\n return { plus:S('v${esc(r.version)} — ${esc(r.label||'')} [${esc(RS_STATUS_LABEL[r.status]||r.status||'')}] `).join('');\n}\n\nfunction renderRow(d2, c, rulesets){\n const st = c.status||'open';\n return `\n
\n
${esc(c.code)}
\n
${esc(c.label||'—')}
\n
\n
\n ${esc(STATUS_LABEL[st]||st)} \n ${c.isCurrent?`● Atual `:''}\n ${esc(rsLabel(rulesets,c.rulesetVersion))} \n
\n
\n
\n Ruleset vinculado \n ${rsOptions(rulesets, c.rulesetVersion)} \n
\n
\n Status \n ${['open','closed'].map(s=>`${STATUS_LABEL[s]} `).join('')} \n
\n
\n Ciclo atual \n
\n
Salvar \n
\n
\n \n
\n ${loading?`
Carregando ciclos…
`:rows}\n
\n ${renderNewModal(d2,rulesets)}\n
${esc(d2.state.toast||'')}
\n
\n
\n
Novo ciclo \n
Cadastre um ciclo e vincule-o a um ruleset. O código é a chave (ex.: 202611).
\n
\n
Código
\n
Status ${['open','closed'].map(s=>`${STATUS_LABEL[s]} `).join('')}
\n
\n
\n
\n
Ruleset vinculado ${sorted.map(r=>`v${esc(r.version)} — ${esc(r.label||'')} `).join('')}
\n
\n \n
\n
${p} `;\n return {\n edit:S('${esc(BRAND_LABEL[b]||b)} `;\n}\nfunction iconGlyph(icon){ return ICON_GLYPH[icon]||'🎯'; }\n\nfunction renderCard(d2, k, kpis){\n const refs = refCount(kpis, k);\n const src = k.source||'performance-api';\n const armed = d2.state.confirmDel===k._id;\n return `\n
${iconGlyph(k.icon)}
\n
\n
\n ${esc(k.name||'(sem nome)')} \n #${esc(k.code||'—')} \n
\n
\n ${brandChip(k.brand)}\n ${esc(SOURCE_LABEL[src]||src)} \n ${k.hasGoal?`🎯 Com meta `:`Sem meta `}\n ${k.iap?`IAP `:''}\n ${refs>0?`${refs}× uso `:''}\n
\n ${k.hasGoal&&k.goalKey?`
meta: ${esc(k.goalKey)}
`:''}\n ${k.description?`
${esc(String(k.description).slice(0,140))}${String(k.description).length>140?'…':''}
`:''}\n
\n
\n ${ICON.edit} \n ${ICON.dup} \n ${armed\n ? `${ICON.ok} ${ICON.x} `\n : `${ICON.del} `}\n
\n
${iconGlyph(i)} ${i} `).join('');\n}\nfunction brandOptions(cur){\n return ['natura','avon','total'].map(b=>`${BRAND_LABEL[b]} `).join('');\n}\n\nfunction fieldsMarkup(d2, m, isNew){\n const src = m.source||'performance-api';\n const isBricks = src==='databricks-query';\n return `\n \n
Nome do indicador
\n
Marca ${brandOptions(m.brand)}
\n
\n
Origem do dado \n
\n Performance API \n Databricks query — em breve \n \n
Mapeie um indicador da Performance API pelo código de índice. A origem por consulta Databricks chega em breve.
\n
\n
\n
Código do índice (Performance API)
\n
Ícone ${iconOptions(m.icon||'target')}
\n
\n
Ícone ${iconOptions(m.icon||'target')}
\n
Origem
\n
\n
\n Possui meta \n
\n
\n Indicador de acompanhamento (IAP) \n
\n
\n
\n
Editar indicador \n
Código #${esc(m.code||'—')} · propriedades intrínsecas do KPI. A exibição no dashboard (agrupamento, seção, ordem) fica no editor de Indicadores.
\n ${refs>0?`
⚠️ Este código é usado por ${refs} outro registro. Alterações no significado do indicador podem afetar itens do dashboard, tabelas de faixas e bônus que apontam para #${esc(m.code)}.
`:''}\n ${fieldsMarkup(d2, m, false)}\n \n
\n
\n
\n
Novo indicador \n
Mapeie uma métrica de negócio a partir do código de índice da Performance API. O código do índice vira o código (chave) do KPI — pronto para ser escolhido nos itens do dashboard, tabelas de faixas e bônus.
\n ${fieldsMarkup(d2, m, true)}\n \n
\n
\n \n
\n ${loading?`
Carregando indicadores…
`:(rows||`
Nenhum indicador encontrado${q?` para “${esc(d2.state.q)}”`:''}.
`)}\n
\n ${renderEditModal(d2,kpis)}\n ${renderNewModal(d2)}\n
${esc(d2.state.toast||'')}
\n
${p} `;\n return {\n down:S('cópia ${lbl} ${parts.length?`${esc(parts.join(' · '))} copiados `:''}
`;\n }\n if(act==='update'){\n const diff = buildDiff(rec).filter(d=>d.hasAfter && JSON.stringify(d.before)!==JSON.stringify(d.after));\n const annotations = buildDiff(rec).filter(d=>!d.hasAfter);\n if(diff.length===0 && annotations.length>0){\n return annotations.map(d=>`${esc(d.key)}: ${esc(fmtVal(d.before))}
`).join('');\n }\n if(diff.length===0){\n return `Sem alterações de campo detectadas.
`;\n }\n return diff.slice(0,6).map(d=>\n `${esc(d.key)}: ${esc(fmtVal(d.before))} → ${esc(fmtVal(d.after))}
`\n ).join('') + (diff.length>6?`+${diff.length-6} outro(s) campo(s)
`:'');\n }\n const kf = keyFields(rec);\n if(kf.length===0) return `${act==='delete'?'Registro removido.':'Registro criado.'}
`;\n return `${kf.map(f=>`${esc(f.key)} ${esc(fmtVal(f.val))}
`;\n}\n\nfunction rowMarkup(d2, rec){\n const act = effectiveAction(rec);\n const meta = ACTION_META[act] || {label:act,cls:'update'};\n const et = String(rec.entityType||'');\n const etLabel = ENTITY_LABEL[et]||et||'—';\n const etGlyph = ENTITY_GLYPH[et]||'•';\n const lbl = friendlyLabel(rec);\n const id = String(rec._id||'');\n const expanded = d2.state.expanded===id;\n let fullJson = '';\n try{ fullJson = JSON.stringify(rec.changes||{}, null, 2); }catch(e){ fullJson='{}'; }\n return `\n
\n
\n
\n
\n ${esc(actorInitials(rec.actorEmail))} \n ${esc(rec.actorEmail||'—')} \n ${esc(meta.label)} \n ${etGlyph} ${esc(etLabel)}${esc(relTime(d2, rec.at))} \n
\n
\n ${lbl?`${esc(lbl)} `:''}\n #${esc(rec.entityId||'—')} \n
\n
${summaryMarkup(rec)}
\n \n ${expanded?`
${esc(fullJson)} `:''}\n
\n
${esc(c.label)} `).join('');\n const actionChips = ACTION_FILTERS.map(c=>`${esc(c.label)} `).join('');\n const dateChips = DATE_PRESETS.map(c=>`${esc(c.label)} `).join('');\n const actorOpts = ['Todos os autores '].concat(\n actors.map(a=>`${esc(a)} `)\n ).join('');\n\n return `\n \n
\n ${loading\n ? `
Carregando histórico…
`\n : (rows ? `
${rows}
` : `
Nenhum evento de auditoria encontrado com os filtros atuais.
`)}\n
\n
',\n kpis:'',\n regras:'',\n rulesets:'',\n auditoria:'',\n estatisticas:'',\n rightArrow:'${SVG[name]||''} `; }\n\nconst SECTIONS = [\n { id:'indicadores', label:'Indicadores', icon:'indicadores', tag:'Code · DnD', desc:'Reordene, edite, duplique ou oculte os indicadores exibidos no dashboard. Arraste pelos punhos para reorganizar.' },\n { id:'kpis', label:'KPIs', icon:'kpis', tag:'Code · Definições', desc:'Gerencie as definições dos indicadores (KPIs) que o painel referencia. Edite nome, meta, marca e IAP, ou crie um novo mapeando um código de índice da Performance API.' },\n { id:'regras', label:'Regras', icon:'regras', tag:'Code · Remuneração', desc:'Ajuste faixas, bônus e fórmulas por perfil (Líder / GN) que compõem o cálculo de ganhos.' },\n { id:'rulesets', label:'Rulesets', icon:'rulesets', tag:'Code · Versionamento', desc:'Versione as regras de remuneração. Duplique um ruleset ativo para preparar o próximo ciclo sem tocar no conjunto em produção.' },\n { id:'ciclos', label:'Ciclos', icon:'ciclos', tag:'Code · Vínculo', desc:'Vincule cada ciclo a um ruleset e controle status/ciclo atual. Trocar o ruleset de um ciclo muda o cálculo daquele ciclo.' },\n { id:'consultas', label:'Consultas', icon:'consultas', tag:'Code · Databricks', desc:'Biblioteca de consultas SQL parametrizadas ({{param}}) executadas ao vivo no Databricks. Crie, edite, teste consultas e consulte o calendário de ciclos por grupo.' },\n { id:'auditoria', label:'Auditoria', icon:'auditoria', tag:'Code · Somente leitura', desc:'Histórico somente-leitura de \"quem alterou o quê e quando\": KPIs, faixas, bônus, fórmulas, rulesets e ciclos. Filtre por entidade, ação, autor e período; expanda para ver o diff completo.' },\n { id:'acesso', label:'Acessos', icon:'acesso', tag:'Code · Somente leitura', desc:'Registro de impersonações e acessos ao painel: quem visualizou como quem, quando, com qual escopo e ciclo. Estatísticas de uso e tabela do mais recente ao mais antigo.' },\n { id:'estatisticas',label:'Estatísticas', icon:'estatisticas', tag:'Code · Somente leitura', desc:'Painel de uso: sessões ativas agora, logins ao longo do tempo, distribuição por perfil / modo / rede, usuários mais ativos, seções mais acessadas e mix de dispositivo/entrada.' }\n];\n\n// section typeId + which shell params each one needs, mapped to the child's expected param names.\nfunction sectionCfg(d2){\n return {\n indicadores: { type:'natura-x-piloto@pilotAdmScreen', params:{\n items:d2.params.items, kpis:d2.params.kpis, writer:d2.params.itemWriter,\n list:'natura-x-piloto@pilotAdmList', form:'natura-x-piloto@pilotAdmForm' } },\n kpis: { type:'natura-x-piloto@pilotKpiAdmScreen', params:{\n kpis:d2.params.kpis, writer:d2.params.ruleWriter } },\n regras: { type:'natura-x-piloto@pilotRuleAdmScreen', params:{\n bands:d2.params.bands, bonuses:d2.params.bonuses, formulas:d2.params.formulas,\n rulesets:d2.params.rulesets, bandTables:d2.params.bandTables, kpis:d2.params.kpis,\n writer:d2.params.ruleWriter } },\n rulesets: { type:'natura-x-piloto@pilotRulesetAdmScreen', params:{\n rulesets:d2.params.rulesets, bands:d2.params.bands, formulas:d2.params.formulas,\n bonuses:d2.params.bonuses, cycles:d2.params.cycles, writer:d2.params.ruleWriter } },\n ciclos: { type:'natura-x-piloto@pilotCycleAdmScreen', params:{\n cycles:d2.params.cycles, rulesets:d2.params.rulesets, writer:d2.params.ruleWriter } },\n consultas: { type:'natura-x-piloto@pilotQueryLibAdmScreen', params:{\n queryLib:d2.params.queryLib, queryCalendar:d2.params.queryCalendar,\n queryWriter:d2.params.queryWriter, runner:d2.params.runner } },\n auditoria: { type:'natura-x-piloto@pilotAuditAdmScreen', params:{\n audit:d2.params.audit } },\n acesso: { type:'natura-x-piloto@pilotAccessLogAdmScreen', params:{\n accessLog:d2.params.accessLog } },\n estatisticas: { type:'natura-x-piloto@pilotAccessStatsAdmScreen', params:{\n sessions:d2.params.sessions, accessLog:d2.params.accessLog } }\n };\n}\n\nexport default {\n css: `\n :host{display:block}\n .app{min-height:100%;height:auto;display:flex;flex-direction:column;background:var(--ground);font-family:var(--fam)}\n .bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;height:62px;box-sizing:border-box;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--hair)}\n .brand{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 6px 6px 0;margin-right:8px;border-radius:10px}\n .brand .logo{width:26px;height:26px;border-radius:8px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;font:800 14px/1 var(--fam)}\n .brand .name{font:800 15px/1 var(--fam);color:var(--ink);letter-spacing:-.2px}\n .brand .name small{display:block;font:600 10px/1.3 var(--fam);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}\n .links{display:flex;gap:4px;margin-left:6px;flex-wrap:wrap}\n .item{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;cursor:pointer;font:700 13px/1 var(--fam);color:var(--muted);\n background:none;border:none;transition:background .15s,color .15s}\n .item:hover{background:var(--ground);color:var(--ink)}\n .item[data-active]{color:var(--mag);background:rgba(229,0,75,.10)}\n .g{width:17px;height:17px;flex:none}\n .spacer{margin-left:auto}\n .home-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;cursor:pointer;font:700 12px/1 var(--fam);color:var(--muted);\n background:none;border:1px solid var(--hair);transition:background .15s,color .15s}\n .home-btn:hover{background:var(--ground);color:var(--ink)}\n .home-btn[data-active]{color:var(--mag);border-color:rgba(229,0,75,.30);background:rgba(229,0,75,.06)}\n .home-btn .g{width:16px;height:16px}\n .slot{flex:1 1 auto;min-height:600px}\n .sechost{display:block;width:100%}\n .home{min-height:100%;height:auto;box-sizing:border-box;background:var(--ground);font-family:var(--fam);padding:40px 44px 64px}\n .inner{max-width:1000px;margin:0 auto}\n .hero h1{margin:0;font:800 34px/1.1 var(--fam);color:var(--ink);letter-spacing:-.6px}\n .hero p{margin:8px 0 0;font:400 15px/1.5 var(--fam);color:var(--muted);max-width:640px}\n .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:34px}\n .card{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:26px;cursor:pointer;\n box-shadow:var(--shadowcard);transition:box-shadow .2s,transform .2s;overflow:hidden}\n .card:hover{box-shadow:var(--shadowraised);transform:translateY(-3px)}\n .card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad);opacity:0;transition:opacity .2s}\n .card:hover::after{opacity:1}\n .card .ico{width:52px;height:52px;border-radius:14px;background:rgba(229,0,75,.10);display:inline-flex;align-items:center;justify-content:center;color:var(--mag)}\n .card .ico svg{width:26px;height:26px}\n .card h2{margin:16px 0 0;font:800 21px/1.15 var(--fam);color:var(--ink);letter-spacing:-.3px}\n .card .tag{display:inline-block;margin-top:8px;font:700 10px/1 var(--fam);letter-spacing:.06em;text-transform:uppercase;\n color:var(--mag);background:rgba(229,0,75,.10);padding:5px 9px;border-radius:999px}\n .card p{margin:14px 0 0;font:400 13.5px/1.55 var(--fam);color:var(--muted)}\n .card .go{margin-top:18px;display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--fam);color:var(--mag)}\n .card .go svg{width:15px;height:15px}\n @media (prefers-reduced-motion: reduce){ .item,.home-btn,.card{transition:none!important} .card:hover{transform:none} }\n `,\n render(d2){\n const t = tok(d2);\n const section = d2.state.section || 'home';\n const vars = `--surface:${t.color.surface};--ground:${t.color.ground};--ink:${t.color.ink};--muted:${t.color.muted};--hair:${t.color.hairline};--mag:${t.color.naturaMagenta};--grad:${t.color.brandGradient};--fam:${t.type.family};--shadowcard:${(t.shadow&&t.shadow.card)||FALLBACK.shadow.card};--shadowraised:${(t.shadow&&t.shadow.raised)||FALLBACK.shadow.raised}`;\n\n const links = SECTIONS.map(s=>`${icon(s.icon)}${esc(s.label)} `).join('');\n const nav = `\n
\n A \n AdministraçãoPainel de Remuneração \n
\n
${links}
\n
\n
${icon('home')}Início \n
\n
${icon(s.icon)} \n
${esc(s.label)} ${esc(s.tag)} \n
${esc(s.desc)}
\n
Abrir ${icon('rightArrow')} \n
\n
\n
Administração do Painel \n
Central de configuração do piloto Natura. Gerencie os indicadores do dashboard e as regras de remuneração a partir de um só lugar.
\n
\n
${cards}
\n
Seção desconhecida
`;\n slot = `${inner}
`;\n }\n\n return `${nav}${slot}
`;\n },\n mounted(d2){\n if(!d2.state.section) d2.state.section = 'home';\n d2.on('[data-sec]','click',(e,el)=>{\n const next = el.dataset.sec;\n if(next && next!==d2.state.section){ d2.state.section = next; if(d2.root && d2.root.scrollTo) d2.root.scrollTo(0,0); }\n });\n }\n};"}},"items":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"items"}}}},"kpis":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"kpis"}}}},"itemWriter":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"itemWriter"}}}},"bands":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"bands"}}}},"bonuses":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"bonuses"}}}},"formulas":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"formulas"}}}},"rulesets":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"rulesets"}}}},"bandTables":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"bandTables"}}}},"cycles":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"cycles"}}}},"ruleWriter":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"ruleWriter"}}}},"audit":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"audit"}}}},"accessLog":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"accessLog"}}}},"sessions":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"sessions"}}}},"queryLib":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"queryLib"}}}},"queryCalendar":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"queryCalendar"}}}},"queryWriter":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"queryWriter"}}}},"runner":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"runner"}}}}}}}}}},{"_id":"6a4ce9aed961b870ddee86db","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotSimulador","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const FALLBACK_TOK = {\n color:{ surface:'#FFFFFF', ground:'#FAFAFB', ink:'#1A1C1E', muted:'#6B7280', hairline:'rgba(16,24,40,0.08)',\n naturaMagenta:'#E5004B', naturaOrange:'#EB6619', brandGradient:'linear-gradient(135deg,#E5004B 0%,#EB6619 100%)',\n rampRed:'#FF1418', rampAmber:'#FAA000', rampGreen:'#29AC56', gold:'#F7BE00', money:'#29AC56' },\n radius:{ sm:8, md:12, lg:16, pill:999 },\n type:{ family:\"'Roboto',system-ui,-apple-system,sans-serif\" },\n shadow:{ card:'0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.08)', raised:'0 4px 12px rgba(16,24,40,0.10)' },\n media:{ natura:'https://natura-x-piloto.data2.media/file/UrhVLdPDEZCXToLgJDPW8',\n avon:'https://natura-x-piloto.data2.media/file/HqLhKqINaRUI9OSBjYGFh',\n lockup:'https://natura-x-piloto.data2.media/file/H0P_N-7AQzQOg_VJMBWzV' }\n};\nlet TOK;\nfunction tok(d2){ if(!TOK){ try{ TOK = d2.call('natura-x-piloto@pilotMTokens'); }catch(e){} if(!TOK||!TOK.color) TOK = FALLBACK_TOK; } return TOK; }\nfunction esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(//g,'>').replace(/\"/g,'"'); }\nfunction brl(n){ const v = Number(n)||0; return v.toLocaleString('pt-BR',{ style:'currency', currency:'BRL' }); }\nfunction num(n){ const v = Number(n); return isFinite(v) ? v.toLocaleString('pt-BR',{ maximumFractionDigits:0 }) : '—'; }\nfunction pct(n){ if(n==null||!isFinite(Number(n))) return '—'; return (Number(n)).toLocaleString('pt-BR',{ maximumFractionDigits:1 })+'%'; }\nfunction pctClass(a){ if(a==null||!isFinite(Number(a))) return 'n'; const v=Number(a); if(v>=100) return 'g'; if(v>=80) return 'a'; return 'r'; }\n\nfunction icon(name, color, size){\n const s = size||18; const c = color||'#6B7280';\n const A = `xmlns=\"http://www.w3.org/2000/svg\" width=\"${s}\" height=\"${s}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${c}\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"`;\n const P = {\n people:``,\n crown:``,\n coins:``,\n flag:``,\n calc:``,\n check:``,\n back:`${P[name]||''} `;\n}\nfunction dashIcon(iconId, color){\n const c = color || '#6B7280';\n const w = `width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${c}\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"`;\n const P = {\n 'people':``,\n 'crown':``;\n return `${path} `;\n}\nfunction brandMark(t, brand, size){\n const s = size||18;\n const src = String(brand).toLowerCase()==='avon' ? t.media.avon : t.media.natura;\n const label = String(brand).toLowerCase()==='avon' ? 'Avon' : 'Natura';\n return `=Number(r.minPct) && v<=Number(r.maxPct)) return i; }\n return -1;\n}\n// Faixa label: '%' suffix for multiplier / atingimento-style tables, plain range for fixed (ativas-total).\nfunction faixaLabel(r, valueType, kpiCode){\n const suffix = (valueType==='multiplier') ? '%' : '';\n const lo = num(r.minPct);\n const hi = (Number(r.maxPct)>=9999) ? '+' : num(r.maxPct);\n if(Number(r.maxPct)>=9999) return `${lo}${suffix}+`;\n return `${lo}${suffix}–${hi}${suffix}`;\n}\n// Valor cell: multiplier → 'N%' (or ×N%); fixed → R$.\nfunction valorCell(r, valueType){\n if(valueType==='multiplier') return `${num(r.value)}%`;\n return brl(r.value);\n}\nfunction topbar(t){\n return `\n
${icon('back','#E5004B',20)}Voltar ao Painel \n
\n
Simulador de Ganhos \n
\n
${esc(txt)} `;\n const groupList = (Array.isArray(groups)?groups:[]).slice();\n // Ensure the current context structure is a selectable option even if it isn't in the static list.\n if(st.group && !groupList.some(g=>String((g&&g.code!=null)?g.code:g)===String(st.group))){\n const lbl = (st.perfil==='gn' ? 'Setor ' : 'Grupo ') + st.group + (st.gvName?(' · '+st.gvName):'');\n groupList.unshift({ code: st.group, name: lbl });\n }\n const groupOpts = `${opt('', st.group, '— Manual (sem grupo) —')}` + groupList.map(g=>{\n const code=(g&&g.code!=null)?g.code:g; const nm=(g&&g.name)?g.name:('Grupo '+code); return opt(code, st.group, nm);\n }).join('');\n const groupSel = `${groupOpts} `;\n const perfilSel = `${opt('lider',st.perfil,'Líder')}${opt('gn',st.perfil,'GN')} `;\n const redeSel = `${opt('rede1',st.rede,'Rede 1')}${opt('rede2',st.rede,'Rede 2')} `;\n const nivelSel = `${opt('prata',st.nivel,'Prata')}${opt('ouro',st.nivel,'Ouro')}${opt('diamante',st.nivel,'Diamante')} `;\n const cycOpts = (Array.isArray(cycles)?cycles:[cycles]).map(c=>{ const code=(c&&c.code!=null)?c.code:c; return opt(code,st.cycle,'Ciclo '+code); }).join('');\n const cycleSel = `${cycOpts} `;\n\n const inpVal = (k)=>{ const v = st.inputs[k]; return (v==null?'':v); };\n const goalVal = (k)=>{ const v = st.goals[k]; return (v==null?'':v); };\n\n const kpiCards = fl.map(f=>{\n const code = f.code;\n const val = st.inputs[code];\n const goal = f.goalKey ? st.goals[f.goalKey] : null;\n const baseline = st.baseline[code];\n const fx = { value: val, goal: goal, baseline: baseline, brand: f.brand };\n const max = sliderMax(fx);\n const v = Number(val)||0;\n const g = (goal!=null && isFinite(Number(goal))) ? Number(goal) : null;\n const at = (g && g>0) ? (v/g*100) : null;\n const atCls = pctClass(at);\n const fillPct = Math.max(0, Math.min(100, (v/max)*100));\n const metaPct = (g!=null) ? Math.max(0, Math.min(100,(g/max)*100)) : null;\n const prodPct = (baseline!=null) ? Math.max(0, Math.min(100,(Number(baseline)/max)*100)) : null;\n const goalCell = f.goalKey ? `Meta \n
` : '';\n const realLbl = f.goalKey ? 'Realizado (simulado)' : 'Valor (simulado)';\n const mkLeft = (p)=>`calc(var(--r) + (${p}/100)*(100% - 2*var(--r)))`;\n const markers = `\n ${metaPct!=null?`
Meta ${num(g)}
`:''}\n ${prodPct!=null?`
Realizado ${num(baseline)}
`:''}`;\n const atChip = (at!=null) ? `${pct(at)} ` : `— `;\n return `\n
\n
${fieldIcon(t,f)}
\n
${esc(f.label)} \n ${atChip}\n
\n
\n
${realLbl} \n
\n ${goalCell}\n
\n
\n
${pct(at)} `:'—';\n return `${ico}${esc(f.label)} \n ${baseline!=null?num(baseline):'—'} \n ${gN!=null?num(gN):'—'} \n ${num(sim)} \n ${atv} \n
${icon('sliders', t.color.muted, 15)} Indicadores — Realizado · Meta · Simulado
\n ${st.loadError?`
${esc(st.loadError)}
`:''}\n
Indicador Realizado Meta Simulado Atingimento ${indRows}
+${brl(d)} vs. grupo `;\n else if(d<-0.5) deltaHtml = `${brl(d)} vs. grupo `;\n else deltaHtml = `= remuneração do grupo `;\n }\n const kpTable = stats.filter(s=>!s.isBonus).map(s=>{\n const cls = s.status==='green'?'g':(s.status==='amber'?'a':(s.status==='red'?'r':'n'));\n const atv = (s.atingimento==null)?'—':`${pct(s.atingimento)} `;\n const brandIco = statIcon(t, s);\n return `${brandIco}${esc(s.label)} \n ${num(s.value)} ${s.goal!=null?num(s.goal):'—'} ${atv} Componente Natura
${brl(comp.natura)}
Componente Avon
${brl(comp.avon)}
Base de remuneração
${brl(comp.remunBase)}
Total bônus
${brl(comp.bonusTotal)}
\n
${icon('gift', wr?t.color.money:t.color.muted, 18)}\n ${esc(b.label||b.bonusType)} \n ${wr?'Recebe':'Não recebe'}
\n
${brl(b.amount)} \n
Nenhum bônus configurado para este perfil/rede.
`;\n\n resultHtml = `\n
${icon('money', t.color.money, 15)} Resultado da simulação\n
\n
\n Remuneração estimada \n ${brl(r.remuneracao)} \n ${deltaHtml}\n
\n
${esc(r.rede==='rede2'?'Rede 2':'Rede 1')} · nível ${esc(r.nivel||'')} · ciclo ${esc(r.cycle||'')} · ${comp.structured?'fórmula estruturada':'cálculo nativo'} · ruleset v${esc(r.rulesetVersion||'')}
\n
\n
${icon('target', t.color.muted, 15)} Atingimento por indicador (motor)
\n
Indicador Realizado Meta Atingimento ${kpTable}
\n
${icon('layers', t.color.muted, 15)} Componentes da remuneração
\n
${compCards}
\n
${icon('gift', t.color.muted, 15)} Bônus & aceleradores
\n
${bonHtml}
\n
\n
${icon('calc', '#C7CCD3', 30)}
Escolha um grupo (ou preencha manualmente) e ajuste os controles — a remuneração recalcula automaticamente.
${icon('layers', t.color.muted, 15)} Tabela de Remuneração
\n
${icon('flag','#E5004B',11)} você está aqui ` : '';\n return `\n ${faixaLabel(r, tbl.valueType, tbl.kpiCode)}${you} \n ${valorCell(r, tbl.valueType)} `;\n }).join('');\n const idxDisp = (idx!=null && isFinite(Number(idx)))\n ? ((tbl.valueType==='multiplier') ? pct(idx) : num(idx)) : '—';\n // accumulate parcela / component for the summary strip\n if(hot>=0){\n const bandVal = Number(rows[hot].value)||0;\n if(!isRede2 && tbl.ref==='ativas-total'){ parcelaAcc.push({brand, ativas:bandVal}); }\n if(!isRede2 && tbl.ref==='atingimento'){ const p=parcelaAcc.find(x=>x.brand===brand); if(p){ p.mult=bandVal; } }\n if(isRede2 && tbl.ref==='pontos'){ const vol=Number(bandVolume(tbl.ref,brand,bd))||0; parcelaAcc.push({brand, mult:bandVal, vol, comp:(bandVal/100)*vol}); }\n }\n return `\n
${brandMark(t, brand, 18)}${esc(tbl.label)} \n ${brand==='avon'?'Avon':'Natura'} ${tbl.valueType==='multiplier'?'Atingimento':'Realizado'}: ${idxDisp}
\n
\n
Parcela ${p.brand==='avon'?'Avon':'Natura'}
\n
${brl(parcela)}
\n
${brl(p.ativas)} × ${num(mult)}% = ${brl(parcela)}
${parts}
`;\n } else {\n const parts = parcelaAcc.filter(p=>p.comp!=null).map(p=>{\n return `Componente ${p.brand==='avon'?'Avon':'Natura'}
\n
${brl(p.comp)}
\n
${num(p.mult)}% × ${num(p.vol)} pontos = ${brl(p.comp)}
${parts}
`;\n }\n\n remunTableHtml = `\n
${icon('layers', t.color.muted, 15)} Tabela de Remuneração${esc(rede==='rede2'?'Rede 2':'Rede 1')}
\n
${esc(modelCaption)} — a faixa destacada é onde a simulação atual se encontra.
\n
${groups}
\n ${strip}\n
${icon('layers', t.color.muted, 15)} Tabela de Remuneração
\n
Sem faixas configuradas para este perfil/rede/nível.
${topbar(t)}\n
\n
\n
${icon('calc', '#FFFFFF', 22)}
\n
Simulador de Ganhos Carregue um grupo real, arraste os indicadores e veja a remuneração pelo mesmo motor do painel.
\n
\n
\n
${icon('people', t.color.muted, 15)} Grupo / usuário a simular\n
\n
\n
Grupo ${groupSel}
\n
Perfil ${perfilSel}
\n
Rede ${redeSel}
\n
Nível ${nivelSel}
\n
Ciclo ${cycleSel}
\n
\n
${groupTitle}
\n
\n ${indicatorTable}\n
\n
${icon('receipt', t.color.muted, 15)} Ajuste os indicadores — ${esc(rede==='rede2'?'Rede 2':'Rede 1')}
\n
${kpiCards}
\n
\n ${icon('check','#fff',18)}${st.loading?'Simulando…':'Simular agora'} \n Restaurar realizado \n Recalcula automaticamente (~500ms) pelo endpoint pilotSimulate, sem cache. \n
\n
\n ${resultHtml}\n ${remunTableHtml}\n
${pct(at)} ` : '—';\n }\n\n d2.on('.sel','change',(e,el)=>{\n const k = el.getAttribute('data-k'); if(!k) return;\n st[k] = el.value;\n if(k==='group'){ loadGroup(); return; }\n if(k==='rede' || k==='perfil'){\n // perfil/rede switch changes the whole indicator set — reset and reload.\n st.inputs={}; st.goals={}; st.baseline={}; st.baselineGoal={}; st.result=null; st.error=null;\n st.groupLoaded=false; st.baseRemuneracao=null; st.bandTables=null; st.bandTablesSig=null;\n if(st.group){ loadGroup(); return; }\n d2.refresh(); return;\n }\n if(k==='cycle'){ if(st.group){ loadGroup(); return; } }\n d2.refresh();\n scheduleSimulate();\n });\n\n d2.on('.rng','input',(e,el)=>{\n const code = el.getAttribute('data-rng'); if(!code) return;\n const v = Number(el.value);\n if(!st.inputs) st.inputs={};\n st.inputs[code] = v;\n syncLive(code, v);\n scheduleSimulate();\n });\n\n d2.on('.num','input',(e,el)=>{\n const code = el.getAttribute('data-code');\n const goal = el.getAttribute('data-goal');\n const v = el.value===''? null : Number(el.value);\n if(!st.inputs) st.inputs={}; if(!st.goals) st.goals={};\n if(code!=null){\n st.inputs[code]=v;\n const rng = d2.$(`.rng[data-rng=\"${code}\"]`);\n if(rng){ const max=Number(rng.getAttribute('data-max'))||1; rng.value = String(Math.max(0,Math.min(max, Number(v)||0))); }\n syncLive(code, v||0);\n scheduleSimulate();\n } else if(goal!=null){\n st.goals[goal]=v;\n scheduleSimulate();\n }\n });\n\n d2.on('.sim','click', ()=>{ if(debTimer) clearTimeout(debTimer); runSimulate(); });\n d2.on('.reset','click', ()=>{\n if(st.groupLoaded){\n st.inputs = {...st.baseline}; st.goals = {...st.baselineGoal}; d2.refresh(); scheduleSimulate();\n } else {\n st.inputs = {}; st.goals = {}; st.result=null; d2.refresh();\n }\n });\n\n async function loadCycleList(){\n try{\n const ds = d2.data('pilot-cycleDataSet');\n if(!ds) return;\n let rows = ds.records();\n if(!rows || !rows.length){ rows = await ds.loadAll(); }\n if(Array.isArray(rows) && rows.length){\n st.cycleList = rows.map(r=>({ code:String(r.code), name:('Ciclo '+r.code) }))\n .sort((a,b)=> a.codeb.code?1:0));\n d2.refresh();\n }\n }catch(err){ d2.log('cycle list load error', err); }\n }\n loadCycleList();\n\n if(st.group && st.autoLoadOnMount!==false) loadGroup(); else d2.refresh();\n }\n};"}},"cycles":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"cycles"}}}},"defaultCycle":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"defaultCycle"}}}},"groups":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"groups"}}}},"defaultGroup":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"defaultGroup"}}}},"backRef":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"backRef"}}}}}}}}}},{"_id":"6a4ceaa06c020b3085c1e987","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotSimuladorLauncher","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"function icon(name, color, size){\n const s = size||20; const c = color||'#FFFFFF';\n const A = `xmlns=\"http://www.w3.org/2000/svg\" width=\"${s}\" height=\"${s}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${c}\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"`;\n const P = {\n calc:``\n };\n return `${P[name]||''} `;\n}\nexport default {\n css: `\n :host{ display:block; }\n .fab{ position:fixed; right:24px; bottom:24px; z-index:9999; height:52px; padding:0 20px 0 18px;\n display:inline-flex; align-items:center; gap:10px; border:none; border-radius:999px; cursor:pointer;\n color:#fff; background:linear-gradient(135deg,#E5004B 0%,#EB6619 100%); font:700 14px/1 'Roboto',system-ui,sans-serif;\n box-shadow:0 6px 18px rgba(229,0,75,.34); transition:transform 150ms ease-out,box-shadow 150ms ease-out; }\n .fab:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(229,0,75,.40); }\n @media (prefers-reduced-motion:reduce){ .fab{ transition:none; } .fab:hover{ transform:none; } }\n `,\n render(d2){\n const label = d2.param('label','Simulador');\n return `${icon('calc','#fff',20)}${label} `;\n },\n mounted(d2){\n d2.on('.fab','click',()=>{\n const ref = d2.param('artboardRef','');\n if(!ref) return;\n // ACCESS TRACKING (additive) — record a Simulador section view before navigating away.\n try{\n const sid = (typeof window!=='undefined' && window.sessionStorage) ? window.sessionStorage.getItem('pilotAccessSessionId') : '';\n if(sid) d2.rush('pilotTrackAccess').invoke({ action:'view', sessionId: sid, section:'simulador', drillLevel:'launcher' }).catch(()=>{});\n }catch(e){}\n // CURRENT-CONTEXT PASS — read the live dashboard view and hand it to the Simulador screen.\n // perfil gv → simulate the GV's default sector context; leader/gn → that entity.\n let ctx = null;\n try{\n const store = d2.store('pilotDashboardStore');\n if(store){\n ctx = {\n perfil: store.get('perfil',''),\n structureCode: String(store.get('selectedGroup','') || store.get('structureCode','') || ''),\n rede: store.get('rede',''),\n cycle: String(store.get('cycle','') || ''),\n gvName: store.get('gvName','')\n };\n d2.shared.set('pilotSimContext', ctx, {global:true});\n }\n }catch(e){ d2.log('sim context read error', e); }\n // Encode context into the URL so it survives a full-page nav to the screen artboard.\n let qs = '';\n try{\n if(ctx){\n const p = [];\n if(ctx.perfil) p.push('perfil='+encodeURIComponent(ctx.perfil));\n if(ctx.structureCode) p.push('structureCode='+encodeURIComponent(ctx.structureCode));\n if(ctx.rede) p.push('rede='+encodeURIComponent(ctx.rede));\n if(ctx.cycle) p.push('cycle='+encodeURIComponent(ctx.cycle));\n if(ctx.gvName) p.push('gvName='+encodeURIComponent(ctx.gvName));\n if(p.length) qs = '?'+p.join('&');\n }\n }catch(e){}\n const path = (typeof location!=='undefined' && location.pathname) || '';\n const inPreview = /\\/preview\\//.test(path);\n try{\n if(inPreview && typeof location!=='undefined'){\n // Isolated preview host renders ONE artboard by ref — hop to the sibling preview route.\n location.href = '/preview/'+ref+qs; return;\n }\n const r = d2.router();\n if(r){ r.goTo('/'+ref+qs); return; }\n if(typeof location!=='undefined'){ location.href = '/preview/'+ref+qs; }\n }catch(err){ d2.log('launcher nav error', err); if(typeof location!=='undefined'){ location.href = '/preview/'+ref+qs; } }\n });\n }\n};"}},"artboardRef":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"artboardRef"}}}},"label":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"label"}}}}}}}}}},{"_id":"6a4cedd991afdd4d5cd38fac","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotHistoricoScreen","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const FALLBACK_TOK = {\n color:{ surface:'#FFFFFF', ground:'#FAFAFB', ink:'#1A1C1E', muted:'#6B7280', hairline:'rgba(16,24,40,0.08)',\n naturaMagenta:'#E5004B', naturaOrange:'#EB6619', brandGradient:'linear-gradient(135deg,#E5004B 0%,#EB6619 100%)',\n rampRed:'#FF1418', rampAmber:'#FAA000', rampGreen:'#29AC56', gold:'#F7BE00', money:'#29AC56' },\n radius:{ sm:8, md:12, lg:16, pill:999 },\n type:{ family:\"'Roboto',system-ui,-apple-system,sans-serif\" },\n shadow:{ card:'0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.08)', raised:'0 4px 12px rgba(16,24,40,0.10)' },\n media:{ natura:'https://natura-x-piloto.data2.media/file/UrhVLdPDEZCXToLgJDPW8',\n avon:'https://natura-x-piloto.data2.media/file/HqLhKqINaRUI9OSBjYGFh',\n lockup:'https://natura-x-piloto.data2.media/file/H0P_N-7AQzQOg_VJMBWzV' }\n};\nlet TOK;\nfunction tok(d2){ if(!TOK){ try{ TOK = d2.call('natura-x-piloto@pilotMTokens'); }catch(e){} if(!TOK||!TOK.color) TOK = FALLBACK_TOK; } return TOK; }\nfunction esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(//g,'>').replace(/\"/g,'"'); }\nfunction brl(n){ const v = Number(n)||0; return v.toLocaleString('pt-BR',{ style:'currency', currency:'BRL' }); }\nfunction num(n){ const v = Number(n); return isFinite(v) ? v.toLocaleString('pt-BR',{ maximumFractionDigits:0 }) : '—'; }\nfunction pct(n){ if(n==null||!isFinite(Number(n))) return '—'; return (Number(n)).toLocaleString('pt-BR',{ maximumFractionDigits:1 })+'%'; }\n\n// Inline SVG icon set — uniform stroke style, token-colored. No emoji.\nfunction icon(name, color, size){\n const s = size||18; const c = color||'#6B7280';\n const A = `xmlns=\"http://www.w3.org/2000/svg\" width=\"${s}\" height=\"${s}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"${c}\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"`;\n const P = {\n history:``,\n crown:``,\n receipt:``,\n layers:``,\n chevron:`${P[name]||''} `;\n}\nfunction brandMark(t, brand, size){\n const s = size||18;\n const src = String(brand).toLowerCase()==='avon' ? t.media.avon : t.media.natura;\n const label = String(brand).toLowerCase()==='avon' ? 'Avon' : 'Natura';\n return ``,\n 'crown':``;\n return `${path} `;\n}\n// Dashboard-parity stat icon: brand → brandMark; else the SAME svgIcon map the dashboard uses,\n// crown→gold, else status color / muted. Drives off stats[].icon and stats[].brand exactly like pilotMGroupCard.\nfunction statIcon(t, s){\n const hasBrand = s.brand === 'natura' || s.brand === 'avon';\n if(hasBrand) return brandMark(t, s.brand, 16);\n const col = s.status==='green'?t.color.rampGreen:(s.status==='amber'?t.color.rampAmber:(s.status==='red'?t.color.rampRed:null));\n const iconId = s.icon || 'target';\n const tint = (iconId==='crown') ? t.color.gold : (col || t.color.muted || '#6B7280');\n return dashIcon(iconId, tint);\n}\n// Sticky nav topbar + back-to-dashboard. Matches dashboard chrome (lockup + title + brand-accent back).\nfunction topbar(t){\n return `\n
${icon('back','#E5004B',20)}Voltar ao Painel \n
\n
Histórico de Ganhos \n
\n
Fechado `;\n if(s==='open' || s==='current') return `Aberto `;\n return `${esc(status||'—')} `;\n}\n// Inline SVG sparkline of a numeric series. Clean vector, no emoji.\nfunction sparkline(values, w, h, color){\n const arr = (values||[]).map(v=>Number(v)||0);\n if(arr.length < 2) return ``).join('');\n return `\n ${dots} `;\n}\n\nfunction redeLabel(r){ return r==='rede2' ? 'Rede 2' : 'Rede 1'; }\n// Read the current-view context handed over by the launcher (query first, then shared UIState).\nfunction readHistContext(d2){\n const out = { perfil:'', structureCode:'', rede:'', cycle:'', gvName:'' };\n try{\n const qs = (typeof location!=='undefined' && location.search) ? location.search : '';\n if(qs){\n const p = new URLSearchParams(qs);\n out.perfil = p.get('perfil') || '';\n out.structureCode = p.get('structureCode') || '';\n out.rede = p.get('rede') || '';\n out.cycle = p.get('cycle') || '';\n out.gvName = p.get('gvName') || '';\n }\n }catch(e){}\n try{\n const sh = d2.shared.get('pilotSimContext', null, {global:true});\n if(sh){\n if(!out.perfil) out.perfil = sh.perfil || '';\n if(!out.structureCode) out.structureCode = String(sh.structureCode||'');\n if(!out.rede) out.rede = sh.rede || '';\n if(!out.cycle) out.cycle = String(sh.cycle||'');\n if(!out.gvName) out.gvName = sh.gvName || '';\n }\n }catch(e){}\n return out;\n}\n\nexport default {\n css: `\n :host{ display:block; min-height:100%; height:auto; background:#FAFAFB; font-family:'Roboto',system-ui,-apple-system,sans-serif; color:#1A1C1E; }\n .page{ min-height:100%; background:#FAFAFB; }\n *{ box-sizing:border-box; }\n .topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; height:60px; padding:0 18px;\n background:#FFFFFF; border-bottom:1px solid rgba(16,24,40,0.08); box-shadow:0 1px 3px rgba(16,24,40,0.05); }\n .backbtn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px 0 10px; border:1px solid rgba(229,0,75,.24);\n border-radius:999px; background:#fff; color:#E5004B; font:700 13px/1 'Roboto',sans-serif; cursor:pointer;\n transition:background 150ms ease-out,border-color 150ms ease-out,transform 150ms ease-out; }\n .backbtn:hover{ background:rgba(229,0,75,.06); border-color:rgba(229,0,75,.4); transform:translateX(-1px); }\n .backbtn:active{ transform:translateX(0); }\n .lock{ height:28px; display:flex; align-items:center; margin-left:2px; padding-left:14px; border-left:1px solid rgba(16,24,40,0.10); }\n .lock img{ height:100%; width:auto; display:block; }\n .tbttl{ font:600 15px/1 'Roboto',sans-serif; color:#1A1C1E; letter-spacing:.1px; }\n .tbspacer{ flex:1 1 auto; }\n .wrap{ max-width:960px; margin:0 auto; padding:20px 16px 48px; }\n .head{ display:flex; align-items:center; gap:12px; margin:0 0 18px; flex-wrap:wrap; }\n .head .mk{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;\n background:linear-gradient(135deg,#E5004B 0%,#EB6619 100%); box-shadow:0 4px 12px rgba(229,0,75,.28); flex:0 0 40px; }\n .head .htxt{ flex:1 1 auto; min-width:0; }\n .head h1{ font:700 22px/1.1 'Roboto',sans-serif; margin:0; letter-spacing:-.2px; }\n .head p{ margin:2px 0 0; font:400 12px/1.3 'Roboto',sans-serif; color:#6B7280; }\n .card{ background:#FFFFFF; border:1px solid rgba(16,24,40,0.08); border-radius:16px;\n box-shadow:0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.08); padding:18px; margin-bottom:16px; }\n .card > .ct{ display:flex; align-items:center; gap:8px; font:700 11px/1 'Roboto',sans-serif; letter-spacing:.6px;\n text-transform:uppercase; color:#6B7280; margin:0 0 14px; }\n .idrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }\n .idrow .who{ flex:1 1 220px; min-width:0; }\n .idrow .who .nm{ font:700 17px/1.2 'Roboto',sans-serif; color:#1A1C1E; letter-spacing:-.2px; }\n .idrow .who .meta{ margin-top:3px; font:500 12px/1.3 'Roboto',sans-serif; color:#6B7280; }\n .fld{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:0 0 200px; }\n .lbl{ font:600 10px/1 'Roboto',sans-serif; letter-spacing:.5px; text-transform:uppercase; color:#6B7280; }\n .sel{ appearance:none; -webkit-appearance:none; width:100%; min-width:0; height:40px; padding:0 34px 0 12px;\n border:1px solid rgba(16,24,40,0.14); border-radius:10px; background:#FFFFFF; color:#1A1C1E;\n font:500 13px/1 'Roboto',sans-serif; cursor:pointer; transition:border-color 150ms ease-out,box-shadow 150ms ease-out;\n background-image:url(\"data:image/svg+xml;utf8,${esc(txt)} `;\n const isGn = (st.perfil==='gn');\n const groupList = (Array.isArray(groups)?groups:[]).slice();\n if(st.structureCode && !groupList.some(g=>String((g&&g.code!=null)?g.code:g)===String(st.structureCode))){\n const lbl = (isGn?'Setor ':'Grupo ') + st.structureCode + (st.gvName?(' · '+st.gvName):'');\n groupList.unshift({ code: st.structureCode, name: lbl });\n }\n const groupOpts = groupList.map(g=>{\n const code = (g && g.code!=null) ? g.code : g;\n const nm = (g && g.name) ? g.name : ('Grupo '+code);\n return opt(code, st.structureCode, nm);\n }).join('');\n const groupSel = `${groupOpts} `;\n\n const H = st.history;\n const entityWord = isGn ? 'Setor' : 'Grupo';\n const perfilLabel = isGn ? 'GN' : 'Líder';\n const identity = H ? `\n \n
${esc(H.leaderName||(entityWord+' '+st.structureCode))}
\n
${esc(perfilLabel)} · ${esc(entityWord)} ${esc(st.structureCode)} · ${esc(redeLabel(H.rede))}${H.nivel?(' · nível '+esc(H.nivel)):''}
\n
\n
${esc(entityWord)} ${esc(st.structureCode||'—')}
\n
Selecione um ${esc(entityWord.toLowerCase())} para ver o histórico
\n
`;\n } else if(st.histError){\n listHtml = `${esc(st.histError)}
`;\n } else if(H && Array.isArray(H.history) && H.history.length){\n const series = H.history.map(h=>Number(h.remuneracao)||0);\n const rows = H.history.map((h,i)=>{\n const prev = i>0 ? (Number(H.history[i-1].remuneracao)||0) : null;\n const cur = Number(h.remuneracao)||0;\n let trendHtml = `${icon('dash', t.color.muted, 14)} `;\n if(prev!=null){\n if(cur > prev){ trendHtml = `${icon('trendUp','#1F8A45',15)} ${pct(((cur-prev)/(prev||1))*100)} `; }\n else if(cur < prev){ trendHtml = `${icon('trendDown','#D01418',15)} ${pct(((cur-prev)/(prev||1))*100)} `; }\n else { trendHtml = `${icon('dash', t.color.muted, 14)} 0% `; }\n }\n const selCls = String(st.selectedCycle)===String(h.cycle) ? ' sel' : '';\n const dotColor = selCls ? '#FFFFFF' : t.color.muted;\n return `\n
${icon('clock', dotColor, 17)}
\n
\n
Ciclo ${esc(h.cycle)} ${statusChip(h.status)}${h.isCurrent?'Atual ':''}
\n
${esc(h.label||'')}
\n
\n
\n
${brl(h.remuneracao)}
\n
${trendHtml}
\n
\n
${icon('chevron', selCls?'#E5004B':'#C7CCD3', 18)}
\n
${sparkline(series, 220, 44, sparkColor)}
\n ${rows}
`;\n } else if(H) {\n listHtml = `${icon('history','#C7CCD3',30)}
Nenhum ciclo disponível para este grupo.
`;\n }\n\n let exHtml = '';\n if(st.selectedCycle!=null){\n if(st.exLoading){\n exHtml = `
${pct(s.atingimento)} `;\n const brandIco = statIcon(t, s);\n return `${brandIco}${esc(s.label)} \n ${num(s.value)} ${s.goal!=null?num(s.goal):'—'} ${atv} Componente Natura
${brl(comp.natura)}
Componente Avon
${brl(comp.avon)}
Base de remuneração
${brl(comp.remunBase)}
Total bônus
${brl(comp.bonusTotal)}
\n
${icon('gift', wr?t.color.money:t.color.muted, 18)}\n ${esc(b.label||b.bonusType)} \n ${wr?'Recebe':'Não recebe'}
\n
${brl(b.amount)} \n
Nenhum bônus configurado para este perfil/rede.
`;\n\n exHtml = `\n
${icon('receipt', t.color.muted, 15)} Extrato — Ciclo ${esc(r.cycle)}
\n
\n Remuneração do ciclo \n ${brl(r.remuneracao)} \n
\n
${esc(H?H.leaderName:'')} · ${esc(redeLabel(r.rede))} · nível ${esc(r.nivel||'')} · ${comp.structured?'fórmula estruturada':'cálculo nativo'} · ruleset v${esc(r.rulesetVersion||'')}
\n
${icon('target', t.color.muted, 15)} Indicadores & atingimentos
\n
Indicador Realizado Meta Atingimento ${kpTable}
\n
${icon('layers', t.color.muted, 15)} Componentes da remuneração
\n
${compCards}
\n
${icon('gift', t.color.muted, 15)} Bônus & aceleradores
\n
${bonHtml}
\n
${topbar(t)}\n
\n
\n
${icon('history', '#FFFFFF', 22)}
\n
Histórico de Ganhos Remuneração do grupo ao longo dos ciclos — clique em um ciclo para ver o extrato completo.
\n
\n
\n
${icon('people', t.color.muted, 15)} Grupo
\n
\n ${identity}\n
Selecionar grupo ${groupSel}
\n
\n
\n
\n
${icon('history', t.color.muted, 15)} Linha do tempo de remuneração
\n ${listHtml}\n
\n ${exHtml}\n
${P[name]||''} `;\n}\nexport default {\n css: `\n :host{ display:block; }\n .fab{ position:fixed; right:24px; bottom:96px; z-index:9998; height:52px; padding:0 20px 0 18px;\n display:inline-flex; align-items:center; gap:10px; border:none; border-radius:999px; cursor:pointer;\n color:#fff; background:linear-gradient(135deg,#E5004B 0%,#EB6619 100%); font:700 14px/1 'Roboto',system-ui,sans-serif;\n box-shadow:0 6px 18px rgba(229,0,75,.34); transition:transform 150ms ease-out,box-shadow 150ms ease-out; }\n .fab:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(229,0,75,.40); }\n @media (prefers-reduced-motion:reduce){ .fab{ transition:none; } .fab:hover{ transform:none; } }\n `,\n render(d2){\n const label = d2.param('label','Histórico');\n return `${icon('history','#fff',20)}${label} `;\n },\n mounted(d2){\n d2.on('.fab','click',()=>{\n const ref = d2.param('artboardRef','');\n if(!ref) return;\n // ACCESS TRACKING (additive) — record a Histórico section view before navigating away.\n try{\n const sid = (typeof window!=='undefined' && window.sessionStorage) ? window.sessionStorage.getItem('pilotAccessSessionId') : '';\n if(sid) d2.rush('pilotTrackAccess').invoke({ action:'view', sessionId: sid, section:'historico', drillLevel:'launcher' }).catch(()=>{});\n }catch(e){}\n // CURRENT-CONTEXT PASS — hand the live dashboard view to the Histórico screen.\n let ctx = null;\n try{\n const store = d2.store('pilotDashboardStore');\n if(store){\n ctx = {\n perfil: store.get('perfil',''),\n structureCode: String(store.get('selectedGroup','') || store.get('structureCode','') || ''),\n rede: store.get('rede',''),\n cycle: String(store.get('cycle','') || ''),\n gvName: store.get('gvName','')\n };\n d2.shared.set('pilotSimContext', ctx, {global:true});\n }\n }catch(e){ d2.log('hist context read error', e); }\n let qs = '';\n try{\n if(ctx){\n const p = [];\n if(ctx.perfil) p.push('perfil='+encodeURIComponent(ctx.perfil));\n if(ctx.structureCode) p.push('structureCode='+encodeURIComponent(ctx.structureCode));\n if(ctx.rede) p.push('rede='+encodeURIComponent(ctx.rede));\n if(ctx.cycle) p.push('cycle='+encodeURIComponent(ctx.cycle));\n if(ctx.gvName) p.push('gvName='+encodeURIComponent(ctx.gvName));\n if(p.length) qs = '?'+p.join('&');\n }\n }catch(e){}\n const path = (typeof location!=='undefined' && location.pathname) || '';\n const inPreview = /\\/preview\\//.test(path);\n try{\n if(inPreview && typeof location!=='undefined'){\n location.href = '/preview/'+ref+qs; return;\n }\n const r = d2.router();\n if(r){ r.goTo('/'+ref+qs); return; }\n if(typeof location!=='undefined'){ location.href = '/preview/'+ref+qs; }\n }catch(err){ d2.log('launcher nav error', err); if(typeof location!=='undefined'){ location.href = '/preview/'+ref+qs; } }\n });\n }\n};\n"}},"artboardRef":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"artboardRef"}}}},"label":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"label"}}}}}}}}}},{"_id":"6a4d0ea891afdd4d5cd4381b","component":"data2-core-types@Component","system":"688179c2a93dd170ce61e598","params":{"extends":"data2-core-primitives@Block","component":"pilotAccessLogAdmScreen","package":"natura-x-piloto","definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const FALLBACK = {\n color:{surface:'#FFFFFF',ground:'#FAFAFB',ink:'#1A1C1E',muted:'#6B7280',hairline:'rgba(16,24,40,0.08)',naturaMagenta:'#E5004B',naturaOrange:'#EB6619',brandGradient:'linear-gradient(135deg,#E5004B 0%,#EB6619 100%)',money:'#29AC56',rampGreen:'#29AC56',rampRed:'#FF1418',rampAmber:'#FAA000',gold:'#F7BE00'},\n radius:{sm:8,md:12,lg:16,pill:999},\n type:{family:\"'Roboto',system-ui,-apple-system,sans-serif\"},\n shadow:{card:'0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.08)',raised:'0 8px 24px rgba(16,24,40,0.18)'},\n motion:{hover:'150ms ease-out',mount:'400ms cubic-bezier(0.4,0,0.2,1)',fade:'200ms ease-out'}\n};\nlet TOK;\nfunction tok(d2){ if(!TOK){ try{ TOK = d2.call('natura-x-piloto@pilotMTokens'); }catch(e){} if(!TOK||!TOK.color) TOK = FALLBACK; } return TOK; }\nfunction esc(s){ return String(s==null?'':s).replace(/&/g,'&').replace(//g,'>').replace(/\"/g,'"'); }\n\nconst PERFIL_LABEL = { gv:'GV', gn:'GN', lider:'Líder' };\nfunction perfilLabel(p){ return PERFIL_LABEL[p] || String(p||'—'); }\nconst ACTION_META = {\n 'impersonate-start':{ label:'Início impersonação', cls:'start' },\n 'impersonate-end':{ label:'Fim impersonação', cls:'end' },\n 'view':{ label:'Visualização', cls:'view' },\n 'simulate':{ label:'Simulação', cls:'sim' },\n 'export':{ label:'Exportação', cls:'exp' }\n};\nfunction actionMeta(a){ return ACTION_META[String(a||'')] || { label:String(a||'—'), cls:'view' }; }\n\nconst ICON = (()=>{\n const S = (p)=>`${p} `;\n return {\n search:S(''),\n target:S('')\n };\n})();\n\nfunction actorInitials(name){\n const parts = String(name||'').trim().split(/\\s+/).filter(Boolean);\n if(!parts.length) return '?';\n if(parts.length===1) return parts[0].slice(0,2).toUpperCase();\n return (parts[0][0]+parts[parts.length-1][0]).toUpperCase();\n}\nfunction relTime(iso){\n const t = new Date(iso).getTime();\n if(!isFinite(t)) return '';\n const diff = Date.now()-t;\n const s = Math.round(diff/1000);\n if(s<60) return 'agora mesmo';\n const m = Math.round(s/60); if(m<60) return `há ${m} min`;\n const h = Math.round(m/60); if(h<24) return `há ${h} h`;\n const dd = Math.round(h/24); if(dd<30) return `há ${dd} d`;\n try{ return new Date(iso).toLocaleDateString('pt-BR',{day:'2-digit',month:'short'}); }catch(e){ return ''; }\n}\nfunction absTime(iso){\n try{ return new Date(iso).toLocaleString('pt-BR',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'}); }\n catch(e){ return String(iso||''); }\n}\n\nfunction computeStats(rows){\n const starts = rows.filter(r=>String(r.action)==='impersonate-start');\n const actors = {};\n const targets = {};\n starts.forEach(r=>{\n const a = r.actorName || r.actorEmail || r.actorUserId;\n if(a) actors[a] = (actors[a]||0)+1;\n const t = r.targetName || r.targetUserId;\n if(t) targets[t] = (targets[t]||0)+1;\n });\n const distinctActors = Object.keys(actors).length;\n let topTarget = '—'; let topN = 0;\n Object.keys(targets).forEach(k=>{ if(targets[k]>topN){ topN=targets[k]; topTarget=k; } });\n return { totalImpersonations: starts.length, distinctActors, topTarget, topTargetCount: topN };\n}\n\nconst ACTION_FILTERS = [\n { key:'', label:'Todas' },\n { key:'impersonate-start', label:'Início' },\n { key:'impersonate-end', label:'Fim' }\n];\n\nfunction rowMarkup(rec){\n const m = actionMeta(rec.action);\n const id = String(rec._id||'');\n const actor = rec.actorName || rec.actorEmail || '—';\n const target = rec.targetName || (rec.action==='impersonate-end' ? '(fim)' : '—');\n const scope = rec.scope && rec.scope!=='n/a' ? rec.scope : '—';\n return `\n ${esc(relTime(rec.at))} ${esc(absTime(rec.at))} ${esc(actorInitials(actor))} ${esc(actor)} ${esc(perfilLabel(rec.actorPerfil||rec.actualPerfil))} ${ICON.arrow} \n ${esc(target)} ${rec.impersonatedCode||rec.structureCode?`${esc(rec.impersonatedCode||rec.structureCode)} `:''}${esc(perfilLabel(rec.targetPerfil||rec.effectivePerfil))} ${esc(m.label)} ${esc(scope)} \n ${esc(rec.cycle||'—')} \n `;\n}\n\nexport default {\n css: `\n :host{display:block}\n .screen{min-height:100%;height:auto;display:flex;flex-direction:column;background:var(--ground);font-family:var(--fam);box-sizing:border-box}\n .header{padding:26px 30px 18px;background:var(--surface);border-bottom:1px solid var(--hair)}\n .htitle h1{margin:0;font:800 28px/1.1 var(--fam);color:var(--ink);letter-spacing:-.5px}\n .htitle .badge{display:inline-block;margin-left:10px;font:700 10px/1 var(--fam);letter-spacing:.06em;text-transform:uppercase;color:var(--mag);background:rgba(229,0,75,.10);padding:5px 9px;border-radius:999px;vertical-align:middle}\n .htitle p{margin:6px 0 0;font:400 13px/1.4 var(--fam);color:var(--muted);max-width:720px}\n .toolbar{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}\n .search{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:8px;background:var(--ground);border:1.5px solid var(--hair);border-radius:11px;padding:9px 13px}\n .search input{flex:1;min-width:0;border:none;background:none;outline:none;font:500 14px/1 var(--fam);color:var(--ink)}\n .search .si{color:var(--muted);display:inline-flex}\n .search .si .ic-svg{width:16px;height:16px}\n .count{font:600 12px/1 var(--fam);color:var(--muted);white-space:nowrap}\n .filters{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}\n .flabel{font:700 10px/1 var(--fam);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}\n .fchip{padding:7px 12px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);color:var(--muted);font:700 12px/1 var(--fam);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}\n .fchip:hover{background:var(--ground);color:var(--ink)}\n .fchip[data-on]{background:var(--mag);color:#fff;border-color:var(--mag)}\n .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:22px 30px 4px}\n .stat{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:18px 20px;box-shadow:var(--shadowcard);display:flex;align-items:center;gap:14px}\n .stat .ico{width:44px;height:44px;flex:none;border-radius:12px;background:rgba(229,0,75,.10);display:inline-flex;align-items:center;justify-content:center;color:var(--mag)}\n .stat .ico .ic-svg{width:22px;height:22px}\n .stat .sv{font:800 26px/1 var(--fam);color:var(--ink);letter-spacing:-.5px}\n .stat .sl{font:600 11px/1.3 var(--fam);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}\n .stat .st{font:600 12px/1.3 var(--fam);color:var(--ink);margin-top:3px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n .body{flex:1 1 auto;padding:18px 30px 90px}\n .tablecard{max-width:1080px;margin:0 auto;background:var(--surface);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadowcard);overflow:hidden}\n table.log{width:100%;border-collapse:collapse}\n table.log thead th{text-align:left;font:700 10px/1 var(--fam);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:13px 14px;border-bottom:1px solid var(--hair);background:var(--ground);white-space:nowrap}\n table.log td{padding:12px 14px;border-bottom:1px solid rgba(16,24,40,0.05);font:500 13px/1.3 var(--fam);color:var(--ink);vertical-align:middle}\n table.log tbody tr:last-child td{border-bottom:none}\n table.log tbody tr:hover{background:var(--ground)}\n .c-when .rel{display:block;font-weight:700;color:var(--ink)}\n .c-when .abs{display:block;font:500 10.5px/1.2 var(--fam);color:var(--muted);margin-top:2px}\n .c-actor{display:flex;align-items:center;gap:9px}\n .avatar{width:28px;height:28px;flex:none;border-radius:50%;background:var(--grad);color:#fff;font:800 10px/1 var(--fam);display:inline-flex;align-items:center;justify-content:center}\n .an{display:flex;flex-direction:column;min-width:0}\n .anm{font:700 12.5px/1.2 var(--fam);color:var(--ink);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n .ap{font:600 10.5px/1 var(--fam);color:var(--muted);margin-top:2px}\n .c-arrow{color:var(--muted);width:26px;text-align:center}\n .c-arrow .ic-svg{width:16px;height:16px}\n .tn{font:700 12.5px/1.2 var(--fam);color:var(--ink)}\n .tc{display:inline-block;margin-left:6px;font:700 10px/1 'SF Mono',ui-monospace,Menlo,monospace;color:var(--muted);background:var(--ground);padding:2px 6px;border-radius:5px}\n .pchip{font:800 10px/1 var(--fam);letter-spacing:.03em;padding:5px 9px;border-radius:999px;white-space:nowrap}\n .pchip.gn{background:rgba(59,130,246,.14);color:#1d5fd1}\n .pchip.lider{background:rgba(139,92,246,.16);color:#6d34d6}\n .pchip.gv{background:rgba(229,0,75,.12);color:var(--mag)}\n .achip{font:800 10px/1 var(--fam);letter-spacing:.03em;padding:5px 9px;border-radius:999px;white-space:nowrap}\n .achip.start{background:rgba(41,172,86,.15);color:#1a7d3c}\n .achip.end{background:rgba(107,114,128,.16);color:var(--muted)}\n .achip.view{background:rgba(59,130,246,.14);color:#1d5fd1}\n .achip.sim{background:rgba(250,160,0,.16);color:#b57200}\n .achip.exp{background:rgba(139,92,246,.14);color:#6d34d6}\n .c-scope,.c-cycle{color:var(--muted);font-weight:600;white-space:nowrap}\n .empty{padding:60px;text-align:center;color:var(--muted);font:500 14px/1.5 var(--fam)}\n @media (prefers-reduced-motion: reduce){ .fchip{transition:none!important} }\n `,\n render(d2){\n const t = tok(d2);\n const green = t.color.rampGreen||t.color.money||'#29AC56';\n const vars = `--surface:${t.color.surface};--ground:${t.color.ground};--ink:${t.color.ink};--muted:${t.color.muted};--hair:${t.color.hairline};--mag:${t.color.naturaMagenta};--grad:${t.color.brandGradient};--green:${green};--fam:${t.type.family};--shadowcard:${t.shadow.card}`;\n\n const ds = d2.data('accessLog');\n const all = ds ? ds.records() : [];\n const loading = ds && ds.loading;\n const sorted = all.slice().sort((a,b)=> new Date(b.at||0)-new Date(a.at||0));\n\n const fAction = d2.state.fAction||'';\n const q = String(d2.state.q||'').trim().toLowerCase();\n const filtered = sorted.filter(r=>{\n if(fAction && String(r.action)!==fAction) return false;\n if(q){\n const hay = `${r.actorName||''} ${r.actorEmail||''} ${r.targetName||''} ${r.action||''} ${r.impersonatedCode||''} ${r.structureCode||''} ${r.cycle||''}`.toLowerCase();\n if(hay.indexOf(q)<0) return false;\n }\n return true;\n });\n\n const st = computeStats(sorted);\n const statCards = `\n ${ICON.eye} ${st.totalImpersonations}
Impersonações (início)
${ICON.users} ${st.distinctActors}
Atores distintos
${ICON.target} ${st.topTargetCount||0}×
Alvo mais impersonado
${esc(st.topTarget)}
${esc(c.label)} `).join('');\n\n const tableBody = loading\n ? `Carregando registros de acesso…
`\n : (rows\n ? `\n Quando Ator Alvo Perfil Ação Escopo Ciclo ${rows}
Nenhum registro de acesso encontrado com os filtros atuais.
`);\n\n return `\n \n
${statCards}
\n
${tableBody}
\n
${p} `;\n return {\n live:S(''),\n cycle:S(''),\n device:S(''),\n bars:S('')\n };\n})();\n\nfunction num(n){ try{ return Number(n||0).toLocaleString('pt-BR'); }catch(e){ return String(n||0); } }\nfunction absTime(iso){\n if(!iso) return '—';\n try{ return new Date(iso).toLocaleString('pt-BR',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'}); }\n catch(e){ return String(iso||''); }\n}\nfunction relTime(iso){\n const t = new Date(iso).getTime();\n if(!isFinite(t)) return '—';\n const diff = Date.now()-t;\n const s = Math.round(diff/1000);\n if(s<60) return 'agora mesmo';\n const m = Math.round(s/60); if(m<60) return `há ${m} min`;\n const h = Math.round(m/60); if(h<24) return `há ${h} h`;\n const dd = Math.round(h/24); if(dd<30) return `há ${dd} d`;\n try{ return new Date(iso).toLocaleDateString('pt-BR',{day:'2-digit',month:'short'}); }catch(e){ return '—'; }\n}\nfunction dayKey(iso){\n const d = new Date(iso);\n if(!isFinite(d.getTime())) return '';\n return d.toISOString().slice(0,10);\n}\nfunction dayLabel(key){\n try{ const d = new Date(key+'T00:00:00'); return d.toLocaleDateString('pt-BR',{day:'2-digit',month:'2-digit'}); }catch(e){ return key; }\n}\nfunction fmtDuration(ms){\n if(!isFinite(ms) || ms<=0) return '—';\n const totalMin = Math.round(ms/60000);\n if(totalMin < 60) return totalMin+' min';\n const h = Math.floor(totalMin/60); const m = totalMin%60;\n return m ? `${h}h ${m}min` : `${h}h`;\n}\n\n// coarse userAgent → { browser, os } bucket\nfunction parseUA(ua){\n const s = String(ua||'');\n let browser = 'Outro';\n if(/Edg\\//i.test(s)) browser='Edge';\n else if(/OPR\\/|Opera/i.test(s)) browser='Opera';\n else if(/Chrome\\//i.test(s) && !/Chromium/i.test(s)) browser='Chrome';\n else if(/Firefox\\//i.test(s)) browser='Firefox';\n else if(/Safari\\//i.test(s) && /Version\\//i.test(s)) browser='Safari';\n else if(!s) browser='Desconhecido';\n let os = 'Outro';\n if(/iPhone|iPad|iPod/i.test(s)) os='iOS';\n else if(/Android/i.test(s)) os='Android';\n else if(/Windows/i.test(s)) os='Windows';\n else if(/Mac OS X|Macintosh/i.test(s)) os='macOS';\n else if(/Linux/i.test(s)) os='Linux';\n else if(!s) os='Desconhecido';\n const mobile = /Mobi|iPhone|iPad|iPod|Android/i.test(s);\n return { browser, os, kind: mobile?'Mobile':(s?'Desktop':'Desconhecido') };\n}\n\n// horizontal breakdown bars from a {label,count} array\nfunction breakdownBars(items, colorVar){\n if(!items.length) return `Sem dados.
`;\n const max = Math.max.apply(null, items.map(i=>i.count).concat([1]));\n return items.map(i=>{\n const pct = Math.round((i.count/max)*100);\n return `\n ${esc(i.label)} \n ${num(i.count)} \n
`;\n }).join('');\n}\n\n// inline-SVG login-over-time bar chart (last N days)\nfunction loginsChart(days){\n if(!days.length) return `Sem logins no período.
`;\n const W = 720, H = 140, pad = 24, n = days.length;\n const max = Math.max.apply(null, days.map(d=>d.count).concat([1]));\n const bw = (W - pad*2) / n;\n const barW = Math.max(6, Math.min(38, bw*0.6));\n let bars = '';\n let labels = '';\n days.forEach((d,i)=>{\n const x = pad + i*bw + (bw-barW)/2;\n const h = Math.round((d.count/max)*(H-pad*2));\n const y = H - pad - h;\n bars += `${esc(dayLabel(d.key))}: ${num(d.count)} login(s) ${d.count?num(d.count):''} `;\n if(n<=14 || i%2===0){\n labels += `${esc(dayLabel(d.key))} `;\n }\n });\n return `\n \n ${bars}${labels}\n `;\n}\n\nfunction tally(arr, keyFn, labelFn){\n const m = {};\n arr.forEach(r=>{ const k = keyFn(r); if(k==null||k==='') return; m[k]=(m[k]||0)+1; });\n return Object.keys(m).map(k=>({ key:k, label: labelFn?labelFn(k):k, count:m[k] })).sort((a,b)=>b.count-a.count);\n}\n\nexport default {\n css: `\n :host{display:block}\n .screen{min-height:100%;height:auto;display:flex;flex-direction:column;background:var(--ground);font-family:var(--fam);box-sizing:border-box}\n .header{padding:26px 30px 18px;background:var(--surface);border-bottom:1px solid var(--hair)}\n .htitle h1{margin:0;font:800 28px/1.1 var(--fam);color:var(--ink);letter-spacing:-.5px}\n .htitle .badge{display:inline-block;margin-left:10px;font:700 10px/1 var(--fam);letter-spacing:.06em;text-transform:uppercase;color:var(--mag);background:rgba(229,0,75,.10);padding:5px 9px;border-radius:999px;vertical-align:middle}\n .htitle p{margin:6px 0 0;font:400 13px/1.4 var(--fam);color:var(--muted);max-width:760px}\n .toolbar{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}\n .flabel{font:700 10px/1 var(--fam);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}\n .fchip{padding:7px 12px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);color:var(--muted);font:700 12px/1 var(--fam);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}\n .fchip:hover{background:var(--ground);color:var(--ink)}\n .fchip[data-on]{background:var(--mag);color:#fff;border-color:var(--mag)}\n .count{font:600 12px/1 var(--fam);color:var(--muted);white-space:nowrap;margin-left:auto}\n .body{flex:1 1 auto;padding:22px 30px 90px;max-width:1120px;margin:0 auto;width:100%;box-sizing:border-box}\n .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}\n .kpi{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:16px 18px;box-shadow:var(--shadowcard);display:flex;align-items:center;gap:13px}\n .kpi .ico{width:42px;height:42px;flex:none;border-radius:12px;background:rgba(229,0,75,.10);display:inline-flex;align-items:center;justify-content:center;color:var(--mag)}\n .kpi .ico.live{background:rgba(41,172,86,.14);color:var(--green)}\n .kpi .ico .ic-svg{width:21px;height:21px}\n .kpi .sv{font:800 25px/1 var(--fam);color:var(--ink);letter-spacing:-.5px}\n .kpi .sl{font:600 10.5px/1.3 var(--fam);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}\n .kpi .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px;vertical-align:middle;box-shadow:0 0 0 3px rgba(41,172,86,.18)}\n .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}\n .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}\n @media (max-width:860px){ .grid2,.grid3{grid-template-columns:1fr} }\n .panel{background:var(--surface);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadowcard);padding:18px 20px}\n .panel.wide{grid-column:1 / -1}\n .ptitle{display:flex;align-items:center;gap:8px;font:800 14px/1 var(--fam);color:var(--ink);margin:0 0 14px}\n .ptitle .pico{color:var(--mag);display:inline-flex}\n .ptitle .pico .ic-svg{width:17px;height:17px}\n .ptitle .psub{font:600 11px/1 var(--fam);color:var(--muted);margin-left:auto;text-transform:none;letter-spacing:0}\n .chart{width:100%;height:auto;display:block}\n .ch-num{font:700 10px/1 var(--fam);fill:var(--muted)}\n .ch-lbl{font:600 10px/1 var(--fam);fill:var(--muted)}\n .bd-row{display:flex;align-items:center;gap:10px;margin:0 0 9px}\n .bd-label{flex:0 0 120px;font:700 12px/1.2 var(--fam);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n .bd-track{flex:1 1 auto;height:10px;background:var(--ground);border-radius:999px;overflow:hidden;min-width:40px}\n .bd-fill{display:block;height:100%;border-radius:999px;transition:width .3s ease-out}\n .bd-val{flex:0 0 auto;font:800 12px/1 var(--fam);color:var(--ink);min-width:34px;text-align:right}\n .bd-empty{padding:16px 4px;color:var(--muted);font:500 12.5px/1.4 var(--fam);font-style:italic}\n table.tbl{width:100%;border-collapse:collapse}\n table.tbl thead th{text-align:left;font:700 10px/1 var(--fam);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--hair);white-space:nowrap}\n table.tbl td{padding:11px 12px;border-bottom:1px solid rgba(16,24,40,0.05);font:500 13px/1.3 var(--fam);color:var(--ink);vertical-align:middle}\n table.tbl tbody tr:last-child td{border-bottom:none}\n table.tbl tbody tr:hover{background:var(--ground)}\n .u-name{display:flex;align-items:center;gap:9px}\n .avatar{width:26px;height:26px;flex:none;border-radius:50%;background:var(--grad);color:#fff;font:800 10px/1 var(--fam);display:inline-flex;align-items:center;justify-content:center}\n .pchip{font:800 9.5px/1 var(--fam);letter-spacing:.03em;padding:4px 8px;border-radius:999px;white-space:nowrap}\n .pchip.gn{background:rgba(59,130,246,.14);color:#1d5fd1}\n .pchip.lider{background:rgba(139,92,246,.16);color:#6d34d6}\n .pchip.gv{background:rgba(229,0,75,.12);color:var(--mag)}\n .pchip.admin{background:rgba(107,114,128,.16);color:var(--muted)}\n .tnum{font:800 13px/1 var(--fam);color:var(--ink)}\n .tmut{color:var(--muted);font-weight:600;white-space:nowrap}\n .sec-name{font:700 12.5px/1.2 var(--fam);color:var(--ink)}\n .empty{padding:60px;text-align:center;color:var(--muted);font:500 14px/1.5 var(--fam)}\n @media (prefers-reduced-motion: reduce){ .fchip{transition:none!important} .bd-fill{transition:none} }\n `,\n render(d2){\n const t = tok(d2);\n const green = t.color.rampGreen||t.color.money||'#29AC56';\n const blue = '#3b82f6';\n const purple = '#8b5cf6';\n const vars = `--surface:${t.color.surface};--ground:${t.color.ground};--ink:${t.color.ink};--muted:${t.color.muted};--hair:${t.color.hairline};--mag:${t.color.naturaMagenta};--orange:${t.color.naturaOrange};--grad:${t.color.brandGradient};--green:${green};--fam:${t.type.family};--shadowcard:${t.shadow.card}`;\n\n // Prefer the declared params; fall back to the global DataSet processes so the\n // screen works even if a host forgot to bind them.\n const sDs = d2.data('sessions') || d2.data('pilot-sessionDataSet');\n const eDs = d2.data('accessLog') || d2.data('pilot-access-logDataSet');\n const sessions = sDs ? sDs.records() : [];\n const events = eDs ? eDs.records() : [];\n const loading = (sDs && sDs.loading) || (eDs && eDs.loading);\n\n const now = Date.now();\n const range = d2.state.range || '7d';\n const rangeMs = range==='today' ? null : (range==='30d' ? 30*24*3600*1000 : (range==='all' ? null : 7*24*3600*1000));\n function inRange(iso){\n const ts = new Date(iso).getTime();\n if(!isFinite(ts)) return false;\n if(range==='today'){ const d=new Date(); d.setHours(0,0,0,0); return ts>=d.getTime(); }\n if(range==='all') return true;\n return ts >= now - rangeMs;\n }\n\n // ── sessions in range (by startedAt) ─────────────────────────────────────\n const sessInRange = sessions.filter(s=>inRange(s.startedAt));\n // active-now: lastSeenAt within TTL AND not ended\n const activeNow = sessions.filter(s=>{\n if(String(s.status)==='ended') return false;\n const ls = new Date(s.lastSeenAt||s.startedAt).getTime();\n return isFinite(ls) && (now - ls) <= TTL_MS;\n });\n\n // login events (from the event stream) — the canonical \"logins\" metric\n const loginEvents = events.filter(e=>String(e.action)==='login');\n const viewEvents = events.filter(e=>String(e.action)==='view');\n const loginsInRange = loginEvents.filter(e=>inRange(e.at));\n\n // logins today / cycle\n const startToday = (()=>{ const d=new Date(); d.setHours(0,0,0,0); return d.getTime(); })();\n const loginsToday = loginEvents.filter(e=>{ const ts=new Date(e.at).getTime(); return isFinite(ts) && ts>=startToday; }).length;\n // cycle = the most common cycle in login events (pilot has one active cycle)\n const cycleTally = tally(loginEvents, e=>e.cycle);\n const topCycle = cycleTally.length ? cycleTally[0].key : '';\n const loginsCycle = topCycle ? loginEvents.filter(e=>String(e.cycle)===String(topCycle)).length : loginEvents.length;\n\n // distinct users (in range) — by userId, fallback name\n const userKeys = {};\n loginsInRange.forEach(e=>{ const k=e.userId||e.name; if(k) userKeys[k]=1; });\n const distinctUsers = Object.keys(userKeys).length;\n\n // avg session duration for ended sessions in range\n const ended = sessInRange.filter(s=>String(s.status)==='ended' && s.endedAt && s.startedAt);\n let avgDur = 0;\n if(ended.length){\n const totalMs = ended.reduce((acc,s)=>{\n const d = new Date(s.endedAt).getTime() - new Date(s.startedAt).getTime();\n return acc + (isFinite(d) && d>0 ? d : 0);\n }, 0);\n avgDur = totalMs / ended.length;\n }\n\n // logins over time (by day) — from login events in range\n const dayMap = {};\n loginsInRange.forEach(e=>{ const k=dayKey(e.at); if(!k) return; dayMap[k]=(dayMap[k]||0)+1; });\n // build a contiguous day series for the last N days when a windowed range is used\n let daySeries = [];\n if(range==='today'){\n daySeries = Object.keys(dayMap).sort().map(k=>({key:k,count:dayMap[k]}));\n if(!daySeries.length) daySeries = [{ key: dayKey(new Date().toISOString()), count: 0 }];\n } else if(range==='all'){\n daySeries = Object.keys(dayMap).sort().map(k=>({key:k,count:dayMap[k]}));\n } else {\n const nDays = range==='30d' ? 30 : 7;\n for(let i=nDays-1;i>=0;i--){\n const d = new Date(now - i*24*3600*1000);\n const k = d.toISOString().slice(0,10);\n daySeries.push({ key:k, count: dayMap[k]||0 });\n }\n }\n\n // breakdowns (from login events in range)\n const byPerfil = tally(loginsInRange, e=>e.perfil, perfilLabel);\n const byMode = tally(loginsInRange, e=>e.mode, modeLabel);\n const byRede = tally(loginsInRange.filter(e=>e.rede), e=>e.rede, redeLabel);\n\n // most-active users — sessions count + last-seen + total views, in range\n const uMap = {};\n loginsInRange.forEach(e=>{\n const k = e.userId || e.name || '?';\n if(!uMap[k]) uMap[k] = { key:k, name:e.name||e.userId||'—', perfil:e.perfil, sessions:0, views:0, lastSeen:0 };\n uMap[k].sessions += 1;\n });\n // fold last-seen from the session rows + views from view events\n sessInRange.forEach(s=>{\n const k = s.userId || s.name; if(!k || !uMap[k]) return;\n const ls = new Date(s.lastSeenAt||s.startedAt).getTime();\n if(isFinite(ls) && ls>uMap[k].lastSeen) uMap[k].lastSeen = ls;\n uMap[k].views += Number(s.viewCount||0);\n });\n const activeUsers = Object.keys(uMap).map(k=>uMap[k]).sort((a,b)=> b.sessions-a.sessions || b.views-a.views).slice(0,10);\n\n // most-viewed sections — from view events in range\n const bySection = tally(viewEvents.filter(e=>inRange(e.at)), e=>e.section, sectionLabel).slice(0,10);\n\n // device / entry mix (from sessions in range — coarse UA + entryMode)\n const uaParsed = sessInRange.map(s=>parseUA(s.userAgent));\n const byKind = tally(uaParsed, r=>r.kind, x=>x);\n const byBrowser = tally(uaParsed, r=>r.browser, x=>x);\n const byEntry = tally(sessInRange, s=>s.entryMode||s.mode, modeLabel);\n\n if(loading){\n return `\n \n
Carregando estatísticas de uso…
\n
${esc(c.label)} `).join('');\n\n const kpis = `\n ${ICON.live}
Sessões ativas agora
${ICON.login} ${num(loginsToday)}
Logins hoje
${ICON.cycle} ${num(loginsCycle)}
Logins no ciclo ${topCycle?esc(topCycle):''}
${ICON.users} ${num(distinctUsers)}
Usuários distintos
${ICON.clock} ${fmtDuration(avgDur)}
Duração média
\n ${esc((String(u.name||'?').trim()[0]||'?').toUpperCase())} ${esc(u.name)}${esc(perfilLabel(u.perfil))} ${num(u.sessions)} \n ${num(u.views)} \n ${u.lastSeen?esc(relTime(new Date(u.lastSeen).toISOString())):'—'} \n `).join('') : '';\n\n const secRows = bySection.length ? bySection.map(s=>`\n ${esc(s.label)} ${num(s.count)} \n `).join('') : '';\n\n return `\n \n
\n
${kpis}
\n\n
\n
\n
${ICON.bars} Logins ao longo do tempo ${range==='today'?'hoje':(range==='all'?'todo o histórico':(range==='30d'?'últimos 30 dias':'últimos 7 dias'))}
\n ${loginsChart(daySeries)}\n
\n
\n\n
\n
\n
${ICON.users} Por perfil
\n ${breakdownBars(byPerfil, 'var(--mag)')}\n
\n
\n
${ICON.login} Por modo de entrada
\n ${breakdownBars(byMode, blue)}\n
\n
\n
${ICON.bars} Por rede
\n ${breakdownBars(byRede, green)}\n
\n
\n\n
\n
\n
${ICON.users} Usuários mais ativos top 10
\n ${userRows ? `
Usuário Perfil Sessões Views Último acesso ${userRows}
` : `
Nenhum acesso no período.
`}\n
\n
\n
${ICON.eye} Seções mais acessadas top 10
\n ${secRows ? `
` : `
Nenhuma visualização no período.
`}\n
\n
\n\n
\n
\n
${ICON.device} Tipo de dispositivo
\n ${breakdownBars(byKind, purple)}\n
\n
\n
${ICON.device} Navegador
\n ${breakdownBars(byBrowser, 'var(--orange)')}\n
\n
\n
${ICON.login} Modo de entrada (sessões)
\n ${breakdownBars(byEntry, 'var(--mag)')}\n
\n
\n
\n
${p} `;\n return {\n edit:S('\n
\n
\n ${esc(q.name||'(sem nome)')} \n ${q.active===false?`inativa `:`ativa `}\n ${vars.length?`${vars.length} var${vars.length>1?'s':''} `:''}\n
\n ${q.description?`
${esc(q.description)}
`:''}\n
${esc(sqlPreview)}${String(q.sql||'').length>120?'…':''}
\n ${vars.length?`
${vars.map(v=>`{{${esc(v)}}} `).join('')}
`:''}\n
\n
\n ${ICON.run} \n ${ICON.edit} \n ${armed\n ? `${ICON.ok} ${ICON.x} `\n : `${ICON.del} `}\n
\n
\n
\n
${isNew?'Nova consulta':'Editar consulta'} \n
Consultas com {{param}} são substituídas pelo runner antes de irem ao Databricks.
\n
\n
Nome (chave)
\n
Ativa
\n
\n
\n
\n
\n \n
\n
Esta consulta não tem parâmetros.
`;\n return `${vars.map(v=>`
{{${esc(v)}}}
`).join('')}
${esc(res.error)}
`;\n const rows = res.rows||[];\n if(!rows.length) return `0 linhas.
`;\n const cols = Object.keys(rows[0]);\n const head = cols.map(c=>`${esc(c)} `).join('');\n const body = rows.slice(0,50).map(r=>`${cols.map(c=>`${esc(r[c])} `).join('')} `).join('');\n return `${rows.length} linha(s)${rows.length>50?' (mostrando 50)':''}
\n ${esc(res.sql||'')}
\n `;\n}\n\nfunction runModal(d2){\n if(!d2.state.runOpen) return '';\n const id = d2.state.runId;\n const q = queries(d2).find(x=>x._id===id) || {};\n const running = d2.state.running;\n const res = d2.state.runResult;\n return `\n
\n
Executar · ${esc(q.name||'')} \n
Preencha os parâmetros e execute. As linhas voltam do Databricks ao vivo.
\n ${paramInputs(d2, q)}\n \n
${res?resultTable(res):(running?'
Consultando Databricks…
':'
Sem resultado ainda.
')}
\n
\n
Ver calendário de ciclos por grupo (${rows.length})
`;\n }\n const filter = String(d2.state.calFilter||'').trim();\n let list = rows.slice();\n if(filter) list = list.filter(r=>String(r.groupCode||'').includes(filter)||String(r.sectorCode||'').includes(filter)||String(r.cycle||'').includes(filter));\n list = list.slice().sort((a,b)=> (String(a.groupCode)+a.cycle).localeCompare(String(b.groupCode)+b.cycle));\n const head = `Ciclo Setor Grupo Início Fim Origem ${esc(r.cycle)} ${esc(r.sectorCode)} ${esc(r.groupCode)} ${esc(r.startDate)} ${esc(r.endDate)} ${esc(r.source||'—')} \n
\n
Calendário de ciclos por grupo ${rows.length} linhas \n
${ICON.search}
\n
Ocultar \n
\n
\n ${list.length>200?`
Mostrando 200 de ${list.length}.
`:''}\n
Nenhuma consulta ainda. Crie a primeira.
`;\n const toastEl = d2.state.toast?`${esc(d2.state.toast)}
`:'';\n return `\n \n
\n ${cards}\n ${calendarPanel(d2)}\n
\n ${editModal(d2)}\n ${runModal(d2)}\n ${toastEl}\n
\n
\n
natura-x-piloto — V1 × V2 \n
Dashboard de remuneração variável da consultora Natura. Esta é a doc do rebuild net-new no Data2 (V2), feito como stress test de um build spec-driven — \"The Data2 Way\". A V1 é o piloto em produção; a V2 atingiu paridade funcional sem tocar em prod.
\n
\n systemId 688179c2a93dd170ce61e598 \n as-of 2026-08-12 \n 42 tabelas · 19 PILOT · \n 37 listeners \n âncora: grupo 20200 rede1 diamante = R$ 680,00 \n
\n
\n\n
1 · TL;DR \n
\n O que é: painel de remuneração variável com drill GV → GN → Líder; cada perfil enxerga a própria estrutura para baixo.O que faz: calcula o ganho variável de cada consultora por ciclo, a partir de KPIs da API de performance da Natura + Databricks, aplicando um rules-engine versionado , e entrega num dashboard escopado por perfil — com admin pra editar as regras, simulador e histórico.O que foi a V2: reconstrução limpa do piloto direto no Data2, via o MCP data2-builder, seguindo uma metodologia spec-driven de 12 fases (dado primeiro, contratos, comportamento, UI por último). Rodou num workspace isolado (🧪 rebuild-pilot).Veredito do experimento: metodologia 8.5/10 , ergonomia da plataforma 6/10 , loop dispatch/verify/memory 9/10 . Nada foi publicado em prod — a V2 fica atrás de resolveActingIdentity(); o cutover troca só a fonte, não o formato. \n\n
2 · Escopo & features (o que a spec entregou) \n
A spec começou como \"vertical slice do dashboard principal\" e foi além, até um substituto funcional do piloto. O que entrou:
\n
\n Dashboard 3 perfis — GV→GN→Líder com drill real + agregação grupo/setor, sobre dados live da API. (live-real) Engine de ganhos config-driven — band tables (fixo & multiplicador) + fórmula estruturada (rede1 soma-de-parcelas, rede2 multiplicador×volume) + regras de bônus; versionado ruleset→cycle, editável por GUI.Admin completo — indicadores, regras (bands/bônus/construtor de fórmula), rulesets, binding de ciclo, gerenciador de KPI, viewers de audit-log + access-log.Simulador — auto-carrega a produção real de uma consultora; sliders por KPI (meta/realizado); re-simulação ao vivo; escada de remuneração com faixa ativa destacada. + Histórico .Impersonation formal + modelo two-app prod-compliant, seam resolveActingIdentity, scope locks por identidade efetiva. \n
\n
Proveniência dos dados \n
Live-real: KPIs, metas e remuneração vêm da API/Databricks de verdade. Seeded mirror: identidade + hierarquia (setor/grupo/usuário) são espelhos semeados atrás do resolver — o cutover de prod troca a fonte , não o shape.
\n
\n
\n
Fora de escopo / pendente \n
Nada publicado em prod. O IR/compiler (v2 do produto app-builder) não foi exercido. O cutover de prod — plugar a fonte real de identidade no seam — fica pendente, junto do natura-piloto-hardening (fechar as leituras abertas).
\n
\n\n
3 · O produto \n
Remuneração por duas redes com regra dependente de ciclo, mais bônus por cima:
\n
\n rede1 = soma de parcelas · rede2 = multiplicador × volume.Perfis / grãos: GV → GN → Líder (hierarquia de drill; cada um vê para baixo). \n Fontes de dado: uma API principal da Natura (performance) + Databricks (espalhado). Na V1 há ainda Tableau. \n \n\n
4 · V1 × V2 — visão geral \n
\n
\n
V1 · prod original \n
Modelo ad-hoc, dados espalhados \n
\n KPIs num tabelão denormalizado (display + cálculo + validade-por-ciclo + prompt no mesmo registro). \n Faixas e fórmulas espalhadas em várias tabelas + view client-side; regra é dado cravado. \n Caches manuais (painelCache, getGnGoalsCache, getLeaderGoalsCache).Identidade simples: email / name / password. \n Fluxos: listeners getKPIsGN/Leader, getSimulationLider, goals-por-grupo, getPoints, schedulers de fechamento. \n \n
\n
\n
V2 · rebuild Data2 \n
Engine config-driven, modelo normalizado \n
\n Regras vivem em tabelas versionadas (ruleset ↔ cycle). \"Mudar regra\" = editar linha, não código.Modelo normalizado com FKs e enums explícitos; admin GUI = CRUD sobre as tabelas de config. \n Simulador reusa o mesmo engine via inputsOverride.Identidade one-seam (4 modos) + impersonation formal com scope efetivo. \n UI também é config-driven (dashboard-config → dashboard-item); listeners PILOT · por recurso. \n \n
\n
\n\n
5 · Metodologia — dois eixos de \"v1/v2\" \n
Cuidado com a ambiguidade: existem dois eixos v1/v2 no projeto.
\n
\n
\n
Eixo A — o app \n
V1 = o piloto rodando em produção (API Natura + Databricks + Tableau).V2 = o rebuild net-new dentro do Data2 seguindo The Data2 Way.
\n
\n
\n
Eixo B — o produto (app-builder) \n
v1 = \"agent path\" — sub-agentes briefados + MCP cru + KB de footguns + verify em .data2.qa + loop findings→memory. Provado. v2 = IR/compiler determinístico (idempotência, drift, diff/apply). Aposta de escala; não pode travar o v1.
\n
\n
\n
The Data2 Way — 12 fases (gate por fase) \n
\n 0 Foundation1 Data models2 Schemas3 Identity & access4 Client state5 Integrations6 Endpoints & flows7 Design system8 Reusable UI9 Screens10 Navigation11 Verify & publish
\n
Doutrina: dado primeiro, contratos, comportamento, UI por último . Tela é projeção de dado + endpoint; construí-la cedo é retrabalho. Não se começa a fase N+1 sem o gate de N passar.
\n\n
6 · Decisões load-bearing \n
\n
Two-app identity + um único seam \n
Prod são dois apps com uma só lógica de escopo. App A (GV/Admin): login full-dashboard; impersonation mora aqui. App B (token-in-URL): identidade chega como token na URL, escopada (GN → só seu setor; Líder → só seu grupo). Regra de conformidade: impersonar GN X no App A tem que dar exatamente o que GN X vê no App B. Tudo passa por resolveActingIdentity(); o cutover de prod troca só a fonte, não o shape.
\n
\n
\n
Config-driven rules engine \n
O engine de ganhos lê as regras de tabelas (kpi-definition · band-table · earning-band · earning-formula.structure · bonus-rule, versionadas por ruleset → cycle). Consequência: o admin GUI cai fora do modelo de dados (é só CRUD), e o Simulador reusa a mesma computação de produção.
\n
\n
\n
Avaliação nativa estruturada, não Formula() string \n
rede1 = soma-de-produtos, rede2 = multiplicador × volume, avaliados nativamente no handler a partir do campo structure — não uma string Formula(). Isso rebaixou \"expor Formula no parser\" de blocker para nice-to-have.
\n
\n
\n
Seeded-vs-live por camada \n
KPIs/metas/remuneração rodaram live-real ; identidade + hierarquia foram seeded mirrors atrás do resolver. Toda camada declara se é live ou espelho, para o cutover trocar fonte e não formato.
\n
\n
\n
Identity seam = 4 modos \n
session (email/senha) · idp (OAuth/OIDC/SAML — SSO Natura/Maia) · token-url (app escopado) · impersonation (efetivo ≠ acting). Todos resolvem para um shape único {userId, perfil, structureCode, scope}; scope e impersonation vivem downstream, provider-agnósticos.
\n
\n\n
7 · Modelos de dados — real × KB \n
São 42 tabelas no sistema: as legadas (V1) convivem com as PILOT · (V2). Abaixo os schemas reais puxados do syste , confrontados com o que a KB (context-pack) descrevia.
\n\n
V1 — legado (schemas reais) \n
\n Tabela Campos reais Papel Kpis/remuneraçaotitulo, agrupamento, rede, color, perfil, index, index_grid, tipo_kpi, icon, marca, acoes, quem_sao (obj), descricao, calculo_do_kpi, indicadores (lookup), prompt, afetado_por_nivel, has_table, table (lookup), ganho, iap, hide, aceleradores_validados_ciclos, ciclos_validado… (28 campos) KPIs num tabelão: display + cálculo + validade-por-ciclo + prompt tudo junto tabelas-remuneraçãonome stub/ponteiro — praticamente vazio lideres_e_niveislider, nome, nivel, effective_from, effective_to líder → nível, temporal por strings GV/Admin usersemail, name, password identidade de login (herdada; a V2 mantém) parametros-faixas-remuneracao (OLD), formulas-ganhos, 🕘parametros-faixas-*— faixas e fórmulas espalhadas + view join client-side painelCache, getGnGoalsCache, getLeaderGoalsCache— caches manuais 🌐 Queries Databricks, query_library— SQL Databricks avulso
\n\n
V2 — PILOT · (schemas reais) \n
\n Tabela Campos reais (FK → destino) Papel Config / rules engine pilot-rulesetversion*, label, status (draft/active/archived) versão do conjunto de regras pilot-cyclecode* (202605), label, status (open/closed), isCurrent, rulesetVersion → ruleset, dashboardConfigVersion → dashboard-config, startsAt, endsAt ciclo amarra ruleset + dashboard pilot-kpi-definitioncode*, name*, brand (natura/avon/total), hasGoal, sourceGrain (sector/group), aggregation (sum/avg/none), goalKey, valueKey, rede, perfil, source (performance-api/databricks-query), apiIndexCode… (23 campos) definição declarativa de KPI pilot-band-tableref*, label*, kpiCode → kpi-definition, rede, perfil, valueType (fixed/multiplier), active catálogo de faixas pilot-earning-bandrulesetVersion → ruleset, bandTable (atingimento/pontos/…/multiplicador), rede, nivel (prata/ouro/diamante), brand, minPct, maxPct, value, bandTableRef → band-table linhas de faixa (fixo/multiplicador) pilot-earning-formularulesetVersion → ruleset, perfil, rede, template ({{}}), structure (object — soma-de-produtos) fórmula estruturada, avaliada nativa pilot-bonus-rulerulesetVersion → ruleset, perfil, rede, bonusType, conditions[], payoutType (flat/per-unit), payoutValue, perUnitKpiCode → kpi-definition regras de bônus Estrutura (temporal por ciclo) pilot-sectorcode*, name, gnCode, gnName, rede, effectiveFromCycle, effectiveToCycle, gvName setor pilot-groupcode*, name, sectorCode → sector, leaderCode, leaderName, nivel, rede, effectiveFrom/ToCycle grupo → setor Identidade & acesso pilot-useremail*, name, perfil (lider/gn/gv/admin), structureCode, sectorCode, scopeStructureCode, rede, nivel, gvName, naturaId (SSO Natura/Maia) identidade + escopo efetivo pilot-impersonation-ruleactorPerfil (gv/gn), targetPerfil (gn/lider), scope (any/within-sector) política de impersonation pilot-session, pilot-access-log, pilot-audit-log— sessão + logs de acesso/auditoria Dashboard (UI config-driven) pilot-dashboard-configversion*, label, status versão do layout pilot-dashboard-itemdashboardConfigVersion → config, perfil, rede, kpiCode → kpi-definition, mainKpiCode, relatedKpiCodes[], section, displayOrder, isBonus… card/item declarativo do dashboard pilot-dashboard-cache, pilot-query-library, pilot-cycle-calendar— cache de render + biblioteca de queries + calendário de ciclos
\n\n
\n
Real × KB — onde diverge \n
A KB descrevia o engine como kpi-definition / band-table / earning-formula.structure / bonus-rule / ruleset↔cycle. O syste real confirma todos e vai além: (1) pilot-earning-band guarda as linhas de faixa de fato; (2) sector → group são temporais por ciclo; (3) existe uma camada dashboard-config → dashboard-item que a KB não citava — a UI também é config-driven , não só o cálculo; (4) identidade ganhou tabela própria (user + impersonation-rule + session + access/audit-log), casando com o seam de 4 modos; (5) naturaId no pilot-user é o gancho concreto do SSO Natura (Maia) que a KB só previa como modo genérico token-url/idp.
\n
\n\n
8 · Mapa de entidades (V2) \n
O eixo do modelo é o versionamento : cada cycle amarra uma ruleset (as regras) e uma dashboard-config (o layout). Trocar de ciclo = apontar para outras versions. Tudo no rules-engine aponta para ruleset; kpi-definition é o hub referenciado por todo lado.
\n
\n \n pilot-ruleset \n version · status \n \n pilot-cycle \n code · isCurrent \n \n pilot-dashboard-config \n version · status \n \n rulesetVersion \n \n dashboardConfigVersion \n \n
\n
\n
Rules engine → ruleset \n
earning-band → ruleset · band-table (rulesetVersion, bandTableRef)
\n
earning-formula → ruleset (rulesetVersion)
\n
bonus-rule → ruleset · kpi-definition (perUnitKpiCode)
\n
band-table → kpi-definition (kpiCode)
\n
\n
\n
Hub: kpi-definition \n
Referenciado por band-table , bonus-rule , dashboard-item (kpiCode / mainKpiCode / relatedKpiCodes[]).
\n
A definição declarativa de cada indicador — de onde vem o valor (performance-api/databricks), grão, agregação, marca, perfil.
\n
\n
\n
Dashboard (config-driven) \n
dashboard-item → dashboard-config (dashboardConfigVersion)
\n
dashboard-item → kpi-definition (kpiCode/main/related)
\n
O que aparece em tela é linha de tabela, não código.
\n
\n
\n
Estrutura + Identidade \n
group → sector (sectorCode)
\n
user → sector (sectorCode) · naturaId → SSO
\n
impersonation-rule actorPerfil → targetPerfil + scope
\n
sector e group são temporais (effectiveFrom/ToCycle). session + access-log + audit-log são satélites.
\n
\n
\n\n
9 · O que o sistema faz — fluxos \n
Sete fluxos cobrem o sistema. Cada passo abaixo é um listener real (PILOT ·) do sistema.
\n\n
\n
1 · Identidade (entrada) \n
Dois caminhos, um só seam. App A resolve login; App B resolve o token da URL (clone fiel do SSO Natura, pronto pra switch).
\n
login (piloto-admin-auth) → pilotResolveIdentity → pilotUsers (switcher)
\n
token na URL → pilotResolveSession / pilotResolveNaturaSession → pilotResolveDisplayCycle
\n
\n\n
\n
2 · Dashboard (o coração) \n
Resolve identidade e ciclo, computa os ganhos pelo rules-engine, faz o rollup grupo→setor e monta os cards a partir da config.
\n
pilotResolveIdentity → pilotResolveDisplayCycle → pilotGetDashboardData → pilotGetGroupEarnings → pilotGetSectorRollup → pilotTrackAccess
\n
pilotGetGroupEarnings aplica ruleset/cycle → earning-band + earning-formula + bonus-rule. pilotGetSectorRollup agrega group→sector (sum/avg por KPI). pilotBandTables alimenta as faixas exibidas. Render config-driven via dashboard-config → dashboard-item.
\n
\n\n
\n
3 · Impersonation (GV/GN vê para baixo) \n
A identidade efetiva passa a ser a do alvo; o dashboard re-renderiza no escopo dele — idêntico ao que o alvo veria sozinho.
\n
pilotAllowedTargets → pilotImpersonate (start) → dashboard no escopo do alvo → pilotEndImpersonation
\n
\n\n
\n
4 · Simulador \n
Carrega a produção real da consultora, deixa mexer nos KPIs e re-simula reusando o mesmo engine.
\n
carrega produção real → sliders por KPI (meta/realizado) → pilotSimulate (inputsOverride) → escada de remuneração
\n
\n\n
\n
5 · Histórico \n
pilotHistorico → ganhos por ciclos anteriores
\n
\n\n
\n
6 · Admin (config-as-data) \n
Gated por piloto-admin-auth. Editar regra = editar tabela e subir uma nova version de ruleset/dashboard-config, que o cycle passa a apontar.
\n
pilotAdminRuleWrite · pilotAdminItemWrite · pilotQueryLibWrite → nova version → bind no cycle
\n
Telas: PILOT · Admin — Home / KPIs / Regras / Rulesets / Ciclos / Indicadores / Auditoria.
\n
\n\n
\n
7 · Dados externos / fechamento \n
Schedulers puxam Databricks e geram fechamentos por ciclo; queries parametrizadas rodam da query-library.
\n
🌐 Bricks Scheduler · Gera fechamentos (líderes/gerentes) · pilotRunQuery → Databricks / performance-api
\n
\n\n
\n
Postura de acesso (gates reais) \n
As leituras do piloto (dashboard, earnings, simulate, histórico) estão Policy(empty=open) — abertas, herança do modo piloto. As escritas de admin e o impersonation são gated por piloto-admin-auth. resolveIdentity/session/users/trackAccess estão UNGATED . Fechar as leituras é item do natura-piloto-hardening .
\n
\n\n
10 · O que quebrou — lições \n
\n Fail-silent code-component authoring (maior time-sink): corpo não persiste em silêncio, this solto, preview renderiza frame preto → stub-then-patch e verificar só em .data2.qa.Descoberta lida como impossibilidade: agente concluiu 2× que algo buildável era impossível (Schema sem create_schema; parser rejeita Formula()). Ambos buildáveis.Write-but-don't-wire: o resolver de impersonation foi autorado mas nunca wired no mount — parecia pronto, estava inerte. Daí o gate \"wire-it-and-prove-it\" .Config mal-taggeada vira bug de dado silencioso (band table rede2 marcada perfil:gn escondeu a tabela do líder) → oneOf + lint.Stale-published-app: \"está quebrado\" era o owner vendo o app publicado enquanto o fix vivia no draft → explicar draft × published no kickoff. \n\n
11 · Estado & fontes \n
\n sistema: natura-x-piloto (688179c2a93dd170ce61e598). Apps: PILOT · Admin App (pilot-admin), piloto-dashboard-view (novo-piloto). Workspace de build: 🧪 rebuild-pilot.Auth strategies: piloto-admin-auth · admin-view-auth · PILOT · Maia Auth (consultora SSO).Context pack completo: repo natura-x-piloto-context (CONTEXT.md + memory/ com 45+ notas de gotcha do Data2).Vault: Projects/natura-x-piloto + Resources/clients/natura/piloto.Âncora de regressão (nunca quebra): grupo 20200 rede1 diamante = R$ 680,00 . \n\n\n
![\"Natura](\"${t.media.lockup}\")
\n ${title}\n \n \n ${initials(user)}\n ![\"Natura](\"${esc(t.media.lockup)}\")
\n Simulador de Ganhos\n \n