Preparando proyecto para migración a repositorio MVE
This commit is contained in:
@@ -27,36 +27,190 @@ if (empty($claves_pedimentos)) {
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>📋 Nuevo Pedimento de Importación</title>
|
||||
<title>Nuevo Pedimento de Importación</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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<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; }
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--secondary: #64748b;
|
||||
--success: #059669;
|
||||
--warning: #d97706;
|
||||
--danger: #dc2626;
|
||||
--info: #0891b2;
|
||||
--light: #f8fafc;
|
||||
--dark: #0f172a;
|
||||
--border-color: #e2e8f0;
|
||||
--text-muted: #64748b;
|
||||
--bg-body: #f8fafc;
|
||||
}
|
||||
.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); }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--dark);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: var(--dark);
|
||||
font-weight: 600;
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-modern {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-modern:hover {
|
||||
background: var(--primary-dark);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-modern.success {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.btn-modern.success:hover {
|
||||
background: #047857;
|
||||
}
|
||||
|
||||
.btn-modern.secondary {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.btn-modern.secondary:hover {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
color: var(--dark);
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-section-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: var(--dark);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 0.625rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.alert-modern {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.alert-modern.warning {
|
||||
background: rgba(217, 119, 6, 0.1);
|
||||
color: #92400e;
|
||||
border-left: 4px solid var(--warning);
|
||||
}
|
||||
|
||||
.alert-modern.info {
|
||||
background: rgba(8, 145, 178, 0.1);
|
||||
color: #0e7490;
|
||||
border-left: 4px solid var(--info);
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
|
||||
/* Efecto para botones */
|
||||
@@ -69,25 +223,28 @@ if (empty($claves_pedimentos)) {
|
||||
</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">📋 Nuevo Pedimento de Importación</h4>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn btn-secondary btn-animated">
|
||||
<i class="fas fa-arrow-left"></i> Regresar a Lista
|
||||
<div class="main-content">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">Nuevo Pedimento de Importación</h1>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn-modern secondary">
|
||||
<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/catalogo_pedimentos/guardar" method="POST" id="formPedimento">
|
||||
<div class="row">
|
||||
<!-- Información Básica -->
|
||||
<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 del Pedimento</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Form Container -->
|
||||
<form action="/IMPORTADORES/catalogo_pedimentos/guardar" method="POST" id="formPedimento" class="fade-in">
|
||||
<div class="row">
|
||||
<!-- Información del Pedimento -->
|
||||
<div class="col-lg-6">
|
||||
<div class="form-card">
|
||||
<h3 class="form-section-title">
|
||||
<div class="form-section-icon">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</div>
|
||||
Información del Pedimento
|
||||
</h3>
|
||||
<div class="mb-3">
|
||||
<label for="pedimento" class="form-label">Número de Pedimento <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="pedimento" name="pedimento" required
|
||||
@@ -280,11 +437,13 @@ if (empty($claves_pedimentos)) {
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn btn-secondary btn-animated">
|
||||
<i class="fas fa-times"></i> Cancelar
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn-modern secondary">
|
||||
<i class="fas fa-times"></i>
|
||||
Cancelar
|
||||
</a>
|
||||
<button type="submit" class="btn btn-success btn-animated" <?= empty($claves_pedimentos) ? 'disabled' : '' ?>>
|
||||
<i class="fas fa-save"></i> Guardar Pedimento
|
||||
<button type="submit" class="btn-modern success" <?= empty($claves_pedimentos) ? 'disabled' : '' ?>>
|
||||
<i class="fas fa-save"></i>
|
||||
Guardar Pedimento
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -294,9 +453,8 @@ if (empty($claves_pedimentos)) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<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>
|
||||
|
||||
@@ -32,22 +32,169 @@ if (!empty($previo['FechaFinal'])) {
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>📋 Editar Pedimento</title>
|
||||
<title>Editar 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<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; }
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--secondary: #64748b;
|
||||
--success: #059669;
|
||||
--warning: #d97706;
|
||||
--danger: #dc2626;
|
||||
--info: #0891b2;
|
||||
--light: #f8fafc;
|
||||
--dark: #0f172a;
|
||||
--border-color: #e2e8f0;
|
||||
--text-muted: #64748b;
|
||||
--bg-body: #f8fafc;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--dark);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: var(--dark);
|
||||
font-weight: 600;
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-modern {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-modern:hover {
|
||||
background: var(--primary-dark);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-modern.success {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.btn-modern.success:hover {
|
||||
background: #047857;
|
||||
}
|
||||
|
||||
.btn-modern.secondary {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.btn-modern.secondary:hover {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
color: var(--dark);
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-section-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: var(--dark);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 0.625rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
|
||||
@media (min-width: 768px) { .content { margin-left: 250px; } }
|
||||
/* En móviles, sin margen lateral */
|
||||
@@ -77,20 +224,21 @@ if (!empty($previo['FechaFinal'])) {
|
||||
</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 Pedimento #<?= htmlspecialchars($previo['IdPrevio']) ?></h4>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn btn-secondary btn-animated">
|
||||
<i class="fas fa-arrow-left"></i> Regresar a Lista
|
||||
<div class="main-content">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">Editar Pedimento #<?= htmlspecialchars($previo['IdPrevio']) ?></h1>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn-modern secondary">
|
||||
<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/catalogo_pedimentos/actualizar" method="POST" id="formPedimento">
|
||||
<input type="hidden" name="id_previo" value="<?= htmlspecialchars($previo['IdPrevio']) ?>">
|
||||
|
||||
<div class="row">
|
||||
<!-- Form Container -->
|
||||
<form action="/IMPORTADORES/catalogo_pedimentos/actualizar" method="POST" id="formPedimento" class="fade-in">
|
||||
<input type="hidden" name="id_previo" value="<?= htmlspecialchars($previo['IdPrevio']) ?>">
|
||||
|
||||
<div class="row">
|
||||
<!-- Información Básica -->
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-3">
|
||||
@@ -310,14 +458,11 @@ if (!empty($previo['FechaFinal'])) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<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>
|
||||
|
||||
@@ -4,160 +4,837 @@
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>📋 Catálogo de Pedimentos</title>
|
||||
<title>Catálogo 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<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; }
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--secondary: #64748b;
|
||||
--success: #059669;
|
||||
--warning: #d97706;
|
||||
--danger: #dc2626;
|
||||
--info: #0891b2;
|
||||
--light: #f8fafc;
|
||||
--dark: #0f172a;
|
||||
--border-color: #e2e8f0;
|
||||
--text-muted: #64748b;
|
||||
--bg-body: #f8fafc;
|
||||
}
|
||||
.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); }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--dark);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: var(--dark);
|
||||
font-weight: 600;
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
height: 100%;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feature-icon.primary { background: var(--primary); }
|
||||
.feature-icon.success { background: var(--success); }
|
||||
.feature-icon.info { background: var(--info); }
|
||||
|
||||
.feature-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: var(--dark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.btn-feature {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-feature:hover {
|
||||
background: var(--primary-dark);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-feature.success {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.btn-feature.success:hover {
|
||||
background: #047857;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-feature.info {
|
||||
background: var(--info);
|
||||
}
|
||||
|
||||
.btn-feature.info:hover {
|
||||
background: #0e7490;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.info-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
color: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: var(--dark);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.feature-list li i {
|
||||
color: var(--success);
|
||||
margin-right: 0.75rem;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
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">📋 Catálogo 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">Lista de Pedimentos</h5>
|
||||
<p class="card-text">Visualizar y gestionar todos los pedimentos registrados</p>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="fas fa-list fa-2x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn btn-outline-light btn-sm btn-animated">
|
||||
Ver Lista <i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
<div class="main-content">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">Catálogo de Pedimentos</h1>
|
||||
<p class="page-subtitle">Gestiona y administra todos los pedimentos de importación del sistema</p>
|
||||
</div>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="feature-card fade-in" onclick="window.location.href='/IMPORTADORES/catalogo_pedimentos/lista'">
|
||||
<div class="feature-icon primary">
|
||||
<i class="fas fa-list"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Lista de Pedimentos</h3>
|
||||
<p class="feature-description">Visualiza y gestiona todos los pedimentos registrados en el sistema con herramientas de búsqueda y filtrado avanzado.</p>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn-feature">
|
||||
Ver Lista
|
||||
<i class="fas fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
</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">Nuevo Pedimento</h5>
|
||||
<p class="card-text">Registrar un nuevo pedimento en el sistema</p>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="fas fa-plus-circle fa-2x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/crear" class="btn btn-outline-light btn-sm btn-animated">
|
||||
Crear Nuevo <i class="fas fa-plus"></i>
|
||||
</a>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="feature-card fade-in" onclick="window.location.href='/IMPORTADORES/catalogo_pedimentos/crear'">
|
||||
<div class="feature-icon success">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Nuevo Pedimento</h3>
|
||||
<p class="feature-description">Registra un nuevo pedimento con toda la información requerida y documentación necesaria para el proceso de importación.</p>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/crear" class="btn-feature success">
|
||||
Crear Nuevo
|
||||
<i class="fas fa-plus ms-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card bg-info text-white card-hover fade-in-up">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h5 class="card-title">Reportes</h5>
|
||||
<p class="card-text">Generar reportes y estadísticas de pedimentos</p>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="fas fa-chart-bar fa-2x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-outline-light btn-sm btn-animated" onclick="proximamente()">
|
||||
Ver Reportes <i class="fas fa-chart-line"></i>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="feature-card fade-in">
|
||||
<div class="feature-icon info">
|
||||
<i class="fas fa-upload"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Importar Archivo</h3>
|
||||
<p class="feature-description">Carga masiva de pedimentos desde archivo de texto con formato específico del sistema aduanero.</p>
|
||||
<button class="btn-feature info" onclick="importarPedimentos()">
|
||||
Importar Datos
|
||||
<i class="fas fa-file-import ms-2"></i>
|
||||
</button>
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-sm btn-outline-secondary" onclick="verificarPedimentosExistentes()" style="border-radius: 6px; font-size: 0.8rem;">
|
||||
<i class="fas fa-search me-1"></i>Ver Existentes
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="limpiarBaseDatos()" style="border-radius: 6px; font-size: 0.8rem;">
|
||||
<i class="fas fa-trash me-1"></i>Limpiar BD
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="feature-card fade-in">
|
||||
<div class="feature-icon warning" style="background: var(--warning);">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Reportes</h3>
|
||||
<p class="feature-description">Genera reportes detallados y estadísticas de pedimentos para análisis y seguimiento de operaciones.</p>
|
||||
<button class="btn-feature" style="background: var(--warning);" onclick="proximamente()">
|
||||
Ver Reportes
|
||||
<i class="fas fa-chart-line ms-2"></i>
|
||||
</button>
|
||||
</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">
|
||||
El catálogo de pedimentos le permite gestionar de manera eficiente todos los pedimentos
|
||||
de importación. Desde aquí puede:
|
||||
</p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fas fa-check text-success"></i> Registrar nuevos pedimentos con toda la información requerida</li>
|
||||
<li><i class="fas fa-check text-success"></i> Consultar y editar pedimentos existentes</li>
|
||||
<li><i class="fas fa-check text-success"></i> Realizar búsquedas avanzadas por diversos criterios</li>
|
||||
<li><i class="fas fa-check text-success"></i> Exportar información para reportes</li>
|
||||
<li><i class="fas fa-check text-success"></i> Mantener un histórico completo de operaciones</li>
|
||||
</ul>
|
||||
<!-- Information Card -->
|
||||
<div class="info-card">
|
||||
<div class="info-card-header">
|
||||
<div class="info-icon">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</div>
|
||||
<h3 class="info-title">Información del Módulo</h3>
|
||||
</div>
|
||||
<p class="info-text">
|
||||
El catálogo de pedimentos te permite gestionar de manera eficiente todos los pedimentos
|
||||
de importación. Desde aquí puedes realizar las siguientes acciones:
|
||||
</p>
|
||||
<ul class="feature-list">
|
||||
<li>
|
||||
<i class="fas fa-check"></i>
|
||||
Registrar nuevos pedimentos con toda la información requerida
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check"></i>
|
||||
Consultar y editar pedimentos existentes
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check"></i>
|
||||
Realizar búsquedas avanzadas por diversos criterios
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check"></i>
|
||||
Exportar información para reportes y análisis
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check"></i>
|
||||
Mantener un histórico completo de operaciones
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para Importar Archivo -->
|
||||
<div class="modal fade" id="modalImportarPedimentos" tabindex="-1" aria-labelledby="modalImportarLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content" style="border-radius: 12px; border: none;">
|
||||
<div class="modal-header" style="background: linear-gradient(135deg, var(--info) 0%, #0e7490 100%); color: white; border-radius: 12px 12px 0 0;">
|
||||
<h5 class="modal-title" id="modalImportarLabel">
|
||||
<i class="fas fa-upload me-2"></i>
|
||||
Importar Pedimentos desde Archivo
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4">
|
||||
<div class="alert alert-info d-flex align-items-start" style="border: none; border-radius: 8px; background: rgba(8, 145, 178, 0.1); border-left: 4px solid var(--info);">
|
||||
<i class="fas fa-info-circle me-2 mt-1" style="color: var(--info);"></i>
|
||||
<div>
|
||||
<strong>Formato del archivo:</strong>
|
||||
<p class="mb-1">El sistema reconoce archivos con los siguientes códigos:</p>
|
||||
<ul class="mb-2 small">
|
||||
<li><strong>501:</strong> Datos del pedimento (número, RFC, fechas)</li>
|
||||
<li><strong>505:</strong> Información de facturas</li>
|
||||
<li><strong>551:</strong> Partidas de mercancías</li>
|
||||
</ul>
|
||||
<p class="mb-0 small text-muted">
|
||||
<i class="fas fa-calendar-day me-1"></i>
|
||||
<strong>Archivos julianos:</strong> Se aceptan extensiones de día del año (.001 a .366)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="formImportarPedimentos" enctype="multipart/form-data">
|
||||
<div class="mb-3">
|
||||
<label for="archivoImportar" class="form-label fw-semibold">
|
||||
<i class="fas fa-file-text me-1"></i>
|
||||
Seleccionar archivos
|
||||
</label>
|
||||
<input type="file" class="form-control" id="archivoImportar" name="archivos[]" multiple required style="border-radius: 8px; border: 1px solid var(--border-color);">
|
||||
<div class="form-text">Formatos soportados: .txt, .dat, archivos julianos (.001-.366). Puedes seleccionar varios archivos.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="validarDuplicados" name="validar_duplicados" checked>
|
||||
<label class="form-check-label fw-medium" for="validarDuplicados">
|
||||
Validar pedimentos duplicados
|
||||
</label>
|
||||
<div class="form-text">Evita importar pedimentos que ya existen en el sistema</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="previewContainer" style="display: none;" class="mb-3">
|
||||
<h6 class="fw-semibold mb-2">
|
||||
<i class="fas fa-eye me-1"></i>
|
||||
Vista previa del archivo
|
||||
</h6>
|
||||
<div id="previewContent" class="p-3" style="background: #f8fafc; border-radius: 8px; border: 1px solid var(--border-color); max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 0.85rem;"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer" style="border-top: 1px solid var(--border-color); border-radius: 0 0 12px 12px;">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 8px;">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="btnProcesarArchivo" style="border-radius: 8px; background: var(--info); border-color: var(--info);" disabled>
|
||||
<i class="fas fa-cogs me-1"></i>
|
||||
Procesar Archivos
|
||||
</button>
|
||||
</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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
// Toast helper (Bootstrap 5): muestra un toast en la esquina superior derecha
|
||||
function ensureToastContainer() {
|
||||
let container = document.getElementById('toastContainer');
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.id = 'toastContainer';
|
||||
container.className = 'position-fixed';
|
||||
container.style.top = 'calc(var(--navbar-height, 70px) + 10px)';
|
||||
container.style.right = '16px';
|
||||
container.style.zIndex = '11000';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
return container;
|
||||
}
|
||||
|
||||
function mostrarToastImportacion(estadisticas) {
|
||||
const ped = Number(estadisticas.pedimentos_procesados || 0);
|
||||
const fac = Number(estadisticas.facturas_procesadas || 0);
|
||||
const par = Number(estadisticas.partidas_procesadas || 0);
|
||||
const dup = Number(estadisticas.duplicados || 0);
|
||||
const err = Number(estadisticas.errores || 0);
|
||||
|
||||
const variant = err > 0 ? 'danger' : (dup > 0 ? 'warning' : 'success');
|
||||
const title = err > 0 ? 'Importación con advertencias' : 'Importación completada';
|
||||
|
||||
const container = ensureToastContainer();
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast align-items-center text-bg-${variant} border-0 shadow`;
|
||||
toast.setAttribute('role', 'alert');
|
||||
toast.setAttribute('aria-live', 'assertive');
|
||||
toast.setAttribute('aria-atomic', 'true');
|
||||
|
||||
toast.innerHTML = `
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
<div class="fw-semibold mb-1"><i class="fas ${variant==='success' ? 'fa-check-circle' : (variant==='warning' ? 'fa-exclamation-triangle' : 'fa-times-circle')} me-1"></i>${title}</div>
|
||||
<div class="small">
|
||||
<span class="me-2">Pedimentos <span class="badge bg-light text-dark">${ped}</span></span>
|
||||
<span class="me-2">Facturas <span class="badge bg-light text-dark">${fac}</span></span>
|
||||
<span class="me-2">Partidas <span class="badge bg-light text-dark">${par}</span></span>
|
||||
${dup > 0 ? `<span class=\"me-2\">Duplicados <span class=\"badge bg-dark\">${dup}</span></span>` : ''}
|
||||
${err > 0 ? `<span class=\"me-2\">Errores <span class=\"badge bg-dark\">${err}</span></span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>`;
|
||||
|
||||
container.appendChild(toast);
|
||||
const bsToast = new bootstrap.Toast(toast, { autohide: true, delay: 7000 });
|
||||
bsToast.show();
|
||||
toast.addEventListener('hidden.bs.toast', () => toast.remove());
|
||||
}
|
||||
// Base URL del proyecto (generada desde PHP)
|
||||
const BASE_URL = '<?php echo "http" . (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] === "on" ? "s" : "") . "://" . $_SERVER["HTTP_HOST"] . "/IMPORTADORES"; ?>';
|
||||
console.log('Base URL:', BASE_URL);
|
||||
|
||||
// Initialize page animations
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const fadeElements = document.querySelectorAll('.fade-in');
|
||||
fadeElements.forEach((element, index) => {
|
||||
element.style.animationDelay = (index * 0.1) + 's';
|
||||
});
|
||||
|
||||
// Add click handlers for cards
|
||||
const cards = document.querySelectorAll('.feature-card');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-6px)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
|
||||
// Configurar eventos del modal de importación
|
||||
configurarModalImportacion();
|
||||
});
|
||||
|
||||
// Funciones para las acciones de las cards
|
||||
function irListaPedimentos() {
|
||||
window.location.href = 'lista.php';
|
||||
}
|
||||
|
||||
function irCrearPedimento() {
|
||||
window.location.href = 'crear.php';
|
||||
}
|
||||
|
||||
function importarPedimentos() {
|
||||
const modal = new bootstrap.Modal(document.getElementById('modalImportarPedimentos'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
function proximamente() {
|
||||
Swal.fire({
|
||||
icon: 'info',
|
||||
title: 'Próximamente',
|
||||
text: 'Esta función estará disponible próximamente.',
|
||||
confirmButtonColor: '#0d6efd'
|
||||
confirmButtonColor: '#2563eb',
|
||||
customClass: {
|
||||
popup: 'rounded-3'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Configuración del modal de importación
|
||||
function configurarModalImportacion() {
|
||||
const archivoInput = document.getElementById('archivoImportar');
|
||||
const previewContainer = document.getElementById('previewContainer');
|
||||
const previewContent = document.getElementById('previewContent');
|
||||
const btnProcesar = document.getElementById('btnProcesarArchivo');
|
||||
|
||||
if (!archivoInput) return; // Si no existe el elemento, salir
|
||||
|
||||
// Manejar selección de archivos (múltiples)
|
||||
archivoInput.addEventListener('change', function(e) {
|
||||
const archivos = Array.from(e.target.files || []);
|
||||
if (archivos.length > 0) {
|
||||
// Validar extensiones de todos los archivos seleccionados
|
||||
const extensionesValidas = ['txt', 'dat'];
|
||||
for (const file of archivos) {
|
||||
const nombreArchivo = file.name.toLowerCase();
|
||||
const extension = nombreArchivo.split('.').pop();
|
||||
const esJuliana = /^\d{3}$/.test(extension); // 3 dígitos exactos
|
||||
if (!extensionesValidas.includes(extension) && !esJuliana) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Archivo no válido',
|
||||
text: `"${file.name}" no es válido. Usa .txt, .dat o extensión juliana (.001-.366)`,
|
||||
confirmButtonColor: '#dc2626',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
archivoInput.value = '';
|
||||
previewContainer.style.display = 'none';
|
||||
btnProcesar.disabled = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Mostrar vista previa del PRIMER archivo y el total seleccionado
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const contenido = e.target.result;
|
||||
mostrarVistaPrevia(contenido, archivos.length);
|
||||
btnProcesar.disabled = false;
|
||||
};
|
||||
reader.readAsText(archivos[0]);
|
||||
} else {
|
||||
previewContainer.style.display = 'none';
|
||||
btnProcesar.disabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Manejar procesamiento del archivo
|
||||
btnProcesar.addEventListener('click', function() {
|
||||
procesarArchivoImportacion();
|
||||
});
|
||||
}
|
||||
|
||||
function mostrarVistaPrevia(contenido, totalArchivos = 1) {
|
||||
const previewContainer = document.getElementById('previewContainer');
|
||||
const previewContent = document.getElementById('previewContent');
|
||||
const lineas = contenido.split('\n').slice(0, 10); // Mostrar solo las primeras 10 líneas
|
||||
|
||||
const preview = lineas.map(linea => {
|
||||
// Resaltar diferentes tipos de registros
|
||||
let clase = '';
|
||||
if (linea.startsWith('501')) {
|
||||
clase = 'style="color: #059669; font-weight: bold;"'; // Verde para pedimentos
|
||||
} else if (linea.startsWith('505')) {
|
||||
clase = 'style="color: #d97706; font-weight: bold;"'; // Naranja para facturas
|
||||
} else if (linea.startsWith('551')) {
|
||||
clase = 'style="color: #2563eb; font-weight: bold;"'; // Azul para partidas
|
||||
}
|
||||
return `<div ${clase}>${linea}</div>`;
|
||||
}).join('');
|
||||
|
||||
let extra = '';
|
||||
if (contenido.split('\n').length > 10) {
|
||||
extra += '<div style="color: #6b7280; font-style: italic;">... y más líneas</div>';
|
||||
}
|
||||
if (totalArchivos > 1) {
|
||||
const restantes = totalArchivos - 1;
|
||||
extra += `<div class="mt-2" style="color: #374151; font-weight: 600;">+ ${restantes} archivo${restantes === 1 ? '' : 's'} más seleccionado${restantes === 1 ? '' : 's'}</div>`;
|
||||
}
|
||||
previewContent.innerHTML = preview + extra;
|
||||
previewContainer.style.display = 'block';
|
||||
}
|
||||
|
||||
function procesarArchivoImportacion() {
|
||||
const formData = new FormData(document.getElementById('formImportarPedimentos'));
|
||||
|
||||
// Mostrar loading en el botón
|
||||
const btnProcesar = document.getElementById('btnProcesarArchivo');
|
||||
const textoOriginal = btnProcesar.innerHTML;
|
||||
btnProcesar.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Procesando...';
|
||||
btnProcesar.disabled = true;
|
||||
|
||||
// Llamada AJAX al backend
|
||||
const url = `${BASE_URL}/public/importar_pedimentos.php`;
|
||||
console.log('Attempting to fetch:', url);
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
console.log('Response status:', response.status);
|
||||
console.log('Response headers:', response.headers);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Response data:', data);
|
||||
// Restaurar botón
|
||||
btnProcesar.innerHTML = textoOriginal;
|
||||
btnProcesar.disabled = false;
|
||||
|
||||
if (data.success) {
|
||||
// Verificar si es respuesta de prueba o de importación real
|
||||
if (data.estadisticas) {
|
||||
// Respuesta de importación real
|
||||
const estadisticas = data.estadisticas;
|
||||
// Mostrar toast superior derecho en lugar del modal
|
||||
mostrarToastImportacion(estadisticas);
|
||||
} else if (data.diagnostico) {
|
||||
// Respuesta de diagnóstico
|
||||
let mensaje = `🔍 Diagnóstico del Sistema:\n\n`;
|
||||
|
||||
// Mostrar checks
|
||||
if (data.checks) {
|
||||
mensaje += `📊 Estado de Componentes:\n`;
|
||||
mensaje += `• Sesión: ${data.checks.sesion ? '✅' : '❌'}\n`;
|
||||
mensaje += `• Usuario ID: ${data.checks.usuario_id || 'N/A'}\n`;
|
||||
mensaje += `• Tipo Usuario: ${data.checks.tipo_usuario || 'N/A'}\n`;
|
||||
mensaje += `• Método POST: ${data.checks.metodo_post ? '✅' : '❌'}\n`;
|
||||
mensaje += `• Archivo recibido: ${data.checks.archivo_recibido ? '✅' : '❌'}\n`;
|
||||
mensaje += `• Conexión DB: ${data.checks.conexion_db ? '✅' : '❌'}\n`;
|
||||
mensaje += `• Dir. temporal: ${data.checks.directorio_temp_existe ? '✅' : '❌'}\n\n`;
|
||||
}
|
||||
|
||||
// Mostrar errores potenciales
|
||||
if (data.errores_potenciales && data.errores_potenciales.length > 0) {
|
||||
mensaje += `⚠️ Problemas detectados:\n`;
|
||||
data.errores_potenciales.forEach(error => {
|
||||
mensaje += `• ${error}\n`;
|
||||
});
|
||||
mensaje += `\n`;
|
||||
}
|
||||
|
||||
// Información del archivo
|
||||
if (data.checks?.archivo_recibido) {
|
||||
mensaje += `📁 Archivo: ${data.checks.archivo_nombre}\n`;
|
||||
if (data.total_lineas) {
|
||||
mensaje += `📏 Total líneas: ${data.total_lineas}\n`;
|
||||
}
|
||||
}
|
||||
|
||||
const icono = data.errores_potenciales.length > 0 ? 'warning' : 'success';
|
||||
const titulo = data.errores_potenciales.length > 0 ? 'Problemas Detectados' : 'Sistema OK';
|
||||
|
||||
Swal.fire({
|
||||
icon: icono,
|
||||
title: titulo,
|
||||
text: mensaje,
|
||||
confirmButtonColor: icono === 'warning' ? '#d97706' : '#059669',
|
||||
customClass: {
|
||||
popup: 'rounded-3'
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Respuesta de prueba genérica
|
||||
let mensaje = `✅ Conexión exitosa!\n\n`;
|
||||
mensaje += `📁 Archivo: ${data.files_data?.nombre || 'No detectado'}\n`;
|
||||
mensaje += `📏 Tamaño: ${data.files_data?.tamaño || 'N/A'} bytes\n`;
|
||||
mensaje += `🕒 Timestamp: ${data.timestamp}\n`;
|
||||
mensaje += `👤 Usuario: ${data.usuario}\n\n`;
|
||||
mensaje += `ℹ️ Esto es una prueba de conexión.`;
|
||||
|
||||
Swal.fire({
|
||||
icon: 'info',
|
||||
title: 'Prueba de Conexión',
|
||||
text: mensaje,
|
||||
confirmButtonColor: '#2563eb',
|
||||
customClass: {
|
||||
popup: 'rounded-3'
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Mostrar error
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error en la Importación',
|
||||
text: data.message || 'Ocurrió un error al procesar el archivo',
|
||||
confirmButtonColor: '#dc2626',
|
||||
customClass: {
|
||||
popup: 'rounded-3'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Cerrar modal solo si fue exitoso
|
||||
if (data.success) {
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('modalImportarPedimentos'));
|
||||
modal.hide();
|
||||
|
||||
// Limpiar formulario
|
||||
document.getElementById('formImportarPedimentos').reset();
|
||||
document.getElementById('previewContainer').style.display = 'none';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// Restaurar botón en caso de error
|
||||
btnProcesar.innerHTML = textoOriginal;
|
||||
btnProcesar.disabled = false;
|
||||
|
||||
console.error('Error:', error);
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error de Conexión',
|
||||
text: 'No se pudo conectar con el servidor. Verifique su conexión e intente nuevamente.',
|
||||
confirmButtonColor: '#dc2626',
|
||||
customClass: {
|
||||
popup: 'rounded-3'
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Funciones para gestión de datos
|
||||
function verificarPedimentosExistentes() {
|
||||
fetch(`${BASE_URL}/public/verificar_pedimentos.php`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const stats = data.estadisticas;
|
||||
let mensaje = `📊 Pedimentos en Base de Datos:\n\n`;
|
||||
mensaje += `• Total: ${stats.total_pedimentos}\n`;
|
||||
mensaje += `• Usuarios: ${stats.usuarios_distintos}\n`;
|
||||
|
||||
if (stats.total_pedimentos > 0) {
|
||||
mensaje += `• Primer pedimento: ${stats.primer_pedimento?.date || 'N/A'}\n`;
|
||||
mensaje += `• Último pedimento: ${stats.ultimo_pedimento?.date || 'N/A'}\n\n`;
|
||||
|
||||
if (data.pedimentos_existentes.length > 0) {
|
||||
mensaje += `🔍 Últimos 5 pedimentos:\n`;
|
||||
data.pedimentos_existentes.slice(0, 5).forEach(p => {
|
||||
mensaje += `• ${p.numero_pedimento} (${p.fecha_creacion?.date || 'N/A'})\n`;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
icon: 'info',
|
||||
title: 'Pedimentos Existentes',
|
||||
text: mensaje,
|
||||
confirmButtonColor: '#2563eb'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
}
|
||||
|
||||
function limpiarBaseDatos() {
|
||||
Swal.fire({
|
||||
title: '⚠️ Confirmar Limpieza',
|
||||
text: 'Esto eliminará TODOS los pedimentos, facturas y partidas. ¿Estás seguro?',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#dc2626',
|
||||
cancelButtonColor: '#6b7280',
|
||||
confirmButtonText: 'Sí, limpiar',
|
||||
cancelButtonText: 'Cancelar'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
fetch(`${BASE_URL}/public/limpiar_pedimentos.php`, {
|
||||
method: 'POST'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Base de Datos Limpiada',
|
||||
text: 'Todos los registros han sido eliminados. Ahora puedes importar pedimentos sin duplicados.',
|
||||
confirmButtonColor: '#059669'
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error al Limpiar',
|
||||
text: data.message || 'No se pudo limpiar la base de datos',
|
||||
confirmButtonColor: '#dc2626'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error de Conexión',
|
||||
text: 'No se pudo conectar al servidor para limpiar la BD',
|
||||
confirmButtonColor: '#dc2626'
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Limpiar modal al cerrar
|
||||
const modal = document.getElementById('modalImportarPedimentos');
|
||||
if (modal) {
|
||||
modal.addEventListener('hidden.bs.modal', function() {
|
||||
document.getElementById('formImportarPedimentos').reset();
|
||||
document.getElementById('previewContainer').style.display = 'none';
|
||||
document.getElementById('btnProcesarArchivo').disabled = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -4,80 +4,316 @@
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>📋 Catálogo de Pedimentos</title>
|
||||
<title>Lista 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<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">
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||||
<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; }
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--secondary: #64748b;
|
||||
--success: #059669;
|
||||
--warning: #d97706;
|
||||
--danger: #dc2626;
|
||||
--info: #0891b2;
|
||||
--light: #f8fafc;
|
||||
--dark: #0f172a;
|
||||
--border-color: #e2e8f0;
|
||||
--text-muted: #64748b;
|
||||
--bg-body: #f8fafc;
|
||||
}
|
||||
.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); }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--dark);
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* 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%; }
|
||||
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: var(--dark);
|
||||
font-weight: 600;
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-modern {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-modern:hover {
|
||||
background: var(--primary-dark);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-modern.success {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.btn-modern.success:hover {
|
||||
background: #047857;
|
||||
}
|
||||
|
||||
.btn-modern.secondary {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.btn-modern.secondary:hover {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.btn-modern.danger {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.btn-modern.danger:hover {
|
||||
background: #b91c1c;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
border-bottom: 3px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.table tbody td {
|
||||
padding: 0.875rem 0.75rem;
|
||||
border-color: var(--border-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody td:first-child {
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: rgba(37, 99, 235, 0.05);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.badge-modern {
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: linear-gradient(135deg, var(--success), #047857);
|
||||
color: white;
|
||||
box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: linear-gradient(135deg, var(--secondary), #475569);
|
||||
color: white;
|
||||
box-shadow: 0 2px 4px rgba(100, 116, 139, 0.2);
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.75rem;
|
||||
margin: 0 0.25rem;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-action.edit {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-action.edit:hover {
|
||||
background: var(--primary-dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-action.delete {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-action.delete:hover {
|
||||
background: #b91c1c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* DataTables customization */
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter,
|
||||
.dataTables_wrapper .dataTables_info,
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_length select,
|
||||
.dataTables_wrapper .dataTables_filter input {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
||||
padding: 0.375rem 0.75rem !important;
|
||||
margin: 0 0.125rem !important;
|
||||
border-radius: 6px !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
|
||||
background: var(--primary) !important;
|
||||
color: white !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
|
||||
background: var(--primary) !important;
|
||||
color: white !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Drawer lateral */
|
||||
.drawer { position: fixed; inset: 0; z-index: 99999; display: none; }
|
||||
.drawer.open { display: block; }
|
||||
.drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); z-index: 99998; }
|
||||
.drawer-panel { position: absolute; top: 0; right: -520px; width: 520px; max-width: 94vw; height: 100%; background: #fff; border-left: 1px solid var(--border-color); box-shadow: -8px 0 24px rgba(0,0,0,0.1); transition: right 0.3s ease; display: flex; flex-direction: column; z-index: 99999; }
|
||||
.drawer.open .drawer-panel { right: 0; }
|
||||
.drawer-header { padding: 1rem 1rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
|
||||
.drawer-title { font-weight: 600; font-size: 1.1rem; }
|
||||
.drawer-subtitle { color: var(--text-muted); font-size: 0.9rem; }
|
||||
.page-subtitle { color: var(--text-muted); font-weight: 500; font-size: 1rem; margin-left: 0.75rem; }
|
||||
</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">📋 Lista de Pedimentos</h4>
|
||||
<div>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/crear" class="btn btn-success btn-animated me-2">
|
||||
<i class="fas fa-plus"></i> Nuevo Pedimento
|
||||
<div class="main-content">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">Lista de Pedimentos <span id="headerPedimentoActual" class="page-subtitle"></span></h1>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/crear" class="btn-modern success">
|
||||
<i class="fas fa-plus"></i>
|
||||
Nuevo Pedimento
|
||||
</a>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos" class="btn btn-secondary btn-animated">
|
||||
<i class="fas fa-arrow-left"></i> Regresar
|
||||
<button type="button" class="btn-modern" style="background: var(--info);" onclick="abrirModalImportar()">
|
||||
<i class="fas fa-upload"></i>
|
||||
Importar Archivos
|
||||
</button>
|
||||
<button type="button" id="btnImportarWinsaai" class="btn-modern secondary" onclick="importarDesdeWinsaai()" title="Requiere configuración en Automatizaciones (WINSAAI)">
|
||||
<i class="fas fa-cloud-download-alt"></i>
|
||||
Importar desde WINSAAI
|
||||
</button>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos" class="btn-modern secondary">
|
||||
<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="tablaPedimentos" class="display nowrap" style="width:100%">
|
||||
<!-- Data Table -->
|
||||
<div class="data-card fade-in">
|
||||
<div class="table-container">
|
||||
<table id="tablaPedimentos" class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
@@ -97,16 +333,152 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<!-- Modal para Importar Archivos -->
|
||||
<div class="modal fade" id="modalImportarPedimentos" tabindex="-1" aria-labelledby="modalImportarLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content" style="border-radius: 12px; border: none;">
|
||||
<div class="modal-header" style="background: linear-gradient(135deg, var(--info) 0%, #0e7490 100%); color: white; border-radius: 12px 12px 0 0;">
|
||||
<h5 class="modal-title" id="modalImportarLabel">
|
||||
<i class="fas fa-upload me-2"></i>
|
||||
Importar Pedimentos desde Archivos
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4">
|
||||
<div class="alert alert-info d-flex align-items-start" style="border: none; border-radius: 8px; background: rgba(8, 145, 178, 0.1); border-left: 4px solid var(--info);">
|
||||
<i class="fas fa-info-circle me-2 mt-1" style="color: var(--info);"></i>
|
||||
<div>
|
||||
<strong>Formato del archivo:</strong>
|
||||
<p class="mb-1">El sistema reconoce archivos con los siguientes códigos:</p>
|
||||
<ul class="mb-2 small">
|
||||
<li><strong>501:</strong> Datos del pedimento (número, RFC, fechas)</li>
|
||||
<li><strong>505:</strong> Información de facturas</li>
|
||||
<li><strong>551:</strong> Partidas de mercancías</li>
|
||||
</ul>
|
||||
<p class="mb-0 small text-muted">
|
||||
<i class="fas fa-calendar-day me-1"></i>
|
||||
<strong>Archivos julianos:</strong> Se aceptan extensiones de día del año (.001 a .366)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="formImportarPedimentos" enctype="multipart/form-data">
|
||||
<div class="mb-3">
|
||||
<label for="archivoImportar" class="form-label fw-semibold">
|
||||
<i class="fas fa-file-text me-1"></i>
|
||||
Seleccionar archivos
|
||||
</label>
|
||||
<input type="file" class="form-control" id="archivoImportar" name="archivos[]" multiple required style="border-radius: 8px; border: 1px solid var(--border-color);">
|
||||
<div class="form-text">Formatos soportados: .txt, .dat, archivos julianos (.001-.366). Puedes seleccionar varios archivos.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="validarDuplicados" name="validar_duplicados" checked>
|
||||
<label class="form-check-label fw-medium" for="validarDuplicados">
|
||||
Validar pedimentos duplicados
|
||||
</label>
|
||||
<div class="form-text">Evita importar pedimentos que ya existen en el sistema</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="previewContainer" style="display: none;" class="mb-3">
|
||||
<h6 class="fw-semibold mb-2">
|
||||
<i class="fas fa-eye me-1"></i>
|
||||
Vista previa del archivo
|
||||
</h6>
|
||||
<div id="previewContent" class="p-3" style="background: #f8fafc; border-radius: 8px; border: 1px solid var(--border-color); max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 0.85rem;"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer" style="border-top: 1px solid var(--border-color); border-radius: 0 0 12px 12px;">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 8px;">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="btnProcesarArchivo" style="border-radius: 8px; background: var(--info); border-color: var(--info);" disabled>
|
||||
<i class="fas fa-cogs me-1"></i>
|
||||
Procesar Archivos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drawer lateral de detalle -->
|
||||
<div id="drawerDetalle" class="drawer" aria-hidden="true">
|
||||
<div class="drawer-overlay" onclick="cerrarDetalle()"></div>
|
||||
<div class="drawer-panel">
|
||||
<div class="drawer-header">
|
||||
<div>
|
||||
<div class="drawer-title">Pedimento <span id="drawerNumero"></span></div>
|
||||
<div class="drawer-subtitle" id="drawerSubtitulo"></div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="cerrarDetalle()" aria-label="Cerrar">×</button>
|
||||
</div>
|
||||
<div class="drawer-body p-3 overflow-auto">
|
||||
<ul class="nav nav-tabs" id="detalleTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="tab-facturas" data-bs-toggle="tab" data-bs-target="#pane-facturas" type="button" role="tab">Facturas</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="tab-partidas" data-bs-toggle="tab" data-bs-target="#pane-partidas" type="button" role="tab">Partidas</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-3">
|
||||
<div class="tab-pane fade show active" id="pane-facturas" role="tabpanel">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Número</th>
|
||||
<th>Fecha</th>
|
||||
<th>Proveedor</th>
|
||||
<th>Moneda</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyFacturas"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="pane-partidas" role="tabpanel">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Fracción</th>
|
||||
<th>Descripción</th>
|
||||
<th>Cantidad</th>
|
||||
<th>UM</th>
|
||||
<th>Valor Aduana</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyPartidas"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<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.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Inicializar DataTable
|
||||
// Base URL del proyecto (igual que en index)
|
||||
const BASE_URL = '<?php echo "http" . (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] === "on" ? "s" : "") . "://" . $_SERVER["HTTP_HOST"] . "/IMPORTADORES"; ?>';
|
||||
|
||||
let hasWinsaaiConfig = false;
|
||||
|
||||
$(document).ready(function() {
|
||||
// Initialize DataTable with professional styling
|
||||
$('#tablaPedimentos').DataTable({
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
@@ -127,9 +499,9 @@
|
||||
"name": "Status",
|
||||
"render": function(data, type, row) {
|
||||
if (data === 'Activo') {
|
||||
return '<span class="badge bg-success">Activo</span>';
|
||||
return '<span class="badge-modern badge-success"><i class="fas fa-check-circle"></i>Activo</span>';
|
||||
} else {
|
||||
return '<span class="badge bg-secondary">Inactivo</span>';
|
||||
return '<span class="badge-modern badge-secondary"><i class="fas fa-pause-circle"></i>Inactivo</span>';
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -140,12 +512,20 @@
|
||||
"render": function(data, type, row) {
|
||||
const id = row[0];
|
||||
return `
|
||||
<a href="/IMPORTADORES/catalogo_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>
|
||||
<div class="d-flex justify-content-center gap-1">
|
||||
<button type="button" class="btn-action view" onclick="abrirDetalle(${id})" title="Ver detalle">
|
||||
<i class="fas fa-list"></i>
|
||||
<span>Detalle</span>
|
||||
</button>
|
||||
<a href="/IMPORTADORES/catalogo_pedimentos/editar?id=${id}" class="btn-action edit" title="Editar pedimento">
|
||||
<i class="fas fa-edit"></i>
|
||||
<span>Editar</span>
|
||||
</a>
|
||||
<button type="button" class="btn-action delete" onclick="confirmarEliminar(${id})" title="Eliminar pedimento">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
<span>Eliminar</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -156,8 +536,23 @@
|
||||
"responsive": true,
|
||||
"order": [[4, "desc"]],
|
||||
"pageLength": 25,
|
||||
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]]
|
||||
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
|
||||
"dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
|
||||
"<'row'<'col-sm-12'tr>>" +
|
||||
"<'row'<'col-sm-5'i><'col-sm-7'p>>"
|
||||
});
|
||||
|
||||
// Add fade-in animation
|
||||
setTimeout(() => {
|
||||
document.querySelector('.fade-in').style.opacity = '1';
|
||||
document.querySelector('.fade-in').style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
|
||||
// Configurar modal importar
|
||||
configurarModalImportacion();
|
||||
|
||||
// Cargar estado de configuración WINSAAI
|
||||
cargarConfigWinsaai();
|
||||
});
|
||||
|
||||
function confirmarEliminar(id) {
|
||||
@@ -168,7 +563,11 @@
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Sí, eliminar',
|
||||
cancelButtonText: 'Cancelar',
|
||||
confirmButtonColor: '#d33'
|
||||
confirmButtonColor: '#dc2626',
|
||||
cancelButtonColor: '#64748b',
|
||||
customClass: {
|
||||
popup: 'rounded-3'
|
||||
}
|
||||
}).then(result => {
|
||||
if (result.isConfirmed) {
|
||||
window.location = `/IMPORTADORES/catalogo_pedimentos/eliminar?id=${id}`;
|
||||
@@ -176,18 +575,378 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Mostrar alertas de éxito/error
|
||||
// Success/Error alerts
|
||||
<?php if (isset($_GET['created'])): ?>
|
||||
Swal.fire({ icon: 'success', title: 'Pedimento creado', text: 'El pedimento se creó correctamente.', confirmButtonColor: '#198754' });
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Pedimento creado',
|
||||
text: 'El pedimento se creó correctamente.',
|
||||
confirmButtonColor: '#059669',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($_GET['updated'])): ?>
|
||||
Swal.fire({ icon: 'success', title: 'Pedimento actualizado', text: 'Los datos fueron modificados correctamente.', confirmButtonColor: '#198754' });
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Pedimento actualizado',
|
||||
text: 'Los datos fueron modificados correctamente.',
|
||||
confirmButtonColor: '#059669',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($_GET['deleted'])): ?>
|
||||
Swal.fire({ icon: 'success', title: 'Pedimento eliminado', text: 'El pedimento fue eliminado correctamente.', confirmButtonColor: '#198754' });
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Pedimento eliminado',
|
||||
text: 'El pedimento fue eliminado correctamente.',
|
||||
confirmButtonColor: '#059669',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
<?php endif; ?>
|
||||
|
||||
// --- Importación de pedimentos (múltiples) ---
|
||||
async function cargarConfigWinsaai() {
|
||||
try {
|
||||
const resp = await fetch(`${BASE_URL}/winsaai/get_config`);
|
||||
const data = await resp.json();
|
||||
hasWinsaaiConfig = !!(data && data.success && data.data);
|
||||
} catch (e) {
|
||||
hasWinsaaiConfig = false;
|
||||
}
|
||||
// Ajustar estilo/tooltip del botón según estado
|
||||
const btn = document.getElementById('btnImportarWinsaai');
|
||||
if (!btn) return;
|
||||
if (hasWinsaaiConfig) {
|
||||
btn.classList.remove('secondary');
|
||||
btn.style.background = 'var(--success)';
|
||||
btn.title = 'Configuración detectada: listo para importar (próximamente)';
|
||||
} else {
|
||||
btn.classList.add('secondary');
|
||||
btn.style.background = 'var(--secondary)';
|
||||
btn.title = 'Requiere configurar WINSAAI en Automatizaciones';
|
||||
}
|
||||
}
|
||||
|
||||
function importarDesdeWinsaai() {
|
||||
if (!hasWinsaaiConfig) {
|
||||
Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Configura WINSAAI primero',
|
||||
text: 'Para importar desde WINSAAI necesitas configurar la conexión en la sección Automatizaciones.',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ir a Automatizaciones',
|
||||
cancelButtonText: 'Cancelar',
|
||||
confirmButtonColor: '#2563eb',
|
||||
cancelButtonColor: '#64748b',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
}).then(r => {
|
||||
if (r.isConfirmed) {
|
||||
window.location.href = `${BASE_URL}/automatizaciones`;
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Placeholder: funcionalidad próxima
|
||||
Swal.fire({
|
||||
icon: 'info',
|
||||
title: 'Próximamente',
|
||||
text: 'La importación directa desde WINSAAI estará disponible pronto.',
|
||||
confirmButtonColor: '#2563eb',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
}
|
||||
|
||||
function abrirModalImportar() {
|
||||
const modal = new bootstrap.Modal(document.getElementById('modalImportarPedimentos'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
function configurarModalImportacion() {
|
||||
const archivoInput = document.getElementById('archivoImportar');
|
||||
const previewContainer = document.getElementById('previewContainer');
|
||||
const previewContent = document.getElementById('previewContent');
|
||||
const btnProcesar = document.getElementById('btnProcesarArchivo');
|
||||
|
||||
if (!archivoInput) return;
|
||||
|
||||
archivoInput.addEventListener('change', function(e) {
|
||||
const archivos = Array.from(e.target.files || []);
|
||||
if (archivos.length > 0) {
|
||||
const extensionesValidas = ['txt', 'dat'];
|
||||
for (const file of archivos) {
|
||||
const nombreArchivo = file.name.toLowerCase();
|
||||
const extension = nombreArchivo.split('.').pop();
|
||||
const esJuliana = /^\d{3}$/.test(extension);
|
||||
if (!extensionesValidas.includes(extension) && !esJuliana) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Archivo no válido',
|
||||
text: `"${file.name}" no es válido. Usa .txt, .dat o extensión juliana (.001-.366)`,
|
||||
confirmButtonColor: '#dc2626',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
archivoInput.value = '';
|
||||
previewContainer.style.display = 'none';
|
||||
btnProcesar.disabled = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const contenido = e.target.result;
|
||||
mostrarVistaPrevia(contenido, archivos.length);
|
||||
btnProcesar.disabled = false;
|
||||
};
|
||||
reader.readAsText(archivos[0]);
|
||||
} else {
|
||||
previewContainer.style.display = 'none';
|
||||
btnProcesar.disabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
btnProcesar.addEventListener('click', function() {
|
||||
procesarArchivoImportacion();
|
||||
});
|
||||
}
|
||||
|
||||
function mostrarVistaPrevia(contenido, totalArchivos = 1) {
|
||||
const previewContainer = document.getElementById('previewContainer');
|
||||
const previewContent = document.getElementById('previewContent');
|
||||
const lineas = contenido.split('\n').slice(0, 10);
|
||||
|
||||
const preview = lineas.map(linea => {
|
||||
let clase = '';
|
||||
if (linea.startsWith('501')) clase = 'style="color: #059669; font-weight: bold;"';
|
||||
else if (linea.startsWith('505')) clase = 'style="color: #d97706; font-weight: bold;"';
|
||||
else if (linea.startsWith('551')) clase = 'style="color: #2563eb; font-weight: bold;"';
|
||||
return `<div ${clase}>${linea}</div>`;
|
||||
}).join('');
|
||||
|
||||
let extra = '';
|
||||
if (contenido.split('\n').length > 10) {
|
||||
extra += '<div style="color: #6b7280; font-style: italic;">... y más líneas</div>';
|
||||
}
|
||||
if (totalArchivos > 1) {
|
||||
const restantes = totalArchivos - 1;
|
||||
extra += `<div class="mt-2" style="color: #374151; font-weight: 600;">+ ${restantes} archivo${restantes === 1 ? '' : 's'} más seleccionado${restantes === 1 ? '' : 's'}</div>`;
|
||||
}
|
||||
previewContent.innerHTML = preview + extra;
|
||||
previewContainer.style.display = 'block';
|
||||
}
|
||||
|
||||
function procesarArchivoImportacion() {
|
||||
const formData = new FormData(document.getElementById('formImportarPedimentos'));
|
||||
|
||||
const btnProcesar = document.getElementById('btnProcesarArchivo');
|
||||
const textoOriginal = btnProcesar.innerHTML;
|
||||
btnProcesar.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Procesando...';
|
||||
btnProcesar.disabled = true;
|
||||
|
||||
const url = `${BASE_URL}/public/importar_pedimentos.php`;
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(async response => {
|
||||
let data;
|
||||
try { data = await response.json(); } catch (_) { data = null; }
|
||||
if (!response.ok) {
|
||||
const msg = (data && data.message) ? data.message : `HTTP ${response.status}`;
|
||||
throw new Error(msg);
|
||||
}
|
||||
return data;
|
||||
})
|
||||
.then(data => {
|
||||
btnProcesar.innerHTML = textoOriginal;
|
||||
btnProcesar.disabled = false;
|
||||
|
||||
if (data.success) {
|
||||
const estadisticas = data.estadisticas || {};
|
||||
let mensaje = `Se procesaron ${estadisticas.pedimentos_procesados || 0} pedimentos exitosamente.\n\n`;
|
||||
mensaje += `• Pedimentos: ${estadisticas.pedimentos_procesados || 0}\n`;
|
||||
mensaje += `• Facturas: ${estadisticas.facturas_procesadas || 0}\n`;
|
||||
mensaje += `• Partidas: ${estadisticas.partidas_procesadas || 0}\n`;
|
||||
if ((estadisticas.duplicados || 0) > 0) mensaje += `• Duplicados omitidos: ${estadisticas.duplicados}\n`;
|
||||
if ((estadisticas.errores || 0) > 0) mensaje += `• Errores: ${estadisticas.errores}`;
|
||||
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Importación Completada',
|
||||
text: mensaje,
|
||||
confirmButtonColor: '#059669',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('modalImportarPedimentos'));
|
||||
modal.hide();
|
||||
document.getElementById('formImportarPedimentos').reset();
|
||||
document.getElementById('previewContainer').style.display = 'none';
|
||||
|
||||
// Recargar la tabla para ver nuevos pedimentos
|
||||
$('#tablaPedimentos').DataTable().ajax.reload(null, false);
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error en la Importación',
|
||||
text: data.message || 'Ocurrió un error al procesar los archivos',
|
||||
confirmButtonColor: '#dc2626',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
btnProcesar.innerHTML = textoOriginal;
|
||||
btnProcesar.disabled = false;
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error de Conexión',
|
||||
text: error.message || 'No se pudo conectar con el servidor.',
|
||||
confirmButtonColor: '#dc2626',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- Drawer de detalle de pedimento ---
|
||||
async function abrirDetalle(id) {
|
||||
const drawer = document.getElementById('drawerDetalle');
|
||||
const numeroEl = document.getElementById('drawerNumero');
|
||||
const subEl = document.getElementById('drawerSubtitulo');
|
||||
const tbodyF = document.getElementById('tbodyFacturas');
|
||||
const tbodyP = document.getElementById('tbodyPartidas');
|
||||
const headerPed = document.getElementById('headerPedimentoActual');
|
||||
if (!drawer) return;
|
||||
|
||||
// Limpia contenidos previos
|
||||
numeroEl.textContent = '';
|
||||
subEl.textContent = '';
|
||||
tbodyF.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Cargando facturas...</td></tr>';
|
||||
tbodyP.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Cargando partidas...</td></tr>';
|
||||
|
||||
// Abre el drawer inmediatamente para mejor UX
|
||||
drawer.classList.add('open');
|
||||
drawer.setAttribute('aria-hidden', 'false');
|
||||
|
||||
try {
|
||||
// Encabezado del pedimento
|
||||
const rPed = await fetch(`${BASE_URL}/catalogo_pedimentos/ajax_pedimento?id=${encodeURIComponent(id)}`);
|
||||
const dPed = await rPed.json();
|
||||
if (!dPed || !dPed.success || !dPed.data) throw new Error(dPed.message || 'No se encontró el pedimento');
|
||||
const ped = dPed.data;
|
||||
const numeroPed = ped.numero_pedimento || ped.numero || ped.id || id;
|
||||
numeroEl.textContent = numeroPed;
|
||||
const nombre = ped.nombre_importador || ped.importador || '';
|
||||
const rfc = ped.rfc_importador || ped.rfc || '';
|
||||
const fecha = (ped.fecha_creacion || ped.fecha || '').toString().substring(0, 10);
|
||||
subEl.textContent = `${nombre}${nombre && rfc ? ' • ' : ''}${rfc}${(nombre||rfc) && fecha ? ' • ' : ''}${fecha}`;
|
||||
|
||||
if (headerPed) {
|
||||
headerPed.textContent = `• Pedimento ${numeroPed}`;
|
||||
}
|
||||
|
||||
// Carga datos de detalle
|
||||
await Promise.all([
|
||||
cargarFacturas(id),
|
||||
cargarPartidas(id)
|
||||
]);
|
||||
} catch (err) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'No se pudo cargar el detalle',
|
||||
text: err.message || 'Error desconocido',
|
||||
confirmButtonColor: '#dc2626',
|
||||
customClass: { popup: 'rounded-3' }
|
||||
});
|
||||
cerrarDetalle();
|
||||
}
|
||||
}
|
||||
|
||||
function cerrarDetalle() {
|
||||
const drawer = document.getElementById('drawerDetalle');
|
||||
const headerPed = document.getElementById('headerPedimentoActual');
|
||||
if (!drawer) return;
|
||||
drawer.classList.remove('open');
|
||||
drawer.setAttribute('aria-hidden', 'true');
|
||||
if (headerPed) headerPed.textContent = '';
|
||||
}
|
||||
|
||||
async function cargarFacturas(pedimentoId) {
|
||||
const tbody = document.getElementById('tbodyFacturas');
|
||||
try {
|
||||
const r = await fetch(`${BASE_URL}/catalogo_pedimentos/ajax_facturas?pedimento_id=${encodeURIComponent(pedimentoId)}`);
|
||||
const d = await r.json();
|
||||
if (!d || !d.success) throw new Error(d.message || 'Error al cargar facturas');
|
||||
const arr = Array.isArray(d.data) ? d.data : [];
|
||||
if (arr.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Sin facturas</td></tr>';
|
||||
return;
|
||||
}
|
||||
const rows = arr.map((f, idx) => {
|
||||
const numero = f.numero_factura || f.factura || f.numero || '';
|
||||
const fecha = (f.fecha || f.fecha_factura || '').toString().substring(0,10);
|
||||
const proveedor = f.proveedor || f.nombre_proveedor || f.vendedor || '';
|
||||
const moneda = f.moneda || '';
|
||||
const totalRaw = f.total ?? f.importe_total ?? f.subtotal ?? f.valor_factura;
|
||||
const total = (typeof totalRaw === 'number') ? totalRaw.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) : (totalRaw || '');
|
||||
return `<tr>
|
||||
<td>${idx+1}</td>
|
||||
<td>${numero || '-'}</td>
|
||||
<td>${fecha || '-'}</td>
|
||||
<td>${proveedor || '-'}</td>
|
||||
<td>${moneda || '-'}</td>
|
||||
<td class="text-end">${total || '-'}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
tbody.innerHTML = rows;
|
||||
} catch (e) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="text-center text-danger">Error cargando facturas</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
async function cargarPartidas(pedimentoId) {
|
||||
const tbody = document.getElementById('tbodyPartidas');
|
||||
try {
|
||||
const r = await fetch(`${BASE_URL}/catalogo_pedimentos/ajax_partidas?pedimento_id=${encodeURIComponent(pedimentoId)}`);
|
||||
const d = await r.json();
|
||||
if (!d || !d.success) throw new Error(d.message || 'Error al cargar partidas');
|
||||
const arr = Array.isArray(d.data) ? d.data : [];
|
||||
if (arr.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Sin partidas</td></tr>';
|
||||
return;
|
||||
}
|
||||
const rows = arr.map((p, idx) => {
|
||||
const fraccion = p.fraccion || p.fraccion_arancelaria || '';
|
||||
const descripcion = p.descripcion || p.descripcion_mercancia || '';
|
||||
const cantidad = p.cantidad ?? '';
|
||||
const um = p.um || p.unidad || '';
|
||||
const valorRaw = p.valor_aduana ?? p.valor_comercial ?? p.valor ?? '';
|
||||
const valor = (typeof valorRaw === 'number') ? valorRaw.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) : (valorRaw || '');
|
||||
return `<tr>
|
||||
<td>${idx+1}</td>
|
||||
<td>${fraccion || '-'}</td>
|
||||
<td>${descripcion || '-'}</td>
|
||||
<td class="text-end">${cantidad || '-'}</td>
|
||||
<td>${um || '-'}</td>
|
||||
<td class="text-end">${valor || '-'}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
tbody.innerHTML = rows;
|
||||
} catch (e) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="text-center text-danger">Error cargando partidas</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
// Cerrar con Escape
|
||||
document.addEventListener('keyup', (ev) => {
|
||||
if (ev.key === 'Escape') {
|
||||
cerrarDetalle();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user