Dashboard Principal

O Dashboard é a tela inicial após o login (/dashboard). Ele fornece uma visão geral do sistema com mapa interativo e indicadores de desempenho.


Componentes da Tela

Mapa Interativo

O mapa exibe a localização geográfica dos equipamentos e reservatórios cadastrados.

O mapa usa Leaflet com tiles OpenStreetMap. É necessária conexão com a internet para carregar os tiles.

Funcionalidades do mapa:

  • Marcadores coloridos por status do equipamento (online/offline/alerta)
  • Clique no marcador para ver detalhes resumidos do equipamento
  • Zoom e pan com mouse ou toque em dispositivos móveis
  • Botão de centralizar para retornar à visão inicial

Painel de Filtros (lateral direita)

Ao lado do mapa, o painel de filtros permite:

  • Filtrar por tipo — selecionar tipo de equipamento exibido
  • Filtrar por status — online, offline, alerta, manutenção
  • Filtrar por empresa — exibir apenas equipamentos da empresa selecionada

Cards de Indicadores (Section Cards)

Abaixo do mapa, os cards exibem métricas agregadas da empresa selecionada:

CardInformação
Total de EquipamentosContagem de equipamentos cadastrados
OnlineEquipamentos com comunicação ativa
OfflineEquipamentos sem comunicação
Em AlertaEquipamentos com leitura fora do limite

Seletor de Empresa

No topo da sidebar, o seletor de empresa permite alternar entre empresas vinculadas ao usuário. Ao mudar a empresa:

  1. Os dados do mapa são recarregados
  2. Os indicadores são recalculados
  3. A navegação mantém a empresa selecionada durante toda a sessão

O Dashboard serve como hub de navegação. A sidebar lateral exibe os módulos disponíveis:

Expanda um módulo na sidebar

Clique no nome do módulo (ex.: “Gestão Telemetria”) para expandir e ver suas sub-páginas.

Selecione a funcionalidade desejada

Clique no item da sub-navegação (ex.: “Equipamentos”) para acessar a lista.

Use as migalhas de pão (breadcrumb)

No topo de cada página, o breadcrumb mostra sua localização atual no sistema e permite navegar de volta.


Responsividade

O Dashboard é totalmente responsivo:

  • Desktop (≥ 1024px): sidebar expandida, mapa em 2 colunas, filtros em 1 coluna
  • Tablet (768–1023px): mapa empilhado acima dos filtros
  • Mobile (< 768px): sidebar como drawer, layout em coluna única