ADUANASOFT/MVE
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

grales

Browse Source
This commit is contained in:
Ernesto Herrera
2025-10-21 11:41:30 -06:00
parent ed2ef4e01b
commit b1b9e4a77c
49 changed files with 14632 additions and 1736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
views/claves_pedimentos/crear.php Normal file
View File

@@ -0,0 +1,230 @@
<?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>🔑 Nueva Clave de Pedimento</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
.sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
.sidebar .nav-link { font-weight: bold; color: white; transition: all 0.3s ease; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #495057; color: #fff; }
.content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease;}
.navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) { .content { margin-left: 250px; } }
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content { margin-left: 0; }
.sidebar .nav-link { font-weight: normal; color: #343a40; background-color: transparent; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
}
.card { border-radius: 12px; }
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
/* Efecto para botones */
.btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn-animated:hover::before { left: 100%; }
</style>
</head>
<body>
<div class="content">
<div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="animate__animated animate__fadeInDown title-glow">🔑 Nueva Clave de Pedimento</h4>
<a href="/IMPORTADORES/claves_pedimentos/lista" class="btn btn-secondary btn-animated">
<i class="fas fa-arrow-left"></i> Regresar a Lista
</a>
</div>
<div class="card fade-in-up">
<div class="card-body">
<form action="/IMPORTADORES/claves_pedimentos/guardar" method="POST" id="formClave">
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-info-circle"></i> Información de la Clave</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label for="codigo" class="form-label">Código de la Clave <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="codigo" name="codigo" required
placeholder="Ej: A1, B3, G1" maxlength="10" style="text-transform: uppercase;">
<div class="form-text">Máximo 10 caracteres. Se convertirá automáticamente a mayúsculas.</div>
</div>
<div class="mb-3">
<label for="descripcion" class="form-label">Descripción <span class="text-danger">*</span></label>
<textarea class="form-control" id="descripcion" name="descripcion" rows="4" required
placeholder="Descripción detallada de la clave de pedimento" maxlength="255"></textarea>
<div class="form-text">Describe claramente el tipo de operación que representa esta clave.</div>
</div>
<div class="mb-3">
<label for="tipo_operacion" class="form-label">Tipo de Operación</label>
<select class="form-select" id="tipo_operacion" name="tipo_operacion">
<option value="importacion" selected>Importación</option>
<option value="exportacion">Exportación</option>
<option value="transito">Tránsito</option>
<option value="otros">Otros</option>
</select>
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="activo" name="activo" checked>
<label class="form-check-label" for="activo">
<i class="fas fa-toggle-on text-success"></i> Clave activa
</label>
<div class="form-text">Las claves inactivas no aparecerán en los formularios de pedimentos.</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3 bg-light">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-lightbulb"></i> Ejemplos de Claves Comunes</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Código</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
<tr><td><strong>A1</strong></td><td>Importación definitiva de mercancías</td></tr>
<tr><td><strong>A3</strong></td><td>Importación definitiva de vehículos usados</td></tr>
<tr><td><strong>A4</strong></td><td>Importación definitiva de vehículos nuevos</td></tr>
<tr><td><strong>B1</strong></td><td>Importación temporal para elaborar</td></tr>
<tr><td><strong>C1</strong></td><td>Importación definitiva de mercancías donadas</td></tr>
<tr><td><strong>G1</strong></td><td>Importación con Programa IMMEX</td></tr>
<tr><td><strong>I1</strong></td><td>Importación definitiva exenta</td></tr>
<tr><td><strong>L1</strong></td><td>Importación con TLC</td></tr>
</tbody>
</table>
</div>
<div class="alert alert-info mt-3">
<i class="fas fa-info-circle"></i>
<strong>Consejo:</strong> Puedes crear tus propias claves personalizadas o usar las estándar del SAT.
</div>
</div>
</div>
</div>
</div>
<!-- Botones -->
<div class="row">
<div class="col-md-12">
<div class="d-flex justify-content-end gap-2">
<a href="/IMPORTADORES/claves_pedimentos/lista" class="btn btn-secondary btn-animated">
<i class="fas fa-times"></i> Cancelar
</a>
<button type="submit" class="btn btn-success btn-animated">
<i class="fas fa-save"></i> Guardar Clave
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
// Validación del formulario
$('#formClave').on('submit', function(e) {
var codigo = $('#codigo').val().trim();
var descripcion = $('#descripcion').val().trim();
if (!codigo || !descripcion) {
e.preventDefault();
Swal.fire({
icon: 'warning',
title: 'Campos obligatorios',
text: 'Por favor complete todos los campos obligatorios (*)',
confirmButtonColor: '#ffc107'
});
return false;
}
// Validación del código
if (codigo.length > 10) {
e.preventDefault();
Swal.fire({
icon: 'error',
title: 'Código muy largo',
text: 'El código no puede tener más de 10 caracteres',
confirmButtonColor: '#dc3545'
});
$('#codigo').focus();
return false;
}
// Validar que el código no tenga caracteres especiales
var regex = /^[A-Z0-9]+$/;
if (!regex.test(codigo)) {
e.preventDefault();
Swal.fire({
icon: 'error',
title: 'Código inválido',
text: 'El código solo puede contener letras y números',
confirmButtonColor: '#dc3545'
});
$('#codigo').focus();
return false;
}
});
// Convertir código a mayúsculas automáticamente
$('#codigo').on('input', function() {
this.value = this.value.toUpperCase();
});
// Contador de caracteres para descripción
$('#descripcion').on('input', function() {
var current = $(this).val().length;
var max = 255;
var remaining = max - current;
if (remaining < 20) {
$(this).next('.form-text').text(`Caracteres restantes: ${remaining}`).addClass('text-warning');
} else {
$(this).next('.form-text').text('Describe claramente el tipo de operación que representa esta clave.').removeClass('text-warning');
}
});
});
</script>
</body>
</html>

