Geral
Anatomia completa das telas de Index do ME — zonas, view modes, hierarquia de CTAs, filtros por entidade, integrações com Genius, Carrinho e Chat, e comportamento responsivo.
Boas Práticas
A estrutura de index é o chassi de toda tela de listagem do ME. Use-a quando o usuário precisa localizar, comparar e agir sobre muitos registros de uma mesma entidade.
Anatomia
Zonas da index
Uma tela de index é composta por cinco zonas. As três centrais (SubHeader, Filter Bar, Conteúdo) são obrigatórias e de ordem fixa; o Header é uma camada global da aplicação; e a Sidebar é específica de cada index (com seções transversais comuns a todas).
Header
GlobalCamada global da aplicação — navegação, busca global e serviços transversais. Não pertence à index em si.
SubHeader
ObrigatóriaCTA primária, ações da entidade e, à direita, busca + alternador de view.
Filter Bar
ObrigatóriaCritérios ativos (Filter Bar), criados pelo Filter Search.
Conteúdo
ObrigatóriaTabela e views configuráveis — a zona mais rica da index.
Sidebar
Por entidadeNavegação, escopos e filtros próprios da entidade (com seções transversais comuns a todas).
As três zonas obrigatórias em detalhe
SubHeader, Filter Bar e Conteúdo são fixas e de ordem fixa. O Header é global (ver Ecossistema) e a Sidebar tem seção própria.
Subheader
Barra de ações no topo do conteúdo — recolhe a sidebar, concentra a CTA primária e as ações da entidade, com busca e controles de visualização à direita.
Botão de menu da sidebar
Recolhe/expande a sidebar de navegação. Sempre à esquerda.
CTA primária (split)
Ação principal, à esquerda, em estilo solid (ex: "Novo documento"). Split button quando há vários tipos a criar.
Ações contextuais
Ações de fluxo da entidade (Gerar Pré-Pedido, Gerar Cotação…), em estilo ghost.
Mais ações
Overflow das ações que excedem o espaço visível.
Busca e controles
Alinhados à direita: campo de busca, filtro, analytics e alternador de view.
- Sempre presente — nunca omitir em telas de index
- CTA primária à esquerda, logo após o botão de menu da sidebar; split quando há múltiplos tipos a criar
- As ações se ajustam ao espaço: colapsam em "Mais ações" quando falta largura e voltam quando sobra — até 4 botões visíveis
- Busca e controles de visualização ficam alinhados à direita
Filter Bar
Área de filtragem por critérios (Filter Bar). Filtros de contexto e critérios aplicados ficam numa faixa rolável à esquerda; as ações de gerenciar filtros ficam fixas à direita.
Filtros de contexto
Dropdowns persistentes no início da barra (ex.: "Todos processos", "Todo período"). Definem o recorte base sobre o qual os critérios atuam.
Critério aplicado
Peça composta campo + operador + valor, com contador "+N" quando há múltiplos valores e um × para remover. Cada critério é visível e removível individualmente.
Ações de filtro
Grupo fixo à direita: adicionar critério, salvar o conjunto de filtros e limpar tudo (ação destrutiva).
- Posicionada imediatamente abaixo do subheader
- Filtros de contexto e critérios numa faixa de scroll horizontal; o scroll passa por dentro sem mover as ações
- As ações de filtro ficam fixas à direita, sempre visíveis
- A busca textual e o toggle de view mode vivem no subheader — não na filter bar
Área de conteúdo
Tabela, lista ou grid de cards — o corpo principal da tela.
Tabela com header fixo
Corpo principal. Header permanece fixo no scroll; colunas canônicas variam por entidade.
Paginação ou load more
Fixada no rodapé. Pagina ou carrega incrementalmente sem perder o contexto da lista.
Estado vazio (Empty State)
Sem registros: ilustração curta + CTA para criar o primeiro item da entidade.
Estado de loading (skeleton)
Skeleton com a forma da tabela durante o carregamento, evitando salto de layout.
- Checkbox sempre à esquerda da linha quando seleção múltipla estiver ativa
- Colunas de ação (menu de mais ações, ações inline) sempre à direita
- Paginação fixada no rodapé da área de conteúdo
- Estado vazio deve conter CTA para criar o primeiro registro
Modos de Visualização na Zona de conteúdo
A zona de Conteúdo é a mais rica da index — aceita até quatro modos e uma tabela altamente configurável. Cada entidade oferece só os que fazem sentido para os seus dados (a Tabela é o padrão; o Card existe só onde os itens são visuais). Veja quais views cada index oferece na seção Index.
A troca fica no alternador de view, no canto direito do subheader. É um botão que exibe o modo atual; ao clicá-lo, abre um menu com os modos disponíveis para aquela entidade — escolher um deles aplica o novo formato à tabela.
Tabela
PadrãoDensidade máxima: muitas colunas comparáveis lado a lado. Use quando o usuário escaneia e compara registros por vários atributos — status, datas, valores.
Lista
Linha alta com thumbnail e texto empilhado: prioriza identificação visual sobre comparação. Use quando cada registro tem uma cara própria (avatar, logo) e poucos atributos importam na varredura.
Requisição
4356776543
Criado em 19/08/2026
Categoria RFI · Responsible Buyer: Marcel Lottito
(11) 98329911 · (12) 24563946
john.doe@me.com.br · www.site.com.br
Cotação
1234567891
Criado por Administrador FAST1
Criado em 24/02/2026
Data Limite para Resposta 12/11/2025 09:39:44
john.doe@me.com.br · www.site.com.br
Pedido
ME_4600068466
Flavio Cabral
(11) 983857412
flavio.cabral@me.com.br
Contrato
14499712
CNPJ: 07.418.787/0001-55
Avenida Engenheiro Alberto Massa, 432 CJ 99 – Centro, São Paulo – SP, CEP 01234-567
(11) 98329911 · (12) 24563946
john.doe@me.com.br · www.site.com.br
Requisição
4356776543
Criado em 19/08/2026
Categoria RFI · Responsible Buyer: Marcel Lottito
(11) 98329911 · (12) 24563946
john.doe@me.com.br · www.site.com.br
Cotação
1234567891
Criado por Administrador FAST1
Criado em 24/02/2026
Data Limite para Resposta 12/11/2025 09:39:44
john.doe@me.com.br · www.site.com.br
Pedido
ME_4600068466
Flavio Cabral
(11) 983857412
flavio.cabral@me.com.br
Contrato
14499712
CNPJ: 07.418.787/0001-55
Avenida Engenheiro Alberto Massa, 432 CJ 99 – Centro, São Paulo – SP, CEP 01234-567
(11) 98329911 · (12) 24563946
john.doe@me.com.br · www.site.com.br
Card
Grid visual em que a imagem é o principal critério de decisão. Use só onde os itens são inerentemente visuais — produtos no Catálogo.
R$ 32,00 – 50,00/UN
000000 — Nome do item com um exemplo de nome bem grandão, para testar o comportamento.
R$ 32,00 – 50,00/UN
000000 — Nome do item com um exemplo de nome bem grandão, para testar o comportamento.
R$ 32,00 – 50,00/UN
000000 — Nome do item com um exemplo de nome bem grandão, para testar o comportamento.
R$ 32,00 – 50,00/UN
000000 — Nome do item com um exemplo de nome bem grandão, para testar o comportamento.
R$ 32,00 – 50,00/UN
000000 — Nome do item com um exemplo de nome bem grandão, para testar o comportamento.
R$ 32,00 – 50,00/UN
000000 — Nome do item com um exemplo de nome bem grandão, para testar o comportamento.
R$ 32,00 – 50,00/UN
000000 — Nome do item com um exemplo de nome bem grandão, para testar o comportamento.
R$ 32,00 – 50,00/UN
000000 — Nome do item com um exemplo de nome bem grandão, para testar o comportamento.
Preview
Master-detail: a lista fica à esquerda e o registro aberto à direita. Use em fluxos de triagem, revisão e aprovação, sem perder o contexto da lista.
Cotação em andamento
Propostas abertas até o prazo — acompanhe as respostas dos fornecedores.
Cotação
1234567891
Criado por Administrador FAST1
Criado em 24/02/2026
Data Limite para Resposta 12/11/2025 09:39:44
john.doe@me.com.br · www.site.com.br
Entrega
COD_LOCAL_XX — Filial São Paulo
Av. das Indústrias, 1200 — Centro
CEP 04001-000
CNPJ 12.345.678/0001-90
Requisitante
Nº da requisição
4356776543
Centro de custo
Manutenção — 4021
Empresa
Matriz — SP
Data de criação
19/08/2026
Data de entrega
02/09/2026
Anexos
Histórico de aprovações
19/08/2026 09:12 · Marina Lopes
Requisição criada.
20/08/2026 14:38 · Carlos Dias
Enviada para aprovação.
21/08/2026 10:05 · Administrador FAST1
Aprovada — liberada para cotação.
Dinâmica de colunas
A tabela é configurável pelo usuário e as preferências persistem por conta. As colunas exibidas são o conjunto padrão — há diversas outras que podem ser exibidas ou ocultadas.
Densidade das linhas
Três alturas do corpo (a fonte não muda): Compacto 40px · Regular 48px (padrão) · Espaçoso 64px. A célula do cabeçalho é SEMPRE 40px, independente da densidade.
Linhas por registro
Quantas linhas de texto cada célula mostra: 1 / 2 / 3 truncam com reticências (line-clamp); "Ajustar ao texto" cresce a linha sem truncar.
Itens por tela
Seletor de paginação no rodapé — 10 · 20 · 50 · 100 por página. Só na tabela; lista e card usam scroll infinito.
Fixar coluna
Fixar = REORDENAÇÃO: a coluna vai para o início (logo após o checkbox), agrupada com as demais fixadas na ordem de fixação. Não é sticky-on-scroll — não gruda no scroll horizontal.
Ocultar coluna
Tira a coluna da tabela sem removê-la do catálogo; volta pelo "Editar colunas".
Reordenar colunas
Arrastar o cabeçalho (cursor grab) reposiciona a coluna; a ordem persiste por conta.
Editar colunas
Modal com transfer-list (MeDualList): inativas à esquerda ↔ ativas à direita, busca em cada lado, mover uma a uma ou em massa (Selecionar todas / Remover todas), arrastar para ordenar as ativas; rodapé Cancelar / Aplicar + Restaurar padrão.
Exportar
Exporta a listagem respeitando filtros e colunas atuais; operação longa mostra progresso.
Restaurar padrão
Volta visibilidade, ordem, coluna fixada, densidade, linhas por registro e itens por tela ao conjunto inicial da entidade.
Rodapé (footer)
Contagem "X–Y de Z registros" (PT-BR) à esquerda + paginação à direita, altura 56px. Listagens com menos de 10 registros não exibem rodapé.
Editar colunas
Editar colunas abre um transfer-list (o componente MeDualList dentro de um modal): as colunas disponíveis ficam à esquerda (inativas) e as exibidas à direita (ativas). Move-se uma a uma ou em massa (Selecionar todas / Remover todas), reordena-se as ativas arrastando, e Restaurar padrão volta ao conjunto inicial. É chassi: vale para toda index — o que muda é só o catálogo de colunas de cada entidade.
Editar colunas
Menu do header da coluna
Todo cabeçalho de coluna é um botão (ícone de ordenação à esquerda, sem chevron) e é arrastável — arraste-o para reordenar a coluna. Clicar abre um menu: Ordenar (crescente/decrescente) · Fixar/Desafixar · Ocultar · e, quando a coluna é agregável, transformar em widget ou gráfico. O identificador único (Número) não é agregável — tem ordenar/fixar/ocultar, mas sem o grupo de gráfico.
Widgets e gráficos
A index gera seus próprios analytics: qualquer coluna agregável vira gráfico ou métrica pelo menu do cabeçalho (ou traz-se do Dashboard). Eles vivem numa faixa colapsável no topo do conteúdo — só no modo Tabela — e podem ser vários ao mesmo tempo.
De onde nasce
Da agregação de uma coluna (menu do cabeçalho → Criar gráfico / métrica) ou trazido do Dashboard.
Faixa "Meus widgets"
Área colapsável no topo do conteúdo, só no modo Tabela; o botão de gráfico do subheader a abre/fecha. Cabeçalho traz a contagem de widgets + Restaurar padrão + Limpar todos.
Grade multi-widget
Vários widgets numa grade auto-ajustável de ~4 por linha (minmax 200px). Cada card: título + período + remover (×).
Comportamento da tabela
Ao abrir os widgets a tabela vira "hug" (só a página, sem scroll interno) e o corpo inteiro rola junto; ao fechar, volta a preencher com scroll e cabeçalho fixo.
Cores de série
Paleta de séries chart-1…chart-10 (Blue / Orange / Teal / Pink / Yellow / Purple / Red / Cyan / Lime / Slate 600) — nunca as cores semânticas de status.
Preview (master-detail)
A view Preview divide a tela: lista à esquerda, detalhe à direita. No mobile o detalhe abre em tela cheia — o mesmo destino do clique na linha.
Split master-detail (desktop)
Lista à esquerda (ListView com avatar / checkbox) + painel de detalhe à direita. Sem seleção: empty state com "Abrir documento" e "Perguntar ao Genius". Com linha ativa: código-nome + badge de status + tipo / criação / valor.
Documento em tela cheia (mobile)
No mobile o Preview mostra só a lista (área cheia); tocar num registro abre o documento em TELA CHEIA (breadcrumb + expandir + fechar, ações contextuais, banner de status, hero e detalhes) — o mesmo destino do clique na linha.
Seleção na lista
A linha mostra o avatar; no hover vira checkbox; selecionada fica marcada. O "selecionar todos" fica na filter bar. Requer o campo avatar na linha.
Componentes que montam a index
A index não se remonta à mão — cada zona é um componente do EletroDS (ou base Nuxt UI quando não há equivalente). Veja a ficha de cada um em Componentes.
Visões salvas
O início da filter bar (o LeadingSlot) guarda as visões salvas — recortes prontos da listagem (ex.: "Todos os processos", "Todo período"), com um + para criar uma nova a partir dos filtros atuais. Trocar de visão reaplica filtros e ordenação de uma vez; é o atalho de quem volta sempre ao mesmo recorte. Os critérios à direita continuam editáveis (ver Filtrar).
Realce de linha
Uma faixa azul à esquerda da linha marca registros que pedem atenção do usuário — uma pendência de ação dele (ex.: aguardando a sua aprovação) ou item não lido. É derivada de dados (não decorativa) e acompanha o status/badge da linha (a cor nunca aparece sozinha); some quando a pendência é resolvida. Vale para tabela, lista, card e o preview.
Hierarquia
Toda ação de uma index pertence a um de quatro níveis. O que define o nível é o alcance da ação — o que ela afeta: a entidade inteira, a tela, os itens selecionados ou uma única linha. Quanto maior o alcance, mais destaque o controle recebe e mais à esquerda ele fica; quanto menor, mais perto da linha.
Os mesmos quatro níveis convivem numa index. A posição na tela reflete o alcance: a ação primária abre o subheader à esquerda; as de linha ficam no fim de cada registro.
Os quatro níveis em detalhe
Cada nível tem um alcance, uma posição fixa e um peso visual próprios.
Ação primária
A ação central da tela: criar um novo registro.
Posição
Botão sólido à esquerda do subheader, logo após o botão de menu da sidebar.
Exemplos
Regra: Texto no formato "Verbo + entidade" no singular. Sempre visível, mesmo com seleção ativa.
Ações de suporte
Tarefas auxiliares que não criam registros — exportar, importar, configurar.
Posição
Botões ghost, à direita da ação primária.
Exemplos
Regra: Responsivas ao espaço: somem em "Mais ações" quando falta largura e reaparecem quando sobra — até 4 botões visíveis antes do overflow.
Ações em massa
Ao marcar itens no conteúdo, a filter bar exibe uma badge com a quantidade de selecionados.
Posição
Filter bar — badge "N selecionados" logo após o checkbox; surge ao marcar itens.
Exemplos
Regra: A badge é um toggle: ativa, desabilita os filtros aplicados e expõe Salvar lista / Limpar seleção — sem gerar novos botões.
Ações por linha
Ações contextuais de cada item, acessíveis na própria linha.
Posição
Última coluna da tabela — menu de mais ações ou ícones inline.
Exemplos
Regra: Menu de mais ações quando há 3+ ações; ícones inline para as 1–2 ações mais frequentes.
Cada zona da index chama um padrão de ação
A index não tem ações próprias — ela é onde os padrões de Ações do usuário se encontram. Este é o mapa que liga os dois: para cada zona da tela, qual padrão entra em cena, como ele se comporta e o atalho para a página dele. Use-o para ir do "onde clico" ao "como esse padrão funciona".
Uma regra de feedback atravessa todas elas:
Reversível → executa direto e mostra toast com Desfazer (5s).
Irreversível → exige modal de confirmação antes de executar.
Todos os retornos — empty state, carregando, erro, operação longa — estão detalhados na seção Feedback.
| Onde na tela | Padrão de ação | Como se comporta |
|---|---|---|
Subheader · CTA primária | Adicionar | Botão sólido único ("Novo Fornecedor", "Convidar usuário"). Split ("Novo documento ▾") quando há vários tipos a criar, como em Transações. |
Filter bar · ações em massa | Ações em massa | Ao marcar itens no conteúdo, surge a badge "X selecionados" (toggle): ativa, desabilita os filtros aplicados e expõe Salvar lista / Limpar seleção. |
Overflow do subheader | Mais ações | Agrupa o que não cabe na barra; ordenado por frequência, com ações destrutivas isoladas após um divisor. |
Ações da linha (menu de mais ações) | Editar · Fixar | Menu ⋮ no fim da linha: editar (inline ou modal), fixar o item no topo, duplicar… |
Linha · ação reversível | Remover · Desfazer | Sem modal — executa na hora e mostra toast com "Desfazer" (5s) e barra de progresso. |
Confirmação (modal) | Excluir | Ação irreversível: modal de confirmação obrigatório (digitação em alto risco) e botão destrutivo. |
Ecossistema
As index pages do ME não são isoladas — elas se integram com três serviços transversais que aparecem na navigation bar global e se ativam contextualmente em cada entidade.
Abrindo cada serviço
Os três serviços abrem como um drawer à direita, sobre a página atual — sem tirar o usuário do contexto da index.
Encontrei 3 fornecedores aptos para o item solicitado. Quer comparar os preços?
Aço Brasil Ltda
Enviamos a proposta atualizada.
Marina Lopes
Pode revisar a requisição REQ-001?
MetalSul S.A.
Confirmado o prazo de entrega.
Suporte ME
Seu chamado foi atualizado.
Parafuso sextavado M8
120 un
Chapa de aço 2mm
15 un
Luva de segurança
40 par
Genius
IA contextualAssistente de IA que analisa os dados da index em tempo real e oferece sugestões inteligentes sem interromper o fluxo de trabalho.
O que faz
- Identificar fornecedores com melhor relação preço–prazo para um conjunto de itens selecionados
- Sugerir agrupamento de itens por fornecedor para otimizar cotações
- Detectar anomalias de preço comparando com histórico e mercado
- Classificar documentos pendentes por urgência e risco
- Gerar rascunho de pré-pedido a partir de uma seleção de itens do catálogo
Onde aparece
Navigation bar global (ícone wand-sparkles) e ação por linha em entidades transacionais e de fornecedores.
Entidades com acesso
UXAbre em drawer lateral sem deslocar a tabela. Seleção de linhas e filter bar permanecem ativos durante a sessão do Genius.
Carrinho
Ação diretaPermite adicionar produtos ao carrinho de cotação diretamente da view Cards do Catálogo, sem abrir a página de detalhe do item.
O que faz
- InputNumber no footer do card para definir quantidade desejada
- Botão primário (ícone carrinho) confirma a adição instantaneamente
- Badge no header atualiza em tempo real com a contagem total de itens
- Itens de fornecedores diferentes são consolidados no mesmo carrinho da cotação ativa
- Badge de "já adicionado" aparece no card quando o item já está no carrinho
Onde aparece
Navigation bar global (ícone shopping-cart com badge de contagem) e footer de cada Card de produto no Catálogo.
Entidades com acesso
UXAdição imediata — sem modal de confirmação. Feedback via toast com ação de desfazer. O badge do carrinho no header pulsa levemente ao atualizar.
Mensagens
ComunicaçãoCanal de comunicação contextual com fornecedores diretamente da index, sem sair da tela ou perder o contexto da listagem.
O que faz
- Abrir conversa já vinculada ao fornecedor da linha clicada
- Ver histórico de mensagens de uma transação sem abrir o detalhe
- Badge no header mostra contagem total de mensagens não lidas
- Painel lateral de chat não oculta nem desloca a tabela
- Notificação de nova mensagem aparece inline na linha do fornecedor
Onde aparece
Navigation bar global (ícone messages com badge de não-lidas) e ação contextual por linha em Fornecedores e Transações.
Entidades com acesso
UXA conversa sempre abre contextualizada — pré-identificada com o fornecedor ou documento da linha. Painel lateral com animação slide-in da direita.
Por entidade
O ME tem quatro index principais, fixas na navigation bar global. Todas seguem este mesmo chassi — o que muda é o que cada uma especifica.
Transversal — todas as index herdam
- Zonas e subheader (o chassi)
- Filter Bar + Filter Search
- Sidebar: Favoritos · Filtros salvos · Meus links
- Ecossistema (Genius · Carrinho · Chat)
- Responsividade e feedback
Específico — cada index define
- CTA primária (ex.: Novo Fornecedor)
- Views e colunas-chave
- Escopos e recortes da sidebar
- Filtros e blocos próprios (ex.: Catálogo → Destino de compra)
Compare as quatro lado a lado — CTA primária, views e colunas. As colunas padrão vêm visíveis; as opcionais ficam no "Editar colunas" do cabeçalho. Escopos, filtros e blocos da sidebar ficam na página de cada uma.
Colunas
Colunas
Colunas
Colunas
Responsividade
O chassis de index adapta cada zona ao breakpoint ativo. Três comportamentos distintos — mobile, tablet e desktop — garantem que a hierarquia e a usabilidade se mantenham em qualquer tamanho de tela. As transformações por zona seguem a régua única em Foundations › Breakpoints; abaixo, a aplicação específica da index.
Mobile
< 640px
Header (app bar)
App bar BRANCO (bg-background), não azul: hambúrguer à esquerda da logo (abre a sidebar) + logo azul/primary (a marca branca sumiria no fundo claro) + lupa (abre a busca sob demanda, sem campo full-width) + transversais (Mensagens/Genius/Carrinho) + avatar, como ícones escuros. A navbar inferior segue AZUL.
Subheader
O CTA primário vira FAB (botão flutuante, canto inferior direito). O subheader mantém o botão de menu da sidebar; as ações secundárias colapsam progressivamente em "Mais ações" (nunca rolam na horizontal nem quebram em várias linhas). Troca de visão e botão de gráficos seguem visíveis. A seleção em massa segue como badge na filter bar.
Filter Bar
Persistente e sempre visível — critérios com scroll horizontal, nunca colapsa em overlay. O Filter Search (composição) abre como bottom-sheet.
Conteúdo
Tabela com scroll horizontal; apenas colunas obrigatórias visíveis. View Cards preferencial quando disponível.
Sidebar de navegação
Oculta. Navegação via botão de menu da sidebar, que abre a sidebar como drawer overlay.
Tablet
640px – 1024px
Header (app bar)
App bar azul me-brand, compacto; vira a versão mobile (app bar branco + navbar inferior azul) quando falta largura.
Subheader
Título + CTA primária + máximo 1 ação secundária. Demais movem para overflow "Mais ações".
Filter Bar
Visível inline; filtros de sidebar aparecem como drawer overlay animado da direita.
Conteúdo
Tabela com scroll horizontal. Colunas opcionais ocultadas automaticamente pelo breakpoint.
Sidebar de navegação
Overlay — drawer animado que sobrepõe o conteúdo ao navegar.
Desktop
≥ 1024px
Header (app bar)
App bar AZUL me-brand full-width: logo "me." branca à esquerda + navegação HORIZONTAL de áreas + divisor + transversais + avatar.
Subheader
Layout completo — título, todas as CTAs e ações secundárias visíveis.
Filter Bar
Inline completa com todos os filtros, indicadores de filtros ativos e toggle de view mode.
Conteúdo
Tabela com todas as colunas configuradas. Scroll interno da área de conteúdo, não da página.
Sidebar de navegação
Fixa à esquerda. Sempre visível. Largura padrão: 220px.
Feedback
Toda interação na index dá retorno imediato e proporcional ao impacto: filtro reflete na hora, o reversível usa toast com Desfazer, o irreversível pede modal, e ações em lote confirmam com contagem.
Ação reversível
Executa na hora e oferece Desfazer por 5s, com barra de progresso — sem bloquear o fluxo.
Confirmação em lote
Operações sobre a seleção confirmam com a contagem do resultado. O modelo completo da barra de seleção (badge-toggle, salvar lista, limpar) vive em Ações em massa.
Sem resultados
Empty state contextual com o termo buscado e uma saída clara.
Nenhum resultado para “cotação 4521”
Tente outro termo ou ajuste os filtros.
Ação irreversível
Exige confirmação explícita num modal antes de executar.
Excluir 3 itens?
Esta ação não pode ser desfeita.
Erro de validação
Aparece próximo ao que falhou — inline ou em banner no topo.
Não foi possível concluir
Revise os campos destacados e tente novamente.
Operação longa
Mostra progresso enquanto roda (ex.: exportar), sem travar a tela.
Todos os cenários
Referência completa: o que dispara cada retorno e o mecanismo correspondente.
| Cenário | Mecanismo de feedback |
|---|---|
Filtro aplicado | Reflete na filter bar na hora, sem recarregar a tela. |
Carregando | Skeleton com a forma da tabela durante o carregamento. |
Sem resultados | Empty state contextual com o termo buscado + ação de limpar filtros. |
Ação reversível | Toast com Desfazer (5s) e barra de progresso. |
Ação em lote | Toast com a contagem do resultado ("3 itens enviados"). |
Ação irreversível | Modal de confirmação obrigatório. |
Erro de validação | Mensagem inline ou banner no topo, próxima ao que falhou. |
Operação longa | Indicador de progresso enquanto a operação roda (ex: exportar). |
Construir
Toda página index é montada sobre a casca MeLayout, que organiza a tela em áreas por slot. A casca é a mesma para os dois sabores de corpo — dados (tabela) ou painéis (dashboard); o que muda é o body.
- Header — MeHeader (logo, navegação, busca, perfil); completo no desktop, compacto no mobile. Não customizar por tela.
- Sidebar (área esquerda) — redimensionável e colapsável; vira drawer no mobile. Anatomia completa na aba Sidebar.
- Toolbar (subheader) — hambúrguer + ações da tela: inline no desktop, migram para FAB no mobile.
- Body — Index: Filter Bar + tabela (+ charts fixáveis); Dashboard: painéis (grade + Wizard) — ver Painel.
- Footer — MeNavBar, só no mobile (oculto no desktop).
Index × Dashboard
| Parte | Index de Transações | Dashboard |
|---|---|---|
| Subheader | viz + busca + filtro | Novo gráfico / Restaurar / Limpar / Exportar |
| Body | Filter Bar + tabela + charts fixáveis | Painéis (grade + Wizard) |
| Header / Sidebar / Footer | Iguais nos dois (MeHeader · sidebar · MeNavBar no mobile) | |
Checklist de uma nova página index
- Casca MeLayout com a área esquerda (sidebar) redimensionável.
- Header = MeHeader · Footer = MeNavBar (mobile).
- Sidebar = busca + tabs-âncora + seções colapsáveis (+ fixados, se houver).
- Toolbar = hambúrguer + ações (inline no desktop / FAB no mobile).
- Body = dados (Filter Bar + tabela / página de domínio) ou painéis (dashboard).
- Persistência por tela (localStorage no demo / endpoint em produção).