Geral
A visão macro do dashboard — camada de síntese sobre os dados, as duas áreas simétricas (corpo × sidebar), o grid de 12 colunas e o comportamento responsivo. A montagem (arrastar, agrupar, fixar) vive em Painel.
Boas Práticas
O dashboard é a camada de síntese sobre os dados: enquanto a tabela lista registros, ele responde "como estão as coisas?" com gráficos que o próprio usuário monta a partir daquela fonte. Reaproveita a casca da Estrutura de Index.
Anatomia
Na Index, os gráficos derivam dos dados da tabela (mesma fonte) e podem ser fixados na sidebar de gráficos — sem abas de painel. No Dashboard, são painéis (abas), cada um uma grade editável de widgets.
Index vs Dashboard
O mesmo motor de widgets aparece nos dois contextos, mas corpo e sidebar permanecem simétricos e a grade é idêntica. Na Index, o corpo deriva dos dados (tabela + charts da mesma fonte), sem abas de painel. No Dashboard, são múltiplos painéis em abas, cada um uma grade editável.
Duas áreas simétricas
Corpo (grade de 12 colunas, cards redimensionáveis) e Sidebar de gráficos (cópias compactas, agrupadas pelo contexto de origem). Arrasta-se nos dois sentidos; fixar é copiar (vidas apartadas).
Corpo (grid) Sidebar de gráficos layout em colunas lista compacta empilhada redimensionável agrupada por contexto (Compras, Contratos…)
Grid (12 colunas, masonry)
| Colunas | 12 |
| Gaps (x/y) | 16px / 16px |
| Altura da linha | 30px |
| Largura padrão de um novo card | 4 colunas |
| Largura/altura mínima | 3 col × 3 linhas (cards "altos" da index: 3 × 5) |
| Por linha (responsivo) | 1 a 4 cards, conforme a largura disponível |
Cards redimensionáveis por alças (cantos/lados); a largura custom é preservada, senão o card preenche a linha. API dos blocos: EletroDS.
Responsividade
O recorte principal é lg = 1024px: acima é desktop; abaixo, mobile/tablet. Breakpoints genéricos em Foundations › Breakpoints.
| Área | Desktop (≥1024px) | Mobile/Tablet (≤1023px) |
|---|---|---|
| Header | App bar azul; nav + transversais + avatar | App bar branco (logo azul); o dashboard dedicado NÃO tem hambúrguer (sem sidebar); transversais e menu do usuário abrem em drawer |
| Navegação inferior | Oculta | Visível (navbar azul me-brand: menus + "Mais"). O dashboard NÃO tem FAB |
| Toolbar / ações | Ações inline; ⋮ "Mais ações" | Ações ficam no ⋮ "Mais ações" (fixo, fora do scroll); busca = overlay |
| Abas (tabs) | Abas + "+" à esquerda; ⋮ à direita | Abas + "+" rolam na horizontal (swipe + roda), sem scrollbar; ⋮ fixo |
| Filter Bar | Scroll interno só na área de filtros | A barra INTEIRA rola na horizontal (swipe + roda), sem scrollbar |
| Grade / KPIs | Tiles em grade; 1–4 cards por linha | Empilham em 1 coluna; só o BODY rola (header/abas/filtros/navbar fixos) |
| Arrastar widgets | Pointer (mouse) | Toque (touch-action: pan-y) |
Painéis
A 1ª tela traz blocos curados; o usuário também cria novos painéis (em branco, ME interno ou externo via Power BI/Looker) e compartilha por link (leitura) ou template (cópia editável).
Cada bloco se adapta ao grid como os widgets; o hero de criação encolhe e a ilustração some quando não cabe.