Fase 02 — Insights

03. Funil Multicanal 360

Arquivo: public/data/funil-multicanal.csv

Prompt

## Funil Multicanal — `/funil`

Nova página analítica consumindo `public/data/funil-multicanal.csv`. Manter identidade visual das páginas existentes (cards, tipografia, cores semânticas, filtros sticky).

---

### Parser — Unpivot

CSV pivotado: primeira linha = datas (`DD/MM/AAAA`), primeira coluna = métricas. Normalizar para:

```ts
{ metrica: string, origem: string | null, data: Date, valor: number }
```

- `trim()` antes da conversão; usar `parseEkyteNumber`
- Extrair origem de métricas como `Leads (SQL) - Google Analytics`
- Origens conhecidas: `Google Analytics`, `RD Station`, `Meta Ads`; senão `null`
- Manter estrutura pivotada original em memória (usada na tabela/exportação)

---

### KPIs (6 cards no topo)

|#|Label|Fórmula|Ícone|
|---|---|---|---|
|1|Investimento total|`sum(Investimento)`|`Wallet`|
|2|Leads SQL totais|`sum(Leads SQL)`|`UserCheck`|
|3|CPL médio (SQL)|`Investimento / Leads SQL` — formato R$|`Calculator`|
|4|ROAS médio|`Receita / Investimento` — verde ≥ 1, vermelho < 1|`TrendingUp`|
|5|Vendas totais|`sum(Vendas)`|`ShoppingCart`|
|6|Receita total|`sum(Receita)`|`DollarSign`|

Todos com variação % vs período anterior e seta de tendência.

---

### Funil Visual

Fluxo: `Impressões → Cliques → Visitas Únicas → Leads (MQL+SQL) → Leads (SQL) → Vendas`

- Trapézios horizontais com largura proporcional ao valor
- Valores formatados (`1.2M`, `45.6K`) + badge de taxa de conversão entre etapas
- Hover: valor exato + comparação vs período anterior
- Gradiente azul claro → verde escuro

---

### Gráficos

**Grid 2 colunas:**

- **Evolução diária** — linhas com séries toggleáveis e eixo Y duplo
- **Origem dos Leads SQL** — barras empilhadas (Google Analytics / RD Station / Meta Ads) com cores fixas por origem

**CPL por origem** — linhas por origem + linha tracejada de CPL médio do período

**Grid 2 colunas:**

- **Funil por origem** — barras agrupadas comparando eficiência por canal
- **ROAS por origem** — barras horizontais com linha de referência `ROAS = 1` (verde = positivo, vermelho = abaixo)

---

### Filtros Sticky

- Período (date range)
- Canais (multi-select)
- Granularidade: Diário / Semanal / Mensal
- Comparação: vs período anterior / vs mesmo período ano passado / desligado
- Botão **Limpar filtros**

---

### Matriz + Exportação

Seção colapsável com tabela (linhas = métricas, colunas = datas), primeira coluna e cabeçalho sticky.

Botão **Exportar matriz (CSV)**: formato pivotado original, UTF-8 BOM, separador `;`.

---

### Polimento

Estados vazios, loading skeletons, tooltips em métricas/KPIs, cores semânticas consistentes, animações suaves.

---

04. Atividades por Executor

Arquivo: public/data/atividades-executor.csv

Prompt

# Adicionar página: Atividades por Executor (`/executores`)

## Visão geral
Nova página analítica consumindo `public/data/atividades-executor.csv` via `src/lib/ekyteParser.ts`, seguindo a identidade visual existente. Ícone: `Users`.

---

## Fase 1 — Parser

**Colunas:** Executor, Email, Workspace, Executadas (Tarefas), Atrasaram, Esforço (Tarefas), Qtd. Peças, Esforço (Etapas), Executados (Tickets), Esforço (Tickets), Esforço (Outros), Esforço (Total), Valor Realizado.

**Parsing:** `parseEkyteDuration` para esforços, `parseEkyteMoney` para valores, `parseEkyteNumber` para quantidades.

