touchbase/src/app/admin/bookings/page.tsx

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>
  );
}