# Dashboard — Modal Cálculos & Informações — Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Adicionar um botão `?` no header do Dashboard Operacional que abre um modal estático com definições de todas as métricas e suas fórmulas. **Architecture:** Todo o conteúdo é HTML estático embutido em `dashboard.php` (nenhuma query, nenhum endpoint). O botão fica em `dash-daterange-wrap` após o botão de tema. O modal segue exatamente o padrão visual do `#dash-modal-ocorrencias` já existente. O JS de abertura/fechamento é adicionado ao bloco `document.addEventListener('click')` e `document.addEventListener('keydown')` existentes em `dashboard.js`. **Tech Stack:** PHP (HTML estático), CSS inline no ` ``` - [ ] **Step 3: Verificar sintaxe (sem PHP — só CSS)** Não há lógica PHP nesse bloco. Confirmar que o bloco `` da Task 1, antes de `` O CSS da Task 1 e o HTML desta Task ficam na mesma posição (CSS primeiro, depois o `
` do modal). O CSS já foi inserido — este task insere o HTML do modal logo após o `` da Task 1. - [ ] **Step 1: Inserir HTML do modal após o `` adicionado na Task 1** Logo após o `` da Task 1 (e antes de `
`), inserir: ```html ``` - [ ] **Step 2: Confirmar posição final no arquivo** A estrutura ao final de `dashboard.php` deve ser (nessa ordem): 1. `` 2. `` (já existia) 3. `
` (já existia) 4. `` (Task 1) 5. `
` (esta Task) 6. `
` --- ### Task 4: Adicionar JS de abertura/fechamento em `dashboard.js` **Files:** - Modify: `componentes/Missoes/Logistica/sinais/Dashboard/html/dashboard.js` — estender dois `document.addEventListener` existentes - [ ] **Step 1: Estender o handler de `click` (linha ~4703)** Localizar o bloco: ```javascript document.addEventListener('click', (e) => { // 1) Click no X do modal if (e.target.closest('#dash-modal-fechar')) { DashboardDrillModal.fechar(); return; } // 2) Click no backdrop (fora do card interno) if (e.target.id === 'dash-modal-ocorrencias') { DashboardDrillModal.fechar(); return; } ``` Adicionar logo **após** `// 2) Click no backdrop` e antes de `// 3) Click em linha de tipo`: ```javascript // 2b) Modal Cálculos: abrir via botão info if (e.target.closest('#btn-dash-info')) { const m = document.getElementById('dash-modal-calculos'); if (m) m.style.display = 'flex'; return; } // 2c) Modal Cálculos: fechar via X if (e.target.closest('#dash-calculos-fechar')) { const m = document.getElementById('dash-modal-calculos'); if (m) m.style.display = 'none'; return; } // 2d) Modal Cálculos: fechar via backdrop if (e.target.id === 'dash-modal-calculos') { e.target.style.display = 'none'; return; } ``` - [ ] **Step 2: Estender o handler de `keydown` (linha ~4739)** Localizar o bloco: ```javascript document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && DashboardDrillModal._ctx) { DashboardDrillModal.fechar(); } }); ``` Substituir por: ```javascript document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { if (DashboardDrillModal._ctx) DashboardDrillModal.fechar(); const mc = document.getElementById('dash-modal-calculos'); if (mc && mc.style.display !== 'none') mc.style.display = 'none'; } }); ``` --- ### Task 5: Smoke test manual + commit **Files:** nenhum arquivo novo - [ ] **Step 1: Verificar que o arquivo PHP não tem erros de sintaxe** ```bash php -l componentes/Missoes/Logistica/sinais/Dashboard/html/dashboard.php ``` Resultado esperado: `No syntax errors detected` - [ ] **Step 2: Abrir o dashboard no browser e testar** Navegar até a página do Dashboard Logística. Verificar: 1. Botão `?` aparece após o botão de tema (ícone `bi-sun`) no header 2. Clicar no `?` abre o modal com header "Cálculos & Informações" 3. Todas as 6 seções aparecem com conteúdo (KPIs, Separação, Carregamento, Ranking, Pesagem, Erros) 4. Clicar no `×` fecha o modal 5. Clicar fora do card (no backdrop escuro) fecha o modal 6. Tecla `Escape` fecha o modal 7. Verificar no tema claro (botão ☀️): cores dos cards e badges ficam legíveis 8. Verificar que o modal de drill-down (click em KPI) ainda funciona normalmente após abrir/fechar o modal de cálculos - [ ] **Step 3: Commit** ```bash git add componentes/Missoes/Logistica/sinais/Dashboard/html/dashboard.php \ componentes/Missoes/Logistica/sinais/Dashboard/html/dashboard.js git commit -m "feat(dashboard): modal Cálculos & Informações com definições de todas as métricas" ```