# Ajuste de Dados — Filtros de Campos Vazios — 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 3 toggles pills (Sem cubagem, Sem peso, Sem endereço) ao lado do toggle existente "Sem barras" na tela de designação de Ajuste de Dados.

**Architecture:** Extensão direta da feature já implementada (`semCodigoBarras`). Mesmo padrão: Set pré-computado no `init()`, flag em `filters.primary`, check em `getFiltered()`, listener em `bindEvents()`. O container PHP isolado do toggle existente é substituído por um container flex com os 4 pills.

**Tech Stack:** PHP (view template), vanilla JS, Bootstrap Icons (`bi-box`, `bi-speedometer2`, `bi-geo-alt`).

---

## Arquivos modificados

| Arquivo | O que muda |
|---|---|
| `componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.php` | Container flex com 4 pills (substitui div isolado); texto "Sem c. barras" → "Sem barras" |
| `componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js` | 3 flags, 3 Sets, guard expandido, 3 checks em getFiltered, 3 listeners |

---

## Task 1: Container PHP com os 4 pills

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.php:897-906`

- [ ] **Localizar o bloco atual** (linhas 897–906):

```html
                <?php if ($tipo === 'ajuste'): ?>
                <div style="margin: 0.5rem 0;">
                    <button type="button"
                            id="toggle-sem-barras"
                            class="btn-action"
                            title="Mostrar apenas produtos sem código de barras">
                        <i class="bi bi-upc-scan"></i> Sem c. barras
                    </button>
                </div>
                <?php endif; ?>
```

- [ ] **Substituir pelo container flex com os 4 pills:**

```html
                <?php if ($tipo === 'ajuste'): ?>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0;">
                    <button type="button" id="toggle-sem-barras" class="btn-action" title="Mostrar apenas produtos sem código de barras">
                        <i class="bi bi-upc-scan"></i> Sem barras
                    </button>
                    <button type="button" id="toggle-sem-cubagem" class="btn-action" title="Mostrar apenas produtos sem cubagem">
                        <i class="bi bi-box"></i> Sem cubagem
                    </button>
                    <button type="button" id="toggle-sem-peso" class="btn-action" title="Mostrar apenas produtos sem peso">
                        <i class="bi bi-speedometer2"></i> Sem peso
                    </button>
                    <button type="button" id="toggle-sem-end" class="btn-action" title="Mostrar apenas produtos sem endereço">
                        <i class="bi bi-geo-alt"></i> Sem endereço
                    </button>
                </div>
                <?php endif; ?>
```

- [ ] **Verificar:**

```bash
grep -n "toggle-sem-\|flex-wrap\|bi-box\|bi-speedometer\|bi-geo-alt" \
  componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.php
```

Esperado: 4 linhas com `toggle-sem-*`, 1 com `flex-wrap`, 1 com cada ícone.

---

## Task 2: Flags e Sets no State JS

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js:43` (flags)
- Modify: `componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js:108` (Sets)

- [ ] **Adicionar 3 flags em `State.filters.primary`** (linha ~43):

Antes:
```js
        filters: {
            primary: { search: '', semCodigoBarras: false },
            operadores: { search: '' }
        },
```

Depois:
```js
        filters: {
            primary: {
                search: '',
                semCodigoBarras: false,
                semCubagem: false,
                semPeso: false,
                semEndereco: false
            },
            operadores: { search: '' }
        },
```

- [ ] **Adicionar 3 Sets no `State.init()`** — localizar (linha ~108):

```js
                // Pré-computa IDs de produtos sem código de barras (O(n) uma vez)
                this.semBarrasIds = new Set(
                    this.rawPrimaryData
                        .filter(p => !p.codigo_barras)
                        .map(p => String(p.id))
                );
```

Adicionar imediatamente após:

