Add 2 files

index.html

@@ -77,12 +77,55 @@
             padding: 1.5rem;
         }
         
+        .offcanvas {
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 50%;
+            height: 100vh;
+            background-color: white;
+            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+            z-index: 1050;
+            overflow-y: auto;
+        }
+        
+        .offcanvas.show {
+            transform: translateX(0);
+        }
+        
+        .offcanvas-header {
+            padding: 1rem;
+            border-bottom: 1px solid #e5e7eb;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .offcanvas-body {
+            padding: 1rem;
+        }
+        
+        .dark .offcanvas {
+            background-color: #1f2937;
+            color: white;
+        }
+        
+        .dark .offcanvas-header {
+            border-bottom-color: #374151;
+        }
+        
         @media (max-width: 768px) {
             .responsive-table {
                 display: block;
                 overflow-x: auto;
                 white-space: nowrap;
             }
+            
+            .offcanvas {
+                width: 90%;
+            }
         }
     </style>
 </head>
@@ -322,6 +365,117 @@
         </div>
     </div>
     
+    <!-- New Order Offcanvas -->
+    <div id="new-order-offcanvas" class="offcanvas">
+        <div class="offcanvas-header">
+            <h2 class="text-xl font-bold">Novo Pedido de Compra</h2>
+            <button id="close-new-order" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+        </div>
+        <div class="offcanvas-body">
+            <form id="new-order-form" class="space-y-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label for="supplier-select" class="block text-sm font-medium mb-1">Fornecedor</label>
+                        <select id="supplier-select" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+                            <option value="">Selecione um fornecedor</option>
+                            <option value="1">Fornecedor A</option>
+                            <option value="2">Fornecedor B</option>
+                            <option value="3">Fornecedor C</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label for="responsible-select" class="block text-sm font-medium mb-1">Responsável</label>
+                        <select id="responsible-select" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+                            <option value="">Selecione o responsável</option>
+                            <option value="1">João Silva</option>
+                            <option value="2">Maria Souza</option>
+                            <option value="3">Carlos Oliveira</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label for="payment-terms" class="block text-sm font-medium mb-1">Condição de Pagamento</label>
+                        <select id="payment-terms" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+                            <option value="">Selecione a condição</option>
+                            <option value="30">30 dias</option>
+                            <option value="60">60 dias</option>
+                            <option value="90">90 dias</option>
+                            <option value="30/60/90">30/60/90 dias</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label for="delivery-date" class="block text-sm font-medium mb-1">Previsão de Entrega</label>
+                        <input type="date" id="delivery-date" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+                    </div>
+                </div>
+                
+                <div>
+                    <label for="order-notes" class="block text-sm font-medium mb-1">Observações</label>
+                    <textarea id="order-notes" rows="3" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"></textarea>
+                </div>
+                
+                <div class="mt-6">
+                    <h3 class="text-lg font-semibold mb-4">Itens do Pedido</h3>
+                    
+                    <div class="responsive-table mb-4">
+                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                            <thead class="bg-gray-50 dark:bg-gray-700">
+                                <tr>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Produto</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Quantidade</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Valor Unitário</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ações</th>
+                                </tr>
+                            </thead>
+                            <tbody id="order-items-list" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                                <!-- Items will be added here dynamically -->
+                            </tbody>
+                        </table>
+                    </div>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                        <div>
+                            <label for="product-select" class="block text-sm font-medium mb-1">Produto</label>
+                            <select id="product-select" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                                <option value="">Selecione um produto</option>
+                                <option value="1">Produto X</option>
+                                <option value="2">Produto Y</option>
+                                <option value="3">Produto Z</option>
+                            </select>
+                        </div>
+                        
+                        <div>
+                            <label for="item-quantity" class="block text-sm font-medium mb-1">Quantidade</label>
+                            <input type="number" id="item-quantity" min="1" value="1" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                        </div>
+                        
+                        <div>
+                            <label for="item-unit-price" class="block text-sm font-medium mb-1">Valor Unitário</label>
+                            <input type="text" id="item-unit-price" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 money">
+                        </div>
+                    </div>
+                    
+                    <button type="button" id="add-item-to-order" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm flex items-center gap-1">
+                        <i class="fas fa-plus"></i> Adicionar Item
+                    </button>
+                </div>
+                
+                <div class="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+                    <button type="button" id="cancel-new-order" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg">
+                        Cancelar
+                    </button>
+                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
+                        <i class="fas fa-save"></i> Salvar Pedido
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
     <!-- Order Detail Modal -->
     <div id="order-detail-modal" class="modal-overlay hidden">
         <div class="modal-content">
@@ -627,6 +781,99 @@
             document.documentElement.classList.remove('dark');
         }
         
