|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR" data-bs-theme="dark"> |
|
|
<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css"> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"> |
|
|
<style> |
|
|
.offcanvas-end { |
|
|
width: 33% !important; |
|
|
} |
|
|
@media (max-width: 992px) { |
|
|
.offcanvas-end { |
|
|
width: 75% !important; |
|
|
} |
|
|
} |
|
|
@media (max-width: 576px) { |
|
|
.offcanvas-end { |
|
|
width: 100% !important; |
|
|
} |
|
|
} |
|
|
.status-em-elaboracao { |
|
|
color: #ffc107; |
|
|
} |
|
|
.status-aguardando { |
|
|
color: #0dcaf0; |
|
|
} |
|
|
.status-aprovado { |
|
|
color: #198754; |
|
|
} |
|
|
.status-enviado { |
|
|
color: #0d6efd; |
|
|
} |
|
|
.status-recebido-parcial { |
|
|
color: #fd7e14; |
|
|
} |
|
|
.status-recebido-total { |
|
|
color: #20c997; |
|
|
} |
|
|
.status-cancelado { |
|
|
color: #dc3545; |
|
|
} |
|
|
.item-row { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.item-row:hover { |
|
|
background-color: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
.history-item { |
|
|
border-left: 3px solid #6c757d; |
|
|
padding-left: 10px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.history-item:last-child { |
|
|
margin-bottom: 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-dark text-light"> |
|
|
<div class="container-fluid py-3"> |
|
|
<div class="d-flex justify-content-between align-items-center mb-4"> |
|
|
<h1 class="display-6"><i class="bi bi-cart-check me-2"></i>Pedidos de Compra</h1> |
|
|
<button class="btn btn-primary" id="btnNovoPedido"> |
|
|
<i class="bi bi-plus-lg me-1"></i> Novo Pedido de Compra |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card bg-dark border-secondary mb-4"> |
|
|
<div class="card-header bg-secondary bg-opacity-25"> |
|
|
<h5 class="mb-0"><i class="bi bi-funnel me-2"></i>Filtros</h5> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<div class="row g-3"> |
|
|
<div class="col-md-3"> |
|
|
<label for="filtroFornecedor" class="form-label">Fornecedor</label> |
|
|
<select class="form-select" id="filtroFornecedor"> |
|
|
<option value="">Todos</option> |
|
|
<option>Fornecedor A</option> |
|
|
<option>Fornecedor B</option> |
|
|
<option>Fornecedor C</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="col-md-3"> |
|
|
<label for="filtroStatus" class="form-label">Status</label> |
|
|
<select class="form-select" id="filtroStatus"> |
|
|
<option value="">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-md-3"> |
|
|
<label for="filtroResponsavel" class="form-label">Responsável</label> |
|
|
<select class="form-select" id="filtroResponsavel"> |
|
|
<option value="">Todos</option> |
|
|
<option>João Silva</option> |
|
|
<option>Maria Souza</option> |
|
|
<option>Carlos Oliveira</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="col-md-3"> |
|
|
<label for="filtroData" class="form-label">Período</label> |
|
|
<input type="date" class="form-control" id="filtroData"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="card-footer bg-secondary bg-opacity-10 text-end"> |
|
|
<button class="btn btn-outline-secondary me-2" id="btnLimparFiltros"> |
|
|
<i class="bi bi-eraser me-1"></i> Limpar |
|
|
</button> |
|
|
<button class="btn btn-primary" id="btnAplicarFiltros"> |
|
|
<i class="bi bi-filter me-1"></i> Aplicar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card bg-dark border-secondary"> |
|
|
<div class="card-header bg-secondary bg-opacity-25"> |
|
|
<h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Lista de Pedidos</h5> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<div class="table-responsive"> |
|
|
<table class="table table-dark table-hover table-striped" id="tabelaPedidos" style="width:100%"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Número</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>Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td>PO-2023-001</td> |
|
|
<td>Fornecedor A</td> |
|
|
<td>João Silva</td> |
|
|
<td>10/10/2023</td> |
|
|
<td>25/10/2023</td> |
|
|
<td><span class="status-aprovado">Aprovado</span></td> |
|
|
<td>R$ 5.250,00</td> |
|
|
<td> |
|
|
<button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar"> |
|
|
<i class="bi bi-eye"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-warning btnEditar" title="Editar"> |
|
|
<i class="bi bi-pencil"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar"> |
|
|
<i class="bi bi-x-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir"> |
|
|
<i class="bi bi-printer"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>PO-2023-002</td> |
|
|
<td>Fornecedor B</td> |
|
|
<td>Maria Souza</td> |
|
|
<td>12/10/2023</td> |
|
|
<td>30/10/2023</td> |
|
|
<td><span class="status-enviado">Enviado</span></td> |
|
|
<td>R$ 3.780,50</td> |
|
|
<td> |
|
|
<button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar"> |
|
|
<i class="bi bi-eye"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-warning btnEditar" title="Editar"> |
|
|
<i class="bi bi-pencil"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar"> |
|
|
<i class="bi bi-x-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir"> |
|
|
<i class="bi bi-printer"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>PO-2023-003</td> |
|
|
<td>Fornecedor C</td> |
|
|
<td>Carlos Oliveira</td> |
|
|
<td>15/10/2023</td> |
|
|
<td>05/11/2023</td> |
|
|
<td><span class="status-em-elaboracao">Em Elaboração</span></td> |
|
|
<td>R$ 1.920,75</td> |
|
|
<td> |
|
|
<button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar"> |
|
|
<i class="bi bi-eye"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-warning btnEditar" title="Editar"> |
|
|
<i class="bi bi-pencil"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar"> |
|
|
<i class="bi bi-x-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir"> |
|
|
<i class="bi bi-printer"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>PO-2023-004</td> |
|
|
<td>Fornecedor A</td> |
|
|
<td>João Silva</td> |
|
|
<td>18/10/2023</td> |
|
|
<td>08/11/2023</td> |
|
|
<td><span class="status-aguardando">Aguardando Aprovação</span></td> |
|
|
<td>R$ 7.340,20</td> |
|
|
<td> |
|
|
<button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar"> |
|
|
<i class="bi bi-eye"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-warning btnEditar" title="Editar"> |
|
|
<i class="bi bi-pencil"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar"> |
|
|
<i class="bi bi-x-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir"> |
|
|
<i class="bi bi-printer"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>PO-2023-005</td> |
|
|
<td>Fornecedor B</td> |
|
|
<td>Maria Souza</td> |
|
|
<td>20/10/2023</td> |
|
|
<td>10/11/2023</td> |
|
|
<td><span class="status-recebido-parcial">Recebido Parcial</span></td> |
|
|
<td>R$ 4.560,00</td> |
|
|
<td> |
|
|
<button class="btn btn-sm btn-outline-info btnVisualizar" title="Visualizar"> |
|
|
<i class="bi bi-eye"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-warning btnEditar" title="Editar"> |
|
|
<i class="bi bi-pencil"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-danger btnCancelar" title="Cancelar"> |
|
|
<i class="bi bi-x-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-secondary btnImprimir" title="Imprimir"> |
|
|
<i class="bi bi-printer"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNovoPedido" aria-labelledby="offcanvasNovoPedidoLabel"> |
|
|
<div class="offcanvas-header bg-dark"> |
|
|
<h5 class="offcanvas-title" id="offcanvasNovoPedidoLabel">Novo Pedido de Compra</h5> |
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button> |
|
|
</div> |
|
|
<div class="offcanvas-body bg-dark"> |
|
|
<form id="formNovoPedido"> |
|
|
<div class="mb-3"> |
|
|
<label for="novoFornecedor" class="form-label">Fornecedor</label> |
|
|
<select class="form-select" id="novoFornecedor" required> |
|
|
<option value="" selected disabled>Selecione um fornecedor</option> |
|
|
<option>Fornecedor A</option> |
|
|
<option>Fornecedor B</option> |
|
|
<option>Fornecedor C</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="novoResponsavel" class="form-label">Responsável</label> |
|
|
<select class="form-select" id="novoResponsavel" required> |
|
|
<option value="" selected disabled>Selecione o responsável</option> |
|
|
<option>João Silva</option> |
|
|
<option>Maria Souza</option> |
|
|
<option>Carlos Oliveira</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="novoCondicoesPagamento" class="form-label">Condições de Pagamento</label> |
|
|
<select class="form-select" id="novoCondicoesPagamento" required> |
|
|
<option value="" selected disabled>Selecione as condições</option> |
|
|
<option>À vista</option> |
|
|
<option>30 dias</option> |
|
|
<option>60 dias</option> |
|
|
<option>90 dias</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="novoPrevisaoEntrega" class="form-label">Previsão de Entrega</label> |
|
|
<input type="date" class="form-control" id="novoPrevisaoEntrega" required> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="novoObservacoes" class="form-label">Observações</label> |
|
|
<textarea class="form-control" id="novoObservacoes" rows="3"></textarea> |
|
|
</div> |
|
|
<div class="d-grid gap-2"> |
|
|
<button type="submit" class="btn btn-primary"> |
|
|
<i class="bi bi-save me-1"></i> Salvar Pedido |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal fade" id="modalDetalhesPedido" tabindex="-1" aria-labelledby="modalDetalhesPedidoLabel" aria-hidden="true"> |
|
|
<div class="modal-dialog modal-xl"> |
|
|
<div class="modal-content bg-dark"> |
|
|
<div class="modal-header bg-secondary bg-opacity-25"> |
|
|
<h5 class="modal-title" id="modalDetalhesPedidoLabel">Detalhes do Pedido de Compra</h5> |
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="row mb-4"> |
|
|
<div class="col-md-6"> |
|
|
<div class="card bg-dark border-secondary mb-3"> |
|
|
<div class="card-header bg-secondary bg-opacity-10"> |
|
|
<h6 class="mb-0"><i class="bi bi-building me-2"></i>Dados do Fornecedor</h6> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<p class="mb-1"><strong>Nome:</strong> <span id="detalheFornecedor">Fornecedor A</span></p> |
|
|
<p class="mb-1"><strong>CNPJ:</strong> 12.345.678/0001-99</p> |
|
|
<p class="mb-1"><strong>Contato:</strong> [email protected]</p> |
|
|
<p class="mb-0"><strong>Telefone:</strong> (11) 9876-5432</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-6"> |
|
|
<div class="card bg-dark border-secondary mb-3"> |
|
|
<div class="card-header bg-secondary bg-opacity-10"> |
|
|
<h6 class="mb-0"><i class="bi bi-person me-2"></i>Dados do Pedido</h6> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<p class="mb-1"><strong>Número:</strong> <span id="detalheNumero">PO-2023-001</span></p> |
|
|
<p class="mb-1"><strong>Responsável:</strong> <span id="detalheResponsavel">João Silva</span></p> |
|
|
<p class="mb-1"><strong>Emissão:</strong> 10/10/2023</p> |
|
|
<p class="mb-1"><strong>Previsão Entrega:</strong> 25/10/2023</p> |
|
|
<p class="mb-1"><strong>Status:</strong> <span class="status-aprovado" id="detalheStatus">Aprovado</span></p> |
|
|
<p class="mb-0"><strong>Condições Pagamento:</strong> 30 dias</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card bg-dark border-secondary mb-4"> |
|
|
<div class="card-header bg-secondary bg-opacity-10 d-flex justify-content-between align-items-center"> |
|
|
<h6 class="mb-0"><i class="bi bi-list-check me-2"></i>Itens do Pedido</h6> |
|
|
<button class="btn btn-sm btn-success" id="btnAdicionarItem"> |
|
|
<i class="bi bi-plus-lg me-1"></i> Adicionar Item |
|
|
</button> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<div class="table-responsive"> |
|
|
<table class="table table-dark table-hover" id="tabelaItensPedido"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Produto</th> |
|
|
<th>Categoria</th> |
|
|
<th>Quantidade</th> |
|
|
<th>Valor Unitário</th> |
|
|
<th>Valor Total</th> |
|
|
<th>Recebido</th> |
|
|
<th>Status</th> |
|
|
<th>Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="item-row"> |
|
|
<td>Produto X</td> |
|
|
<td>Eletrônicos</td> |
|
|
<td>5</td> |
|
|
<td>R$ 350,00</td> |
|
|
<td>R$ 1.750,00</td> |
|
|
<td>0</td> |
|
|
<td><span class="text-warning">Pendente</span></td> |
|
|
<td> |
|
|
<button class="btn btn-sm btn-outline-warning btnEditarItem" title="Editar"> |
|
|
<i class="bi bi-pencil"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-primary btnReceberItem" title="Registrar Recebimento"> |
|
|
<i class="bi bi-check-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-danger btnRemoverItem" title="Remover"> |
|
|
<i class="bi bi-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="item-row"> |
|
|
<td>Produto Y</td> |
|
|
<td>Informática</td> |
|
|
<td>10</td> |
|
|
<td>R$ 250,00</td> |
|
|
<td>R$ 2.500,00</td> |
|
|
<td>10</td> |
|
|
<td><span class="text-success">Recebido</span></td> |
|
|
<td> |
|
|
<button class="btn btn-sm btn-outline-warning btnEditarItem" title="Editar"> |
|
|
<i class="bi bi-pencil"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-primary btnReceberItem" title="Registrar Recebimento"> |
|
|
<i class="bi bi-check-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-danger btnRemoverItem" title="Remover"> |
|
|
<i class="bi bi-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="item-row"> |
|
|
<td>Produto Z</td> |
|
|
<td>Móveis</td> |
|
|
<td>2</td> |
|
|
<td>R$ 500,00</td> |
|
|
<td>R$ 1.000,00</td> |
|
|
<td>1</td> |
|
|
<td><span class="text-info">Parcial</span></td> |
|
|
<td> |
|
|
<button class="btn btn-sm btn-outline-warning btnEditarItem" title="Editar"> |
|
|
<i class="bi bi-pencil"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-primary btnReceberItem" title="Registrar Recebimento"> |
|
|
<i class="bi bi-check-circle"></i> |
|
|
</button> |
|
|
<button class="btn btn-sm btn-outline-danger btnRemoverItem" title="Remover"> |
|
|
<i class="bi bi-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
<tfoot> |
|
|
<tr> |
|
|
<td colspan="4" class="text-end"><strong>Total:</strong></td> |
|
|
<td><strong>R$ 5.250,00</strong></td> |
|
|
<td colspan="3"></td> |
|
|
</tr> |
|
|
</tfoot> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card bg-dark border-secondary"> |
|
|
<div class="card-header bg-secondary bg-opacity-10"> |
|
|
<h6 class="mb-0"><i class="bi bi-clock-history me-2"></i>Histórico do Pedido</h6> |
|
|
</div> |
|
|
<div class="card-body"> |
|
|
<div class="history-item"> |
|
|
<small class="text-muted">10/10/2023 09:15</small> |
|
|
<p class="mb-0">Pedido criado por João Silva</p> |
|
|
</div> |
|
|
<div class="history-item"> |
|
|
<small class="text-muted">10/10/2023 11:30</small> |
|
|
<p class="mb-0">Item "Produto X" adicionado</p> |
|
|
</div> |
|
|
<div class="history-item"> |
|
|
<small class="text-muted">10/10/2023 11:35</small> |
|
|
<p class="mb-0">Item "Produto Y" adicionado</p> |
|
|
</div> |
|
|
<div class="history-item"> |
|
|
<small class="text-muted">10/10/2023 11:40</small> |
|
|
<p class="mb-0">Item "Produto Z" adicionado</p> |
|
|
</div> |
|
|
<div class="history-item"> |
|
|
<small class="text-muted">11/10/2023 14:20</small> |
|
|
<p class="mb-0">Pedido enviado para aprovação</p> |
|
|
</div> |
|
|
<div class="history-item"> |
|
|
<small class="text-muted">12/10/2023 10:00</small> |
|
|
<p class="mb-0">Pedido aprovado por Maria Souza</p> |
|
|
</div> |
|
|
<div class="text-center mt-3"> |
|
|
<a href="#" class="text-decoration-none">Ver mais...</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer bg-secondary bg-opacity-10"> |
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> |
|
|
<i class="bi bi-x-lg me-1"></i> Fechar |
|
|
</button> |
|
|
<button type="button" class="btn btn-primary" id="btnEnviarAprovacao"> |
|
|
<i class="bi bi-send me-1"></i> Enviar para Aprovação |
|
|
</button> |
|
|
<button type="button" class="btn btn-success" id="btnRegistrarRecebimento"> |
|
|
<i class="bi bi-check-circle me-1"></i> Registrar Recebimento |
|
|
</button> |
|
|
<button type="button" class="btn btn-danger" id="btnCancelarPedido"> |
|
|
<i class="bi bi-x-circle me-1"></i> Cancelar Pedido |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal fade" id="modalEditarItem" tabindex="-1" aria-labelledby="modalEditarItemLabel" aria-hidden="true"> |
|
|
<div class="modal-dialog"> |
|
|
<div class="modal-content bg-dark"> |
|
|
<div class="modal-header bg-secondary bg-opacity-25"> |
|
|
<h5 class="modal-title" id="modalEditarItemLabel">Editar Item</h5> |
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<form id="formEditarItem"> |
|
|
<div class="mb-3"> |
|
|
<label for="editarProduto" class="form-label">Produto</label> |
|
|
<select class="form-select" id="editarProduto" required> |
|
|
<option value="" selected disabled>Selecione um produto</option> |
|
|
<option>Produto X</option> |
|
|
<option>Produto Y</option> |
|
|
<option>Produto Z</option> |
|
|
<option>Produto W</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="editarQuantidade" class="form-label">Quantidade</label> |
|
|
<input type="number" class="form-control" id="editarQuantidade" min="1" value="1" required> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="editarValorUnitario" class="form-label">Valor Unitário</label> |
|
|
<input type="number" class="form-control" id="editarValorUnitario" min="0.01" step="0.01" value="0.00" required> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="editarQuantidadeRecebida" class="form-label">Quantidade Recebida</label> |
|
|
<input type="number" class="form-control" id="editarQuantidadeRecebida" min="0" value="0"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="editarStatusItem" class="form-label">Status</label> |
|
|
<select class="form-select" id="editarStatusItem"> |
|
|
<option value="Pendente">Pendente</option> |
|
|
<option value="Parcial">Parcial</option> |
|
|
<option value="Recebido">Recebido</option> |
|
|
</select> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> |
|
|
<i class="bi bi-x-lg me-1"></i> Cancelar |
|
|
</button> |
|
|
<button type="button" class="btn btn-primary" id="btnSalvarItem"> |
|
|
<i class="bi bi-save me-1"></i> Salvar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal fade" id="modalAdicionarItem" tabindex="-1" aria-labelledby="modalAdicionarItemLabel" aria-hidden="true"> |
|
|
<div class="modal-dialog"> |
|
|
<div class="modal-content bg-dark"> |
|
|
<div class="modal-header bg-secondary bg-opacity-25"> |
|
|
<h5 class="modal-title" id="modalAdicionarItemLabel">Adicionar Item</h5> |
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<form id="formAdicionarItem"> |
|
|
<div class="mb-3"> |
|
|
<label for="novoProduto" class="form-label">Produto</label> |
|
|
<select class="form-select" id="novoProduto" required> |
|
|
<option value="" selected disabled>Selecione um produto</option> |
|
|
<option>Produto X</option> |
|
|
<option>Produto Y</option> |
|
|
<option>Produto Z</option> |
|
|
<option>Produto W</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="novoQuantidade" class="form-label">Quantidade</label> |
|
|
<input type="number" class="form-control" id="novoQuantidade" min="1" value="1" required> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label for="novoValorUnitario" class="form-label">Valor Unitário</label> |
|
|
<input type="number" class="form-control" id="novoValorUnitario" min="0.01" step="0.01" value="0.00" required> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> |
|
|
<i class="bi bi-x-lg me-1"></i> Cancelar |
|
|
</button> |
|
|
<button type="button" class="btn btn-primary" id="btnConfirmarAdicionarItem"> |
|
|
<i class="bi bi-plus-lg me-1"></i> Adicionar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> |
|
|
|
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> |
|
|
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|
|
<script> |
|
|
$(document).ready(function() { |
|
|
|
|
|
$('#tabelaPedidos').DataTable({ |
|
|
language: { |
|
|
url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json' |
|
|
}, |
|
|
responsive: true |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnNovoPedido').click(function() { |
|
|
var offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasNovoPedido')); |
|
|
offcanvas.show(); |
|
|
}); |
|
|
|
|
|
|
|
|
$('.btnVisualizar').click(function() { |
|
|
var modal = new bootstrap.Modal(document.getElementById('modalDetalhesPedido')); |
|
|
modal.show(); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnAdicionarItem').click(function() { |
|
|
var modal = new bootstrap.Modal(document.getElementById('modalAdicionarItem')); |
|
|
modal.show(); |
|
|
}); |
|
|
|
|
|
|
|
|
$('.btnEditarItem').click(function() { |
|
|
var modal = new bootstrap.Modal(document.getElementById('modalEditarItem')); |
|
|
modal.show(); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnConfirmarAdicionarItem').click(function() { |
|
|
Swal.fire({ |
|
|
title: 'Item adicionado!', |
|
|
text: 'O novo item foi adicionado ao pedido.', |
|
|
icon: 'success', |
|
|
confirmButtonText: 'OK' |
|
|
}).then(() => { |
|
|
var modal = bootstrap.Modal.getInstance(document.getElementById('modalAdicionarItem')); |
|
|
modal.hide(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnSalvarItem').click(function() { |
|
|
Swal.fire({ |
|
|
title: 'Alterações salvas!', |
|
|
text: 'As alterações no item foram salvas com sucesso.', |
|
|
icon: 'success', |
|
|
confirmButtonText: 'OK' |
|
|
}).then(() => { |
|
|
var modal = bootstrap.Modal.getInstance(document.getElementById('modalEditarItem')); |
|
|
modal.hide(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('.btnRemoverItem').click(function() { |
|
|
Swal.fire({ |
|
|
title: 'Remover item?', |
|
|
text: 'Tem certeza que deseja remover este item do pedido?', |
|
|
icon: 'warning', |
|
|
showCancelButton: true, |
|
|
confirmButtonColor: '#3085d6', |
|
|
cancelButtonColor: '#d33', |
|
|
confirmButtonText: 'Sim, remover!', |
|
|
cancelButtonText: 'Cancelar' |
|
|
}).then((result) => { |
|
|
if (result.isConfirmed) { |
|
|
Swal.fire( |
|
|
'Removido!', |
|
|
'O item foi removido do pedido.', |
|
|
'success' |
|
|
); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnEnviarAprovacao').click(function() { |
|
|
Swal.fire({ |
|
|
title: 'Enviar para aprovação?', |
|
|
text: 'Tem certeza que 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.', |
|
|
'success' |
|
|
); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnRegistrarRecebimento').click(function() { |
|
|
Swal.fire({ |
|
|
title: 'Registrar recebimento', |
|
|
text: 'Selecione o tipo de recebimento:', |
|
|
icon: 'info', |
|
|
showDenyButton: true, |
|
|
showCancelButton: true, |
|
|
confirmButtonText: 'Recebimento Total', |
|
|
denyButtonText: 'Recebimento Parcial', |
|
|
cancelButtonText: 'Cancelar' |
|
|
}).then((result) => { |
|
|
if (result.isConfirmed) { |
|
|
Swal.fire( |
|
|
'Recebimento total registrado!', |
|
|
'Todos os itens foram marcados como recebidos.', |
|
|
'success' |
|
|
); |
|
|
} else if (result.isDenied) { |
|
|
Swal.fire( |
|
|
'Recebimento parcial registrado!', |
|
|
'Os itens recebidos foram atualizados.', |
|
|
'success' |
|
|
); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnCancelarPedido').click(function() { |
|
|
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: '#3085d6', |
|
|
cancelButtonColor: '#d33', |
|
|
confirmButtonText: 'Sim, cancelar!', |
|
|
cancelButtonText: 'Manter pedido' |
|
|
}).then((result) => { |
|
|
if (result.isConfirmed) { |
|
|
Swal.fire( |
|
|
'Cancelado!', |
|
|
'O pedido foi cancelado com sucesso.', |
|
|
'success' |
|
|
).then(() => { |
|
|
var modal = bootstrap.Modal.getInstance(document.getElementById('modalDetalhesPedido')); |
|
|
modal.hide(); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#formNovoPedido').submit(function(e) { |
|
|
e.preventDefault(); |
|
|
Swal.fire({ |
|
|
title: 'Pedido criado!', |
|
|
text: 'O novo pedido de compra foi criado com sucesso.', |
|
|
icon: 'success', |
|
|
confirmButtonText: 'OK' |
|
|
}).then(() => { |
|
|
var offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasNovoPedido')); |
|
|
offcanvas.hide(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnAplicarFiltros').click(function() { |
|
|
Swal.fire({ |
|
|
title: 'Filtros aplicados!', |
|
|
text: 'Os filtros foram aplicados à lista de pedidos.', |
|
|
icon: 'success', |
|
|
confirmButtonText: 'OK' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('#btnLimparFiltros').click(function() { |
|
|
$('#filtroFornecedor, #filtroStatus, #filtroResponsavel, #filtroData').val(''); |
|
|
Swal.fire({ |
|
|
title: 'Filtros limpos!', |
|
|
text: 'Todos os filtros foram removidos.', |
|
|
icon: 'success', |
|
|
confirmButtonText: 'OK' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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-datatables-boootstrap532" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
