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/dev/scheduling-test/page.tsx

@@ -38,7 +38,7 @@ export default async function SchedulingTestPage() {
 
   if (!customer) {
     return (
-      <div className="p-8 text-sm text-red-500">
+      <div className="text-danger p-8 text-sm">
         No seeded customer found — run <code>npm run prisma:seed</code> first.
       </div>
     );
@@ -47,7 +47,12 @@ export default async function SchedulingTestPage() {
   return (
     <SchedulingTestClient
       business={business}
-      services={services.map((s) => ({ id: s.id, name: s.name, durationMinutes: s.durationMinutes, price: s.price.toString() }))}
+      services={services.map((s) => ({
+        id: s.id,
+        name: s.name,
+        durationMinutes: s.durationMinutes,
+        price: s.price.toString(),
+      }))}
       staff={staff.map((s) => ({ id: s.id, name: s.user.name ?? "Staff member" }))}
       customerId={customer.id}
     />

src/app/dev/scheduling-test/scheduling-test-client.tsx

@@ -42,8 +42,19 @@ interface TimeSlot {
   staffOptions: string[];
 }
 
+/**
+ * Local calendar-date components, not `.toISOString().slice(0, 10)` — that
+ * converts to UTC first, which silently shifts the date back a day for
+ * anyone in a timezone ahead of UTC (e.g. the business's own Europe/London
+ * during BST). `date` here is always local midnight from MonthCalendar's
+ * own `new Date(year, month, day)`, so reading the local parts back out is
+ * the correct inverse.
+ */
 function toYMD(date: Date): string {
-  return date.toISOString().slice(0, 10);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
 }
 
 const EMPTY_SET: Set<string> = new Set();