|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<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> |
|
|
.offcanvas { |
|
|
transition: transform 0.3s ease-in-out; |
|
|
} |
|
|
.offcanvas-right { |
|
|
transform: translateX(100%); |
|
|
} |
|
|
.offcanvas-right.show { |
|
|
transform: translateX(0); |
|
|
} |
|
|
.backdrop { |
|
|
transition: opacity 0.3s ease-in-out; |
|
|
} |
|
|
.backdrop.show { |
|
|
opacity: 1; |
|
|
pointer-events: auto; |
|
|
} |
|
|
.status-em-elaboracao { |
|
|
background-color: #4b5563; |
|
|
color: #d1d5db; |
|
|
} |
|
|
.status-aguardando-aprovacao { |
|
|
background-color: #f59e0b; |
|
|
color: #1e293b; |
|
|
} |
|
|
.status-aprovado { |
|
|
background-color: #10b981; |
|
|
color: #1e293b; |
|
|
} |
|
|
.status-enviado { |
|
|
background-color: #3b82f6; |
|
|
color: #ffffff; |
|
|
} |
|
|
.status-recebido-parcial { |
|
|
background-color: #8b5cf6; |
|
|
color: #ffffff; |
|
|
} |
|
|
.status-recebido-total { |
|
|
background-color: #22c55e; |
|
|
color: #1e293b; |
|
|
} |
|
|
.status-cancelado { |
|
|
background-color: #ef4444; |
|
|
color: #ffffff; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.offcanvas { |
|
|
width: 100% !important; |
|
|
} |
|
|
} |
|
|
#itemForm { |
|
|
display: none; |
|
|
} |
|
|
#itemForm.show { |
|
|
display: block; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-200 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"> |
|
|
<h1 class="text-3xl font-bold text-blue-400">Pedidos de Compra</h1> |
|
|
<div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto"> |
|
|
<button id="newOrderBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg flex items-center gap-2"> |
|
|
<i class="fas fa-plus"></i> Novo Pedido de Compra |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="filters" class="bg-gray-800 p-4 rounded-lg mb-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Fornecedor</label> |
|
|
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
<option>Todos</option> |
|
|
<option>Fornecedor A</option> |
|
|
<option>Fornecedor B</option> |
|
|
<option>Fornecedor C</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Status</label> |
|
|
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
<option>Todos</option> |
|
|
<option>Em Elaboração</option> |
|
|
<option>Aguardando Aprovação</option> |
|
|
<option>Aprovado</option> |
|
|
<option>Enviado</option> |
|
|
<option>Recebido Parcial</option> |
|
|
<option>Recebido Total</option> |
|
|
<option>Cancelado</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Responsável</label> |
|
|
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
<option>Todos</option> |
|
|
<option>João Silva</option> |
|
|
<option>Maria Souza</option> |
|
|
<option>Carlos Oliveira</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Período</label> |
|
|
<input type="date" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end mt-4 gap-2"> |
|
|
<button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">Limpar</button> |
|
|
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg">Aplicar</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead class="bg-gray-700"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Nº Pedido</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Fornecedor</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Responsável</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Emissão</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Previsão Entrega</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Status</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Valor Total</th> |
|
|
<th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider">Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-700"> |
|
|
<tr class="hover:bg-gray-700/50"> |
|
|
<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 status-recebido-total">Recebido Total</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">R$ 5.245,00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right"> |
|
|
<div class="flex justify-end gap-2"> |
|
|
<button onclick="viewOrder('PC-2023-001')" class="p-1 text-blue-400 hover:text-blue-300"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="p-1 text-yellow-400 hover:text-yellow-300"> |
|
|
<i class="fas fa-print"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-700/50"> |
|
|
<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">15/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 status-enviado">Enviado</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">R$ 3.780,50</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right"> |
|
|
<div class="flex justify-end gap-2"> |
|
|
<button onclick="viewOrder('PC-2023-002')" class="p-1 text-blue-400 hover:text-blue-300"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="p-1 text-yellow-400 hover:text-yellow-300"> |
|
|
<i class="fas fa-print"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-700/50"> |
|
|
<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">18/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 status-aguardando-aprovacao">Aguardando Aprovação</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">R$ 12.450,00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right"> |
|
|
<div class="flex justify-end gap-2"> |
|
|
<button onclick="viewOrder('PC-2023-003')" class="p-1 text-blue-400 hover:text-blue-300"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="p-1 text-yellow-400 hover:text-yellow-300"> |
|
|
<i class="fas fa-print"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-700/50"> |
|
|
<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">20/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 status-em-elaboracao">Em Elaboração</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">R$ 7.890,25</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right"> |
|
|
<div class="flex justify-end gap-2"> |
|
|
<button onclick="viewOrder('PC-2023-004')" class="p-1 text-blue-400 hover:text-blue-300"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="p-1 text-green-400 hover:text-green-300"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button onclick="cancelOrder('PC-2023-004')" class="p-1 text-red-400 hover:text-red-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<button class="p-1 text-yellow-400 hover:text-yellow-300"> |
|
|
<i class="fas fa-print"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-700/50"> |
|
|
<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">22/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 status-recebido-parcial">Recebido Parcial</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">R$ 9.120,75</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right"> |
|
|
<div class="flex justify-end gap-2"> |
|
|
<button onclick="viewOrder('PC-2023-005')" class="p-1 text-blue-400 hover:text-blue-300"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button onclick="registerReceipt('PC-2023-005')" class="p-1 text-purple-400 hover:text-purple-300"> |
|
|
<i class="fas fa-truck-loading"></i> |
|
|
</button> |
|
|
<button class="p-1 text-yellow-400 hover:text-yellow-300"> |
|
|
<i class="fas fa-print"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="px-6 py-4 bg-gray-700 flex items-center justify-between"> |
|
|
<div class="text-sm text-gray-400"> |
|
|
Mostrando <span class="font-medium">1</span> a <span class="font-medium">5</span> de <span class="font-medium">15</span> resultados |
|
|
</div> |
|
|
<div class="flex gap-1"> |
|
|
<button class="px-3 py-1 bg-gray-600 rounded-md hover:bg-gray-500"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-blue-600 rounded-md">1</button> |
|
|
<button class="px-3 py-1 bg-gray-600 rounded-md hover:bg-gray-500">2</button> |
|
|
<button class="px-3 py-1 bg-gray-600 rounded-md hover:bg-gray-500">3</button> |
|
|
<button class="px-3 py-1 bg-gray-600 rounded-md hover:bg-gray-500"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="orderModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-900 opacity-75"></div> |
|
|
</div> |
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
<div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full"> |
|
|
<div class="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="text-2xl font-bold text-blue-400" id="modalOrderNumber">Pedido PC-2023-001</h3> |
|
|
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<h4 class="font-medium text-blue-300 mb-2">Fornecedor</h4> |
|
|
<p id="modalSupplier">Fornecedor A</p> |
|
|
<p id="modalSupplierContact">[email protected]</p> |
|
|
<p id="modalSupplierPhone">(11) 9999-9999</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<h4 class="font-medium text-blue-300 mb-2">Responsável</h4> |
|
|
<p id="modalResponsible">João Silva</p> |
|
|
<p id="modalDepartment">Compras</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<h4 class="font-medium text-blue-300 mb-2">Datas</h4> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Emissão:</p> |
|
|
<p id="modalEmissionDate">10/05/2023</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Previsão Entrega:</p> |
|
|
<p id="modalDeliveryDate">25/05/2023</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Pagamento:</p> |
|
|
<p id="modalPayment">30 dias</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Status:</p> |
|
|
<p id="modalStatus"><span class="px-2 py-1 rounded-full text-xs status-recebido-total">Recebido Total</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h4 class="font-medium text-lg">Itens do Pedido</h4> |
|
|
<button id="addItemBtn" class="px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded-md text-sm"> |
|
|
<i class="fas fa-plus mr-1"></i> Adicionar Item |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="itemForm" class="bg-gray-700 p-4 rounded-lg mb-4"> |
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Produto *</label> |
|
|
<select class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-sm"> |
|
|
<option>Selecione um produto</option> |
|
|
<option>Notebook Dell XPS 15</option> |
|
|
<option>Monitor 27" 4K</option> |
|
|
<option>Teclado Mecânico</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Quantidade *</label> |
|
|
<input type="number" min="1" value="1" class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-sm"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Valor Unitário *</label> |
|
|
<input type="text" placeholder="R$ 0,00" class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-sm"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Valor Total</label> |
|
|
<input type="text" placeholder="R$ 0,00" readonly class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-sm"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end mt-4 gap-2"> |
|
|
<button type="button" onclick="hideItemForm()" class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded-md text-sm"> |
|
|
Cancelar |
|
|
</button> |
|
|
<button type="button" class="px-3 py-1 bg-green-600 hover:bg-green-500 rounded-md text-sm"> |
|
|
<i class="fas fa-save mr-1"></i> Salvar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead class="bg-gray-700"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left">Produto</th> |
|
|
<th class="px-4 py-2 text-left">Categoria</th> |
|
|
<th class="px-4 py-2 text-left">Quantidade</th> |
|
|
<th class="px-4 py-2 text-left">Unitário</th> |
|
|
<th class="px-4 py-2 text-left">Total</th> |
|
|
<th class="px-4 py-2 text-left">Recebido</th> |
|
|
<th class="px-4 py-2 text-left">Status</th> |
|
|
<th class="px-4 py-2 text-right">Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-700"> |
|
|
<tr> |
|
|
<td class="px-4 py-3">Notebook Dell XPS 15</td> |
|
|
<td class="px-4 py-3">Informática</td> |
|
|
<td class="px-4 py-3">2</td> |
|
|
<td class="px-4 py-3">R$ 4.500,00</td> |
|
|
<td class="px-4 py-3">R$ 9.000,00</td> |
|
|
<td class="px-4 py-3">2</td> |
|
|
<td class="px-4 py-3"> |
|
|
<span class="px-2 py-1 rounded-full text-xs bg-green-600 text-white">Recebido</span> |
|
|
</td> |
|
|
<td class="px-4 py-3 text-right"> |
|
|
<div class="flex justify-end gap-1"> |
|
|
<button onclick="editItem('Notebook Dell XPS 15', 2, 4500)" class="p-1 text-blue-400 hover:text-blue-300"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button onclick="deleteItem('Notebook Dell XPS 15')" class="p-1 text-red-400 hover:text-red-300"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-3">Monitor 27" 4K</td> |
|
|
<td class="px-4 py-3">Informática</td> |
|
|
<td class="px-4 py-3">5</td> |
|
|
<td class="px-4 py-3">R$ 1.250,00</td> |
|
|
<td class="px-4 py-3">R$ 6.250,00</td> |
|
|
<td class="px-4 py-3">5</td> |
|
|
<td class="px-4 py-3"> |
|
|
<span class="px-2 py-1 rounded-full text-xs bg-green-600 text-white">Recebido</span> |
|
|
</td> |
|
|
<td class="px-4 py-3 text-right"> |
|
|
<div class="flex justify-end gap-1"> |
|
|
<button onclick="editItem('Monitor 27\" 4K', 5, 1250)" class="p-1 text-blue-400 hover:text-blue-300"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button onclick="deleteItem('Monitor 27\" 4K')" class="p-1 text-red-400 hover:text-red-300"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
<tfoot class="bg-gray-700 font-medium"> |
|
|
<tr> |
|
|
<td colspan="3" class="px-4 py-3 text-right">Total:</td> |
|
|
<td colspan="5" class="px-4 py-3">R$ 15.250,00</td> |
|
|
</tr> |
|
|
</tfoot> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6"> |
|
|
<h4 class="font-medium text-lg mb-2">Observações</h4> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<p id="modalNotes">Entregar na recepção do prédio A, das 8h às 17h. Favor embalar com cuidado os equipamentos eletrônicos.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h4 class="font-medium text-lg">Histórico</h4> |
|
|
<button onclick="showAllHistory()" class="text-sm text-blue-400 hover:text-blue-300"> |
|
|
Ver todos <i class="fas fa-chevron-down ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4" id="historyItems"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-full p-2"> |
|
|
<i class="fas fa-check text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido recebido totalmente</p> |
|
|
<p class="text-sm text-gray-400">25/05/2023 14:30 - Por João Silva</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-purple-500 rounded-full p-2"> |
|
|
<i class="fas fa-truck text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido enviado pelo fornecedor</p> |
|
|
<p class="text-sm text-gray-400">20/05/2023 09:15 - Por Fornecedor A</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-green-500 rounded-full p-2"> |
|
|
<i class="fas fa-thumbs-up text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido aprovado</p> |
|
|
<p class="text-sm text-gray-400">12/05/2023 16:45 - Por Maria Souza (Gerente)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-yellow-500 rounded-full p-2"> |
|
|
<i class="fas fa-paper-plane text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido enviado para aprovação</p> |
|
|
<p class="text-sm text-gray-400">10/05/2023 17:30 - Por João Silva</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-gray-500 rounded-full p-2"> |
|
|
<i class="fas fa-file-alt text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido criado</p> |
|
|
<p class="text-sm text-gray-400">10/05/2023 14:00 - Por João Silva</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button id="sendApprovalBtn" type="button" onclick="confirmSendForApproval()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Enviar para Aprovação |
|
|
</button> |
|
|
<button id="registerReceiptBtn" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
<i class="fas fa-truck-loading mr-2"></i> Registrar Recebimento |
|
|
</button> |
|
|
<button onclick="cancelOrder('PC-2023-001')" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-800 text-base font-medium text-white hover:bg-gray-700 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
<i class="fas fa-times mr-2"></i> Cancelar Pedido |
|
|
</button> |
|
|
<button onclick="closeModal()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-800 text-base font-medium text-white hover:bg-gray-700 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Fechar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="editItemModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-900 opacity-75"></div> |
|
|
</div> |
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
<div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
|
|
<div class="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="text-xl font-bold text-blue-400">Editar Item</h3> |
|
|
<button onclick="closeEditItemModal()" class="text-gray-400 hover:text-gray-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Produto</label> |
|
|
<input type="text" id="editProductName" readonly class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Quantidade *</label> |
|
|
<input type="number" id="editQuantity" min="1" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Valor Unitário *</label> |
|
|
<input type="text" id="editUnitPrice" placeholder="R$ 0,00" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Valor Total</label> |
|
|
<input type="text" id="editTotalPrice" placeholder="R$ 0,00" readonly class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button type="button" onclick="saveItemChanges()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
<i class="fas fa-save mr-2"></i> Salvar Alterações |
|
|
</button> |
|
|
<button type="button" onclick="closeEditItemModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-800 text-base font-medium text-white hover:bg-gray-700 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Cancelar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="backdrop" class="fixed inset-0 bg-black bg-opacity-50 z-40 backdrop opacity-0 pointer-events-none transition-opacity duration-300"></div> |
|
|
|
|
|
<div id="newOrderOffcanvas" class="fixed top-0 right-0 h-full w-1/3 bg-gray-800 shadow-xl z-50 offcanvas offcanvas-right overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-blue-400">Novo Pedido de Compra</h2> |
|
|
<button onclick="closeOffcanvas()" class="text-gray-400 hover:text-gray-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<form> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Fornecedor *</label> |
|
|
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
<option>Selecione um fornecedor</option> |
|
|
<option>Fornecedor A</option> |
|
|
<option>Fornecedor B</option> |
|
|
<option>Fornecedor C</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Responsável *</label> |
|
|
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
<option>Selecione um responsável</option> |
|
|
<option>João Silva</option> |
|
|
<option>Maria Souza</option> |
|
|
<option>Carlos Oliveira</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Data de Emissão *</label> |
|
|
<input type="date" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Previsão de Entrega *</label> |
|
|
<input type="date" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Condição de Pagamento *</label> |
|
|
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
<option>À vista</option> |
|
|
<option>7 dias</option> |
|
|
<option>15 dias</option> |
|
|
<option>30 dias</option> |
|
|
<option>60 dias</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Observações</label> |
|
|
<textarea rows="3" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-700"> |
|
|
<h3 class="text-lg font-medium mb-4">Itens do Pedido</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Produto *</label> |
|
|
<select class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-sm"> |
|
|
<option>Selecione um produto</option> |
|
|
<option>Notebook Dell XPS 15</option> |
|
|
<option>Monitor 27" 4K</option> |
|
|
<option>Teclado Mecânico</option> |
|
|
<option>Mouse Sem Fio</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Quantidade *</label> |
|
|
<input type="number" min="1" value="1" class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-sm"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Valor Unitário *</label> |
|
|
<input type="text" placeholder="R$ 0,00" class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-sm"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Valor Total</label> |
|
|
<input type="text" placeholder="R$ 0,00" readonly class="w-full bg-gray-600 border border-gray-500 rounded-md px-3 py-2 text-sm"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end mt-4"> |
|
|
<button type="button" class="px-3 py-1 bg-red-600 hover:bg-red-500 rounded-md text-sm"> |
|
|
<i class="fas fa-trash mr-1"></i> Remover |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="button" class="w-full px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center gap-2"> |
|
|
<i class="fas fa-plus"></i> Adicionar Item |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end gap-3 pt-6"> |
|
|
<button type="button" onclick="closeOffcanvas()" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg"> |
|
|
Cancelar |
|
|
</button> |
|
|
<button type="button" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg"> |
|
|
<i class="fas fa-save mr-2"></i> Salvar Pedido |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('addItemBtn').addEventListener('click', function() { |
|
|
document.getElementById('itemForm').classList.add('show'); |
|
|
}); |
|
|
|
|
|
function hideItemForm() { |
|
|
document.getElementById('itemForm').classList.remove('show'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('newOrderBtn').addEventListener('click', function() { |
|
|
document.getElementById('backdrop').classList.add('show'); |
|
|
document.getElementById('newOrderOffcanvas').classList.add('show'); |
|
|
}); |
|
|
|
|
|
|
|
|
function closeOffcanvas() { |
|
|
document.getElementById('backdrop').classList.remove('show'); |
|
|
document.getElementById('newOrderOffcanvas').classList.remove('show'); |
|
|
} |
|
|
|
|
|
|
|
|
function closeModal() { |
|
|
document.getElementById('orderModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function viewOrder(orderNumber) { |
|
|
|
|
|
document.getElementById('modalOrderNumber').textContent = `Pedido ${orderNumber}`; |
|
|
document.getElementById('orderModal').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const status = document.getElementById('modalStatus').textContent.trim(); |
|
|
const sendApprovalBtn = document.getElementById('sendApprovalBtn'); |
|
|
const registerReceiptBtn = document.getElementById('registerReceiptBtn'); |
|
|
|
|
|
sendApprovalBtn.classList.toggle('hidden', status !== 'Em Elaboração'); |
|
|
registerReceiptBtn.classList.toggle('hidden', status === 'Em Elaboração' || status === 'Cancelado'); |
|
|
} |
|
|
|
|
|
|
|
|
function showAllHistory() { |
|
|
const historyItems = document.getElementById('historyItems'); |
|
|
|
|
|
Swal.fire({ |
|
|
title: 'Histórico Completo', |
|
|
html: ` |
|
|
<div class="text-left space-y-4 max-h-96 overflow-y-auto"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-full p-2"> |
|
|
<i class="fas fa-check text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido recebido totalmente</p> |
|
|
<p class="text-sm text-gray-400">25/05/2023 14:30 - Por João Silva</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-purple-500 rounded-full p-2"> |
|
|
<i class="fas fa-truck text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido enviado pelo fornecedor</p> |
|
|
<p class="text-sm text-gray-400">20/05/2023 09:15 - Por Fornecedor A</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-green-500 rounded-full p-2"> |
|
|
<i class="fas fa-thumbs-up text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido aprovado</p> |
|
|
<p class="text-sm text-gray-400">12/05/2023 16:45 - Por Maria Souza (Gerente)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-yellow-500 rounded-full p-2"> |
|
|
<i class="fas fa-p paper-plane text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido enviado para aprovação</p> |
|
|
<p class="text-sm text-gray-400">10/05/2023 17:30 - Por João Silva</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-gray-500 rounded-full p-2"> |
|
|
<i class="fas fa-file-alt text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Pedido criado</p> |
|
|
<p class="text-sm text-gray-400">10/05/2023 14:00 - Por João Silva</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-400 rounded-full p-2"> |
|
|
<i class="fas fa-comment text-white"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Observação adicionada</p> |
|
|
<p class="text-sm text-gray-400">10/05/2023 14:05 - Por João Silva</p> |
|
|
<p class="text-sm italic">"Entregar na recepção do prédio A"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`, |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6', |
|
|
confirmButtonColor: '#3b82f6', |
|
|
width: '600px' |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function confirmSendForApproval() { |
|
|
Swal.fire({ |
|
|
title: 'Enviar para Aprovação', |
|
|
text: 'Tem certeza que deseja enviar este pedido para aprovação? Esta ação não pode ser desfeita.', |
|
|
icon: 'question', |
|
|
showCancelButton: true, |
|
|
confirmButtonColor: '#3b82f6', |
|
|
cancelButtonColor: '#6b7280', |
|
|
confirmButtonText: 'Sim, enviar!', |
|
|
cancelButtonText: 'Cancelar', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6' |
|
|
}).then((result) => { |
|
|
if (result.isConfirmed) { |
|
|
Swal.fire({ |
|
|
title: 'Enviado!', |
|
|
text: 'O pedido foi enviado para aprovação com sucesso.', |
|
|
icon: 'success', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function cancelOrder(orderNumber) { |
|
|
Swal.fire({ |
|
|
title: 'Cancelar Pedido', |
|
|
text: `Tem certeza que deseja cancelar o pedido ${orderNumber}? Esta ação não pode ser desfeita.`, |
|
|
icon: 'warning', |
|
|
showCancelButton: true, |
|
|
confirmButtonColor: '#ef4444', |
|
|
cancelButtonColor: '#6b7280', |
|
|
confirmButtonText: 'Sim, cancelar!', |
|
|
cancelButtonText: 'Não, manter', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6' |
|
|
}).then((result) => { |
|
|
if (result.isConfirmed) { |
|
|
Swal.fire({ |
|
|
title: 'Cancelado!', |
|
|
text: `O pedido ${orderNumber} foi cancelado.`, |
|
|
icon: 'success', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function registerReceipt(orderNumber) { |
|
|
Swal.fire({ |
|
|
title: 'Registrar Recebimento', |
|
|
html: ` |
|
|
<div class="text-left"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-1">Tipo de Recebimento</label> |
|
|
<select id="receiptType" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
<option value="partial">Parcial</option> |
|
|
<option value="total">Total</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="partialFields"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-1">Quantidade Recebida</label> |
|
|
<input type="number" id="receivedQty" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-1">Nota Fiscal</label> |
|
|
<input type="text" id="invoiceNumber" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`, |
|
|
showCancelButton: true, |
|
|
confirmButtonText: 'Registrar', |
|
|
cancelButtonText: 'Cancelar', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6', |
|
|
preConfirm: () => { |
|
|
const type = document.getElementById('receiptType').value; |
|
|
const qty = document.getElementById('receivedQty').value; |
|
|
const invoice = document.getElementById('invoiceNumber').value; |
|
|
|
|
|
if (type === 'partial' && (!qty || qty <= 0)) { |
|
|
Swal.showValidationMessage('Informe a quantidade recebida'); |
|
|
} |
|
|
|
|
|
return { type, qty, invoice }; |
|
|
} |
|
|
}).then((result) => { |
|
|
if (result.isConfirmed) { |
|
|
Swal.fire({ |
|
|
title: 'Sucesso!', |
|
|
text: 'Recebimento registrado com sucesso.', |
|
|
icon: 'success', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function editItem(productName, quantity, unitPrice) { |
|
|
document.getElementById('editProductName').value = productName; |
|
|
document.getElementById('editQuantity').value = quantity; |
|
|
document.getElementById('editUnitPrice').value = `R$ ${unitPrice.toFixed(2).replace('.', ',')}`; |
|
|
document.getElementById('editTotalPrice').value = `R$ ${(quantity * unitPrice).toFixed(2).replace('.', ',')}`; |
|
|
|
|
|
document.getElementById('editItemModal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeEditItemModal() { |
|
|
document.getElementById('editItemModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function saveItemChanges() { |
|
|
const productName = document.getElementById('editProductName').value; |
|
|
const quantity = document.getElementById('editQuantity').value; |
|
|
const unitPrice = document.getElementById('editUnitPrice').value; |
|
|
|
|
|
|
|
|
Swal.fire({ |
|
|
title: 'Item Atualizado!', |
|
|
text: `O item ${productName} foi atualizado com sucesso.`, |
|
|
icon: 'success', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6' |
|
|
}); |
|
|
|
|
|
closeEditItemModal(); |
|
|
} |
|
|
|
|
|
function deleteItem(productName) { |
|
|
Swal.fire({ |
|
|
title: 'Excluir Item', |
|
|
text: `Tem certeza que deseja excluir o item ${productName}?`, |
|
|
icon: 'warning', |
|
|
showCancelButton: true, |
|
|
confirmButtonColor: '#ef4444', |
|
|
cancelButtonColor: '#6b7280', |
|
|
confirmButtonText: 'Sim, excluir!', |
|
|
cancelButtonText: 'Cancelar', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6' |
|
|
}).then((result) => { |
|
|
if (result.isConfirmed) { |
|
|
Swal.fire({ |
|
|
title: 'Excluído!', |
|
|
text: `O item ${productName} foi removido do pedido.`, |
|
|
icon: 'success', |
|
|
background: '#1f2937', |
|
|
color: '#f3f4f6' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('backdrop').addEventListener('click', closeOffcanvas); |
|
|
|
|
|
|
|
|
document.getElementById('editQuantity').addEventListener('input', calculateTotal); |
|
|
document.getElementById('editUnitPrice').addEventListener('input', calculateTotal); |
|
|
|
|
|
function calculateTotal() { |
|
|
const quantity = parseFloat(document.getElementById('editQuantity').value) || 0; |
|
|
const unitPriceStr = document.getElementById('editUnitPrice').value.replace('R$ ', '').replace(',', '.'); |
|
|
const unitPrice = parseFloat(unitPriceStr) || 0; |
|
|
|
|
|
const total = quantity * unitPrice; |
|
|
document.getElementById('editTotalPrice').value = `R$ ${total.toFixed(2).replace('.', ',')}`; |
|
|
} |
|
|
</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-de-compra-ii" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
