Fase 03 — Publicações

07. Monitoramento de Redes Sociais

Arquivo: public/data/redes-sociais.xlsx

Prompt

## Página Redes Sociais

Rota `/redes-sociais` na navbar. Fonte: `public/data/redes-sociais.xlsx`, aba `Monitoramento de Redes Sociais`.

### Fase 1 — Parser (cabeçalho duplo)

Linha 1 = rede (Instagram, Facebook, LinkedIn, TikTok) · Linha 2 = métricas repetidas. Merge → `instagram_seguidores`, `facebook_alcance`, etc. Pule as 2 linhas após capturar headers.

Estrutura por linha:

```ts
{
  workspace: string
  data?: Date
  redes: {
    instagram: { seguidores, novos_seguidores, alcance, engajamento, reacoes, comentarios, compartilhamentos }
    facebook: { ... }
    linkedin:  { ... }
    tiktok:    { ... }
  }
}
```

Métricas derivadas (por rede): `taxa_engajamento = engajamento / alcance × 100` · `interacoes_totais = reacoes + comentarios + compartilhamentos` · `crescimento_pct = novos_seguidores / (seguidores − novos_seguidores) × 100`

### Fase 2 — Cards por rede

4 cards clicáveis (→ Fase 7). Cada card: logo da marca · seguidores totais (compacto) · novos seguidores (↑/↓) · alcance · taxa de engajamento (2 decimais) · sparkline se houver múltiplas datas.

Cores: Instagram `#E1306C → #F77737` · Facebook `#1877F2` · LinkedIn `#0A66C2` · TikTok `#000` + `#25F4EE / #FE2C55`

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

1. **Seguidores por rede/workspace** — barras agrupadas, cores das marcas
2. **Performance comparativa** — radar, workspace selecionável, 4 áreas sobrepostas
3. **Composição do engajamento** — barras empilhadas (Reações + Comentários + Compartilhamentos)
4. **Eficiência** — barras horizontais (`engajamento / seguidores × 100`)

### Fase 4 — Tabela detalhada

Cabeçalhos agrupados por rede (fundo com cor da marca, texto branco) · coluna `Workspace` sticky · linha de totais · paginação de 25 linhas.

### Fase 5 — Filtros

Workspace (multi-select + search; oculto se único) · Redes (toggles) · Métrica destacada (radio) · Período (date range) · Mínimo de seguidores (slider) · botão "Limpar filtros".

### Fase 6 — Insights automáticos

Faixa com 4 cards: **Melhor performer** (maior engajamento) · **Maior crescimento** · **Atenção** (queda de seguidores) · **Oportunidade** (alto alcance + baixo engajamento).

### Fase 7 — Drill-down por rede

Clique no card → drawer/modal fullscreen com cor da marca: 7 métricas em cards · série histórica (linha) · ranking de workspaces (tabela + barras inline) · donut de engajamento · botão "Exportar CSV desta rede".

### Fase 8 — Polimento

Search global por workspace · exportação consolidada (CSV, filtros aplicados) · estados vazios + loading skeletons + tooltips · atalhos: `/` foca search, `Esc` fecha drill-down, `1–4` abrem drill-down de cada rede.

---

08. Publicações

Arquivo: public/data/publicacoes.csv

Prompt

## Dashboard de Publicações — `/publicacoes`

Crie uma **página nova e independente**. Não altere páginas existentes. O CSV é `publicacoes.csv` → `public/data/publicacoes.csv`. Adicione rota `/publicacoes` e item **Publicações** (ícone `Newspaper`) na `<AppNavbar />`.

---

### CSV — Parser (separador `;`, UTF-8 BOM)

|Campo|Tipo|Observação|
|---|---|---|
|`Id`|number||
|`Canal`|string[]|split por vírgula, trim, remover vazios|
|`Publicação`|string|título|
|`Tipo`|string|ex: `"Post Único: Feed"`|
|`Workspace`|string||
|`Tarefa`|number|pode ser vazio|
|`Etapa`|string||
|`Projeto`|string|pode ser vazio|
|`Veiculação`|Date|`DD/MM/AAAA HH:MM` → Date|
|`Agendado`|string|pode ser vazio|
|`Aprovação`|string|pode ser vazio|
|`Situação`|string|`Publicado` / `Não publicado` / `Publicado parcialmente` / `Cancelado`|

