Modified by www.SourceFiles.app

src/routes/_authenticated/route.tsx

@@ -0,0 +1,78 @@
+import { createFileRoute, Link, Outlet, useNavigate, useRouterState } from "@tanstack/react-router";
+import { useAuth, highestRole } from "@/hooks/use-auth";
+import { supabase } from "@/integrations/supabase/client";
+import { Button } from "@/components/ui/button";
+import {
+  GraduationCap, LayoutDashboard, Users, ClipboardCheck, Receipt,
+  MessageSquare, FileText, CalendarDays, Settings, LogOut, Loader2, BookOpen, ClipboardList, Printer, Mail
+} from "lucide-react";
+import { useEffect } from "react";
+
+export const Route = createFileRoute("/_authenticated")({
+  ssr: false,
+  component: ProtectedLayout,
+});
+
+function ProtectedLayout() {
+  const { user, roles, loading } = useAuth();
+  const navigate = useNavigate();
+  const path = useRouterState({ select: (s) => s.location.pathname });
+
+  useEffect(() => {
+    if (!loading && !user) navigate({ to: "/auth" });
+  }, [loading, user, navigate]);
+
+  if (loading || !user) {
+    return <div className="min-h-screen flex items-center justify-center"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>;
+  }
+
+  const role = highestRole(roles);
+  const isAdmin = roles.includes("admin");
+
+  const nav = [
+    { to: "/dashboard", label: "Dashboard", icon: LayoutDashboard, show: true },
+    { to: "/students", label: "Students", icon: Users, show: true },
+    { to: "/classes", label: "Classes", icon: BookOpen, show: isAdmin || roles.includes("teacher") },
+    { to: "/attendance", label: "Attendance", icon: ClipboardCheck, show: isAdmin || roles.includes("teacher") },
+    { to: "/plans", label: "504 / IEP", icon: ClipboardList, show: isAdmin || roles.includes("teacher") },
+    { to: "/reports", label: "Reports", icon: Printer, show: isAdmin || roles.includes("teacher") },
+    { to: "/ledger", label: "Tuition", icon: Receipt, show: true },
+    { to: "/messages", label: "Messages", icon: MessageSquare, show: true },
+    { to: "/mail", label: "Mail", icon: Mail, show: isAdmin || roles.includes("teacher") },
+    { to: "/forms", label: "Forms", icon: FileText, show: true },
+    { to: "/calendar", label: "Calendar", icon: CalendarDays, show: true },
+    { to: "/admin", label: "Admin", icon: Settings, show: isAdmin },
+  ];
+
+  const signOut = async () => {
+    await supabase.auth.signOut();
+    navigate({ to: "/auth" });
+  };
+
+  return (
+    <div className="min-h-screen bg-muted/20 flex">
+      <aside className="w-60 bg-card border-r flex flex-col no-print">
+        <div className="h-16 border-b flex items-center px-4">
+          <img src="/bayside-logo.png" alt="Bayside Academy" className="h-9 w-auto" />
+        </div>
+        <nav className="p-3 flex-1 space-y-1">
+          {nav.filter((n) => n.show).map((n) => {
+            const active = path.startsWith(n.to);
+            return (
+              <Link key={n.to} to={n.to} className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm ${active ? "bg-primary text-primary-foreground" : "hover:bg-muted"}`}>
+                <n.icon className="h-4 w-4" /> {n.label}
+              </Link>
+            );
+          })}
+        </nav>
+        <div className="p-3 border-t">
+          <div className="text-xs text-muted-foreground mb-2 px-1 truncate">{user.email}<br/><span className="capitalize">{role ?? "no role"}</span></div>
+          <Button variant="ghost" size="sm" className="w-full justify-start" onClick={signOut}>
+            <LogOut className="h-4 w-4 mr-2" /> Sign out
+          </Button>
+        </div>
+      </aside>
+      <main className="flex-1 overflow-auto"><Outlet /></main>
+    </div>
+  );
+}