+        // New Order Offcanvas
+        const newOrderBtn = document.getElementById('new-order-btn');
+        const newOrderOffcanvas = document.getElementById('new-order-offcanvas');
+        const closeNewOrder = document.getElementById('close-new-order');
+        const cancelNewOrder = document.getElementById('cancel-new-order');
+        
+        newOrderBtn.addEventListener('click', function() {
+            newOrderOffcanvas.classList.add('show');
+            document.body.style.overflow = 'hidden';
+        });
+        
+        closeNewOrder.addEventListener('click', function() {
+            newOrderOffcanvas.classList.remove('show');
+            document.body.style.overflow = 'auto';
+        });
+        
+        cancelNewOrder.addEventListener('click', function() {
+            newOrderOffcanvas.classList.remove('show');
+            document.body.style.overflow = 'auto';
+        });
+        
+        // Add items to new order
+        const addItemToOrderBtn = document.getElementById('add-item-to-order');
+        const orderItemsList = document.getElementById('order-items-list');
+        
+        addItemToOrderBtn.addEventListener('click', function() {
+            const productSelect = document.getElementById('product-select');
+            const productName = productSelect.options[productSelect.selectedIndex].text;
+            const quantity = document.getElementById('item-quantity').value;
+            const unitPrice = document.getElementById('item-unit-price').value;
+            
+            if (productSelect.value === '' || quantity === '' || unitPrice === '') {
+                Swal.fire({
+                    title: 'Campos obrigatórios',
+                    text: 'Por favor, preencha todos os campos do item.',
+                    icon: 'warning'
+                });
+                return;
+            }
+            
+            const totalValue = (parseFloat(quantity) * parseFloat(unitPrice.replace('R$ ', '').replace('.', '').replace(',', '.'))).toFixed(2);
+            
+            const newRow = document.createElement('tr');
+            newRow.className = 'bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700';
+            newRow.innerHTML = `
+                <td class="px-4 py-2 whitespace-nowrap">${productName}</td>
+                <td class="px-4 py-2 whitespace-nowrap">${quantity}</td>
+                <td class="px-4 py-2 whitespace-nowrap">${unitPrice}</td>
+                <td class="px-4 py-2 whitespace-nowrap">
+                    <button class="remove-item-row text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </td>
+            `;
+            
+            orderItemsList.appendChild(newRow);
+            
+            // Clear form
+            productSelect.value = '';
+            document.getElementById('item-quantity').value = '1';
+            document.getElementById('item-unit-price').value = '';
+            
+            // Add event listener to remove button
+            newRow.querySelector('.remove-item-row').addEventListener('click', function() {
+                newRow.remove();
+            });
+        });
+        
+        // Submit new order form
+        document.getElementById('new-order-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            if (orderItemsList.children.length === 0) {
+                Swal.fire({
+                    title: 'Itens obrigatórios',
+                    text: 'Por favor, adicione pelo menos um item ao pedido.',
+                    icon: 'warning'
+                });
+                return;
+            }
+            
+            Swal.fire({
+                title: 'Pedido criado!',
+                text: 'O novo pedido de compra foi criado com sucesso.',
+                icon: 'success'
+            });
+            
+            newOrderOffcanvas.classList.remove('show');
+            document.body.style.overflow = 'auto';
+            this.reset();
+            orderItemsList.innerHTML = '';
+        });
+        
         // Order Detail Modal
         const viewButtons = document.querySelectorAll('.view-btn');
         const orderDetailModal = document.getElementById('order-detail-modal');
@@ -847,18 +1094,6 @@
             });
         });
         
-        // New Order Button
-        document.getElementById('new-order-btn').addEventListener('click', function() {
-            Swal.fire({
-                title: 'Novo Pedido de Compra',
-                text: 'Redirecionando para a criação de novo pedido...',
-                icon: 'info',
-                timer: 1500,
-                showConfirmButton: false
-            });
-            // In a real app, we would redirect to a new order form
-        });
-        
         // Money format input
         document.querySelectorAll('.money').forEach(input => {
             input.addEventListener('input', function() {

prompts.txt

@@ -1 +1,2 @@
-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 modal estilo 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), com um botão que alterne entre uma "meia lua, para dark" e "um sol, para modo light".
+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 modal estilo 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), com um botão que alterne entre uma "meia lua, para dark" e "um sol, para modo light".
+Por favor, no botão "+ Novo Pedido de Compra". Chame um Modal ou um OffCanvas (com 50% da página) para adicionar um novo "Pedido de Compra" direto desta página, sem precisar buscar num Orçamento. E onde está a engrenagem, mude para uma "meia lua" para o modo dark, e ao alternar para o modo light, alterne o botão para um "sol".