Start integrating the onboarding flow with backend 14

frontend/src/pages/app/onboarding/OnboardingPage.tsx

@@ -34,7 +34,6 @@ const OnboardingPage: React.FC = () => {
     validateCurrentStep,
     createTenant,
     processSalesFile,
-    generateInventorySuggestions,
     createInventoryFromSuggestions,
     completeOnboarding,
     clearError,
@@ -60,6 +59,17 @@ const OnboardingPage: React.FC = () => {
     validation: step.validation
   }));
 
+  // Debug logging - only show if there's an error or important state change
+  if (error || isLoading || autoResume.isCheckingResume) {
+    console.log('OnboardingPage Status:', {
+      stepsLength: steps.length,
+      currentStep,
+      isLoading,
+      error,
+      isCheckingResume: autoResume.isCheckingResume,
+    });
+  }
+
   const handleStepChange = (stepIndex: number, stepData: any) => {
     const stepId = steps[stepIndex]?.id;
     if (stepId) {
@@ -96,49 +106,102 @@ const OnboardingPage: React.FC = () => {
     }
   }, [isAuthenticated, navigate]);
 
-  // Clear error when user navigates away
+  // Clear error when user navigates away or when component mounts
   useEffect(() => {
+    // Clear any existing errors when the page loads
+    if (error) {
+      console.log('🧹 Clearing existing error on mount:', error);
+      clearError();
+    }
+    
     return () => {
       if (error) {
         clearError();
       }
     };
-  }, [error, clearError]);
+  }, [clearError]); // Include clearError in dependencies
 
   // Show loading while processing or checking for saved progress
-  if (isLoading || autoResume.isCheckingResume) {
+  // Add a safety timeout - if checking resume takes more than 10 seconds, proceed anyway
+  const [loadingTimeoutReached, setLoadingTimeoutReached] = React.useState(false);
+  
+  React.useEffect(() => {
+    if (isLoading || autoResume.isCheckingResume) {
+      const timeout = setTimeout(() => {
+        console.warn('⚠️ Loading timeout reached, proceeding with onboarding');
+        setLoadingTimeoutReached(true);
+      }, 10000); // 10 second timeout
+      
+      return () => clearTimeout(timeout);
+    } else {
+      setLoadingTimeoutReached(false);
+    }
+  }, [isLoading, autoResume.isCheckingResume]);
+  
+  if ((isLoading || autoResume.isCheckingResume) && !loadingTimeoutReached) {
     const message = autoResume.isCheckingResume 
       ? "Verificando progreso guardado..." 
       : "Procesando...";
       
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <LoadingSpinner size="lg" message={message} />
+        <div className="flex flex-col items-center">
+          <LoadingSpinner size="lg" />
+          <div className="mt-4 text-lg text-gray-600">{message}</div>
+        </div>
       </div>
     );
   }
 
-  // Show error state
-  if (error) {
+  // Show error state with better recovery options
+  if (error && !loadingTimeoutReached) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center max-w-md">
+          <h2 className="text-xl font-semibold text-red-600 mb-4">Error en Onboarding</h2>
+          <p className="text-gray-600 mb-4">{error}</p>
+          <div className="space-y-2">
+            <button
+              onClick={() => {
+                console.log('🔄 User clicked retry - clearing error');
+                clearError();
+              }}
+              className="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+            >
+              Continuar con el Onboarding
+            </button>
+            <button
+              onClick={() => {
+                console.log('🔄 User clicked reset');
+                reset();
+              }}
+              className="w-full px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+            >
+              Reiniciar Desde el Principio
+            </button>
+          </div>
+          <p className="text-sm text-gray-500 mt-4">
+            Si el problema persiste, recarga la página
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Safety check: ensure we have valid steps and current step
+  if (wizardSteps.length === 0) {
+    console.error('❌ No wizard steps available, this should not happen');
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
-          <h2 className="text-xl font-semibold text-red-600 mb-4">Error en Onboarding</h2>
-          <p className="text-gray-600 mb-4">{error}</p>
-          <div className="space-x-4">
-            <button
-              onClick={clearError}
-              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-            >
-              Reintentar
-            </button>
-            <button
-              onClick={reset}
-              className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
-            >
-              Reiniciar
-            </button>
-          </div>
+          <h2 className="text-xl font-semibold text-red-600 mb-4">Error de Configuración</h2>
+          <p className="text-gray-600 mb-4">No se pudieron cargar los pasos del onboarding.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Recargar Página
+          </button>
         </div>
       </div>
     );