| <!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> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> |
| <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> |
| body { |
| background-color: #1a202c; |
| color: #ffffff; |
| min-height: 100vh; |
| } |
| |
| .status-badge { |
| padding: 0.25rem 0.5rem; |
| border-radius: 50rem; |
| font-size: 0.75rem; |
| font-weight: 500; |
| } |
| |
| .status-em-elaboracao { |
| background-color: #4b5563; |
| color: #ffffff; |
| } |
| |
| .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; |
| } |
| |
| .offcanvas { |
| transition: transform 0.3s ease-in-out; |
| background-color: #1a202c !important; |
| color: #ffffff !important; |
| width: 33% !important; |
| } |
| |
| .offcanvas-end { |
| transform: translateX(100%); |
| } |
| |
| .offcanvas.show { |
| transform: translateX(0); |
| } |
| |
| .backdrop { |
| transition: opacity 0.3s ease-in-out; |
| opacity: 0; |
| pointer-events: none; |
| } |
| |
| .backdrop.show { |
| opacity: 1; |
| pointer-events: auto; |
| } |
| |
| .table-responsive { |
| overflow-x: auto; |
| } |
| |
| .table { |
| color: #ffffff; |
| background-color: transparent; |
| } |
| |
| .table thead th { |
| background-color: #2d3748; |
| border-bottom: 1px solid #4a5568; |
| font-size: 0.75rem; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: #ffffff; |
| } |
| |
| .table tbody tr { |
| background-color: transparent; |
| color: #ffffff; |
| } |
| |
| .table tbody tr:hover { |
| background-color: rgba(45, 55, 72, 0.3); |
| } |
| |
| .table tbody tr td { |
| vertical-align: middle; |
| white-space: nowrap; |
| border-top: 1px solid #4a5568; |
| background-color: #363e4b; |
| color: #ffffff; |
| } |
| |
| .table tfoot td { |
| background-color: #2d3748; |
| font-weight: 500; |
| border-top: 1px solid #4a5568; |
| color: #ffffff; |
| } |
| |
| .btn-action { |
| padding: 0.25rem; |
| background: transparent; |
| border: none; |
| color: #ffffff; |
| } |
| |
| .btn-action:hover { |
| opacity: 0.8; |
| } |
| |
| .btn-blue { |
| background-color: #2563eb; |
| color: white; |
| } |
| |
| .btn-blue:hover { |
| background-color: #1d4ed8; |
| color: white; |
| } |
| |
| .btn-gray { |
| background-color: #4a5568; |
| color: white; |
| } |
| |
| .btn-gray:hover { |
| background-color: #2d3748; |
| color: white; |
| } |
| |
| .btn-green { |
| background-color: #10b981; |
| color: white; |
| } |
| |
| .btn-green:hover { |
| background-color: #0d9e6e; |
| color: white; |
| } |
| |
| .btn-yellow { |
| background-color: #d97706; |
| color: white; |
| } |
| |
| .btn-yellow:hover { |
| background-color: #b45309; |
| color: white; |
| } |
| |
| .btn-purple { |
| background-color: #7c3aed; |
| color: white; |
| } |
| |
| .btn-purple:hover { |
| background-color: #6d28d9; |
| color: white; |
| } |
| |
| .btn-red { |
| background-color: #dc2626; |
| color: white; |
| } |
| |
| .btn-red:hover { |
| background-color: #b91c1c; |
| color: white; |
| } |
| |
| .card { |
| background-color: #2a354b; |
| border: 1px solid #4a5568; |
| color: #ffffff; |
| } |
| |
| .form-control, .form-select { |
| background-color: #2d3748; |
| border: 1px solid #4a5568; |
| color: #ffffff; |
| } |
| |
| .form-control:focus, .form-select:focus { |
| background-color: #2d3748; |
| border-color: #4299e1; |
| color: #ffffff; |
| box-shadow: 0 0 0 0.25rem rgba(66, 153, 225, 0.25); |
| } |
| |
| .form-control::placeholder { |
| color: #a0aec0; |
| } |
| |
| .history-item { |
| display: flex; |
| align-items: flex-start; |
| margin-bottom: 1rem; |
| } |
| |
| .history-icon { |
| flex-shrink: 0; |
| width: 2rem; |
| height: 2rem; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-right: 0.75rem; |
| } |
| |
| .history-content p { |
| margin-bottom: 0; |
| color: #ffffff; |
| } |
| |
| .history-date { |
| font-size: 0.875rem; |
| color: #a0aec0; |
| } |
| |
| .modal-content { |
| background-color: #2d3748; |
| color: #ffffff; |
| border: 1px solid #4a5568; |
| } |
| |
| .modal-header { |
| border-bottom: 1px solid #4a5568; |
| color: #ffffff; |
| } |
| |
| .modal-footer { |
| border-top: 1px solid #4a5568; |
| } |
| |
| .btn-close { |
| filter: invert(1); |
| } |
| |
| #itemForm { |
| display: none; |
| } |
| |
| #itemForm.show { |
| display: block; |
| } |
| |
| .form-label { |
| color: #ffffff; |
| } |
| |
| .text-muted { |
| color: #a0aec0 !important; |
| } |
| |
| .text-primary { |
| color: #3b82f6 !important; |
| } |
| |
| .text-warning { |
| color: #f59e0b !important; |
| } |
| |
| .text-success { |
| color: #10b981 !important; |
| } |
| |
| .text-danger { |
| color: #ef4444 !important; |
| } |
| |
| .text-purple { |
| color: #8b5cf6 !important; |
| } |
| |
| .offcanvas-title { |
| color: #3b82f6 !important; |
| } |
| |
| .card-title { |
| color: #3b82f6 !important; |
| } |
| |
| .btn-link { |
| color: #3b82f6 !important; |
| } |
| |
| @media (max-width: 768px) { |
| .offcanvas { |
| width: 100% !important; |
| } |
| |
| .header-buttons { |
| width: 100% !important; |
| } |
| } |
| |
| @media (max-width: 992px) { |
| .offcanvas { |
| width: 75% !important; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container-fluid px-4 py-5"> |
| |
| <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3"> |
| <h1 class="text-primary mb-0">Pedidos de Compra</h1> |
| <div class="d-flex flex-column flex-sm-row gap-3 header-buttons w-md-auto justify-content-end"> |
| <button id="newOrderBtn" class="btn btn-blue d-flex align-items-center gap-2"> |
| <i class="fas fa-plus"></i> Novo Pedido de Compra |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="filters" class="card mb-5"> |
| <div class="card-body"> |
| <div class="row g-4"> |
| <div class="col-12 col-md-6 col-lg-3"> |
| <label class="form-label">Fornecedor</label> |
| <select class="form-select"> |
| <option>Todos</option> |
| <option>Fornecedor A</option> |
| <option>Fornecedor B</option> |
| <option>Fornecedor C</option> |
| </select> |
| </div> |
| <div class="col-12 col-md-6 col-lg-3"> |
| <label class="form-label">Status</label> |
| <select class="form-select"> |
| <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 class="col-12 col-md-6 col-lg-3"> |
| <label class="form-label">Responsável</label> |
| <select class="form-select"> |
| <option>Todos</option> |
| <option>João Silva</option> |
| <option>Maria Souza</option> |
| <option>Carlos Oliveira</option> |
| </select> |
| </div> |
| <div class="col-12 col-md-6 col-lg-3"> |
| <label class="form-label">Período</label> |
| <input type="date" class="form-control"> |
| </div> |
| </div> |
| <div class="d-flex justify-content-end mt-4 gap-2"> |
| <button class="btn btn-gray">Limpar</button> |
| <button class="btn btn-blue">Aplicar</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="card shadow-lg"> |
| <div class="table-responsive"> |
| <table class="table table-hover mb-0"> |
| <thead> |
| <tr> |
| <th class="ps-4">Nº Pedido</th> |
| <th>Fornecedor</th> |
| <th>Responsável</th> |
| <th>Emissão</th> |
| <th>Previsão Entrega</th> |
| <th>Status</th> |
| <th>Valor Total</th> |
| <th class="text-end pe-4">Ações</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="ps-4">PC-2023-001</td> |
| <td>Fornecedor A</td> |
| <td>João Silva</td> |
| <td>10/05/2023</td> |
| <td>25/05/2023</td> |
| <td> |
| <span class="status-badge status-recebido-total">Recebido Total</span> |
| </td> |
| <td>R$ 5.245,00</td> |
| <td class="text-end pe-4"> |
| <div class="d-flex justify-content-end gap-2"> |
| <button onclick="viewOrder('PC-2023-001')" class="btn-action text-primary"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="btn-action text-warning"> |
| <i class="fas fa-print"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="ps-4">PC-2023-002</td> |
| <td>Fornecedor B</td> |
| <td>Maria Souza</td> |
| <td>15/05/2023</td> |
| <td>30/05/2023</td> |
| <td> |
| <span class="status-badge status-enviado">Enviado</span> |
| </td> |
| <td>R$ 3.780,50</td> |
| <td class="text-end pe-4"> |
| <div class="d-flex justify-content-end gap-2"> |
| <button onclick="viewOrder('PC-2023-002')" class="btn-action text-primary"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="btn-action text-warning"> |
| <i class="fas fa-print"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="ps-4">PC-2023-003</td> |
| <td>Fornecedor C</td> |
| <td>Carlos Oliveira</td> |
| <td>18/05/2023</td> |
| <td>05/06/2023</td> |
| <td> |
| <span class="status-badge status-aguardando-aprovacao">Aguardando Aprovação</span> |
| </td> |
| <td>R$ 12.450,00</td> |
| <td class="text-end pe-4"> |
| <div class="d-flex justify-content-end gap-2"> |
| <button onclick="viewOrder('PC-2023-003')" class="btn-action text-primary"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="btn-action text-warning"> |
| <i class="fas fa-print"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="ps-4">PC-2023-004</td> |
| <td>Fornecedor A</td> |
| <td>João Silva</td> |
| <td>20/05/2023</td> |
| <td>10/06/2023</td> |
| <td> |
| <span class="status-badge status-em-elaboracao">Em Elaboração</span> |
| </td> |
| <td>R$ 7.890,25</td> |
| <td class="text-end pe-4"> |
| <div class="d-flex justify-content-end gap-2"> |
| <button onclick="viewOrder('PC-2023-004')" class="btn-action text-primary"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="btn-action text-success"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button onclick="cancelOrder('PC-2023-004')" class="btn-action text-danger"> |
| <i class="fas fa-times"></i> |
| </button> |
| <button class="btn-action text-warning"> |
| <i class="fas fa-print"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="ps-4">PC-2023-005</td> |
| <td>Fornecedor B</td> |
| <td>Maria Souza</td> |
| <td>22/05/2023</td> |
| <td>15/06/2023</td> |
| <td> |
| <span class="status-badge status-recebido-parcial">Recebido Parcial</span> |
| </td> |
| <td>R$ 9.120,75</td> |
| <td class="text-end pe-4"> |
| <div class="d-flex justify-content-end gap-2"> |
| <button onclick="viewOrder('PC-2023-005')" class="btn-action text-primary"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button onclick="registerReceipt('PC-2023-005')" class="btn-action text-purple"> |
| <i class="fas fa-truck-loading"></i> |
| </button> |
| <button class="btn-action text-warning"> |
| <i class="fas fa-print"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="card-footer d-flex align-items-center justify-content-between"> |
| <div class="text-muted"> |
| Mostrando <span class="fw-bold">1</span> a <span class="fw-bold">5</span> de <span class="fw-bold">15</span> resultados |
| </div> |
| <div class="d-flex gap-1"> |
| <button class="btn btn-gray btn-sm"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button class="btn btn-blue btn-sm">1</button> |
| <button class="btn btn-gray btn-sm">2</button> |
| <button class="btn btn-gray btn-sm">3</button> |
| <button class="btn btn-gray btn-sm"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="orderModal" class="modal fade" tabindex="-1" aria-hidden="true"> |
| <div class="modal-dialog modal-xl"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <h3 class="modal-title text-primary" id="modalOrderNumber">Pedido PC-2023-001</h3> |
| <button type="button" class="btn-close" onclick="closeModal()"></button> |
| </div> |
| <div class="modal-body"> |
| |
| <div class="row g-4 mt-3"> |
| <div class="col-12 col-md-4"> |
| <div class="card h-100"> |
| <div class="card-body"> |
| <h4 class="card-title text-primary mb-3">Fornecedor</h4> |
| <p id="modalSupplier">Fornecedor A</p> |
| <p id="modalSupplierContact">contato@fornecedora.com.br</p> |
| <p id="modalSupplierPhone">(11) 9999-9999</p> |
| </div> |
| </div> |
| </div> |
| <div class="col-12 col-md-4"> |
| <div class="card h-100"> |
| <div class="card-body"> |
| <h4 class="card-title text-primary mb-3">Responsável</h4> |
| <p id="modalResponsible">João Silva</p> |
| <p id="modalDepartment">Compras</p> |
| </div> |
| </div> |
| </div> |
| <div class="col-12 col-md-4"> |
| <div class="card h-100"> |
| <div class="card-body"> |
| <h4 class="card-title text-primary mb-3">Datas</h4> |
| <div class="row g-2"> |
| <div class="col-6"> |
| <p class="text-muted small mb-0">Emissão:</p> |
| <p id="modalEmissionDate">10/05/2023</p> |
| </div> |
| <div class="col-6"> |
| <p class="text-muted small mb-0">Previsão Entrega:</p> |
| <p id="modalDeliveryDate">25/05/2023</p> |
| </div> |
| <div class="col-6"> |
| <p class="text-muted small mb-0">Pagamento:</p> |
| <p id="modalPayment">30 dias</p> |
| </div> |
| <div class="col-6"> |
| <p class="text-muted small mb-0">Status:</p> |
| <p id="modalStatus"><span class="status-badge status-recebido-total">Recebido Total</span></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-5"> |
| <div class="d-flex justify-content-between align-items-center mb-4"> |
| <h4 class="mb-0">Itens do Pedido</h4> |
| <button id="addItemBtn" class="btn btn-blue btn-sm"> |
| <i class="fas fa-plus me-1"></i> Adicionar Item |
| </button> |
| </div> |
| |
| |
| <div id="itemForm" class="card mb-4"> |
| <div class="card-body"> |
| <div class="row g-4 mb-4"> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Produto *</label> |
| <select class="form-select"> |
| <option>Selecione um produto</option> |
| <option>Notebook Dell XPS 15</option> |
| <option>Monitor 27" 4K</option> |
| <option>Teclado Mecânico</option> |
| </select> |
| </div> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Quantidade *</label> |
| <input type="number" min="1" value="1" class="form-control"> |
| </div> |
| </div> |
| <div class="row g-4"> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Valor Unitário *</label> |
| <input type="text" placeholder="R$ 0,00" class="form-control"> |
| </div> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Valor Total</label> |
| <input type="text" placeholder="R$ 0,00" readonly class="form-control"> |
| </div> |
| </div> |
| <div class="d-flex justify-content-end mt-4 gap-2"> |
| <button type="button" onclick="hideItemForm()" class="btn btn-gray btn-sm"> |
| Cancelar |
| </button> |
| <button type="button" class="btn btn-green btn-sm"> |
| <i class="fas fa-save me-1"></i> Salvar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="table-responsive"> |
| <table class="table"> |
| <thead> |
| <tr> |
| <th>Produto</th> |
| <th>Categoria</th> |
| <th>Quantidade</th> |
| <th>Unitário</th> |
| <th>Total</th> |
| <th>Recebido</th> |
| <th>Status</th> |
| <th class="text-end">Ações</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>Notebook Dell XPS 15</td> |
| <td>Informática</td> |
| <td>2</td> |
| <td>R$ 4.500,00</td> |
| <td>R$ 9.000,00</td> |
| <td>2</td> |
| <td> |
| <span class="status-badge bg-success text-white">Recebido</span> |
| </td> |
| <td class="text-end"> |
| <div class="d-flex justify-content-end gap-1"> |
| <button onclick="editItem('Notebook Dell XPS 15', 2, 4500)" class="btn-action text-primary"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button onclick="deleteItem('Notebook Dell XPS 15')" class="btn-action text-danger"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td>Monitor 27" 4K</td> |
| <td>Informática</td> |
| <td>5</td> |
| <td>R$ 1.250,00</td> |
| <td>R$ 6.250,00</td> |
| <td>5</td> |
| <td> |
| <span class="status-badge bg-success text-white">Recebido</span> |
| </td> |
| <td class="text-end"> |
| <div class="d-flex justify-content-end gap-1"> |
| <button onclick="editItem('Monitor 27\" 4K', 5, 1250)" class="btn-action text-primary"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button onclick="deleteItem('Monitor 27\" 4K')" class="btn-action text-danger"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| <tfoot> |
| <tr> |
| <td colspan="3" class="text-end fw-bold">Total:</td> |
| <td colspan="5">R$ 15.250,00</td> |
| </tr> |
| </tfoot> |
| </table> |
| </div> |
| </div> |
| |
| |
| <div class="mt-5"> |
| <h4 class="mb-3">Observações</h4> |
| <div class="card"> |
| <div class="card-body"> |
| <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> |
| |
| |
| <div class="mt-5"> |
| <div class="d-flex justify-content-between align-items-center mb-3"> |
| <h4 class="mb-0">Histórico</h4> |
| <button onclick="showAllHistory()" class="btn btn-link text-primary p-0"> |
| Ver todos <i class="fas fa-chevron-down ms-1"></i> |
| </button> |
| </div> |
| <div id="historyItems"> |
| <div class="history-item"> |
| <div class="history-icon bg-primary"> |
| <i class="fas fa-check text-white"></i> |
| </div> |
| <div class="history-content"> |
| <p class="fw-medium">Pedido recebido totalmente</p> |
| <p class="history-date">25/05/2023 14:30 - Por João Silva</p> |
| </div> |
| </div> |
| <div class="history-item"> |
| <div class="history-icon bg-purple"> |
| <i class="fas fa-truck text-white"></i> |
| </div> |
| <div class="history-content"> |
| <p class="fw-medium">Pedido enviado pelo fornecedor</p> |
| <p class="history-date">20/05/2023 09:15 - Por Fornecedor A</p> |
| </div> |
| </div> |
| <div class="history-item"> |
| <div class="history-icon bg-success"> |
| <i class="fas fa-thumbs-up text-white"></i> |
| </div> |
| <div class="history-content"> |
| <p class="fw-medium">Pedido aprovado</p> |
| <p class="history-date">12/05/2023 16:45 - Por Maria Souza (Gerente)</p> |
| </div> |
| </div> |
| <div class="history-item"> |
| <div class="history-icon bg-warning"> |
| <i class="fas fa-paper-plane text-white"></i> |
| </div> |
| <div class="history-content"> |
| <p class="fw-medium">Pedido enviado para aprovação</p> |
| <p class="history-date">10/05/2023 17:30 - Por João Silva</p> |
| </div> |
| </div> |
| <div class="history-item"> |
| <div class="history-icon bg-secondary"> |
| <i class="fas fa-file-alt text-white"></i> |
| </div> |
| <div class="history-content"> |
| <p class="fw-medium">Pedido criado</p> |
| <p class="history-date">10/05/2023 14:00 - Por João Silva</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="modal-footer"> |
| <button id="sendApprovalBtn" type="button" onclick="confirmSendForApproval()" class="btn btn-yellow"> |
| <i class="fas fa-paper-plane me-2"></i> Enviar para Aprovação |
| </button> |
| <button id="registerReceiptBtn" type="button" class="btn btn-purple"> |
| <i class="fas fa-truck-loading me-2"></i> Registrar Recebimento |
| </button> |
| <button onclick="cancelOrder('PC-2023-001')" type="button" class="btn btn-gray"> |
| <i class="fas fa-times me-2"></i> Cancelar Pedido |
| </button> |
| <button onclick="closeModal()" type="button" class="btn btn-gray"> |
| Fechar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="editItemModal" class="modal fade" tabindex="-1" aria-hidden="true"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <h3 class="modal-title text-primary">Editar Item</h3> |
| <button type="button" class="btn-close" onclick="closeEditItemModal()"></button> |
| </div> |
| <div class="modal-body"> |
| <div class="row g-4"> |
| <div class="col-12"> |
| <label class="form-label">Produto</label> |
| <input type="text" id="editProductName" readonly class="form-control"> |
| </div> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Quantidade *</label> |
| <input type="number" id="editQuantity" min="1" class="form-control"> |
| </div> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Valor Unitário *</label> |
| <input type="text" id="editUnitPrice" placeholder="R$ 0,00" class="form-control"> |
| </div> |
| <div class="col-12"> |
| <label class="form-label">Valor Total</label> |
| <input type="text" id="editTotalPrice" placeholder="R$ 0,00" readonly class="form-control"> |
| </div> |
| </div> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" onclick="saveItemChanges()" class="btn btn-green"> |
| <i class="fas fa-save me-2"></i> Salvar Alterações |
| </button> |
| <button type="button" onclick="closeEditItemModal()" class="btn btn-gray"> |
| Cancelar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="backdrop" class="backdrop fixed-top start-0 w-100 h-100 bg-black bg-opacity-50 z-40"></div> |
| |
| <div id="newOrderOffcanvas" class="offcanvas offcanvas-end" tabindex="-1"> |
| <div class="offcanvas-header"> |
| <h2 class="offcanvas-title text-primary">Novo Pedido de Compra</h2> |
| <button type="button" class="btn-close text-reset" onclick="closeOffcanvas()"></button> |
| </div> |
| <div class="offcanvas-body"> |
| <form> |
| <div class="mb-4"> |
| <label class="form-label">Fornecedor *</label> |
| <select class="form-select"> |
| <option>Selecione um fornecedor</option> |
| <option>Fornecedor A</option> |
| <option>Fornecedor B</option> |
| <option>Fornecedor C</option> |
| </select> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="form-label">Responsável *</label> |
| <select class="form-select"> |
| <option>Selecione um responsável</option> |
| <option>João Silva</option> |
| <option>Maria Souza</option> |
| <option>Carlos Oliveira</option> |
| </select> |
| </div> |
| |
| <div class="row g-3 mb-4"> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Data de Emissão *</label> |
| <input type="date" class="form-control"> |
| </div> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Previsão de Entrega *</label> |
| <input type="date" class="form-control"> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="form-label">Condição de Pagamento *</label> |
| <select class="form-select"> |
| <option>À vista</option> |
| <option>7 dias</option> |
| <option>15 dias</option> |
| <option>30 dias</option> |
| <option>60 dias</option> |
| </select> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="form-label">Observações</label> |
| <textarea rows="3" class="form-control"></textarea> |
| </div> |
| |
| <div class="pt-4 border-top"> |
| <h3 class="mb-4">Itens do Pedido</h3> |
| |
| <div class="mb-4"> |
| <div class="card"> |
| <div class="card-body"> |
| <div class="row g-3 mb-4"> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Produto *</label> |
| <select class="form-select"> |
| <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 class="col-12 col-md-6"> |
| <label class="form-label">Quantidade *</label> |
| <input type="number" min="1" value="1" class="form-control"> |
| </div> |
| </div> |
| <div class="row g-3"> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Valor Unitário *</label> |
| <input type="text" placeholder="R$ 0,00" class="form-control"> |
| </div> |
| <div class="col-12 col-md-6"> |
| <label class="form-label">Valor Total</label> |
| <input type="text" placeholder="R$ 0,00" readonly class="form-control"> |
| </div> |
| </div> |
| <div class="d-flex justify-content-end mt-4"> |
| <button type="button" class="btn btn-red btn-sm"> |
| <i class="fas fa-trash me-1"></i> Remover |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <button type="button" class="btn btn-gray w-100 d-flex align-items-center justify-content-center gap-2"> |
| <i class="fas fa-plus"></i> Adicionar Item |
| </button> |
| </div> |
| |
| <div class="d-flex justify-content-end gap-3 pt-5"> |
| <button type="button" onclick="closeOffcanvas()" class="btn btn-gray"> |
| Cancelar |
| </button> |
| <button type="button" class="btn btn-blue"> |
| <i class="fas fa-save me-2"></i> Salvar Pedido |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> |
| <script> |
| |
| var orderModal = new bootstrap.Modal(document.getElementById('orderModal')); |
| var editItemModal = new bootstrap.Modal(document.getElementById('editItemModal')); |
| var newOrderOffcanvas = new bootstrap.Offcanvas(document.getElementById('newOrderOffcanvas')); |
| |
| |
| 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'); |
| newOrderOffcanvas.show(); |
| }); |
| |
| |
| function closeOffcanvas() { |
| document.getElementById('backdrop').classList.remove('show'); |
| newOrderOffcanvas.hide(); |
| } |
| |
| |
| function closeModal() { |
| orderModal.hide(); |
| } |
| |
| |
| function viewOrder(orderNumber) { |
| |
| document.getElementById('modalOrderNumber').textContent = `Pedido ${orderNumber}`; |
| |
| |
| const status = document.getElementById('modalStatus').textContent.trim(); |
| const sendApprovalBtn = document.getElementById('sendApprovalBtn'); |
| const registerReceiptBtn = document.getElementById('registerReceiptBtn'); |
| |
| sendApprovalBtn.style.display = status === 'Em Elaboração' ? 'block' : 'none'; |
| registerReceiptBtn.style.display = (status === 'Em Elaboração' || status === 'Cancelado') ? 'none' : 'block'; |
| |
| orderModal.show(); |
| } |
| |
| |
| function showAllHistory() { |
| |
| Swal.fire({ |
| title: 'Histórico Completo', |
| html: ` |
| <div class="text-left" style="max-height: 24rem; overflow-y: auto;"> |
| <div class="d-flex align-items-start mb-3"> |
| <div class="flex-shrink-0 bg-primary rounded-circle p-2 me-3"> |
| <i class="fas fa-check text-white"></i> |
| </div> |
| <div> |
| <p class="fw-medium mb-0">Pedido recebido totalmente</p> |
| <p class="text-muted small">25/05/2023 14:30 - Por João Silva</p> |
| </div> |
| </div> |
| <div class="d-flex align-items-start mb-3"> |
| <div class="flex-shrink-0 bg-purple rounded-circle p-2 me-3"> |
| <i class="fas fa-truck text-white"></i> |
| </div> |
| <div> |
| <p class="fw-medium mb-0">Pedido enviado pelo fornecedor</p> |
| <p class="text-muted small">20/05/2023 09:15 - Por Fornecedor A</p> |
| </div> |
| </div> |
| <div class="d-flex align-items-start mb-3"> |
| <div class="flex-shrink-0 bg-success rounded-circle p-2 me-3"> |
| <i class="fas fa-thumbs-up text-white"></i> |
| </div> |
| <div> |
| <p class="fw-medium mb-0">Pedido aprovado</p> |
| <p class="text-muted small">12/05/2023 16:45 - Por Maria Souza (Gerente)</p> |
| </div> |
| </div> |
| <div class="d-flex align-items-start mb-3"> |
| <div class="flex-shrink-0 bg-warning rounded-circle p-2 me-3"> |
| <i class="fas fa-paper-plane text-white"></i> |
| </div> |
| <div> |
| <p class="fw-medium mb-0">Pedido enviado para aprovação</p> |
| <p class="text-muted small">10/05/2023 17:30 - Por João Silva</p> |
| </div> |
| </div> |
| <div class="d-flex align-items-start mb-3"> |
| <div class="flex-shrink-0 bg-secondary rounded-circle p-2 me-3"> |
| <i class="fas fa-file-alt text-white"></i> |
| </div> |
| <div> |
| <p class="fw-medium mb-0">Pedido criado</p> |
| <p class="text-muted small">10/05/2023 14:00 - Por João Silva</p> |
| </div> |
| </div> |
| <div class="d-flex align-items-start"> |
| <div class="flex-shrink-0 bg-info rounded-circle p-2 me-3"> |
| <i class="fas fa-comment text-white"></i> |
| </div> |
| <div> |
| <p class="fw-medium mb-0">Observação adicionada</p> |
| <p class="text-muted small">10/05/2023 14:05 - Por João Silva</p> |
| <p class="fst-italic small">"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-3"> |
| <label class="form-label">Tipo de Recebimento</label> |
| <select id="receiptType" class="form-select"> |
| <option value="partial">Parcial</option> |
| <option value="total">Total</option> |
| </select> |
| </div> |
| <div id="partialFields"> |
| <div class="mb-3"> |
| <label class="form-label">Quantidade Recebida</label> |
| <input type="number" id="receivedQty" class="form-control"> |
| </div> |
| <div class="mb-3"> |
| <label class="form-label">Nota Fiscal</label> |
| <input type="text" id="invoiceNumber" class="form-control"> |
| </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('.', ',')}`; |
| |
| editItemModal.show(); |
| } |
| |
| function closeEditItemModal() { |
| editItemModal.hide(); |
| } |
| |
| 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/pedido-de-compra-bootstrap532" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
