| Crie uma interface web responsiva para o cadastro e gerenciamento de "Orçamentos" utilizando HTML, CSS e JavaScript puro (pode usar Bootstrap 5 se desejar). A tela deve conter: - Título: "Orçamentos" - Um botão para "Novo Orçamento" - No botão `Novo Orçamento`, 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. - Uma tabela para listar orçamentos existentes com as colunas: - Número do Orçamento - Nome do Cliente Potencial - Vendedor Responsável - Data de Criação - Data de Validade - Status do Orçamento (ex: Em Elaboração, Aguardando Análise, Análise Concluída, Convertido em Pedido de Venda, Cancelado) - Ações (Visualizar, Editar, Duplicar, Cancelar, Converter em Pedido de Venda) - Um campo de busca/filtro por cliente, vendedor, status e data. - Ao clicar em "Visualizar" ou "Editar", abrir um modal ou ir para uma nova tela com os detalhes completos do Orçamento, incluindo: - Dados do Cliente Potencial - Vendedor Responsável - Status, Observações - Lista de itens do orçamento, com as colunas: - Produto (Nome) - Categoria do Produto - Fornecedor Sugerido - Quantidade - Valor Unitário Orçado - Status do Item (Pendente, Aprovado para Compra, etc.) - Ações por item (Editar, Remover) - Botão para "Adicionar Item", que abre um formulário inline ou modal para seleção de Produto, Fornecedor, Quantidade e Valor. - Botão para "Enviar para Análise de Compra" - Botão para "Cancelar Orçamento" - Histórico de eventos/ações do orçamento no final da tela - Alertas de Confirmações devem usar o SweetAlert2. - Para as tabelas, utilize o datatables. - Interface deve ser moderna, clean, responsiva, com feedback visual nas ações (sucesso/erro). - Utilize ícones modernos (FontAwesome ou Bootstrap Icons), cores suaves e espaçamento adequado. - Por favor, gere no modo dark (tema escuro). - Ao invés de usar `tailwindcss`, por favor, utilize o `Bootstrap 5.3.2`. |