auth.js magic-link login + protected admin shell with bookings list

src/app/admin/layout.tsx

@@ -0,0 +1,66 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { auth, signOut } from "@/auth";
+
+export const dynamic = "force-dynamic";
+
+async function logout() {
+  "use server";
+  await signOut({ redirectTo: "/" });
+}
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+  if (!session?.user) redirect("/login");
+  if (session.user.role !== "ADMIN") {
+    return (
+      <main className="mx-auto flex min-h-full max-w-md flex-col items-center justify-center gap-4 p-8 text-center">
+        <h1 className="text-2xl font-semibold tracking-tight">Not authorized</h1>
+        <p className="text-sm text-zinc-600 dark:text-zinc-400">
+          Your account doesn&apos;t have admin access.
+        </p>
+        <form action={logout}>
+          <button
+            type="submit"
+            className="rounded-md border border-zinc-300 px-3 py-1.5 text-sm dark:border-zinc-700"
+          >
+            Sign out
+          </button>
+        </form>
+      </main>
+    );
+  }
+
+  return (
+    <div className="flex min-h-full flex-col">
+      <header className="flex items-center justify-between border-b border-zinc-200 bg-white px-6 py-3 dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="flex items-center gap-6">
+          <Link href="/admin" className="text-sm font-semibold tracking-tight">
+            TouchBase
+          </Link>
+          <nav className="flex items-center gap-4 text-sm text-zinc-600 dark:text-zinc-400">
+            <Link href="/admin/bookings" className="hover:text-zinc-900 dark:hover:text-zinc-100">
+              Bookings
+            </Link>
+          </nav>
+        </div>
+        <div className="flex items-center gap-3 text-sm text-zinc-600 dark:text-zinc-400">
+          <span>{session.user.email}</span>
+          <form action={logout}>
+            <button
+              type="submit"
+              className="rounded-md border border-zinc-300 px-2.5 py-1 text-xs hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-900"
+            >
+              Sign out
+            </button>
+          </form>
+        </div>
+      </header>
+      <main className="flex-1 p-6">{children}</main>
+    </div>
+  );
+}