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

Sidebars - animaciones

Browse Source
This commit is contained in:
Alexeer
2025-07-18 12:21:26 -06:00
parent 1900091b99
commit 37dcfffd7b
69 changed files with 1282 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
views/agencias/alta_agentes.php
View File

@@ -162,7 +162,7 @@
<div class="content px-4">
<h3 class="mb-4 animate__animated animate__fadeInDown title_glow">👨‍✈️ Administración de Agentes</h3>
<!-- FORMULARIO -->
<div class="card p-4 mb-4 shadow-sm bg-white card-hover position-relative h-auto">
<div class="card p-4 mb-4 shadow-sm bg-white card-hover position-relative h-auto fade-in-up">
<form action="/IMPORTADORES/agencias/guardarAgente" method="POST" id="formAltaAgentes">
<h5 class="mb-3">➕ Nuevo Agente</h5>
<div class="row g-3">
@@ -200,8 +200,8 @@
</form>
</div>
<h4 class="mb-4">✅ Agentes Activos</h4>
<div class="card p-3 shadow-sm">
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">✅ Agentes Activos</h4>
<div class="card p-3 shadow-sm fade-in-up">
<div class="table-responsive">
<table class="table table-striped table-hover align-middle" id="tabla-agentes-activos">
<thead class="table-dark">
@@ -227,7 +227,7 @@
<td>
<?php if (in_array($a['tipo_usuario_sistema'], ['agente_aduanal'])): ?>
<a href="/IMPORTADORES/vinculaciones/desvincularAgencia?id=<?= $a['id_relacion'] ?>&tipo=<?= $a['tipo_vinculacion'] ?>"
class="btn btn-sm btn-danger"
class="btn btn-sm btn-danger mt-auto w-auto btn-animated"
onclick="return confirm('¿Está seguro de que desea desvincular este usuario?')">
Desvincular
</a>

187
views/agencias/dashboard_agencias.php
View File

@@ -38,6 +38,9 @@
.btn-violet { background-color: #8b5cf6; color: white; }
.text-violet { color: #8b5cf6; }
.btn-violet:hover { background-color: #7c3aed; color: white; }
.btn-lila { background-color: #c4b5fd; /* violeta claro */ color: white; border: none; }
.btn-lila:hover { background-color: #a78bfa; /* tono ligeramente más fuerte */ color: white; }
.text-lila { color: #c4b5fd; }
/* 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 */
@@ -49,22 +52,39 @@
}
.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; }
.card-hover { transition: all 0.3s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-8px) saqcle(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
.btn-pulse { animation: pulse 2s infinite; }
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.fade-in-up { animation: fadeInUp 0.6s ease-out; }
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.loading-spinner { display: none; }
/* Botón con efecto de loading */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-left: -10px;
margin-top: -10px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite; }
.btn-loading .loading-spinner { display: inline-block; }
.btn-loading .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 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%; }
/* Animación para alertas */
.alert-animated { animation: slideInDown 0.5s ease-out; }
@keyframes slideInDown {
@@ -76,7 +96,7 @@
@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>
@@ -87,82 +107,127 @@
<!-- <?php // if ($catalogosData['catalogos_activos']): ?> -->
<div class="row g-4">
<!-- <?php
// $delay = 0;
<?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>
$delay += 0.1; // Incrementar el retraso para cada catálogo
?>
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-teal mb-3">Solicitudes de vinculación</h5>
<p class="text-muted small flex-grow-1 mb-4">Aprueba las solicitudes de vinculación de los importadores.</p>
<div class="mt-auto">
<button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/vinculaciones/solicitudesVinculacion')"
data-url="/IMPORTADORES/vinculaciones/solicitudesVinculacion">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Ver solicitudes</span>
</button>
</div>
</div>
</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 class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-lime mb-3">Usuarios vinculados</h5>
<p class="text-muted small flex-grow-1 mb-4">Consulta los que ya fueron autorizados.</p>
<div class="mt-auto">
<button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/vinculaciones/vinculacionesAgencia')"
data-url="/IMPORTADORES/vinculaciones/vinculacionesAgencia">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Ver usuarios</span>
</button>
</div>
</div>
</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 class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-success mb-3">Patentes</h5>
<p class="text-muted small flex-grow-1 mb-4">Gestiona las patentes de la agencia.</p>
<div class="mt-auto">
<button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/patente/dashboard')"
data-url="/IMPORTADORES/patente/dashboard">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Ver agentes</span>
</button>
</div>
</div>
</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 class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-info mb-3">Locaciones</h5>
<p class="text-muted small flex-grow-1 mb-4">Gestiona la locaciones validas para nuevos registros.</p>
<div class="mt-auto">
<button class="btn btn-info btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/locaciones/lista')"
data-url="/IMPORTADORES/locaciones/lista">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Gestionar locaciones</span>
</button>
</div>
</div>
</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 class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-cyan mb-3">Alta de agentes</h5>
<p class="text-muted small flex-grow-1 mb-4">Da de alta a tus agentes aduanales.</p>
<div class="mt-auto">
<button class="btn btn-cyan btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/agencias/alta')"
data-url="/IMPORTADORES/agencias/alta">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Nuevo agente</span>
</button>
</div>
</div>
</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 class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-warning mb-3">Configuración</h5>
<p class="text-muted small flex-grow-1 mb-4">Administra los datos de tu empresa y preferencias.</p>
<div class="mt-auto">
<button class="btn btn-warning btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/configuracion')"
data-url="/IMPORTADORES/configuracion">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Ir a configuración</span>
</button>
</div>
</div>
</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 class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: <?= $delay ?>s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-danger mb-3">Cerrar sesión</h5>
<p class="text-muted small flex-grow-1 mb-4">Salir del sistema de forma segura.</p>
<div class="mt-auto">
<button class="btn btn-danger btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/sistemas/logout')"
data-url="/IMPORTADORES/sistemas/logout">
<span class="loading-spinner spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="btn-text">Cerrar sesión</span>
</button>
</div>
</div>
</div>
</div>
<!-- <?php // endforeach; ?> -->