**Campos derivados** (divisões protegidas contra zero):

| Campo | Cálculo |
|---|---|
| `tem_atividade` | `Esforço (Total) > 0` |
| `eh_usuario_teste` | email contém `+`, `teste` ou `test` |
| `taxa_atraso` | `Atrasaram / Executadas (Tarefas)` |
| `eficiencia_horaria` | `Valor Realizado / esforço total em horas` |
| `produtividade_peca` | `Qtd. Peças / Executadas (Tarefas)` |
| `mix_esforco` | `{ tarefas, etapas, tickets, outros }` |
| `iniciais` | primeira letra do primeiro e último nome |
| `cor_avatar` | HSL via hash do nome — sat `60%`, light `50%`, hue `0–360` |

---

## Fase 2 — KPIs (4 cards)

| Card | Cálculo | Ícone | Cor |
|---|---|---|---|
| Executores ativos | `tem_atividade === true` | `Users` | Azul |
| Esforço total da equipe | soma de `Esforço (Total)` — `Xh Ymin` | `Clock` | — |
| Tarefas executadas | soma de `Executadas (Tarefas)` | `CheckCircle2` | Verde |
| Valor total realizado | soma de `Valor Realizado` em R$ | `DollarSign` | Verde |

---

## Fase 3 — Filtros Sticky

- **Workspace** — multi-select
- **Buscar executor** — search
- **Esconder usuários de teste** — toggle (default: ON)
- **Apenas com atividade** — toggle (default: ON)
- **Faixa de esforço total** — slider em horas
- **Apenas com atrasos** — toggle
- **Limpar filtros** — botão; reseta para defaults

---

## Fase 4 — Insights Automáticos (4 cards)

| Card | Critério |
|---|---|
| Top performer | maior `Valor Realizado` |
| Maior eficiência | maior `R$/h` |
| Mais sobrecarregado | maior `Esforço (Total)` |
| Maior taxa de atraso | maior `taxa_atraso` entre executores com ≥ 5 tarefas |

---

## Fase 5 — Gráficos (grid 2×2)

1. **Top 15 por esforço total** — barras horizontais empilhadas (tarefas / etapas / tickets / outros)
2. **Dispersão esforço × tarefas** — scatter plot; eixo X: esforço, eixo Y: tarefas, raio: valor realizado; linha de tendência
3. **Mix de esforço por executor** — barras horizontais 100% com distribuição percentual
4. **Eficiência horária** — barras horizontais com linha da média; verde = acima, cinza = abaixo

---

## Fase 6 — Tabela Detalhada

**Colunas:** Executor | Email | Workspace | Executadas | Atrasaram | Esforço Tarefas | Qtd. Peças | Tickets | Esforço Total | Valor Realizado | R$/h

- Avatar circular com `iniciais` + `cor_avatar`
- Badges: vermelho = atrasos, cinza = usuário teste
- Linha "Total" sticky no rodapé com somatórios
- Ordenação clicável; default: Esforço Total DESC
- Paginação de 25 linhas

---

## Fase 7 — Drawer de Detalhes

Ao clicar em uma linha, abre drawer lateral com:

- **Header:** avatar, nome, email, workspace
- **Cards:** Esforço Total, Valor Realizado, R$/h, Taxa de atraso
- **Donut:** mix de esforço
- **Comparativo:** executor vs média da equipe (tabela 2 colunas com setas)
- **Botão:** Exportar dados deste executor (CSV)

---

## Fase 8 — Exportação, Polimento e Atalhos

**Exportação CSV** (dados filtrados + colunas derivadas):
- Encoding: UTF-8 BOM, separador `;`
- Nome: `executores-export-AAAA-MM-DD.csv`

**Atalhos de teclado:**

| Tecla | Ação |
|---|---|
| `/` | Focar search |
| `Esc` | Limpar search |
| `T` | Alternar toggle "Mostrar todos" |

---

05. Despesas de Projetos

Arquivo: public/data/despesas-projetos.csv

Prompt

# Página `/despesas` — Despesas de Projetos

