# Redesign da tela de compras ## Prompt Usar a imagem de referência fornecida para refazer a tela de compras. Na referência existe o campo “Estoque de destino”, mas no sistema esse campo deve ser “Empresa”. ## Resposta A tela de cadastro e edição de compras foi reorganizada seguindo a composição visual da referência, preservando as regras e integrações já existentes. O cabeçalho passou a apresentar retorno, título, breadcrumb, cancelamento e salvamento do rascunho. Os dados da compra foram agrupados em um card com Fornecedor, Operação, Empresa, Data de entrada, Número do documento e Observação. O campo equivalente ao “Estoque de destino” foi implementado como “Empresa”. A pesquisa de produtos recebeu uma seção própria, mantendo a busca e o cadastro de novos produtos. Os itens passaram a ser exibidos em tabela com imagem, produto, quantidade, unidade, custo unitário, total e ações. Foram adicionados controles rápidos para aumentar e diminuir a quantidade, sem remover a edição detalhada existente. O resumo lateral apresenta quantidade de produtos e unidades, subtotal, pagamentos, total, definição de pagamentos e finalização com entrada no estoque da empresa selecionada. Campos da referência que não existem no modelo atual, como frete e outras despesas, não foram simulados para evitar informações que não seriam persistidas. A interface foi validada visualmente em desktop e em viewport móvel. No celular os campos ficam em uma coluna, as ações são compactadas e o resumo é reposicionado abaixo do conteúdo, sem rolagem horizontal. Oxlint e ESLint foram executados sem avisos ou erros e `vue-tsc --build` foi aprovado. O build Vite de produção não foi executado sem a confirmação exigida pelas regras do projeto. ## Prompt Os inputs da seção “Dados da compra” estão desalinhados. ## Resposta O desalinhamento ocorria porque “Data de entrada” utilizava um rótulo externo, enquanto “Número do documento” e “Observação” utilizavam rótulos flutuantes. Além disso, a observação era uma área de texto mais alta que os demais controles. Os três campos da segunda linha foram padronizados com rótulos na mesma posição e a mesma altura mínima. A observação passou a ser um input de uma linha, acompanhando a referência visual. A correção foi conferida no navegador por medição dos controles e inspeção visual; todos começam na mesma coordenada vertical e possuem a mesma altura aparente. Oxlint e ESLint foram executados sem avisos ou erros e `vue-tsc --build` foi aprovado. A rota temporária usada apenas para inspeção visual foi removida antes da conclusão. ## Prompt Quais são os dados obrigatórios para finalizar a compra? ## Resposta Para finalizar, a compra precisa possuir uma empresa ativa, uma operação ativa de entrada que movimente o estoque e seja compatível com a empresa, ao menos um produto válido e pagamentos que cubram integralmente o total da compra. Cada item precisa ter quantidade maior que zero e custo unitário maior ou igual a zero. Fornecedor, número do documento e observação são opcionais. A data de entrada é gerada automaticamente. Na compra mostrada, empresa, operação e produto já estão preenchidos; falta definir pagamento ou pagamentos que totalizem R$ 540,00. ## Prompt O modal “Concluir compra” não é mais necessário, pois as informações já existem na própria tela. ## Resposta O modal de revisão foi removido. O botão “Finalizar e dar entrada” agora executa diretamente o fluxo de finalização, mantendo a validação dos campos, a exigência de pagamento integral, o salvamento dos dados atuais e as mensagens de sucesso ou erro. Também foram removidos o estado, o import e os estilos utilizados exclusivamente pelo modal. Oxlint e ESLint foram executados sem avisos ou erros e `vue-tsc --build` foi aprovado. ## Prompt Melhorar o diálogo de pagamento. ## Resposta O diálogo foi reorganizado com cabeçalho explicativo, cards para total, valor pago e valor restante, barra de progresso, seção destacada para adicionar pagamentos e lista visual dos pagamentos já informados. Quando o total é coberto, o formulário de inclusão é substituído por uma confirmação de pagamento completo. As formas adicionadas recebem ícones de acordo com Pix, cartão, dinheiro, boleto ou forma genérica. O valor restante fica visível próximo ao formulário e o rodapé mantém as ações de fechar e finalizar sempre acessíveis. Também foram corrigidos os botões internos para que fechar ou excluir não envie o formulário, adicionados estados de carregamento e mensagens de erro para inclusão e remoção. O diálogo foi validado visualmente em desktop e celular, com apenas uma rolagem vertical e sem estouro horizontal. A rota temporária de inspeção foi removida antes da conclusão. Oxlint e ESLint foram executados sem avisos ou erros e `vue-tsc --build` foi aprovado. O build Vite de produção permanece pendente de confirmação.