Improve the dahboard 1

frontend/src/components/auth/ProtectedRoute.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '../../store';
+import { completeOnboarding } from '../../store/slices/authSlice';
+import { OnboardingRouter } from '../../utils/onboardingRouter';
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -9,7 +11,9 @@ interface ProtectedRouteProps {
 
 const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
   const location = useLocation();
+  const dispatch = useDispatch();
   const { isAuthenticated, user } = useSelector((state: RootState) => state.auth);
+  const [onboardingCheck, setOnboardingCheck] = useState<'checking' | 'complete' | 'incomplete'>('checking');
 
   // Check if user is authenticated
   if (!isAuthenticated || !user) {
@@ -17,16 +21,56 @@ const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
     return <Navigate to="/login" state={{ from: location }} replace />;
   }
 
-  // Check if user needs onboarding (except for onboarding and settings routes)
+  // Sync onboarding status with backend on mount and navigation
+  useEffect(() => {
+    const checkOnboardingStatus = async () => {
+      try {
+        // If user already marked as onboarding complete, skip API check
+        if (user.isOnboardingComplete) {
+          setOnboardingCheck('complete');
+          return;
+        }
+
+        // Check actual onboarding progress from backend
+        const canAccess = await OnboardingRouter.canAccessDashboard();
+        
+        if (canAccess) {
+          // User has completed onboarding according to backend, update Redux state
+          dispatch(completeOnboarding());
+          setOnboardingCheck('complete');
+        } else {
+          setOnboardingCheck('incomplete');
+        }
+      } catch (error) {
+        console.error('Error checking onboarding status:', error);
+        // On error, use current Redux state
+        setOnboardingCheck(user.isOnboardingComplete ? 'complete' : 'incomplete');
+      }
+    };
+
+    checkOnboardingStatus();
+  }, [user.isOnboardingComplete, dispatch]);
+
+  // Show loading while checking onboarding status
+  if (onboardingCheck === 'checking') {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  // Route-based logic
   const isOnboardingRoute = location.pathname.includes('/onboarding');
   const isSettingsRoute = location.pathname.includes('/settings');
   
-  if (!user.isOnboardingComplete && !isOnboardingRoute && !isSettingsRoute) {
+  // If onboarding not complete and not on onboarding/settings route, redirect to onboarding
+  if (onboardingCheck === 'incomplete' && !isOnboardingRoute && !isSettingsRoute) {
     return <Navigate to="/app/onboarding" replace />;
   }
 
-  // If user completed onboarding but is on onboarding route, redirect to dashboard
-  if (user.isOnboardingComplete && isOnboardingRoute) {
+  // If onboarding complete but on onboarding route, redirect to dashboard
+  if (onboardingCheck === 'complete' && isOnboardingRoute) {
     return <Navigate to="/app/dashboard" replace />;
   }
 

frontend/src/store/slices/authSlice.ts

@@ -61,6 +61,8 @@ const authSlice = createSlice({
     completeOnboarding: (state) => {
       if (state.user) {
         state.user.isOnboardingComplete = true;
+        // Persist updated user data to localStorage
+        localStorage.setItem('user_data', JSON.stringify(state.user));
       }
     },
   },