| 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`. |