# Padrões do E-PROC > Gerado do guide vivo em 2026-09-03. Fonte: `7.padroes/` + os `*PatternContent.vue` + `app/data/patterns/*`. Resumo estrutural (anatomia/seções/dados); o detalhe interativo vive no guide. ## O CHASSI do ME (leia antes de montar qualquer tela) Toda tela do ME nasce no mesmo shell (block **MeLayout**). O que define "cara de ME" é o chassi — erre aqui e a tela não parece do ME, mesmo com os tokens certos. **App bar (#header) — a regra que mais se erra:** - Barra **AZUL me-brand full-width** no topo. Marca **"me." branca à ESQUERDA**. - **Navegação principal HORIZONTAL no topo** (áreas: Dashboard · Transações · Fornecedores · Catálogos · Usuários · Mais). - À direita: transversais (**Mensagens · Genius · Carrinho**, com divisor antes deles) + **avatar**. - ❌ **NUNCA** transforme a navegação de áreas num **rail/sidebar de ícones à esquerda**. O rail lateral (#nav-area) é OPCIONAL e é só atalho de etapa/rodada — não é o menu de áreas. - ❌ Header **verde ou claro/neutro = me-brand NÃO aplicado (erro)**. A barra é azul me-brand. **Slots do MeLayout (preencha só os que a tela usa):** - **#header** — app bar azul (acima). - **#nav-area** — rail lateral opcional (5.5rem), atalhos; NÃO é o menu de áreas. - **#toolbar (Subheader)** — CTA primário (botão split azul) à **ESQUERDA** + até 3 ações + "Mais ações"; à direita busca (Filter Search) + toggle de gráficos + troca de visão. - **#left-area** — sidebar de escopos/filtros da entidade (sempre visível quando ligada; recolha pelo colapso do rail, nunca escondendo o slot — senão sobra coluna vazia que espreme a tabela). - **#analytics** — gráficos, só pelos gatilhos (toggle/coluna) e com fechar. - **#default** — conteúdo (tabela | cards | lista). - **#right-area** — Carrinho **XOR** Mensagens (um por vez). - **#footer** — só tablet/mobile. - **Modal** nunca mostra o #header; anexos abrem em drawer. ## Anatomia da Index (a mais comum), em ordem 1. **#header** (app bar azul horizontal, acima). 2. **Subheader** — CTA **"Novo X"** (cadastro de entidade) à esquerda · até 3 ações + "Mais ações" · à direita busca + toggle gráficos + troca de visão. 3. **Filter Bar** — critérios no modelo **campo · operador · valor** (MeCriterionInput, peças encostadas/removíveis) — **NÃO** Selects soltos; ao lado a Filter Search (busca livre em overlay). 4. **Área de dados** — tabela/cards/lista. **Tipo = TEXTO**; **só Status é badge** semântico. **Seleção em massa = badge "N selecionados" na Filter Bar** (toggle que filtra os selecionados e desabilita os filtros) — **NÃO** o rodapé padrão "N de M linha(s) selecionada(s)". ## Convenções do ME (toda tela) - Voz/labeling **PT-BR**, sem UPPERCASE. "**Novo X**" = cadastrar entidade · "**Adicionar X**" = item em lista existente. Sobrescreva rótulo default em inglês (o overflow é "Mais ações", não "Options"). - **Cor primária = me-brand (AZUL)**. Header/CTA verde = me-brand não aplicado. - **Status = badge semântico** (nunca cor sozinha): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. - Valor: total/financeiro "R$ 1.234,56" · unitário/de lista "BRL 38,90". - Menu por linha no kebab vertical (⋮). Ação destrutiva por modal de confirmação. - Feedback por toast (com desfazer quando fizer sentido); trate **vazio, carregando e erro**. - Responsivo: no mobile o **app bar vira BRANCO** (bg-background — logo azul/primary, hambúrguer, lupa/busca sob demanda, transversais e avatar como ícones escuros; **header claro no DESKTOP = erro, no MOBILE = correto**) + **navbar inferior AZUL**; o CTA primário vira **FAB**; as ações secundárias do subheader **colapsam em "Mais ações"** (nunca rolam na horizontal nem quebram em linhas); a sidebar vira drawer pelo hambúrguer. ## PRONTO QUANDO (Definition of Done — critério de aceite em E-PROC) - [ ] **App bar azul me-brand** com marca "me." à esquerda + **navegação HORIZONTAL** + transversais/avatar à direita (nav NÃO virou rail lateral). - [ ] Anatomia e **ordem das zonas** do padrão respeitadas; só as zonas usadas. - [ ] **Componentes REAIS** do EletroDS/blocks (Me*/blocks) antes de remontar; nada recriado do zero que já exista. - [ ] **Status como badge**; Tipo como texto; seleção em massa = badge-toggle na filter bar. - [ ] Labeling **PT-BR** + moeda no formato certo. - [ ] Estados **vazio / carregando / erro** tratados; a view inicial já EXIBE dados. - [ ] **Foundations aplicados**: só classe Tailwind + var(--ui-*)/token — sem HEX/valor fora de escala/inline fixo; dark mode pelos tokens. (Confirme com o **doctor** da suite me-foundations que `--primary` é me-brand — guard limpo NÃO prova marca aplicada.) - [ ] **a11y**: heading order, foco visível, contraste AA, rótulo/nome acessível, alvo ≥ 44px. - [ ] A tela **RENDERIZA** de fato (valide olhando, não só o build): tabela mostra linhas com rolagem interna e o corpo NÃO colapsa a zero. ## Alvo shadcn/React O chassi é o **MESMO** — muda só a camada de componentes. Puxe os componentes do **catálogo ME `@me-shadcn` (me-vibe-design.vercel.app)** e **espelhe o layout 1:1 do app `vibe-react/src/previews/`** (`_shell.tsx` = AppHeader/MobileNavbar; `IndexPreview.tsx` = index completa). `ui.shadcn.com` genérico + tokens ME só como emergência (avise). Tokens/setup shadcn = skill **me-foundations-shadcn** (rode o `shadcn-doctor.mjs` como gate de marca). --- ## Introdução _Visão geral dos Padrões do ME — o que esperar, o que você encontra aqui, materiais para download e links relacionados._ --- ## Padrões _Pontos em que alguém altera dados ou dispara um fluxo no ME — como cada tipo de ação deve aparecer, se comportar e ser confirmada._ --- ## Adicionar _Quando usar Criar vs. Adicionar, como disparar o formulário, onde posicioná-lo e qual feedback confirma a criação._ **Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Index — Subheader** — "Novo [Entidade]" primário (botão split azul), à ESQUERDA do subheader — CTA de mais alta prioridade da tela — único, sempre visível, nunca oculto. Região esquerda = CTA · centro = ações · direita = busca/visões. - **Index Transações** — Split button "Novo documento" — Agrupa Requisição, Cotação, Pedido, Leilão e NF sem poluir o Subheader. - **Documento — Toolbar da tabela** — "Adicionar item" outlined, à esquerda da toolbar — Ação contextual da tabela — nunca no Subheader global do documento. - **Catálogo — Cards** — "Adicionar ao carrinho" outlined por card — CTA secundário por card; não compete com o Subheader da página. - **Formulários e Drawers** — "Adicionar campo" ghost ou link-button — Ação local de baixa hierarquia — não deve disputar visibilidade com ações globais. **Labeling:** - Novo + Fornecedor = Novo Fornecedor - Nova + Empresa = Nova Empresa - Novo documento + → Cotação = Novo documento → Cotação - Novo documento + → Requisição = Novo documento → Requisição - Adicionar + item = Adicionar item - Adicionar + aprovador = Adicionar aprovador --- ## Filtrar _Como o usuário cria, aplica e gerencia filtros no ME — Filter Bar, Command Palette e filtros salvos._ **Seções:** Boas Práticas · Formas de filtrar · Filter Bar · Filter Search · Variantes · Feedback --- ## Copiar _Copiar reutiliza informações sem modificar o original. Use "Copiar" para enviar dados à área de transferência e use "Duplicar", "Criar cópia" ou "Copiar como novo" quando a ação gerar um novo registro independente._ **Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Linha de tabela** — Menu de mais ações ou ação direta na linha — Espaço limitado; ação contextual ao item selecionado - **Campo de link / ID** — Ícone de cópia ao lado do campo — Feedback imediato de copy-to-clipboard sem perder foco - **Header de card ou documento** — Botão ghost com ícone de copiar — Ação secundária visível sem sobrecarregar a hierarquia - **Barra de ações em massa** — "Duplicar selecionados" na toolbar — Permite duplicação em lote de forma eficiente **Labeling:** - Copiar + Link = Copiar link - Duplicar + Produto = Duplicar produto --- ## Editar _Como entrar no modo de edição, quando usar inline vs. formulário, como validar campos e o que exibir após salvar ou cancelar._ **Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Index / Menu de mais ações da linha** — Ícone de lápis ou "Editar" no menu de mais ações — Acesso rápido sem abrir o documento - **Modal simples (Config)** — Dialog centralizado com footer [Cancelar][Salvar] — Entidades de configuração com poucos campos — Cargo, Local, Condição de Pagamento - **Documento em modal** — Chassi completo dentro de overlay modal — Documentos de fluxo (Cotação, Pedido) abertos do Index; pode expandir para página dedicada - **Página dedicada** — Chassi completo em URL própria — Entidades complexas como Usuário ou Empresa; mesma estrutura do chassi do modal de documento - **Edição inline (tabela)** — Clique direto na célula editável — Campos simples — valor, quantidade, status — sem abrir modal --- ## Excluir _Exclusão é irreversível — quando exigir confirmação em modal, como posicionar a ação destrutiva e qual feedback confirma a remoção._ **Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Linha de tabela** — Menu de mais ações, sempre ao final com separador — Isolada de ações não destrutivas para evitar clique acidental - **Documento de detalhe** — Botão destrutivo no rodapé ou na toolbar — Ação secundária, nunca a ação principal da tela - **Modal de edição** — Botão destrutivo no rodapé esquerdo — Separado dos CTAs principais (salvar/cancelar) - **Ação em massa** — Barra flutuante após seleção múltipla — Permite exclusão em lote com confirmação única --- ## Remover _Remover desassocia; excluir deleta. Como diferenciar as duas ações no visual, no labeling e no feedback ao usuário._ **Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Chip / tag / badge** — Ícone × dentro do chip, à direita — Padrão reconhecível; compacto no espaço limitado do chip - **Linha de item em documento** — Ícone circle-minus ao final da linha — circle-minus diferencia "remover" de "excluir" (trash-2) — o item some do documento mas o registro permanece no sistema - **Item de carrinho** — Ícone trash-2 ou "Remover" ao lado do item — Padrão universal de carrinho; imediato e sem confirmação - **Lista selecionável** — "Remover selecionados" na barra de ações — Remoção em lote de associações múltiplas --- ## Desfazer _Quando oferecer Desfazer, por quanto tempo manter a janela de reversão e quais ações nunca devem permitir undo._ **Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Exclusão de item** — Toast: "[Item] excluído. Desfazer" — Baixo risco; elimina necessidade de modal de confirmação - **Remoção de associação** — Toast: "[Item] removido. Desfazer" — Ação reversível sem impacto sistêmico imediato - **Arquivamento** — Toast: "[Item] arquivado. Desfazer" — Ação de soft-delete; fácil de reverter dentro da janela - **Mover / reorganizar** — Toast: "Item movido. Desfazer" — Reorganização reversível; conforto sem risco de perda --- ## Fixar _Quando permitir fixar itens, quantos no máximo, como sinalizar o estado fixado e como expor a opção de desfixar._ **Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Linha de tabela** — Menu de mais ações ou ícone pin toggle na linha — Ação contextual ao item; não polui a interface em repouso - **Hover da linha** — Ícone pin visível apenas no hover — Reduz ruído visual; disponível quando necessário - **Painel lateral / card** — Ícone pin no canto do card ou header — Ação persistente visível sem hover em visualizações de card - **Índex de módulos** — Toggle no menu de mais ações ou ação contextual — Personalização da ordem de módulos no menu ou dashboard --- ## Mais ações _Quando usar o menu de mais ações ⋮, como ordenar as ações — frequentes primeiro, destrutivas por último — e como nomear cada item._ **Seções:** Boas Práticas · Contextos · Estrutura · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Linha de tabela** — Ícone do menu Mais ações ao final da linha, sempre visível — Padrão reconhecível; mantém o alinhamento vertical da tabela - **Header / toolbar** — Dropdown button ao lado das ações principais — Agrupa ações secundárias sem comprometer a hierarquia primária - **Card** — Ícone no canto superior direito do card — Contextual ao card; não interfere com a ação principal do item - **Toolbar de documento** — Botão "Mais ações" com ícone chevron-down — Indica overflow de ações disponíveis para o documento ativo --- ## Ações em massa _Como ativar a barra de seleção múltipla, quais ações disponibilizar em lote e como incluir a contagem no feedback de confirmação._ **Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback **Contextos de uso (onde fica + porquê):** - **Index — Subheader** — CTAs normais — sem alterações — O Subheader permanece completamente inalterado durante a seleção. Os mesmos CTAs funcionam tanto para ações individuais quanto em massa — não são adicionados nem removidos botões. - **Index — Filter Bar** — Badge "X selecionados" (toggle) + "Salvar lista" + "Limpar seleção" — A badge aparece logo após o checkbox e funciona como toggle: ao ativar, filtra a view pelos itens marcados, desabilita os filtros aplicados (sem removê-los) e expõe "Salvar lista" e "Limpar seleção". Nenhum botão novo é adicionado à tela. - **Header da tabela** — Checkbox "Selecionar todos" — Acesso rápido à seleção total da página; estado indeterminate quando há seleção parcial. - **Linha da tabela** — Checkbox à esquerda em cada linha — Seleção granular por item. A seleção persiste ao navegar entre páginas da lista. - **Documento — Toolbar da tabela** — CTAs inline acima da tabela de itens — Em tabelas de documento (ex.: itens de cotação), as ações ficam na toolbar da própria tabela: "Adicionar item", "Atualização em massa", "Excluir itens". - **Index — CTAs do Subheader** — Sempre visíveis e ativos; agem sobre a seleção — Na index não há CTAs dedicados a massa: os próprios CTAs do Subheader passam a operar sobre os itens marcados ("Enviar 3 documentos"). Nenhum botão é adicionado, removido ou desabilitado pela seleção. - … (+1) --- ## Chassi (MeLayout) _O shell comum a todas as telas do ME — slots do MeLayout, regras transversais e qual slot cada tipo de tela usa._ **Seções:** Anatomia · Regras · Matriz · Responsividade **Contextos de uso (onde fica + porquê):** - **Header (app bar)** — Topo, full-width, AZUL me-brand — Barra azul me-brand: marca "me." branca à esquerda, NAVEGAÇÃO PRINCIPAL HORIZONTAL (áreas: Dashboard, Transações, Fornecedores, Catálogos, Usuários) no topo, transversais (Mensagens, Genius, Carrinho) + avatar à direita. O menu de áreas fica AQUI, no header — NUNCA vira rail/sidebar de ícones à esquerda. Header verde/claro = me-brand não aplicado (erro). - **Nav-area (opcional)** — Rail lateral estreito (5.5rem), abaixo do header — Atalhos por etapa/rodada (ex.: Cotação) — OPCIONAL, entra só quando a tela precisa. NÃO é o menu principal de áreas (esse é horizontal, no header). - **Left-area / sidebar** — Coluna à esquerda, redimensionável e colapsável — Menu de seções/filtros da tela (index, config). Abaixo de lg vira slideover. - **Toolbar / subheader** — Faixa abaixo do header, sobre o conteúdo — Ações da tela (CTA primário + ghosts + "Mais ações") e busca/filtro/view. - **Conteúdo (default)** — Coluna central, rola — A tela em si (tabela, documento, dashboard, formulário). - **Right-area** — Coluna à direita, redimensionável — Carrinho XOR Mensagens — nunca os dois juntos; troca conforme o contexto. - … (+3) --- ## Geral _Anatomia universal das telas de index — zonas, modos de visualização, hierarquia de CTAs e regras da filter bar._ **Seções:** Boas Práticas · Anatomia · Sidebar · Hierarquia · Ecossistema · Index · Responsividade · Feedback · Construir **Quando usar:** - Qualquer tela de listagem de uma entidade — Transações, Fornecedores, Catálogo, Usuários. - Quando há volume de registros que exige busca, filtros e ações em lote. - Quando os registros compartilham colunas/atributos comparáveis entre si. **Quando NÃO usar:** - Tela de detalhe ou edição de um único registro — use Estrutura de Documento. - Dashboards e visões analíticas — use o padrão de Dashboard. - Listas curtas e fixas de configuração, sem busca — use uma tabela simples. --- ## Transações _Index de documentos de compra — Requisições, Cotações, Pedidos e Contratos. Tabela com status semântico e ações dependentes do fluxo._ **Seções:** Boas Práticas · Especificação · Sidebar · Contextos · Ações · Feedback **Quando usar:** - Listar documentos de compra — Requisições, Cotações, Pré-Pedidos, Pedidos, Contratos, Leilões e Notas Fiscais. - Quando Status e Tipo do documento precisam ser comparáveis numa varredura. - Quando ações de fluxo (gerar, aprovar, cancelar) operam sobre os documentos. --- ## Fornecedores _Gestão do cadastro de fornecedores — colunas, filtros por categoria e status, importação em massa._ **Seções:** Boas Práticas · Especificação · Sidebar · Contextos · Ações · Feedback **Quando usar:** - Gerenciar o cadastro de fornecedores — criar, editar, ativar/desativar e bloquear. - Localizar fornecedores por categoria, status ou região antes de iniciar uma transação. - Comparar fornecedores por atributos cadastrais (categoria, rating, último contato). **Quando NÃO usar:** - Adicionar um fornecedor já existente a uma cotação ou lista — use o padrão Adicionar (item em contêiner). - Ver o detalhe ou editar um único fornecedor — use Estrutura de Documento. - Rankings e análises de desempenho de fornecedores — use o padrão de Dashboard. --- ## Catálogo _Catálogo de itens disponíveis para compra. View padrão em Cards com toggle para Tabela._ **Seções:** Boas Práticas · Especificação · Sidebar · Contextos · Ações · Feedback **Quando usar:** - Navegar e descobrir itens disponíveis para compra — busca livre + filtro de categoria. - Solicitar itens (carrinho) ou cadastrar novos itens do catálogo, conforme o perfil. - Comparar itens por preço, fornecedor, disponibilidade e prazo de entrega. **Quando NÃO usar:** - Adicionar um item já existente a uma requisição em outra tela — use o padrão Adicionar (item em contêiner). - Ver o detalhe de um item do catálogo — use Estrutura de Documento. - Análise de gastos por categoria — use o padrão de Dashboard. --- ## Usuários _Gestão de usuários e permissões. View padrão em Lista enriquecida com avatar, perfil e status de conta._ **Seções:** Boas Práticas · Especificação · Sidebar · Contextos · Ações · Feedback **Quando usar:** - Gerenciar usuários e permissões da organização (acesso exclusivo de Administrador). - Localizar usuários por perfil, status de conta ou departamento. - Aplicar ações administrativas em lote — ativar, desativar, alterar perfil. **Quando NÃO usar:** - Editar o próprio perfil ou preferências — use a página de Configurações da conta. - Ver o detalhe de um usuário — use Estrutura de Documento. - Relatórios de acesso e auditoria — use o padrão de Dashboard. --- ## Geral _Anatomia universal das telas de documento — forehead, abas e corpo; ações por status; CRUD e containers; responsividade e feedback._ **Seções:** Boas Práticas · Anatomia · Forehead & ações · Navegação · CRUD · Variantes · Responsividade · Feedback --- ## Produto _Ficha do item de catálogo — forehead com galeria e preço/compra, abas de ancoragem e seções numeradas. Documento de entidade, sem o padrão de "locais"._ --- ## Requisição _View do pedido interno de compra sujeito a aprovação — itens, pedidos gerados e históricos._ --- ## Cotação (RFQ) _Processo de negociação com SEIS documentos (RFQ · RFP · RFI, cada um com a rodada dele) no mesmo rail de fases — cada nó troca o documento inteiro._ --- ## Leilão _View da disputa de preços por lances — modal com lotes, lances em tempo real e resultado._ --- ## Pré-pedido _View da etapa intermediária antes do pedido firme — consolidação e aprovação._ --- ## Pedido _View do documento de compra confirmado — identificação, informações gerais, históricos e itens com aprovação por linha._ --- ## Contrato _View do acordo de fornecimento — dados, cláusulas, aditivos, saldo e vigência._ --- ## Nota Fiscal _View do documento fiscal de entrada — conferência contra o pedido e aprovação do recebimento._ --- ## Fornecedor _Ficha do fornecedor — forehead, abas de ancoragem e seções numeradas. Documento de entidade, sem o padrão de "locais"._ --- ## Geral _A visão geral do dashboard — camada de síntese sobre os dados, as duas áreas simétricas, o grid de 12 colunas, a sidebar de dados e o comportamento desktop/mobile._ **Seções:** Boas Práticas · Anatomia · Sidebar · Responsividade · Painéis **Quando usar:** - Sintetizar os dados de uma tela: KPIs, tendências e recortes que o usuário monta a partir da própria fonte. - Quando a pessoa precisa montar a própria visão — criar, fixar, agrupar e reposicionar gráficos. - Em dois contextos: embutido numa Index (explorar/guardar recortes) ou como tela dedicada de múltiplos painéis. **Quando NÃO usar:** - Conteúdo fixo que ninguém reorganiza — use uma grade estática de Charts. - Um único gráfico ou KPI isolado — use o Widget direto, sem grade nem painéis. - Operar registros um a um — isso é a Index (tabela), não o dashboard. **Contextos de uso (onde fica + porquê):** - **Header (app bar)** — Topo, full-width, AZUL me-brand — Chassi do ME: marca + navegação horizontal + transversais + avatar. - **Abas de painéis + menus** — Faixa abaixo do header — Abas (ex.: Painel de compras · Aprovações e Requisições · Fornecedores · +), com renomear inline. Menu da aba (⋮): Compartilhar/Duplicar/Renomear/Ocultar/Remover (default sem Compartilhar/Remover). ⋮ da página: Restaurar padrão/Meus links/Filtros salvos/Painéis/Exportar. "+/Novo painel" abre modal Adicionar painel: Externo (link — PowerBI/GA/Tableau/Looker/Zendesk)/Interno (link ME)/Em branco. - **Filter Bar do painel** — Faixa abaixo das abas — Filtros persistentes do painel (ex.: Meus processos · Todo período · Processo = X ×) + cluster à direita [adicionar + · salvar visão 💾 · limpar 🗑 · ⋮]. Controlam os widgets abaixo; sinalizam estado "alterado". - **Toolbar do painel** — Acima da grade (título/contexto à esquerda; ações à direita) — OU delegada ao subheader — Ordem fixa: Novo gráfico (abre o Chart Wizard) · Restaurar padrão (warning — reorganiza, NÃO apaga) · Limpar (error — remove). Cada ação só habilita quando há o que fazer. - **Seção de métricas (KPIs)** — Topo do corpo — logo ABAIXO da toolbar, NUNCA acima das ações — Bloco de TILES (grade responsiva): cada tile = ícone (chip colorido) + RÓTULO + número + delta (Badge semântico ↑↓). NÃO é CardView (card de produto) nem cards full-width empilhados. - **Grade de widgets (12 col)** — Corpo — Cards; menu ⋮ do card (Copiar para/Redefinir resolução padrão/Visualizar expandido/Remover). Arrastar (pointer: sombra azul + reflow), redimensionar por alças, agrupar (card sobre card = pasta). Gráficos = paleta chart-1..10 (nunca status; cor por ponto em barras/rosca/radial, série única em área/linha); KPIs = cor de status. Dado pode ter link+destino; promo pode ser botão split. Blocos: métricas/KPIs, lista (rótulo→valor), promo, gráfico, embed externo/interno, empty state. - … (+2) --- ## Painel _O corpo de uma aba do dashboard — Filter Bar + grade de widgets + Chart Wizard, com toolbar de painel, arraste, grupos, fixados na sidebar e persistência._ **Seções:** Boas Práticas · Toolbar e Ações · Arrastar e Agrupar · Fixados na Sidebar · Blocos **Quando usar:** - Quando a pessoa monta a própria visão dentro de uma aba: cria, arrasta, redimensiona e agrupa widgets numa grade. - Quando o layout precisa ser editável e persistido por usuário/tela — não um relatório fixo. - Para combinar blocos curados (hero, métricas, listas de status) com widgets do usuário na mesma grade. **Quando NÃO usar:** - Para uma URL incorporada/iframe sem grade editável — use o modo incorporado (sem criação nem arraste). - Para um único gráfico fixo, sem grade nem abas — use o Widget direto. - Para operar registros um a um — isso é a Index (tabela), não o painel. --- ## Widgets e Gráficos _No dashboard a unidade é o widget — ele envolve um gráfico, ganha contexto e ações, e vira a peça que o usuário monta na própria visão._ **Seções:** Boas Práticas · Criar · Tipos · Modos **Quando usar:** - Quando o gráfico precisa de contexto e ações (título, período, status, menu ⋮) — a peça que o usuário monta. - Quando a pessoa cria/configura a visualização a partir dos dados (Chart Wizard) e depois a fixa ou copia. - Em dashboards e painéis, onde os widgets formam a grade editável. **Quando NÃO usar:** - Um único gráfico fixo, sem header nem personalização — use o Chart direto. - Só o contexto (status/período) sem configuração do usuário — use o Analytics Block. - Exibir dados sem interação de montagem — use uma grade estática de Charts. --- ## Genius _Assistente de IA do ME — anatomia do trigger, painel de conversa e regras de comportamento._ **Seções:** Boas Práticas · Visão geral · Anatomia · Cards de resposta · Features **Quando usar:** - Quando a pessoa precisa de resposta ou ação sobre os dados sem navegar entre telas — resumir uma cotação, achar um produto, ver o status de um pedido. - Como atalho transversal acessível de qualquer tela, já com o contexto da tela atual. - Para fluxos guiados por linguagem natural (criar cotação, adicionar ao carrinho) que de outra forma seriam vários cliques. **Quando NÃO usar:** - Para uma ação determinística de um clique que já existe na tela — use o controle direto. - Como única via de uma tarefa crítica — o caminho explícito de UI deve sempre existir. - Para configuração pesada de administração — use a tela dedicada. --- ## Chat de mensagem _Componente de mensagens transversal — lista de conversas, janela de chat e tipos de mensagem._ **Seções:** Boas Práticas · Anatomia · Superfícies · Composer · Mensagens · Estados · Checklist **Quando usar:** - Comunicação contextual com fornecedores ou colegas sobre um documento — proposta, prazo, dúvida. - Quando a conversa precisa ficar atrelada ao registro — histórico por transação. - Respostas rápidas sem sair do fluxo (drawer contextual), com a página dedicada para acompanhar tudo. **Quando NÃO usar:** - Para feedback do sistema (salvo, excluído, erro) — use Toast/Alert, não o chat. - Para uma decisão formal que exige trilha de auditoria — registre no próprio documento. - Para aviso unidirecional/broadcast — use notificação. --- ## Carrinho _Componente de carrinho de compras — painel lateral, itens, totais e fluxo de checkout._ **Seções:** Boas Práticas · Anatomia · Estados **Quando usar:** - Reunir itens do catálogo antes de gerar uma requisição/pedido — compra em lote. - Ajustar quantidades e o destino de compra antes de efetivar. - Quando a compra é multi-item e/ou multi-fornecedor. **Quando NÃO usar:** - Para um único item com fluxo direto — "Solicitar" na própria linha pode bastar. - Como lista de desejos persistente — use Favoritos/Listas. - Para item fora do catálogo — use o fluxo de item avulso no documento. --- ## Config gerais _Chassi das telas de configuração do ME — sidebar de seções, conteúdo por seção e edição via modal (sem submit de página)._ **Seções:** Boas práticas · Anatomia · Ações · Responsividade **Quando usar:** - Configurações de conta, empresa ou sistema, organizadas em seções navegáveis. - Quando há vários grupos de ajustes acessados por uma sidebar de seções. - Quando o usuário consulta e ajusta valores existentes (não cadastra uma entidade nova). **Quando NÃO usar:** - Cadastro/edição de uma entidade com envio explícito — use o padrão de Formulário. - Leitura/edição de um registro de negócio (pedido, cotação…) — use Estrutura de Documento. - Uma lista de registros para buscar/filtrar/agir — use Estrutura de Index. **Contextos de uso (onde fica + porquê):** - **Chassi MeLayout** — Header + left-area (menu de configurações) + conteúdo — Área de administração dentro do app autenticado. - **Menu de configurações** — Left-area: grupos aninhados + busca ("Busque neste menu"); seção ativa destacada — Navegação por seções de config (Sistema e Operações, Usuários e Acessos, Processos…). - **Conteúdo da seção** — Cabeçalho (título + descrição) + toolbar (ação primária + secundárias + busca) + tabela/formulário — Cada seção abre seu conteúdo (ex.: Automação = listagem). - **Sem subheader de documento** — Config NÃO usa o subheader/toolbar de documento; edição via modal ou inline (sem submit global) — Não é tela transacional — evita inventar ações que não existem. - **Mobile** — Hambúrguer no header abre o menu de configurações em drawer (esquerda) — A left-area colapsa em slideover abaixo de lg. --- ## Login e acesso _Telas de autenticação do ME (fora do chassi) — split screen com painel de marca + formulário; login, cadastro, recuperação e ativação._ **Seções:** Boas práticas · Anatomia · Variantes · Regras **Quando usar:** - Telas de autenticação e onboarding de conta — login, cadastro, recuperação de senha e ativação. - Quando o usuário ainda NÃO está autenticado (antes de entrar no app). **Quando NÃO usar:** - Qualquer tela dentro do app autenticado — use o chassi MeLayout. - Ajustes de conta já logado (senha, dados) — use Config gerais. **Contextos de uso (onde fica + porquê):** - **Fora do chassi** — Tela cheia, split screen (sem header/nav do app) — Usuário não autenticado — a identidade ME vem do painel de marca, não do header. - **Painel de marca** — Coluna esquerda (~2/3), azul me-brand + textura hexagonal + "me." + tagline — Identidade da tela; abaixo de lg some (vira faixa no topo). - **Painel de formulário** — Coluna direita (~1/3), fundo claro; seletor de idioma no topo — MeLoginForm real: usuário/senha, lembrar, esqueci a senha, CTA "Entrar" full-width, links (Cadastre-se como Fornecedor, ativação). - **Mobile** — Header branco no topo (logo azul + busca + serviços + avatar) e formulário abaixo — O split vira empilhado; só a coluna do formulário rola. **Labeling:** - Entrar = CTA primário full-width (ação principal) - Cadastre-se como Fornecedor = link secundário → cadastro de fornecedor --- ## Cadastro Comprador _Criação de conta de comprador — tela de acesso (fora do chassi), split de marca + formulário multi-step._ **Seções:** Boas práticas · Anatomia · Passos · Regras **Quando usar:** - Criação de conta de comprador (empresa que vai comprar pela plataforma). - Usuário ainda NÃO autenticado, a partir do login ("Fazer login" faz o caminho inverso). **Quando NÃO usar:** - Cadastro de fornecedor — use o padrão Cadastro Fornecedor (fluxo e campos diferentes). - Qualquer tela dentro do app autenticado — use o chassi MeLayout. **Contextos de uso (onde fica + porquê):** - **Fora do chassi** — Split screen (banner de marca + formulário multi-step) — Criação de conta de comprador; usuário não autenticado. - **Passo 1 — Empresa/endereço** — País, Natureza (PJ/PF), CNPJ, Razão Social, CEP, Endereço, Número/Complemento, Bairro, Cidade, Estado — CTA "Avançar" — Dados cadastrais da empresa. - **Passo 2 — Dados cadastrais** — Nome, E-mail, Login, Telefone, Celular, Senha (checklist de força), Repetir + aceite dos Termos — CTA "Concluir" — Dados do usuário + senha. - **Validar cadastro** — Confirmação por e-mail (link de validação + reenvio) — Passo final antes de acessar. - **Barra de progresso** — Rodapé do formulário (X/2 + "Próximo passo") — Orienta o fluxo multi-step. - **Não é o cadastro de Fornecedor** — Fluxo e campos distintos — O de fornecedor tem 5 passos e validação de e-mail/telefone. --- ## Cadastro Fornecedor _Criação de conta de fornecedor — tela de acesso (fora do chassi), split de marca + formulário de 5 passos._ **Seções:** Boas práticas · Anatomia · Passos · Por convite · Regras **Quando usar:** - Criação de conta de fornecedor, a partir do "Cadastre-se como Fornecedor" no login. - Usuário ainda NÃO autenticado. **Quando NÃO usar:** - Cadastro de comprador — use o padrão Cadastro Comprador (fluxo e campos diferentes). - Qualquer tela dentro do app autenticado — use o chassi MeLayout. **Contextos de uso (onde fica + porquê):** - **Fora do chassi** — Split screen (banner de marca + formulário de 5 passos) — Criação de conta de fornecedor, a partir do "Cadastre-se como Fornecedor" no login. - **1 — Conta** — País, CNPJ, Razão Social + aceite dos Termos — CTA "Começar agora" — Abertura da conta. - **2 — Dados cadastrais** — Nome completo, como gostaria de ser chamado, Telefone, E-mail corporativo — Identificação do fornecedor. - **3 — Validar e-mail** — Código enviado ao e-mail (check de validade + reenvio com contador) — Verificação do e-mail. - **4 — Validar telefone** — Código enviado ao telefone (mesmo padrão) — Verificação em dois fatores. - **5 — Criar senha** — Senha + repetir, com checklist de força — CTA "Concluir" — Fecha o cadastro → acessa a plataforma. - … (+2) --- ## CRUDs _Padrão de CRUD do ME — como criar, ler, editar e excluir de forma consistente entre entidades (transações, fornecedores, produtos, usuários, contatos)._ **Seções:** Contextos · Estrutura · Princípios · Hierarquia · Estados · Labeling · Como montar · Relacionados --- ## Index _Template da tela de listagem — Header, Subheader, Filter bar e área de dados._ **Seções (prosa):** Modos de visualização · Tabela · Cards · Lista · Pré-visualização (master-detail) · Quando usar · Componentes da tela --- ## Documento _Template da tela de um registro — Forehead, abas e corpo, com ações por status._ **Seções (prosa):** Quando usar · Componentes da tela --- ## Dashboard _Template da tela de síntese — filtros globais, KPIs e grid de widgets._ **Seções (prosa):** Quando usar · Componentes da tela --- ## Formulário _Template da tela de cadastro/edição — campos em seções e rodapé de ações._ **Seções (prosa):** Quando usar · Anatomia · Perguntas configuráveis · Seções — ações · Modais e diálogos · Validação · Responsivo · Componentes da tela · Como montar (Compositor) --- ## Config gerais _Template da tela de configurações — menu lateral de configurações + conteúdo da seção (ex.: Automação)._ **Seções (prosa):** Quando usar · Componentes da tela --- ## E-mails _Templates de e-mail transacional do ME — um template default contextualizado (confirmação, convites, redefinição de senha)._ **Seções:** Boas práticas · Anatomia · Modelos · Regras **Quando usar:** - Comunicações transacionais do ME — confirmação de conta, convites e redefinição de senha. - Sempre a partir do template default: header e footer fixos, só o conteúdo muda. **Quando NÃO usar:** - Marketing / newsletter — fora do escopo deste template transacional. - Conteúdo dentro do app autenticado — use os padrões de tela (chassi MeLayout). **Contextos de uso (onde fica + porquê):** - **Template default (shell)** — Header azul (marca "me.") + conteúdo + footer azul (Atendimento · Conheça o ME · LinkedIn/Facebook/Instagram) — Um único shell; só o miolo muda por cenário. Fonte: Roboto (fonte do produto). - **Confirmação de cadastro** — Título + saudação + CTA "Concluir cadastro" + materiais de apoio — Validar a conta recém-criada. - **Convite — fornecedor com cadastro ativo** — Logo do parceiro + "{Empresa} te enviou um convite" + vantagens do ME + CTA "Acessar perfil" — Já possui cadastro — só acessa. - **Convite — fornecedor (novo cadastro)** — Logo do parceiro + vantagens + CTA "Cadastrar" + PS de expiração do link + opt-out — Iniciar o cadastro por convite. - **Redefinir senha** — Título + instrução + CTA "Recuperar senha" — Fluxo de reset de senha. - **Logo/nome do parceiro** — Vêm dos dados do convite — Nos previews é fictício; na comunicação real vem do parceiro. **Labeling:** - Concluir cadastro = CTA da confirmação de conta - Cadastrar = CTA do convite (novo cadastro) - Acessar perfil = CTA do convite (fornecedor ativo) - Recuperar senha = CTA de redefinição de senha --- ## Wizard _Template de fluxo guiado em etapas — indicador de progresso, conteúdo da etapa e rodapé Voltar/Avançar._ **Seções (prosa):** Quando usar · Anatomia · Stepper — layout · Tipos de conteúdo por etapa · Regras · Responsivo · Componentes da tela · Como montar (Compositor) --- ## Documentos por tipo (anatomia por documento) > Cada tipo reaproveita o chassi de documento (Forehead + abas + corpo), variando identidade, abas, status e ações. Todo documento tem também uma versão **modal** aberta por um item da index. Fonte: `app/data/patterns/document-types.ts`. ### Documento: Pedido _Documento de compra confirmado enviado ao fornecedor. View full-page com identificação, informações gerais, históricos e itens com aprovação por linha._ **Formato:** Full-page simples (sem rail de fases). O Pedido é o documento de compra firmado com o fornecedor. Como todo documento, abre em modal a partir do item na index (chrome: breadcrumb + abrir em outra janela + X) e o expandir leva à página — o foco é leitura e acompanhamento do que foi pedido, com o histórico de aprovações visível por item. **Abas:** Informações gerais · Históricos · Itens **Abas (detalhe):** - **Informações gerais** — Dados do pedido (requisitante, nº ME, empresa, datas, valor) + anexos do documento. É a aba padrão — abre primeiro porque responde "do que se trata este pedido". - **Históricos** — Histórico de tarefas e o histórico de alterações (campo editado, responsável, IP, data) — o rastro de auditoria de quem mexeu em quê. - **Itens** — Itens linha a linha com 2 expanders independentes: chevron na coluna Código do produto → "Detalhes do item" (Informações gerais + Anexos + Histórico de aprovações com tabela/paginação/timeline); chevron na coluna Status → "Histórico do item neste documento". Toolbar: split "Adicionar item" + Remover + busca + gráfico + mais-ações. **Status (badge semântico):** - **Rascunho** (neutral) — Pedido em montagem, ainda não submetido — só quem edita o vê. - **Em aprovação** (warning) — Aguardando a alçada aprovar — o stepper mostra a etapa atual e quem é o aprovador da vez. - **Aprovado** (success) — Aprovado internamente; pronto para envio ao fornecedor. - **Confirmado** (success) — Fornecedor confirmou o pedido — a partir daqui, mudanças entram por aditivo ou cancelamento. - **Cancelado** (error) — Pedido cancelado — exige motivo, que fica registrado para auditoria. **Ações (zona · quando):** - **Subheader** — Aprovar (primária) — Primária só quando o pedido está na alçada do usuário; some para quem não aprova — a primária é sempre a ação esperada naquele status. - **Subheader** — Editar — Disponível enquanto o fornecedor não confirma; depois disso, alterações passam a ser por aditivo/cancelamento. - **Subheader** — Criar pré-pedido / Criar pré-pedido emergencial — Gera um pré-pedido a partir deste pedido; a versão emergencial encurta a alçada para compras urgentes. - **Mais ações** — Exportar, Encaminhar, Cancelar — Recolhidas por baixa frequência. Cancelar é destrutiva — fica por último, isolada após um divisor, e exige motivo. **Particularidades:** - **Aprovação por item** — Cada item tem seu stepper (Rascunho → Enviado → Aprovado) — a aprovação não é só do documento, é linha a linha. - **Pré-pedido emergencial** — Atalho no subheader para abrir um pré-pedido emergencial a partir do pedido, sem refazer dados. - **Valor total** — O valor consolidado fica no canto do forehead, ao lado do status — visível sem abrir os itens. - **Conferido por Nota Fiscal** — O recebimento é validado por uma Nota Fiscal vinculada; os itens da nota são batidos contra os do pedido. **Quando usar:** - Acompanhar um pedido de compra confirmado e seus itens. - Aprovar/rejeitar dentro da alçada, com rastro de quem aprovou cada item. - Gerar um pré-pedido (ou pré-pedido emergencial) a partir do pedido. **Quando NÃO usar:** - Comparar propostas de fornecedores — use o padrão Cotação (RFQ). - Pedir aprovação de uma necessidade de compra antes do pedido — use Requisição. **Fluxo (cadeia):** Requisição → Cotação → Pré-pedido → **Pedido** → Nota Fiscal **Relacionados:** - **Requisição** — Origem da necessidade — uma requisição aprovada pode virar pedido direto. - **Pré-pedido** — Etapa de validação antes do pedido firme; também pode ser gerado a partir dele. - **Nota Fiscal** — Entrada fiscal conferida contra os itens deste pedido. - **Contrato** — Quando há acordo guarda-chuva, o pedido consome o saldo do contrato. --- ### Documento: Cotação (RFQ) _Processo de negociação com fornecedores. Não é um documento: são SEIS — RFQ, RFP e RFI, cada um com a sua rodada de negociação — que convivem no mesmo rail de fases, cada um com abas, barra de ações e dados próprios._ **Formato:** Documento de PROCESSO: **rail de FASES à esquerda** (`#nav-area`, aberto 318px / recolhido 72px; drawer com lista plana no mobile). Abre em **modal** sobre a index (chrome = breadcrumb + abrir em outra janela + X) e o expandir leva à **página** (MeHeader, sem chrome); no mobile é sempre modal-sheet. Cada nó do rail pode carregar um documento DIFERENTE — ver a matriz de documentos. A Cotação é um PROCESSO com seis documentos diferentes (RFQ · RFP · RFI, cada um com a rodada de negociação dele). Clicar num nó do rail de fases NÃO filtra abas: troca o documento inteiro — forehead, abas, ações e dados. Abre em modal sobre a index por padrão (chrome: breadcrumb + abrir em outra janela + X) e o expandir leva à página; no mobile é sempre modal-sheet. **Abas:** Atributos da cotação · Fornecedores convidados · Históricos · Itens · Avaliação técnica · Rodadas de negociação **Os 6 documentos deste processo** (clicar no nó do rail troca o documento INTEIRO — abas, ações e dados; não filtra abas): | documento | abas (na ordem) | barra (2 visíveis) | |---|---|---| | **RFQ** — RFQ — requisição de cotação (arquivo inicial) | Atributos da cotação · Fornecedores convidados · Históricos · Itens · Avaliação técnica · Rodadas de negociação | Finalizar negociação · Cancelar cotação | | **RFQ — rodada** — RFQ rodada de negociação | Fornecedores convidados · Itens · Rodadas de negociação | Finalizar negociação · Cancelar cotação | | **RFP** — RFP — requisição de proposta | Atributos da cotação · Fornecedores convidados · Históricos · Itens · Rodadas de negociação | Encaminhar cotação · Alterar observação | | **RFP — rodada** — RFP rodada de negociação | Fornecedores convidados · Itens · Rodadas de negociação | Finalizar negociação · Cancelar cotação | | **RFI** — RFI — requisição de informação | Enquete · Fornecedores convidados · Históricos · Itens · Avaliação técnica · Rodadas de negociação | Finalizar negociação · Avaliação técnica | | **RFI — rodada** — RFI rodada de negociação | Enquete · Atributos da cotação · Fornecedores convidados · Itens · Avaliação técnica · Rodadas de negociação | Encaminhar cotação · Alterar observação | - **RFQ** — O único com apropriação (é de outro usuário até alguém se apropriar) e com a caixa informativa "Entrega" (CNPJ + endereço + item com "+4" que ancora em Itens). É a referência das outras cinco. - **RFQ — rodada** — A única rodada que PERDE a caixa informativa. Alerta warning "Cotação original: {código}" com link de volta ao arquivo inicial. Nasce minha: sem apropriação. - **RFP** — Não tem Avaliação técnica. É o único documento que TROCA o par de botões entre pai e rodada. - **RFP — rodada** — Mantém a caixa informativa (diferente da rodada de RFQ) e volta ao par Finalizar + Cancelar. - **RFI** — Abre na Enquete (que substitui Atributos) e é o único onde "Avaliação técnica" é botão da barra e abre a modal de Critérios. - **RFI — rodada** — A única rodada com seis abas: sai Históricos, entra Atributos da cotação. "Avaliação técnica" desce para o menu "Mais ações". **Abas (detalhe — documento de referência):** - **Atributos da cotação** — Informações adicionais configuráveis (atributo → valor) — define o que se está cotando. Três colunas, sem seleção, ação de linha = lápis. Na RFI dá lugar à Enquete. - **Fornecedores convidados** — Quem foi convidado, origem, contrato, se respondeu e quantos itens — o mapa de participação. 17 colunas, split "Adicionar fornecedor", switch "Ocultar no mapa comparativo", legenda de 3 bullets e badge de erro quando o fornecedor não tem código ERP. - **Históricos** — Collapsibles de estado da cotação (o primeiro aberto) com timeline horizontal — só o último passo colorido — e duas ações por linha. Sai nas rodadas de RFQ e RFP. - **Itens** — Os itens em cotação: 21 colunas, sub-itens com CRUD inline, linha em branco editável ("+ Novo item em branco") e "% Sobre histórico" colorido pelo sinal. O link do item abre o documento de produto aninhado. - **Avaliação técnica** — Tarefas de avaliação por responsável, com prazo e conclusão — separa o mérito técnico do preço. Existe na RFQ e na RFI (nas duas formas); a RFP não tem. - **Rodadas de negociação** — As rodadas do grupo, com datas e a cotação anterior encadeada. A primeira coluna navega — clicar abre a rodada como documento. A rodada em visualização aparece como texto simples com badge "Ativo"; as outras, como link. **Status (badge semântico):** - **Em análise da Negociação** (warning) — O status dos seis documentos nos frames validados — a cotação está em curso, aguardando respostas ou a análise do comprador. - **Vencida** (error) — Prazo de resposta expirado (dias restantes ≤ 0) — o alerta vermelho traz o CTA "Alterar data limite" para reabrir. - **Finalizada** (neutral) — Negociação encerrada: a barra passa a "Alterar data limite da shortlist" + "Enviar mensagem de agradecimento". - **Cancelada** (error) — Cancelada com justificativa obrigatória, registrada para auditoria. **Ações (zona · quando):** - **Subheader** — DOIS botões visíveis + "Mais ações" — A barra é DO DOCUMENTO, não do processo: RFQ (pai e rodada) = Finalizar negociação · Cancelar cotação; RFP pai = Encaminhar cotação · Alterar observação; RFP rodada = Finalizar · Cancelar; RFI pai = Finalizar negociação · Avaliação técnica; RFI rodada = Encaminhar cotação · Alterar observação. Dois, não três — com três, "Avaliação técnica" subia para a barra da RFQ e a RFI perdia o que a distingue. - **Subheader (direita)** — Opções — Config da tela, encostada à direita da mesma barra de largura cheia. - **Mais ações** — Alterar data limite · Criar short list · Encaminhar cotação · Alterar observação · Enviar mensagem de agradecimento · Notificar atualização de anexo — O que não cabe nos dois botões. Cada item abre a sua modal; nenhuma ação leva para outra tela sem confirmação. - **Estado do processo** — Apropriar-se da cotação — SÓ na primeira RFQ (arquivo inicial), quando a cotação é de outro usuário: a barra vira Encaminhar + Apropriar-se, e apropriar-se pede confirmação em diálogo. RFP, RFI e todas as rodadas nascem minhas — nem a ação nem o alerta verde aparecem nelas. - **Ação com destino próprio** — Avaliação técnica — Na RFI abre a modal de Critérios de avaliação (com criar/editar e excluir critério por dentro). Nos outros documentos leva para a tela de avaliação. **Particularidades:** - **Seis documentos, um rail** — Cada nó do rail carrega um documento inteiro (forehead, abas, ações, dados). O rail tem três níveis de destaque: nó aberto sólido, resto do grupo em azul claro, outros grupos neutros. Aberto 318px / recolhido 72px; no mobile é drawer com lista plana. - **Código próprio por nó** — Cada documento tem código próprio e sabe quem é o pai: o alerta "Cotação original" na rodada linka para o arquivo inicial, e a grid de rodadas encadeia a cotação anterior. Nenhum número fixo em tela. - **Rodada é documento, não filtro** — A rodada nasce minha, tem abas próprias (3 na RFQ e na RFP; 6 na RFI, onde entra Atributos e sai Históricos) e perde a caixa informativa só na RFQ — RFP e RFI mantêm. - **Enquete no lugar de Atributos** — Exclusiva da RFI: a Enquete substitui "Atributos da cotação" no documento pai e marca com badge a rodada em visualização. - **Modais acima do header** — As 13 modais do documento (apropriar, encerrar, cancelar, data limite, observação, short list, encaminhar, mensagem, notificar anexo, critérios + criar/excluir critério, nova etapa) vivem numa camada acima do header azul — modal atrás da barra é defeito. - **Visão Otimização** — A terceira visão do alternador ("Otimização avançada") lê a mesma cotação por CENÁRIOS: três indicadores (saving equalizado, TCO do cenário, TCO da cotação), três decomposições em barras horizontais, três filtros e a lista de cenários — cada card expande a tabela por fornecedor (14 colunas + paginação) e traz Estratégia · Análise · Critérios utilizados, alinhados pelo topo (abrir um não estica os outros). Nesta visão a barra passa a ser de cenário (Criar · Comparar · Gerenciar) e o RAIL DE FASES fica oculto — ele é do documento. Trocar de visão não troca de tela: header e subheader continuam os mesmos. - **O Mapa ainda não existe** — Das três visões do alternador, Documento e Otimização estão desenhadas; o Mapa não. Não montar o Mapa por dedução — ele precisa do desenho antes. **Quando usar:** - Negociar preços e condições com vários fornecedores em rodadas. - Conduzir RFQ, RFP e RFI dentro do mesmo processo, cada um como documento próprio no rail. - Comparar orçamentos respondidos e avaliar tecnicamente antes de decidir. **Quando NÃO usar:** - Registrar uma compra já fechada — use Pedido. - Disputa por lances em tempo real — use Leilão. - Tratar RFP ou RFI como "a RFQ com abas escondidas" — são documentos diferentes, cada um com as tabelas dele. **Fluxo (cadeia):** Requisição → **Cotação** → Pré-pedido → Pedido **Relacionados:** - **Requisição** — Origem: uma requisição aprovada pode gerar a cotação para negociar. - **Leilão** — Alternativa quando a disputa é por lances em tempo real, não por rodadas. - **Pedido** — Resultado: a proposta vencedora vira pedido firme. --- ### Documento: Requisição _Pedido interno de uma necessidade de compra, sujeito a aprovação, que dá origem a pedidos. View full-page com itens e os pedidos gerados._ **Formato:** Full-page simples (sem rail de fases). A Requisição registra uma necessidade de compra interna que passa por aprovação e, uma vez aprovada, origina um ou mais pedidos. O foco é a aprovação e o rastro até os pedidos gerados. **Abas:** Informações gerais · Pedidos gerados · Históricos **Abas (detalhe):** - **Informações gerais** — Requisitante, categoria, centro de custo, datas e os itens requisitados — a necessidade descrita. - **Pedidos gerados** — Os pedidos originados desta requisição, com o status de cada um — fecha o ciclo do que foi pedido. - **Históricos** — Aprovações e alterações da requisição, com responsável e motivo. **Status (badge semântico):** - **Rascunho** (neutral) — Em preenchimento — ainda não enviada para aprovação. - **Em aprovação** (warning) — Aguardando a alçada — nada vira pedido enquanto não aprovar. - **Aprovado** (success) — Liberada para gerar pedido/cotação. - **Reprovado** (error) — Negada — com o motivo registrado no histórico. **Ações (zona · quando):** - **Subheader** — Aprovar (primária) — Primária quando a requisição está na alçada do usuário — é o portão antes de comprar. - **Subheader** — Gerar pedido / Gerar cotação — Após aprovada, encaminha para a compra: pedido direto ou cotação para negociar. - **Mais ações** — Editar, Exportar, Cancelar — Recolhidas por baixa frequência. Cancelar é destrutiva — por último, isolada após divisor. **Particularidades:** - **Origina pedidos** — Uma requisição aprovada gera pedidos/cotações — a aba "Pedidos gerados" mostra o rastro de tudo que nasceu dela. - **Categoria + comprador** — Categoria e Responsible Buyer aparecem no forehead, definindo o roteamento da compra. - **Portão de governança** — É o ponto de controle: nada avança para compra sem a alçada aprovar — o rastro fica nos Históricos. **Quando usar:** - Pedir aprovação de uma necessidade de compra antes de comprar. - Acompanhar a aprovação e os pedidos/cotações gerados a partir dela. **Quando NÃO usar:** - Comprar diretamente sem aprovação — use o fluxo de Pedido. - Negociar com fornecedores — use Cotação. **Fluxo (cadeia):** **Requisição** → Cotação → Pré-pedido → Pedido **Relacionados:** - **Cotação** — Gerada a partir da requisição quando a compra precisa de negociação. - **Pedido** — Destino final: a necessidade aprovada vira um ou mais pedidos. - **Pré-pedido** — Etapa intermediária de validação antes do pedido firme. --- ### Documento: Pré-pedido _Documento intermediário entre requisição/cotação e o pedido, sujeito a aprovação. View full-page enxuta (Informações gerais · Históricos)._ **Formato:** Full-page simples (sem rail de fases). O Pré-pedido é a etapa intermediária antes do pedido firme — consolida o que será comprado e passa por aprovação. É uma view enxuta, focada em validar e converter em Pedido. **Abas:** Informações gerais · Históricos **Abas (detalhe):** - **Informações gerais** — Fornecedor, endereço, contatos, valor e os itens do pré-pedido — tudo que será firmado. - **Históricos** — Aprovações e alterações até a conversão em pedido. **Status (badge semântico):** - **Rascunho** (neutral) — Em montagem, antes de pedir aprovação. - **Em aprovação** (warning) — Aguardando aprovação para virar pedido. - **Aprovado** (success) — Pronto para converter em Pedido. - **Cancelado** (error) — Cancelado com motivo registrado. **Ações (zona · quando):** - **Subheader** — Aprovar (primária) — Primária quando está na alçada do usuário. - **Subheader** — Gerar pedido — Converte o pré-pedido aprovado em pedido firme, sem redigitar dados. - **Mais ações** — Editar, Cancelar — Recolhidas por baixa frequência. Cancelar é destrutiva — por último, isolada após divisor. **Particularidades:** - **Etapa de conversão** — Existe para validar antes do pedido; aprovado, converte em Pedido herdando todos os dados. - **Enxuto** — Poucas abas — o foco é aprovar/converter, não detalhar; a profundidade fica no Pedido. - **Emergencial** — A variante emergencial encurta a aprovação para compras urgentes, sem pular o registro. **Quando usar:** - Validar e consolidar uma compra antes de firmar o pedido. - Tratar compras emergenciais com aprovação rápida. **Quando NÃO usar:** - Documento de compra final — use Pedido. - Necessidade ainda não aprovada — use Requisição. **Fluxo (cadeia):** Cotação → **Pré-pedido** → Pedido **Relacionados:** - **Pedido** — Destino: o pré-pedido aprovado converte em pedido firme. - **Requisição** — Origem da necessidade que chega ao pré-pedido. - **Cotação** — Quando o pré-pedido nasce de uma negociação concluída. --- ### Documento: Leilão _Disputa de preços por lances entre fornecedores, com janela de tempo. Abre em modal com rail, alternador de visão e as abas Lotes · Lances · Resultado._ **Formato:** Documento de PROCESSO: **rail de FASES à esquerda** (`#nav-area`, aberto 318px / recolhido 72px; drawer com lista plana no mobile). Abre em **modal** sobre a index (chrome = breadcrumb + abrir em outra janela + X) e o expandir leva à **página** (MeHeader, sem chrome); no mobile é sempre modal-sheet. Cada nó do rail pode carregar um documento DIFERENTE — ver a matriz de documentos. O Leilão é a disputa por lances: fornecedores competem em preço dentro de uma janela de tempo. Como a Cotação, é um documento de processo com rail de fases — mas o eixo é a disputa em tempo real (lotes, lances e resultado). Como todo documento, também é acessível em modal a partir de um item da index. **Abas:** Lotes · Lances · Resultado · Históricos **Fases (rail à esquerda):** Leilão reverso → Disputa anterior **Abas (detalhe):** - **Lotes** — Os lotes em disputa, com item, quantidade e lance mínimo — a unidade da competição. - **Lances** — Os lances recebidos em tempo real, por fornecedor e horário — reflete ao vivo durante a janela. - **Resultado** — O vencedor por lote e a economia obtida ao fim da disputa. - **Históricos** — Estados do leilão e alterações de prazo. **Status (badge semântico):** - **Agendado** (neutral) — Criado, com janela definida, ainda não iniciado. - **Em andamento** (info) — Disputa aberta — recebendo lances dentro da janela de tempo. - **Encerrado** (success) — Disputa concluída, com vencedor apurado por lote. - **Cancelado** (error) — Cancelado antes ou durante a disputa, com motivo. **Ações (zona · quando):** - **Subheader** — Encerrar leilão (primária) — Disponível durante a disputa — fecha a janela e apura o resultado. - **Subheader** — Prorrogar prazo — Estende a janela enquanto o leilão está aberto. - **Mais ações** — Convidar fornecedor, Cancelar — Convidar amplia a disputa. Cancelar é destrutiva — por último, isolada após divisor. **Particularidades:** - **Lances em tempo real** — A disputa tem janela de tempo; os lances chegam ao vivo e a aba Lances reflete na hora. - **Resultado por lote** — O vencedor é apurado por lote, com a economia obtida frente ao lance mínimo. - **Prorrogação de prazo** — Enquanto aberto, o prazo pode ser estendido — a aba Lances segue recebendo até o encerramento. **Quando usar:** - Obter o melhor preço por disputa aberta entre fornecedores. - Compras com muitos fornecedores aptos e item padronizado. **Quando NÃO usar:** - Negociação por rodadas (não em tempo real) — use Cotação. - Compra de fornecedor único — use Pedido direto. **Fluxo (cadeia):** Requisição → **Leilão** → Pedido → Nota Fiscal **Relacionados:** - **Cotação** — Alternativa quando a negociação é por rodadas, não por lances em tempo real. - **Pedido** — Resultado: o vencedor do lote vira pedido firme. --- ### Documento: Contrato _Acordo de fornecimento com vigência, cláusulas e saldo. View full-page com Dados · Cláusulas · Aditivos · Históricos · Anexos._ **Formato:** Full-page simples (sem rail de fases). O Contrato formaliza o acordo de fornecimento com vigência e saldo. O foco é a leitura das cláusulas, o acompanhamento do saldo restante e os aditivos ao longo da vigência. **Abas:** Dados · Cláusulas · Aditivos · Históricos · Anexos **Abas (detalhe):** - **Dados** — Partes, vigência, valor total e saldo restante — o estado de saúde do contrato num relance. - **Cláusulas** — As cláusulas do contrato em leitura estruturada. - **Aditivos** — Aditivos que alteram prazo/valor, com data e motivo — preservam o original e registram a mudança. - **Históricos** — Alterações e renovações ao longo da vigência. - **Anexos** — Documentos assinados e correlatos. **Status (badge semântico):** - **Em vigência** (success) — Contrato ativo, dentro do prazo — pedidos podem ser emitidos contra ele. - **A vencer** (warning) — Próximo do fim da vigência — sinaliza a hora de renovar. - **Encerrado** (neutral) — Vigência terminada; sem novos pedidos. - **Cancelado** (error) — Rescindido antes do prazo, com motivo registrado. **Ações (zona · quando):** - **Subheader** — Criar aditivo (primária) — Para alterar prazo ou valor sem refazer o contrato — preserva o histórico. - **Subheader** — Renovar — Aparece quando o contrato está próximo do vencimento. - **Mais ações** — Editar, Exportar, Encerrar — Recolhidas por baixa frequência. Encerrar é destrutiva — por último, isolada após divisor. **Particularidades:** - **Saldo restante** — O forehead traz a barra de saldo (ex.: 75% restante) — acompanhamento do consumo do contrato sem abrir as abas. - **Aditivos** — Alterações de prazo/valor entram como aditivos, preservando o documento original e o histórico. - **Ampara pedidos** — Funciona como guarda-chuva: pedidos podem ser emitidos contra o contrato, consumindo o saldo. **Quando usar:** - Acompanhar um acordo de fornecimento, seu saldo e vigência. - Registrar aditivos e renovações. **Quando NÃO usar:** - Compra pontual sem acordo de longo prazo — use Pedido. **Fluxo (cadeia):** Cotação → **Contrato** → Pedido **Relacionados:** - **Pedido** — Pedidos são emitidos contra o contrato, consumindo seu saldo. - **Cotação** — Origem comum do acordo: a negociação que define as condições do contrato. --- ### Documento: Nota Fiscal _Documento fiscal de entrada vinculado ao pedido, sujeito a conferência e aprovação. View full-page com Informações gerais · Itens · Históricos._ **Formato:** Full-page simples (sem rail de fases). A Nota Fiscal é o documento fiscal de entrada, conferido contra o pedido. O foco é validar emitente, itens e valores e aprovar o recebimento. **Abas:** Informações gerais · Itens · Históricos **Abas (detalhe):** - **Informações gerais** — Emitente, NIF, endereço, datas e o pedido vinculado — a origem fiscal da entrada. - **Itens** — Itens da nota conferidos contra o pedido (quantidade e valor) — onde a divergência aparece. - **Históricos** — Conferência e aprovação do recebimento. **Status (badge semântico):** - **Em aprovação** (info) — Aguardando conferência/aprovação do recebimento. - **Aprovada** (success) — Recebimento conferido e aprovado — bate com o pedido. - **Divergente** (warning) — Diferença entre nota e pedido — trava a aprovação até a tratativa. - **Cancelada** (error) — Nota cancelada. **Ações (zona · quando):** - **Subheader** — Aprovar recebimento (primária) — Primária quando a conferência bate com o pedido. - **Subheader** — Registrar divergência — Quando há diferença de quantidade/valor com o pedido — abre a tratativa. - **Mais ações** — Exportar, Anexar — Utilitárias, recolhidas por baixa frequência. **Particularidades:** - **Vínculo com o Pedido** — A nota se liga ao pedido; os itens são conferidos contra o que foi pedido. - **Divergência** — Diferenças entre nota e pedido sobem como divergência, antes da aprovação. - **Conferência 3-way** — Confronta nota × pedido × recebimento; enquanto não baterem, a aprovação fica travada. **Quando usar:** - Conferir a nota fiscal de entrada contra o pedido e aprovar o recebimento. - Tratar divergências de quantidade/valor. **Quando NÃO usar:** - Emitir documento de compra — use Pedido. **Fluxo (cadeia):** Pedido → **Nota Fiscal** **Relacionados:** - **Pedido** — A nota é conferida item a item contra o pedido que a originou. --- ### Documento: Fornecedor _Ficha do fornecedor — forehead com CAPA editável e galeria no badge (logo, contatos, "Visível para o marketplace") + 9 abas de ancoragem (Informações gerais, Contatos, Endereços, Financeiro, Relacionamento, Links e anexos, Funcionalidades, Catálogo do fornecedor, Itens com contrato) sobre seções empilhadas. É uma ficha de entidade, sem o padrão de "locais"._ **Formato:** Ficha de entidade: forehead + **abas ancoradas** + seções numeradas; **sem** o padrão de "locais" (Entrega/Faturamento/Cobrança) dos transacionais. O documento de Fornecedor é uma FICHA de entidade, não um documento transacional: usa template dedicado (forehead + abas de ancoragem + seções numeradas) e NÃO tem o bloco de "locais" (Entrega/Faturamento/Cobrança). Abre em modal a partir da index de Fornecedores e expande para página. **Abas:** Informações gerais · Contatos · Endereços · Financeiro · Relacionamento · Links e anexos · Funcionalidades · Catálogo do fornecedor · Itens com contrato **Abas (detalhe):** - **Informações gerais** — Dados cadastrais em grid (razão social, CNPJ, tipo, página inicial) + "Informações adicionais" (colapsável) + observação — a aba padrão. - **Contatos** — Contato institucional (colapsável) + Outros contatos (tabela com widgets/gráfico; expandir a linha revela os meios de contato; modal de criação via UFormField). - **Endereços** — Tabela de endereços; expandir revela e-mail/WhatsApp/telefone em uma linha (larguras iguais) + link e preview do mapa; modal de criação/edição; um único principal. - **Financeiro** — Condições de pagamento + Condição × Unidade + Contas — cada bloco colapsável com gráfico próprio (vidas apartadas) acima da tabela. - **Relacionamento** — Chips de relacionamento + Locais de atendimento (badge +N com popover). - **Links e anexos** — Chips + tabela de anexos (badge "Fornecedor pode ver"; clicar no nome abre o anexo na drawer). - **Funcionalidades** — Toggles e inputs que ligam/desligam comportamentos — DESABILITADOS no modo leitura (2 colunas). - **Catálogo do fornecedor** — Itens ofertados em tabela + visão de cards (MeCardView SEM seletor de quantidade/carrinho, SEM select/favoritar, sem header/footer, sem badges). - **Itens com contrato** — Tabela com checkbox, Imagem (avatar; + para inserir), Material, Contrato (file-check), Quantidade (stepper) e carrinho por linha (abre a right-area); visão de cards com select/favoritar/carrinho (no modo card: sem mais-ações e sem gráfico). **Status (badge semântico):** - **Ativo** (success) — Fornecedor liberado para transacionar. - **Em homologação** (warning) — Em qualificação/aprovação cadastral antes de liberar. - **Inativo** (neutral) — Sem operação ativa; mantido para histórico. **Ações (zona · quando):** - **Subheader** — Editar — Atualiza os dados cadastrais da ficha. - **Subheader** — Enviar mensagem — Abre o painel de Mensagens com o fornecedor (transversal). - **Mais ações** — Solicitar atualização, Exportar, Desativar — Recolhidas por baixa frequência; Desativar é destrutiva e fica isolada após o divisor. **Particularidades:** - **Sem "locais"** — Diferente dos documentos transacionais, a ficha não tem o bloco Entrega/Faturamento/Cobrança — endereços viram aba. - **Abas de ancoragem** — As abas funcionam como âncoras (scroll-spy) sobre seções numeradas empilhadas no mesmo corpo. - **Funcionalidades por toggle** — Comportamentos do fornecedor são ligados/desligados por toggles, com feedback por toast — desabilitados no modo leitura. - **Capa + galeria no badge** — O forehead tem uma banda de CAPA atrás do card, editável no hover (trocar · remover · reposicionar · salvar/cancelar), e o badge abre uma galeria (capa, girar, ajustar, excluir, reordenar miniaturas; carrossel com mais de uma imagem). Altura do badge fixa. **Quando usar:** - Consultar/editar a ficha completa de um fornecedor. - Gerir contatos, endereços e dados financeiros por unidade. - Ligar/desligar funcionalidades e ver o catálogo do fornecedor. **Quando NÃO usar:** - Listar/filtrar fornecedores — use a [Estrutura de Index › Fornecedores](/design-patterns/padroes/layout/estrutura-de-index/fornecedores). - Negociar preços de uma compra — use Cotação (RFQ). **Relacionados:** - **Produto** — Itens do catálogo do fornecedor. - **Cotação** — Negociações em que o fornecedor é convidado. - **Pedido** — Pedidos firmados com o fornecedor. --- ### Documento: Produto _Ficha do item de catálogo — forehead expandido ⇄ recolhido (galeria, etiquetas de tipo e painel de preço/compra: BRL por unidade + Adicionar ao carrinho) + 7 abas de ancoragem (Especificações, Dados comerciais, Fornecimento & logística, Manuais & documentos, Unidades organizacionais, Contrato, Itens relacionados) sobre seções empilhadas._ **Formato:** Ficha de entidade: forehead + **abas ancoradas** + seções numeradas; **sem** o padrão de "locais" (Entrega/Faturamento/Cobrança) dos transacionais. O documento de Produto é uma FICHA de item do catálogo, não um documento transacional: usa template dedicado (forehead com galeria + preço/compra, abas de ancoragem e seções numeradas) e NÃO tem o bloco de "locais". Abre em modal a partir do Catálogo e expande para página. **Abas:** Especificações · Dados comerciais · Fornecimento & logística · Manuais & documentos · Unidades organizacionais · Contrato · Itens relacionados **Abas (detalhe):** - **Especificações** — Atributos técnicos em grid 4→3→2→1 (item genérico/crítico, tipo de material, aplicação, origem, margem, país, lote, validade/Anvisa) — a aba padrão. - **Dados comerciais** — Campos comerciais (moeda, MRP, estocável, serviço) + seção colapsável Impostos + Exceções de ICMS e Exceção de IPI (colapsáveis XL com cards internos MD, badge Ativo/Inativo). - **Fornecimento & logística** — Embalagem (colapsável, grid) + Fabricantes (colapsável → tabela padrão com busca/gráfico/mais-ações). - **Manuais & documentos** — Tabela de arquivos (Nome→drawer, Usuário, Data, Tamanho, Categoria, Descrição, Revisão) com seleção múltipla, download por linha e "Baixar selecionados". - **Unidades organizacionais** — Texto de contexto + tabela (Código, Nome, Preço orçado para a unidade) — o preço local substitui o global só naquela UO. - **Contrato** — Contratos do item em tabela, com Visão horizontal (tabela normal) e Visão vertical (transposta: campos nas linhas, fornecedor no topo de cada coluna); coluna Quantidade com stepper + carrinho. - **Itens relacionados** — Carrossel (UCarousel) com os mesmos cards do Card View (imagem, badges, preço, fornecedor, tags, stepper + carrinho, favoritar). **Status (badge semântico):** - **Normal** (success) — Item disponível para compra. - **Especial** (info) — Item com condição/tratamento especial. - **Bloqueado** (error) — Indisponível para compra. **Ações (zona · quando):** - **Subheader** — Editar — Atualiza os atributos do item. - **Subheader** — Adicionar ao carrinho — Ação primária do catálogo — leva o item ao carrinho (preço BRL por unidade no forehead). - **Mais ações** — Favoritar, Adicionar à lista, Histórico de preços, Exportar — Recolhidas por baixa frequência. **Particularidades:** - **Sem "locais"** — A ficha não tem Entrega/Faturamento/Cobrança; disponibilidade vira a aba Unidades organizacionais. - **Forehead expandido ⇄ recolhido** — O forehead começa expandido (galeria + detalhes + painel de preços) e colapsa numa barra compacta ao rolar; a barra recolhida fica fixa junto das abas. "Ver mais" volta ao topo expandido. - **Área de compra no forehead** — O forehead traz preço (BRL/EUR por unidade) e Adicionar ao carrinho — a ação primária do catálogo. - **Abas de ancoragem** — Abas como âncoras (scroll-spy) sobre seções numeradas no mesmo corpo. **Quando usar:** - Consultar/editar a ficha de um item do catálogo. - Ver disponibilidade por unidade organizacional e contratos vinculados. - Adicionar o item ao carrinho a partir da ficha. **Quando NÃO usar:** - Listar/filtrar o catálogo — use a [Estrutura de Index › Catálogo](/design-patterns/padroes/layout/estrutura-de-index/catalogo). - Cadastrar uma necessidade de compra — use Requisição. **Relacionados:** - **Fornecedor** — Quem fornece o item. - **Contrato** — Acordos que cobrem o item. - **Requisição** — Itens entram numa requisição de compra. ---