Estrutura do Código, Performance,
DevOps e Plano de Evolução

7.1 Padrões Arquiteturais Adotados

7.2 Convenções de Nomenclatura

7.3 Organização dos Módulos JavaScript

O código do módulo Licenciamento está organizado em blocos funcionais dentro do <script> de index.html, delimitados por comentários de seção:

// ════════════════════════════════════════════════════════════════
// ── MÓDULO LICENCIAMENTO ─────────────────────────────────────────
// ════════════════════════════════════════════════════════════════

// [1] CONSTANTES E CONFIGURAÇÃO
const LIC_TIERS = [...];          // Configuração de tiers (Platina/Ouro/...)
const LIC_KPI_META = {...};       // Configuração dos 6 KPIs com thresholds
const LIC_AUDIT_STAGES = [...];   // 6 etapas do pipeline de auditoria
const LIC_HIST = {...};           // 12 tipos de evento do histórico
const LIC_ALERTA_TIPOS = {...};   // 9 tipos de alerta proativo
const LICENCIAMENTO_WHITELIST = [...]; // E-mails autorizados

// [2] ESTADO GLOBAL
let baseLicLeads = [];            // Todos os leads
let _licPerfData = {};            // KPIs indexados por lead_id
let _audData = {};                // Auditoria indexada por lead_id
let _licHistData = {};            // Histórico indexado por lead_id
let _licPendingFiles = {};        // Arquivos pendentes de upload
let _licExistingAnexos = [];      // Anexos carregados ao editar

// [3] FUNÇÕES DE CLASSIFICAÇÃO (puras — sem side effects)
function calcLicScore(lead) {...}
function getLicTier(lead) {...}
function licTierBadge(lead, compact) {...}

// [4] CRUD — Carregamento e persistência
async function carregarLicLeads() {...}
async function carregarLicHistorico(leadId) {...}
async function carregarLicAuditoria() {...}
async function carregarLicPerformance() {...}

// [5] FORMULÁRIO INTERNO (11 seções)
function abrirFormLead(id, returnTo) {...}
function fecharFormLead() {...}
function _licGoSec(idx) {...}
async function salvarLicLead() {...}
function _licGetFormData() {...}
function _licPreencherForm(lead) {...}

// [6] CEP E GEOCODIFICAÇÃO
function licMascaraCEP(input) {...}
async function licBuscarCEP(cep) {...}

// [7] ARMAZÉNS DINÂMICOS
function licAddWarehouse(data) {...}
function _licUpdateSummary() {...}

// [8] UPLOAD DE ANEXOS
function licFilesSelected(tipo, files) {...}
async function licSalvarTodosAnexos(leadId) {...}
async function licCarregarAnexos(leadId) {...}

// [9] DASHBOARD PRINCIPAL
function renderizarLicenciamento() {...}
function renderizarLicDashboard() {...}

// [10] MAPA INTERATIVO
async function abrirLicMapa() {...}
function _licInicializarMapa() {...}
function _licAtualizarChoropleth() {...}
function _licAtualizarMarkers() {...}
function _licMapAbrirPanel(lead) {...}

// [11] KANBAN DE LEADS
function abrirLicKanban() {...}
function renderizarLicKanban() {...}
async function _licKbMoverEtapa(id, etapa, motivo) {...}

// [12] SCORECARD DE PERFORMANCE
function abrirLicScorecard() {...}
function renderizarLicScorecard() {...}
async function salvarLicKpi() {...}

// [13] PIPELINE DE AUDITORIA
function abrirLicAuditoria() {...}
function renderizarLicAuditoria() {...}
async function audAvancarEtapa(leadId) {...}
async function emitirCertificado() {...}

// [14] PAINEL DE CAPACIDADE
function abrirLicCapacidade() {...}
function renderizarLicCapacidade() {...}

// [15] DISPONIBILIDADE COMERCIAL
function abrirLicDisponibilidade() {...}
function renderizarLicDisponibilidade() {...}
function executarMatchComercial() {...}

// [16] BOARD REPORT PDF
async function gerarBoardReport(e) {...}
function _buildBoardReportHtml(metrics) {...}

// [17] CENTRAL DE ALERTAS
function gerarLicAlertas() {...}
function abrirLicAlertas() {...}
function renderizarLicAlertas() {...}

