# Design: Revisão Visual — Portaria de Pedidos e Alertas TMS

**Data:** 2026-06-22
**Abordagem escolhida:** B — Reescrita de view (HTML/CSS + mínimo JS), lógica backend intacta

---

## Contexto

Dois componentes do painel Central precisam de melhoria de densidade e UX:

1. **Portaria de Pedidos** (`html/central_portaria.php`) — overlay `display:flex` customizado, 783 linhas
2. **Alertas TMS** (`forms/alertas_tms.php`) — conteúdo de modal Bootstrap, atualmente wired como `<a target="_blank">`

---

## 1. Portaria de Pedidos

### 1.1 Mudanças visuais/HTML

| Elemento | Atual | Novo |
|---|---|---|
| Parágrafo descritivo "Gerencie os pedidos..." | visível | **removido** |
| Summary cards — padding | `p-3` | `p-2` |
| Summary cards — contador | `text-2xl font-bold` | `text-xl font-bold` |
| Summary cards — ícone | `text-3xl` | `text-2xl` |
| Summary cards — margem inferior | `mb-4` | `mb-2` |
| Toolbar — padding | `p-2` | `p-1.5` |
| Toolbar — margem inferior | `mb-3` | `mb-2` |
| Search — ícone lupa | `absolute left-2.5 top-2.5` (desalinhado) | `absolute left-2.5 top-1/2 -translate-y-1/2` |
| `<th>` — padding | `p-3` | `py-1.5 px-2` |
| `<td>` — padding (todas as colunas) | `p-3` | `py-1 px-2` |
| Número do pedido | `text-sm font-bold` | `text-xs font-semibold` |
| Nome do cliente | `text-sm font-bold text-gray-100` | `text-xs text-gray-100` |
| Cidade/UF | `text-xs text-gray-400` | inalterado (já compacto) |
| `#modal-portaria` padding-top | `100px` | `70px` |

Resultado esperado: linhas de ~34px (vs ~60px atuais), aproximadamente o dobro de registros visíveis sem scroll.

### 1.2 Mudanças JS — auto-refresh

- **Remove** `<button id="btn-teste-refresh-portaria">` (linhas 777–784)
- **`abrirPortaria()`**: adiciona `window.__portariaRefreshTimer = setInterval(window.__refreshPortariaTeste, 30000)` após `carregarDadosPortaria()`
- **`fecharModalPortaria()`**: adiciona `clearInterval(window.__portariaRefreshTimer)` antes de `idsSelecionados.clear()`
- Socket já dispara `processarDadosMapa` via broadcast → refresh em tempo real sem mudança adicional

`window.__refreshPortariaTeste` permanece intacto (submete `.formularioListarPortaria`).

### 1.3 O que NÃO muda

- JS de seleção, aprovação, animação "nave", dedup self-echo
- Formulários ocultos `formularioAprovarPortaria` e `formularioListarPortaria`
- Rota backend `aprovarPortaria` / `listarPortaria`
- Lógica de cores (tipo, tempo, cubagem)

---

## 2. Alertas TMS

### 2.1 Wiring do botão (`central.php` linhas 4125–4133)

Troca `<a href="..." target="_blank">` por `<button>` com `abrirModal('alertasTms', [])`:

```php
// ANTES
<a href="<?= LINK_SISTEMA ?>/admin/?modulos/lancamentos/romaneios/" target="_blank"
   class="gcb-btn relative group" title="...">

// DEPOIS
<button type="button" class="gcb-btn relative group"
        <?= $galaxia->abrirModal('alertasTms', [])['html'] ?>
        title="Alertas TMS — bloqueios de sync e pedidos cancelados em romaneios ativos">
```

Badge/counter e polling JS (`gcb-alertas-tms-badge`, `gcb-alertas-tms-counter`) ficam inalterados.

O modal Galaxia usa `new bootstrap.Modal(el)` com padrões BS5: `backdrop: true` (clicar fora fecha) e `keyboard: true` (Escape fecha). Não é necessário configuração adicional.

### 2.2 Estrutura scroll + header sticky (`forms/alertas_tms.php`)

Envolve todo o conteúdo em um wrapper scroll container:

```html
<div style="max-height: 82vh; overflow-y: auto;">
    <div class="modal-header sticky top-0 z-30">...</div>
    <div class="g-modal-conteudo" style="...">...</div>
</div>
```

O `sticky top-0` do `modal-header` funciona relativo ao wrapper (que é o scroll container), mantendo o cabeçalho com `×` sempre visível independente da posição de scroll.

### 2.3 Densidade (`forms/alertas_tms.php`)

| Elemento | Atual | Novo |
|---|---|---|
| `g-modal-conteudo` padding | `1.25rem 1.5rem` | `0.8rem 1rem` |
| Cards (fantasma/bloqueio) padding | `16px 18px` | `10px 12px` |
| Bloco de guidance padding | `9px 13px` | `6px 10px` |
| Espaço entre seções | `margin-bottom: 28px` | `16px` |
| Section header `margin` | `0 0 12px` | `0 0 8px` |
| Título pedido/rota font-size | `1.05rem` | `0.88rem` |
| Título pedido/rota font-weight | `700` | `600` |

### 2.4 O que NÃO muda

- Lógica PHP: `$fmtData`, `$guidanceBloqueio`, `Sinal_alertasTms`
- Botão "Remover do Romaneio" e `removerPedidoCuradoriaAlertasTMS()`
- Badge/counter JS e polling `/labs/apis/.../contar`
- Cores semânticas (vermelho fantasma, laranja bloqueio)

---

## Arquivos modificados

| Arquivo | Tipo de mudança |
|---|---|
| `componentes/Missoes/Logistica/sinais/Central/html/central_portaria.php` | HTML + CSS + JS |
| `componentes/Missoes/Logistica/sinais/Central/html/central.php` | 1 bloco HTML (botão GCB) |
| `componentes/Missoes/Logistica/sinais/Central/forms/alertas_tms.php` | HTML + densidade |

---

## Critérios de aceite

- [ ] Mais registros da Portaria visíveis sem scroll (alvo: ~2× linha atual)
- [ ] Campo de busca com ícone centrado verticalmente
- [ ] Botão "Atualizar Portaria" removido; refresh automático a cada 30s + socket
- [ ] Alertas TMS abre como modal inline (não nova aba)
- [ ] Modal Alertas TMS fecha com Escape, clique no backdrop, ou botão ×
- [ ] Conteúdo do modal Alertas TMS rola internamente com cabeçalho sempre visível