Add onboarding flow improvements

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

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { OnboardingWizard, OnboardingStep } from '../../../components/domain/onboarding/OnboardingWizard';
+import { onboardingApiService } from '../../../services/api/onboarding.service';
+import { useAuth } from '../../../hooks/useAuth';
+import { LoadingSpinner } from '../../../components/shared/LoadingSpinner';
+
+// Step Components
+import { BakerySetupStep } from '../../../components/domain/onboarding/steps/BakerySetupStep';
+import { DataProcessingStep } from '../../../components/domain/onboarding/steps/DataProcessingStep';
+import { ReviewStep } from '../../../components/domain/onboarding/steps/ReviewStep';
+import { InventorySetupStep } from '../../../components/domain/onboarding/steps/InventorySetupStep';
+import { SuppliersStep } from '../../../components/domain/onboarding/steps/SuppliersStep';
+import { MLTrainingStep } from '../../../components/domain/onboarding/steps/MLTrainingStep';
+import { CompletionStep } from '../../../components/domain/onboarding/steps/CompletionStep';
+
+const OnboardingPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const [globalData, setGlobalData] = useState<any>({});
+
+  // Define the 8 onboarding steps (simplified by merging data upload + analysis)
+  const steps: OnboardingStep[] = [
+    {
+      id: 'setup',
+      title: '🏢 Setup',
+      description: 'Configuración básica de tu panadería y creación del tenant',
+      component: BakerySetupStep,
+      isRequired: true,
+      validation: (data) => {
+        if (!data.bakery?.name) return 'El nombre de la panadería es requerido';
+        if (!data.bakery?.type) return 'El tipo de panadería es requerido';
+        if (!data.bakery?.location) return 'La ubicación es requerida';
+        // Tenant creation will happen automatically when validation passes
+        return null;
+      }
+    },
+    {
+      id: 'data-processing',
+      title: '📊 Historial de Ventas',
+      description: 'Sube tus datos de ventas para obtener insights personalizados',
+      component: DataProcessingStep,
+      isRequired: true,
+      validation: (data) => {
+        if (!data.files?.salesData) return 'Debes cargar el archivo de datos de ventas';
+        if (data.processingStage !== 'completed') return 'El procesamiento debe completarse antes de continuar';
+        if (!data.processingResults?.is_valid) return 'Los datos deben ser válidos para continuar';
+        return null;
+      }
+    },
+    {
+      id: 'review',
+      title: '📋 Revisión',
+      description: 'Revisión de productos detectados por IA y resultados',
+      component: ReviewStep,
+      isRequired: true,
+      validation: (data) => {
+        if (!data.reviewCompleted) return 'Debes revisar y aprobar los productos detectados';
+        return null;
+      }
+    },
+    {
+      id: 'inventory',
+      title: '⚙️ Inventario',
+      description: 'Configuración de inventario (stock, fechas de vencimiento)',
+      component: InventorySetupStep,
+      isRequired: true,
+      validation: (data) => {
+        if (!data.inventoryConfigured) return 'Debes configurar el inventario básico';
+        return null;
+      }
+    },
+    {
+      id: 'suppliers',
+      title: '🏪 Proveedores',
+      description: 'Configuración de proveedores y asociaciones',
+      component: SuppliersStep,
+      isRequired: false,
+      validation: () => null // Optional step
+    },
+    {
+      id: 'ml-training',
+      title: '🎯 Inteligencia',
+      description: 'Creación de tu asistente inteligente personalizado',
+      component: MLTrainingStep,
+      isRequired: true,
+      validation: (data) => {
+        if (data.trainingStatus !== 'completed') return 'El entrenamiento del modelo debe completarse';
+        return null;
+      }
+    },
+    {
+      id: 'completion',
+      title: '🎉 Listo',
+      description: 'Finalización y preparación para usar la plataforma',
+      component: CompletionStep,
+      isRequired: true,
+      validation: () => null
+    }
+  ];
+
+  const handleComplete = async (allData: any) => {
+    setIsLoading(true);
+    try {
+      // Mark onboarding as complete in the backend
+      if (user?.tenant_id) {
+        await onboardingApiService.completeOnboarding(user.tenant_id, {
+          completedAt: new Date().toISOString(),
+          data: allData
+        });
+      }
+
+      // Navigate to dashboard
+      navigate('/app/dashboard', { 
+        state: { 
+          message: '¡Felicidades! Tu panadería ha sido configurada exitosamente.',
+          type: 'success'
+        }
+      });
+    } catch (error) {
+      console.error('Error completing onboarding:', error);
+      // Still navigate to dashboard but show warning
+      navigate('/app/dashboard', {
+        state: {
+          message: 'Configuración completada. Algunos ajustes finales pueden estar pendientes.',
+          type: 'warning'
+        }
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleExit = () => {
+    const confirmExit = window.confirm(
+      '¿Estás seguro de que quieres salir del proceso de configuración? Tu progreso se guardará automáticamente.'
+    );
+    
+    if (confirmExit) {
+      navigate('/app/dashboard');
+    }
+  };
+
+  if (isLoading) {
+    return <LoadingSpinner overlay text="Completando configuración..." />;
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)]">
+      <OnboardingWizard
+        steps={steps}
+        onComplete={handleComplete}
+        onExit={handleExit}
+        className="py-8"
+      />
+    </div>
+  );
+};
+
+export default OnboardingPage;