|
|
<!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; |
|
|
} |
|
|
|
|
|
.offcanvas { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
right: 0; |
|
|
width: 50%; |
|
|
height: 100vh; |
|
|
background-color: white; |
|
|
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); |
|
|
transform: translateX(100%); |
|
|
transition: transform 0.3s ease; |
|
|
z-index: 1050; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.offcanvas.show { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.offcanvas-header { |
|
|
padding: 1rem; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.offcanvas-body { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.dark .offcanvas { |
|
|
background-color: #1f2937; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.dark .offcanvas-header { |
|
|
border-bottom-color: #374151; |
|
|
} |
|
|
|
|
|
|
|
|
.notification-container { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.notification-badge { |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
right: -5px; |
|
|
background-color: #ef4444; |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.notification-dropdown { |
|
|
position: absolute; |
|
|
right: 0; |
|
|
top: 100%; |
|
|
width: 350px; |
|
|
max-height: 400px; |
|
|
overflow-y: auto; |
|
|
background-color: white; |
|
|
border-radius: 0.5rem; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
z-index: 1100; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.dark .notification-dropdown { |
|
|
background-color: #1f2937; |
|
|
border: 1px solid #374151; |
|
|
} |
|
|
|
|
|
.notification-dropdown.show { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.notification-header { |
|
|
padding: 1rem; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.dark .notification-header { |
|
|
border-bottom-color: #374151; |
|
|
} |
|
|
|
|
|
.notification-item { |
|
|
padding: 1rem; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.dark .notification-item { |
|
|
border-bottom-color: #374151; |
|
|
} |
|
|
|
|
|
.notification-item:hover { |
|
|
background-color: #f3f4f6; |
|
|
} |
|
|
|
|
|
.dark .notification-item:hover { |
|
|
background-color: #374151; |
|
|
} |
|
|
|
|
|
.notification-item.unread { |
|
|
background-color: #f0f9ff; |
|
|
} |
|
|
|
|
|
.dark .notification-item.unread { |
|
|
background-color: #1e3a8a; |
|
|
} |
|
|
|
|
|
.notification-time { |
|
|
font-size: 0.75rem; |
|
|
color: #6b7280; |
|
|
margin-top: 0.25rem; |
|
|
} |
|
|
|
|
|
.dark .notification-time { |
|
|
color: #9ca3af; |
|
|
} |
|
|
|
|
|
.notification-footer { |
|
|
padding: 0.75rem; |
|
|
text-align: center; |
|
|
border-top: 1px solid #e5e7eb; |
|
|
} |
|
|
|
|
|
.dark .notification-footer { |
|
|
border-top-color: #374151; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.responsive-table { |
|
|
display: block; |
|
|
overflow-x: auto; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.offcanvas { |
|
|
width: 90%; |
|
|
} |
|
|
|
|
|
.notification-dropdown { |
|
|
width: 280px; |
|
|
right: -50px; |
|
|
} |
|
|
} |
|
|
</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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="notification-container"> |
|
|
<button id="notification-btn" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 relative"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="notification-badge">6</span> |
|
|
</button> |
|
|
<div id="notification-dropdown" class="notification-dropdown"> |
|
|
<div class="notification-header"> |
|
|
<h3 class="font-semibold">Notificações</h3> |
|
|
<button id="mark-all-read" class="text-blue-600 dark:text-blue-400 text-sm">Marcar todas como lidas</button> |
|
|
</div> |
|
|
<div class="overflow-y-auto max-h-80"> |
|
|
<div class="notification-item unread"> |
|
|
<div class="font-medium">Novo pedido aprovado</div> |
|
|
<p class="text-sm">Pedido PC-2023-010 foi aprovado pelo gestor</p> |
|
|
<div class="notification-time">Há 5 minutos</div> |
|
|
</div> |
|
|
<div class="notification-item unread"> |
|
|
<div class="font-medium">Recebimento parcial</div> |
|
|
<p class="text-sm">3 itens do pedido PC-2023-008 foram recebidos</p> |
|
|
<div class="notification-time">Há 1 hora</div> |
|
|
</div> |
|
|
<div class="notification-item unread"> |
|
|
<div class="font-medium">Pedido enviado</div> |
|
|
<p class="text-sm">Pedido PC-2023-009 foi enviado ao fornecedor</p> |
|
|
<div class="notification-time">Hoje, 09:30</div> |
|
|
</div> |
|
|
<div class="notification-item"> |
|
|
<div class="font-medium">Aprovação pendente</div> |
|
|
<p class="text-sm">Pedido PC-2023-011 aguarda sua aprovação</p> |
|
|
<div class="notification-time">Ontem, 16:45</div> |
|
|
</div> |
|
|
<div class="notification-item"> |
|
|
<div class="font-medium">Fornecedor atualizado</div> |
|
|
<p class="text-sm">Fornecedor A atualizou seus dados cadastrais</p> |
|
|
<div class="notification-time">Ontem, 14:20</div> |
|
|
</div> |
|
|
<div class="notification-item"> |
|
|
<div class="font-medium">Novo comentário</div> |
|
|
<p class="text-sm">João Silva comentou no pedido PC-2023-007</p> |
|
|
<div class="notification-time">Ontem, 11:10</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="notification-footer"> |
|
|
<a href="#" class="text-blue-600 dark:text-blue-400 text-sm">Ver todas as notificações</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="new-order-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"> |
|
|
<i class="fas fa-plus"></i> Novo Pedido de Compra |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="new-order-offcanvas" class="offcanvas"> |
|
|
<div class="offcanvas-header"> |
|
|
<h2 class="text-xl font-bold">Novo Pedido de Compra</h2> |
|
|
<button id="close-new-order" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="offcanvas-body"> |
|
|
<form id="new-order-form" class="space-y-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="supplier-select" class="block text-sm font-medium mb-1">Fornecedor</label> |
|
|
<select id="supplier-select" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required> |
|
|
<option value="">Selecione um fornecedor</option> |
|
|
<option value="1">Fornecedor A</option> |
|
|
<option value="2">Fornecedor B</option> |
|
|
<option value="3">Fornecedor C</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="responsible-select" class="block text-sm font-medium mb-1">Responsável</label> |
|
|
<select id="responsible-select" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required> |
|
|
<option value="">Selecione o responsável</option> |
|
|
<option value="1">João Silva</option> |
|
|
<option value="2">Maria Souza</option> |
|
|
<option value="3">Carlos Oliveira</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="payment-terms" class="block text-sm font-medium mb-1">Condição de Pagamento</label> |
|
|
<select id="payment-terms" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required> |
|
|
<option value="">Selecione a condição</option> |
|
|
<option value="30">30 dias</option> |
|
|
<option value="60">60 dias</option> |
|
|
<option value="90">90 dias</option> |
|
|
<option value="30/60/90">30/60/90 dias</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="delivery-date" class="block text-sm font-medium mb-1">Previsão de Entrega</label> |
|
|
<input type="date" id="delivery-date" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600" required> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="order-notes" class="block text-sm font-medium mb-1">Observações</label> |
|
|
<textarea id="order-notes" rows="3" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Itens do Pedido</h3> |
|
|
|
|
|
<div class="responsive-table mb-4"> |
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
<thead class="bg-gray-50 dark:bg-gray-700"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Produto</th> |
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Quantidade</th> |
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Valor Unitário</th> |
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="order-items-list" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="product-select" class="block text-sm font-medium mb-1">Produto</label> |
|
|
<select id="product-select" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"> |
|
|
<option value="">Selecione um produto</option> |
|
|
<option value="1">Produto X</option> |
|
|
<option value="2">Produto Y</option> |
|
|
<option value="3">Produto Z</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="item-quantity" class="block text-sm font-medium mb-1">Quantidade</label> |
|
|
<input type="number" id="item-quantity" min="1" value="1" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="item-unit-price" class="block text-sm font-medium mb-1">Valor Unitário</label> |
|
|
<input type="text" id="item-unit-price" class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 money"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="button" id="add-item-to-order" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm flex items-center gap-1"> |
|
|
<i class="fas fa-plus"></i> Adicionar Item |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700"> |
|
|
<button type="button" id="cancel-new-order" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg"> |
|
|
Cancelar |
|
|
</button> |
|
|
<button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"> |
|
|
<i class="fas fa-save"></i> Salvar Pedido |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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">[email protected]</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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
document.getElementById('theme-toggle').addEventListener('click', function() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
|
|
}); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') === 'light') { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
} |
|
|
|
|
|
|
|
|
const notificationBtn = document.getElementById('notification-btn'); |
|
|
const notificationDropdown = document.getElementById('notification-dropdown'); |
|
|
const markAllReadBtn = document.getElementById('mark-all-read'); |
|
|
const notificationBadge = document.querySelector('.notification-badge'); |
|
|
|
|
|
notificationBtn.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
notificationDropdown.classList.toggle('show'); |
|
|
}); |
|
|
|
|
|
markAllReadBtn.addEventListener('click', function() { |
|
|
const unreadItems = document.querySelectorAll('.notification-item.unread'); |
|
|
unreadItems.forEach(item => { |
|
|
item.classList.remove('unread'); |
|
|
}); |
|
|
notificationBadge.textContent = '0'; |
|
|
notificationBadge.style.display = 'none'; |
|
|
|
|
|
Swal.fire({ |
|
|
title: 'Notificações marcadas como lidas', |
|
|
icon: 'success', |
|
|
timer: 1500, |
|
|
showConfirmButton: false |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (!notificationDropdown.contains(e.target) && e.target !== notificationBtn) { |
|
|
notificationDropdown.classList.remove('show'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const newOrderBtn = document.getElementById('new-order-btn'); |
|
|
const newOrderOffcanvas = document.getElementById('new-order-offcanvas'); |
|
|
const closeNewOrder = document.getElementById('close-new-order'); |
|
|
const cancelNewOrder = document.getElementById('cancel-new-order'); |
|
|
|
|
|
newOrderBtn.addEventListener('click', function() { |
|
|
newOrderOffcanvas.classList.add('show'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeNewOrder.addEventListener('click', function() { |
|
|
newOrderOffcanvas.classList.remove('show'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
cancelNewOrder.addEventListener('click', function() { |
|
|
newOrderOffcanvas.classList.remove('show'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
const addItemToOrderBtn = document.getElementById('add-item-to-order'); |
|
|
const orderItemsList = document.getElementById('order-items-list'); |
|
|
|
|
|
addItemToOrderBtn.addEventListener('click', function() { |
|
|
const productSelect = document.getElementById('product-select'); |
|
|
const productName = productSelect.options[productSelect.selectedIndex].text; |
|
|
const quantity = document.getElementById('item-quantity').value; |
|
|
const unitPrice = document.getElementById('item-unit-price').value; |
|
|
|
|
|
if (productSelect.value === '' || quantity === '' || unitPrice === '') { |
|
|
Swal.fire({ |
|
|
title: 'Campos obrigatórios', |
|
|
text: 'Por favor, preencha todos os campos do item.', |
|
|
icon: 'warning' |
|
|
}); |
|
|
return; |
|
|
} |
|
|
|
|
|
const totalValue = (parseFloat(quantity) * parseFloat(unitPrice.replace('R$ ', '').replace('.', '').replace(',', '.'))).toFixed(2); |
|
|
|
|
|
const newRow = document.createElement('tr'); |
|
|
newRow.className = 'bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700'; |
|
|
newRow.innerHTML = ` |
|
|
<td class="px-4 py-2 whitespace-nowrap">${productName}</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">${quantity}</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">${unitPrice}</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<button class="remove-item-row text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
`; |
|
|
|
|
|
orderItemsList.appendChild(newRow); |
|
|
|
|
|
|
|
|
productSelect.value = ''; |
|
|
document.getElementById('item-quantity').value = '1'; |
|
|
document.getElementById('item-unit-price').value = ''; |
|
|
|
|
|
|
|
|
newRow.querySelector('.remove-item-row').addEventListener('click', function() { |
|
|
newRow.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('new-order-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
if (orderItemsList.children.length === 0) { |
|
|
Swal.fire({ |
|
|
title: 'Itens obrigatórios', |
|
|
text: 'Por favor, adicione pelo menos um item ao pedido.', |
|
|
icon: 'warning' |
|
|
}); |
|
|
return; |
|
|
} |
|
|
|
|
|
Swal.fire({ |
|
|
title: 'Pedido criado!', |
|
|
text: 'O novo pedido de compra foi criado com sucesso.', |
|
|
icon: 'success' |
|
|
}); |
|
|
|
|
|
newOrderOffcanvas.classList.remove('show'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
this.reset(); |
|
|
orderItemsList.innerHTML = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
orderDetailModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', function() { |
|
|
orderDetailModal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
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'; |
|
|
}); |
|
|
|
|
|
|
|
|
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'; |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
); |
|
|
|
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
cancelOrderBtn.addEventListener('click', showCancelConfirmation); |
|
|
|
|
|
cancelButtons.forEach(button => { |
|
|
button.addEventListener('click', showCancelConfirmation); |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
); |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
); |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
); |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('apply-filters').addEventListener('click', function() { |
|
|
|
|
|
Swal.fire({ |
|
|
title: 'Filtros Aplicados', |
|
|
text: 'Os filtros foram aplicados com sucesso.', |
|
|
icon: 'success', |
|
|
timer: 1500, |
|
|
showConfirmButton: false |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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 |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
