Todos os artigos
FT-VIEW-MODE-TOGGLE· 1.0.0Monitor & Mensagens

Alternar entre Cards e Lista

Toggle cards/lista persistido no navegador, aplicado em /monitor, /edi-hub, /admin/empresa, /reports.

Atualizado em 8/6/2026

Alternar entre visualização em Cards ou Lista



Empresas e integrações no Lefia agora podem ser visualizadas em dois modos:

Onde aparece o toggle

  • /monitor — empresas (lista de tenants com status de mensagens)
  • /edi-hub — empresas (lista de tenants com contagem de integrações/mensagens)
  • /edi-hub/empresa/[id] — integrações da empresa
  • /admin/empresa/[id] — integrações no admin (lista é read-only; pra editar troca pra cards)
  • /reports — empresas com stats consolidados


Como usar

No canto superior direito de cada lista tem um toggle com 2 botões:
  • Cards (ícone grid): visualização rica com ícone, badges, contadores. Bom pra ≤ 10 itens.
  • Lista (ícone list): tabela compacta com colunas. Bom pra muitos itens, scroll rápido.


Preferência persiste

A escolha é gravada no navegador (localStorage) — cada usuário tem sua preferência, separada por contexto:
  • monitor:tenant-view-mode
  • edi-hub:tenant-view-mode
  • edi-hub:integration-view-mode
  • admin:integration-view-mode
  • reports:tenant-view-mode


Limitações conhecidas

  • No /admin/empresa/[id] a vista lista é apenas read-only. Pra editar/executar uma integração, troca pra Cards — o IntegrationCard tem todos os botões (editar, executar agora, conectar, etc).
  • Em modo lista, clicar no nome da integração no admin faz scroll-âncora pro card original (não abre rota separada).

Histórico de versões

  • 1.0.0

    Hook useViewMode + componente ViewModeToggle reusáveis. Toggle cards/lista aplicado em /edi-hub (empresas), /edi-hub/empresa/[id] (integrações), /admin/empresa/[id] (integrações), /reports (empresas). Lista de integrações com tabela completa (nome, tipo, parceiro, direção, origem→destino, contadores, status). Persistência localStorage por contexto.

    5/24/2026 · new