Fix new Frontend 11

frontend/src/pages/auth/RegisterPage.tsx

@@ -2,8 +2,10 @@ import React, { useState } from 'react';
 import { Eye, EyeOff, Loader2, Check } from 'lucide-react';
 import toast from 'react-hot-toast';
 
-import { useAuth } from '../../api/hooks/useAuth';
-import type { RegisterRequest } from '../../api/types';
+import { 
+  useAuth,
+  RegisterRequest
+} from '../../api';
 
 interface RegisterPageProps {
   onLogin: (user: any, token: string) => void;

frontend/src/pages/onboarding/OnboardingPage.tsx

@@ -1,12 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { ChevronLeft, ChevronRight, Upload, MapPin, Store, Factory, Check, Brain, Clock, CheckCircle, AlertTriangle, Loader } from 'lucide-react';
 import toast from 'react-hot-toast';
 
 import { 
   useTenant, 
   useTraining, 
-  useData, 
-  useAuth,
+  useData,
   useTrainingWebSocket,
   TenantCreate,
   TrainingJobRequest 
@@ -57,6 +56,19 @@ const OnboardingPage: React.FC<OnboardingPageProps> = ({ user, onComplete }) =>
   // Training progress state
   const [tenantId, setTenantId] = useState<string>('');
   const [trainingJobId, setTrainingJobId] = useState<string>('');
+  const { createTenant, isLoading: tenantLoading } = useTenant();
+  const { startTrainingJob } = useTraining({ disablePolling: true });
+  const { uploadSalesHistory, validateSalesData } = useData();
+  
+  const steps = [
+    { id: 1, title: 'Datos de Panadería', icon: Store },
+    { id: 2, title: 'Productos y Servicios', icon: Factory },
+    { id: 3, title: 'Datos Históricos', icon: Upload },
+    { id: 4, title: 'Entrenamiento IA', icon: Brain },
+    { id: 5, title: 'Configuración Final', icon: Check }
+  ];
+
+
   const [trainingProgress, setTrainingProgress] = useState<TrainingProgress>({
     progress: 0,
     status: 'pending',
@@ -66,10 +78,7 @@ const OnboardingPage: React.FC<OnboardingPageProps> = ({ user, onComplete }) =>
     estimatedTimeRemaining: 0
   });
 
-  const { createTenant, isLoading: tenantLoading } = useTenant();
-   const { startTrainingJob } = useTraining({ disablePolling: true });
-  const { uploadSalesHistory, validateSalesData } = useData();
-  
+
   // WebSocket connection for real-time training updates
   const { 
     status, 
@@ -82,74 +91,68 @@ const OnboardingPage: React.FC<OnboardingPageProps> = ({ user, onComplete }) =>
     wsUrl 
   } = useTrainingWebSocket(trainingJobId || 'pending', tenantId);
 
-  const steps = [
-    { id: 1, title: 'Datos de Panadería', icon: Store },
-    { id: 2, title: 'Productos y Servicios', icon: Factory },
-    { id: 3, title: 'Datos Históricos', icon: Upload },
-    { id: 4, title: 'Entrenamiento IA', icon: Brain },
-    { id: 5, title: 'Configuración Final', icon: Check }
-  ];
-
   // Handle WebSocket job updates
+  const processWebSocketMessage = useCallback((message: any) => {
+    const messageType = message.type;
+    const data = message.data || message; // Fallback if data is at root level
+
+    if (messageType === 'progress' || messageType === 'training_progress') {
+      setTrainingProgress(prev => ({
+        ...prev,
+        progress: typeof data.progress === 'number' ? data.progress : prev.progress,
+        currentStep: data.current_step || data.currentStep || 'Procesando...',
+        productsCompleted: data.products_completed || data.productsCompleted || prev.productsCompleted,
+        productsTotal: data.products_total || data.productsTotal || prev.productsTotal,
+        estimatedTimeRemaining: data.estimated_time_remaining || data.estimatedTimeRemaining || prev.estimatedTimeRemaining,
+        status: 'running'
+      }));
+
+    } else if (messageType === 'completed' || messageType === 'training_completed') {
+      setTrainingProgress(prev => ({
+        ...prev,  
+        progress: 100,
+        status: 'completed',
+        currentStep: 'Entrenamiento completado',
+        estimatedTimeRemaining: 0
+      }));
+      
+      // Auto-advance to final step after 2 seconds
+      setTimeout(() => {
+        setCurrentStep(5);
+      }, 2000);
+      
+    } else if (messageType === 'failed' || messageType === 'training_failed' || messageType === 'training_error') {
+      setTrainingProgress(prev => ({
+        ...prev,
+        status: 'failed',
+        error: data.error || data.message || 'Error en el entrenamiento',
+        currentStep: 'Error en el entrenamiento'
+      }));
+      
+    } else if (messageType === 'initial_status') {
+      setTrainingProgress(prev => ({
+        ...prev,
+        progress: typeof data.progress === 'number' ? data.progress : prev.progress,
+        status: data.status || prev.status,
+        currentStep: data.current_step || data.currentStep || prev.currentStep
+      }));
+    }
+  }, []);
+
+  // Process WebSocket messages
+  useEffect(() => {
+    if (lastMessage) {
+      processWebSocketMessage(lastMessage);
+    }
+  }, [lastMessage, processWebSocketMessage]);
+
+  // Backup jobUpdates processing
   useEffect(() => {
     if (jobUpdates.length > 0) {
       const latestUpdate = jobUpdates[0];
-      
-      console.log('📨 Processing WebSocket Update:', latestUpdate);
-      
-      // Handle the message structure from your test script
-      const messageType = latestUpdate.type;
-      const data = latestUpdate.data || {};
-      
-      if (messageType === 'progress' || messageType === 'training_progress') {
-        console.log('📊 Progress update:', data);
-        setTrainingProgress(prev => ({
-          ...prev,
-          progress: data.progress || 0,
-          currentStep: data.current_step || 'Procesando...',
-          productsCompleted: data.products_completed || 0,
-          productsTotal: data.products_total || prev.productsTotal,
-          estimatedTimeRemaining: data.estimated_time_remaining || 0,
-          status: 'running'
-        }));
-      } else if (messageType === 'completed' || messageType === 'training_completed') {
-        console.log('🎉 Training completed via WebSocket!');
-        setTrainingProgress(prev => ({
-          ...prev,  
-          progress: 100,
-          status: 'completed',
-          currentStep: 'Entrenamiento completado',
-          estimatedTimeRemaining: 0
-        }));
-        
-        // Auto-advance to final step after 2 seconds
-        setTimeout(() => {
-          setCurrentStep(5);
-        }, 2000);
-        
-      } else if (messageType === 'failed' || messageType === 'training_failed' || messageType === 'training_error') {
-        console.error('❌ Training failed via WebSocket:', latestUpdate);
-        setTrainingProgress(prev => ({
-          ...prev,
-          status: 'failed',
-          error: data.error || 'Error en el entrenamiento',
-          currentStep: 'Error en el entrenamiento'
-        }));
-      } else if (messageType === 'heartbeat') {
-        console.log('💓 Heartbeat received');
-      } else if (messageType === 'initial_status') {
-        console.log('ℹ️ Initial status:', data);
-        setTrainingProgress(prev => ({
-          ...prev,
-          progress: data.progress || prev.progress,
-          status: data.status || prev.status,
-          currentStep: data.current_step || prev.currentStep
-        }));
-      } else {
-        console.log('🔍 Unhandled message type:', messageType, data);
-      }
+      processWebSocketMessage(latestUpdate);
     }
-  }, [jobUpdates]);
+  }, [jobUpdates, processWebSocketMessage]);
 
   // Connect to WebSocket when training starts
   useEffect(() => {