Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/protected-layout.tsx

@@ -0,0 +1,29 @@
+import { useEffect, type ReactNode } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useAuth } from "@/lib/auth";
+import { AppShell } from "@/components/app-shell";
+import { Loader2 } from "lucide-react";
+
+export function ProtectedLayout({ children, adminOnly }: { children: ReactNode; adminOnly?: boolean }) {
+  const { loading, session, isAdmin } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (loading) return;
+    if (!session) {
+      navigate({ to: "/login" });
+    } else if (adminOnly && !isAdmin) {
+      navigate({ to: "/" });
+    }
+  }, [loading, session, isAdmin, adminOnly, navigate]);
+
+  if (loading || !session || (adminOnly && !isAdmin)) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return <AppShell>{children}</AppShell>;
+}