Quero aplicar ao aplicativo existente a interface descrita abaixo, reproduzindo fielmente o modelo visual “Pão & Prosa — Barra inferior” da imagem de referência.

O nome do produto será IDR Flow.

Leia todo este briefing antes de implementar. Primeiro examine o projeto atual, seus componentes, funcionalidades, identidade visual, dados e integrações. Depois aplique o novo visual sobre a estrutura real do aplicativo.

O objetivo é manter a composição da referência, adaptando sua identidade para a IDR. Preserve especialmente as vendas avulsas, as vendas por comanda e todos os recursos que já funcionam.

**1. Direção visual e alterações autorizadas**

Reproduza a organização do modelo “Pão & Prosa”, incluindo:

- Cabeçalho horizontal superior.
- Painel do pedido à esquerda.
- Catálogo de produtos à direita.
- Banner de atendimento acima do catálogo.
- Busca, categorias e produtos nessa sequência.
- Menu principal horizontal na parte inferior.
- Cards arredondados, bordas discretas, espaçamento confortável e ícones delicados.
- As seis abas: PDV, Comandas, Produtos, Resumo Caixa, Histórico e Ajustes.

As adaptações solicitadas são:

- Substituir a paleta roxa pela identidade visual da IDR.
- Substituir a marca “Pão & Prosa” pela composição com a logo original da IDR e a palavra “Flow”.
- Ampliar discretamente o painel “O pedido da vez”.
- Substituir o link pequeno “Trocar” por um botão evidente chamado “Trocar comanda”.
- Acomodar explicitamente a venda avulsa, que já existe no aplicativo.

Mantenha a posição dos elementos. O pedido permanece à esquerda, os produtos à direita e o menu embaixo. Não introduza uma barra lateral ou um menu principal no topo.

**2. Identidade visual IDR e marca IDR Flow**

Localize no projeto os arquivos originais da logo da IDR e as cores já utilizadas pela marca.

A direção cromática é laranja, preto/grafite e branco, com cinzas neutros de apoio. Os tons oficiais existentes no projeto devem prevalecer. Não invente um novo tom institucional se ele já estiver definido.

Distribua as cores desta forma:

- Fundo geral claro em cinza muito suave.
- Cards e campos em branco ou no tom claro oficial do sistema.
- Textos principais em preto/grafite.
- Textos secundários em cinza com contraste suficiente.
- Laranja IDR nos botões principais, seleções e pontos de destaque.
- Variações claras do laranja em fundos de seleção e estados suaves.
- Menu inferior em preto/grafite.
- Item ativo do menu com destaque laranja e texto de alto contraste.
- Bordas finas e discretas, sem contornar todos os elementos com laranja.

Remova os tons roxos e lilases da referência.

Caso o aplicativo já tenha tema escuro, mantenha exatamente a mesma estrutura e adapte as superfícies para grafite, preservando o laranja IDR e a legibilidade.

No canto superior esquerdo, monte uma assinatura visual elegante:

[LOGO ORIGINAL DA IDR] Flow

A palavra “Flow” deve ficar imediatamente à direita da logo, formando uma única marca visual. Se a logo já contém “IDR”, não escreva “IDR” novamente ao lado dela.

Especificações da composição:

- Logo original preservada, sem deformação, recorte ou redesenho.
- Altura visual aproximada da logo entre 40 e 46 px no desktop, respeitando suas proporções.
- Palavra “Flow” em tipografia moderna, limpa e levemente arredondada.
- Preferência por DM Sans, utilizada na referência, ou equivalente já disponível no projeto.
- “Flow” com aproximadamente 30–36 px e peso 700–800.
- Espaço de aproximadamente 8–12 px entre a logo e a palavra.
- Alinhamento óptico cuidadoso entre as duas partes.
- Cor de “Flow” em grafite no tema claro e clara no tema escuro, harmonizando com a logo original.

A marca deve ficar visível e ter presença. Não a substitua por um ícone genérico de café ou padaria.

