se agrego modulo de partidas y sus filtros en el expediente

src/index.css

@@ -7,6 +7,59 @@ button:hover {
   border-color: #646cff;
 }
 
+/* Estilos para el slicer de rango */
+.slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  pointer-events: none;
+}
+
+.slider-thumb::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  border: 2px solid white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  pointer-events: all;
+  position: relative;
+  z-index: 3;
+}
+
+.slider-thumb::-moz-range-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  border: 2px solid white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  pointer-events: all;
+  border: none;
+}
+
+.slider-thumb::-webkit-slider-thumb:hover {
+  background: #2563eb;
+}
+
+.slider-thumb::-moz-range-thumb:hover {
+  background: #2563eb;
+}
+
+/* Utility class to hide scrollbars */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;  /* Safari and Chrome */
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/pages/Reports.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { fetchWithAuth } from '../fetchWithAuth';
+import { useNotification } from '../context/NotificationContext';
 import datastageModelsData from '../data/datastageModels.json';
 import pedimentosModelsData from '../data/pedimentosModels.json';
 
@@ -36,10 +37,14 @@ if (typeof document !== 'undefined' && !document.getElementById('reports-animati
 export default function Reports() {
   // Leer DEBUG_MODE desde variables de entorno
   const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
+  const { showMessage } = useNotification();
   
   const [isExporting, setIsExporting] = useState(false);
   const [exportFormat, setExportFormat] = useState('excel');
   const [showExportSuccess, setShowExportSuccess] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  const [showTour, setShowTour] = useState(false);
+  const [tourStep, setTourStep] = useState(0);
   
   // Estado para formato de exportación personalizado
   const [showFormatSelector, setShowFormatSelector] = useState(false);
@@ -143,30 +148,63 @@ export default function Reports() {
     }
   };
 
+  // Tour steps for guided experience
+  const tourSteps = [
+    {
+      target: '.tab-selector',
+      content: '🎯 Comienza seleccionando el tipo de reporte que deseas generar',
+      position: 'bottom'
+    },
+    {
+      target: '.model-selector',
+      content: '📊 Si elegiste Datastage, selecciona el modelo específico aquí',
+      position: 'bottom'
+    },
+    {
+      target: '.format-selector',
+      content: '📁 Elige el formato de tu archivo: Excel para análisis avanzado o CSV para compatibilidad',
+      position: 'bottom'
+    },
+    {
+      target: '.fields-selector',
+      content: '✨ Selecciona los campos que quieres incluir en tu reporte. Puedes agregar o quitar campos fácilmente',
+      position: 'top'
+    },
+    {
+      target: '.filters-section',
+      content: '🔍 Aplica filtros para obtener exactamente los datos que necesitas',
+      position: 'top'
+    },
+    {
+      target: '.export-button',
+      content: '🚀 ¡Listo! Haz clic aquí para generar y descargar tu reporte',
+      position: 'top'
+    }
+  ];
+
+  const startTour = () => {
+    setShowTour(true);
+    setTourStep(0);
+  };
+
+  const nextTourStep = () => {
+    if (tourStep < tourSteps.length - 1) {
+      setTourStep(tourStep + 1);
+    } else {
+      setShowTour(false);
+      setTourStep(0);
+    }
+  };
+
+  const skipTour = () => {
+    setShowTour(false);
+    setTourStep(0);
+  };
+
   // Función para manejar la exportación del modelo
   const handleExportModel = async () => {
     if (selectedFields.length === 0) {
-      // Mostrar mensaje de error con estilo
-      const errorDiv = document.createElement('div');
-      errorDiv.className = 'fixed top-4 right-4 bg-red-50 border-l-4 border-red-500 p-4 rounded shadow-lg';
-      errorDiv.innerHTML = `
-        <div class="flex items-center">
-          <div class="flex-shrink-0">
-            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-            </svg>
-          </div>
-          <div class="ml-3">
-            <p class="text-sm text-red-700">Por favor selecciona al menos un campo para exportar</p>
-          </div>
-        </div>
-      `;
-      document.body.appendChild(errorDiv);
-      setTimeout(() => {
-        errorDiv.style.opacity = '0';
-        errorDiv.style.transform = 'translateX(100%)';
-        setTimeout(() => errorDiv.remove(), 300);
-      }, 3000);
+      showMessage('Por favor selecciona al menos un campo para exportar', 'error');
       return;
     }
 
@@ -255,12 +293,16 @@ export default function Reports() {
         setTimeout(() => progressDiv.remove(), 300);
       }, 2000);
 
+      showMessage(`¡Archivo ${fileName} descargado exitosamente!`, 'success');
       setShowExportSuccess(true);
     } catch (error) {
       console.error('Error al exportar:', error);
-      alert(error.message || 'Error al exportar el modelo. Por favor intente nuevamente.');
+      showMessage(error.message || 'Error al exportar el modelo. Por favor intente nuevamente.', 'error');
     } finally {
       setIsExporting(false);
+      // Remove progress indicator if it exists
+      const progressDiv = document.querySelector('.fixed.bottom-4.right-4');
+      if (progressDiv) progressDiv.remove();
     }
   };
 
