290 lines
13 KiB
PHP
290 lines
13 KiB
PHP
<?php include __DIR__ . '/../partials/sidebar_agencia.php'; ?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Dashboard | Agencia Aduanal</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<!-- Animate.css para animaciones adicionales -->
|
|
<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: normal; 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; }
|
|
.btn-indigo { background-color: #6610f2; color: white; }
|
|
.btn-indigo:hover { background-color: #520dc2; color: white; }
|
|
.text-indigo { color: #520dc2; }
|
|
.btn-orange { background-color: orangeRed; color: white; }
|
|
.btn-orange:hover { background-color: #ff3600; color: white; }
|
|
.text-orange { color: orangeRed; }
|
|
.btn-teal { background-color: #4dd4ac ; color: white; }
|
|
.btn-teal:hover { background-color: #20c997; color: black; }
|
|
.text-teal { color: #4dd4ac; }
|
|
.btn-lime { background-color: #84cc16; color: white; }
|
|
.text-lime { color: #84cc16; }
|
|
.btn-lime:hover { background-color: #65a30d; color: black; }
|
|
.btn-cyan { background-color: #06b6d4; color: white; }
|
|
.text-cyan { color: #06b6d4; }
|
|
.btn-cyan:hover { background-color: #0891b2; color: white; }
|
|
.btn-violet { background-color: #8b5cf6; color: white; }
|
|
.text-violet { color: #8b5cf6; }
|
|
.btn-violet:hover { background-color: #7c3aed; color: white; }
|
|
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
|
|
@media (min-width: 768px) { .content { margin-left: 250px; /* Ancho del sidebar */ } }
|
|
/* En móviles, sin margen lateral */
|
|
@media (max-width: 767.98px) {
|
|
.content { margin-left: 0; }
|
|
.sidebar .nav-link { font-weight: normal; color: #343a40; background-color: transparent; }
|
|
.sidebar .nav-link:hover,
|
|
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
|
|
}
|
|
.card { border-radius: 12px; }
|
|
/* Animaciones personalizadas */
|
|
.card-hover { transition: all 0.3s ease; }
|
|
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
|
|
.btn-pulse { animation: pulse 2s infinite; }
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
.fade-in-up { animation: fadeInUp 0.6s ease-out; }
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.loading-spinner { display: none; }
|
|
.btn-loading .loading-spinner { display: inline-block; }
|
|
.btn-loading .btn-text { display: none; }
|
|
/* Animación para alertas */
|
|
.alert-animated { animation: slideInDown 0.5s ease-out; }
|
|
@keyframes slideInDown {
|
|
from { transform: translateY(-100%); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
/* Efecto de parpadeo para elementos obligatorios */
|
|
.border-warning-animated { animation: borderGlow 2s ease-in-out infinite alternate; }
|
|
@keyframes borderGlow {
|
|
from { border-color: #ffc107; box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); }
|
|
to { border-color: #ffcd39; box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 📄 CONTENIDO -->
|
|
<div class="content">
|
|
<h4 class="mb-4">📦 Panel de Agencia Aduanal</h4>
|
|
|
|
<!-- <?php // if ($catalogosData['catalogos_activos']): ?> -->
|
|
<div class="row g-4">
|
|
<!-- <?php
|
|
// $delay = 0;
|
|
// foreach ($catalogosData['catalogos'] as $catalogo):
|
|
// $delay += 0.1; // Incrementar el retraso para cada catálogo
|
|
?> -->
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm p-3">
|
|
<h5 class="text-teal">Solicitudes de vinculación</h5>
|
|
<p>Aprueba las solicitudes de vinculación de los importadores.</p>
|
|
<a href="/IMPORTADORES/vinculaciones/solicitudesVinculacion"
|
|
class="btn btn-teal btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/solicitudesVinculacion' ? 'active' : '' ?>">
|
|
Ver solicitudes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm p-3">
|
|
<h5 class="text-lime">Usuarios vinculados</h5>
|
|
<p>Consulta los que ya fueron autorizados.</p>
|
|
<a href="/IMPORTADORES/vinculaciones/vinculacionesAgencia"
|
|
class="btn btn-lime btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/vinculaciones/vinculacionesAgencia' ? 'active' : '' ?>">
|
|
Ver usuarios
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm p-3">
|
|
<h5 class="text-success">Alta de agentes</h5>
|
|
<p>Da de alta a tus agentes aduanales.</p>
|
|
<a href="/IMPORTADORES/agencias/alta"
|
|
class="btn btn-success btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agencias/alta' ? 'active' : '' ?>">
|
|
Nuevo agente
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm p-3">
|
|
<h5 class="text-info">Patentes</h5>
|
|
<p>Gestiona las patentes de la agencia.</p>
|
|
<a href="/IMPORTADORES/patente/dashboard"
|
|
class="btn btn-info btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/patente/dashboard' ? 'active' : '' ?>">
|
|
Ver agentes
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm p-3">
|
|
<h5 class="text-cyan">Locaciones</h5>
|
|
<p>Gestiona la locaciones validas para nuevos registros.</p>
|
|
<a href="/IMPORTADORES/locaciones/lista"
|
|
class="btn btn-cyan btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/locaciones/lista' ? 'active' : '' ?>">
|
|
Gestionar locaciones
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm p-3">
|
|
<h5 class="text-warning">Configuración</h5>
|
|
<p>Administra tus datos y preferencias.</p>
|
|
<a href="/IMPORTADORES/configuracion"
|
|
class="btn btn-warning btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/agencias/configuracion' ? 'active' : '' ?>">
|
|
Configurar
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm p-3">
|
|
<h5 class="text-danger">Cerrar sesión</h5>
|
|
<p>Salir del sistema de forma segura.</p>
|
|
<a href="/IMPORTADORES/sistemas/logout" class="btn btn-danger btn-sm mt-2">Logout</a>
|
|
</div>
|
|
</div>
|
|
<!-- <?php // endforeach; ?> -->
|
|
</div>
|
|
|
|
<!-- <?php // if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="alert alert-info alert-animated">
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
<i class="fas fa-lightbulb fa-2x text-info animate__animated animate__pulse animate__infinite"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="alert-heading">💡 Consejo</h6>
|
|
<p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
|
|
<button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
|
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
|
<span class="btn-text">Configurar Catálogos</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php // endif; ?>
|
|
|
|
<?php // else: ?>
|
|
<! -- Si los catálogos están completamente desactivados -- >
|
|
<div class="row g-4">
|
|
<div class="col-12">
|
|
<div class="alert alert-warning alert-animated">
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
<i class="fas fa-lock fa-2x text-warning animate__animated animate__swing animate__infinite"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h5 class="alert-heading">🔒 Catálogos Desactivados</h5>
|
|
<p class="mb-3">Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
|
|
<button class="btn btn-primary btn-sm btn-pulse" onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
|
|
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
|
<span class="btn-text">Activar Catálogos</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<! -- Mostrar solo catálogos obligatorios -- >
|
|
<?php /*
|
|
$delay = 0;
|
|
foreach ($catalogosData['catalogos'] as $catalogo):
|
|
$delay += 0.1;
|
|
?>
|
|
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
|
|
<div class="card shadow-sm p-3 card-hover border-warning border-warning-animated h-100">
|
|
<h5 class="text-<?= $catalogo['color'] ?> mb-3">
|
|
<i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i>
|
|
<?= $catalogo['nombre'] ?>
|
|
</h5>
|
|
<p class="text-muted small flex-grow-1"><?= $catalogo['descripcion'] ?></p>
|
|
<div class="mt-auto">
|
|
<button
|
|
class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 w-100 btn-animated <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>"
|
|
onclick="navigateWithAnimation(this, '<?= $catalogo['ruta'] ?>')"
|
|
data-url="<?= $catalogo['ruta'] ?>">
|
|
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
|
<span class="btn-text"><?= $catalogo['accion'] ?></span>
|
|
</button>
|
|
</div>
|
|
<small class="text-warning mt-2 d-flex align-items-center">
|
|
<i class="fas fa-lock me-1 animate__animated animate__pulse animate__infinite"></i>
|
|
Función básica
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; */ ?>
|
|
</div>
|
|
<?php // endif; ?> -->
|
|
</div>
|
|
|
|
<script>
|
|
// Función para navegación con animación
|
|
function navigateWithAnimation(button, url) {
|
|
// Añadir estado de carga
|
|
button.classList.add('btn-loading');
|
|
button.disabled = true;
|
|
|
|
// Simular carga y navegar
|
|
setTimeout(function() {
|
|
window.location.href = url;
|
|
}, 1000);
|
|
}
|
|
|
|
// Animación de entrada escalonada para las tarjetas
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const cards = document.querySelectorAll('.card-hover');
|
|
|
|
// Efecto de revelado progresivo
|
|
cards.forEach((card, index) => {
|
|
card.style.animationDelay = (index * 0.1) + 's';
|
|
});
|
|
});
|
|
|
|
// Efecto de hover mejorado
|
|
document.querySelectorAll('.card-hover').forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-5px) scale(1.02)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
});
|
|
|
|
// Animación para alertas que se pueden cerrar
|
|
document.querySelectorAll('.alert').forEach(alert => {
|
|
alert.addEventListener('closed.bs.alert', function() {
|
|
this.style.animation = 'slideOutUp 0.5s ease-in';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|