O nome comercial do estabelecimento deve ser uma informação separada. Alterar o nome da padaria nos ajustes não deve substituir a marca fixa IDR Flow.

**3. Estrutura geral da aplicação**

Use a referência como guia das proporções:

- Cabeçalho com cerca de 84 px de altura.
- Área principal com aproximadamente 20 px de margem interna.
- Distância de aproximadamente 20 px entre o painel do pedido e o catálogo.
- Bordas arredondadas entre 18 e 22 px nos principais blocos.
- Sombras suaves ou quase imperceptíveis.
- Elementos alinhados e sem excesso de divisórias.

No cabeçalho:

- Logo IDR + Flow à esquerda.
- Identificação do caixa à direita, em uma etiqueta discreta.
- Avatar ou iniciais do operador.
- Nome do operador e indicação de atendimento abaixo.
- Utilizar informações reais da sessão.

O menu inferior ocupa a largura disponível, com margens laterais de aproximadamente 20 px e espaço abaixo. Ele deve fazer parte da estrutura da aplicação e nunca cobrir produtos, totais ou botões.

Não replique a altura artificial da prévia. Ajuste a aplicação à janela real, com rolagem organizada quando necessária e acesso ao menu inferior.

**4. Menu principal inferior**

Manter exatamente esta sequência:

PDV | Comandas | Produtos | Resumo Caixa | Histórico | Ajustes

Formato:

- Uma única barra horizontal arredondada no desktop.
- Fundo preto/grafite.
- Raio aproximado de 22 px no contorno da barra.
- Seis áreas de navegação de largura equivalente.
- Ícone acima do texto em cada item.
- Ícones consistentes, preferencialmente Lucide ou a biblioteca já existente.
- Texto sempre visível.
- Área clicável confortável, equivalente aos aproximadamente 67 px de altura dos itens da referência.
- Item selecionado com uma superfície arredondada de destaque dentro da barra.
- Estado ativo identificável por fundo e texto, sem depender apenas da cor do ícone.

Ícones sugeridos, equivalentes aos da referência:

- PDV: loja ou balcão.
- Comandas: ticket.
- Produtos: caixa ou embalagem.
- Resumo Caixa: carteira.
- Histórico: relógio com seta.
- Ajustes: controles ou engrenagem.

A navegação deve manter o atendimento em andamento. Abrir Produtos, Histórico ou Ajustes não pode zerar uma venda ou perder os itens de uma comanda.

**5. Aba PDV — composição principal**

No desktop, use duas colunas:

- Esquerda: painel “O pedido da vez”.
- Direita: banner, busca, categorias e catálogo.

Na referência, o painel esquerdo tem aproximadamente 300 px. Aumente para cerca de 340 px em telas com espaço suficiente. É um aumento moderado, de aproximadamente 13%.

A coluna direita deve ocupar o restante da largura. Não aumente o painel a ponto de prejudicar a leitura dos produtos.

O painel do pedido deve continuar sendo um card único, com fundo claro, borda discreta, cantos arredondados de aproximadamente 18 px e espaçamento interno de cerca de 22 px.

**6. Painel “O pedido da vez”**

Organize o conteúdo de cima para baixo nesta ordem:

1. Texto pequeno em caixa alta: “O PEDIDO DA VEZ”.
2. Seletor do tipo de atendimento: “Venda avulsa” e “Comanda”.
3. Identificação do atendimento ativo.
4. Botão “Trocar comanda”, quando estiver no modo Comanda.
5. Informações de mesa, consumo ou retirada, quando aplicáveis.
6. Quantidade de produtos do atendimento.
7. Identificação do cliente, quando existente.
8. Lista dos itens.
9. Ações “Desconto” e “Observação”.
10. Subtotal e descontos aplicados.
11. Total a pagar.
12. Formas de pagamento.
13. Ação “Dividir pagamento”.
14. Botão principal “Finalizar venda”.