280
views/claves_pedimentos/editar.php Normal file
View File

@@ -0,0 +1,280 @@
<?php
include __DIR__ . '/../partials/sidebar_importador.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>🔑 Editar Clave de Pedimento</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
.sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
.sidebar .nav-link { font-weight: bold; color: white; transition: all 0.3s ease; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #495057; color: #fff; }
.content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease;}
.navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) { .content { margin-left: 250px; } }
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content { margin-left: 0; }
.sidebar .nav-link { font-weight: normal; color: #343a40; background-color: transparent; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
}
.card { border-radius: 12px; }
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
/* Efecto para botones */
.btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn-animated:hover::before { left: 100%; }
</style>
</head>
<body>
<div class="content">
<div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="animate__animated animate__fadeInDown title-glow">🔑 Editar Clave #<?= htmlspecialchars($clave['id_clave_pedimento']) ?></h4>
<a href="/IMPORTADORES/claves_pedimentos/lista" class="btn btn-secondary btn-animated">
<i class="fas fa-arrow-left"></i> Regresar a Lista
</a>
</div>
<div class="card fade-in-up">
<div class="card-body">
<form action="/IMPORTADORES/claves_pedimentos/actualizar" method="POST" id="formClave">
<input type="hidden" name="id_clave_pedimento" value="<?= htmlspecialchars($clave['id_clave_pedimento']) ?>">
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-info-circle"></i> Información de la Clave</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label for="codigo" class="form-label">Código de la Clave <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="codigo" name="codigo" required
value="<?= htmlspecialchars($clave['codigo'] ?? '') ?>"
placeholder="Ej: A1, B3, G1" maxlength="10" style="text-transform: uppercase;">
<div class="form-text">Máximo 10 caracteres. Se convertirá automáticamente a mayúsculas.</div>
</div>
<div class="mb-3">
<label for="descripcion" class="form-label">Descripción <span class="text-danger">*</span></label>
<textarea class="form-control" id="descripcion" name="descripcion" rows="4" required
placeholder="Descripción detallada de la clave de pedimento" maxlength="255"><?= htmlspecialchars($clave['descripcion'] ?? '') ?></textarea>
<div class="form-text">Describe claramente el tipo de operación que representa esta clave.</div>
</div>
<div class="mb-3">
<label for="tipo_operacion" class="form-label">Tipo de Operación</label>
<select class="form-select" id="tipo_operacion" name="tipo_operacion">
<option value="importacion" <?= ($clave['tipo_operacion'] === 'importacion') ? 'selected' : '' ?>>Importación</option>
<option value="exportacion" <?= ($clave['tipo_operacion'] === 'exportacion') ? 'selected' : '' ?>>Exportación</option>
<option value="transito" <?= ($clave['tipo_operacion'] === 'transito') ? 'selected' : '' ?>>Tránsito</option>
<option value="otros" <?= ($clave['tipo_operacion'] === 'otros') ? 'selected' : '' ?>>Otros</option>
</select>
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="activo" name="activo"
<?= ($clave['activo'] == 1) ? 'checked' : '' ?>>
<label class="form-check-label" for="activo">
<i class="fas fa-toggle-on text-success"></i> Clave activa
</label>
<div class="form-text">Las claves inactivas no aparecerán en los formularios de pedimentos.</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Información de Auditoría -->
<div class="card mb-3 bg-light">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-info"></i> Información del Registro</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<p class="mb-1"><strong>ID:</strong> <?= htmlspecialchars($clave['id_clave_pedimento']) ?></p>
</div>
<div class="col-md-6">
<p class="mb-1"><strong>Código Actual:</strong>
<span class="badge bg-primary"><?= htmlspecialchars($clave['codigo']) ?></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="mb-1"><strong>Fecha Creación:</strong>
<?php
if ($clave['fecha_creacion'] instanceof DateTime) {
echo $clave['fecha_creacion']->format('d/m/Y H:i:s');
} else {
echo 'No disponible';
}
?>
</p>
</div>
<div class="col-md-6">
<p class="mb-1"><strong>Última Modificación:</strong>
<?php
if ($clave['fecha_modificacion'] instanceof DateTime) {
echo $clave['fecha_modificacion']->format('d/m/Y H:i:s');
} else {
echo 'No disponible';
}
?>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="mb-1"><strong>Estado:</strong>
<?php if ($clave['activo'] == 1): ?>
<span class="badge bg-success">Activo</span>
<?php else: ?>
<span class="badge bg-secondary">Inactivo</span>
<?php endif; ?>
</p>
</div>
</div>
</div>
</div>
<!-- Referencias -->
<div class="card mb-3 bg-info text-white">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-lightbulb"></i> Ejemplos de Claves Comunes</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<small><strong>A1:</strong> Importación definitiva</small><br>
<small><strong>A3:</strong> Vehículos usados</small><br>
<small><strong>B1:</strong> Temporal elaborar</small><br>
<small><strong>G1:</strong> Programa IMMEX</small>
</div>
<div class="col-6">
<small><strong>I1:</strong> Definitiva exenta</small><br>
<small><strong>L1:</strong> Con TLC</small><br>
<small><strong>C1:</strong> Mercancías donadas</small><br>
<small><strong>J1:</strong> Temporal reexportación</small>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Botones -->
<div class="row">
<div class="col-md-12">
<div class="d-flex justify-content-end gap-2">
<a href="/IMPORTADORES/claves_pedimentos/lista" class="btn btn-secondary btn-animated">
<i class="fas fa-times"></i> Cancelar
</a>
<button type="submit" class="btn btn-primary btn-animated">
<i class="fas fa-save"></i> Actualizar Clave
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
// Validación del formulario
$('#formClave').on('submit', function(e) {
var codigo = $('#codigo').val().trim();
var descripcion = $('#descripcion').val().trim();
if (!codigo || !descripcion) {
e.preventDefault();
Swal.fire({
icon: 'warning',
title: 'Campos obligatorios',
text: 'Por favor complete todos los campos obligatorios (*)',
confirmButtonColor: '#ffc107'
});
return false;
}
// Validación del código
if (codigo.length > 10) {
e.preventDefault();
Swal.fire({
icon: 'error',
title: 'Código muy largo',
text: 'El código no puede tener más de 10 caracteres',
confirmButtonColor: '#dc3545'
});
$('#codigo').focus();
return false;
}
// Validar que el código no tenga caracteres especiales
var regex = /^[A-Z0-9]+$/;
if (!regex.test(codigo)) {
e.preventDefault();
Swal.fire({
icon: 'error',
title: 'Código inválido',
text: 'El código solo puede contener letras y números',
confirmButtonColor: '#dc3545'
});
$('#codigo').focus();
return false;
}
});
// Convertir código a mayúsculas automáticamente
$('#codigo').on('input', function() {
this.value = this.value.toUpperCase();
});
// Contador de caracteres para descripción
$('#descripcion').on('input', function() {
var current = $(this).val().length;
var max = 255;
var remaining = max - current;
if (remaining < 20) {
$(this).next('.form-text').text(`Caracteres restantes: ${remaining}`).addClass('text-warning');
} else {
$(this).next('.form-text').text('Describe claramente el tipo de operación que representa esta clave.').removeClass('text-warning');
}
});
});
</script>
</body>
</html>

