prompts.txt

Crie uma interface web responsiva para o gerenciamento de "Pedidos de Compra" utilizando HTML, CSS e JavaScript com Bootstrap 5.3.2.   A tela deve conter:  - Título: "Pedidos de Compra" - Um botão para "Novo Pedido de Compra" - Para as tabelas, utilize o datatables. - 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. - Deixe os filtros visíveis. - Quando mostrar os detalhes do Pedido, ao clicar em `+ Adicionar Item`, abra uma linha para adicionarmos um item. - 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, ponha no fim da lista de históricos, uma mensagem "ver mais" ou "ver todos". - Ao invés de usar `tailwindcss`, por favor, utilize o `Bootstrap 5.3.2`.