O seletor “Venda avulsa / Comanda” deve ser compacto e integrado ao topo do card. Ele é um controle do atendimento, não uma nova aba do menu principal.

Na identificação do atendimento:

- Modo Comanda: mostrar “Comanda 012”, ou o identificador real.
- Modo Venda avulsa: mostrar “Venda avulsa”, acompanhado do número real da venda se o sistema possuir esse identificador.
- Não apresentar uma venda avulsa como uma comanda fictícia.
- Não exigir mesa, número de comanda ou cadastro de cliente para uma venda avulsa se o sistema atual permite vender sem essas informações.

Aumente discretamente a legibilidade deste painel:

- Título do atendimento em torno de 24 px.
- Nomes e valores dos itens em torno de 13–14 px.
- Total final em torno de 28–30 px.
- Controles de quantidade confortáveis para operação.

Cada item deve manter a composição da referência:

- Nome do produto à esquerda.
- Quantidade e preço unitário abaixo.
- Valor total da linha à direita.
- Controles de diminuir, quantidade atual e aumentar agrupados à direita.
- Separação sutil entre os itens.

Produtos por peso devem mostrar a unidade e a quantidade corretamente. Preserve as regras reais de pesagem, preço, casas decimais e arredondamento do aplicativo.

**7. Botão “Trocar comanda”**

Substitua o pequeno texto sublinhado “Trocar” por um botão com o texto completo:

Trocar comanda

Ele deve ficar no topo do painel, imediatamente próximo da identificação da comanda, sem ficar escondido entre os itens.

Para acomodar o texto com conforto no painel ampliado, pode ocupar uma linha própria logo abaixo do título da comanda.

Características:

- Altura aproximada de 40–44 px.
- Texto de 13–14 px com peso 600 ou 700.
- Ícone de troca ou tickets à esquerda.
- Fundo laranja claro e borda laranja IDR, com contraste adequado.
- Cantos arredondados.
- Área clicável evidente.
- O botão “Finalizar venda” continua sendo a ação principal de preenchimento mais forte.

Ao clicar, abrir o seletor de comandas. Cada opção deve mostrar número, situação, mesa/cliente quando disponíveis e valor atual.

Trocar comanda significa mudar o atendimento selecionado. Não significa transferir produtos, unir pedidos ou encerrar a comanda anterior.

No modo Venda avulsa, use a opção “Comanda” do seletor para abrir a seleção correspondente. Preserve o fluxo atual caso o aplicativo já tenha uma ação específica para isso.

**8. Vendas avulsas e vendas por comanda**

Este requisito é obrigatório: o aplicativo já possui vendas avulsas fora de comandas.

Mantenha os dois fluxos completos.

Venda avulsa:

- Permite iniciar um atendimento direto.
- Permite buscar e adicionar produtos normalmente.
- Permite ajustar quantidades, aplicar descontos e registrar observações conforme as regras existentes.
- Permite receber e finalizar sem selecionar comanda.
- Deve aparecer no Histórico identificada como venda avulsa.
- Deve compor corretamente os indicadores do Resumo Caixa.

Venda por comanda:

- Recupera os itens e informações da comanda selecionada.
- Permite continuar o atendimento.
- Mantém cada comanda independente.
- Respeita as regras atuais de fechamento, pagamento e liberação.

Ao alternar entre os modos, preserve os dados pendentes conforme o comportamento atual do sistema. Não descarte silenciosamente uma venda avulsa nem misture seus itens com os de uma comanda.

Mantenha eventuais avisos existentes para sair de um atendimento não salvo ou não finalizado.

A seleção inicial deve respeitar o contexto real do aplicativo. Não obrigue toda operação a começar na “Comanda 012” usada na referência.

**9. Catálogo à direita do PDV**

Reproduza a sequência visual da referência.

Primeiro, um banner horizontal arredondado:

