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

src/app/admin/bookings/page.tsx

@@ -0,0 +1,96 @@
+import { db } from "@/lib/db";
+
+export const metadata = { title: "Bookings — TouchBase" };
+export const dynamic = "force-dynamic";
+
+const TZ = process.env.APP_TZ ?? "America/Detroit";
+
+function formatLocal(d: Date): string {
+  return new Intl.DateTimeFormat("en-US", {
+    timeZone: TZ,
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(d);
+}
+
+export default async function BookingsPage() {
+  const now = new Date();
+  const bookings = await db.booking.findMany({
+    where: {
+      status: { in: ["HOLD", "CONFIRMED"] },
+      startsAt: { gte: now },
+    },
+    include: {
+      customer: { select: { name: true, email: true } },
+      service: { select: { name: true, durationMin: true } },
+      therapist: { include: { user: { select: { name: true } } } },
+      room: { select: { name: true } },
+    },
+    orderBy: { startsAt: "asc" },
+    take: 100,
+  });
+
+  return (
+    <div className="mx-auto max-w-5xl">
+      <div className="mb-4 flex items-baseline justify-between">
+        <h1 className="text-xl font-semibold tracking-tight">Upcoming bookings</h1>
+        <span className="text-sm text-zinc-500">{bookings.length} shown</span>
+      </div>
+      {bookings.length === 0 ? (
+        <p className="rounded-md border border-zinc-200 bg-white p-6 text-sm text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
+          No upcoming bookings.
+        </p>
+      ) : (
+        <div className="overflow-hidden rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+          <table className="w-full text-sm">
+            <thead className="bg-zinc-50 text-left text-xs uppercase tracking-wide text-zinc-500 dark:bg-zinc-900">
+              <tr>
+                <th className="px-4 py-2 font-medium">When</th>
+                <th className="px-4 py-2 font-medium">Customer</th>
+                <th className="px-4 py-2 font-medium">Service</th>
+                <th className="px-4 py-2 font-medium">Therapist</th>
+                <th className="px-4 py-2 font-medium">Room</th>
+                <th className="px-4 py-2 font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
+              {bookings.map((b) => (
+                <tr key={b.id}>
+                  <td className="px-4 py-2 whitespace-nowrap font-mono text-xs">
+                    {formatLocal(b.startsAt)}
+                  </td>
+                  <td className="px-4 py-2">
+                    <div>{b.customer.name}</div>
+                    <div className="text-xs text-zinc-500">{b.customer.email}</div>
+                  </td>
+                  <td className="px-4 py-2">
+                    {b.service.name}
+                    <div className="text-xs text-zinc-500">
+                      {b.service.durationMin}m
+                    </div>
+                  </td>
+                  <td className="px-4 py-2">{b.therapist.user.name}</td>
+                  <td className="px-4 py-2">{b.room.name}</td>
+                  <td className="px-4 py-2">
+                    <span
+                      className={
+                        b.status === "CONFIRMED"
+                          ? "rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800 dark:bg-green-900/40 dark:text-green-200"
+                          : "rounded-full bg-amber-100 px-2 py-0.5 text-xs text-amber-800 dark:bg-amber-900/40 dark:text-amber-200"
+                      }
+                    >
+                      {b.status}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}