226
views/claves_pedimentos/importar_csv.php Normal file
View File

@@ -0,0 +1,226 @@
<?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>📤 Importar Claves CSV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
.content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease;}
@media (min-width: 768px) { .content { margin-left: 250px; } }
@media (max-width: 767.98px) { .content { margin-left: 0; } }
.card { border-radius: 12px; }
.btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.file-drop-area {
border: 2px dashed #007bff;
border-radius: 10px;
padding: 40px;
text-align: center;
background-color: #f8f9ff;
transition: all 0.3s ease;
cursor: pointer;
}
.file-drop-area:hover {
border-color: #0056b3;
background-color: #e7f1ff;
}
.file-drop-area.dragover {
border-color: #28a745;
background-color: #d4edda;
}
.file-info {
background-color: #e9ecef;
border-radius: 8px;
padding: 15px;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="content">
<div class="d-flex justify-content-between align-items-center mb-4">
<h4><i class="fas fa-upload text-primary"></i> Importar Claves de Pedimentos por CSV</h4>
<div>
<a href="/IMPORTADORES/public/downloads/claves_pedimentos_template.csv" class="btn btn-outline-info btn-animated me-2" download>
<i class="fas fa-download"></i> Descargar Plantilla
</a>
<a href="/IMPORTADORES/claves_pedimentos/lista" class="btn btn-secondary btn-animated">
<i class="fas fa-arrow-left"></i> Regresar
</a>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="card shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="fas fa-file-csv"></i> Cargar Archivo CSV</h5>
</div>
<div class="card-body">
<form action="/IMPORTADORES/claves_pedimentos/procesar_csv" method="POST" enctype="multipart/form-data" id="csvForm">
<div class="file-drop-area" id="fileDropArea">
<i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
<h5>Arrastra tu archivo CSV aquí</h5>
<p class="text-muted">o haz clic para seleccionar archivo</p>
<input type="file" name="csv_file" id="csvFile" accept=".csv" style="display: none;" required>
</div>
<div id="fileInfo" class="file-info" style="display: none;">
<h6><i class="fas fa-file-check text-success"></i> Archivo seleccionado:</h6>
<p id="fileName" class="mb-1"></p>
<small id="fileSize" class="text-muted"></small>
</div>
<div class="mt-4">
<h6><i class="fas fa-cogs"></i> Opciones de importación:</h6>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="omitir_duplicados" id="omitirDuplicados" checked>
<label class="form-check-label" for="omitirDuplicados">
Omitir códigos duplicados (no reemplazar los existentes)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="activar_todas" id="activarTodas" checked>
<label class="form-check-label" for="activarTodas">
Activar todas las claves importadas
</label>
</div>
</div>
<div class="mt-4 text-center">
<button type="submit" class="btn btn-success btn-lg btn-animated" id="submitBtn" disabled>
<i class="fas fa-upload"></i> Procesar Archivo CSV
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm">
<div class="card-header bg-info text-white">
<h5 class="mb-0"><i class="fas fa-info-circle"></i> Instrucciones</h5>
</div>
<div class="card-body">
<h6>📋 Formato del archivo CSV:</h6>
<ul class="small">
<li><strong>Separador:</strong> Coma (,)</li>
<li><strong>Codificación:</strong> UTF-8</li>
<li><strong>Encabezados:</strong> Obligatorios</li>
</ul>
<h6>🏷️ Columnas requeridas:</h6>
<ul class="small">
<li><strong>codigo:</strong> Código de la clave (ej: A1, B2)</li>
<li><strong>descripcion:</strong> Descripción detallada</li>
<li><strong>tipo_operacion:</strong> importacion o exportacion</li>
<li><strong>activo:</strong> 1 (activo) o 0 (inactivo)</li>
</ul>
<div class="alert alert-warning small mt-3">
<i class="fas fa-exclamation-triangle"></i>
<strong>Importante:</strong> Los códigos deben ser únicos. Si existe un código duplicado, se omitirá según la configuración seleccionada.
</div>
<div class="mt-3">
<a href="/IMPORTADORES/public/downloads/claves_pedimentos_template.csv" class="btn btn-sm btn-outline-primary w-100" download>
<i class="fas fa-download"></i> Descargar plantilla de ejemplo
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const fileDropArea = document.getElementById('fileDropArea');
const csvFile = document.getElementById('csvFile');
const fileInfo = document.getElementById('fileInfo');
const fileName = document.getElementById('fileName');
const fileSize = document.getElementById('fileSize');
const submitBtn = document.getElementById('submitBtn');
// Eventos de drag & drop
fileDropArea.addEventListener('click', () => csvFile.click());
fileDropArea.addEventListener('dragover', handleDragOver);
fileDropArea.addEventListener('dragleave', handleDragLeave);
fileDropArea.addEventListener('drop', handleDrop);
csvFile.addEventListener('change', handleFileSelect);
function handleDragOver(e) {
e.preventDefault();
fileDropArea.classList.add('dragover');
}
function handleDragLeave(e) {
e.preventDefault();
fileDropArea.classList.remove('dragover');
}
function handleDrop(e) {
e.preventDefault();
fileDropArea.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0) {
csvFile.files = files;
handleFileSelect();
}
}
function handleFileSelect() {
const file = csvFile.files[0];
if (file) {
// Validar que sea CSV
if (!file.name.toLowerCase().endsWith('.csv')) {
Swal.fire({
icon: 'error',
title: 'Archivo inválido',
text: 'Por favor selecciona un archivo CSV válido.'
});
csvFile.value = '';
return;
}
// Mostrar información del archivo
fileName.textContent = file.name;
fileSize.textContent = `Tamaño: ${(file.size / 1024).toFixed(1)} KB`;
fileInfo.style.display = 'block';
submitBtn.disabled = false;
}
}
// Validar formulario antes de enviar
document.getElementById('csvForm').addEventListener('submit', function(e) {
const file = csvFile.files[0];
if (!file) {
e.preventDefault();
Swal.fire({
icon: 'warning',
title: 'Archivo requerido',
text: 'Por favor selecciona un archivo CSV.'
});
return;
}
// Mostrar indicador de carga
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Procesando...';
submitBtn.disabled = true;
});
</script>
</body>
</html>