- Aproximadamente 20 px de espaçamento interno.
- Raio de aproximadamente 18 px.
- Fundo de destaque adaptado ao laranja IDR.
- Pequena chamada superior: “PRONTO PARA ATENDER”.
- Título: “O seu balcão, leve.”
- Texto de apoio: “Um café, uma pausa, uma boa conversa.”
- Título em torno de 29 px, com peso 700.
- Textos com contraste adequado sobre o fundo.

Em seguida, o campo de busca:

- Ocupa a largura do catálogo.
- Fundo claro.
- Borda fina.
- Cantos arredondados de aproximadamente 10 px.
- Ícone de lupa à esquerda.
- Texto “Buscar produto ou código…”.
- Ícone relacionado a leitura de código à direita, conectado ao comportamento existente quando houver essa funcionalidade.

Preserve a busca real do sistema, inclusive código, descrição, EAN e leitor, quando já suportados.

Depois, as categorias:

- Botões compactos, organizados horizontalmente.
- Na referência aparecem Todos, Pães, Salgados, Doces e Bebidas.
- No aplicativo real, utilizar as categorias reais cadastradas.
- Categoria ativa destacada em laranja.
- Categorias inativas em superfície clara com borda discreta.

Por último, a grade de produtos:

- Três colunas no desktop com espaço suficiente.
- Duas colunas em larguras intermediárias.
- Espaçamento entre cards de aproximadamente 11–12 px.
- Cards arredondados, seguindo a aparência suave da referência.
- Área visual superior com aproximadamente 98 px de altura.
- Imagem ou representação do produto centralizada.
- Fundo suave nessa área visual.
- Nome do produto abaixo, alinhado à esquerda.
- Descrição curta ou unidade de venda abaixo do nome.
- Preço em destaque na parte inferior esquerda.
- Botão circular “+” na parte inferior direita.

Utilize as imagens reais já existentes. Quando não houver imagem, use um fallback consistente com a identidade visual. Os desenhos de alimentos da referência são ilustrativos e não devem substituir imagens reais cadastradas.

Clique no produto e botão “+” devem seguir a mesma regra de inclusão do aplicativo. Para produtos pesáveis, respeite o fluxo de peso existente.

**10. Pagamento**

Dentro do painel do pedido, mantenha as quatro opções visuais em uma grade de duas colunas:

Pix | Crédito
Débito | Dinheiro

Cada opção possui ícone e texto, borda arredondada e estado selecionado evidente.

Abaixo, mantenha:

- Ação “Dividir pagamento”, acompanhada de ícone.
- Botão “Finalizar venda” ocupando toda a largura.
- Ícone de seta à direita do botão principal.
- Altura mínima aproximada de 48 px no botão principal.

A janela de pagamento deve seguir a mesma identidade, contendo:

- Identificação da venda avulsa ou da comanda.
- Total em destaque.
- Forma de pagamento selecionada.
- Campos específicos da forma escolhida.
- Valor recebido e troco quando for dinheiro.
- Valores e saldo restante quando houver divisão do pagamento.
- Confirmação e tratamento dos erros reais.

Preserve as integrações existentes de Pix, TEF, cartões, impressão e emissão fiscal, caso existam. Não crie QR Code fictício nem apresente uma cobrança como aprovada sem a confirmação exigida pelo sistema.

Na aplicação real, não copie os textos “Simular pagamento” ou “Venda simulada concluída” utilizados na prévia.

**11. Aba Comandas**

Ao abrir Comandas, substitua a área central do PDV pelo conteúdo da aba. Preserve o cabeçalho e o menu inferior.

Na parte superior:

- Identificação discreta do estabelecimento/caixa.
- Título “Comandas”.
- Texto de apoio explicando a seleção de atendimento.
- Botão “Voltar ao PDV” à direita.

Abaixo:

- Quantidade de comandas em atendimento.
- Quantidade de comandas livres.
- Orientação discreta de que selecionar uma comanda abre seu atendimento no PDV.

A grade deve ter três colunas em telas amplas, duas em larguras menores e adaptação para celular.

Cada card de comanda deve ter:

