From 1db05fc7aaf6ac8df8bdee265b63bab1903c53c4 Mon Sep 17 00:00:00 2001
From: Alexeer <acazares@aduanasoft.com.mx>
Date: Thu, 3 Jul 2025 12:57:39 -0600
Subject: [PATCH] Animaciones dashboard importador

---
 views/importadores/dashboard_importador.php | 187 ++++++++++++++++----
 1 file changed, 151 insertions(+), 36 deletions(-)
diff --git a/views/importadores/dashboard_importador.php b/views/importadores/dashboard_importador.php
index d5c7dff..203a30d 100644
--- a/views/importadores/dashboard_importador.php
+++ b/views/importadores/dashboard_importador.php
@@ -8,6 +8,10 @@
   <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; }
@@ -44,27 +48,69 @@
       .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>
 
   <div class="content">
-    <h4 class="mb-4">📦 Panel del Importador</h4>
+    <h4 class="mb-4 animate__animated animate__fadeInDown">📦 Panel del Importador</h4>
 
     <?php if ($catalogosData['catalogos_activos']): ?>
       <div class="row g-4">
-        <?php foreach ($catalogosData['catalogos'] as $catalogo): ?>
-          <div class="col-md-4">
-            <div class="card shadow-sm p-3 <?= $catalogo['obligatorio'] ? 'border-warning' : '' ?>">
-              <h5 class="text-<?= $catalogo['color'] ?>">
-                <?= obtenerIconoCatalogo($catalogo['nombre']) ?> <?= $catalogo['nombre'] ?>
+        <?php 
+          $delay = 0;
+          foreach ($catalogosData['catalogos'] as $catalogo): 
+          $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 <?= $catalogo['obligatorio'] ? 'border-warning border-warning-animated' : '' ?>">
+              <h5 class="text-<?= $catalogo['color'] ?> mb-3">
+                <i class="<?= obtenerIconoCatalogo($catalogo['nombre']) ?> me-2"></i><?= $catalogo['nombre'] ?>
               </h5>
-              <p class="text-muted small"><?= $catalogo['descripcion'] ?></p>
-              <a href="<?= $catalogo['ruta'] ?>"
-                 class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>">
-                <?= $catalogo['accion'] ?>
-              </a>
+              <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>
               <?php if ($catalogo['obligatorio']): ?>
+                <small class="text-warning mt-2 animate__animated animate__pulse animate__infinite">
+                  <i class="fas fa-exclamation-triangle me-1"></i>
+                  Obligatorio
+                </small>
               <?php endif; ?>
             </div>
           </div>
@@ -74,12 +120,20 @@
       <?php if (count($catalogosData['catalogos']) === 2): // Solo obligatorios ?>
         <div class="row mt-4">
           <div class="col-12">
-            <div class="alert alert-info">
-              <h6>💡 Consejo</h6>
-              <p class="mb-2">Parece que no tienes catálogos activados. Puedes activar los que necesites desde tus preferencias.</p>
-              <a href="/IMPORTADORES/preferencias/catalogos" class="btn btn-primary btn-sm">
-                Configurar Catálogos
-              </a>
+            <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>
@@ -89,29 +143,48 @@
       <!-- Si los catálogos están completamente desactivados -->
       <div class="row g-4">
         <div class="col-12">
-          <div class="alert alert-warning">
-            <h5>🔒 Catálogos Desactivados</h5>
-            <p>Los catálogos están desactivados en tus preferencias. Solo tienes acceso a las funciones básicas del sistema.</p>
-            <a href="/IMPORTADORES/preferencias/catalogos" class="btn btn-primary btn-sm">
-              Activar Catálogos
-            </a>
+          <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 foreach ($catalogosData['catalogos'] as $catalogo): ?>
-          <div class="col-md-4">
-            <div class="card shadow-sm p-3 border-warning">
-              <h5 class="text-<?= $catalogo['color'] ?>">
-                <?= obtenerIconoCatalogo($catalogo['nombre']) ?> <?= $catalogo['nombre'] ?>
+        <?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"><?= $catalogo['descripcion'] ?></p>
-              <a href="<?= $catalogo['ruta'] ?>"
-                 class="btn btn-<?= $catalogo['color'] ?> btn-sm mt-2 <?= $_SERVER['REQUEST_URI'] === $catalogo['ruta'] ? 'active' : '' ?>">
-                <?= $catalogo['accion'] ?>
-              </a>
-              <small class="text-warning mt-1">
-                <i class="fas fa-lock"></i> Función básica
+              <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>
@@ -120,5 +193,47 @@
     <?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>
\ No newline at end of file
