Geral
Anatomia universal das telas de documento do ME — forehead, abas e corpo; ações por status; CRUD e containers; responsividade e feedback. O que muda entre os tipos vive na página de cada documento.
O ponto de partida: a tela real de um documento (ex.: Pedido) — Header, Subheader com ações por status, Forehead, abas (Informações gerais · Históricos · Itens) e corpo. As seções abaixo detalham o chassi.
Boas Práticas
Esta página cobre o documento em geral. Os detalhes de cada tipo (abas, status, ações próprias) ficam na página de cada um — ver Variantes.
Copy e rótulos (Novo · Adicionar · Gerar; verbo + entidade) seguem a régua única em Foundations › Voz e conteúdo.
Anatomia
O chassi de documento tem quatro zonas verticais. A ordem é fixa — nunca reordene as zonas.
Breadcrumb
Orientação de contexto — mostra de onde o documento vem e permite navegar de volta.
Componentes
- BreadcrumbItem (módulo/índice)
- BreadcrumbItem (número ou nome do documento)
Regras
- Máximo 3 níveis: Módulo > Index > Documento atual
- Último item é o identificador do documento (não clicável)
- Usar número do documento quando disponível (ex: "Pedido #12.345")
Forehead
Identidade e status do documento — título, status badge, metadados e ações principais.
Componentes
- Título / número do documento
- Status badge
- Metadados (data, responsável, prazo)
- Ações primária e secundárias
Regras
- Status badge sempre visível com cor semântica
- Ação primária contextual ao status atual (muda conforme o fluxo avança)
- Ações destrutivas isoladas das demais — visualmente separadas
- Máximo 2 ações secundárias visíveis; demais agrupadas em "Mais ações"
Abas de navegação
Seções internas do documento — organiza conteúdo em domínios relacionados.
Componentes
- Tab "Documento" (obrigatória, primeira)
- Tabs secundárias (Mapa, Histórico, Anexos)
- Badge de contagem (opcional)
Regras
- "Documento" é sempre a primeira aba e o padrão ao abrir
- Usar abas apenas quando o documento tem múltiplas seções relevantes
- Máximo 6 abas visíveis; demais em menu overflow
- Badge de contagem nas abas somente para dados dinâmicos (ex: "Histórico 12")
Corpo do documento
Conteúdo principal — tabela de itens, seções de informação e campos de leitura.
Componentes
- Toolbar da tabela de itens
- Tabela de itens
- Seções de informação (colapsáveis)
- Campos de leitura label + valor
Regras
- Tabela de itens (quando presente) é o elemento dominante do corpo
- Toolbar da tabela fica acima dela com "Adicionar item" e bulk actions
- Seções complementares (totais, condições, obs.) ficam abaixo da tabela
- Campos em modo leitura: sem bordas de input, somente label + valor
Modal × página única
A mesma anatomia (Forehead + abas + corpo) vive em duas molduras — muda só a moldura em volta:
Modal (aberto pela index)
Tem a barra de chrome no topo: breadcrumb + abrir em outra janela + fechar (X). No mobile vira modal-sheet (sobe quase até o topo, com o header da index atrás); o ícone expandir leva ao formato página.
Página única (rota própria)
Não tem a barra de chrome — a navegação é pelo header/sidebar do app. Ao expandir o modal, é esse formato que aparece (header do app atrás, sem o chrome).
Regra: o breadcrumb + abrir-em-janela + X é exclusivo do modal; nunca aparece na página única.
Forehead & ações
O forehead é a zona de maior densidade. Ação primária e status badge devem estar sincronizados — o que o usuário pode fazer depende do estado atual do documento. Dirija as ações por uma máquina de estados (status → ações válidas), não por uma toolbar fixa; a ação destrutiva sempre passa por modal de confirmação.
Ações por status
A cada estado o documento expõe no máximo uma ação primária (a que faz o fluxo avançar); o resto é secundário ou destrutivo. Onde não há primária, o estado é só de leitura/acompanhamento.
| Status | Ação primária | Secundárias | Destrutiva |
|---|---|---|---|
| Rascunho | Enviar / Submeter | DuplicarImprimir | Excluir |
| Aguardando aprovação | Aprovar | RecusarImprimir | — |
| Aprovado | Emitir / Finalizar | DuplicarImprimir | — |
| Em andamento | — | AcompanharImprimir | — |
| Encerrado / Finalizado | — | DuplicarExportarImprimir | — |
| Cancelado | — | DuplicarImprimir | — |
Hierarquia de ações
Ações primárias
Ação esperada a partir da leitura — geralmente Editar ou Avançar fluxo (ex.: Enviar para aprovação).
Ações secundárias
Copiar, exportar, imprimir ou abrir em outro módulo.
Ações destrutivas
Cancelar documento, excluir rascunho — isoladas e com confirmação.
Corpo — conteúdo e interações
O corpo é de leitura, mas parte do conteúdo é vivo: dá acesso a mais contexto sem tirar a pessoa do documento. A regra é sempre a mesma — o detalhe abre sobre a tela (drawer), nunca navegando para fora. Explorar sem se perder.
Campos relacionais abrem o detalhe no lugar
Quando um campo aponta para outra entidade — Fornecedor, comprador, centro de custo — ele é clicável: fica neutro em repouso e azul no hover (o azul é o sinal universal de "isto leva a algo"). O clique abre um menu curto (Ver detalhes · Enviar para o Genius · Enviar mensagem); "Ver detalhes" desliza um drawer com o resumo da entidade — dados cadastrais, qualificação, contato — e as mesmas ações à mão. A pessoa investiga e volta ao documento sem perder o lugar. Ver Transversais › Genius e Mensagens.
O campo Fornecedor fica azul por apontar para outra entidade; o clique desliza um drawer com o resumo e as ações — sem sair do documento.
Anexos: ver antes de baixar
Anexo não força download. O clique abre um drawer de pré-visualização com o documento e um botão Download à mão — quem só quer conferir não precisa baixar (menos fricção, menos arquivo solto na máquina). O preview mostra o tipo do arquivo (PDF, planilha) para a pessoa reconhecer o que vai abrir antes de agir. Ver Drawer.
A área de anexos tem duas formas, conforme o que se guarda: Arquivos — anexos individuais de tipos variados (proposta, cotação…); cada item é um arquivo, exibido em cards ou chips e baixável direto. Grupos — um agrupador de anexos do mesmo tipo (ex.: "Notas fiscais"); o item é uma pasta que abre um drawer para inserir novos anexos e ver os já importados — não baixa direto. Use Grupos quando o mesmo tipo se repete muito (evita uma lista longa e mistura de tipos); use Arquivos para um punhado de anexos avulsos. A forma segue o volume: poucos e variados = lista; muitos do mesmo tipo = grupo. Um grupo pode viver dentro de um Collapsible "Anexos" da seção.
O clique no anexo abre o preview com Download à mão — conferir sem precisar baixar.
Listas internas são uma index reduzida
Seções de itens — itens de um pedido, linhas de uma cotação — se comportam como uma index dentro do documento: colunas, ordenação, busca e seleção em massa. Marcar linhas troca a barra por "X selecionados" (a badge é um toggle que filtra para os marcados) e expõe as ações da seleção — o mesmo modelo de Ações em massa, para ninguém reaprender o gesto dentro do documento. Consistência: aprende uma vez, repete em qualquer lugar.
Marcar linhas troca a barra por 'X selecionados' (toggle) e expõe as ações da seleção — o mesmo gesto da index, dentro do documento.
CRUD
O documento é o coração do CRUD do ME. A leitura é separada da edição (dados em label + valor, edição por ação explícita) e o container reflete a profundidade do conteúdo.
Containers — onde o documento abre
Modal
Leitura resumida ou primeiro contato com o documento.
- Preview rápido
- Documentos com poucas seções
- Contexto mantido na listagem por trás
Drawer
Leitura complementar sem abandonar a tela anterior.
- Detalhe lateral
- Histórico ou anexos secundários
- Consulta rápida durante outro fluxo
Página dedicada
Leitura detalhada com múltiplas seções, tabelas internas ou histórico extenso.
- Documentos de transação completos
- Cadastros com muitas seções
- Auditoria e revisão profunda
CRUD por tipo — diferenças de modo
A mesma operação muda de modo conforme a natureza do documento: simples (full-page, foco na leitura) ou de processo (modal + rail de fases, negociação ao vivo). O "delete" do CRUD quase nunca apaga — ele cancela, encerra ou recusa, sempre com trilha.
| Documento | Modo (Read) | Create | Update | Encerramento |
|---|---|---|---|---|
| Requisição | Simples · full-page | Nasce de uma necessidade interna de compra | Editável enquanto em rascunho/aprovação; dá origem a pré-pedido/pedido | Cancelar antes de gerar o pedido |
| Pré-pedido | Simples · full-page enxuta | Gerado a partir de requisição ou cotação | Editável em aprovação; consolida itens antes do pedido | Cancelar (não vira pedido) |
| Pedido | Simples · full-page (foco leitura) | Firmado a partir de pré-pedido/requisição e enviado ao fornecedor | Edição restrita; acompanhamento e aprovação por item | Cancelar pedido (com trilha) |
| Cotação (RFQ) | Processo · modal + rail de fases | Abre uma negociação (RFX) com fornecedores | Rodadas de negociação; alterna Documento·Mapa·Otimização | Encerrar negociação |
| Leilão | Processo · modal + rail (janela de tempo) | Abre uma disputa de preços por lances | Acompanhamento de lances ao vivo durante a janela | Encerrar leilão |
| Contrato | Simples · full-page (vigência/saldo) | Acordo de fornecimento com vigência e cláusulas | Aditivos e renovação; consome saldo ao longo da vigência | Encerrar contrato |
| Nota Fiscal | Simples · full-page (entrada fiscal) | Entrada fiscal vinculada a um pedido | Conferência e aprovação dos itens | Recusar a nota |
Estados da interface
- Esconder ações de edição quando o usuário não tiver permissão
- Desabilitar ações com tooltip explicando a restrição quando a visibilidade ajudar
- Exibir banner informativo quando o documento estiver bloqueado
Variantes
Os tipos de documento do ME e como cada um aplica o chassi. O detalhamento (template 1:1, abas, status e ações) está na página de cada tipo.
Pedido de compra
Ver páginaForehead
Status de aprovação, número, comprador, data de criação
Abas
Documento · Mapa · Histórico · Anexos
Corpo
Tabela de itens + seções de condições de pagamento e observações
Nota: Ação primária muda com o status: "Enviar" → "Aprovar" → "Emitir".
Pré-pedido
Ver páginaForehead
Status, número, comprador, data e prazo de validade
Abas
Documento · Histórico
Corpo
Tabela de itens simplificada + seção de observações
Nota: Estrutura mais simples — sem fluxo de aprovação elaborado.
Requisição
Ver páginaForehead
Status, número, solicitante, setor, data
Abas
Documento · Pedidos gerados · Histórico
Corpo
Tabela de itens solicitados + status de atendimento por item
Nota: Tab "Pedidos gerados" exibe os pedidos criados a partir desta requisição.
Cotação
Ver páginaForehead
Status, número, fornecedor, prazo de validade da proposta
Abas
Itens · Condições · Histórico
Corpo
Tabela de itens com preços e quantidades + seção de condições comerciais
Nota: Prazo de validade em destaque no forehead (badge de countdown quando próximo).
Contrato
Ver páginaForehead
Status, número, fornecedor, vigência (início e fim)
Abas
Dados · Cláusulas · Aditivos · Histórico · Anexos
Corpo
Seções de informação sem tabela de itens dominante
Nota: Vigência em destaque no forehead. Alerta visual quando próximo ao vencimento.
Leilão
Ver páginaForehead
Status, número do leilão, countdown até encerramento
Abas
Lotes · Lances · Resultado · Histórico
Corpo
Tabela de lotes + área de lances em tempo real
Nota: Countdown no forehead é componente crítico — atualiza em tempo real.
Nota Fiscal
Ver páginaForehead
Status, número, emitente (NIF/CNPJ), data de emissão e pedido vinculado
Abas
Informações gerais · Itens · Histórico
Corpo
Itens conferidos contra o pedido + tratativa de divergências
Nota: Documento fiscal de entrada — vincula-se ao Pedido; divergências sobem antes da aprovação.
Responsividade
O chassi de documento adapta cada zona ao breakpoint — o forehead empilha, as ações colapsam em "Mais ações", as abas viram scroll e o rail de fases recolhe. As transformações por zona seguem a régua única em Foundations › Breakpoints; abaixo, a aplicação específica do documento.
Mobile
< 640px
Forehead
Empilha em coluna; a ação primária fica visível e as demais colapsam em "Mais ações".
Navegação
Abas viram scroll horizontal (ou menu); "Documento" continua o padrão.
Corpo
Uma coluna; tabelas de itens viram cards/lista para caber.
Processo (rail)
O rail de Fases recolhe atrás de um toggle (documentos de processo).
Tablet
640 – 1024px
Forehead
Duas colunas (identidade à esquerda, status/ações à direita).
Navegação
Abas visíveis; excedentes recolhem em overflow.
Corpo
Grades de 2 colunas; tabela de itens com scroll horizontal.
Processo (rail)
Rail de Fases pode recolher conforme a largura.
Desktop
> 1024px
Forehead
Layout completo: identidade, metadados, status e barra de ações.
Navegação
Todas as abas visíveis.
Corpo
Multi-coluna; tabelas e seções colapsáveis lado a lado.
Processo (rail)
Rail de Fases fixo à esquerda (documentos de processo).
Feedback
Como o documento comunica cada estágio — carregamento, sucesso, erro e restrição de permissão. Ações reversíveis usam toast com Desfazer; destrutivas exigem modal com confirmação.
Carregamento
- Spinner ou skeleton no corpo do documento
- Header pode exibir placeholder para título e status
- Não bloquear navegação de volta durante o loading
Sucesso / Preenchido
- Dados renderizados em label + valor
- Status badge visível no header
- Ações contextuais habilitadas conforme permissão
Erro / Indisponível
- UAlert ou mensagem inline explicando o problema
- Opção de tentar novamente quando aplicável
- Nunca tela em branco sem orientação
Sem permissão
- Conteúdo parcial ou mensagem de restrição
- Ações de edição ocultas ou desabilitadas com explicação
- Consistência com outras entidades do mesmo tipo