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/components/navigation/bottom-nav.tsx

@@ -58,30 +58,35 @@ export function BottomNav({ items, variant = "customer" }: BottomNavProps) {
     <nav
       aria-label="Primary"
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 flex items-center justify-between border-t px-5 py-2",
+        "fixed inset-x-0 bottom-0 z-50 border-t px-5 py-2",
         "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
-        isStaff ? "border-white/5 bg-[#0c0c0c] text-gray-400" : "border-line bg-white text-muted",
+        isStaff ? "border-white/5 bg-[#0c0c0c] text-gray-400" : "border-line text-muted bg-white",
       )}
     >
-      {items.map(({ href, label, icon }) => {
-        const Icon = ICON_MAP[icon];
-        const active = pathname === href || pathname.startsWith(`${href}/`);
-        return (
-          <Link
-            key={href}
-            href={href}
-            aria-current={active ? "page" : undefined}
-            className={cn(
-              "flex flex-col items-center gap-1 rounded-lg px-3 py-1 transition-colors",
-              active ? (isStaff ? "text-white" : "text-ink") : "hover:text-ink",
-              isStaff && !active && "hover:text-white",
-            )}
-          >
-            <Icon className="h-5 w-5" aria-hidden="true" />
-            <span className="text-[10px] font-bold uppercase tracking-widest">{label}</span>
-          </Link>
-        );
-      })}
+      {/* The bar itself stays edge-to-edge (matches the booking flow's fixed
+          action bars); only the items inside are centered/width-capped so
+          they don't stretch out unreadably on a wide desktop viewport. */}
+      <div className="mx-auto flex w-full max-w-2xl items-center justify-between">
+        {items.map(({ href, label, icon }) => {
+          const Icon = ICON_MAP[icon];
+          const active = pathname === href || pathname.startsWith(`${href}/`);
+          return (
+            <Link
+              key={href}
+              href={href}
+              aria-current={active ? "page" : undefined}
+              className={cn(
+                "flex flex-col items-center gap-1 rounded-lg px-3 py-1 transition-colors",
+                active ? (isStaff ? "text-white" : "text-ink") : "hover:text-ink",
+                isStaff && !active && "hover:text-white",
+              )}
+            >
+              <Icon className="h-5 w-5" aria-hidden="true" />
+              <span className="text-[10px] font-bold tracking-widest uppercase">{label}</span>
+            </Link>
+          );
+        })}
+      </div>
     </nav>
   );
 }