- Fundo claro, borda fina e raio aproximado de 15 px.
- Selo de situação na parte superior.
- Número da comanda grande, próximo de 39 px no desktop.
- Nome do cliente, quando houver.
- Mesa ou tipo de atendimento.
- Divisória horizontal sutil.
- Total no rodapé do card, à esquerda.
- Ícone de seta à direita.
- Card inteiro clicável.

A comanda selecionada recebe uma borda mais evidente na cor IDR.

Preserve os estados reais existentes. Os estados “Livre” e “Em atendimento” da referência não autorizam remover outros estados que o aplicativo já possua.

A lista de comandas não deve transformar vendas avulsas em comandas.

**12. Aba Produtos**

Preserve cabeçalho e navegação inferior.

No topo:

- Título “Produtos”.
- Descrição curta sobre o catálogo.
- Botão “Voltar ao PDV”.
- Quantidade real de produtos na visão atual.

O conteúdo principal deve ser uma lista dentro de um painel arredondado, como na referência, com linhas separadas por bordas suaves.

Cada linha contém:

- Miniatura quadrada arredondada, aproximadamente 46 × 46 px.
- Nome do produto.
- Código e categoria em texto secundário abaixo.
- Preço de venda.
- Indicação da unidade, como “por kg” ou “por unidade”.
- Botão “Vender” com ícone de adicionar, à direita.

Ao clicar em “Vender”, adicionar ao atendimento ativo e retornar ao PDV conforme o fluxo atual, respeitando se ele é avulso ou por comanda.

Se o módulo atual possui cadastro, edição, estoque, importação, filtros ou outras ações, mantenha esses recursos e acomode-os na mesma linguagem visual. A lista simplificada da referência não autoriza eliminar funcionalidades.

**13. Aba Resumo Caixa**

Manter o título “Resumo Caixa”, texto de apoio e botão “Voltar ao PDV”.

A primeira linha possui três cards:

- Vendas do turno: card principal com fundo de destaque IDR, valor total grande e quantidade de vendas abaixo.
- Dinheiro em caixa: card neutro com o valor em destaque e contexto de abertura/movimentação.
- Ticket médio: card neutro com valor grande e identificação de que se refere às vendas concluídas.

Parâmetros visuais:

- Três colunas no desktop.
- Espaçamento aproximado de 13 px.
- Cantos arredondados de aproximadamente 15 px.
- Títulos pequenos e valores próximos de 27 px.
- Alinhamento consistente entre os três cards.

Abaixo, um painel maior intitulado “Recebimentos por forma”, com linhas para:

- Pix.
- Crédito.
- Débito.
- Dinheiro.

Cada linha tem ícone e nome à esquerda e valor alinhado à direita.

Abaixo do painel, mostrar a quantidade de comandas em atendimento e a ação “Ver histórico”.

Utilizar os cálculos e dados reais do aplicativo, considerando vendas avulsas e por comanda. Preservar as regras existentes de abertura, sangria, suprimento, cancelamento, estorno e recebimento.

Não copiar os valores de exemplo da prévia. Uma venda com pagamento dividido deve distribuir corretamente os valores por forma de recebimento e contar como uma única venda.

**14. Aba Histórico**

Manter cabeçalho, menu inferior, título “Histórico”, descrição curta e botão “Voltar ao PDV”.

Acima da lista:

- Quantidade de vendas correspondente à consulta.
- Indicação de ordenação, com as mais recentes primeiro.
- Filtros reais já disponíveis no aplicativo.

A lista fica dentro de um painel com cantos arredondados, fundo claro e divisórias suaves.

Cada linha apresenta:

- Identificador da venda à esquerda.
- Abaixo, “Comanda XXX” ou “Venda avulsa”, conforme a origem.
- Forma de pagamento na área central.
- Em pagamentos divididos, mostrar as formas utilizadas e os respectivos valores.
- Horário e operador em texto secundário.
- Valor total alinhado à direita.
- Situação da venda abaixo ou junto ao valor.

