feat: Implement comprehensive course analytics, RBAC with roles and authentication, and dynamic passing thresholds.

web/experience/src/components/ProtectedRoute.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function ProtectedRoute({ children }: { children: React.ReactNode }) {
+    const { user, loading } = useAuth();
+    const router = useRouter();
+    const pathname = usePathname();
+
+    useEffect(() => {
+        if (!loading && !user && pathname !== "/auth/login") {
+            router.push("/auth/login");
+        }
+    }, [user, loading, router, pathname]);
+
+    if (loading) {
+        return (
+            <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+                <div className="w-12 h-12 border-4 border-indigo-500/20 border-t-indigo-500 rounded-full animate-spin"></div>
+            </div>
+        );
+    }
+
+    if (!user && pathname !== "/auth/login") {
+        return null;
+    }
+
+    return <>{children}</>;
+}