feat: admin and event page setup

apps/web/src/routes/_protected/layout.tsx

@@ -61,10 +61,10 @@ function RouteComponent() {
 
       <AppShell.Navbar>
         <NavLink
-          label="Dashboard"
-          href="/dashboard"
+          label="Events Portal"
+          href="/portal"
           leftSection={<TablerLayoutCollage className="w-5 aspect-square" />}
-          active={pathname.startsWith("/dashboard")}
+          active={pathname.startsWith("/portal")}
         />
 
         <NavLink

apps/web/src/routes/_protected/dashboard.tsx → apps/web/src/routes/_protected/portal.tsx

@@ -2,7 +2,7 @@ import { Button } from "@/components/ui/Button";
 import { auth } from "@/lib/authClient";
 import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/_protected/dashboard")({
+export const Route = createFileRoute("/_protected/portal")({
   component: RouteComponent,
 });
 
@@ -18,8 +18,7 @@ function RouteComponent() {
 
   return (
     <div>
-      {/* {data.user.role === "admin" ? <Dashboard /> : <HackerDashboard />} */}
-      <p>Dashboard</p>
+      <p>Event Portal</p>
       <Button onClick={logout} color="danger">
         Logout
       </Button>

apps/web/src/routes/admin/events-management.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin/events-management")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/admin/events-management"!</div>;
+}

apps/web/src/routes/admin/layout.tsx

@@ -0,0 +1,123 @@
+import { AppShell } from "@/components/AppShell/AppShell";
+import { NavLink } from "@/components/AppShell/NavLink";
+import {
+  createFileRoute,
+  Outlet,
+  redirect,
+  useLocation,
+  useRouter,
+} from "@tanstack/react-router";
+import TablerDashboard from "~icons/tabler/dashboard";
+import TablerCalendarSearch from "~icons/tabler/calendar-search";
+import TablerUsers from "~icons/tabler/users";
+import TablerListDetails from "~icons/tabler/list-details";
+import TablerSettings2 from "~icons/tabler/settings-2";
+import { Button } from "@/components/ui/Button";
+
+export const Route = createFileRoute("/admin")({
+  beforeLoad: async ({ context }) => {
+    const { user, error } = await context.userQuery.promise;
+
+    if (!user && !user) {
+      console.log("You aren't authenticated, redirecting to login.");
+      throw redirect({
+        to: "/",
+        search: { redirect: location.pathname },
+      });
+    }
+
+    if (error) {
+      // TODO: Display a friendly error to the user?
+      console.error("Auth error in beforeLoad in layout.tsx:", error);
+      console.log(
+        "authentication error occurred while accessing protected page, redirecting to login.",
+      );
+      throw redirect({
+        to: "/",
+        search: { redirect: location.pathname },
+      });
+    }
+
+    // If not superuser
+    if (user.role !== "superuser") {
+      console.log("You aren't a superuser, redirecting to event portal.");
+      throw redirect({
+        to: "/portal",
+      });
+    }
+
+    if (location.pathname === "/admin") {
+      throw redirect({ to: "/admin/overview" });
+    }
+  },
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const pathname = useLocation({ select: (loc) => loc.pathname });
+  const router = useRouter();
+
+  return (
+    <AppShell>
+      <AppShell.Header>
+        <div className="w-full px-4 flex flex-row justify-between h-full items-center">
+          <h1 className=" text-2xl font-bold">Admin Portal</h1>
+
+          <div className="h-full flex items-center gap-4">
+            <Button
+              color="danger"
+              onPress={() => router.navigate({ to: "/portal" })}
+            >
+              Back
+            </Button>
+            <img
+              src="https://i.pinimg.com/736x/8b/d2/f6/8bd2f653f38322972e404925ab67294a.jpg"
+              className="h-5/8 aspect-square rounded-full"
+            />
+          </div>
+        </div>
+      </AppShell.Header>
+
+      <AppShell.Navbar>
+        <NavLink
+          label="Overview"
+          href="/admin/overview"
+          leftSection={<TablerDashboard className="w-5 aspect-square" />}
+          active={pathname.startsWith("/admin/overview")}
+        />
+
+        <NavLink
+          label="Events Management"
+          href="/admin/events-management"
+          leftSection={<TablerCalendarSearch className="w-5 aspect-square" />}
+          active={pathname.startsWith("/admin/events-management")}
+        />
+
+        <NavLink
+          label="Users Management"
+          href="/admin/users-management"
+          leftSection={<TablerUsers className="w-5 aspect-square" />}
+          active={pathname.startsWith("/admin/users-management")}
+        />
+
+        <NavLink
+          label="Platform Logs"
+          href="/admin/logs"
+          leftSection={<TablerListDetails className="w-5 aspect-square" />}
+          active={pathname.startsWith("/admin/logs")}
+        />
+
+        <NavLink
+          label="Platform Settings"
+          href="/admin/settings"
+          leftSection={<TablerSettings2 className="w-5 aspect-square" />}
+          active={pathname.startsWith("/admin/settings")}
+        />
+      </AppShell.Navbar>
+
+      <AppShell.Main>
+        <Outlet />
+      </AppShell.Main>
+    </AppShell>
+  );
+}

apps/web/src/routes/admin/logs.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin/logs")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/admin/logs"!</div>;
+}

apps/web/src/routes/admin/overview.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin/overview")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/admin/overview"!</div>;
+}

apps/web/src/routes/admin/settings.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin/settings")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/admin/settings"!</div>;
+}

apps/web/src/routes/admin/users-management.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin/users-management")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/admin/users-management"!</div>;
+}

apps/web/src/routes/events/$eventId/index.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/events/$eventId/")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { eventId } = Route.useParams();
+
+  return <div>This is the info page for {eventId}</div>;
+}

apps/web/src/routes/index.tsx

@@ -12,9 +12,9 @@ export const Route = createFileRoute("/")({
     console.log("Loaded user in beforeLoad:", user);
 
     if (user) {
-      console.log("User is already authenticated, redirecting to dashboard.");
+      console.log("User is already authenticated, redirecting to portal.");
       throw redirect({
-        to: "/dashboard",
+        to: "/portal",
       });
     }
   },