Preserve os recursos reais de consulta, detalhamento, comprovante, reimpressão e cancelamento, quando existentes e permitidos.

Não apresente todas as vendas como concluídas se os registros possuem outros estados.

**15. Aba Ajustes**

Manter título “Ajustes”, texto de apoio, botão “Voltar ao PDV”, cabeçalho e menu inferior.

A referência usa um formulário de largura moderada, aproximadamente 620 px, organizado em blocos verticais arredondados.

Primeiro bloco: “Identidade do estabelecimento”.

- Campo para o nome comercial da padaria/loja.
- Informação separada da marca fixa IDR Flow.
- Campos reais de identificação já existentes, quando aplicáveis.

Segundo bloco: “Preferências de atendimento”.

A referência apresenta duas linhas de preferência:

- “Identificar comanda no recibo”.
- “Exibir confirmação ao finalizar”.

Cada linha deve ter título à esquerda, descrição menor abaixo e controle à direita.

Mapeie esses controles para preferências reais do aplicativo. Não crie botões que aparentam salvar configurações sem efeito.

Preserve todos os demais ajustes existentes, organizando-os em blocos com a mesma linguagem visual.

No final:

- Botão “Salvar ajustes” em laranja IDR.
- Mensagem discreta de sucesso após a gravação real.
- Validação dos campos e tratamento de falhas.

**16. Responsividade e comportamento**

No desktop, preservar a composição escolhida.

Em larguras intermediárias:

- Reduzir a grade de produtos de três para duas colunas.
- Ajustar o painel do pedido proporcionalmente.
- Manter os seis nomes do menu legíveis.
- Não cortar “Trocar comanda” nem “Resumo Caixa”.

Em telas pequenas:

- Reorganizar o conteúdo em uma coluna.
- Manter catálogo e pedido acessíveis, sem rolagem horizontal da página.
- Adaptar o menu inferior para duas linhas de três itens, se necessário, como na referência responsiva.
- Manter texto e ícone visíveis nos seis itens.
- Garantir que teclado virtual, modais e navegação não cubram campos ou ações essenciais.

Os modais devem manter o foco corretamente, permitir fechamento por teclado quando apropriado e devolver o foco ao controle de origem.

Preserve atalhos, leitor de código, operação por teclado e recursos de acessibilidade existentes.

**17. Preservação funcional e validação**

Este trabalho é uma aplicação de identidade visual e organização de interface sobre um sistema existente.

Preserve:

- Dados e cadastros.
- Identificadores de produtos, vendas, comandas e clientes.
- Regras de cálculo.
- Fluxos de venda avulsa e por comanda.
- Persistência dos atendimentos.
- Permissões e autenticação.
- Integrações e contratos existentes.
- Recursos de caixa, estoque, impressão e emissão fiscal disponíveis.
- Funcionalidades adicionais que não aparecem na prévia simplificada.

Não substitua dados reais por exemplos. Não implemente uma segunda lógica de vendas em paralelo à existente.

Ao concluir, confira pelo menos:

- Venda avulsa do início à finalização.
- Venda por comanda.
- Troca entre comandas sem mistura de itens.
- Alternância de telas sem perda do atendimento.
- Inclusão por busca e pelo catálogo.
- Produtos por quantidade e por peso.
- Desconto e observação.
- Recebimento em dinheiro com troco.
- Pagamento dividido.
- Atualização correta do Resumo Caixa e Histórico.
- Identificação de vendas avulsas no Histórico.
- Persistência dos ajustes.
- Funcionamento das seis abas.
- Logo original e palavra Flow bem visíveis.
- Menu inferior sem sobreposição.
- Legibilidade e ausência de cortes nas resoluções utilizadas pelo aplicativo.

O resultado esperado é o formato visual do “Pão & Prosa — Barra inferior”, reconhecível na distribuição dos elementos, agora como IDR Flow: identidade IDR, painel do pedido discretamente maior, botão “Trocar comanda” evidente e todos os fluxos reais do aplicativo preservados.