Ícone: `Receipt` | Fonte: `public/data/despesas-projetos.csv` + `src/lib/ekyteParser.ts`

---

## Fase 1 — Parser

**Colunas:** Workspace, Despesa, Projeto, Canal, Tags, Valor previsto, Data prevista, Valor realizado, Data realizada

**Pré-processamento:**

- `cleanZeroWidth` em `Despesa`
- Datas → `parseEkyteDate` | Monetários → `parseEkyteMoney` | Tags → split `|` | Canal vazio → `'(Sem canal)'`

**Campo `status`** (prioridade top→bottom):

|Status|Condição|
|---|---|
|`Pago parcial`|realizado > 0 e realizado < previsto|
|`Pago com atraso`|realizado > 0 e data realizada > data prevista|
|`Pago em dia`|realizado > 0 e data realizada ≤ data prevista|
|`Em atraso`|realizado = 0 e data prevista < hoje|
|`Pendente`|realizado = 0 e data prevista ≥ hoje|

**Campos derivados:** `dias_atraso`, `saldo` (previsto − realizado), `pct_executado`

---

## Fase 2 — KPIs (5 cards)

|Card|Cálculo|Ícone|Cor|
|---|---|---|---|
|Total previsto|Σ Valor previsto|`Wallet`|Azul|
|Total realizado|Σ Valor realizado|`CheckCircle2`|Verde|
|Saldo|previsto − realizado|`Scale`|Verde/Amarelo/Vermelho|
|Em atraso|count `status = 'Em atraso'` + tooltip valor total|`AlertTriangle`|Vermelho|
|% Execução|pct executado|`Percent`|Verde 80–100% / Amarelo 60–80% ou >100% / Vermelho <60% ou >120%|

---

## Fase 3 — Filtros Sticky

Workspace, Projeto (multi-select + search), Canal (inclui `Sem canal`), Tags (OR), Status (toggles, todos ativos), Período data prevista, Período data realizada, Faixa valor previsto, Toggle "Apenas em atraso" + botão **Limpar filtros**

---

## Fase 4 — Gráficos (grid 2×2)

1. **Top projetos** — barras empilhadas: realizado (verde) + pendente (cinza) + extensão vermelha se estouro
2. **Por canal** — barras agrupadas: previsto (azul) / realizado (verde)
3. **Status** — donut: pendente cinza, em atraso vermelho, pago em dia verde, pago parcial amarelo, pago com atraso laranja
4. **Distribuição de atrasos** — histograma por faixas de `dias_atraso`: adiantado verde, 0–7d amarelo, >7d vermelho

---

## Fase 5 — Fluxo de Caixa (largura total)

Séries: Valor previsto (azul tracejado) · Valor realizado (verde) · Projeção restante (vermelho pontilhado) + linha vertical "hoje"

---

## Fase 6 — Tabela Detalhada

Colunas: Workspace · Despesa · Projeto · Canal · Tags · Valor previsto · Data prevista · Valor realizado · Data realizada · Status · Saldo

- Paginação 25 linhas | Ordenação clicável (padrão: Data prevista ASC)
- `Em atraso` → `bg-red-50` + ícone `AlertTriangle`
- Tags como chips clicáveis (aplicam filtro) | Linha de totalização sticky

---

## Fase 7 — Drawer de Detalhes

Header: nome (`cleanZeroWidth`) + badge status + valor previsto + barra de progresso financeiro

Seções: Identificação · Financeiro · Datas · Histórico | Badge `dias_atraso` + métricas derivadas

---

## Fase 8 — Search, Export e Polimento

**Search global** (Despesa, Projeto, Workspace, Canal, Tags): match parcial, case-insensitive

**Export CSV:** dados filtrados + colunas derivadas, UTF-8 BOM, separador `;`, nome `despesas-export-AAAA-MM-DD.csv`

**Atalhos:** `/` foca search · `Esc` limpa search · `A` toggle "Apenas em atraso"

---

06. Monitoramento de Campanhas

Arquivo: public/data/monitoramento-campanhas.csv

Prompt

