Compositor E-PROC

Opções

Projeto

Tipo de tela

Tipo de Index

Alvo (stack)

Tipo de prompt

Cria a tela inteira do zero a partir do gabarito. Saída: a TELA pronta para visualizar/rodar. É o prompt mais completo.

Entidade ou assunto da tela

Descreva a tela

Estrutura da tela

Header

Subheader

Sidebar

Filter Bar

Filter Search

View

Seu prompt no padrão ME

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de index de transações do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Estrutura de Index
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Header · Subheader (título + CTA primário) · Filter bar · Área de dados (tabela | cards | lista de foreheads).
Componentes obrigatórios: Header (block EletroDS), Subheader (block EletroDS — CTA, busca, filtros), barra de filtros: MeFilterBar se existir no projeto, senão componha com Subheader + MeCriterionInput, TableView · CardView · ListView (blocks EletroDS; na view lista cada registro é um MeForehead empilhado), MeButtonBar (ações + “Mais ações”), UBadge (Nuxt UI — status).
Status como UBadge semântico: Pendente/Em análise/Em aprovação/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error.
Estrutura: Header, Subheader, Sidebar, Filter Bar, Filter Search, View.
Header — seção ativa: Transações.
Header — menus: Dashboard, Transações, Fornecedores, Catálogos, Usuários, Mais.
Header — transversais: Mensagens, Genius, Carrinho.
Header — menu do usuário: Trocar conta, Idioma, Substituição, Ver Perfil, Configurações Gerais, Novidades e Atualizações, Logoff.
Ação principal: Novo documento.
A ação primária é um botão split (divide-se em opções por tipo).
Opções do botão split: Requisição, Cotação, Pedido, Contrato.
Ações da tela: Gerar Pré-Pedido, Gerar Cotação, Cancelar itens (em massa), Excluir selecionados (em massa, abre modal).
Ações "em massa" aplicam-se aos itens selecionados (somem/desabilitam sem seleção); "abre modal" confirma num modal/painel antes de executar; as demais rodam inline com toast (destrutivas sempre confirmam). As que não couberem no subheader colapsam em "Mais ações".
Sidebar — seções: Pendências [itens: Aprovações | Confirmação | Contratos], Itens [itens: Todos | Não recebidos], Transações [itens: Requisições | Cotações | Pedidos | Contratos | Nota Fiscal], Filtros salvos [itens: Em aberto | Vencendo hoje], Meus links [itens: Portal do comprador | Central de ajuda], Meus widgets [itens: Gastos por mês (gráfico)].
Cada seção da sidebar declara seu tipo de exibição (Lista/Checkbox-faceta/Seleção múltipla/Seleção única/Árvore/Card/Slider) — respeite-o ao montar (ex.: faceta = checkbox com contagem; slider = faixa de dois thumbs).
Use exatamente os itens listados em cada seção da sidebar — não misture itens/facetas de outra entidade (ex.: não traga facetas de Fornecedores num index de Transações).
Sidebar — switcher de contexto (TROCA os filtros): {Meus X ↔ Y}.
Filtros rápidos (select): Processo, Período.
Filtros: Status, Tipo.
Filter Search — busca por: número, título, solicitante, fornecedor, categoria, responsável.
Views disponíveis: tabela, lista, preview.
View padrão: tabela.
Colunas: Número, Tipo, Solicitante, Departamento, Criado em, Valor, Status.
Ações por linha: editar, excluir.
⛔ REPRODUZA O PADRÃO EXATO (não reinterprete) — evite estes desvios recorrentes: (1) Subheader: ações em ghost (NÃO outline), CTA primário à ESQUERDA, SEM botão "Opções", COM botão de gráficos (ícone chart-column, modo tabela); (2) UMA filter bar, SEM checkbox líder no modo tabela (só lista/card), NÃO duplicada; (3) Sidebar: campo de busca no topo + tabs-âncora + seções AGRUPADAS (nunca itens soltos) — tamanhos normais (não encolha itens/tree); (4) SEM padding externo na área de dados (tabela/lista/card/preview ocupam a área inteira); (5) Lista = só checkbox / Preview = avatar; (6) Mensagens·Genius·Carrinho ABREM painel à direita (#right-area/drawer); (7) Mobile: MESMA estrutura do desk, com FAB, nav bar com "Mais", e subheader SEM busca/hambúrguer (foram pro header/FAB); (8) fundo BRANCO (bg-default) nas zonas; scrollbar fina padrão ME. Se algum aparecer, você reinterpretou — corrija antes de entregar.
Afordâncias de index: ao clicar numa linha/card, abre o documento em página inteira — o identificador (1ª coluna) é o LINK principal; colunas ordenáveis (chevron no cabeçalho); realce da linha selecionada; paginação com seletor de itens por página no rodapé da área de dados.
Busca e filtros: a Filter Search abre por um ícone de funil (overlay com drill-down Critério › Operador › Valor); a Filter Bar rola horizontalmente por baixo do cluster de ações fixo à direita.
Sidebar de navegação agrupada (ex.: Pendências · Itens · Transações · Filtros salvos · Meus links), com contagens por grupo — distinta das facetas (Segmento/Localização) de Fornecedores/Catálogo.
Faceta de tipo na sidebar (grupo Transações: Requisições/Cotações/Pedidos/Contratos/Nota Fiscal): selecioná-la filtra a lista para só aquele tipo (o número reflete o prefixo — REQ/COT/PED…).
Faixa de widgets/gráficos (view "Meus widgets"): grade no desktop; no mobile empilha em 1 coluna full-width e a tela rola até a tabela (área de dados com altura mínima).
App bar: ao lado do "Mais" ficam os transversais Mensagens · Genius · Carrinho — o Carrinho é item rotulado e um divisor separa "Mais" dos transversais; o subheader inclui a ação "Enviar para o Genius".
Sidebar, Filter Bar e paginação NÃO existem prontas no EletroDS — componha-as (regra EDS-first → Nuxt UI → compor); use os blocks reais (MeTableView/MeFilterBar) onde existirem.
A sidebar fica sempre VISÍVEL quando a zona está ligada — NÃO use v-show/condicional sobre o slot dela (isso reserva uma coluna vazia que espreme a tabela); se precisar recolher, use o colapso nativo do rail (ícone), não escondendo o slot.
View "preview" (master-detail): lista à esquerda + painel de detalhe à direita; o subheader do detalhe traz, ao lado de "Opções", um ícone "abrir em outra janela" (afordância para a página única do documento). Sem seleção, o painel mostra um empty state ("Abrir documento" / "Perguntar ao Genius").
Tabela configurável (persiste por conta): densidade das linhas Compacto 40px · Regular 48px (padrão) · Espaçoso 64px (a célula do cabeçalho é SEMPRE 40px); "linhas por registro" 1/2/3 truncam (line-clamp) e "Ajustar ao texto" cresce sem truncar; "itens por tela" 10/20/50/100 (só na tabela — lista/card usam scroll infinito). Rodapé "X–Y de Z registros" (PT-BR) + paginação, 56px; listagens com menos de 10 registros NÃO exibem rodapé.
Cabeçalho de coluna = botão (ícone de ordenação à esquerda, sem chevron) e arrastável para reordenar; clicar abre menu: Ordenar A→Z/Z→A · Fixar/Desafixar coluna · Ocultar coluna · [só em coluna agregável] Criar gráfico / Criar métrica. FIXAR = REORDENAR (a coluna vai para o início, logo após o checkbox, agrupada às demais fixadas) — NÃO é sticky-on-scroll nem o column-pinning nativo do UTable. Checkbox é sempre a 1ª coluna.
"Mais ações" (⋮) da filter bar SÓ na tabela: Exportar · Configurações da tabela (Editar colunas = modal transfer-list MeDualList inativas↔ativas com busca/mover/arrastar-para-ordenar + Restaurar padrão) · Densidade · Linhas por registro · Paginação · Itens por tela.
Filter Bar (peça custom, ainda não é block do EDS): altura 48px; esquerda→direita = checkbox líder (lista/card) · chip "N selecionados" (toggle: desabilita os filtros e expõe Salvar lista / Limpar seleção) · filtros de contexto (escopo/período, radios cor primary) · critérios MeCriterionInput (campo·operador·valor, removíveis, rolam no wheel) · grupo [+][salvar (só com dirty)][limpar (danger)] · ⋮. No mobile colapsa num funil (bottom-sheet) com ponto vermelho quando há filtro ativo.
Widgets/gráficos: nascem da agregação de uma coluna (menu do cabeçalho) ou do Dashboard; faixa "Meus widgets" colapsável no topo do conteúdo (só no modo Tabela), com contagem + Restaurar padrão + Limpar todos; grade auto-ajustável de ~4 por linha; ao abrir, a tabela vira "hug" e o corpo rola junto. Cores por série chart-1…chart-10 (Blue/Orange/Teal/Pink/Yellow/Purple/Red/Cyan/Lime/Slate 600) — NUNCA as cores semânticas de status.
Sidebar (peça custom): moldura fixa na ordem busca → tabs 1 (pill = switcher de contexto, quando houver) → tabs 2 (link = âncora das seções) → collapsibles. Tipos de item: link/ativo (azul) · árvore/pasta (contagem) · faceta-checkbox (count) · radio de período (+ date) · slider de métrica (USlider range) · switcher (troca universo E filtros) · box especial (endereço "Destino de compra" = 1º collapsible do Catálogo; banner promo acima da busca) · Favoritos (estrela sólida amarela) · "Ver mais".
Mobile: app bar vira BRANCO (bg-default) com logo ME azul — hambúrguer→drawer da sidebar (w-80), busca→painel, transversais→drawer à direita, avatar→drawer inferior; CTA primário vira FAB acima da nav bar (drawer inferior "Novo documento"); nav bar inferior AZUL com as funções + "Mais" (drawer). Alturas: header 64px · subheader 56px · nav bar 56px. No Preview mobile, tocar num registro abre o documento em TELA CHEIA.

LAYOUT (block MeLayout — preencha só os slots usados)
- #header → Header = app bar do ME: barra AZUL full-width (cor primária = me-brand; NÃO o verde default do Nuxt UI) com a marca "me." em branco à esquerda, navegação horizontal no topo, e à direita os transversais (Mensagens, Genius, Carrinho) + avatar. NÃO renderize header neutro/claro nem mova a marca para uma sidebar.
- #toolbar → Subheader: a ação primária (botão split azul) fica à ESQUERDA; em seguida até 3 ações da tabela + "Mais ações" (overflow). À direita: Filter Search (busca) + toggle de gráficos + troca de visão (tabela/cards/lista).
- #left-area → sidebar de navegação/filtros (Pendências/Itens/Filtros salvos). Quando há switcher de contexto (ex.: Meus fornecedores ↔ Fornecedores ME), ele TROCA os filtros/facetas da sidebar — facetas: checkbox com contagem, árvore País › Estado › Cidade e "Ver mais".
- #filter-bar → Filter Bar: filtros rápidos + critérios no modelo campo · operador · valor (MeCriterionInput — peças encostadas, removíveis), NÃO Selects soltos; ao lado, a Filter Search (busca livre que abre um command/overlay com drill critério → operador → valor).
- #analytics → área de gráficos — visível só pelos gatilhos (toggle da toolbar OU gráfico no header de uma coluna) e com botão de fechar.
- #default → á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 aplicados), NÃO o rodapé padrão "N de M linha(s) selecionada(s)".

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Status sempre como badge semântico.
Ações por linha no menu de mais ações.
Seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto ativa).
CTA primário "Novo X" (cadastro de entidade) vs "Adicionar X" (item existente em lista).
Switcher de contexto na sidebar (quando houver) TROCA o conjunto de filtros/facetas — não é um filtro adicional..