170
views/claves_pedimentos/index.php Normal file
View File

@@ -0,0 +1,170 @@
<?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>🔑 Claves de Pedimentos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
.sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
.sidebar .nav-link { font-weight: bold; color: white; transition: all 0.3s ease; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #495057; color: #fff; }
.content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease;}
.navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) { .content { margin-left: 250px; } }
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content { margin-left: 0; }
.sidebar .nav-link { font-weight: normal; color: #343a40; background-color: transparent; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
}
.card { border-radius: 12px; }
/* Animaciones personalizadas */
.card-hover { transition: all 0.3s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
.btn-pulse { animation: pulse 2s infinite; }
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive animations */
@media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
/* Efecto de glow para elementos activos */
.btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
/* Animación para el título */
.title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
/* Efecto para botones */
.btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn-animated:hover::before { left: 100%; }
</style>
</head>
<body>
<div class="content">
<h4 class="mb-4 animate__animated animate__fadeInDown title-glow">🔑 Configuración de Claves de Pedimentos</h4>
<div class="row mb-4">
<div class="col-md-6 col-lg-4 mb-3">
<div class="card bg-primary text-white card-hover fade-in-up">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title">Mis Claves</h5>
<p class="card-text">Ver y gestionar tus claves de pedimentos configuradas</p>
</div>
<div class="align-self-center">
<i class="fas fa-list fa-2x"></i>
</div>
</div>
<a href="/IMPORTADORES/claves_pedimentos/lista" class="btn btn-outline-light btn-sm btn-animated">
Ver Lista <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="card bg-success text-white card-hover fade-in-up">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title">Nueva Clave</h5>
<p class="card-text">Agregar una nueva clave de pedimento personalizada</p>
</div>
<div class="align-self-center">
<i class="fas fa-plus-circle fa-2x"></i>
</div>
</div>
<a href="/IMPORTADORES/claves_pedimentos/crear" class="btn btn-outline-light btn-sm btn-animated">
Crear Nueva <i class="fas fa-plus"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="card bg-warning text-white card-hover fade-in-up">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title">Inicializar</h5>
<p class="card-text">Cargar claves de pedimentos por defecto</p>
</div>
<div class="align-self-center">
<i class="fas fa-download fa-2x"></i>
</div>
</div>
<a href="/IMPORTADORES/claves_pedimentos/inicializar_claves_usuario"
class="btn btn-outline-light btn-sm btn-animated"
onclick="return confirm('¿Desea cargar las claves de pedimentos por defecto? Solo funciona si no tiene claves configuradas.')">
Inicializar <i class="fas fa-magic"></i>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card fade-in-up">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-info-circle"></i> Información del Módulo</h5>
</div>
<div class="card-body">
<p class="text-muted">
Las claves de pedimentos son códigos que identifican el tipo de operación de comercio exterior.
Este módulo te permite personalizar y gestionar las claves que utilizas frecuentemente.
</p>
<div class="row">
<div class="col-md-6">
<h6><i class="fas fa-check text-success"></i> Funcionalidades:</h6>
<ul class="list-unstyled">
<li><i class="fas fa-dot-circle text-primary"></i> Crear claves personalizadas</li>
<li><i class="fas fa-dot-circle text-primary"></i> Modificar claves existentes</li>
<li><i class="fas fa-dot-circle text-primary"></i> Activar/desactivar claves</li>
<li><i class="fas fa-dot-circle text-primary"></i> Eliminar claves no utilizadas</li>
</ul>
</div>
<div class="col-md-6">
<h6><i class="fas fa-lightbulb text-warning"></i> Claves Comunes de Importación:</h6>
<ul class="list-unstyled">
<li><i class="fas fa-dot-circle text-info"></i> <strong>A1:</strong> Importación definitiva</li>
<li><i class="fas fa-dot-circle text-info"></i> <strong>B1:</strong> Importación temporal</li>
<li><i class="fas fa-dot-circle text-info"></i> <strong>G1:</strong> Programa IMMEX</li>
<li><i class="fas fa-dot-circle text-info"></i> <strong>L1:</strong> TLC (Tratados)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>

204
views/claves_pedimentos/lista.php Normal file
View File

@@ -0,0 +1,204 @@
<?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>🔑 Lista de Claves de Pedimentos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
table.dataTable thead th { background:#343a40; color:#fff; }
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
.sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
.sidebar .nav-link { font-weight: bold; color: white; transition: all 0.3s ease; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #495057; color: #fff; }
.content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease;}
.navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) { .content { margin-left: 250px; } }
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content { margin-left: 0; }
.sidebar .nav-link { font-weight: normal; color: #343a40; background-color: transparent; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
}
.card { border-radius: 12px; }
/* Animaciones personalizadas */
.card-hover { transition: all 0.3s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
/* Efecto para botones */
.btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn-animated:hover::before { left: 100%; }
</style>
</head>
<body>
<div class="content">
<div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="animate__animated animate__fadeInDown title-glow">🔑 Mis Claves de Pedimentos</h4>
<div>
<a href="/IMPORTADORES/claves_pedimentos/crear" class="btn btn-success btn-animated me-2">
<i class="fas fa-plus"></i> Nueva Clave
</a>
<a href="/IMPORTADORES/claves_pedimentos/importar_csv" class="btn btn-info btn-animated me-2">
<i class="fas fa-upload"></i> Importar CSV
</a>
<a href="/IMPORTADORES/claves_pedimentos" class="btn btn-secondary btn-animated">
<i class="fas fa-arrow-left"></i> Regresar
</a>
</div>
</div>
<div class="card p-3 shadow-sm card-hover position-relative h-auto fade-in-up">
<div class="table-responsive">
<table id="tablaClaves" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Código</th>
<th>Descripción</th>
<th>Tipo</th>
<th>Estado</th>
<th>Fecha Creación</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<!-- Los datos se cargan via AJAX -->
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
// Inicializar DataTable
$('#tablaClaves').DataTable({
"processing": true,
"serverSide": true,
"searchDelay": 500,
"deferRender": true,
"ajax": {
"url": "/IMPORTADORES/claves_pedimentos/ajax_lista",
"type": "GET"
},
"columns": [
{ "data": 0, "name": "id_clave_pedimento" },
{ "data": 1, "name": "codigo" },
{ "data": 2, "name": "descripcion" },
{ "data": 3, "name": "tipo_operacion" },
{
"data": 4,
"name": "activo",
"render": function(data, type, row) {
if (data === 'Activo') {
return '<span class="badge bg-success">Activo</span>';
} else {
return '<span class="badge bg-secondary">Inactivo</span>';
}
}
},
{ "data": 5, "name": "fecha_creacion" },
{
"data": null,
"orderable": false,
"searchable": false,
"render": function(data, type, row) {
const id = row[0];
return `
<a href="/IMPORTADORES/claves_pedimentos/editar?id=${id}" class="btn btn-sm btn-primary btn-animated" title="Editar">
<i class="fas fa-edit"></i>
</a>
<button type="button" class="btn btn-sm btn-danger btn-animated" onclick="confirmarEliminar(${id})" title="Eliminar">
<i class="fas fa-trash"></i>
</button>
`;
}
}
],
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json"
},
"responsive": true,
"order": [[1, "asc"]], // Ordenar por código
"pageLength": 25,
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]]
});
});
function confirmarEliminar(id) {
Swal.fire({
title: '¿Eliminar clave de pedimento?',
text: '¿Está seguro que desea eliminar esta clave de pedimento?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Sí, eliminar',
cancelButtonText: 'Cancelar',
confirmButtonColor: '#d33'
}).then(result => {
if (result.isConfirmed) {
window.location = `/IMPORTADORES/claves_pedimentos/eliminar?id=${id}`;
}
});
}
// Mostrar alertas de éxito/error
<?php if (isset($_GET['created'])): ?>
<?php if ($_GET['created'] === 'ok'): ?>
Swal.fire({ icon: 'success', title: 'Clave creada', text: 'La clave de pedimento se creó correctamente.', confirmButtonColor: '#198754' });
<?php elseif ($_GET['created'] === 'initialized'): ?>
Swal.fire({ icon: 'success', title: 'Claves inicializadas', text: 'Se cargaron las claves de pedimento por defecto.', confirmButtonColor: '#198754' });
<?php endif; ?>
<?php endif; ?>
<?php if (isset($_GET['updated'])): ?>
Swal.fire({ icon: 'success', title: 'Clave actualizada', text: 'Los datos fueron modificados correctamente.', confirmButtonColor: '#198754' });
<?php endif; ?>
<?php if (isset($_GET['deleted'])): ?>
Swal.fire({ icon: 'success', title: 'Clave eliminada', text: 'La clave de pedimento fue eliminada correctamente.', confirmButtonColor: '#198754' });
<?php endif; ?>
<?php if (isset($_GET['info']) && $_GET['info'] === 'already_initialized'): ?>
Swal.fire({ icon: 'info', title: 'Ya inicializado', text: 'Ya tienes claves de pedimentos configuradas.', confirmButtonColor: '#0d6efd' });
<?php endif; ?>
<?php if (isset($_GET['imported']) && $_GET['imported'] === 'ok' && isset($_GET['message'])): ?>
Swal.fire({
icon: 'success',
title: 'Importación completada',
html: '<?= urldecode($_GET['message']) ?>',
confirmButtonColor: '#198754',
width: 600
});
<?php endif; ?>
</script>
</body>
</html>