File "index.php"
Full Path: C:/wamp64/www/PERSONAL/Personal/index.php
File size: 31.2 KB
MIME-type: text/x-php
Charset: utf-8
<?php
// Conexion db
include("../connection.php");
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control De Ingresos Personal</title>
<link rel="icon" type="image/png" href="../img/icono.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
.pagination {
display: none;
}
.select2-container--bootstrap-5 .select2-dropdown {
z-index: 2000;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
header h1 {
font-size: 0.9rem !important;
}
.btn-group-mobile {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.btn-group-mobile .btn {
width: 100%;
margin: 0 !important;
}
#tbl_Personal {
font-size: 0.85rem;
}
#tbl_Personal th,
#tbl_Personal td {
padding: 0.5rem;
white-space: nowrap;
}
#tbl_Personal .btn {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
}
@media (max-width: 576px) {
header h1 {
font-size: 0.75rem !important;
}
#tbl_Personal thead th:nth-child(1),
#tbl_Personal tbody td:nth-child(1),
#tbl_Personal thead th:nth-child(7),
#tbl_Personal tbody td:nth-child(7) {
display: none;
}
}
</style>
</head>
<body class="vh-100" style="background: #FFFFFF;">
<header style="background: #FF9800;" class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<div class="container-fluid d-flex justify-content-between align-items-center">
<h1 class="p-3 m-0 text-light fs-4">CONTROL DE ENTRADA Y SALIDA DE PERSONAL <strong>AVICAMPO</strong></h1>
<a href="../logout.php" class="btn btn-sm text-light" style="background-color:#E65100;">
<i class="fas fa-sign-out-alt"></i> <span class="d-none d-md-inline">Cerrar Sesión</span>
</a>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
<div class="btn-group-mobile d-flex flex-column flex-md-row gap-2 my-3">
<button type="button" class="btn btn-lg text-light" data-bs-toggle="modal" style="background-color:#FF9800;" data-bs-target="#addUserModal">
<i class="fas fa-user-plus"></i> <span class="d-none d-sm-inline">Agregar Usuario</span>
</button>
<a href="Ccostos/index.php" class="btn btn-lg text-light" style="background-color:#FF9800;">
<i class="fa-solid fa-building-user"></i></i> Centro Costos
</a>
<a href="../Carnet/index.html" class="btn btn-lg text-light" style="background-color:#f57c00;">
<i class="fas fa-id-card"></i> Crear Carnet
</a>
<a href="../EntregaCarnet/frontend/planilla.html" class="btn btn-lg text-light" style="background-color:#f57c00;">
<i class="fa-solid fa-signature"></i> Firma Carnet
</a>
<a href="Areas/index.php" class="btn btn-lg text-light" style="background-color:#FF8724;">
<i class="fa-solid fa-passport"></i></i> Areas
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
<div class="table-responsive">
<table id="tbl_Personal" class="table table-bordered" style="background: #FF98000A;">
<thead style="background: #FF9800;" class="text-light">
<tr>
<th>Id</th>
<th>Cedula</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Rh</th>
<th>Centro Costo</th>
<th>Descripcion</th>
<th>Cargo</th>
<th>Area</th>
<th>Rango</th>
<th>Opciones</th>
</tr>
</thead>
<tbody class="table-group-divider">
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ========================================================= -->
<!-- Modal Agregar Usuario -->
<!-- ========================================================= -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header text-light" style="background: #FF9800;">
<h1 class="modal-title fs-5" id="addUserModalLabel">Creacion Nuevo Usuario</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="saveUserForm" action="javascript:void();" method="post">
<div class="modal-body">
<div class="mb-3">
<label for="inputCedula" class="form-label">Cedula</label>
<input type="text" name="inputCedula" class="form-control" id="inputCedula" value="">
</div>
<div class="mb-3">
<label for="inputNombre" class="form-label">Nombre</label>
<input type="text" name="inputNombre" class="form-control" id="inputNombre" value="" style="text-transform:uppercase;">
</div>
<div class="mb-3">
<label for="inputApellido" class="form-label">Apellido</label>
<input type="text" name="inputApellido" class="form-control" id="inputApellido" value="" style="text-transform:uppercase;">
</div>
<div class="mb-3">
<label for="inputRh" class="form-label">RH</label>
<select name="inputRh" class="form-select" id="inputRh">
<option disabled selected></option>
<option>O -</option>
<option>O +</option>
<option>A -</option>
<option>A +</option>
<option>B -</option>
<option>B +</option>
<option>AB -</option>
<option>AB +</option>
<option>-</option>
</select>
</div>
<div class="mb-3">
<label for="inputCCosto" class="form-label">Centro de Costo</label>
<select name="inputCCosto" class="form-control" id="inputCCosto" style="width: 100%;">
<option value="">Buscar Centro de Costo</option>
</select>
</div>
<div class="mb-3">
<label for="inputDescripcion" class="form-label">Descripcion</label>
<select name="inputDescripcion" class="form-control" id="inputDescripcion" style="width: 100%;" disabled>
<option value="">Seleccione Descripción</option>
</select>
</div>
<div class="mb-3">
<label for="inputCargo" class="form-label">Cargo</label>
<select name="inputCargo" class="form-control" id="inputCargo" style="width: 100%;" disabled>
<option value="">Seleccione Cargo</option>
</select>
</div>
<!-- CAMPO AREA (nuevo) -->
<div class="mb-3">
<label for="inputArea" class="form-label">Area</label>
<select name="inputArea" class="form-control" id="inputArea" style="width: 100%;">
<option value="">Buscar Area</option>
</select>
</div>
<div class="mb-3">
<label for="inputRango" class="form-label">Rango</label>
<input type="number" step="0.01" name="inputRango" class="form-control" id="inputRango" value="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<!-- ========================================================= -->
<!-- Modal Editar Usuario -->
<!-- ========================================================= -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header text-light" style="background: #FF9800;">
<h1 class="modal-title fs-5" id="editUserModalLabel">Actualizar Usuario</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="updateUserForm" action="javascript:void();" method="post">
<div class="modal-body">
<input type="hidden" name="id" id="id" value="">
<input type="hidden" name="trid" id="trid" value="">
<div class="mb-3">
<label for="_inputCedula" class="form-label">Cedula</label>
<input type="text" name="_inputCedula" class="form-control" id="_inputCedula" value="">
</div>
<div class="mb-3">
<label for="_inputNombre" class="form-label">Nombre</label>
<input type="text" name="_inputNombre" class="form-control" id="_inputNombre" value="" style="text-transform:uppercase;">
</div>
<div class="mb-3">
<label for="_inputApellido" class="form-label">Apellido</label>
<input type="text" name="_inputApellido" class="form-control" id="_inputApellido" value="" style="text-transform:uppercase;">
</div>
<div class="mb-3">
<label for="_inputRh" class="form-label">RH</label>
<input type="text" name="_inputRh" class="form-control" id="_inputRh" value="" style="text-transform:uppercase;">
</div>
<div class="mb-3">
<label for="_inputCCosto" class="form-label">Centro de Costo</label>
<input type="text" name="_inputCCosto" class="form-control" id="_inputCCosto" value="" style="text-transform:uppercase;">
</div>
<div class="mb-3">
<label for="_inputDescripcion" class="form-label">Descripcion</label>
<input type="text" name="_inputDescripcion" class="form-control" id="_inputDescripcion" value="" style="text-transform:uppercase;">
</div>
<div class="mb-3">
<label for="_inputCargo" class="form-label">Cargo</label>
<input type="text" name="_inputCargo" class="form-control" id="_inputCargo" value="" style="text-transform:uppercase;">
</div>
<!-- CAMPO AREA con Select2 (nuevo) -->
<div class="mb-3">
<label for="_inputArea" class="form-label">Area</label>
<select name="_inputArea" class="form-control" id="_inputArea" style="width: 100%;">
<option value="">Buscar Area</option>
</select>
</div>
<div class="mb-3">
<label for="_inputRango" class="form-label">Rango</label>
<input type="number" step="0.01" name="_inputRango" class="form-control" id="_inputRango" value="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// -------------------------------------------------------
// DataTable
// -------------------------------------------------------
$('#tbl_Personal').DataTable({
'serverSide': true,
'processing': true,
'paging': true,
'order': [],
'ajax': {
'url': 'fetch_data.php',
'type': 'post',
'dataSrc': 'data',
'error': function(xhr, error, code) {
console.error('Error en DataTable:', error);
Swal.fire('Error', 'No se pudieron cargar los datos. Revisa la consola.', 'error');
}
},
'fnCreatedRow': function(nRow, aData, iDataIndex) {
$(nRow).attr('id', aData[0]);
},
'columnDefs': [{
'targets': [0, 10],
'orderable': false,
}],
'responsive': true,
'scrollX': true,
'autoWidth': false,
'language': {
'lengthMenu': 'Mostrar _MENU_ registros por página',
'zeroRecords': 'No se encontraron resultados',
'info': 'Mostrando página _PAGE_ de _PAGES_',
'infoEmpty': 'No hay registros disponibles',
'infoFiltered': '(filtrado de _MAX_ registros totales)',
'search': 'Buscar:',
'loadingRecords':'Cargando...',
'processing': 'Procesando...',
'paginate': {
'first': 'Primero',
'last': 'Último',
'next': 'Siguiente',
'previous': 'Anterior'
}
}
});
// -------------------------------------------------------
// Función auxiliar para configurar Select2 de Área
// -------------------------------------------------------
function initAreaSelect2(selector, parentModal) {
$(selector).select2({
dropdownParent: $(parentModal),
placeholder: "Buscar Area",
allowClear: true,
ajax: {
url: 'fetch_area.php',
dataType: 'json',
delay: 250,
data: function(params) {
return { q: params.term };
},
processResults: function(data) {
return data;
},
cache: true
}
});
}
// -------------------------------------------------------
// Inicializar Select2 - Modal AGREGAR
// -------------------------------------------------------
$('#inputDescripcion').select2({
dropdownParent: $('#addUserModal'),
placeholder: "Seleccione Descripción",
allowClear: true,
}).prop('disabled', true);
$('#inputCargo').select2({
dropdownParent: $('#addUserModal'),
placeholder: "Seleccione Cargo",
allowClear: true,
}).prop('disabled', true);
// Select2 Área - Modal Agregar
initAreaSelect2('#inputArea', '#addUserModal');
$('#inputCCosto').select2({
dropdownParent: $('#addUserModal'),
placeholder: "Buscar Centro de Costo",
allowClear: true,
ajax: {
url: 'fetch_ccosto.php',
dataType: 'json',
delay: 250,
data: function(params) {
return { q: params.term };
},
processResults: function(data) {
return data;
},
cache: true
}
});
$('#inputCCosto').on('change', function() {
var ccosto = $(this).val();
$('#inputDescripcion').val(null).trigger('change').prop('disabled', true);
$('#inputCargo').val(null).trigger('change').prop('disabled', true);
if (ccosto) {
$('#inputDescripcion').prop('disabled', false).select2({
dropdownParent: $('#addUserModal'),
placeholder: "Buscar Descripción",
allowClear: true,
ajax: {
url: 'fetch_dependents.php',
dataType: 'json',
delay: 250,
data: function(params) {
return { ccosto: ccosto, q: params.term, field: 'descripcion' };
},
processResults: function(data) { return data; },
cache: true
}
});
}
});
$('#inputDescripcion').on('change', function() {
var ccosto = $('#inputCCosto').val();
var descripcion = $(this).val();
$('#inputCargo').val(null).trigger('change').prop('disabled', true);
if (ccosto && descripcion) {
$('#inputCargo').prop('disabled', false).select2({
dropdownParent: $('#addUserModal'),
placeholder: "Buscar Cargo",
allowClear: true,
ajax: {
url: 'fetch_dependents.php',
dataType: 'json',
delay: 250,
data: function(params) {
return { ccosto: ccosto, descripcion: descripcion, q: params.term, field: 'cargo' };
},
processResults: function(data) { return data; },
cache: true
}
});
}
});
// Reset modal Agregar al cerrar
$('#addUserModal').on('hidden.bs.modal', function () {
$('#inputCCosto').val(null).trigger('change');
$('#inputDescripcion').val(null).trigger('change').prop('disabled', true);
$('#inputCargo').val(null).trigger('change').prop('disabled', true);
$('#inputArea').val(null).trigger('change');
$("#saveUserForm")[0].reset();
});
// -------------------------------------------------------
// Guardar Nuevo Usuario
// -------------------------------------------------------
$(document).on('submit', '#saveUserForm', function(event) {
event.preventDefault();
var cedula = $('#inputCedula').val();
var nombre = $('#inputNombre').val();
var apellido = $('#inputApellido').val();
var rh = $('#inputRh').val();
var ccosto = $('#inputCCosto').val();
var descripcion = $('#inputDescripcion').val();
var cargo = $('#inputCargo').val();
var area = $('#inputArea').val();
var rango = $('#inputRango').val();
if (cedula && nombre && apellido && rh && ccosto && descripcion && cargo && area && rango) {
$.ajax({
url: "add_user.php",
data: { cedula, nombre, apellido, rh, ccosto, descripcion, cargo, area, rango },
type: 'post',
success: function(data) {
var json = JSON.parse(data);
if (json.status == 'success') {
var table = $('#tbl_Personal').DataTable();
table.draw();
Swal.fire('Éxito!', 'Usuario agregado correctamente', 'success');
$("#saveUserForm")[0].reset();
$('#inputCCosto').val(null).trigger('change');
$('#inputDescripcion').val(null).trigger('change').prop('disabled', true);
$('#inputCargo').val(null).trigger('change').prop('disabled', true);
$('#inputArea').val(null).trigger('change');
$("#addUserModal").modal("hide");
}
},
error: function(xhr, status, error) {
console.error('Error:', error);
Swal.fire('Error', 'No se pudo guardar el usuario', 'error');
}
});
} else {
Swal.fire('Advertencia', 'Por favor complete todos los campos requeridos', 'warning');
}
});
// -------------------------------------------------------
// Cargar datos para Edición + inicializar Select2 de Area en modal editar
// -------------------------------------------------------
$(document).on('click', '.editBtn', function(event) {
var id = $(this).data('id');
var trid = $(this).closest('tr').attr('id');
$.ajax({
url: "get_single_user.php",
data: { id: id },
type: "post",
success: function(data) {
var json = JSON.parse(data);
$('#id').val(json.id);
$('#trid').val(trid);
$('#_inputCedula').val(json.cedula);
$('#_inputNombre').val(json.nombre);
$('#_inputApellido').val(json.apellido);
$('#_inputRh').val(json.rh);
$('#_inputCCosto').val(json.ccosto);
$('#_inputDescripcion').val(json.descripcion);
$('#_inputCargo').val(json.cargo);
$('#_inputRango').val(json.rango);
// Cargar el valor de área en el Select2 del modal editar
var areaVal = json.area;
var areaText = json.area;
// Crear la opción si no existe y seleccionarla
if ($('#_inputArea').find("option[value='" + areaVal + "']").length === 0) {
var newOption = new Option(areaText, areaVal, true, true);
$('#_inputArea').append(newOption);
}
$('#_inputArea').val(areaVal).trigger('change');
$('#editUserModal').modal('show');
}
});
});
// Inicializar Select2 de Área en modal Editar (se hace una sola vez)
initAreaSelect2('#_inputArea', '#editUserModal');
// -------------------------------------------------------
// Actualizar Usuario
// -------------------------------------------------------
$(document).on('submit', '#updateUserForm', function(event) {
event.preventDefault();
var id = $('#id').val();
var trid = $('#trid').val();
var cedula = $('#_inputCedula').val();
var nombre = $('#_inputNombre').val();
var apellido = $('#_inputApellido').val();
var rh = $('#_inputRh').val();
var ccosto = $('#_inputCCosto').val();
var descripcion = $('#_inputDescripcion').val();
var cargo = $('#_inputCargo').val();
var area = $('#_inputArea').val();
var rango = $('#_inputRango').val();
$.ajax({
url: "update_user.php",
data: { id, cedula, nombre, apellido, rh, ccosto, descripcion, cargo, area, rango },
type: 'post',
success: function(data) {
var json = JSON.parse(data);
if (json.status == 'success') {
var table = $('#tbl_Personal').DataTable();
var button = '<a href="javascript:void(0);" class="btn btn-sm btn-info p-2 m-1 editBtn" data-id="' + id + '">Editar</a> '
+ '<a href="javascript:void(0);" class="btn btn-sm btn-danger p-2 m-1 btnDelete" data-id="' + id + '">Eliminar</a>';
table.row("[id='" + trid + "']").data([id, cedula, nombre, apellido, rh, ccosto, descripcion, cargo, area, rango, button]);
Swal.fire('Éxito!', 'Usuario actualizado correctamente', 'success');
$('#editUserModal').modal('hide');
} else {
Swal.fire('Error', 'Error al actualizar', 'error');
}
}
});
});
// -------------------------------------------------------
// Eliminar Usuario
// -------------------------------------------------------
$(document).on('click', '.btnDelete', function(event) {
var id = $(this).data('id');
Swal.fire({
title: '¿Estás Seguro?',
text: "Esta acción no se puede deshacer",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Sí, Eliminar!',
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "delete_user.php",
data: { id: id },
type: "post",
success: function(data) {
var json = JSON.parse(data);
if (json.status == 'success') {
$('#' + id).closest('tr').remove();
Swal.fire('Eliminado!', 'Usuario eliminado con éxito', 'success');
} else {
Swal.fire('Error', 'Error al eliminar', 'error');
}
}
});
}
});
});
});
</script>
</body>
</html>