Phase 4

Seed data extended with a second barber (different hours/services), a beard-trim service + category, breaks, time off, a guest customer, and appointments in all three key states — verified against a live throwaway Postgres.
14 new integration tests (38 total with Phase 3's) covering guest/authenticated booking, any-barber assignment, slot-conflict handling, ownership enforcement, guest-data isolation, and book-again repricing.
Playwright E2E suite for the 6 required customer journeys, with its own global-setup.ts that migrates and seeds a database automatically.
Full verification pass, which caught and fixed three real bugs along the way (not just test-workarounds):
A date off-by-one bug in the calendar picker that made real weekdays show as closed for anyone in a UTC+ timezone (including the business's own).
A dialog that could vanish mid-confirmation on cancellation, before the customer could read the late-cancellation notice.
A silent test-cleanup leak in the Phase 3 fixtures that had been leaking stray businesses since Phase 3.
Plus a baseline desktop-responsive fix (centered max-w-2xl columns) across Home/Appointments/Settings/booking flow, since desktop had been effectively unstyled.
Final state: 90 unit tests, 38 integration tests, and all 6 E2E journeys passing together on a fresh database; clean tsc, eslint, and next build. Full writeup with routes, security model, guest-matching rules, known limitations, and what to check before Phase 5 is in docs/phase-4-summary.md.

src/app/(customer)/settings/page.tsx

@@ -1,24 +1,56 @@
 import type { Metadata } from "next";
+import { LogIn } from "lucide-react";
+import Link from "next/link";
 import { auth } from "@/auth";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/feedback/empty-state";
 import { ProfileCard } from "@/components/ui/profile-card";
+import { prisma } from "@/lib/db/prisma";
 import { SignOutButton } from "@/features/auth/components/sign-out-button";
 
 export const metadata: Metadata = { title: "Settings" };
+export const dynamic = "force-dynamic";
 
 export default async function CustomerSettingsPage() {
   const session = await auth();
 
+  if (!session?.user) {
+    return (
+      <div className="mx-auto max-w-2xl px-6 pt-12">
+        <h1 className="mb-6 text-2xl font-bold tracking-tight">Settings</h1>
+        <EmptyState
+          icon={LogIn}
+          title="Sign in to manage your account"
+          description="Save your details, track loyalty rewards, and manage your bookings."
+          action={
+            <Button asChild>
+              <Link href="/sign-in?callbackUrl=/settings">Sign In</Link>
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
+
+  const customerProfile = await prisma.customerProfile.findUnique({
+    where: { userId: session.user.id },
+  });
+
   return (
-    <div className="space-y-6 px-6 pt-12">
+    <div className="mx-auto max-w-2xl space-y-6 px-6 pt-12">
       <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
       <ProfileCard
-        name={session?.user?.name ?? "Signed-in customer"}
-        meta={session?.user?.email}
-        avatarUrl={session?.user?.image ?? undefined}
+        name={
+          customerProfile
+            ? `${customerProfile.firstName} ${customerProfile.lastName}`
+            : (session.user.name ?? "Signed-in customer")
+        }
+        meta={customerProfile?.email ?? session.user.email}
+        avatarUrl={session.user.image ?? undefined}
       />
-      <p className="text-sm text-muted">
+      <p className="text-muted text-sm">
         Preferred barber, loyalty card, and notification preferences are designed in
-        <code> templates/10, 11, 35</code> and land in later phases.
+        <code> templates/10, 11, 35</code> and land in a later phase.
       </p>
       <SignOutButton />
     </div>