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/appointments/[id]/reschedule/layout.tsx

@@ -0,0 +1,13 @@
+/**
+ * Deliberately OUTSIDE the (customer) route group, same reasoning as
+ * src/app/book/layout.tsx: this page reuses BarberDateTimePicker, which
+ * renders its own fixed bottom action bar. Nested under (customer)'s
+ * persistent BottomNav, the two fixed-bottom elements would overlap —
+ * the nav (z-50) sits above the picker's "Confirm Reschedule" bar (z-40)
+ * and swallows clicks meant for it. Hiding the bottom nav here avoids
+ * that collision, matching the booking flow's own "may temporarily hide
+ * the bottom navigation" allowance.
+ */
+export default function RescheduleLayout({ children }: { children: React.ReactNode }) {
+  return <div className="min-h-screen bg-stone">{children}</div>;
+}

src/app/appointments/[id]/reschedule/page.tsx

@@ -0,0 +1,76 @@
+import type { Metadata } from "next";
+import { notFound, redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { Card } from "@/components/ui/card";
+import { TopNav } from "@/components/navigation/top-nav";
+import { getPrimaryBusiness } from "@/lib/business/get-primary-business";
+import { prisma } from "@/lib/db/prisma";
+import { getAppointmentById } from "@/services/scheduling/appointment.service";
+import { assertCanAccessAppointment, PermissionDeniedError } from "@/features/booking/authorization";
+import { BarberDateTimePicker } from "@/features/booking/components/barber-date-time-picker";
+import { rescheduleCustomerAppointmentAction } from "@/features/booking/actions/customer-appointments";
+
+export const metadata: Metadata = { title: "Reschedule Appointment" };
+export const dynamic = "force-dynamic";
+
+const NON_RESCHEDULABLE = new Set(["COMPLETED", "CANCELLED", "NO_SHOW", "IN_PROGRESS"]);
+
+export default async function RescheduleAppointmentPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const appointment = await getAppointmentById(prisma, id);
+  if (!appointment) notFound();
+
+  const session = await auth();
+  try {
+    assertCanAccessAppointment(appointment, session?.user?.id);
+  } catch (error) {
+    if (error instanceof PermissionDeniedError) notFound();
+    throw error;
+  }
+
+  if (NON_RESCHEDULABLE.has(appointment.status)) {
+    redirect(`/appointments/${id}`);
+  }
+
+  const business = await getPrimaryBusiness();
+
+  async function handleContinue(selection: { staffId?: string; date: string; startAt: string }) {
+    "use server";
+    const result = await rescheduleCustomerAppointmentAction({
+      appointmentId: id,
+      staffId: selection.staffId,
+      startAt: selection.startAt,
+    });
+    if (result.success) {
+      redirect(`/appointments/${id}`);
+    }
+    return result;
+  }
+
+  return (
+    <div className="pb-6">
+      <TopNav title="Reschedule" onBack={true} sticky className="bg-stone" />
+
+      <Card className="mx-6 mt-4 flex items-center gap-3 p-4">
+        <div className="flex-1">
+          <p className="text-sm font-bold">{appointment.services.map((s) => s.service.name).join(" + ")} with {appointment.staff.user.name}</p>
+          <p className="text-xs text-muted">
+            Currently: {appointment.startAt.toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short", timeZone: business.timezone })} ·{" "}
+            {appointment.startAt.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", timeZone: business.timezone })}
+          </p>
+        </div>
+      </Card>
+
+      <div className="mt-4">
+        <BarberDateTimePicker
+          businessId={business.id}
+          businessTimezone={business.timezone}
+          serviceIds={appointment.services.map((s) => s.serviceId)}
+          initialStaffId={appointment.staffId}
+          onContinue={handleContinue}
+          continueLabel="Confirm Reschedule"
+        />
+      </div>
+    </div>
+  );
+}