/data-build-dashboard

name: data-build-dashboard
description: Constrói um dashboard HTML interativo com gráficos, filtros e tabelas no tema Evolution (fundo escuro, acento #00FFA7, fonte Inter). Use quando precisar de uma visão executiva com cards de KPI, transformar resultados de query em relatório compartilhável, construir um snapshot de monitoramento de time, ou precisar de múltiplos gráficos com filtros em um arquivo HTML abrível no browser. Fontes: Stripe (`int-stripe`), Omie (`int-omie`), Licensing (`int-licensing`), Evo CRM (`int-evo-crm`).
argument-hint: "<descrição do dashboard> [fonte de dados]"

data-build-dashboard — Construir Dashboards Interativos

Gera um arquivo HTML auto-contido com gráficos, filtros, tabelas e estilo profissional no tema Evolution. Abre diretamente no browser — sem servidor ou dependências externas.

Uso

/data-build-dashboard <descrição do dashboard> [fonte de dados]

Fluxo de Trabalho

1. Entender os Requisitos do Dashboard

Determinar:

• **Propósito**: Visão executiva, monitoramento operacional, análise aprofundada, relatório de time
• **Audiência**: Quem vai usar este dashboard?
• **Métricas-chave**: Quais números importam mais?
• **Dimensões**: Por quais campos o usuário deve conseguir filtrar ou segmentar?
• **Fonte de dados**: Query ao vivo, dados colados, arquivo CSV, ou dados de exemplo

2. Coletar os Dados

**Se fonte de dados estiver disponível via skill:** 1. Usar `int-stripe`, `int-omie`, `int-licensing` ou `int-evo-crm` conforme necessário 2. Executar as queries PostgreSQL necessárias 3. Incorporar os resultados como JSON dentro do arquivo HTML

**Se dados forem colados ou enviados como arquivo:** 1. Fazer parse e limpeza dos dados 2. Incorporar como JSON no dashboard

**Se trabalhando a partir de uma descrição sem dados:** 1. Criar um dataset de exemplo realista que corresponda ao schema descrito 2. Indicar no dashboard que usa dados de exemplo 3. Fornecer instruções para substituir pelos dados reais

3. Desenhar o Layout do Dashboard

Seguir o padrão de layout padrão:

┌──────────────────────────────────────────────────┐
│  Título do Dashboard               [Filtros ▼]   │
├────────────┬────────────┬────────────┬───────────┤
│  KPI Card  │  KPI Card  │  KPI Card  │ KPI Card  │
├────────────┴────────────┼────────────┴───────────┤
│                         │                        │
│    Gráfico Principal    │   Gráfico Secundário   │
│    (maior área)         │                        │
│                         │                        │
├─────────────────────────┴────────────────────────┤
│                                                  │
│    Tabela de Detalhes (ordenável, rolável)        │
│                                                  │
└──────────────────────────────────────────────────┘

**Adaptar o layout ao conteúdo:**

• 2-4 cards de KPI no topo para números principais
• 1-3 gráficos na seção intermediária para tendências e breakdowns
• Tabela de detalhes opcional na parte inferior para drill-down
• Filtros no cabeçalho ou barra lateral conforme a complexidade

4. Construir o Dashboard HTML

Gerar um único arquivo HTML auto-contido seguindo o template base abaixo. O arquivo inclui:

**Estrutura (HTML):**

• Layout HTML5 semântico
• Grid responsivo usando CSS Grid ou Flexbox
• Controles de filtro (dropdowns, seletores de data, toggles)
• Cards de KPI com valores e labels
• Containers de gráficos
• Tabela de dados com cabeçalhos ordenáveis

**Estilo (CSS) — Tema Evolution:**

• Fundo escuro com camadas (#0A0A0A, #111111, #1A1A1A)
• Acento Evolution verde (#00FFA7) para destaques, bordas ativas e valores positivos
• Fonte Inter (Google Fonts CDN)
• Cards com bordas sutis e sombras escuras
• Design responsivo para diferentes tamanhos de tela

**Interatividade (JavaScript):**

• Chart.js para gráficos interativos (via CDN)
• Filtros dropdown que atualizam todos os gráficos e tabelas simultaneamente
• Colunas de tabela ordenáveis
• Tooltips de hover nos gráficos
• Formatação de números (vírgulas, moeda R$, percentuais)

**Dados (JSON incorporado):**

• Todos os dados incorporados diretamente no HTML como variáveis JavaScript
• Sem requisições de dados externos necessárias
• Dashboard funciona completamente offline

5. Implementar Tipos de Gráfico

Usar Chart.js para todos os gráficos. Padrões comuns para dashboards:

• **Gráfico de linha**: Tendências de séries temporais
• **Gráfico de barras**: Comparações de categorias
• **Gráfico de rosca (doughnut)**: Composição (quando <6 categorias)
• **Barras empilhadas**: Composição ao longo do tempo
• **Misto (barras + linha)**: Volume com sobreposição de taxa

6. Adicionar Interatividade

Usar os padrões de filtro e interatividade abaixo para filtros dropdown, filtros de intervalo de data, lógica de filtro combinada, tabelas ordenáveis e atualizações de gráficos.

7. Salvar e Abrir

1. Salvar o dashboard como arquivo HTML com nome descritivo (ex: `dashboard_financeiro_abril.html`) 2. Abrir no browser padrão do usuário 3. Confirmar que renderiza corretamente 4. Fornecer instruções para atualizar dados ou personalizar

---

Template Base — Tema Evolution Dark

Todo dashboard segue esta estrutura:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título do Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1" integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bGNeWe+6DChMTBJemed7ZnvJ" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0" integrity="sha384-cVMg8E3QFwTvGCDuK+ET4PD341jF3W8nO1auiXfuZNQkzbUUiBGLsIQUE+b1mxws" crossorigin="anonymous"></script>
    <style>
        /