@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/restaurant/app/dashboard/dashboard-client.tsx

@@ -3,6 +3,9 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { useAuth } from "@pylonsync/client";
+import { Check, LogOut, MapPin, X } from "lucide-react";
+import { siteConfig } from "@/lib/site.config";
+import { localDateKey } from "@/lib/slots";
 import type { ReservationRow, OwnerReservationsResult } from "@/lib/reservation";
 
 // The owner's live reservations dashboard. Liveness rides the SAME public
@@ -18,6 +21,7 @@ export function ReservationsDashboard({ userEmail }: { userEmail: string }) {
   const [denied, setDenied] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
+  const [day, setDay] = useState<string | null>(null);
 
   async function load() {
     try {
@@ -33,6 +37,12 @@ export function ReservationsDashboard({ userEmail }: { userEmail: string }) {
     }
   }
 
+  // In `pylon dev` an empty book gets demo reservations (functions/seedDemo.ts).
+  // On a deploy the call returns without writing.
+  useEffect(() => {
+    void callFn("seedDemo", {}).catch(() => {});
+  }, []);
+
   useEffect(() => {
     void load();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -48,178 +58,297 @@ export function ReservationsDashboard({ userEmail }: { userEmail: string }) {
     }
   }
 
+  const nowMs = Date.now();
+  // The next 14 open days, each with its reservations.
+  const days = useMemo(() => {
+    const cfg = siteConfig.reservations;
+    const byDay = new Map<string, ReservationRow[]>();
+    for (const r of reservations ?? []) {
+      const key = dayKey(r.startsAt);
+      const list = byDay.get(key) ?? [];
+      list.push(r);
+      byDay.set(key, list);
+    }
+    const out: { key: string; rows: ReservationRow[] }[] = [];
+    for (let i = 0; i < 21 && out.length < 14; i++) {
+      const key = localDateKey(i, nowMs);
+      const [y, m, d] = key.split("-").map(Number);
+      if (!cfg.hours[new Date(y, m - 1, d).getDay()]) continue;
+      const rows = (byDay.get(key) ?? []).sort((a, b) => (a.startsAt < b.startsAt ? -1 : 1));
+      out.push({ key, rows });
+    }
+    return out;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reservations]);
+
   if (denied) return <OwnerOnly email={userEmail} />;
   if (error) {
-    return <div className="rounded-xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">{error}</div>;
+    return <div className="rounded-lg border border-brand/40 bg-brand/10 px-5 py-4 text-sm text-[var(--cream)]">{error}</div>;
   }
   if (!reservations) return <Skeleton />;
 
-  const nowMs = Date.now();
   const active = reservations.filter((r) => r.status !== "cancelled");
   const upcoming = active.filter((r) => Date.parse(r.startsAt) >= nowMs - 3_600_000);
-  const todayKey = new Date().toLocaleDateString();
-  const todayCount = upcoming.filter((r) => new Date(r.startsAt).toLocaleDateString() === todayKey).length;
-  const covers = upcoming.reduce((sum, r) => sum + (r.partySize || 0), 0);
+  const todayKey = localDateKey(0, nowMs);
+  // Every active table today, seated or not, so the stat matches the day chip.
+  const tonight = active.filter((r) => dayKey(r.startsAt) === todayKey);
+  const weekEnd = nowMs + 7 * 86_400_000;
+  const weekCovers = upcoming
+    .filter((r) => Date.parse(r.startsAt) < weekEnd)
+    .reduce((sum, r) => sum + (r.partySize || 0), 0);
   const pendingCount = upcoming.filter((r) => r.status === "pending").length;
 
+  const selected = days.find((d) => d.key === day) ?? days[0];
+
   return (
-    <div className="space-y-8">
-      <div>
-        <h1 className="text-xl font-semibold tracking-tight">Reservations</h1>
-        <p className="mt-1 text-sm text-zinc-500">
-          Live — new reservations appear the moment they happen; cancelling frees the table on the
-          site instantly.
+    <div className="space-y-10">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 className="font-display text-[2.75rem] font-medium leading-none tracking-[-0.01em] sm:text-[3.5rem]">
+            Reservations
+          </h1>
+          <p className="mt-3 max-w-lg text-[15px] leading-relaxed text-[var(--cream-2)]">
+            New reservations appear here as guests book. Cancelling one frees the table on the
+            site right away.
+          </p>
+        </div>
+        <p className="flex items-center gap-2 text-[13px] text-[var(--cream-2)]">
+          <span className="relative flex size-2">
+            <span className="absolute inline-flex size-2 animate-ping rounded-full bg-brand/60" />
+            <span className="relative inline-flex size-2 rounded-full bg-brand" />
+          </span>
+          Live
         </p>
       </div>
 
-      <div className="grid gap-4 sm:grid-cols-4">
-        <Stat label="Upcoming" value={upcoming.length} />
-        <Stat label="Today" value={todayCount} />
-        <Stat label="Covers" value={covers} />
-        <Stat label="Awaiting confirm" value={pendingCount} />
-      </div>
+      <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-[6px] border border-white/10 bg-white/10 sm:grid-cols-4">
+        <Stat label="Tonight" value={`${tonight.length}`} note={`${tonight.reduce((n, r) => n + r.partySize, 0)} covers`} />
+        <Stat label="Covers, next 7 days" value={weekCovers.toLocaleString("en-US")} />
+        <Stat label="Upcoming" value={upcoming.length.toLocaleString("en-US")} />
+        <Stat label="To confirm" value={`${pendingCount}`} accent={pendingCount > 0} />
+      </dl>
+
+      <section>
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {days.map((d) => {
+            const isOn = d.key === selected?.key;
+            const covers = d.rows.filter((r) => r.status !== "cancelled").reduce((n, r) => n + r.partySize, 0);
+            return (
+              <button
+                key={d.key}
+                type="button"
+                onClick={() => setDay(d.key)}
+                aria-pressed={isOn}
+                className={
+                  "flex shrink-0 flex-col items-start whitespace-nowrap rounded-[6px] border px-3.5 py-2.5 text-left transition-colors " +
+                  (isOn
+                    ? "border-brand bg-brand text-white"
+                    : "border-white/10 bg-[var(--ink-2)] text-[var(--cream)] hover:border-white/30")
+                }
+              >
+                <span className={"text-[12px] " + (isOn ? "text-white/80" : "text-[var(--cream-2)]")}>
+                  {d.key === todayKey ? "Tonight" : weekday(d.key)}
+                </span>
+                <span className="font-display text-[20px] leading-tight">{monthDay(d.key)}</span>
+                <span className={"mt-1 text-[12px] tabular-nums " + (isOn ? "text-white/80" : "text-[var(--cream-2)]")}>
+                  {covers} covers
+                </span>
+              </button>
+            );
+          })}
+        </div>
 
-      <UpcomingList reservations={upcoming} busyId={busyId} onAct={act} />
+        {selected ? (
+          <ServiceSheet rows={selected.rows} busyId={busyId} onAct={act} />
+        ) : null}
+      </section>
+
+      {!siteConfig.location.mapEmbedUrl ? <MapHint /> : null}
     </div>
   );
 }
 
-function Stat({ label, value }: { label: string; value: number }) {
+function dayKey(iso: string): string {
+  const d = new Date(iso);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function keyDate(key: string): Date {
+  const [y, m, d] = key.split("-").map(Number);
+  return new Date(y, m - 1, d);
+}
+function weekday(key: string) {
+  return keyDate(key).toLocaleDateString("en-US", { weekday: "short" });
+}
+function monthDay(key: string) {
+  return keyDate(key).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function timeOf(iso: string) {
+  return new Date(iso).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+}
+
+function Stat({ label, value, note, accent }: { label: string; value: string; note?: string; accent?: boolean }) {
   return (
-    <div className="rounded-xl border border-zinc-200 bg-white p-4">
-      <div className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">{label}</div>
-      <div className="mt-1 text-2xl font-semibold tabular-nums text-zinc-900">{value}</div>
+    <div className="bg-[var(--ink)] px-4 py-4 sm:px-5">
+      <dt className="text-[12px] text-[var(--cream-2)]">{label}</dt>
+      <dd className="mt-1.5 flex items-baseline gap-2">
+        <span className={"font-display text-[2.25rem] leading-none tabular-nums " + (accent ? "text-brand" : "")}>
+          {value}
+        </span>
+        {note ? <span className="text-[12px] text-[var(--cream-2)]">{note}</span> : null}
+      </dd>
     </div>
   );
 }
 
-function UpcomingList({
-  reservations,
+// One day's book, grouped by seating time.
+function ServiceSheet({
+  rows,
   busyId,
   onAct,
 }: {
-  reservations: ReservationRow[];
+  rows: ReservationRow[];
   busyId: string | null;
   onAct: (id: string, fn: "confirmReservation" | "cancelReservation") => void;
 }) {
-  const groups = useMemo(() => {
+  const seatings = useMemo(() => {
     const m = new Map<string, ReservationRow[]>();
-    for (const r of reservations) {
-      const key = new Date(r.startsAt).toLocaleDateString(undefined, {
-        weekday: "long",
-        month: "short",
-        day: "numeric",
-      });
-      const arr = m.get(key) ?? [];
-      arr.push(r);
-      m.set(key, arr);
+    for (const r of rows) {
+      const list = m.get(r.startsAt) ?? [];
+      list.push(r);
+      m.set(r.startsAt, list);
     }
     return Array.from(m.entries());
-  }, [reservations]);
+  }, [rows]);
 
-  if (reservations.length === 0) {
+  if (rows.length === 0) {
     return (
-      <div className="rounded-xl border border-dashed border-zinc-300 p-10 text-center text-sm text-zinc-500">
-        No upcoming reservations yet. Share your site — new reservations land here live.
+      <div className="mt-4 rounded-[6px] border border-dashed border-white/15 p-10 text-center text-[15px] text-[var(--cream-2)]">
+        No reservations for this day yet.
       </div>
     );
   }
 
   return (
-    <div className="space-y-6">
-      {groups.map(([day, items]) => (
-        <div key={day}>
-          <h2 className="mb-2 text-[13px] font-semibold text-zinc-900">{day}</h2>
-          <div className="overflow-hidden rounded-xl border border-zinc-200">
-            {items.map((r, i) => (
-              <Item key={r.id} r={r} busy={busyId === r.id} onAct={onAct} last={i === items.length - 1} />
-            ))}
+    <div className="mt-4 overflow-hidden rounded-[6px] border border-white/10">
+      {seatings.map(([startsAt, list]) => (
+        <div key={startsAt} className="grid border-b border-white/10 last:border-b-0 sm:grid-cols-[7rem_1fr]">
+          <div className="border-white/10 bg-[var(--ink-2)] px-4 py-3 sm:border-r">
+            <div className="font-display text-[20px] leading-none">{timeOf(startsAt)}</div>
+            <div className="mt-1 text-[12px] text-[var(--cream-2)]">
+              {list.filter((r) => r.status !== "cancelled").length}/{siteConfig.reservations.tablesPerSlot} tables
+            </div>
           </div>
+          <ul className="divide-y divide-white/10">
+            {list.map((r) => (
+              <Row key={r.id} r={r} busy={busyId === r.id} onAct={onAct} />
+            ))}
+          </ul>
         </div>
       ))}
     </div>
   );
 }
 
-function Item({
+function Row({
   r,
   busy,
   onAct,
-  last,
 }: {
   r: ReservationRow;
   busy: boolean;
   onAct: (id: string, fn: "confirmReservation" | "cancelReservation") => void;
-  last: boolean;
 }) {
+  const cancelled = r.status === "cancelled";
+  const past = Date.parse(r.startsAt) < Date.now() - 3_600_000;
   return (
-    <div className={"flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 " + (last ? "" : "border-b border-zinc-100")}>
-      <div className="w-20 shrink-0 text-[14px] font-semibold tabular-nums text-zinc-900">
-        {new Date(r.startsAt).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}
-      </div>
+    <li className={"flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 " + (cancelled ? "opacity-50" : "")}>
+      <span
+        aria-label={`Party of ${r.partySize}`}
+        className="flex size-9 shrink-0 items-center justify-center rounded-full border border-white/15 font-display text-[17px] tabular-nums"
+      >
+        {r.partySize}
+      </span>
       <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          <span className="text-[14px] font-medium text-zinc-900">{r.customerName}</span>
-          <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-medium text-zinc-600">
-            party of {r.partySize}
-          </span>
-          <StatusBadge status={r.status} />
+        <div className="flex flex-wrap items-center gap-2">
+          <span className={"text-[15px] font-medium " + (cancelled ? "line-through" : "")}>{r.customerName}</span>
+          <StatusTag status={r.status} />
         </div>
-        <div className="truncate text-[12.5px] text-zinc-500">
-          {r.customerEmail}
-          {r.customerPhone ? ` · ${r.customerPhone}` : ""}
-          {r.notes ? ` · “${r.notes}”` : ""}
+        <div className="mt-0.5 truncate text-[13px] text-[var(--cream-2)]">
+          {r.notes ? <span className="italic text-[var(--cream)]">{r.notes} · </span> : null}
+          {r.customerPhone ?? r.customerEmail}
         </div>
       </div>
-      <div className="flex items-center gap-2">
-        {r.status === "pending" ? (
+      {!cancelled && !past ? (
+        <div className="flex items-center gap-2">
+          {r.status === "pending" ? (
+            <button
+              type="button"
+              disabled={busy}
+              onClick={() => onAct(r.id, "confirmReservation")}
+              className="inline-flex h-8 items-center gap-1.5 rounded-full bg-brand px-3.5 text-[13px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+            >
+              <Check aria-hidden className="size-3.5" />
+              Confirm
+            </button>
+          ) : null}
           <button
             type="button"
             disabled={busy}
-            onClick={() => onAct(r.id, "confirmReservation")}
-            className="rounded-md bg-zinc-900 px-3 py-1.5 text-[12.5px] font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-50"
+            onClick={() => onAct(r.id, "cancelReservation")}
+            className="inline-flex h-8 items-center gap-1.5 rounded-full border border-white/20 px-3.5 text-[13px] font-medium text-[var(--cream-2)] transition-colors hover:border-white/40 hover:text-[var(--cream)] disabled:opacity-50"
           >
-            {busy ? "…" : "Confirm"}
+            <X aria-hidden className="size-3.5" />
+            Cancel
           </button>
-        ) : null}
-        <button
-          type="button"
-          disabled={busy}
-          onClick={() => onAct(r.id, "cancelReservation")}
-          className="rounded-md border border-zinc-300 px-3 py-1.5 text-[12.5px] font-medium text-zinc-600 transition-colors hover:border-red-300 hover:text-red-600 disabled:opacity-50"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
+        </div>
+      ) : null}
+    </li>
   );
 }
 
-function StatusBadge({ status }: { status: string }) {
-  const tone =
-    status === "confirmed"
-      ? "bg-green-50 text-green-700"
-      : status === "cancelled"
-        ? "bg-zinc-100 text-zinc-500"
-        : "bg-amber-50 text-amber-700";
-  return <span className={"rounded-full px-2 py-0.5 text-[10px] font-medium capitalize " + tone}>{status}</span>;
+function StatusTag({ status }: { status: string }) {
+  if (status === "confirmed") return null;
+  const label = status === "pending" ? "To confirm" : "Cancelled";
+  const tone = status === "pending" ? "bg-brand/20 text-[#f3b58c]" : "bg-white/10 text-[var(--cream-2)]";
+  return <span className={"rounded-full px-2 py-0.5 text-[11px] font-medium " + tone}>{label}</span>;
 }
 
+// Setup notes for the owner live here, not on the public site.
+function MapHint() {
+  return (
+    <aside className="flex gap-3 rounded-[6px] border border-white/10 bg-[var(--ink-2)] p-4 text-[13.5px] leading-relaxed text-[var(--cream-2)]">
+      <MapPin aria-hidden className="mt-0.5 size-4 shrink-0 text-[var(--cream)]" />
+      <p>
+        Your site shows the week&apos;s hours next to the address. To show a map there instead,
+        paste a Google Maps embed URL into{" "}
+        <code className="rounded bg-black/30 px-1 text-[12.5px] text-[var(--cream)]">location.mapEmbedUrl</code> in{" "}
+        <code className="rounded bg-black/30 px-1 text-[12.5px] text-[var(--cream)]">lib/site.config.ts</code>.
+      </p>
+    </aside>
+  );
+}
+
+/* --------------------------- owner-only gate -------------------------- */
+
 function OwnerOnly({ email }: { email: string }) {
   return (
-    <div className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center">
-      <h1 className="text-lg font-semibold">This dashboard is owner-only</h1>
-      <p className="mx-auto mt-2 max-w-md text-sm text-zinc-500">
-        You&apos;re signed in as <span className="font-medium text-zinc-700">{email || "this account"}</span>.
-        Only the owner can see reservations. Set{" "}
-        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">PYLON_OWNER_EMAIL={email || "you@restaurant.com"}</code>{" "}
-        in your <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">.env</code>, restart, and reload —
-        or sign in with the owner account.
+    <div className="rounded-[6px] border border-dashed border-white/15 px-6 py-12 text-center">
+      <h1 className="font-display text-[2rem] leading-tight">This dashboard is owner-only</h1>
+      <p className="mx-auto mt-3 max-w-md text-[14px] leading-relaxed text-[var(--cream-2)]">
+        You are signed in as <span className="text-[var(--cream)]">{email || "this account"}</span>.
+        Only the restaurant owner can see reservations. Set{" "}
+        <code className="rounded bg-black/30 px-1.5 py-0.5 text-[12px] text-[var(--cream)]">
+          PYLON_OWNER_EMAIL={email || "you@yourrestaurant.com"}
+        </code>{" "}
+        in <code className="rounded bg-black/30 px-1.5 py-0.5 text-[12px] text-[var(--cream)]">.env</code>,
+        restart, and reload. Or sign in with the owner account.
       </p>
     </div>
   );
 }
 
+/* ----------------------------- user menu ------------------------------ */
+
 export function UserMenu({ email }: { email: string }) {
   const { signOut } = useAuth();
   const initial = (email.trim()[0] || "?").toUpperCase();
@@ -229,18 +358,22 @@ export function UserMenu({ email }: { email: string }) {
   }
   return (
     <details className="group relative">
-      <summary className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-zinc-900 text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden">
+      <summary
+        aria-label="Account"
+        className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-brand text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden"
+      >
         {initial}
       </summary>
-      <div className="absolute right-0 top-full z-40 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white py-1 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.25)]">
-        <div className="border-b border-zinc-100 px-3 py-2">
-          <div className="truncate text-[13px] font-medium text-zinc-900">{email || "Signed in"}</div>
+      <div className="absolute right-0 top-full z-40 mt-2 w-60 overflow-hidden rounded-[6px] border border-white/10 bg-[var(--ink-2)] py-1 shadow-[0_24px_48px_-24px_rgba(0,0,0,0.8)]">
+        <div className="truncate border-b border-white/10 px-3 py-2.5 text-[13px] text-[var(--cream)]">
+          {email || "Signed in"}
         </div>
         <button
           type="button"
           onClick={onSignOut}
-          className="flex w-full items-center px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+          className="flex w-full items-center gap-2 px-3 py-2 text-left text-[13px] text-[var(--cream-2)] transition-colors hover:bg-white/5 hover:text-[var(--cream)]"
         >
+          <LogOut aria-hidden className="size-3.5" />
           Sign out
         </button>
       </div>
@@ -248,16 +381,15 @@ export function UserMenu({ email }: { email: string }) {
   );
 }
 
+/* ------------------------------ skeleton ------------------------------ */
+
 function Skeleton() {
   return (
-    <div className="space-y-8">
-      <div className="h-6 w-36 animate-pulse rounded bg-zinc-100" />
-      <div className="grid gap-4 sm:grid-cols-4">
-        {[0, 1, 2, 3].map((i) => (
-          <div key={i} className="h-20 animate-pulse rounded-xl bg-zinc-100" />
-        ))}
-      </div>
-      <div className="h-48 animate-pulse rounded-xl bg-zinc-100" />
+    <div className="space-y-10">
+      <div className="h-14 w-72 animate-pulse rounded bg-white/5" />
+      <div className="h-24 animate-pulse rounded-[6px] bg-white/5" />
+      <div className="h-20 animate-pulse rounded-[6px] bg-white/5" />
+      <div className="h-72 animate-pulse rounded-[6px] bg-white/5" />
     </div>
   );
 }

package/templates/restaurant/app/dashboard/page.tsx

@@ -1,5 +1,6 @@
 import React, { use } from "react";
 import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { ArrowUpRight } from "lucide-react";
 import { siteConfig } from "@/lib/site.config";
 import { UserMenu, ReservationsDashboard } from "./dashboard-client";
 
@@ -32,27 +33,26 @@ export default function DashboardPage({ auth, response, serverData }: PageProps)
 function Shell({ email, children }: { email: string; children: React.ReactNode }) {
   const { brand } = siteConfig;
   return (
-    <div className="flex min-h-screen flex-col bg-white text-zinc-900">
-      <header className="border-b border-zinc-200">
-        <div className="mx-auto flex h-14 max-w-4xl items-center justify-between px-6">
-          <div className="flex items-center gap-2">
-            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-              {brand.letter}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight">
-              {brand.name} <span className="text-zinc-400">/ reservations</span>
-            </span>
-          </div>
+    <div className="flex min-h-screen flex-col bg-[var(--ink)] text-[var(--cream)]">
+      <header className="sticky top-0 z-30 border-b border-white/10 bg-[var(--ink)]/90 backdrop-blur">
+        <div className="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-6">
+          <Link href="/" className="font-display text-[22px] tracking-tight">
+            {brand.name}
+          </Link>
           <div className="flex items-center gap-4">
-            <Link href="/" className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900">
-              View site ↗
+            <Link
+              href="/"
+              className="hidden items-center gap-1 text-[13px] font-medium text-[var(--cream-2)] transition-colors hover:text-[var(--cream)] sm:inline-flex"
+            >
+              View site
+              <ArrowUpRight aria-hidden className="size-3.5" />
             </Link>
             <UserMenu email={email} />
           </div>
         </div>
       </header>
       <main className="flex-1">
-        <div className="mx-auto max-w-4xl px-6 py-8">{children}</div>
+        <div className="mx-auto w-full max-w-5xl px-6 py-10 sm:py-12">{children}</div>
       </main>
     </div>
   );

package/templates/restaurant/app/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#151311"/>
+<path d="M32 10c9 10 14 18 14 26a14 14 0 0 1-28 0c0-8 5-16 14-26z" fill="#c2571a"/>
+<path d="M32 24v28" stroke="#151311" stroke-width="3.2" stroke-linecap="round"/>
+<path d="M32 38l-7-6M32 32l6-5" stroke="#151311" stroke-width="3" stroke-linecap="round"/></svg>

package/templates/restaurant/app/login/page.tsx

@@ -18,21 +18,21 @@ export default function LoginPage({ auth, response }: PageProps) {
   if (auth.user_id && !auth.user_id.startsWith("guest_")) response.redirect("/dashboard");
   const { brand } = siteConfig;
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12">
-      <div className="w-full max-w-[400px] rounded-2xl border border-zinc-200/70 p-8">
-        <Link href="/" className="inline-flex">
-          <span className="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-base font-bold text-white">
-            {brand.letter}
-          </span>
-        </Link>
-        <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
-          {brand.name} dashboard
-        </h1>
-        <p className="mt-1 text-[13px] text-zinc-500">
-          Sign in to manage your reservations.
-        </p>
-        <div className="mt-6">
-          <AuthForm />
+    <div className="flex min-h-screen flex-col bg-[var(--ink)] text-[var(--cream)]">
+      <div className="border-b border-white/10">
+        <div className="mx-auto flex h-16 w-full max-w-5xl items-center px-6">
+          <Link href="/" className="font-display text-[22px] tracking-tight">
+            {brand.name}
+          </Link>
+        </div>
+      </div>
+      <div className="flex flex-1 items-center justify-center px-6 py-16">
+        <div className="w-full max-w-[380px]">
+          <h1 className="font-display text-[2.5rem] font-medium leading-none">Owner sign in</h1>
+          <p className="mt-3 text-[15px] text-[var(--cream-2)]">Tonight&apos;s book, confirmations, and cancellations.</p>
+          <div className="mt-8 rounded-[6px] border border-white/10 bg-[var(--ink-2)] p-6">
+            <AuthForm />
+          </div>
         </div>
       </div>
     </div>

package/templates/restaurant/functions/seedDemo.ts

@@ -0,0 +1,44 @@
+import { mutation } from "@pylonsync/functions";
+import { demoDataEnabled, demoReservations } from "../lib/demo";
+import { siteConfig } from "../lib/site.config";
+
+// seedDemo — fill an empty reservation book with fictional tables in
+// development, so the public calendar and the owner dashboard show the same
+// reservations.
+//
+// The reservation widget calls this when it finds no reserved tables, and the
+// dashboard calls it once on load. It writes nothing unless demo data is on
+// (lib/demo.ts: PYLON_DEMO_DATA, else a `pylon dev` process), so `pylon start`,
+// Docker, and Pylon Cloud deploys do not get demo rows. It also writes nothing
+// once any Reservation exists, so it cannot mix demo rows into a real book. The
+// advisory lock stops two first visits from seeding twice.
+//
+// Each active reservation gets its ReservationSlot marker, the same pair
+// createReservation writes. Public because the first visitor in `pylon dev` is
+// anonymous. It returns only a flag, never a row.
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "public",
+  async handler(ctx) {
+    if (!demoDataEnabled(ctx.env)) return { seeded: false };
+
+    await ctx.db.advisoryLock("restaurant_seed_demo");
+    const existing = await ctx.db.unsafe.list("Reservation");
+    if (existing.length > 0) return { seeded: false };
+
+    for (const r of demoReservations(Date.now(), siteConfig)) {
+      const reservationId = await ctx.db.unsafe.insert("Reservation", {
+        startsAt: r.startsAt,
+        partySize: r.partySize,
+        customerName: r.customerName,
+        customerEmail: r.customerEmail,
+        customerPhone: r.customerPhone,
+        notes: r.notes,
+        status: r.status,
+        createdAt: r.createdAt,
+      });
+      if (r.status === "cancelled") continue;
+      await ctx.db.unsafe.insert("ReservationSlot", { startsAt: r.startsAt, reservationId });
+    }
+    return { seeded: true };
+  },
+});