Prompts Base

Prompt 0 — Helper de parsing reutilizável

Quando executar: uma vez, antes de criar qualquer dashboard.

Por que: centraliza o tratamento de datas, moeda, percentuais, durações e armadilhas específicas do eKyte. Cada dashboard importa desse helper em vez de reimplementar.

Prompt para criar o helper

Crie um arquivo `src/lib/ekyteParser.ts` exportando um helper para tratar dados exportados do eKyte. Ele deve ter as funções:

- `parseEkyteCsv(rawText)`: faz parse de CSV exportado pelo eKyte (UTF-8 com BOM, separador `;`, aspas duplas). Remove o BOM e respeita aspas e vírgulas internas. Use Papaparse internamente. Retorna `{ data, errors }` — não lança exceção.
- `parseEkyteDate(s)`: converte `'DD/MM/AAAA'` em `Date` (retorna `null` se vazio).
- `parseEkyteDateTime(s)`: converte `'DD/MM/AAAA HH:MM'` em `Date`.
- `parseEkyteIsoDate(s)`: aceita data já em ISO 8601 (ex: `'2026-04-29'`) e retorna `Date`.
- `parseEkyteMoney(s)`: remove `'R$'`, trata vírgula OU ponto como separador decimal, retorna `number`.
- `parseEkytePercent(s)`: aceita `'3%'` ou `'+1.05%'` ou `'-1.59%'`. Remove `'%'`, preserva sinal, retorna `number`.
- `parseEkyteDuration(s)`: converte `'HH:MM'` em minutos (`number`).
- `parseEkyteNumber(s)`: trata `'1.234,56'` (milhar com ponto, decimal com vírgula) → `1234.56`.
- `cleanZeroWidth(s)`: aplica `s.replace(/​/g, '').trim()`.
- `extractDateFromFilename(filename)`: extrai a data do padrão eKyte `..._DD-MM-AAAA_HH-MM.csv` ou `..._DD-MM-AAAA_HH-MM.xlsx`. Retorna `Date` ou `null`.

Inclua testes unitários com casos extremos: string vazia, valor zerado, valores negativos, formato misto.

Execute os testes do helper e me mostre o resultado. Se algum teste falhar, ajuste a implementação.

---

Template genérico de prompt de dashboard

Use este template como base para criar novos dashboards além dos descritos neste guia:

# Dashboard — [NOME_PAGINA] (`/[rota]`)

Crie uma **página nova e independente**. Não altere páginas existentes.
Fonte: `public/data/[arquivo].csv` via `src/lib/ekyteParser.ts`.
Adicione rota `/[rota]` e item **[NOME_PAGINA]** (ícone `[Icone]`) na `<AppNavbar />`.
Identidade visual idêntica às páginas existentes (cards, tipografia, cores semânticas, filtros sticky, drawer lateral).

**Particularidade do CSV:** [descreva armadilha, ex: separador `;`, cabeçalho duplo, células multilinha, unpivot necessário, zero-width U+200B — ou remova se não houver]

---

## Fase 1 — Parser

**Colunas:**

| Campo | Tipo | Observação |
|-------|------|------------|
| [Campo A] | string | — |
| [Campo B] | Date | `DD/MM/AAAA` → Date |
| [Campo C] | string[] | split por `,`, trim, remover vazios |
| [Campo D] | number | `parseEkyteMoney` |
| [Campo E] | number | `parseEkyteDuration` → minutos |

...

## Fase 7 — Search, Exportação e Polimento

**Search global** — busca parcial, case-insensitive em: [Campo A], [Campo B].

**Exportar CSV** — dados filtrados + campos derivados · UTF-8 BOM · separador `;` · nome `[rota]-export-AAAA-MM-DD.csv`

**Atalhos:**

| Tecla | Ação |
|-------|------|
| `/` | Focar search |
| `Esc` | Limpar search |

---

Prompt 0.5 — Layout base e navegação

Quando executar: uma vez, após o Prompt 0 e antes de criar o segundo dashboard.

Por que: sem um layout compartilhado e uma sidebar, cada dashboard vira uma página solta sem navegação entre elas.

Prompt — Sidebar e roteamento

Crie a navegação base do projeto. O projeto usa React Router.

1. Crie `src/components/Sidebar.tsx` com:
    - Logo/título do projeto no topo
    - Seções colapsáveis: "Fase 01 — Operacional", "Fase 02 — Insights", "Fase 03 — Publicações"
    - Em cada seção, itens de navegação com ícone (lucide-react) + nome + rota
    - Item ativo com destaque visual (fundo + borda esquerda colorida)
    - Itens "A construir" ficam visíveis mas desabilitados (cinza, cursor not-allowed)
    - Rodapé com versão da aplicação e link "Sobre"
2. Crie `src/components/PageLayout.tsx`:
    - Recebe `title`, `dataFreshness` (Date | null) e `children` por prop
    - Renderiza: Sidebar à esquerda (largura fixa 240px no desktop, hambúrguer drawer no mobile abaixo de 768px), área de conteúdo à direita
    - Cabeçalho da área de conteúdo: título grande + badge `DataFreshnessBadge` à direita
3. Crie `src/components/DataFreshnessBadge.tsx`:
    - Recebe `date: Date | null`
    - Mostra `Dados atualizados em DD/MM/AAAA HH:MM` se houver data
    - Mostra `Data desconhecida` se não houver
    - Discreto (texto pequeno, cinza)
4. Crie `src/components/ParseErrorBadge.tsx`:
    - Recebe `errors: Array<{ linha, coluna, valorOriginal, motivo }>`
    - Se vazio, não renderiza nada
    - Se houver erros, badge amarelo `X linhas com problema`
    - Clicável → abre modal com tabela dos erros
5. Configure o React Router com as rotas:
    - `/tarefas` (já existe, embrulhar com `PageLayout`)
    - `/projetos`, `/funil`, `/executores`, `/despesas`, `/campanhas`, `/redes-sociais` (placeholder "Em construção" por enquanto)
    - Rota raiz `/` redireciona para `/tarefas`

Responsividade da Sidebar:

- Mobile (< 768px): ícone hambúrguer no topo da área de conteúdo abre a sidebar como drawer de largura total
- Tablet (768px–1280px): sidebar colapsável — ícones-only por padrão, expansível ao hover
- Desktop (≥ 1280px): sidebar fixa 240px

Use Tailwind para todo o styling. Ícones dos itens: Tarefas (CheckSquare), Projetos (FolderKanban), Funil (Filter), Executores (Users), Despesas (Receipt), Campanhas (Megaphone), Redes Sociais (Share2).