```js
                this.semCubagemIds = new Set(
                    this.rawPrimaryData
                        .filter(p => !p.cubagem || p.cubagem == 0)
                        .map(p => String(p.id))
                );
                this.semPesoIds = new Set(
                    this.rawPrimaryData
                        .filter(p => !p.peso || p.peso == 0)
                        .map(p => String(p.id))
                );
                this.semEnderecoIds = new Set(
                    this.rawPrimaryData
                        .filter(p => !p.localizacao)
                        .map(p => String(p.id))
                );
```

- [ ] **Verificar:**

```bash
grep -n "semCubagemIds\|semPesoIds\|semEnderecoIds\|semCubagem\|semPeso\|semEndereco" \
  componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js
```

Esperado: cada nome aparece pelo menos 2 vezes (definição no State + uso posterior).

---

## Task 3: Guard e filtros em getFiltered

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js:163-178`

- [ ] **Atualizar o guard** (linha ~163):

Antes:
```js
            if (!filter || (!filter.search && !filter.semCodigoBarras)) return items;
```

Depois:
```js
            if (!filter || (
                !filter.search &&
                !filter.semCodigoBarras &&
                !filter.semCubagem &&
                !filter.semPeso &&
                !filter.semEndereco
            )) return items;
```

- [ ] **Expandir o bloco ajuste** (linha ~177-178):

Antes:
```js
                        // Filtro sem código de barras: exclui quem TEM barras
                        if (filter.semCodigoBarras && !State.semBarrasIds.has(String(item.id))) return false;
                        return true;
```

Depois:
```js
                        // Filtro sem código de barras: exclui quem TEM barras
                        if (filter.semCodigoBarras && !State.semBarrasIds.has(String(item.id)))   return false;
                        if (filter.semCubagem      && !State.semCubagemIds.has(String(item.id)))  return false;
                        if (filter.semPeso         && !State.semPesoIds.has(String(item.id)))     return false;
                        if (filter.semEndereco     && !State.semEnderecoIds.has(String(item.id))) return false;
                        return true;
```

- [ ] **Verificar:**

```bash
sed -n '160,195p' componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js
```

Confirmar: guard multi-linha com 4 condições, bloco ajuste com 4 checks de Set + `return true`.

---

## Task 4: Event listeners dos 3 novos toggles

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js:602`

- [ ] **Localizar o listener existente** (linha ~597–602):

```js
            document.getElementById('toggle-sem-barras')?.addEventListener('click', function () {
                State.filters.primary.semCodigoBarras = !State.filters.primary.semCodigoBarras;
                this.classList.toggle('active', State.filters.primary.semCodigoBarras);
                State.pagination.primary.page = 1;
                View.renderPrimary();
            });
```

- [ ] **Adicionar os 3 listeners imediatamente após:**

```js
            document.getElementById('toggle-sem-cubagem')?.addEventListener('click', function () {
                State.filters.primary.semCubagem = !State.filters.primary.semCubagem;
                this.classList.toggle('active', State.filters.primary.semCubagem);
                State.pagination.primary.page = 1;
                View.renderPrimary();
            });

            document.getElementById('toggle-sem-peso')?.addEventListener('click', function () {
                State.filters.primary.semPeso = !State.filters.primary.semPeso;
                this.classList.toggle('active', State.filters.primary.semPeso);
                State.pagination.primary.page = 1;
                View.renderPrimary();
            });

            document.getElementById('toggle-sem-end')?.addEventListener('click', function () {
                State.filters.primary.semEndereco = !State.filters.primary.semEndereco;
                this.classList.toggle('active', State.filters.primary.semEndereco);
                State.pagination.primary.page = 1;
                View.renderPrimary();
            });
```

- [ ] **Verificar:**

```bash
grep -n "toggle-sem-" componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js
```

Esperado: 4 linhas com `toggle-sem-barras`, `toggle-sem-cubagem`, `toggle-sem-peso`, `toggle-sem-end`.

---

## Task 5: Commit

- [ ] **Commit:**

```bash
git add componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.php \
        componentes/Missoes/Logistica/sinais/Designacoes/html/designar_unificado.js
git commit -m "feat(ajustedados): filtros sem cubagem, peso e endereço na designação"
```