// [18] HISTÓRICO DO LEAD (CRM TIMELINE)
async function registrarLicHistorico(...) {...}
function renderizarTimeline(registros, anexos, containerId) {...}

// [19] GERAÇÃO DE LINK DE PORTAL
async function licGerarLinkForm(leadId) {...}
async function licCriarEGerarLink() {...}

// [20] PDF INDIVIDUAL DO LEAD
async function gerarLicPDF(leadId) {...}
function _licBuildPDFHtml(lead, anexos, logoB64) {...}

7.4 Débito Técnico Mapeado

8.1 Performance Atual — Benchmarks

8.2 Estratégias de Cache Implementadas

8.3 Limites e Gargalos Identificados

// ── GARGALO 1: Carregamento de TODOS os dados na abertura ──
// Problema: carregarLicLeads() faz SELECT * sem paginação
// Impacto: >500 leads → timeout ou UI travada
// Solução: paginação server-side (limit/offset) + lazy loading
const { data } = await supabaseClient
  .from('lic_leads')
  .select('*')          // ← sem LIMIT = carrega tudo
  .order('created_at', { ascending: false });

// ── GARGALO 2: Charts destruídos e recriados a cada re-render ──
// Problema: renderizarLicDashboard() recria todos os 9 charts
// Impacto: layout shift visível; CPU pico em máquinas lentas
// Solução: atualizar data dos charts sem destruir (chart.data.datasets[0].data = ...)
Object.values(_licDCharts).forEach(c => {
  try { c.destroy(); } catch(e) {} // ← destroy sempre = gargalo
});

// ── GARGALO 3: pdf html2canvas em thread principal ──
// Problema: captura de canvas é síncrona e bloqueia a UI
// Impacto: interface congela durante geração do Board Report
// Solução: Web Worker para processamento off-thread

// ── GARGALO 4: renderizarTimeline com merge de arrays ──
// Problema: combina historico[] + anexos[] a cada abertura do painel
// Impacto: imperceptível agora, O(n log n) com muitos registros
// Solução: cache do resultado por lead_id

8.4 Otimizações Prioritárias

9.1 Matriz de Observabilidade

Implementação recomendada — Sentry.io (Fase 1 de evolução)

// Adicionar no <head> do index.html
<script>
  Sentry.init({
    dsn: "https://xxx@sentry.io/yyy",
    environment: location.hostname === 'pipelinevendemmia.com.br'
      ? 'production' : 'development',
    tracesSampleRate: 0.1,      // 10% das transações para APM
    beforeSend(event) {
      // Sanitiza dados sensíveis antes de enviar
      if (event.user) delete event.user.email;
      return event;
    }
  });
</script>

// Captura manual em pontos críticos
try {
  await salvarLicLead();
} catch(e) {
  Sentry.captureException(e, {
    tags: { modulo: 'licenciamento', acao: 'salvar_lead' },
    user: { email: EMAIL_USUARIO_LOGADO }
  });
  showToast('Erro ao salvar. Nossa equipe foi notificada.', 'error');
}

10.1 Pipeline de Deploy Atual

╔══════════════════════════════════════════════════════════════╗
║                PIPELINE DE DEPLOY ATUAL                      ║
╚══════════════════════════════════════════════════════════════╝

Developer workstation
  │
  ├─ Edita index.html (ou arquivos Licenciamento/)
  │
  ├─ git add . && git commit -m "feat: ..."
  │
  └─ git push origin main
        │
        ▼
GitHub Repository (github.com/Gueilee/pipeline-comercial)
        │
        ├─ GitHub Actions detects push to main (~2s)
        │
        ├─ Pages build job (~20-30s)
        │   ├─ Copies static files
        │   ├─ Configures custom domain
        │   └─ Invalidates Akamai cache
        │
        └─ Deploy complete (~60s total)
              │
              ▼
        pipelinevendemmia.com.br ← atualizado globalmente

10.2 Estratégia de Versionamento

10.3 Procedimentos de Rollback

# Rollback imediato (revert do último commit)
git revert HEAD --no-edit
git push origin main
# Deploy automático em ~60 segundos

