Index de Catálogo
Catálogo de itens disponíveis para compra. View padrão em Cards, com Lista (foreheads de produto com carrinho) e Tabela. CTA de solicitação direta no card.
O ponto de partida: a tela real de Catálogo no modo padrão (Cards) — Header, Subheader com o CTA Solicitar item e a busca, Sidebar com switcher Meu catálogo ↔ Marketplace e Destino de compra no topo, a Filter Bar com o critério de Categoria e o grid de cards. As seções abaixo detalham cada parte.
Boas Práticas
O Catálogo segue o chassi de Estrutura de Index. Esta página cobre só o que é próprio da entidade — descoberta de itens, solicitação e contexto de compra.
Especificação
Cards (padrão) — grid 3–4 colunas responsivo, orientado à descoberta visual. Dois tamanhos: Full (todos os campos: thumbnail, nome, SKU, categoria, fornecedor, preço e CTA) e Compact (nome, disponibilidade e CTA — para explorar mais itens por tela). Lista — empilha o Forehead de produto na linha: imagem, nome com etiquetas de tipo (Material / Normal), descrição, preço por unidade e Baseline, e a área de carrinho (quantidade + Adicionar ao carrinho) — comprar sem abrir o item. Ver Forehead › Produto. Toggle para Tabela disponível quando o usuário precisa comparar preços e disponibilidade de forma densa. Preferência de view e densidade persistidas em localStorage.
Campos do card
| Campo | Regra |
|---|---|
| Thumbnail | 64×64px. Placeholder com ícone quando sem imagem. |
| Nome | 2 linhas + ellipsis. Tooltip com nome completo ao hover. |
| Código / SKU | Texto secundário abaixo do nome, em guide-text-muted. |
| Categoria | Nível folha apenas — sem hierarquia pai no card. |
| Fornecedor preferencial | «—» se não definido. |
| Preço de referência | «A partir de R$X» se há variação de variantes. |
| Disponibilidade | Badge semântico. Sempre visível — ver abaixo. |
| CTA «Solicitar» | Outlined, no rodapé do card. Desabilitado se Indisponível. |
Colunas opcionais (view Tabela)
No toggle para Tabela, estas colunas ficam ocultas por padrão em "Editar colunas" e podem ser exibidas:
Disponibilidade
O status do item é sempre um badge com cor semântica — define se o CTA "Solicitar" fica ativo.
| Disponibilidade | Significado |
|---|---|
| Em estoque | Disponível imediatamente; CTA ativo. |
| Sob encomenda | Exibe prazo estimado quando disponível; CTA ativo. |
| Indisponível | CTA desabilitado, com tooltip explicando o motivo. |
Filtros e Ações
Filtros disponíveis
- Busca nome/código (search, debounce 300ms)
- Categoria (hierárquico com count "TI (12)")
- Disponibilidade (multi-select, pré: Em estoque + Sob encomenda)
- Fornecedor (typeahead)
- Faixa de preço (range)
Ações disponíveis
Subheader
- Solicitar item (primary)
- Toggle Cards ↔ Tabela (icon group)
- Gerenciar catálogo (ghost — admin)
Por card
- "Solicitar" — outlined, desabilitado se Indisponível com tooltip
Em massa (admin)
- Inativar / Exportar
Gerenciar catálogo e bulk admin são restritos a Administrador.
Contextos
O botão 'Solicitar' fica cinza e desabilitado. Tooltip aparece ao hover informando o motivo — nunca oculte o CTA, apenas desabilite.
Full exibe: checkbox + favorito no header, imagem com overlay de badges de contrato e carrinho, faixa de preço em destaque, descrição, fornecedor ('Por:') e contratos ativos. Footer com InputNumber e botão de carrinho. Compact omite campos secundários — apenas imagem, nome, disponibilidade e CTA.
Os filtros ficam na própria sidebar (à esquerda), não em drawer. Categoria usa seleção hierárquica (o pai inclui os filhos); Faixa de preço usa slider range; Disponibilidade é multi-select, pré-selecionando Em estoque + Sob encomenda.
Ações
A ação central do Catálogo é solicitar. O que muda é o perfil: o comprador adiciona ao carrinho; admin/comprador-master também cadastra itens. O universal está na Geral.
Solicitar / Adicionar ao carrinho
No card, um InputNumber define a quantidade e o botão de carrinho confirma. O Solicitar fica sempre visível — nunca oculto em hover.
CTA primária por perfil
O Catálogo é híbrido: a ação primária muda conforme o perfil do usuário.
Comprador
Adiciona ao carrinho — não cria item.
Admin / Comprador-master
Cadastra um item de catálogo (entidade).
Feedback
O retorno é proporcional ao impacto. O catálogo completo está na Geral; abaixo, as particularidades de Catálogo.
| Cenário | Mecanismo de feedback |
|---|---|
Item adicionado ao carrinho | Toast de confirmação com atalho para abrir o carrinho. |
Item indisponível | CTA "Solicitar" fica desabilitado (cinza) com tooltip explicando o motivo — nunca oculto. |
Filtro de categoria | Reflete no grid de cards na hora; contagem por categoria atualiza na sidebar. |
Sem resultados | Empty state com o termo buscado + ação de limpar filtros. |