Add 2 files

index.html

@@ -116,6 +116,110 @@
             border-bottom-color: #374151;
         }
         
+        /* Notification Dropdown Styles */
+        .notification-container {
+            position: relative;
+            display: inline-block;
+        }
+        
+        .notification-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background-color: #ef4444;
+            color: white;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        
+        .notification-dropdown {
+            position: absolute;
+            right: 0;
+            top: 100%;
+            width: 350px;
+            max-height: 400px;
+            overflow-y: auto;
+            background-color: white;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            z-index: 1100;
+            display: none;
+        }
+        
+        .dark .notification-dropdown {
+            background-color: #1f2937;
+            border: 1px solid #374151;
+        }
+        
+        .notification-dropdown.show {
+            display: block;
+        }
+        
+        .notification-header {
+            padding: 1rem;
+            border-bottom: 1px solid #e5e7eb;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .dark .notification-header {
+            border-bottom-color: #374151;
+        }
+        
+        .notification-item {
+            padding: 1rem;
+            border-bottom: 1px solid #e5e7eb;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        
+        .dark .notification-item {
+            border-bottom-color: #374151;
+        }
+        
+        .notification-item:hover {
+            background-color: #f3f4f6;
+        }
+        
+        .dark .notification-item:hover {
+            background-color: #374151;
+        }
+        
+        .notification-item.unread {
+            background-color: #f0f9ff;
+        }
+        
+        .dark .notification-item.unread {
+            background-color: #1e3a8a;
+        }
+        
+        .notification-time {
+            font-size: 0.75rem;
+            color: #6b7280;
+            margin-top: 0.25rem;
+        }
+        
+        .dark .notification-time {
+            color: #9ca3af;
+        }
+        
+        .notification-footer {
+            padding: 0.75rem;
+            text-align: center;
+            border-top: 1px solid #e5e7eb;
+        }
+        
+        .dark .notification-footer {
+            border-top-color: #374151;
+        }
+        
         @media (max-width: 768px) {
             .responsive-table {
                 display: block;
@@ -126,6 +230,11 @@
             .offcanvas {
                 width: 90%;
             }
+            
+            .notification-dropdown {
+                width: 280px;
+                right: -50px;
+            }
         }
     </style>
 </head>
@@ -142,6 +251,56 @@
                     <i class="fas fa-moon dark:hidden"></i>
                     <i class="fas fa-sun hidden dark:inline"></i>
                 </button>
+                
+                <!-- Notification Bell -->
+                <div class="notification-container">
+                    <button id="notification-btn" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 relative">
+                        <i class="fas fa-bell"></i>
+                        <span class="notification-badge">6</span>
+                    </button>
+                    <div id="notification-dropdown" class="notification-dropdown">
+                        <div class="notification-header">
+                            <h3 class="font-semibold">Notificações</h3>
+                            <button id="mark-all-read" class="text-blue-600 dark:text-blue-400 text-sm">Marcar todas como lidas</button>
+                        </div>
+                        <div class="overflow-y-auto max-h-80">
+                            <div class="notification-item unread">
+                                <div class="font-medium">Novo pedido aprovado</div>
+                                <p class="text-sm">Pedido PC-2023-010 foi aprovado pelo gestor</p>
+                                <div class="notification-time">Há 5 minutos</div>
+                            </div>
+                            <div class="notification-item unread">
+                                <div class="font-medium">Recebimento parcial</div>
+                                <p class="text-sm">3 itens do pedido PC-2023-008 foram recebidos</p>
+                                <div class="notification-time">Há 1 hora</div>
+                            </div>
+                            <div class="notification-item unread">
+                                <div class="font-medium">Pedido enviado</div>
+                                <p class="text-sm">Pedido PC-2023-009 foi enviado ao fornecedor</p>
+                                <div class="notification-time">Hoje, 09:30</div>
+                            </div>
+                            <div class="notification-item">
+                                <div class="font-medium">Aprovação pendente</div>
+                                <p class="text-sm">Pedido PC-2023-011 aguarda sua aprovação</p>
+                                <div class="notification-time">Ontem, 16:45</div>
+                            </div>
+                            <div class="notification-item">
+                                <div class="font-medium">Fornecedor atualizado</div>
+                                <p class="text-sm">Fornecedor A atualizou seus dados cadastrais</p>
+                                <div class="notification-time">Ontem, 14:20</div>
+                            </div>
+                            <div class="notification-item">
+                                <div class="font-medium">Novo comentário</div>
+                                <p class="text-sm">João Silva comentou no pedido PC-2023-007</p>
+                                <div class="notification-time">Ontem, 11:10</div>
+                            </div>
+                        </div>
+                        <div class="notification-footer">
+                            <a href="#" class="text-blue-600 dark:text-blue-400 text-sm">Ver todas as notificações</a>
+                        </div>
+                    </div>
+                </div>
+                
                 <button id="new-order-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                     <i class="fas fa-plus"></i> Novo Pedido de Compra
                 </button>
@@ -536,574 +695,608 @@
                         </div>
                         <div>
                             <p class="text-sm text-gray-500 dark:text-gray-400">Condição de Pagamento</p>
-                            <p class="font-medium" id="payment-terms">30/60/90 dias</p>
-                        </div>
-                        <div>
-                            <p class="text-sm text-gray-500 dark:text-gray-400">Valor Total</p>
-                            <p class="font-medium" id="order-total">R$ 1.250,00</p>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
-                    <h3 class="text-lg font-semibold mb-4">Observações</h3>
-                    <p class="text-sm" id="order-notes">Pedido com prioridade máxima. Favor confirmar disponibilidade antes do envio.</p>
-                </div>
+            <p class="font-medium" id="payment-terms">30/60/90 dias</p>
+        </div>
+        <div>
+            <p class="text-sm text-gray-500 dark:text-gray-400">Valor Total</p>
+            <p class="font-medium" id="order-total">R$ 1.250,00</p>
+        </div>
+    </div>
+</div>
+
+<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+    <h3 class="text-lg font-semibold mb-4">Observações</h3>
+    <p class="text-sm" id="order-notes">Pedido com prioridade máxima. Favor confirmar disponibilidade antes do envio.</p>
+</div>
+</div>
+
+<!-- Items Table -->
+<div class="mb-8">
+    <div class="flex justify-between items-center mb-4">
+        <h3 class="text-lg font-semibold">Itens do Pedido</h3>
+        <button id="add-item-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-1">
+            <i class="fas fa-plus"></i> Adicionar Item
+        </button>
+    </div>
+    
+    <div class="responsive-table">
+        <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-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Produto</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Categoria</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Quantidade</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Valor Unitário</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Valor Total</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Recebido</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ações</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                    <td class="px-6 py-4 whitespace-nowrap">Produto X</td>
+                    <td class="px-6 py-4 whitespace-nowrap">Eletrônicos</td>
+                    <td class="px-6 py-4 whitespace-nowrap">5</td>
+                    <td class="px-6 py-4 whitespace-nowrap">R$ 150,00</td>
+                    <td class="px-6 py-4 whitespace-nowrap">R$ 750,00</td>
+                    <td class="px-6 py-4 whitespace-nowrap">0</td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 py-1 rounded-full text-xs font-semibold item-status-pendente">Pendente</span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <button class="edit-item-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="receive-item-btn text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 mr-2">
+                            <i class="fas fa-check-circle"></i>
+                        </button>
+                        <button class="remove-item-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="px-6 py-4 whitespace-nowrap">Produto Y</td>
+                    <td class="px-6 py-4 whitespace-nowrap">Móveis</td>
+                    <td class="px-6 py-4 whitespace-nowrap">2</td>
+                    <td class="px-6 py-4 whitespace-nowrap">R$ 250,00</td>
+                    <td class="px-6 py-4 whitespace-nowrap">R$ 500,00</td>
+                    <td class="px-6 py-4 whitespace-nowrap">0</td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 py-1 rounded-full text-xs font-semibold item-status-pendente">Pendente</span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <button class="edit-item-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="receive-item-btn text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 mr-2">
+                            <i class="fas fa-check-circle"></i>
+                        </button>
+                        <button class="remove-item-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- Order Actions -->
+<div class="flex flex-wrap gap-3 mb-8">
+    <button id="send-approval-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
+        <i class="fas fa-paper-plane"></i> Enviar para Aprovação
+    </button>
+    <button id="register-receipt-btn" 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-check-double"></i> Registrar Recebimento
+    </button>
+    <button id="cancel-order-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
+        <i class="fas fa-times"></i> Cancelar Pedido
+    </button>
+    <button id="print-order-btn" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
+        <i class="fas fa-print"></i> Imprimir Pedido
+    </button>
+</div>
+
+<!-- History -->
+<div>
+    <h3 class="text-lg font-semibold mb-4">Histórico do Pedido</h3>
+    <div class="space-y-4">
+        <div class="border-l-4 border-blue-500 pl-4 py-2">
+            <div class="flex justify-between">
+                <p class="font-medium">Pedido criado</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">10/05/2023 09:15</p>
             </div>
-            
-            <!-- Items Table -->
-            <div class="mb-8">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold">Itens do Pedido</h3>
-                    <button id="add-item-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-1">
-                        <i class="fas fa-plus"></i> Adicionar Item
-                    </button>
-                </div>
-                
-                <div class="responsive-table">
-                    <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-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Produto</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Categoria</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Quantidade</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Valor Unitário</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Valor Total</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Recebido</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ações</th>
-                            </tr>
-                        </thead>
-                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                            <tr>
-                                <td class="px-6 py-4 whitespace-nowrap">Produto X</td>
-                                <td class="px-6 py-4 whitespace-nowrap">Eletrônicos</td>
-                                <td class="px-6 py-4 whitespace-nowrap">5</td>
-                                <td class="px-6 py-4 whitespace-nowrap">R$ 150,00</td>
-                                <td class="px-6 py-4 whitespace-nowrap">R$ 750,00</td>
-                                <td class="px-6 py-4 whitespace-nowrap">0</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 py-1 rounded-full text-xs font-semibold item-status-pendente">Pendente</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <button class="edit-item-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2">
-                                        <i class="fas fa-edit"></i>
-                                    </button>
-                                    <button class="receive-item-btn text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 mr-2">
-                                        <i class="fas fa-check-circle"></i>
-                                    </button>
-                                    <button class="remove-item-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
-                                        <i class="fas fa-trash"></i>
-                                    </button>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td class="px-6 py-4 whitespace-nowrap">Produto Y</td>
-                                <td class="px-6 py-4 whitespace-nowrap">Móveis</td>
-                                <td class="px-6 py-4 whitespace-nowrap">2</td>
-                                <td class="px-6 py-4 whitespace-nowrap">R$ 250,00</td>
-                                <td class="px-6 py-4 whitespace-nowrap">R$ 500,00</td>
-                                <td class="px-6 py-4 whitespace-nowrap">0</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 py-1 rounded-full text-xs font-semibold item-status-pendente">Pendente</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <button class="edit-item-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2">
-                                        <i class="fas fa-edit"></i>
-                                    </button>
-                                    <button class="receive-item-btn text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 mr-2">
-                                        <i class="fas fa-check-circle"></i>
-                                    </button>
-                                    <button class="remove-item-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
-                                        <i class="fas fa-trash"></i>
-                                    </button>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <p class="text-sm">Por: João Silva</p>
+        </div>
+        <div class="border-l-4 border-blue-500 pl-4 py-2">
+            <div class="flex justify-between">
+                <p class="font-medium">Item adicionado</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">10/05/2023 09:20</p>
+            </div>
+            <p class="text-sm">Produto X - Quantidade: 5 - Valor: R$ 750,00</p>
+            <p class="text-sm">Por: João Silva</p>
+        </div>
+        <div class="border-l-4 border-blue-500 pl-4 py-2">
+            <div class="flex justify-between">
+                <p class="font-medium">Item adicionado</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">10/05/2023 09:25</p>
+            </div>
+            <p class="text-sm">Produto Y - Quantidade: 2 - Valor: R$ 500,00</p>
+            <p class="text-sm">Por: João Silva</p>
+        </div>
+    </div>
+</div>
+</div>
+</div>
+
+<!-- Add Item Modal -->
+<div id="add-item-modal" class="modal-overlay hidden">
+    <div class="modal-content max-w-md">
+        <div class="flex justify-between items-center mb-6">
+            <h2 class="text-2xl font-bold">Adicionar Item</h2>
+            <button id="close-add-item-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <i class="fas fa-times text-2xl"></i>
+            </button>
+        </div>
+        
+        <form id="add-item-form" class="space-y-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" required>
+                    <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>
             
-            <!-- Order Actions -->
-            <div class="flex flex-wrap gap-3 mb-8">
-                <button id="send-approval-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
-                    <i class="fas fa-paper-plane"></i> Enviar para Aprovação
-                </button>
-                <button id="register-receipt-btn" 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-check-double"></i> Registrar Recebimento
-                </button>
-                <button id="cancel-order-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
-                    <i class="fas fa-times"></i> Cancelar Pedido
-                </button>
-                <button id="print-order-btn" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
-                    <i class="fas fa-print"></i> Imprimir Pedido
-                </button>
+            <div>
+                <label for="item-quantity" class="block text-sm font-medium mb-1">Quantidade</label>
+                <input type="number" id="item-quantity" min="1" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
             </div>
             
-            <!-- History -->
             <div>
-                <h3 class="text-lg font-semibold mb-4">Histórico do Pedido</h3>
-                <div class="space-y-4">
-                    <div class="border-l-4 border-blue-500 pl-4 py-2">
-                        <div class="flex justify-between">
-                            <p class="font-medium">Pedido criado</p>
-                            <p class="text-sm text-gray-500 dark:text-gray-400">10/05/2023 09:15</p>
-                        </div>
-                        <p class="text-sm">Por: João Silva</p>
-                    </div>
-                    <div class="border-l-4 border-blue-500 pl-4 py-2">
-                        <div class="flex justify-between">
-                            <p class="font-medium">Item adicionado</p>
-                            <p class="text-sm text-gray-500 dark:text-gray-400">10/05/2023 09:20</p>
-                        </div>
-                        <p class="text-sm">Produto X - Quantidade: 5 - Valor: R$ 750,00</p>
-                        <p class="text-sm">Por: João Silva</p>
-                    </div>
-                    <div class="border-l-4 border-blue-500 pl-4 py-2">
-                        <div class="flex justify-between">
-                            <p class="font-medium">Item adicionado</p>
-                            <p class="text-sm text-gray-500 dark:text-gray-400">10/05/2023 09:25</p>
-                        </div>
-                        <p class="text-sm">Produto Y - Quantidade: 2 - Valor: R$ 500,00</p>
-                        <p class="text-sm">Por: João Silva</p>
-                    </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" required>
             </div>
-        </div>
-    </div>
-    
-    <!-- Add Item Modal -->
-    <div id="add-item-modal" class="modal-overlay hidden">
-        <div class="modal-content max-w-md">
-            <div class="flex justify-between items-center mb-6">
-                <h2 class="text-2xl font-bold">Adicionar Item</h2>
-                <button id="close-add-item-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                    <i class="fas fa-times text-2xl"></i>
+            
+            <div class="flex justify-end gap-3 pt-4">
+                <button type="button" id="cancel-add-item" 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-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
+                    Adicionar Item
                 </button>
             </div>
-            
-            <form id="add-item-form" class="space-y-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" required>
-                        <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" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
-                </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" required>
-                </div>
-                
-                <div class="flex justify-end gap-3 pt-4">
-                    <button type="button" id="cancel-add-item" 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-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
-                        Adicionar Item
-                    </button>
-                </div>
-            </form>
-        </div>
+        </form>
     </div>
-    
-    <!-- Receive Item Modal -->
-    <div id="receive-item-modal" class="modal-overlay hidden">
-        <div class="modal-content max-w-md">
-            <div class="flex justify-between items-center mb-6">
-                <h2 class="text-2xl font-bold">Registrar Recebimento</h2>
-                <button id="close-receive-item-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                    <i class="fas fa-times text-2xl"></i>
-                </button>
+</div>
+
+<!-- Receive Item Modal -->
+<div id="receive-item-modal" class="modal-overlay hidden">
+    <div class="modal-content max-w-md">
+        <div class="flex justify-between items-center mb-6">
+            <h2 class="text-2xl font-bold">Registrar Recebimento</h2>
+            <button id="close-receive-item-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <i class="fas fa-times text-2xl"></i>
+            </button>
+        </div>
+        
+        <form id="receive-item-form" class="space-y-4">
+            <div>
+                <p class="text-sm font-medium mb-1">Produto</p>
+                <p class="font-medium" id="receive-product-name">Produto X</p>
             </div>
             
-            <form id="receive-item-form" class="space-y-4">
-                <div>
-                    <p class="text-sm font-medium mb-1">Produto</p>
-                    <p class="font-medium" id="receive-product-name">Produto X</p>
-                </div>
-                
-                <div class="grid grid-cols-2 gap-4">
-                    <div>
-                        <p class="text-sm font-medium mb-1">Quantidade Solicitada</p>
-                        <p class="font-medium" id="receive-requested-quantity">5</p>
-                    </div>
-                    <div>
-                        <p class="text-sm font-medium mb-1">Quantidade Pendente</p>
-                        <p class="font-medium" id="receive-pending-quantity">5</p>
-                    </div>
-                </div>
-                
+            <div class="grid grid-cols-2 gap-4">
                 <div>
-                    <label for="received-quantity" class="block text-sm font-medium mb-1">Quantidade Recebida</label>
-                    <input type="number" id="received-quantity" min="1" max="5" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+                    <p class="text-sm font-medium mb-1">Quantidade Solicitada</p>
+                    <p class="font-medium" id="receive-requested-quantity">5</p>
                 </div>
-                
                 <div>
-                    <label for="receipt-date" class="block text-sm font-medium mb-1">Data do Recebimento</label>
-                    <input type="date" id="receipt-date" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+                    <p class="text-sm font-medium mb-1">Quantidade Pendente</p>
+                    <p class="font-medium" id="receive-pending-quantity">5</p>
                 </div>
-                
-                <div>
-                    <label for="receipt-notes" class="block text-sm font-medium mb-1">Observações</label>
-                    <textarea id="receipt-notes" rows="3" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"></textarea>
-                </div>
-                
-                <div class="flex justify-end gap-3 pt-4">
-                    <button type="button" id="cancel-receive-item" 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">
-                        Registrar Recebimento
-                    </button>
-                </div>
-            </form>
-        </div>
+            </div>
+            
+            <div>
+                <label for="received-quantity" class="block text-sm font-medium mb-1">Quantidade Recebida</label>
+                <input type="number" id="received-quantity" min="1" max="5" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+            </div>
+            
+            <div>
+                <label for="receipt-date" class="block text-sm font-medium mb-1">Data do Recebimento</label>
+                <input type="date" id="receipt-date" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required>
+            </div>
+            
+            <div>
+                <label for="receipt-notes" class="block text-sm font-medium mb-1">Observações</label>
+                <textarea id="receipt-notes" rows="3" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"></textarea>
+            </div>
+            
+            <div class="flex justify-end gap-3 pt-4">
+                <button type="button" id="cancel-receive-item" 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">
+                    Registrar Recebimento
+                </button>
+            </div>
+        </form>
     </div>
+</div>
+
+<script>
+    // Theme Toggle
+    document.getElementById('theme-toggle').addEventListener('click', function() {
+        document.documentElement.classList.toggle('dark');
+        localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+    });
+    
+    // Check for saved theme preference
+    if (localStorage.getItem('theme') === 'light') {
+        document.documentElement.classList.remove('dark');
+    }
+    
+    // Notification Dropdown Toggle
+    const notificationBtn = document.getElementById('notification-btn');
+    const notificationDropdown = document.getElementById('notification-dropdown');
+    const markAllReadBtn = document.getElementById('mark-all-read');
+    const notificationBadge = document.querySelector('.notification-badge');
     
-    <script>
-        // Theme Toggle
-        document.getElementById('theme-toggle').addEventListener('click', function() {
-            document.documentElement.classList.toggle('dark');
-            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+    notificationBtn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        notificationDropdown.classList.toggle('show');
+    });
+    
+    markAllReadBtn.addEventListener('click', function() {
+        const unreadItems = document.querySelectorAll('.notification-item.unread');
+        unreadItems.forEach(item => {
+            item.classList.remove('unread');
         });
+        notificationBadge.textContent = '0';
+        notificationBadge.style.display = 'none';
         
-        // Check for saved theme preference
-        if (localStorage.getItem('theme') === 'light') {
-            document.documentElement.classList.remove('dark');
+        Swal.fire({
+            title: 'Notificações marcadas como lidas',
+            icon: 'success',
+            timer: 1500,
+            showConfirmButton: false
+        });
+    });
+    
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(e) {
+        if (!notificationDropdown.contains(e.target) && e.target !== notificationBtn) {
+            notificationDropdown.classList.remove('show');
         }
+    });
+    
+    // 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;
         
-        // 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');
+        if (productSelect.value === '' || quantity === '' || unitPrice === '') {
+            Swal.fire({
+                title: 'Campos obrigatórios',
+                text: 'Por favor, preencha todos os campos do item.',
+                icon: 'warning'
+            });
+            return;
+        }
         
-        newOrderBtn.addEventListener('click', function() {
-            newOrderOffcanvas.classList.add('show');
-            document.body.style.overflow = 'hidden';
-        });
+        const totalValue = (parseFloat(quantity) * parseFloat(unitPrice.replace('R$ ', '').replace('.', '').replace(',', '.'))).toFixed(2);
         
-        closeNewOrder.addEventListener('click', function() {
-            newOrderOffcanvas.classList.remove('show');
-            document.body.style.overflow = 'auto';
-        });
+        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>
+        `;
         
-        cancelNewOrder.addEventListener('click', function() {
-            newOrderOffcanvas.classList.remove('show');
-            document.body.style.overflow = 'auto';
-        });
+        orderItemsList.appendChild(newRow);
         
-        // Add items to new order
-        const addItemToOrderBtn = document.getElementById('add-item-to-order');
-        const orderItemsList = document.getElementById('order-items-list');
+        // Clear form
+        productSelect.value = '';
+        document.getElementById('item-quantity').value = '1';
+        document.getElementById('item-unit-price').value = '';
         
-        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();
-            });
+        // 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();
         
-        // 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;
-            }
-            
+        if (orderItemsList.children.length === 0) {
             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');
-        const closeModal = document.getElementById('close-modal');
-        
-        viewButtons.forEach(button => {
-            button.addEventListener('click', function() {
-                const orderId = this.getAttribute('data-id');
-                // In a real app, we would fetch order details based on orderId
-                orderDetailModal.classList.remove('hidden');
-                document.body.style.overflow = 'hidden';
+                title: 'Itens obrigatórios',
+                text: 'Por favor, adicione pelo menos um item ao pedido.',
+                icon: 'warning'
             });
-        });
+            return;
+        }
         
-        closeModal.addEventListener('click', function() {
-            orderDetailModal.classList.add('hidden');
-            document.body.style.overflow = 'auto';
+        Swal.fire({
+            title: 'Pedido criado!',
+            text: 'O novo pedido de compra foi criado com sucesso.',
+            icon: 'success'
         });
         
-        // Add Item Modal
-        const addItemBtn = document.getElementById('add-item-btn');
-        const addItemModal = document.getElementById('add-item-modal');
-        const closeAddItemModal = document.getElementById('close-add-item-modal');
-        const cancelAddItem = document.getElementById('cancel-add-item');
-        
-        addItemBtn.addEventListener('click', function() {
-            addItemModal.classList.remove('hidden');
+        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');
+    const closeModal = document.getElementById('close-modal');
+    
+    viewButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const orderId = this.getAttribute('data-id');
+            // In a real app, we would fetch order details based on orderId
+            orderDetailModal.classList.remove('hidden');
             document.body.style.overflow = 'hidden';
         });
-        
-        closeAddItemModal.addEventListener('click', function() {
-            addItemModal.classList.add('hidden');
-            document.body.style.overflow = 'auto';
+    });
+    
+    closeModal.addEventListener('click', function() {
+        orderDetailModal.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+    });
+    
+    // Add Item Modal
+    const addItemBtn = document.getElementById('add-item-btn');
+    const addItemModal = document.getElementById('add-item-modal');
+    const closeAddItemModal = document.getElementById('close-add-item-modal');
+    const cancelAddItem = document.getElementById('cancel-add-item');
+    
+    addItemBtn.addEventListener('click', function() {
+        addItemModal.classList.remove('hidden');
+        document.body.style.overflow = 'hidden';
+    });
+    
+    closeAddItemModal.addEventListener('click', function() {
+        addItemModal.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+    });
+    
+    cancelAddItem.addEventListener('click', function() {
+        addItemModal.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+    });
+    
+    // Receive Item Modal
+    const receiveItemBtns = document.querySelectorAll('.receive-item-btn');
+    const receiveItemModal = document.getElementById('receive-item-modal');
+    const closeReceiveItemModal = document.getElementById('close-receive-item-modal');
+    const cancelReceiveItem = document.getElementById('cancel-receive-item');
+    
+    receiveItemBtns.forEach(button => {
+        button.addEventListener('click', function() {
+            receiveItemModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
         });
-        
-        cancelAddItem.addEventListener('click', function() {
-            addItemModal.classList.add('hidden');
-            document.body.style.overflow = 'auto';
+    });
+    
+    closeReceiveItemModal.addEventListener('click', function() {
+        receiveItemModal.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+    });
+    
+    cancelReceiveItem.addEventListener('click', function() {
+        receiveItemModal.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+    });
+    
+    // Cancel Order Confirmation
+    const cancelOrderBtn = document.getElementById('cancel-order-btn');
+    const cancelButtons = document.querySelectorAll('.cancel-btn');
+    
+    function showCancelConfirmation() {
+        Swal.fire({
+            title: 'Cancelar Pedido',
+            text: 'Tem certeza que deseja cancelar este pedido? Esta ação não pode ser desfeita.',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#d33',
+            cancelButtonColor: '#3085d6',
+            confirmButtonText: 'Sim, cancelar!',
+            cancelButtonText: 'Não, manter'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                Swal.fire(
+                    'Cancelado!',
+                    'O pedido foi cancelado com sucesso.',
+                    'success'
+                );
+                // In a real app, we would update the order status to "Cancelado"
+            }
         });
-        
-        // Receive Item Modal
-        const receiveItemBtns = document.querySelectorAll('.receive-item-btn');
-        const receiveItemModal = document.getElementById('receive-item-modal');
-        const closeReceiveItemModal = document.getElementById('close-receive-item-modal');
-        const cancelReceiveItem = document.getElementById('cancel-receive-item');
-        
-        receiveItemBtns.forEach(button => {
-            button.addEventListener('click', function() {
-                receiveItemModal.classList.remove('hidden');
-                document.body.style.overflow = 'hidden';
-            });
+    }
+    
+    cancelOrderBtn.addEventListener('click', showCancelConfirmation);
+    
+    cancelButtons.forEach(button => {
+        button.addEventListener('click', showCancelConfirmation);
+    });
+    
+    // Send for Approval
+    const sendApprovalBtn = document.getElementById('send-approval-btn');
+    
+    sendApprovalBtn.addEventListener('click', function() {
+        Swal.fire({
+            title: 'Enviar para Aprovação',
+            text: 'Deseja enviar este pedido para aprovação?',
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Sim, enviar!',
+            cancelButtonText: 'Cancelar'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                Swal.fire(
+                    'Enviado!',
+                    'O pedido foi enviado para aprovação com sucesso.',
+                    'success'
+                );
+                // In a real app, we would update the order status to "Aguardando Aprovação"
+            }
         });
-        
-        closeReceiveItemModal.addEventListener('click', function() {
-            receiveItemModal.classList.add('hidden');
-            document.body.style.overflow = 'auto';
+    });
+    
+    // Register Receipt
+    const registerReceiptBtn = document.getElementById('register-receipt-btn');
+    
+    registerReceiptBtn.addEventListener('click', function() {
+        Swal.fire({
+            title: 'Registrar Recebimento',
+            text: 'Deseja registrar o recebimento deste pedido?',
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Sim, registrar!',
+            cancelButtonText: 'Cancelar'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                Swal.fire(
+                    'Registrado!',
+                    'O recebimento do pedido foi registrado com sucesso.',
+                    'success'
+                );
+                // In a real app, we would update the order status to "Recebido Parcial" or "Recebido Total"
+            }
         });
-        
-        cancelReceiveItem.addEventListener('click', function() {
-            receiveItemModal.classList.add('hidden');
-            document.body.style.overflow = 'auto';
+    });
+    
+    // Print Order
+    const printOrderBtn = document.getElementById('print-order-btn');
+    const printButtons = document.querySelectorAll('.print-btn');
+    
+    function showPrintConfirmation() {
+        Swal.fire({
+            title: 'Imprimir Pedido',
+            text: 'Preparando o pedido para impressão...',
+            icon: 'info',
+            timer: 1500,
+            showConfirmButton: false
         });
-        
-        // Cancel Order Confirmation
-        const cancelOrderBtn = document.getElementById('cancel-order-btn');
-        const cancelButtons = document.querySelectorAll('.cancel-btn');
-        
-        function showCancelConfirmation() {
+    }
+    
+    printOrderBtn.addEventListener('click', showPrintConfirmation);
+    
+    printButtons.forEach(button => {
+        button.addEventListener('click', showPrintConfirmation);
+    });
+    
+    // Remove Item Confirmation
+    const removeItemBtns = document.querySelectorAll('.remove-item-btn');
+    
+    removeItemBtns.forEach(button => {
+        button.addEventListener('click', function() {
             Swal.fire({
-                title: 'Cancelar Pedido',
-                text: 'Tem certeza que deseja cancelar este pedido? Esta ação não pode ser desfeita.',
+                title: 'Remover Item',
+                text: 'Tem certeza que deseja remover este item do pedido?',
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#d33',
                 cancelButtonColor: '#3085d6',
-                confirmButtonText: 'Sim, cancelar!',
-                cancelButtonText: 'Não, manter'
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    Swal.fire(
-                        'Cancelado!',
-                        'O pedido foi cancelado com sucesso.',
-                        'success'
-                    );
-                    // In a real app, we would update the order status to "Cancelado"
-                }
-            });
-        }
-        
-        cancelOrderBtn.addEventListener('click', showCancelConfirmation);
-        
-        cancelButtons.forEach(button => {
-            button.addEventListener('click', showCancelConfirmation);
-        });
-        
-        // Send for Approval
-        const sendApprovalBtn = document.getElementById('send-approval-btn');
-        
-        sendApprovalBtn.addEventListener('click', function() {
-            Swal.fire({
-                title: 'Enviar para Aprovação',
-                text: 'Deseja enviar este pedido para aprovação?',
-                icon: 'question',
-                showCancelButton: true,
-                confirmButtonColor: '#3085d6',
-                cancelButtonColor: '#d33',
-                confirmButtonText: 'Sim, enviar!',
+                confirmButtonText: 'Sim, remover!',
                 cancelButtonText: 'Cancelar'
             }).then((result) => {
                 if (result.isConfirmed) {
                     Swal.fire(
-                        'Enviado!',
-                        'O pedido foi enviado para aprovação com sucesso.',
+                        'Removido!',
+                        'O item foi removido do pedido com sucesso.',
                         'success'
                     );
-                    // In a real app, we would update the order status to "Aguardando Aprovação"
+                    // In a real app, we would remove the item from the order
                 }
             });
         });
-        
-        // Register Receipt
-        const registerReceiptBtn = document.getElementById('register-receipt-btn');
-        
-        registerReceiptBtn.addEventListener('click', function() {
-            Swal.fire({
-                title: 'Registrar Recebimento',
-                text: 'Deseja registrar o recebimento deste pedido?',
-                icon: 'question',
-                showCancelButton: true,
-                confirmButtonColor: '#3085d6',
-                cancelButtonColor: '#d33',
-                confirmButtonText: 'Sim, registrar!',
-                cancelButtonText: 'Cancelar'
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    Swal.fire(
-                        'Registrado!',
-                        'O recebimento do pedido foi registrado com sucesso.',
-                        'success'
-                    );
-                    // In a real app, we would update the order status to "Recebido Parcial" or "Recebido Total"
-                }
-            });
-        });
-        
-        // Print Order
-        const printOrderBtn = document.getElementById('print-order-btn');
-        const printButtons = document.querySelectorAll('.print-btn');
-        
-        function showPrintConfirmation() {
-            Swal.fire({
-                title: 'Imprimir Pedido',
-                text: 'Preparando o pedido para impressão...',
-                icon: 'info',
-                timer: 1500,
-                showConfirmButton: false
-            });
-        }
-        
-        printOrderBtn.addEventListener('click', showPrintConfirmation);
-        
-        printButtons.forEach(button => {
-            button.addEventListener('click', showPrintConfirmation);
-        });
-        
-        // Remove Item Confirmation
-        const removeItemBtns = document.querySelectorAll('.remove-item-btn');
-        
-        removeItemBtns.forEach(button => {
-            button.addEventListener('click', function() {
-                Swal.fire({
-                    title: 'Remover Item',
-                    text: 'Tem certeza que deseja remover este item do pedido?',
-                    icon: 'warning',
-                    showCancelButton: true,
-                    confirmButtonColor: '#d33',
-                    cancelButtonColor: '#3085d6',
-                    confirmButtonText: 'Sim, remover!',
-                    cancelButtonText: 'Cancelar'
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        Swal.fire(
-                            'Removido!',
-                            'O item foi removido do pedido com sucesso.',
-                            'success'
-                        );
-                        // In a real app, we would remove the item from the order
-                    }
-                });
-            });
-        });
-        
-        // Apply Filters
-        document.getElementById('apply-filters').addEventListener('click', function() {
-            // In a real app, we would filter the orders based on the selected filters
-            Swal.fire({
-                title: 'Filtros Aplicados',
-                text: 'Os filtros foram aplicados com sucesso.',
-                icon: 'success',
-                timer: 1500,
-                showConfirmButton: false
-            });
+    });
+    
+    // Apply Filters
+    document.getElementById('apply-filters').addEventListener('click', function() {
+        // In a real app, we would filter the orders based on the selected filters
+        Swal.fire({
+            title: 'Filtros Aplicados',
+            text: 'Os filtros foram aplicados com sucesso.',
+            icon: 'success',
+            timer: 1500,
+            showConfirmButton: false
         });
+    });
+    
+    // Clear Filters
+    document.getElementById('clear-filters').addEventListener('click', function() {
+        document.getElementById('supplier-filter').value = '';
+        document.getElementById('status-filter').value = '';
+        document.getElementById('responsible-filter').value = '';
+        document.getElementById('date-filter').value = '';
         
-        // Clear Filters
-        document.getElementById('clear-filters').addEventListener('click', function() {
-            document.getElementById('supplier-filter').value = '';
-            document.getElementById('status-filter').value = '';
-            document.getElementById('responsible-filter').value = '';
-            document.getElementById('date-filter').value = '';
-            
-            Swal.fire({
-                title: 'Filtros Limpos',
-                text: 'Todos os filtros foram resetados.',
-                icon: 'info',
-                timer: 1500,
-                showConfirmButton: false
-            });
+        Swal.fire({
+            title: 'Filtros Limpos',
+            text: 'Todos os filtros foram resetados.',
+            icon: 'info',
+            timer: 1500,
+            showConfirmButton: false
         });
-        
-        // Money format input
-        document.querySelectorAll('.money').forEach(input => {
-            input.addEventListener('input', function() {
-                let value = this.value.replace(/\D/g, '');
-                value = (value / 100).toFixed(2) + '';
-                value = value.replace(".", ",");
-                value = value.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
-                this.value = 'R$ ' + value;
-            });
+    });
+    
+    // Money format input
+    document.querySelectorAll('.money').forEach(input => {
+        input.addEventListener('input', function() {
+            let value = this.value.replace(/\D/g, '');
+            value = (value / 100).toFixed(2) + '';
+            value = value.replace(".", ",");
+            value = value.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
+            this.value = 'R$ ' + value;
         });
-    </script>
+    });
+</script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gallabs/tom-system-pedido-compra" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt

@@ -1,2 +1,3 @@
 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".
+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".
+Ponha um ícone (um sino) de notificação, com um badge indicando 6 notificações, e ao clicar, exiba as notificações num DropDown.