| Crie uma interface web responsiva para o gerenciamento de "Pedidos de Compra" utilizando HTML, CSS e JavaScript puro (ou Bootstrap 5, se preferir). A tela deve conter: - Título: "Pedidos de Compra" - Um botão para "Novo Pedido de Compra" - Uma tabela para listar os pedidos com as colunas: - Número do Pedido de Compra - Fornecedor - Responsável pela Compra - Data de Emissão - Data de Previsão de Entrega - Status do Pedido (Em Elaboração, Aguardando Aprovação, Aprovado, Enviado, Recebido Parcial, Recebido Total, Cancelado) - Valor Total - Ações (Visualizar, Editar, Cancelar, Imprimir) - Filtros por fornecedor, status, responsável e data. - Ao visualizar um pedido, abrir um modal ou tela de detalhe com: - Dados do Fornecedor, Responsável, Condições de Pagamento, Observações - Lista dos Itens do Pedido de Compra, colunas: - Produto (Nome) - Categoria do Produto - Quantidade Solicitada - Valor Unitário Negociado - Valor Total do Item - Quantidade Recebida - Status do Item (Pendente, Recebido, etc.) - Ações por item (Editar, Registrar Recebimento, Remover) - Botão para "Adicionar Item" - Botão para "Enviar para Aprovação" (habilitado apenas enquanto o status for "Em Elaboração") - Botão para "Registrar Recebimento" (parcial/total, conforme status) - Botão para "Cancelar Pedido" (com modal de confirmação) - Histórico de eventos/ações do pedido no final da tela - Confirmações e alertas devem usar SweetAlert2. - Layout limpo, organizado, responsivo, com boas práticas de UX para facilitar o dia a dia de quem opera. - Utilize ícones modernos (FontAwesome ou Bootstrap Icons), cores suaves e espaçamento adequado. - Por favor, gere no modo dark (tema escuro). - No botão `+ Novo Pedido de Compra`, por favor abra um offcanvas, com 1/3 de largura em relação à tela principal. - Abra o OffCanvas da direita para a esquerda (right offcanvas) de forma suave. | |
| Por favor, deixe os filtros visíveis. Quando mostrar os detalhes do Pedido, ao clicar em `+ Adicionar Item` abra uma linha para adicionarmos um item. e na lista "Itens do Pedido". no botão editar, abra um `Modal` para editarmos os itens. Além do total na coluna Unitário dos itens do pedido, ponha um valor total também na coluna total. No Histórico, está perfeita a lista de históricos. Para ficar melhor ainda, ponha no fim destes 5 itens do histórico, uma mensagem "ver mais" ou "ver todos". Adicione mais um botão (com confirmação SweetAlert2) com o título `Enviar para Aprovação`. | |
| Ficou bom demais! Faltou adicionar o offcanvas para a ação do botão "+ Novo Pedido de Compra", abrindo pela direita, com animação, ocupando 1/3 da área da página. E no ao abrir a visualização do pedido, faltou o botão "Enviar para Aprovação". No resto ficou perfeito. Não mude nada além do que estou pedindo agora. | |
| Está tudo sensacional. Acrescente a funcionalidade de adicionar um novo pedido de compra, no clique do botão `+ Novo Pedido de Compra`, abrindo para adição através de um "OffCanvas", que deve ocupar 1/3 da tela, abrindo pela direita, com animação de "deslizar". | |
| Deixe o filtro sempre visível. Em detalhes de pedido, ao clicar em adicionar item, crie uma linha abaixo do botão para adicionarmos o item. E no histórico de pedidos crie no final uma opção "ver mais" ou ver todos. Se possível, também em detalhes do pedido, adicione mais um botão no fim do Modal, chamado "Enviar para Aprovação", com um SweetAlert2 de confirmação. | |
| Sensacional. Agora, acrescente um "Modal" ao clicar em editar Itens do Pedido, na tela de detalhes do Pedido. |