# O que aproveitamos do Omada (UI/UX + assets) — julho/2026 Análise do material do controlador **TP-Link Omada** (HAR de 130 MB + páginas salvas) enviado para inspirar o Nexus. Este documento registra **o que foi copiado, o que foi adaptado, o que foi deixado de fora e por quê**. --- ## 1. O que o Omada é, por baixo - **Stack:** Ant Design (o azul `#1890ff`, os raios de 2–4px, os componentes) + Tailwind (utilitários `--tw-*`). Fonte do sistema (system-ui). - **Linguagem visual:** densa, sóbria, "enterprise". Muito **cinza** + **um azul** de acento. Sombras discretas; a hierarquia vem da **borda** e do **espaçamento**, não de sombra colorida. Cantos pouco arredondados. - **Assets:** ~1.900 PNG + ~1.460 SVG. A maior parte é **cromo de UI** (setas, botões, breadcrumbs, estados de menu, versões dark/hover de tudo) — inútil pra nós, pois já temos nosso próprio sistema de ícones vetoriais. O que **presta** é o acervo temático. --- ## 2. Assets adotados (`public/assets/img/omada/`) Copiamos **só o que representa coisas do mundo real**, não o cromo de UI: - **`tipos/`** — 82 ícones por **tipo de dispositivo** (a taxonomia deles: luz, tomada, câmera, fechadura, portão, termostato, sensor de fumaça, painel solar, TV, roteador, switch, wearable, geladeira inteligente…). É o achado mais valioso: mapeia direto nos nossos dispositivos de automação e nos clientes de rede. - **`devices/`** — 170 **fotos de produto** (EAP655, ER605, SG2210P…) — as fotos reais do hardware TP-Link, úteis para representar os aparelhos que o condomínio possui. **Como usamos** (helper novo em `Helpers`): - `H::deviceThumb($tipoOuCategoria)` — devolve a imagem do tipo dentro de um "chip" claro (`.dev-chip`); **fallback** para o ícone vetorial do sistema se não houver imagem. - `H::deviceProduct($modelo, $tipoRede)` — foto do produto por modelo; cai no ícone do tipo se não achar a foto. - Já aplicado no **painel de Automação** (cada dispositivo com o ícone do seu tipo) e na nova tela **Rede/Clientes** (ícone por tipo de cliente). > ⚠️ **Direito autoral:** essas imagens são arte da TP-Link. Foram incluídas por decisão > explícita do dono do sistema (uso interno). São ilustrações **cinza feitas para fundo > claro** — por isso o `.dev-chip` as coloca sobre um fundo claro (funciona nos dois > temas), que é exatamente como o Omada faz. Se o sistema for distribuído/comercializado, > reveja: o helper já tem fallback vetorial, então trocar por um set próprio depois é > indolor (só apagar a pasta). --- ## 3. Inspiração de UI/UX adotada (restyle do design system) O Omada é mais **contido e denso**; o Nexus estava mais "app de consumo" (raio 16px, sombras fortes, saltos no hover, fundo com gradiente). Puxamos o Nexus **na direção enterprise**, mexendo SÓ nos **tokens do `app.css`** — as ~165 telas usam as classes do design system, então nenhuma view precisou mudar: | | Antes | Depois | |---|---|---| | Raio | 16 / 10 / 22px | **10 / 6 / 14px** (+ `--radius-xs` 4px) | | Sombra base do card | `0 2px 6px` (visível) | `0 1px 2px` (mínima) — hierarquia pela **borda** | | Fundo do body | gradiente radial forte | **liso** (`--bg`) | | Fonte base | 15px | **14px** (mais denso) | | Linhas de tabela | 12×15px | **9×14px** (cabe mais sem rolar) | | Botão | gradiente + "glow" colorido + salto no hover | **cor cheia**, sem glow, sem salto | | Hover de card | `translateY(-2px)` + sombra grande | só realce de **borda/sombra sutil** | **O que NÃO mudou (de propósito):** a paleta continua a do Nexus (mais colorida que o azul-único do Omada — a cor carrega significado aqui: água, acesso, energia). E **toda a acessibilidade** que corrigimos antes (contraste AA, foco visível, alvo de toque 44px, badges por token) foi preservada — o restyle só apertou geometria e sombra. --- ## 4. Dado "roubado" que virou funcionalidade: Rede / Clientes A Open API do Omada (que já usamos) entrega a **lista de clientes conectados** com nome, MAC, IP, fabricante, **tipo/categoria** de dispositivo, SSID, sinal (dBm), tempo on-line e cabo×Wi-Fi. Isso não custava nada e não estava sendo usado. - **Nova tela `/rede`** (menu Automação → Rede, ability `network.view`): quem/o quê está conectado agora, **com o ícone do tipo**, sinal (forte/médio/fraco), via qual AP/switch, busca e filtro cabo×Wi-Fi. Resumo no topo (online, Wi-Fi, cabo). - É também um **sinal de PRESENÇA**: saber quantos/quais dispositivos estão na rede — base para automação futura "tem gente em casa?". App puro `App\Services\NetworkService` (best-effort, respeita o kill-switch `omada`). SÓ LEITURA (o Nexus nunca escreve no controlador — CLAUDE.md §5.24). **Próximo passo natural (não feito agora):** mapear MAC → pessoa (o celular do morador), para transformar "cliente X online" em "Fulano está em casa" e disparar cenas de automação. Fácil de somar depois (uma tabela `pessoa_dispositivo`), sem retrabalho. --- ## 5. Ideias observadas que ficam anotadas (não implementadas) - **Topologia de rede** (mapa AP↔switch↔gateway): o Omada desenha a árvore. Poderíamos fazer algo parecido para os dispositivos monitorados, mas é um projeto próprio (canvas). - **"Health score" por cliente** e gráficos de utilização de porta: existem na API; valem se a gestão de rede virar foco. - **Cards de estatística com sparkline + variação** (↑/↓ vs período): o Nexus já tem os stat-cards; dá para enriquecer com uma minigráfico e a seta de tendência. Anotado como melhoria incremental de baixo risco. --- ## 6. Rodada 2 — consistência + ícones em todo o sistema (2026-07) Depois do restyle inicial, foi feita uma passada de **consistência e cobertura**: **(a) Ícones de dispositivo aplicados nos monitoramentos** (não só no Omada): - **Automação** — painel (`automation/panel`), **Minha Casa** (`automation/mine`) e a **lista de dispositivos** (`automation/devices`) agora mostram o ícone do tipo (`H::deviceThumb($categoria)`) ao lado de cada aparelho. - **Rede/Clientes** (`/rede`) — ícone por tipo de cliente (mapeamento `deviceCategory` do Omada → ícone). - **Consumo** (`/medidores`) já usava ícone por tipo (água/gás/energia) — mantido. - Cobertura conferida: os **8** ícones de categoria de automação e os **19** de tipo de cliente resolvem todos para arquivo (senão, cai no ícone vetorial do sistema). **(b) Todos os ícones/imagens do HAR conferidos e importados:** 82 ícones de tipo (`tipos/`) + 174 imagens de produto (`devices/`, incluindo 4 fotos hi-res 280px). O resto do HAR era cromo de UI (setas/botões/estados de menu) — deliberadamente fora. **(c) Cores de status hardcoded → tokens (consistência no tema escuro / AA).** A auditoria anterior tinha convertido 19 telas; esta rodada pegou as que ficaram (sobretudo o módulo de **Manutenção**, criado depois): `os`, `pendencias`, `planos`, `equipes`, `obra_ocorrencias`, `compras`, `materiais`, além de `operacao`, `areas`, `modulos`, `diagnostics/selftest`, `inicio`, `backup`, `central`, `metering` e os banners de automação. Os badges viraram `H::badge($txt,$variant)` e os textos de status passaram a usar `--success-text` / `--warning-text` / `--danger-text` / `--info-text` (que no tema escuro apontam para a cor viva). **Resultado: 0 ocorrências** de hex de status como `color:` nas telas normais. **(d) O que NÃO foi mexido (de propósito):** as telas **kiosk** (mural/monitor) e as **páginas públicas** (convite, atualizar cadastro, etiqueta, chave pública) são auto-contidas e num contexto distinto (TV / sem layout do app), então mantêm sua própria escala de raio (maior, apropriada para leitura à distância). Se quiser alinhá-las também, é uma passada rápida e isolada. ## Verificação (final) Balanceamento PHP OK em todos os 27 arquivos tocados, CSS balanceado, **435 rotas** resolvem, `network.view` criada, 0 abilities órfãs, todos os ícones usados resolvem para arquivo, 0 resíduo de status-hex. Restyle é CSS-only (tokens); as correções de status são por token (sem migração). Assets em `public/assets/img/omada/` (helper com fallback vetorial). Documentado em `CLAUDE.md §3.1` (restyle + imagens) e §5.24 (rede/clientes).