@@ -759,6 +801,29 @@ export default function Reports() {
               Consulta, genera y descarga reportes relacionados con el sistema aduanero
             </p>
           </div>
+          
+          {/* Botones de ayuda */}
+          <div className="flex gap-2">
+            <button
+              onClick={() => setShowHelp(!showHelp)}
+              className="bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-xl p-3 transition-all duration-200 group"
+              title="Ayuda"
+            >
+              <svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </button>
+            <button
+              onClick={startTour}
+              className="bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-xl p-3 transition-all duration-200 group"
+              title="Tour guiado"
+            >
+              <svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </button>
+          </div>
+          
           {/* Efectos decorativos de fondo */}
           <div className="absolute -top-10 -right-10 opacity-20 pointer-events-none select-none">
             <div className="w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
@@ -773,19 +838,63 @@ export default function Reports() {
             <div className="absolute top-1/2 right-1/4 w-3 h-3 bg-white/20 rounded-full animate-bounce"></div>
           </div>
         </div>
-        
-        <style>{`
-          @keyframes bounce-slow {
-            0%, 100% { transform: translateY(0) scale(1); }
-            50% { transform: translateY(-8px) scale(1.05); }
-          }
-          .animate-bounce-slow {
-            animation: bounce-slow 3s infinite;
-          }
-        `}</style>
+        {/* Panel de ayuda */}
+        {showHelp && (
+          <div className="mb-6 bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-200 rounded-2xl p-6 shadow-lg animate-fadein-slideup">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0">
+                <div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center">
+                  <svg className="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                  </svg>
+                </div>
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-bold text-amber-900 mb-3">Guía de uso del Centro de Reportes</h3>
+                <div className="space-y-4 text-sm text-amber-800">
+                  <div className="bg-white/60 rounded-lg p-4">
+                    <h4 className="font-semibold mb-2 text-amber-900">🎯 Paso 1: Selecciona el tipo de reporte</h4>
+                    <p>Elige entre <strong>Pedimentos cargados</strong> para documentos de importación/exportación o <strong>Datastage cargados</strong> para datos procesados del sistema.</p>
+                  </div>
+                  <div className="bg-white/60 rounded-lg p-4">
+                    <h4 className="font-semibold mb-2 text-amber-900">📊 Paso 2: Configura tu reporte</h4>
+                    <p>Selecciona el <strong>formato</strong> (Excel para análisis o CSV para compatibilidad), elige los <strong>campos</strong> que necesitas y aplica <strong>filtros</strong> específicos.</p>
+                  </div>
+                  <div className="bg-white/60 rounded-lg p-4">
+                    <h4 className="font-semibold mb-2 text-amber-900">🚀 Paso 3: Genera y descarga</h4>
+                    <p>Haz clic en el botón de exportación y el archivo se descargará automáticamente a tu dispositivo.</p>
+                  </div>
+                  <div className="bg-white/60 rounded-lg p-4">
+                    <h4 className="font-semibold mb-2 text-amber-900">💡 Consejos útiles</h4>
+                    <ul className="list-disc list-inside space-y-1">
+                      <li>Usa Excel para reportes con gráficos y análisis avanzado</li>
+                      <li>Usa CSV para importar datos en otros sistemas</li>
+                      <li>Aplica filtros para reducir el tamaño del archivo</li>
+                      <li>Selecciona solo los campos que realmente necesitas</li>
+                    </ul>
+                  </div>
+                </div>
+                <button
+                  onClick={startTour}
+                  className="mt-4 bg-amber-200 hover:bg-amber-300 text-amber-800 px-4 py-2 rounded-lg font-medium transition-colors"
+                >
+                  🎯 Iniciar tour guiado
+                </button>
+              </div>
+              <button
+                onClick={() => setShowHelp(false)}
+                className="text-amber-600 hover:text-amber-800 transition-colors"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        )}
 
         {/* Pestañas */}
-        <div className="mb-4 sm:mb-6 animate-fadein-slideup opacity-0" style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
+        <div className="tab-selector mb-4 sm:mb-6 animate-fadein-slideup opacity-0" style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
           <div className="bg-white/95 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100">
             <div className="flex flex-col sm:flex-row border-b border-blue-200/50 p-1 gap-1">
               <button
@@ -858,6 +967,54 @@ export default function Reports() {
           </div>
         </div>
       </div>
+      
+      {/* Tour Overlay */}
+      <TourOverlay 
+        show={showTour} 
+        step={tourStep} 
+        steps={tourSteps} 
+        onNext={nextTourStep} 
+        onSkip={skipTour} 
+      />
     </div>
   );
 }
+
+// Tour overlay component
+const TourOverlay = ({ show, step, steps, onNext, onSkip }) => {
+  if (!show || !steps[step]) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
+      <div className="bg-white rounded-2xl p-6 max-w-md mx-4 shadow-2xl">
+        <div className="flex items-start gap-4">
+          <div className="flex-shrink-0">
+            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+              <span className="text-blue-600 font-bold">{step + 1}</span>
+            </div>
+          </div>
+          <div className="flex-1">
+            <h3 className="text-lg font-bold text-gray-900 mb-2">
+              Paso {step + 1} de {steps.length}
+            </h3>
+            <p className="text-gray-600 mb-4">{steps[step].content}</p>
+            <div className="flex gap-2">
+              <button
+                onClick={onNext}
+                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
+              >
+                {step === steps.length - 1 ? 'Finalizar' : 'Siguiente'}
+              </button>
+              <button
+                onClick={onSkip}
+                className="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium transition-colors"
+              >
+                Saltar tour
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};