Spaces:

gallabs
/

tom-system-pedido-compra

Running

App Files Files Community

gallabs commited on May 23, 2025

Commit

b8a6467

verified ·

1 Parent(s): 1d9bfef

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +874 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tom System Pedido Compra
-emoji: 🦀
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tom-system-pedido-compra
+emoji: 🐳
+colorFrom: green
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,874 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="pt-BR" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pedidos de Compra</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <style>
+        .status-em-elaboracao {
+            background-color: rgba(59, 130, 246, 0.2);
+            color: rgb(59, 130, 246);
+        }
+        .status-aguardando-aprovacao {
+            background-color: rgba(234, 179, 8, 0.2);
+            color: rgb(234, 179, 8);
+        }
+        .status-aprovado {
+            background-color: rgba(34, 197, 94, 0.2);
+            color: rgb(34, 197, 94);
+        }
+        .status-enviado {
+            background-color: rgba(168, 85, 247, 0.2);
+            color: rgb(168, 85, 247);
+        }
+        .status-recebido-parcial {
+            background-color: rgba(249, 115, 22, 0.2);
+            color: rgb(249, 115, 22);
+        }
+        .status-recebido-total {
+            background-color: rgba(16, 185, 129, 0.2);
+            color: rgb(16, 185, 129);
+        }
+        .status-cancelado {
+            background-color: rgba(239, 68, 68, 0.2);
+            color: rgb(239, 68, 68);
+        }
+        .item-status-pendente {
+            background-color: rgba(239, 68, 68, 0.2);
+            color: rgb(239, 68, 68);
+        }
+        .item-status-recebido {
+            background-color: rgba(16, 185, 129, 0.2);
+            color: rgb(16, 185, 129);
+        }
+        .item-status-parcial {
+            background-color: rgba(249, 115, 22, 0.2);
+            color: rgb(249, 115, 22);
+        }
+        .dark .modal-content {
+            background-color: #1f2937;
+        }
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        .modal-content {
+            background-color: white;
+            border-radius: 0.5rem;
+            width: 90%;
+            max-width: 1200px;
+            max-height: 90vh;
+            overflow-y: auto;
+            padding: 1.5rem;
+        }
+        @media (max-width: 768px) {
+            .responsive-table {
+                display: block;
+                overflow-x: auto;
+                white-space: nowrap;
+            }
+        }
+    </style>
+</head>
+<body class="dark:bg-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-300">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+            <div>
+                <h1 class="text-3xl font-bold">Pedidos de Compra</h1>
+                <p class="text-gray-500 dark:text-gray-400">Gerencie todos os pedidos de compra da sua empresa</p>
+            </div>
+            <div class="flex items-center gap-4">
+                <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
+                    <i class="fas fa-moon dark:hidden"></i>
+                    <i class="fas fa-sun hidden dark:inline"></i>
+                </button>
+                <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>
+            </div>
+        </div>
+        <!-- Filters -->
+        <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg mb-6">
+            <h2 class="text-lg font-semibold mb-4">Filtros</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div>
+                    <label for="supplier-filter" class="block text-sm font-medium mb-1">Fornecedor</label>
+                    <select id="supplier-filter" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                        <option value="">Todos</option>
+                        <option value="1">Fornecedor A</option>
+                        <option value="2">Fornecedor B</option>
+                        <option value="3">Fornecedor C</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="status-filter" class="block text-sm font-medium mb-1">Status</label>
+                    <select id="status-filter" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                        <option value="">Todos</option>
+                        <option value="Em Elaboração">Em Elaboração</option>
+                        <option value="Aguardando Aprovação">Aguardando Aprovação</option>
+                        <option value="Aprovado">Aprovado</option>
+                        <option value="Enviado">Enviado</option>
+                        <option value="Recebido Parcial">Recebido Parcial</option>
+                        <option value="Recebido Total">Recebido Total</option>
+                        <option value="Cancelado">Cancelado</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="responsible-filter" class="block text-sm font-medium mb-1">Responsável</label>
+                    <select id="responsible-filter" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                        <option value="">Todos</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="date-filter" class="block text-sm font-medium mb-1">Período</label>
+                    <input type="date" id="date-filter" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                </div>
+            </div>
+            <div class="flex justify-end mt-4">
+                <button id="apply-filters" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg mr-2">
+                    Aplicar Filtros
+                </button>
+                <button id="clear-filters" 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">
+                    Limpar
+                </button>
+            </div>
+        </div>
+        <!-- Orders Table -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+            <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">Número</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Fornecedor</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Responsável</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Emissão</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Previsão Entrega</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">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">Ações</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                        <!-- Sample Data -->
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">PC-2023-001</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Fornecedor A</td>
+                            <td class="px-6 py-4 whitespace-nowrap">João Silva</td>
+                            <td class="px-6 py-4 whitespace-nowrap">10/05/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">25/05/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 py-1 rounded-full text-xs font-semibold status-em-elaboracao">Em Elaboração</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">R$ 1.250,00</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <button class="view-btn text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 mr-2" data-id="1">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                                <button class="edit-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2" data-id="1">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="cancel-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 mr-2" data-id="1">
+                                    <i class="fas fa-times-circle"></i>
+                                </button>
+                                <button class="print-btn text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300" data-id="1">
+                                    <i class="fas fa-print"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">PC-2023-002</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Fornecedor B</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Maria Souza</td>
+                            <td class="px-6 py-4 whitespace-nowrap">12/05/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">30/05/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 py-1 rounded-full text-xs font-semibold status-aguardando-aprovacao">Aguardando Aprovação</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">R$ 3.420,00</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <button class="view-btn text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 mr-2" data-id="2">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                                <button class="edit-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2" data-id="2">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="cancel-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 mr-2" data-id="2">
+                                    <i class="fas fa-times-circle"></i>
+                                </button>
+                                <button class="print-btn text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300" data-id="2">
+                                    <i class="fas fa-print"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">PC-2023-003</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Fornecedor C</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Carlos Oliveira</td>
+                            <td class="px-6 py-4 whitespace-nowrap">15/05/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">05/06/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 py-1 rounded-full text-xs font-semibold status-aprovado">Aprovado</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">R$ 2.150,00</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <button class="view-btn text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 mr-2" data-id="3">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                                <button class="edit-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2" data-id="3">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="cancel-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 mr-2" data-id="3">
+                                    <i class="fas fa-times-circle"></i>
+                                </button>
+                                <button class="print-btn text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300" data-id="3">
+                                    <i class="fas fa-print"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">PC-2023-004</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Fornecedor A</td>
+                            <td class="px-6 py-4 whitespace-nowrap">João Silva</td>
+                            <td class="px-6 py-4 whitespace-nowrap">18/05/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">10/06/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 py-1 rounded-full text-xs font-semibold status-enviado">Enviado</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">R$ 4.750,00</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <button class="view-btn text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 mr-2" data-id="4">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                                <button class="edit-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2" data-id="4">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="cancel-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 mr-2" data-id="4">
+                                    <i class="fas fa-times-circle"></i>
+                                </button>
+                                <button class="print-btn text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300" data-id="4">
+                                    <i class="fas fa-print"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">PC-2023-005</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Fornecedor B</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Maria Souza</td>
+                            <td class="px-6 py-4 whitespace-nowrap">20/05/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">15/06/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 py-1 rounded-full text-xs font-semibold status-recebido-parcial">Recebido Parcial</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">R$ 5.300,00</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <button class="view-btn text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 mr-2" data-id="5">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                                <button class="edit-btn text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2" data-id="5">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="cancel-btn text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 mr-2" data-id="5">
+                                    <i class="fas fa-times-circle"></i>
+                                </button>
+                                <button class="print-btn text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300" data-id="5">
+                                    <i class="fas fa-print"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <!-- Pagination -->
+        <div class="flex justify-between items-center mt-6">
+            <div class="text-sm text-gray-500 dark:text-gray-400">
+                Mostrando 1 a 5 de 15 registros
+            </div>
+            <div class="flex gap-1">
+                <button class="px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                    <i class="fas fa-angle-left"></i>
+                </button>
+                <button class="px-3 py-1 rounded-lg bg-blue-600 text-white">1</button>
+                <button class="px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">2</button>
+                <button class="px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">3</button>
+                <button class="px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                    <i class="fas fa-angle-right"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Order Detail Modal -->
+    <div id="order-detail-modal" class="modal-overlay hidden">
+        <div class="modal-content">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Detalhes do Pedido de Compra</h2>
+                <button id="close-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>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold mb-4">Dados do Pedido</h3>
+                    <div class="space-y-3">
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">Número do Pedido</p>
+                            <p class="font-medium" id="order-number">PC-2023-001</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">Status</p>
+                            <p class="font-medium"><span class="px-2 py-1 rounded-full text-xs font-semibold status-em-elaboracao" id="order-status">Em Elaboração</span></p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">Data de Emissão</p>
+                            <p class="font-medium" id="order-date">10/05/2023</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">Previsão de Entrega</p>
+                            <p class="font-medium" id="order-delivery-date">25/05/2023</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">Dados do Fornecedor</h3>
+                    <div class="space-y-3">
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">Fornecedor</p>
+                            <p class="font-medium" id="supplier-name">Fornecedor A</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">CNPJ</p>
+                            <p class="font-medium" id="supplier-cnpj">12.345.678/0001-90</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">Contato</p>
+                            <p class="font-medium" id="supplier-contact">contato@fornecedora.com.br</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">Dados da Compra</h3>
+                    <div class="space-y-3">
+                        <div>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">Responsável</p>
+                            <p class="font-medium" id="responsible-name">João Silva</p>
+                        </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>
+            </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>
+                        <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>
+                <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>
+    </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>
+                <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>
+                    <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');
+        }
+        // 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';
+            });
+        });
+        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';
+            });
+        });
+        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"
+                }
+            });
+        }
+        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"
+                }
+            });
+        });
+        // 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
+            });
+        });
+        // 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
+            });
+        });
+        // 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() {
+                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>
+<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 ADDED Viewed

	@@ -0,0 +1 @@

+ 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".