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/features/auth/components/register-form.tsx

@@ -45,8 +45,18 @@ export function RegisterForm() {
   return (
     <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
       <div className="grid grid-cols-2 gap-4">
-        <Input label="First Name" placeholder="Alex" error={errors.firstName?.message} {...register("firstName")} />
-        <Input label="Last Name" placeholder="Chen" error={errors.lastName?.message} {...register("lastName")} />
+        <Input
+          label="First Name"
+          placeholder="Alex"
+          error={errors.firstName?.message}
+          {...register("firstName")}
+        />
+        <Input
+          label="Last Name"
+          placeholder="Chen"
+          error={errors.lastName?.message}
+          {...register("lastName")}
+        />
       </div>
       <Input
         label="Email Address"
@@ -78,23 +88,30 @@ export function RegisterForm() {
       />
 
       {formError && (
-        <p role="alert" className="text-sm font-medium text-red-500">
+        <p role="alert" className="text-danger text-sm font-medium">
           {formError}
         </p>
       )}
 
-      <p className="px-1 text-[10px] leading-relaxed text-muted">
-        By creating an account, you agree to our <a href="#" className="underline">Terms of Service</a> and{" "}
-        <a href="#" className="underline">Privacy Policy</a>.
+      <p className="text-muted px-1 text-[10px] leading-relaxed">
+        By creating an account, you agree to our{" "}
+        <a href="#" className="underline">
+          Terms of Service
+        </a>{" "}
+        and{" "}
+        <a href="#" className="underline">
+          Privacy Policy
+        </a>
+        .
       </p>
 
       <Button type="submit" className="mt-4 w-full" isLoading={isSubmitting}>
         Sign Up
       </Button>
 
-      <p className="mt-10 text-center text-sm text-muted">
+      <p className="text-muted mt-10 text-center text-sm">
         Already have an account?{" "}
-        <Link href="/sign-in" className="border-b border-ink font-bold text-ink">
+        <Link href="/sign-in" className="border-ink text-ink border-b font-bold">
           Log in
         </Link>
       </p>

src/features/auth/components/sign-in-form.tsx

@@ -60,7 +60,7 @@ export function SignInForm() {
             when that lands; no dead link to it here in the meantime. */}
 
         {formError && (
-          <p role="alert" className="text-sm font-medium text-red-500">
+          <p role="alert" className="text-danger text-sm font-medium">
             {formError}
           </p>
         )}
@@ -73,25 +73,25 @@ export function SignInForm() {
       <div className="mt-10">
         <div className="relative mb-8 flex items-center justify-center">
           <div className="absolute inset-0 flex items-center">
-            <div className="w-full border-t border-line" />
+            <div className="border-line w-full border-t" />
           </div>
-          <span className="relative bg-stone px-4 text-[10px] font-bold uppercase tracking-widest text-muted">
+          <span className="bg-stone text-muted relative px-4 text-[10px] font-bold tracking-widest uppercase">
             Or continue with
           </span>
         </div>
         <Button
           type="button"
           variant="secondary"
-          className="w-full normal-case tracking-normal"
+          className="w-full tracking-normal normal-case"
           onClick={() => signIn("google", { callbackUrl })}
         >
           Continue with Google
         </Button>
       </div>
 
-      <p className="mt-10 text-center text-sm text-muted">
+      <p className="text-muted mt-10 text-center text-sm">
         Don&apos;t have an account?{" "}
-        <Link href="/register" className="border-b-2 border-ink font-bold text-ink">
+        <Link href="/register" className="border-ink text-ink border-b-2 font-bold">
           Create one
         </Link>
       </p>

src/features/auth/components/sign-out-button.tsx

@@ -8,7 +8,7 @@ export function SignOutButton() {
   return (
     <Button
       variant="secondary"
-      className="w-full text-red-500 hover:bg-red-50"
+      className="text-danger hover:bg-danger/10 w-full"
       onClick={() => signOut({ callbackUrl: "/" })}
     >
       <LogOut className="h-4 w-4" aria-hidden="true" />