Add onboardin steps improvements

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
+import toast from 'react-hot-toast';
 
 // Components
 import LoadingSpinner from './components/ui/LoadingSpinner';
@@ -19,6 +20,9 @@ import Layout from './components/layout/Layout';
 import { store } from './store';
 import { Provider } from 'react-redux';
 
+// Onboarding utilities
+import { OnboardingRouter, type NextAction, type RoutingDecision } from './utils/onboardingRouter';
+
 // i18n
 import './i18n';
 
@@ -33,6 +37,7 @@ interface User {
   fullName: string;
   role: string;
   isOnboardingComplete: boolean;
+  tenant_id?: string;
 }
 
 interface AppState {
@@ -40,6 +45,7 @@ interface AppState {
   isLoading: boolean;
   user: User | null;
   currentPage: CurrentPage;
+  routingDecision: RoutingDecision | null;
 }
 
 const LoadingFallback = () => (
@@ -56,9 +62,25 @@ const App: React.FC = () => {
     isAuthenticated: false,
     isLoading: true,
     user: null,
-    currentPage: 'landing' // 👈 Start with landing page
+    currentPage: 'landing',
+    routingDecision: null
   });
 
+  // Helper function to map NextAction to CurrentPage
+  const mapActionToPage = (action: NextAction): CurrentPage => {
+    const actionPageMap: Record<NextAction, CurrentPage> = {
+      'register': 'register',
+      'login': 'login',
+      'onboarding_bakery': 'onboarding',
+      'onboarding_data': 'onboarding',
+      'onboarding_training': 'onboarding',
+      'dashboard': 'dashboard',
+      'landing': 'landing'
+    };
+
+    return actionPageMap[action] || 'landing';
+  };
+
   // Initialize app and check authentication
   useEffect(() => {
     const initializeApp = async () => {
@@ -69,17 +91,43 @@ const App: React.FC = () => {
         
         if (token && userData) {
           const user = JSON.parse(userData);
-          setAppState({
-            isAuthenticated: true,
-            isLoading: false,
-            user,
-            currentPage: user.isOnboardingComplete ? 'dashboard' : 'onboarding'
-          });
+          
+          try {
+            // Use enhanced onboarding router to determine next action
+            const routingDecision = await OnboardingRouter.getNextActionForUser();
+            const nextPage = mapActionToPage(routingDecision.nextAction);
+            
+            setAppState({
+              isAuthenticated: true,
+              isLoading: false,
+              user,
+              currentPage: nextPage,
+              routingDecision
+            });
+
+            // Show welcome message with progress
+            if (routingDecision.message && routingDecision.completionPercentage > 0) {
+              toast.success(`Welcome back! ${routingDecision.message} (${Math.round(routingDecision.completionPercentage)}% complete)`);
+            }
+          } catch (onboardingError) {
+            // Fallback to legacy logic if onboarding API fails
+            console.warn('Onboarding API failed, using legacy logic:', onboardingError);
+            setAppState({
+              isAuthenticated: true,
+              isLoading: false,
+              user,
+              currentPage: user.isOnboardingComplete ? 'dashboard' : 'onboarding',
+              routingDecision: null
+            });
+          }
         } else {
+          // Unauthenticated user
+          const routingDecision = OnboardingRouter.getNextActionForGuest();
           setAppState(prev => ({
             ...prev,
             isLoading: false,
-            currentPage: 'landing' // 👈 Show landing page for non-authenticated users
+            currentPage: 'landing',
+            routingDecision
           }));
         }
       } catch (error) {
@@ -87,7 +135,8 @@ const App: React.FC = () => {
         setAppState(prev => ({
           ...prev,
           isLoading: false,
-          currentPage: 'landing' // 👈 Fallback to landing page
+          currentPage: 'landing',
+          routingDecision: null
         }));
       }
     };
@@ -95,16 +144,45 @@ const App: React.FC = () => {
     initializeApp();
   }, []);
 
-  const handleLogin = (user: User, token: string) => {
+  const handleLogin = async (user: User, token: string) => {
     localStorage.setItem('auth_token', token);
     localStorage.setItem('user_data', JSON.stringify(user));
     
-    setAppState({
-      isAuthenticated: true,
-      isLoading: false,
-      user,
-      currentPage: user.isOnboardingComplete ? 'dashboard' : 'onboarding'
-    });
+    try {
+      // Mark user registration as complete
+      await OnboardingRouter.completeStep('user_registered', {
+        user_id: user.id,
+        email: user.email,
+        login_type: 'existing_user'
+      });
+
+      // Determine next action based on current progress
+      const routingDecision = await OnboardingRouter.getNextActionForUser();
+      const nextPage = mapActionToPage(routingDecision.nextAction);
+      
+      setAppState({
+        isAuthenticated: true,
+        isLoading: false,
+        user,
+        currentPage: nextPage,
+        routingDecision
+      });
+
+      // Show progress message
+      if (routingDecision.message) {
+        toast.success(routingDecision.message);
+      }
+    } catch (error) {
+      console.warn('Enhanced login routing failed, using fallback:', error);
+      // Fallback to legacy logic
+      setAppState({
+        isAuthenticated: true,
+        isLoading: false,
+        user,
+        currentPage: user.isOnboardingComplete ? 'dashboard' : 'onboarding',
+        routingDecision: null
+      });
+    }
   };
 
   const handleLogout = () => {
@@ -119,15 +197,42 @@ const App: React.FC = () => {
     });
   };
 
-  const handleOnboardingComplete = () => {
-    const updatedUser = { ...appState.user!, isOnboardingComplete: true };
-    localStorage.setItem('user_data', JSON.stringify(updatedUser));
-    
-    setAppState(prev => ({
-      ...prev,
-      user: updatedUser,
-      currentPage: 'dashboard'
-    }));
+  const handleOnboardingComplete = async () => {
+    try {
+      // Mark all onboarding steps as complete
+      await OnboardingRouter.completeStep('dashboard_accessible', {
+        completion_time: new Date().toISOString(),
+        user_id: appState.user?.id
+      });
+
+      const updatedUser = { ...appState.user!, isOnboardingComplete: true };
+      localStorage.setItem('user_data', JSON.stringify(updatedUser));
+      
+      setAppState(prev => ({
+        ...prev,
+        user: updatedUser,
+        currentPage: 'dashboard',
+        routingDecision: {
+          nextAction: 'dashboard',
+          currentStep: 'dashboard_accessible',
+          completionPercentage: 100,
+          message: 'Welcome to your PanIA dashboard!'
+        }
+      }));
+
+      toast.success('¡Configuración completada! Bienvenido a tu dashboard de PanIA 🎉');
+    } catch (error) {
+      console.warn('Enhanced onboarding completion failed, using fallback:', error);
+      // Fallback logic
+      const updatedUser = { ...appState.user!, isOnboardingComplete: true };
+      localStorage.setItem('user_data', JSON.stringify(updatedUser));
+      
+      setAppState(prev => ({
+        ...prev,
+        user: updatedUser,
+        currentPage: 'dashboard'
+      }));
+    }
   };
 
   const navigateTo = (page: CurrentPage) => {