Add role-based filtering and imporve code

frontend/src/components/domain/onboarding/steps/MLTrainingStep.tsx

@@ -1,7 +1,10 @@
 import React, { useState, useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Button } from '../../../ui/Button';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
 import { useCreateTrainingJob, useTrainingWebSocket, useTrainingJobStatus } from '../../../../api/hooks/training';
+import { Info } from 'lucide-react';
 
 interface MLTrainingStepProps {
   onNext: () => void;
@@ -22,14 +25,33 @@ interface TrainingProgress {
 export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
   onComplete
 }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
   const [trainingProgress, setTrainingProgress] = useState<TrainingProgress | null>(null);
   const [isTraining, setIsTraining] = useState(false);
   const [error, setError] = useState<string>('');
   const [jobId, setJobId] = useState<string | null>(null);
+  const [trainingStartTime, setTrainingStartTime] = useState<number | null>(null);
+  const [showSkipOption, setShowSkipOption] = useState(false);
 
   const currentTenant = useCurrentTenant();
   const createTrainingJob = useCreateTrainingJob();
 
+  // Check if training has been running for more than 2 minutes
+  useEffect(() => {
+    if (trainingStartTime && isTraining && !showSkipOption) {
+      const checkTimer = setInterval(() => {
+        const elapsedTime = (Date.now() - trainingStartTime) / 1000; // in seconds
+        if (elapsedTime > 120) { // 2 minutes
+          setShowSkipOption(true);
+          clearInterval(checkTimer);
+        }
+      }, 5000); // Check every 5 seconds
+
+      return () => clearInterval(checkTimer);
+    }
+  }, [trainingStartTime, isTraining, showSkipOption]);
+
   // Memoized WebSocket callbacks to prevent reconnections
   const handleProgress = useCallback((data: any) => {
     setTrainingProgress({
@@ -37,7 +59,7 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
       progress: data.data?.progress || 0,
       message: data.data?.message || 'Entrenando modelo...',
       currentStep: data.data?.current_step,
-      estimatedTimeRemaining: data.data?.estimated_time_remaining
+      estimatedTimeRemaining: data.data?.estimated_time_remaining_seconds || data.data?.estimated_time_remaining
     });
   }, []);
 
@@ -177,7 +199,8 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
       });
 
       setJobId(response.job_id);
-      
+      setTrainingStartTime(Date.now()); // Track when training started
+
       setTrainingProgress({
         stage: 'queued',
         progress: 10,
@@ -190,6 +213,12 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
     }
   };
 
+  const handleSkipToDashboard = () => {
+    // Navigate to dashboard while training continues in background
+    console.log('🚀 User chose to skip to dashboard while training continues');
+    navigate('/app/dashboard');
+  };
+
   const formatTime = (seconds?: number) => {
     if (!seconds) return '';
     
@@ -273,7 +302,7 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
                     </div>
 
                     <div className="flex justify-between text-xs text-[var(--text-tertiary)]">
-                      <span>{trainingProgress.currentStep || 'Procesando...'}</span>
+                      <span>{trainingProgress.currentStep || t('onboarding:steps.ml_training.progress.data_preparation', 'Procesando...')}</span>
                       <div className="flex items-center gap-2">
                         {jobId && (
                           <span className={`text-xs ${isConnected ? 'text-green-500' : 'text-red-500'}`}>
@@ -281,7 +310,7 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
                           </span>
                         )}
                         {trainingProgress.estimatedTimeRemaining && (
-                          <span>Tiempo estimado: {formatTime(trainingProgress.estimatedTimeRemaining)}</span>
+                          <span>{t('onboarding:steps.ml_training.estimated_time_remaining', 'Tiempo restante estimado: {{time}}', { time: formatTime(trainingProgress.estimatedTimeRemaining) })}</span>
                         )}
                       </div>
                     </div>
@@ -293,6 +322,35 @@ export const MLTrainingStep: React.FC<MLTrainingStepProps> = ({
         </div>
       </div>
 
+      {/* Skip to Dashboard Option - Show after 2 minutes */}
+      {showSkipOption && isTraining && trainingProgress?.stage !== 'completed' && (
+        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 mt-0.5">
+              <Info className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+            </div>
+            <div className="flex-1">
+              <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-1">
+                {t('onboarding:steps.ml_training.skip_to_dashboard.title', '¿Toma demasiado tiempo?')}
+              </h4>
+              <p className="text-sm text-blue-800 dark:text-blue-200 mb-3">
+                {t('onboarding:steps.ml_training.skip_to_dashboard.info', 'El entrenamiento está tardando más de lo esperado. No te preocupes, puedes explorar tu dashboard mientras el modelo termina de entrenarse en segundo plano.')}
+              </p>
+              <Button
+                onClick={handleSkipToDashboard}
+                variant="secondary"
+                size="sm"
+              >
+                {t('onboarding:steps.ml_training.skip_to_dashboard.button', 'Ir al Dashboard')}
+              </Button>
+              <p className="text-xs text-blue-700 dark:text-blue-300 mt-2">
+                {t('onboarding:steps.ml_training.skip_to_dashboard.training_continues', 'El entrenamiento continúa en segundo plano')}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Training Info */}
       <div className="bg-[var(--bg-secondary)] rounded-lg p-4">
         <h4 className="font-medium mb-2">¿Qué sucede durante el entrenamiento?</h4>