# Rollback para versão específica
git log --oneline -10             # identifica o commit-alvo
git revert HEAD~3..HEAD --no-edit # reverte os últimos 3 commits
git push origin main

# Hotfix de emergência (sem histórico de revert)
git reset --hard HEAD~1           # CUIDADO: perde o commit localmente
git push origin main --force-with-lease  # força push seguro

# Verificar se o rollback chegou ao usuário
curl -I https://pipelinevendemmia.com.br/index.html
# Verificar header ETag — mudou = cache foi invalidado

12.1 Curto Prazo — 0 a 3 meses

12.2 Médio Prazo — 3 a 9 meses

src/
├── main.js                    // entry point
├── supabase.js                // client singleton
├── auth/
│   └── auth.js
├── licenciamento/
│   ├── index.js               // exports públicos
│   ├── leads.js               // CRUD de leads
│   ├── tiers.js               // classificação
│   ├── formulario.js          // formulário 11 seções
│   ├── mapa.js                // Leaflet + choropleth
│   ├── kanban.js              // kanban de leads
│   ├── scorecard.js           // KPIs
│   ├── auditoria.js           // pipeline de auditoria
│   ├── historico.js           // CRM timeline
│   ├── alertas.js             // central de alertas
│   ├── disponibilidade.js     // match comercial
│   └── reports/
│       ├── board-report.js    // PDF executivo
│       └── lead-pdf.js        // PDF individual
├── portal/                    // portal público (standalone)
└── shared/
    ├── toast.js
    ├── cep.js
    └── storage.js

# .github/workflows/tests.yml
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright install chromium
      - run: npx playwright test
        env:
          TEST_BASE_URL: "https://staging.pipelinevendemmia.com.br"

// supabase/functions/notify-form-filled/index.ts
import { serve } from "https://deno.land/std/http/server.ts";

serve(async (req) => {
  const { record } = await req.json();  // webhook payload
  if (record.form_status === 'concluido') {
    await sendEmail({
      to: 'comercial@vendemmia.com.br',
      subject: `Formulário preenchido: ${record.razao_social}`,
      body: `Acesse: https://pipelinevendemmia.com.br`
    });
  }
  return new Response('ok');
});

12.3 Longo Prazo — 9 a 24 meses

12.4 Arquitetura-Alvo (Versão 3.0 — 24 meses)

╔══════════════════════════════════════════════════════════════╗
║           ARQUITETURA-ALVO (versão 3.0)                      ║
╚══════════════════════════════════════════════════════════════╝

┌─────────────────────────────────────────────────────────────┐
│                      CLIENTES                               │
│  Browser (React SPA)  │  Mobile (React Native)  │  Portal  │
└───────────┬───────────┴──────────┬──────────────┴────┬─────┘
            │                      │                   │
            ▼                      ▼                   ▼
┌─────────────────────────────────────────────────────────────┐
│                   API GATEWAY (Supabase)                    │
│  Auth (JWT)  │  PostgREST  │  Storage  │  Realtime (WS)    │
└──────────────┬──────────────┬──────────┴───────────────────┘
               │              │
    ┌──────────▼──┐    ┌──────▼──────────────────────────────┐
    │ PostgreSQL  │    │      Edge Functions (Deno)           │
    │   17        │    │  - PDF generation (Puppeteer)        │
    │ 5 tabelas   │    │  - Email notifications               │
    │ lic_*       │    │  - MIME validation                   │
    │ RLS por     │    │  - WMS webhook processor             │
    │ tenant      │    │  - Scheduled KPI sync                │
    └─────────────┘    └──────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                   INFRAESTRUTURA                            │
│                                                             │
│  GitHub Pages (CDN)     │  Supabase Cloud (sa-east-1)      │
│  React SPA (Vite build) │  PostgreSQL managed              │
│  Akamai CDN global      │  Storage S3-compatible           │
│  SSL automático         │  Auth + Edge Functions           │
│                         │  Backups automáticos PITR         │
├─────────────────────────┴────────────────────────────────── │
│  CI/CD: GitHub Actions                                      │
│  Tests: Playwright E2E + Vitest unit                        │
│  Monitoring: Sentry + UptimeRobot + Supabase Dashboard      │
│  Alertas: PagerDuty (via Sentry) para erros críticos        │
└─────────────────────────────────────────────────────────────┘