**Campos derivados:** `canais_count`, `multicanal` (length > 1), `tem_projeto`, `tem_tarefa`, `atrasada` (Veiculação < hoje && Situação ≠ "Publicado"), `tipo_formato` (antes de `:`), `tipo_canal` (depois de `:`), `canais_unicos`.

---

### KPIs — 6 cards

|#|Label|Cálculo|Ícone|Cor|
|---|---|---|---|---|
|1|Total|`count(all)`|`Newspaper`|Azul|
|2|Publicadas|`Situação === 'Publicado'`|`CheckCircle2`|Verde|
|3|Não publicadas|`Situação === 'Não publicado'`|`Clock`|Cinza|
|4|Parcialmente|`Situação === 'Publicado parcialmente'`|`AlertCircle`|Amarelo|
|5|Atrasadas|`atrasada === true`|`AlertTriangle`|Vermelho|
|6|Multicanal|`multicanal === true`|`Share2`|Roxo|

Cada card: ícone + label + valor + percentual do total (exceto card 1). Tooltip no hover.

---

### Filtros — barra sticky, todos em tempo real

- **Workspace** — multi-select
- **Situação** — multi-select
- **Tipo de formato** — toggles
- **Canal** — multi-select com search (match em qualquer canal)
- **Etapa** — multi-select
- **Veiculação** — date range
- **Origem** — toggles: Com projeto / Com tarefa / Sem vínculo
- Botão **Limpar filtros** à direita

---

### Visualizações — seletor de 3 modos

|Modo|Ícone|Descrição|
|---|---|---|
|**Cards + Gráficos** (default)|`LayoutGrid`|KPIs + 5 gráficos|
|**Kanban**|`Columns3`|Colunas por `Etapa`; cards com título, workspace, canais, data, indicador de atraso; min-width 280px; scroll horizontal|
|**Tabela**|`Table`|Tabela completa (ver abaixo)|

---

### Gráficos (modo Cards + Gráficos, respeitam filtros)

1. **Situação** — donut (verde/cinza/amarelo/vermelho) com legenda + contagem + %
2. **Por Workspace** — barras verticais, coloridas por situação predominante
3. **Timeline** — barras/linha por semana ou mês (selecionável), separadas por situação
4. **Top canais** — barras horizontais, top 10
5. **Tipo de formato** — barras horizontais com subbarras por situação

---

### Tabela completa

Colunas: `Publicação | Workspace | Canal(is) | Tipo | Etapa | Veiculação | Situação | Tarefa | Projeto`

- `atrasada` → borda esquerda vermelha 4px
- `multicanal` → badge azul com nº de canais
- **Canal(is)**: até 2 nomes + badge `+N`
- **Veiculação**: `DD/MM/AAAA HH:MM`; vermelho se atrasada
- **Situação**: badge colorido
- Ordenação clicável; default `Veiculação` asc; paginação 25 linhas

**Drawer lateral ao clicar** com grupos:

- **Identificação**: Id, Publicação, Tipo, Workspace
- **Canais**: badges individuais
- **Workflow**: Etapa, Situação, Aprovação, Agendado
- **Vínculos**: Tarefa (link se existir), Projeto
- **Datas**: Veiculação + indicador de atraso
- **Derivados**: Formato, Tipo de canal, Multicanal, Qtd. de canais

---

### Search global + Exportar

- **Search**: tempo real em Publicação, Workspace, Canal, Etapa, Tipo; case-insensitive; limpar com `Esc` ou `X`
- **Exportar** (ícone `Download`): 12 colunas originais + 8 derivados; canais como string separada por vírgula; nome `publicacoes-export-AAAA-MM-DD.csv`; UTF-8 BOM, separador `;`

---

### Polimento

- Estado vazio: "Nenhuma publicação encontrada" + botão Limpar filtros
- Loading skeleton no parse inicial
- **Paleta semântica**: Verde = Publicado · Vermelho = Atrasada/Cancelado · Amarelo = Parcial · Cinza = Não publicado · Azul = informativo · Roxo = multicanal
- **Atalhos de teclado**: `/` foca search · `Esc` limpa · `1/2/3` alternam visualizações