feat: implement onboarding process and enrollment status tracking for users

src/App.jsx

@@ -6,6 +6,7 @@ import BuildStamp from './components/ui/BuildStamp'
 import ChatLauncher from './components/chat/ChatLauncher'
 
 import Login from './pages/Login'
+import Onboarding from './pages/Onboarding'
 import Dashboard from './pages/Dashboard'
 
 import Admin from './pages/Admin'
@@ -14,11 +15,11 @@ import Testen from './pages/Testen'
 import Leaderboard from './pages/Leaderboard'
 
 // Protected Route Wrapper
-const ProtectedRoute = ({ children, requireAdmin }) => {
+const ProtectedRoute = ({ children, requireAdmin, skipEnrollmentGate }) => {
   const { state, logout } = useApp()
-  
+
   if (state.isLoading) return <div className="p-8">Loading...</div>
-  
+
   if (!state.currentUser) {
     return <Navigate to="/login" replace />
   }
@@ -27,6 +28,14 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
     return <Navigate to="/" replace />
   }
 
+  // Block any non-enrolled user from reaching curriculum pages.
+  // Admins are exempt from the gate when they're heading to the admin panel.
+  const needsEnrollment = state.currentUser.enrollment_status !== 'active'
+  const isAdmin = state.currentUser.role === 'admin'
+  if (needsEnrollment && !skipEnrollmentGate && !(requireAdmin && isAdmin)) {
+    return <Navigate to="/onboarding" replace />
+  }
+
   return (
     <div className="min-h-screen bg-bg text-fg font-sans flex flex-col pb-16 md:pb-0">
       {/* Top Navigation Bar */}
@@ -92,6 +101,7 @@ function App() {
     <>
       <Routes>
         <Route path="/login" element={<Login />} />
+        <Route path="/onboarding" element={<Onboarding />} />
         <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
         <Route path="/learn" element={<ProtectedRoute><Leren /></ProtectedRoute>} />
         <Route path="/test" element={<ProtectedRoute><Testen /></ProtectedRoute>} />