PRONTO QUANDO
- A seleção de linhas habilita/desabilita as ações em lote (sem seleção = desabilitadas).
- A área de gráficos só aparece pelos gatilhos (toggle da toolbar ou gráfico no header de coluna) e tem como fechar.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Os trechos entre { } são os pontos que você altera — preencha os campos ao lado ou edite o prompt direto aqui, a qualquer momento. Cole em Claude, Cursor, v0…

Pré-visualização 1:1 — como a IA deve montar

EletroDS + Nuxt

Dashboard

Transações

Fornecedores

Catálogos

Usuários

Mais

Novo documento

Busque neste menu

Aprovações

Confirmação

Contratos

Todos

Não recebidos

Requisições

Cotações

Pedidos

Contratos

Nota Fiscal

Em aberto

Vencendo hoje

Portal do comprador

Central de ajuda

Gastos por mês

JanFevMarAbrMaiJun

REQ-0041RequisiçãoMarina LopesEngenharia12/03/2026R$ 12.480,00

Em análise

COT-0042CotaçãoAna DuarteCompras10/03/2026R$ 48.900,00

Em andamento

PED-0043PedidoCarlos PintoTI22/01/2026R$ 7.230,50

Aprovado

CTR-0044ContratoJúlia MendesFacilities05/04/2026R$ 156.000,00

Rascunho

PPD-0045Pré-PedidoPedro MartinsMarketing15/02/2026R$ 3.120,00

Aguardando

LEI-0046LeilãoCarla FerreiraLogística30/03/2026R$ 89.400,00

Concluído

COT-0047CotaçãoAna DuarteCompras10/03/2026R$ 48.900,00

Em andamento

PED-0048PedidoCarlos PintoTI22/01/2026R$ 7.230,50

Aprovado

CTR-0049ContratoJúlia MendesFacilities05/04/2026R$ 156.000,00

Rascunho

PPD-0050Pré-PedidoPedro MartinsMarketing15/02/2026R$ 3.120,00

Aguardando

LEI-0051LeilãoCarla FerreiraLogística30/03/2026R$ 89.400,00

Concluído

REQ-0052RequisiçãoMarina LopesEngenharia12/03/2026R$ 12.480,00

Em análise

Exibindo 1–12 de 128

Veja tambémModelos de prompt Gabaritos Glossário