## Página Monitoramento de Campanhas

Adicione a página **Monitoramento de Campanhas** em `/campanhas` na navbar (ícone `Megaphone`), consumindo `public/data/monitoramento-campanhas.csv` via `src/lib/ekyteParser.ts`.

### Fase 1 — Parser

Colunas **Leads MQL+SQL, CPL, Leads SQL e variações %**: split por `\n`, parse `<fonte> | <valor>` → `{ fonte, valor }[]`. Campo vazio → `[]`. Normalize fontes: `RD Station`, `Google Analytics`, `Meta Ads`. Variações % via `parseEkytePercent` (preserva sinal). Demais colunas: monetários → `parseEkyteMoney`; numéricos → `parseEkyteNumber`; percentuais → `parseEkytePercent`.

Campos derivados: `leads_mql_sql_total`, `leads_sql_total`, `cpl_consolidado`, `cpl_sql_consolidado`, `eficiencia_funil` (Vendas ÷ leads_sql_total × 100), `tem_alerta` (variação % com |magnitude| > 20%).

### Fase 2 — KPIs (8 cards, grid 4×2)

Cada card: valor + delta % com seta colorida.

|#|Métrica|Cálculo|Ícone|
|---|---|---|---|
|1|Valor gasto|soma|`Wallet`|
|2|Impressões|soma, compacto (`1.2M`)|`Eye`|
|3|Cliques|soma|`MousePointerClick`|
|4|Visitas|soma|`Globe`|
|5|Leads MQL+SQL|soma das fontes|`UserPlus`|
|6|Leads SQL|soma das fontes|`UserCheck`|
|7|Vendas|soma|`ShoppingCart`|
|8|ROAS|Receita total ÷ Valor gasto total; verde ≥ 1, vermelho < 1|`TrendingUp`|

### Fase 3 — Filtros sticky

Workspace · Search (nome da campanha) · Toggle "Apenas variações relevantes" · Toggle "Apenas com alerta" · Slider Valor gasto · Slider ROAS mínimo (0–5) · Multi-select Fontes ativas · Botão "Limpar filtros".

### Fase 4 — Detalhamento de Leads por fonte

Tabela largura total: `Fonte | Leads MQL+SQL | CPL | Leads SQL | CPL SQL | Conversão MQL→SQL`. Linha de totais. Badge Conversão: verde ≥ 30%, amarelo 15–30%, vermelho < 15%.

### Fase 5 — Custo por etapa do funil

Barras agrupadas (top 10 por Valor gasto). Séries: CPM, CPC, CPV, CPL, CPA. Toggle "Normalizar (índice 100)".

### Fase 6 — Funil agregado e ROAS por campanha (grid 2 colunas)

1. **Funil agregado** — reutiliza o componente da página 03.
2. **ROAS por campanha** — barras horizontais; linha de referência em 1.0; verde ≥ 1, vermelho < 1.

### Fase 7 — Tabela completa (35 colunas)

Scroll horizontal, primeira coluna sticky. Colunas % como badges com ↑/↓. Colunas multi-linha como lista vertical. Ícone `Bell` em linhas com `tem_alerta`. Ordenação clicável; paginação 25 linhas; default `Valor gasto` desc.

### Fase 8 — Drawer de detalhes (450–500px)

Header com badges de alerta · Cards Valor gasto, Receita, ROAS, Vendas (com delta %) · Funil visual individual · Tabela leads por fonte · Custos por etapa · Variações detalhadas · Botão "Exportar CSV desta campanha".

### Fase 9 — Polimento

- **Export CSV**: 35 colunas originais (multi-linha com `\n`) + derivados; separador `;`; UTF-8 BOM; nome `campanhas-export-AAAA-MM-DD.csv`.
- **Qualidade de dados**: badge clicável → modal de linhas problemáticas.
- **UX**: loading skeletons, estados vazios, tooltips para CPM/CPC/CPV/CPL/CPA e ROAS.
- **Atalhos**: `/` foca search · `Esc` limpa · `R` toggle variações · `A` toggle alerta.