Phase 2

Base app architecture:

    Route groups for customer, staff and owner.
* Reusable design system with around 20 UI components.
* Complete Prisma schema.
* Authentication with email/password and Google.
* Role and permission model.
* Protected routes.
* Clean separation between features, services, components and shared utilities.

src/app/(auth)/layout.tsx

@@ -0,0 +1,14 @@
+import { Scissors } from "lucide-react";
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col bg-stone p-6">
+      <div className="mx-auto flex w-full max-w-md flex-1 flex-col justify-center">
+        <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-[1.25rem] bg-ink text-3xl text-white shadow-xl shadow-ink/20">
+          <Scissors className="h-7 w-7" aria-hidden="true" />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/(auth)/register/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { RegisterForm } from "@/features/auth/components/register-form";
+
+export const metadata: Metadata = {
+  title: "Create Account",
+};
+
+export default function RegisterPage() {
+  return (
+    <div>
+      <h1 className="mb-2 text-3xl font-bold tracking-tight">Create Account</h1>
+      <p className="mb-10 text-muted">Join to track your appointments and loyalty.</p>
+      <RegisterForm />
+    </div>
+  );
+}

src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { SignInForm } from "@/features/auth/components/sign-in-form";
+
+export const metadata: Metadata = {
+  title: "Sign In",
+};
+
+export default function SignInPage() {
+  return (
+    <div>
+      <h1 className="mb-2 text-4xl font-bold tracking-tight">Welcome back</h1>
+      <p className="mb-12 leading-relaxed text-muted">
+        Please enter your credentials to access your appointments.
+      </p>
+      {/* useSearchParams in SignInForm requires a Suspense boundary. */}
+      <Suspense>
+        <SignInForm />
+      </Suspense>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { Calendar } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Appointments" };
+
+export default function AppointmentsPage() {
+  return <ComingSoon icon={Calendar} title="Appointments" phase="Phase 2: Customer Accounts" />;
+}

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

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import { auth } from "@/auth";
+
+export const metadata: Metadata = { title: "Home" };
+
+export default async function CustomerHomePage() {
+  const session = await auth();
+
+  return (
+    <div className="px-6 pt-12">
+      <p className="text-xs font-medium text-muted">Signed in as</p>
+      <h1 className="text-2xl font-bold tracking-tight">{session?.user?.name ?? session?.user?.email}</h1>
+      <p className="mt-6 text-sm text-muted">
+        The full personalized home (upcoming appointment, loyalty progress, quick booking) is designed
+        in <code>templates/23-...html</code> and scoped for a later phase — this route exists now to
+        prove sign-in → protected layout → bottom nav works end to end.
+      </p>
+    </div>
+  );
+}

src/app/(customer)/layout.tsx

@@ -0,0 +1,23 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { BottomNav, type BottomNavItem } from "@/components/navigation/bottom-nav";
+
+const NAV_ITEMS: BottomNavItem[] = [
+  { href: "/home", label: "Home", icon: "house" },
+  { href: "/appointments", label: "Bookings", icon: "calendar-check" },
+  { href: "/settings", label: "Settings", icon: "user" },
+];
+
+export default async function CustomerLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session?.user) {
+    redirect("/sign-in?callbackUrl=/home");
+  }
+
+  return (
+    <div className="min-h-screen bg-stone pb-24">
+      {children}
+      <BottomNav items={NAV_ITEMS} variant="customer" />
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { auth } from "@/auth";
+import { ProfileCard } from "@/components/ui/profile-card";
+import { SignOutButton } from "@/features/auth/components/sign-out-button";
+
+export const metadata: Metadata = { title: "Settings" };
+
+export default async function CustomerSettingsPage() {
+  const session = await auth();
+
+  return (
+    <div className="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}
+      />
+      <p className="text-sm text-muted">
+        Preferred barber, loyalty card, and notification preferences are designed in
+        <code> templates/10, 11, 35</code> and land in later phases.
+      </p>
+      <SignOutButton />
+    </div>
+  );
+}

src/app/(owner)/layout.tsx

@@ -0,0 +1,30 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { BottomNav } from "@/components/navigation/bottom-nav";
+import { STAFF_NAV_ITEMS } from "@/lib/navigation/staff-nav-items";
+import { hasPermission } from "@/lib/auth/permissions";
+import { Permission } from "@/generated/prisma/enums";
+
+/**
+ * Owner is a permission on a staff account, not a separate account type
+ * (see docs/implementation-plan.md §3, §11) — this layout reuses the exact
+ * same shell/nav as (staff), and only adds a permission check on top.
+ */
+export default async function OwnerLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session?.user) {
+    redirect("/sign-in?callbackUrl=/owner");
+  }
+
+  const canManageStaff = await hasPermission(session.user.id, Permission.MANAGE_STAFF);
+  if (!canManageStaff) {
+    redirect("/staff");
+  }
+
+  return (
+    <div className="min-h-screen bg-stone pb-24">
+      {children}
+      <BottomNav items={STAFF_NAV_ITEMS} variant="staff" />
+    </div>
+  );
+}

src/app/(owner)/owner/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { ChartLine } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Business Dashboard" };
+
+export default function OwnerDashboardPage() {
+  return <ComingSoon icon={ChartLine} title="Business Dashboard" phase="Phase 4: Owner Administration" />;
+}

src/app/(owner)/owner/team/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { Users } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Team Management" };
+
+export default function OwnerTeamPage() {
+  return <ComingSoon icon={Users} title="Team Management" phase="Phase 4: Owner Administration" />;
+}

src/app/(staff)/layout.tsx

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { BottomNav } from "@/components/navigation/bottom-nav";
+import { STAFF_NAV_ITEMS } from "@/lib/navigation/staff-nav-items";
+import { prisma } from "@/lib/db/prisma";
+
+export default async function StaffLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session?.user) {
+    redirect("/sign-in?callbackUrl=/staff");
+  }
+
+  // Real role gating, not just "is signed in" — a registered customer with
+  // no StaffProfile is bounced back to their own home rather than seeing
+  // an empty staff shell. See docs/implementation-plan.md §3 (role
+  // conflicts) and §11 (permission enforcement).
+  const staffProfile = await prisma.staffProfile.findUnique({ where: { userId: session.user.id } });
+  if (!staffProfile) {
+    redirect("/home");
+  }
+
+  return (
+    <div className="min-h-screen bg-stone pb-24">
+      {children}
+      <BottomNav items={STAFF_NAV_ITEMS} variant="staff" />
+    </div>
+  );
+}

src/app/(staff)/staff/clients/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { Users } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Clients" };
+
+export default function StaffClientsPage() {
+  return <ComingSoon icon={Users} title="Clients" phase="Phase 3: Barber Tools" />;
+}

src/app/(staff)/staff/current/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { Scissors } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Current Appointment" };
+
+export default function StaffCurrentPage() {
+  return <ComingSoon icon={Scissors} title="Current Appointment" phase="Phase 3: Barber Tools" />;
+}

src/app/(staff)/staff/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { CalendarDays } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Calendar" };
+
+export default function StaffCalendarPage() {
+  return <ComingSoon icon={CalendarDays} title="Calendar" phase="Phase 3: Barber Tools" />;
+}

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

@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ShieldCheck } from "lucide-react";
+import { auth } from "@/auth";
+import { Button } from "@/components/ui/button";
+import { ProfileCard } from "@/components/ui/profile-card";
+import { SignOutButton } from "@/features/auth/components/sign-out-button";
+import { hasPermission } from "@/lib/auth/permissions";
+import { Permission } from "@/generated/prisma/enums";
+
+export const metadata: Metadata = { title: "Staff Settings" };
+
+export default async function StaffSettingsPage() {
+  const session = await auth();
+  if (!session?.user) return null;
+
+  // Real permission check, not the templates' unconditional mock "Switch to
+  // Admin View" button (see docs/implementation-plan.md §3) — only staff
+  // whose Role actually grants MANAGE_STAFF see a way into the owner area.
+  const canManageStaff = await hasPermission(session.user.id, Permission.MANAGE_STAFF);
+
+  return (
+    <div className="space-y-6 px-6 pt-12">
+      <h1 className="text-2xl font-bold tracking-tight">Staff Settings</h1>
+      <ProfileCard name={session.user.name ?? "Staff member"} meta={session.user.email} avatarUrl={session.user.image ?? undefined} />
+
+      {canManageStaff && (
+        <Link
+          href="/owner"
+          className="flex items-center gap-3 rounded-jumbo border border-line bg-white p-5 text-sm font-bold hover:bg-stone"
+        >
+          <ShieldCheck className="h-5 w-5 text-accent" aria-hidden="true" />
+          Switch to Owner Admin
+        </Link>
+      )}
+
+      <Button variant="ghost" className="w-full" disabled>
+        Working Hours, Breaks &amp; Time Off — Phase 3
+      </Button>
+      <SignOutButton />
+    </div>
+  );
+}

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from "@/auth";
+
+export const { GET, POST } = handlers;

src/app/globals.css

@@ -0,0 +1,59 @@
+@import "tailwindcss";
+
+/*
+ * Design tokens ported from /templates. The majority of the 22 UX Pilot
+ * exports converge on this palette (ink/stone/surface/muted/line/accent) —
+ * see docs/implementation-plan.md §8. Two competing palettes found in the
+ * templates (a salon-red variant on the staff calendar, a blue variant on
+ * the appointments list) were NOT carried forward; that section explains
+ * why. `--radius-jumbo`/`--radius-tile` use the larger of the two radius
+ * scales found in the templates, per the same recommendation.
+ */
+@theme {
+  --color-ink: #111b15;
+  --color-stone: #f4f6f4;
+  --color-surface: #ffffff;
+  --color-muted: #6c7870;
+  --color-line: #e1e7e2;
+  --color-accent: #10b981;
+  --color-accent-loyalty: #f59e0b;
+
+  /* Semantic status colors — replaces the ad hoc per-screen status colors
+     found in the templates (see docs/implementation-plan.md §8). */
+  --color-status-confirmed: #10b981;
+  --color-status-pending: #f59e0b;
+  --color-status-cancelled: #ef4444;
+  --color-status-completed: #6c7870;
+
+  --radius-jumbo: 1.5rem;
+  --radius-tile: 1rem;
+
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+}
+
+@layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    @apply bg-stone text-ink antialiased;
+  }
+
+  /* Visible focus ring for keyboard users everywhere — the templates had
+     no explicit focus state beyond the browser default on form inputs
+     (see docs/implementation-plan.md §8, Accessibility risks). */
+  :focus-visible {
+    @apply outline-none ring-2 ring-ink ring-offset-2 ring-offset-stone;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import { Providers } from "@/components/providers";
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: "NextChair",
+    template: "%s — NextChair",
+  },
+  description:
+    "Book your next barber appointment in seconds — services, staff and loyalty rewards in one place.",
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: "cover",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={inter.variable}>
+      <body className="font-sans">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,46 @@
+import { Scissors } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { Button } from "@/components/ui/button";
+
+export default async function WelcomePage() {
+  const session = await auth();
+  if (session?.user) {
+    redirect("/home");
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col justify-end bg-ink px-8 pb-16 text-white">
+      <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-ink">
+        <Scissors className="h-7 w-7" aria-hidden="true" />
+      </div>
+      <h1 className="mb-4 text-5xl font-bold tracking-tight">NextChair</h1>
+      <p className="mb-12 max-w-xs text-lg text-white/70">
+        Precision grooming at your fingertips. Book your next visit in seconds.
+      </p>
+
+      <div className="space-y-4">
+        <Button asChild variant="secondary" size="lg" className="w-full bg-white">
+          <Link href="/register">Create Account</Link>
+        </Button>
+        <Button
+          asChild
+          variant="secondary"
+          size="lg"
+          className="w-full border-2 border-white/20 bg-transparent text-white hover:bg-white/10"
+        >
+          <Link href="/sign-in">Sign In</Link>
+        </Button>
+      </div>
+
+      {/*
+        The templates' "Continue as Guest" goes straight to the business
+        home/booking flow (template 20 → 15). That flow isn't built yet
+        (Phase 1: Customer Booking), so this button isn't shown rather than
+        linking somewhere that doesn't work yet — see
+        docs/implementation-plan.md §16 for the phase it belongs to.
+      */}
+    </div>
+  );
+}

src/app/style-guide/interactive.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { BottomSheet } from "@/components/ui/bottom-sheet";
+import { Card } from "@/components/ui/card";
+import { ErrorState } from "@/components/feedback/error-state";
+import { Modal } from "@/components/ui/modal";
+import { MonthCalendar } from "@/components/ui/month-calendar";
+import { ProfileCard } from "@/components/ui/profile-card";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+
+/**
+ * Client-only demo for components that need interaction state — kept
+ * separate so the style guide page itself stays a Server Component. This
+ * is also the reason `ProfileCard`'s `onEdit` and `ErrorState`'s
+ * `onRetry` are demonstrated here rather than in page.tsx: a Server
+ * Component can't pass a live event-handler closure as a prop to a
+ * Client Component (Next.js build error "Event handlers cannot be passed
+ * to Client Component props") — the handler has to originate from
+ * somewhere already client-side, which this component is.
+ */
+export function StyleGuideInteractive() {
+  const [switchOn, setSwitchOn] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [month, setMonth] = useState(() => new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
+  const [editCount, setEditCount] = useState(0);
+  const [retryCount, setRetryCount] = useState(0);
+
+  return (
+    <div className="space-y-8">
+      <Card className="space-y-4 p-6">
+        <Switch
+          checked={switchOn}
+          onCheckedChange={setSwitchOn}
+          label="Booking confirmations"
+          description="Email when a booking is confirmed"
+        />
+        <Switch defaultChecked={false} label="Require staff approval" />
+      </Card>
+
+      <Tabs defaultValue="upcoming">
+        <TabsList>
+          <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
+          <TabsTrigger value="past">Past</TabsTrigger>
+        </TabsList>
+        <TabsContent value="upcoming">
+          <p className="text-sm text-muted">Upcoming appointments render here.</p>
+        </TabsContent>
+        <TabsContent value="past">
+          <p className="text-sm text-muted">Past appointments render here.</p>
+        </TabsContent>
+      </Tabs>
+
+      <div className="flex flex-wrap gap-3">
+        <Button variant="secondary" onClick={() => setModalOpen(true)}>
+          Open Modal
+        </Button>
+        <Button variant="secondary" onClick={() => setSheetOpen(true)}>
+          Open Bottom Sheet
+        </Button>
+      </div>
+
+      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title="Cancel Appointment?">
+        <p className="mb-6 text-sm text-muted">
+          This is within the free cancellation window. Are you sure you want to cancel?
+        </p>
+        <div className="flex gap-3">
+          <Button variant="secondary" className="flex-1" onClick={() => setModalOpen(false)}>
+            Keep it
+          </Button>
+          <Button variant="destructive" className="flex-1" onClick={() => setModalOpen(false)}>
+            Cancel it
+          </Button>
+        </div>
+      </Modal>
+
+      <BottomSheet open={sheetOpen} onClose={() => setSheetOpen(false)} title="Add a Note">
+        <Textarea placeholder="e.g. skin sensitivity, specific style requests…" />
+        <Button className="mt-4 w-full" onClick={() => setSheetOpen(false)}>
+          Save Note
+        </Button>
+      </BottomSheet>
+
+      <MonthCalendar month={month} onMonthChange={setMonth} selectedDate={selectedDate} onSelectDate={setSelectedDate} />
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div>
+          <ProfileCard
+            name="Alex Chen"
+            meta={`Edited ${editCount}×`}
+            onEdit={() => setEditCount((c) => c + 1)}
+          />
+        </div>
+        <ErrorState onRetry={() => setRetryCount((c) => c + 1)} description={`Retried ${retryCount}×`} />
+      </div>
+    </div>
+  );
+}

src/app/style-guide/page.tsx

@@ -0,0 +1,211 @@
+import type { Metadata } from "next";
+import { Calendar, House, Scissors, Users, Settings } from "lucide-react";
+import { AppointmentCard } from "@/components/ui/appointment-card";
+import { BarberCard } from "@/components/ui/barber-card";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { EmptyState } from "@/components/feedback/empty-state";
+import { ErrorState } from "@/components/feedback/error-state";
+import { Input } from "@/components/ui/input";
+import { CardSkeleton } from "@/components/feedback/skeleton";
+import { LoyaltyCard } from "@/components/ui/loyalty-card";
+import { ProfileCard } from "@/components/ui/profile-card";
+import { Select } from "@/components/ui/select";
+import { ServiceCard } from "@/components/ui/service-card";
+import { StatusPill } from "@/components/ui/status-pill";
+import { StyleGuideInteractive } from "./interactive";
+
+export const metadata: Metadata = {
+  title: "Style Guide",
+};
+
+const SECTION_TITLE = "mb-4 text-xs font-bold uppercase tracking-widest text-muted";
+
+export default function StyleGuidePage() {
+  return (
+    <div className="mx-auto max-w-2xl space-y-12 px-6 py-12">
+      <header>
+        <h1 className="text-3xl font-bold tracking-tight">Design System</h1>
+        <p className="mt-2 text-muted">
+          Reusable components, built from the visual language in <code>/templates</code>. See{" "}
+          <code>docs/implementation-plan.md</code> §7–8 for the source analysis. Reference only —
+          not a route real users will see.
+        </p>
+      </header>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Buttons</h2>
+        <div className="flex flex-wrap items-center gap-3">
+          <Button variant="primary">Primary</Button>
+          <Button variant="accent">Save</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="destructive">Cancel Appointment</Button>
+          <Button variant="primary" isLoading>
+            Loading
+          </Button>
+          <Button variant="primary" disabled>
+            Disabled
+          </Button>
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Status Pills</h2>
+        <div className="flex flex-wrap gap-2">
+          <StatusPill status="confirmed" />
+          <StatusPill status="pending_approval" />
+          <StatusPill status="in_progress" />
+          <StatusPill status="completed" />
+          <StatusPill status="cancelled" />
+          <StatusPill status="no_show" />
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Forms</h2>
+        <Card className="space-y-4 p-6">
+          <Input label="Email Address" placeholder="name@example.com" type="email" />
+          <Input label="With an error" defaultValue="not-an-email" error="Enter a valid email address" />
+          <Select label="Time Zone" defaultValue="europe-london">
+            <option value="europe-london">Europe/London (GMT+0)</option>
+            <option value="america-new_york">America/New_York (GMT-5)</option>
+          </Select>
+          <Checkbox label="Create an account" description="Track this booking and start earning loyalty stamps." />
+        </Card>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Switch &amp; Tabs</h2>
+        <StyleGuideInteractive />
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Profile &amp; Barber Cards</h2>
+        <div className="space-y-4">
+          {/* onEdit needs a real client-side closure — it lives in
+              StyleGuideInteractive, not here (see "Switch & Tabs" section
+              above), so this Server Component page never passes an event
+              handler directly to a Client Component. */}
+          <ProfileCard
+            name="Marcus Reed"
+            meta="Master Barber · Active"
+            avatarUrl="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg"
+          />
+          <div className="flex gap-5">
+            <BarberCard
+              staff={{
+                id: "1",
+                name: "Marcus",
+                avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg",
+              }}
+              selected
+            />
+            <BarberCard
+              staff={{
+                id: "2",
+                name: "Leo",
+                avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg",
+              }}
+              isPreferred
+            />
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Appointment &amp; Service Cards</h2>
+        <div className="space-y-4">
+          <AppointmentCard
+            status="confirmed"
+            serviceName="Standard Cut"
+            staff={{
+              id: "1",
+              name: "Marcus Reed",
+              avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg",
+            }}
+            formattedDate="Sat, Oct 12"
+            formattedTime="2:00 PM"
+            actions={
+              <>
+                <Button variant="secondary" size="sm" className="flex-1">
+                  Reschedule
+                </Button>
+                <Button variant="destructive" size="sm" className="flex-1">
+                  Cancel
+                </Button>
+              </>
+            }
+          />
+          <Card className="divide-y divide-line px-5">
+            <ServiceCard
+              service={{ id: "1", name: "Haircut & Style", durationMinutes: 30, formattedPrice: "£22.00" }}
+              action={<Button size="sm">Book</Button>}
+            />
+            <ServiceCard
+              service={{ id: "2", name: "Skinfade / Taper & Style", durationMinutes: 30, formattedPrice: "£25.00" }}
+              action={<Button size="sm">Book</Button>}
+            />
+          </Card>
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Loyalty Card</h2>
+        <LoyaltyCard
+          businessName="TrimTime"
+          memberNumber="8421"
+          stampsRequired={10}
+          stampsEarned={7}
+          rewardLabel="50% OFF"
+          termsLine="Valid for 12 months. One reward per visit."
+        />
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Feedback &amp; Status States</h2>
+        <div className="grid gap-4 sm:grid-cols-3">
+          <CardSkeleton />
+          <EmptyState icon={Calendar} title="No upcoming appointments" description="Book your next visit." />
+          <ErrorState />
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Bottom Navigation (reference only)</h2>
+        <p className="mb-3 text-sm text-muted">
+          Rendered inline here (not fixed) so both variants are visible at once — see{" "}
+          <code>components/navigation/bottom-nav.tsx</code>.
+        </p>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between rounded-xl border border-line bg-white px-5 py-2">
+            {[
+              { icon: House, label: "Home" },
+              { icon: Calendar, label: "Bookings" },
+              { icon: Users, label: "Settings" },
+            ].map(({ icon: Icon, label }, i) => (
+              <div key={label} className={`flex flex-col items-center gap-1 ${i === 0 ? "text-ink" : "text-muted"}`}>
+                <Icon className="h-5 w-5" aria-hidden="true" />
+                <span className="text-[10px] font-bold uppercase tracking-widest">{label}</span>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center justify-between rounded-xl bg-[#0c0c0c] px-5 py-2 text-gray-400">
+            {[
+              { icon: Calendar, label: "Calendar" },
+              { icon: Scissors, label: "Current" },
+              { icon: Users, label: "Clients" },
+              { icon: Settings, label: "Settings" },
+            ].map(({ icon: Icon, label }, i) => (
+              <div key={label} className={`flex flex-col items-center gap-1 ${i === 3 ? "text-white" : ""}`}>
+                <Icon className="h-5 w-5" aria-hidden="true" />
+                <span className="text-[10px] font-medium">{label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/auth.config.ts

@@ -0,0 +1,17 @@
+import type { NextAuthConfig } from "next-auth";
+
+/**
+ * The subset of NextAuth config that doesn't touch the database — no
+ * adapter, no Credentials `authorize()` (which needs Prisma + bcrypt).
+ * `proxy.ts` builds its own lightweight `NextAuth(authConfig)` instance
+ * from this alone, so checking "is there a valid session" on every
+ * request doesn't spin up a Postgres connection pool just to do it. The
+ * full config in `auth.ts` (adapter, real providers) extends this one.
+ */
+export const authConfig = {
+  pages: {
+    signIn: "/sign-in",
+  },
+  providers: [],
+  session: { strategy: "jwt" },
+} satisfies NextAuthConfig;

src/auth.ts

@@ -0,0 +1,55 @@
+import { PrismaAdapter } from "@auth/prisma-adapter";
+import bcrypt from "bcryptjs";
+import NextAuth from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import Google from "next-auth/providers/google";
+import { authConfig } from "@/auth.config";
+import { prisma } from "@/lib/db/prisma";
+import { signInSchema } from "@/features/auth/schemas";
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  ...authConfig,
+  // `@auth/prisma-adapter`'s published types still import `PrismaClient`
+  // from the legacy `@prisma/client` path; Prisma 7's `prisma-client`
+  // generator no longer populates that path (see prisma/schema.prisma).
+  // The adapter only calls plain `prisma.<model>.<method>()` at runtime,
+  // so this is a type-only mismatch, not a behavioural one — narrowed
+  // here instead of silencing it project-wide.
+  adapter: PrismaAdapter(prisma as Parameters<typeof PrismaAdapter>[0]),
+  providers: [
+    Google,
+    Credentials({
+      credentials: {
+        email: { label: "Email", type: "email" },
+        password: { label: "Password", type: "password" },
+      },
+      authorize: async (raw) => {
+        const parsed = signInSchema.safeParse(raw);
+        if (!parsed.success) return null;
+
+        const { email, password } = parsed.data;
+        const user = await prisma.user.findUnique({ where: { email } });
+        if (!user?.passwordHash) return null;
+
+        const valid = await bcrypt.compare(password, user.passwordHash);
+        if (!valid) return null;
+
+        return { id: user.id, email: user.email, name: user.name, image: user.image };
+      },
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user?.id) {
+        token.id = user.id;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user && typeof token.id === "string") {
+        session.user.id = token.id;
+      }
+      return session;
+    },
+  },
+});

src/components/feedback/coming-soon.tsx

@@ -0,0 +1,27 @@
+import type { LucideIcon } from "lucide-react";
+
+/**
+ * Placeholder for routes that exist to prove the layout/navigation/auth
+ * architecture works, but whose real feature is out of Phase 2's scope
+ * (booking, appointments, loyalty, staff/owner tools — see the Phase 2
+ * brief). Every nav destination renders one of these rather than 404ing.
+ */
+export function ComingSoon({
+  icon: Icon,
+  title,
+  phase,
+}: {
+  icon: LucideIcon;
+  title: string;
+  phase: string;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center px-6 py-24 text-center">
+      <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full border border-line bg-white text-muted">
+        <Icon className="h-6 w-6" aria-hidden="true" />
+      </div>
+      <h1 className="mb-1 text-lg font-bold">{title}</h1>
+      <p className="max-w-xs text-sm text-muted">Coming in {phase}. This route exists today to prove the layout, navigation and auth gating around it.</p>
+    </div>
+  );
+}

src/components/feedback/empty-state.tsx

@@ -0,0 +1,27 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+/**
+ * Not represented anywhere in the templates (see
+ * docs/implementation-plan.md §6/§8) — every list screen needs one of
+ * these for the zero-items case.
+ */
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center px-6 py-16 text-center">
+      <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full border border-line bg-white text-muted">
+        <Icon className="h-6 w-6" aria-hidden="true" />
+      </div>
+      <h3 className="mb-1 text-base font-bold">{title}</h3>
+      {description && <p className="mb-6 text-sm text-muted">{description}</p>}
+      {action}
+    </div>
+  );
+}

src/components/feedback/error-state.tsx

@@ -0,0 +1,30 @@
+import { TriangleAlert } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export interface ErrorStateProps {
+  title?: string;
+  description?: string;
+  onRetry?: () => void;
+}
+
+/** Not represented anywhere in the templates — the generic "something went wrong" state for a failed fetch/action. */
+export function ErrorState({
+  title = "Something went wrong",
+  description = "Please try again in a moment.",
+  onRetry,
+}: ErrorStateProps) {
+  return (
+    <div role="alert" className="flex flex-col items-center px-6 py-16 text-center">
+      <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-red-50 text-red-500">
+        <TriangleAlert className="h-6 w-6" aria-hidden="true" />
+      </div>
+      <h3 className="mb-1 text-base font-bold">{title}</h3>
+      <p className="mb-6 text-sm text-muted">{description}</p>
+      {onRetry && (
+        <Button variant="secondary" size="md" onClick={onRetry}>
+          Try again
+        </Button>
+      )}
+    </div>
+  );
+}

src/components/feedback/loading-state.tsx

@@ -0,0 +1,17 @@
+import { Loader2 } from "lucide-react";
+
+/**
+ * Full-region loading indicator for cases a skeleton doesn't fit (route
+ * transitions, full-page Suspense fallbacks). Prefer `ListSkeleton`/
+ * `CardSkeleton` (skeleton.tsx) for known list/card shapes — a skeleton
+ * that mirrors the eventual layout reduces perceived load time more than
+ * a spinner does.
+ */
+export function LoadingState({ label = "Loading…" }: { label?: string }) {
+  return (
+    <div role="status" className="flex flex-col items-center justify-center gap-3 px-6 py-16 text-muted">
+      <Loader2 className="h-6 w-6 animate-spin" aria-hidden="true" />
+      <span className="text-sm">{label}</span>
+    </div>
+  );
+}

src/components/feedback/skeleton.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils/cn";
+
+/** Base skeleton block — not represented anywhere in the templates. Compose into loading states for specific cards below. */
+export function Skeleton({ className }: { className?: string }) {
+  return <div className={cn("animate-pulse rounded-lg bg-line/60", className)} />;
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="rounded-jumbo border border-line bg-white p-5">
+      <div className="mb-4 flex items-center gap-3">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-3.5 w-2/3" />
+          <Skeleton className="h-3 w-1/3" />
+        </div>
+      </div>
+      <Skeleton className="h-3 w-full" />
+    </div>
+  );
+}
+
+export function ListSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-3" aria-hidden="true">
+      {Array.from({ length: count }, (_, i) => (
+        <CardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}

src/components/navigation/bottom-nav.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { CalendarCheck, CalendarDays, House, Scissors, Settings, User, Users } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+
+/**
+ * Icons are looked up by name, not passed as component references. A
+ * Server Component layout (see (customer)/layout.tsx, (staff)/layout.tsx)
+ * can only pass serializable props to a Client Component like this one —
+ * a Lucide icon is a forwardRef object, not a plain value, so passing it
+ * directly fails at the RSC boundary ("Only plain objects can be passed
+ * to Client Components from Server Components"). A string key sidesteps
+ * that entirely.
+ */
+const ICON_MAP = {
+  house: House,
+  "calendar-check": CalendarCheck,
+  user: User,
+  "calendar-days": CalendarDays,
+  scissors: Scissors,
+  users: Users,
+  settings: Settings,
+} satisfies Record<string, LucideIcon>;
+
+export type BottomNavIconName = keyof typeof ICON_MAP;
+
+export interface BottomNavItem {
+  href: string;
+  label: string;
+  icon: BottomNavIconName;
+}
+
+export interface BottomNavProps {
+  items: BottomNavItem[];
+  /**
+   * Customer nav is light; staff/owner nav is dark. This single prop
+   * replaces the four slightly-different bottom-nav markups found across
+   * the templates (see docs/implementation-plan.md §7/§8) with one
+   * role-aware component.
+   */
+  variant?: "customer" | "staff";
+}
+
+/**
+ * Client Component so the active tab is derived from the real current
+ * route (`usePathname`) instead of every parent layout having to compute
+ * and pass it down — one less thing to get out of sync as routes are
+ * added in later phases.
+ */
+export function BottomNav({ items, variant = "customer" }: BottomNavProps) {
+  const pathname = usePathname();
+  const isStaff = variant === "staff";
+
+  return (
+    <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",
+        "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+        isStaff ? "border-white/5 bg-[#0c0c0c] text-gray-400" : "border-line bg-white text-muted",
+      )}
+    >
+      {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>
+        );
+      })}
+    </nav>
+  );
+}

src/components/navigation/top-nav.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ArrowLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface TopNavProps {
+  title: string;
+  /** Show a back button that calls router.back(), or a custom href/handler. */
+  onBack?: (() => void) | true;
+  action?: ReactNode;
+  sticky?: boolean;
+  className?: string;
+}
+
+/**
+ * The [back button] + title + [action] header repeated, with small visual
+ * variations, across nearly every template screen — consolidated into one
+ * component (see docs/implementation-plan.md §7, "TopHeader").
+ */
+export function TopNav({ title, onBack, action, sticky = true, className }: TopNavProps) {
+  const router = useRouter();
+
+  return (
+    <header
+      className={cn(
+        "flex items-center justify-between border-b border-line bg-white px-6 py-5",
+        sticky && "sticky top-0 z-40",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-4">
+        {onBack && (
+          <button
+            type="button"
+            onClick={onBack === true ? () => router.back() : onBack}
+            aria-label="Go back"
+            className="flex h-10 w-10 items-center justify-center rounded-full border border-line"
+          >
+            <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+          </button>
+        )}
+        <h1 className="text-xl font-bold tracking-tight">{title}</h1>
+      </div>
+      {action}
+    </header>
+  );
+}

src/components/providers.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import type { ReactNode } from "react";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

src/components/ui/appointment-card.tsx

@@ -0,0 +1,60 @@
+import Image from "next/image";
+import type { ReactNode } from "react";
+import { Card } from "@/components/ui/card";
+import { StatusPill } from "@/components/ui/status-pill";
+import type { AppointmentStatus, StaffSummary } from "@/types/domain";
+
+export interface AppointmentCardProps {
+  status: AppointmentStatus;
+  serviceName: string;
+  staff: StaffSummary;
+  /** Pre-formatted for display, e.g. "Sat, Oct 12". */
+  formattedDate: string;
+  /** Pre-formatted for display, e.g. "2:00 PM". */
+  formattedTime: string;
+  /** Reschedule/Cancel/Book again buttons — left to the caller so this
+   * component stays agnostic of which actions apply to which status. */
+  actions?: ReactNode;
+  href?: string;
+}
+
+export function AppointmentCard({
+  status,
+  serviceName,
+  staff,
+  formattedDate,
+  formattedTime,
+  actions,
+}: AppointmentCardProps) {
+  return (
+    <Card className="p-5">
+      <div className="mb-4 flex items-start justify-between">
+        <StatusPill status={status} />
+        <div className="text-right">
+          <p className="text-sm font-bold">{formattedDate}</p>
+          <p className="text-xs text-muted">{formattedTime}</p>
+        </div>
+      </div>
+      <div className="mb-4 flex items-center gap-3">
+        {staff.avatarUrl ? (
+          <Image
+            src={staff.avatarUrl}
+            alt=""
+            width={40}
+            height={40}
+            className="h-10 w-10 rounded-full object-cover"
+          />
+        ) : (
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-stone text-xs font-bold text-muted">
+            {staff.name.charAt(0)}
+          </div>
+        )}
+        <div>
+          <h3 className="text-sm font-bold">{serviceName}</h3>
+          <p className="text-xs text-muted">with {staff.name}</p>
+        </div>
+      </div>
+      {actions && <div className="flex gap-2 border-t border-line pt-4">{actions}</div>}
+    </Card>
+  );
+}

src/components/ui/barber-card.tsx

@@ -0,0 +1,60 @@
+import Image from "next/image";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+import type { StaffSummary } from "@/types/domain";
+
+export interface BarberCardProps {
+  staff: StaffSummary;
+  isPreferred?: boolean;
+  selected?: boolean;
+  onSelect?: () => void;
+}
+
+/** Avatar-and-name barber picker, used in the booking flow and "Your Barbers" home section. */
+export function BarberCard({ staff, isPreferred, selected, onSelect }: BarberCardProps) {
+  const Comp = onSelect ? "button" : "div";
+
+  return (
+    <Comp
+      type={onSelect ? "button" : undefined}
+      onClick={onSelect}
+      aria-pressed={onSelect ? selected : undefined}
+      className="flex w-20 shrink-0 flex-col items-center gap-2 text-center"
+    >
+      <div className="relative">
+        {staff.avatarUrl ? (
+          <Image
+            src={staff.avatarUrl}
+            alt=""
+            width={64}
+            height={64}
+            className={cn(
+              "h-16 w-16 rounded-full border object-cover",
+              selected ? "border-2 border-accent" : "border-line",
+            )}
+          />
+        ) : (
+          <div
+            className={cn(
+              "flex h-16 w-16 items-center justify-center rounded-full border bg-stone text-lg font-bold text-muted",
+              selected ? "border-2 border-accent" : "border-line",
+            )}
+          >
+            {staff.name.charAt(0)}
+          </div>
+        )}
+        {selected && (
+          <span className="absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center rounded-full border-2 border-white bg-accent">
+            <Check className="h-2.5 w-2.5 text-white" aria-hidden="true" />
+          </span>
+        )}
+        {isPreferred && !selected && (
+          <span className="absolute -bottom-1 right-1 rounded-full bg-accent px-1.5 py-0.5 text-[7px] font-bold uppercase text-white">
+            Fave
+          </span>
+        )}
+      </div>
+      <span className="text-xs font-medium">{staff.name}</span>
+    </Comp>
+  );
+}

src/components/ui/bottom-sheet.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Same native-<dialog> foundation as Modal (see modal.tsx) — the mobile
+ * bottom-sheet pattern the customer templates imply (e.g. an appointment
+ * action sheet) but never actually build. Anchored to the viewport bottom
+ * with a drag handle instead of centered, everything else — focus
+ * trapping, Escape, backdrop click — comes from <dialog> the same way.
+ */
+export function BottomSheet({ open, onClose, title, children, className }: BottomSheetProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    if (open && !node.open) node.showModal();
+    if (!open && node.open) node.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      onClose={onClose}
+      onCancel={onClose}
+      onClick={(event) => {
+        if (event.target === ref.current) onClose();
+      }}
+      aria-labelledby={title ? "bottom-sheet-title" : undefined}
+      className={cn(
+        "m-0 mt-auto w-full max-w-none rounded-t-jumbo rounded-b-none border-0 border-t border-line bg-white p-0 shadow-xl backdrop:bg-ink/40 backdrop:backdrop-blur-sm",
+        "max-h-[85vh]",
+        className,
+      )}
+    >
+      <div className="mx-auto mt-3 h-1.5 w-10 shrink-0 rounded-full bg-line" aria-hidden="true" />
+      {title && (
+        <div className="px-6 pt-4 pb-2">
+          <h2 id="bottom-sheet-title" className="text-lg font-bold tracking-tight">
+            {title}
+          </h2>
+        </div>
+      )}
+      <div className="overflow-y-auto px-6 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-2">
+        {children}
+      </div>
+    </dialog>
+  );
+}

src/components/ui/button.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { forwardRef } from "react";
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-bold uppercase tracking-widest transition-all disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        // Primary CTA — matches the black-pill button used for the main
+        // action on nearly every template (Sign In, Confirm Booking, Done…).
+        primary: "bg-ink text-white shadow-lg shadow-ink/10 hover:bg-black",
+        // Save-in-place action inside settings/config screens — matches
+        // the accent "Save" pill used on the Loyalty Configuration screen.
+        accent: "bg-accent text-white hover:brightness-95",
+        secondary: "bg-white text-ink border border-line hover:bg-stone",
+        ghost: "text-ink hover:bg-stone",
+        destructive: "border border-red-200 text-red-500 hover:bg-red-50",
+      },
+      size: {
+        sm: "h-9 rounded-full px-4 text-[10px]",
+        md: "h-12 rounded-full px-6 text-xs",
+        lg: "h-[52px] rounded-full px-8 text-xs",
+        icon: "h-10 w-10 rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "lg",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /** Render the styling onto the single child element instead of a <button> (e.g. a Next <Link>). */
+  asChild?: boolean;
+  isLoading?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, isLoading = false, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        ref={ref}
+        className={cn(buttonVariants({ variant, size }), className)}
+        disabled={disabled || isLoading}
+        aria-busy={isLoading || undefined}
+        {...props}
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+            <span className="sr-only">Loading</span>
+            {children}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    );
+  },
+);
+Button.displayName = "Button";

src/components/ui/card.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/utils/cn";
+
+/**
+ * The single most-repeated visual pattern across the templates: a white
+ * surface, hairline border, jumbo radius. See docs/implementation-plan.md
+ * §7 ("Cards" — strongest, most reusable element across the set).
+ */
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("rounded-jumbo border border-line bg-white shadow-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6 pb-0", className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6", className)} {...props} />;
+}
+
+export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center gap-3 p-6 pt-0", className)} {...props} />;
+}

src/components/ui/checkbox.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, useId } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label: ReactNode;
+  description?: ReactNode;
+}
+
+/**
+ * Native checkbox styled via `accent-*` rather than a hand-drawn box — full
+ * built-in keyboard/screen-reader support, no extra ARIA required.
+ */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, label, description, id, ...props }, ref) => {
+    const generatedId = useId();
+    const checkboxId = id ?? generatedId;
+
+    return (
+      <label htmlFor={checkboxId} className="flex cursor-pointer items-start gap-3">
+        <input
+          ref={ref}
+          type="checkbox"
+          id={checkboxId}
+          className={cn("mt-1 h-4 w-4 shrink-0 rounded border-line accent-accent", className)}
+          {...props}
+        />
+        <span>
+          <span className="block text-sm font-bold">{label}</span>
+          {description && <span className="block text-xs text-muted">{description}</span>}
+        </span>
+      </label>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";

src/components/ui/input.tsx

@@ -0,0 +1,66 @@
+import { forwardRef, useId } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  /** Icon rendered inside the field, left-aligned — matches the icon-in-input pattern used across the auth templates. */
+  icon?: ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, error, hint, icon, id, required, ...props }, ref) => {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const hintId = hint ? `${inputId}-hint` : undefined;
+    const errorId = error ? `${inputId}-error` : undefined;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="mb-2 ml-1 block text-[10px] font-bold uppercase tracking-widest text-muted"
+          >
+            {label}
+            {required && <span aria-hidden="true"> *</span>}
+          </label>
+        )}
+        <div className="relative">
+          {icon && (
+            <span className="pointer-events-none absolute left-5 top-1/2 -translate-y-1/2 text-muted">
+              {icon}
+            </span>
+          )}
+          <input
+            ref={ref}
+            id={inputId}
+            required={required}
+            aria-invalid={!!error || undefined}
+            aria-describedby={cn(hintId, errorId) || undefined}
+            className={cn(
+              "w-full rounded-xl border border-line bg-white px-5 py-4 text-sm outline-none transition-all placeholder:text-muted focus:ring-2 focus:ring-ink",
+              icon && "pl-12",
+              error && "border-red-300 focus:ring-red-400",
+              className,
+            )}
+            {...props}
+          />
+        </div>
+        {hint && !error && (
+          <p id={hintId} className="mt-1.5 ml-1 text-xs text-muted">
+            {hint}
+          </p>
+        )}
+        {error && (
+          <p id={errorId} role="alert" className="mt-1.5 ml-1 text-xs font-medium text-red-500">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+Input.displayName = "Input";

src/components/ui/loyalty-card.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Scissors } from "lucide-react";
+import { useState } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface LoyaltyCardProps {
+  businessName: string;
+  memberNumber: string;
+  stampsRequired: number;
+  stampsEarned: number;
+  rewardLabel: string;
+  termsLine?: string;
+}
+
+/**
+ * Ports the 3D flip loyalty card from templates/11 — the best-executed
+ * visual in the whole template set (see docs/implementation-plan.md §2) —
+ * but fixes the gap flagged in §8: the original had no actual flip
+ * trigger wired up. Here the card is a real <button> with
+ * `aria-pressed`, and the flip transition is skipped for users who
+ * prefer reduced motion.
+ */
+export function LoyaltyCard({
+  businessName,
+  memberNumber,
+  stampsRequired,
+  stampsEarned,
+  rewardLabel,
+  termsLine,
+}: LoyaltyCardProps) {
+  const [flipped, setFlipped] = useState(false);
+
+  return (
+    <button
+      type="button"
+      onClick={() => setFlipped((v) => !v)}
+      aria-pressed={flipped}
+      aria-label={flipped ? "Show stamp side" : "Show card back"}
+      className="w-full [perspective:1000px]"
+      style={{ aspectRatio: "1.65 / 1" }}
+    >
+      <div
+        className={cn(
+          "relative h-full w-full rounded-2xl shadow-[0_30px_60px_rgba(0,0,0,0.45)] transition-transform duration-700 [transform-style:preserve-3d] motion-reduce:transition-none",
+          "ring-[3px] ring-accent-loyalty",
+        )}
+        style={{ transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)" }}
+      >
+        {/* Front — stamps */}
+        <div className="absolute inset-0 flex flex-col justify-between overflow-hidden rounded-2xl bg-[#141414] p-4 [backface-visibility:hidden]">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-black italic tracking-tight text-white">Loyalty Card</h2>
+            <span className="rounded border border-accent-loyalty/30 px-2 py-0.5 text-[8px] font-bold uppercase tracking-widest text-accent-loyalty">
+              Member #{memberNumber}
+            </span>
+          </div>
+          <div className="grid grid-cols-5 gap-2">
+            {Array.from({ length: stampsRequired }, (_, i) => {
+              const earned = i < stampsEarned;
+              const isRewardSlot = i === stampsRequired - 1;
+              return (
+                <div
+                  key={i}
+                  className={cn(
+                    "flex aspect-square items-center justify-center rounded-full",
+                    isRewardSlot
+                      ? "scale-[1.08] bg-accent-loyalty shadow-lg"
+                      : earned
+                        ? "bg-white shadow-inner"
+                        : "border-2 border-dashed border-white/20 bg-[#2a2a2a]",
+                  )}
+                >
+                  {isRewardSlot ? (
+                    <span className="text-center text-[7px] font-black leading-tight text-ink">
+                      {rewardLabel}
+                    </span>
+                  ) : earned ? (
+                    <Scissors className="h-3.5 w-3.5 text-ink" aria-hidden="true" />
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+          {termsLine && (
+            <p className="text-center text-[7px] font-bold uppercase tracking-widest text-white/40">
+              {termsLine}
+            </p>
+          )}
+        </div>
+
+        {/* Back — brand */}
+        <div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-ink [backface-visibility:hidden] [transform:rotateY(180deg)]">
+          <div className="text-center">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-3xl text-ink">
+              <Scissors className="h-7 w-7" aria-hidden="true" />
+            </div>
+            <h3 className="text-2xl font-black uppercase tracking-tighter text-white">{businessName}</h3>
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}

src/components/ui/modal.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Built on the native <dialog> element rather than a hand-rolled focus
+ * trap: `showModal()` gives us focus containment, Escape-to-close, and
+ * top-layer stacking from the browser for free, and `<dialog>` is
+ * implicitly `role="dialog"` + `aria-modal="true"`. This is the more
+ * maintainable choice than reimplementing that behaviour in JS.
+ */
+export function Modal({ open, onClose, title, children, className }: ModalProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    if (open && !node.open) node.showModal();
+    if (!open && node.open) node.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      onClose={onClose}
+      onCancel={onClose}
+      onClick={(event) => {
+        if (event.target === ref.current) onClose();
+      }}
+      aria-labelledby="modal-title"
+      className={cn(
+        "m-auto w-[calc(100%-2rem)] max-w-md rounded-jumbo border border-line bg-white p-0 shadow-xl backdrop:bg-ink/40 backdrop:backdrop-blur-sm",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between border-b border-line px-6 py-5">
+        <h2 id="modal-title" className="text-lg font-bold tracking-tight">
+          {title}
+        </h2>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          className="flex h-9 w-9 items-center justify-center rounded-full text-muted hover:bg-stone"
+        >
+          <X className="h-4 w-4" aria-hidden="true" />
+        </button>
+      </div>
+      <div className="p-6">{children}</div>
+    </dialog>
+  );
+}

src/components/ui/month-calendar.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+
+export interface MonthCalendarProps {
+  /** Any date within the month being displayed. */
+  month: Date;
+  selectedDate?: Date;
+  onMonthChange?: (nextMonth: Date) => void;
+  onSelectDate?: (date: Date) => void;
+  /** Return true to disable a given day (e.g. outside booking rules). */
+  isDateDisabled?: (date: Date) => boolean;
+  className?: string;
+}
+
+const WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+function isSameDay(a: Date, b: Date) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+function buildGrid(month: Date): Date[] {
+  const year = month.getFullYear();
+  const monthIndex = month.getMonth();
+  const firstOfMonth = new Date(year, monthIndex, 1);
+  const startOffset = firstOfMonth.getDay(); // 0 = Sunday
+  const gridStart = new Date(year, monthIndex, 1 - startOffset);
+
+  return Array.from({ length: 42 }, (_, i) => {
+    const date = new Date(gridStart);
+    date.setDate(gridStart.getDate() + i);
+    return date;
+  });
+}
+
+/**
+ * The month date-picker used in the booking and reschedule flows. This is
+ * the one calendar surface that's well-defined by the templates; the
+ * staff/owner day-agenda calendar is intentionally NOT built here — it
+ * depends on the booking engine's availability model (Phase 3), and the
+ * templates themselves disagree on its layout (see
+ * docs/implementation-plan.md §14, "Calendar UI complexity").
+ */
+export function MonthCalendar({
+  month,
+  selectedDate,
+  onMonthChange,
+  onSelectDate,
+  isDateDisabled,
+  className,
+}: MonthCalendarProps) {
+  const today = new Date();
+  const days = buildGrid(month);
+  const monthLabel = month.toLocaleDateString("en-GB", { month: "long", year: "numeric" });
+
+  return (
+    <div className={cn("rounded-tile border border-line bg-white p-4", className)}>
+      <div className="mb-6 flex items-center justify-between">
+        <h3 className="text-base font-semibold">{monthLabel}</h3>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            aria-label="Previous month"
+            onClick={() => onMonthChange?.(new Date(month.getFullYear(), month.getMonth() - 1, 1))}
+            className="flex h-8 w-8 items-center justify-center rounded-full border border-line text-xs"
+          >
+            <ChevronLeft className="h-3.5 w-3.5" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            aria-label="Next month"
+            onClick={() => onMonthChange?.(new Date(month.getFullYear(), month.getMonth() + 1, 1))}
+            className="flex h-8 w-8 items-center justify-center rounded-full border border-line text-xs"
+          >
+            <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      <div className="mb-3 grid grid-cols-7 text-center" role="row">
+        {WEEKDAY_LABELS.map((day) => (
+          <span key={day} className="text-[10px] font-bold uppercase text-muted">
+            {day}
+          </span>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-7 gap-y-2 text-center">
+        {days.map((date) => {
+          const inMonth = date.getMonth() === month.getMonth();
+          const isToday = isSameDay(date, today);
+          const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
+          const disabled = !inMonth || (isDateDisabled?.(date) ?? false);
+
+          return (
+            <button
+              key={date.toISOString()}
+              type="button"
+              disabled={disabled}
+              aria-current={isToday ? "date" : undefined}
+              aria-pressed={isSelected}
+              onClick={() => onSelectDate?.(date)}
+              className={cn(
+                "mx-auto flex h-9 w-9 items-center justify-center rounded-lg text-sm transition-colors",
+                !inMonth && "text-line",
+                inMonth && !isSelected && "text-ink hover:bg-stone",
+                isToday && !isSelected && "font-medium border border-line",
+                isSelected && "border-2 border-accent bg-accent/10 font-bold text-ink",
+                disabled && inMonth && "cursor-not-allowed text-muted opacity-40 hover:bg-transparent",
+              )}
+            >
+              {date.getDate()}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/ui/profile-card.tsx

@@ -0,0 +1,46 @@
+import Image from "next/image";
+import { Pencil } from "lucide-react";
+import type { ReactNode } from "react";
+import { Card } from "@/components/ui/card";
+
+export interface ProfileCardProps {
+  name: string;
+  meta?: ReactNode;
+  avatarUrl?: string;
+  onEdit?: () => void;
+}
+
+/** Avatar + name + meta + edit-pencil pattern reused across nearly every settings/profile screen. */
+export function ProfileCard({ name, meta, avatarUrl, onEdit }: ProfileCardProps) {
+  return (
+    <Card className="flex items-center gap-4 p-5">
+      {avatarUrl ? (
+        <Image
+          src={avatarUrl}
+          alt=""
+          width={64}
+          height={64}
+          className="h-16 w-16 rounded-full border border-line object-cover"
+        />
+      ) : (
+        <div className="flex h-16 w-16 items-center justify-center rounded-full border border-line bg-stone text-xl font-bold text-muted">
+          {name.charAt(0)}
+        </div>
+      )}
+      <div className="flex-1">
+        <h2 className="text-lg font-bold">{name}</h2>
+        {meta && <div className="mt-0.5 text-xs text-muted">{meta}</div>}
+      </div>
+      {onEdit && (
+        <button
+          type="button"
+          onClick={onEdit}
+          aria-label={`Edit ${name}`}
+          className="flex h-10 w-10 items-center justify-center rounded-full bg-stone text-ink"
+        >
+          <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      )}
+    </Card>
+  );
+}

src/components/ui/select.tsx

@@ -0,0 +1,63 @@
+import { ChevronDown } from "lucide-react";
+import { forwardRef, useId } from "react";
+import type { SelectHTMLAttributes } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+}
+
+/**
+ * Native <select> rather than a custom listbox — on iOS/Android this gets
+ * the OS's own picker UI for free, which a hand-built listbox can't match,
+ * and it's accessible by default. See docs/implementation-plan.md §7.
+ */
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, label, error, id, required, children, ...props }, ref) => {
+    const generatedId = useId();
+    const selectId = id ?? generatedId;
+    const errorId = error ? `${selectId}-error` : undefined;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={selectId}
+            className="mb-2 ml-1 block text-[10px] font-bold uppercase tracking-widest text-muted"
+          >
+            {label}
+            {required && <span aria-hidden="true"> *</span>}
+          </label>
+        )}
+        <div className="relative">
+          <select
+            ref={ref}
+            id={selectId}
+            required={required}
+            aria-invalid={!!error || undefined}
+            aria-describedby={errorId}
+            className={cn(
+              "w-full appearance-none rounded-xl border border-line bg-white px-4 py-3 pr-10 text-sm font-medium outline-none transition-all focus:ring-2 focus:ring-ink",
+              error && "border-red-300 focus:ring-red-400",
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </select>
+          <ChevronDown
+            aria-hidden="true"
+            className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted"
+          />
+        </div>
+        {error && (
+          <p id={errorId} role="alert" className="mt-1.5 ml-1 text-xs font-medium text-red-500">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+Select.displayName = "Select";

src/components/ui/service-card.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { ServiceSummary } from "@/types/domain";
+
+export interface ServiceCardProps {
+  service: ServiceSummary;
+  action?: ReactNode;
+}
+
+/** Row layout matching the service lists on the business page and Services & Categories screens. */
+export function ServiceCard({ service, action }: ServiceCardProps) {
+  return (
+    <div className="flex items-center justify-between gap-4 py-4">
+      <div className="flex-1">
+        <h4 className="text-sm font-medium">{service.name}</h4>
+        <p className="mt-1 text-xs text-muted">{service.durationMinutes}m</p>
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="font-bold">{service.formattedPrice}</span>
+        {action}
+      </div>
+    </div>
+  );
+}

src/components/ui/status-pill.tsx

@@ -0,0 +1,27 @@
+import type { AppointmentStatus } from "@/types/domain";
+import { cn } from "@/lib/utils/cn";
+
+const STATUS_CONFIG: Record<AppointmentStatus, { label: string; className: string }> = {
+  pending_approval: { label: "Pending Approval", className: "bg-amber-100 text-amber-700" },
+  confirmed: { label: "Confirmed", className: "bg-accent/10 text-accent" },
+  arrived: { label: "Arrived", className: "bg-accent/10 text-accent" },
+  in_progress: { label: "In Progress", className: "bg-blue-100 text-blue-700" },
+  completed: { label: "Completed", className: "bg-stone text-muted" },
+  cancelled: { label: "Cancelled", className: "bg-red-50 text-red-500" },
+  no_show: { label: "No-show", className: "bg-red-50 text-red-500" },
+};
+
+export function StatusPill({ status, className }: { status: AppointmentStatus; className?: string }) {
+  const config = STATUS_CONFIG[status];
+  return (
+    <span
+      className={cn(
+        "inline-block rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-widest",
+        config.className,
+        className,
+      )}
+    >
+      {config.label}
+    </span>
+  );
+}

src/components/ui/switch.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { forwardRef, useId } from "react";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface SwitchProps extends SwitchPrimitive.SwitchProps {
+  label?: ReactNode;
+  description?: ReactNode;
+}
+
+/**
+ * Radix Switch rather than a hand-rolled checkbox-as-toggle: gets correct
+ * `role="switch"` + `aria-checked` semantics and keyboard handling without
+ * re-deriving them. The templates never implemented a real toggle
+ * (settings screens just re-styled plain buttons) — this is the first
+ * functional one, used everywhere a boolean setting appears.
+ */
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ className, label, description, id, ...props }, ref) => {
+    const generatedId = useId();
+    const switchId = id ?? generatedId;
+
+    const control = (
+      <SwitchPrimitive.Root
+        ref={ref}
+        id={switchId}
+        className={cn(
+          "relative h-6 w-11 shrink-0 cursor-pointer rounded-full bg-line outline-none transition-colors",
+          "data-[state=checked]:bg-accent",
+          "focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-stone",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <SwitchPrimitive.Thumb className="block h-5 w-5 translate-x-0.5 rounded-full bg-white shadow transition-transform data-[state=checked]:translate-x-[22px]" />
+      </SwitchPrimitive.Root>
+    );
+
+    if (!label) return control;
+
+    return (
+      <label htmlFor={switchId} className="flex cursor-pointer items-center justify-between gap-4">
+        <span>
+          <span className="block text-sm font-bold">{label}</span>
+          {description && <span className="mt-0.5 block text-xs text-muted">{description}</span>}
+        </span>
+        {control}
+      </label>
+    );
+  },
+);
+Switch.displayName = "Switch";

src/components/ui/tabs.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/lib/utils/cn";
+
+/**
+ * Radix Tabs for correct roving-tabindex/arrow-key navigation and
+ * automatic aria-selected/aria-controls wiring — replaces the hand-rolled
+ * `switchTab()` DOM-manipulation script duplicated across several
+ * templates (business page, appointments) with one accessible component.
+ */
+export const Tabs = TabsPrimitive.Root;
+
+export function TabsList({ className, ...props }: TabsPrimitive.TabsListProps) {
+  return (
+    <TabsPrimitive.List
+      className={cn("flex gap-2 rounded-full bg-stone p-1", className)}
+      {...props}
+    />
+  );
+}
+
+export function TabsTrigger({ className, ...props }: TabsPrimitive.TabsTriggerProps) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        "flex-1 rounded-full px-4 py-2.5 text-xs font-bold uppercase tracking-widest text-muted transition-all",
+        "data-[state=active]:bg-ink data-[state=active]:text-white",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-stone",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsContent({ className, ...props }: TabsPrimitive.TabsContentProps) {
+  return (
+    <TabsPrimitive.Content
+      className={cn(
+        "mt-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,57 @@
+import { forwardRef, useId } from "react";
+import type { TextareaHTMLAttributes } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, label, error, hint, id, required, rows = 4, ...props }, ref) => {
+    const generatedId = useId();
+    const textareaId = id ?? generatedId;
+    const hintId = hint ? `${textareaId}-hint` : undefined;
+    const errorId = error ? `${textareaId}-error` : undefined;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="mb-2 ml-1 block text-[10px] font-bold uppercase tracking-widest text-muted"
+          >
+            {label}
+            {required && <span aria-hidden="true"> *</span>}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={textareaId}
+          rows={rows}
+          required={required}
+          aria-invalid={!!error || undefined}
+          aria-describedby={cn(hintId, errorId) || undefined}
+          className={cn(
+            "w-full resize-none rounded-xl border border-line bg-white p-4 text-sm outline-none transition-all placeholder:text-muted focus:ring-2 focus:ring-ink",
+            error && "border-red-300 focus:ring-red-400",
+            className,
+          )}
+          {...props}
+        />
+        {hint && !error && (
+          <p id={hintId} className="mt-1.5 ml-1 text-xs text-muted">
+            {hint}
+          </p>
+        )}
+        {error && (
+          <p id={errorId} role="alert" className="mt-1.5 ml-1 text-xs font-medium text-red-500">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+Textarea.displayName = "Textarea";

src/features/auth/actions/register.ts

@@ -0,0 +1,73 @@
+"use server";
+
+import bcrypt from "bcryptjs";
+import { signIn } from "@/auth";
+import { prisma } from "@/lib/db/prisma";
+import { registerSchema } from "@/features/auth/schemas";
+
+export interface RegisterResult {
+  success: boolean;
+  error?: string;
+  /** Per-field errors, keyed by field name, for the form to surface inline. */
+  fieldErrors?: Record<string, string[] | undefined>;
+}
+
+/**
+ * Creates a User + CustomerProfile in one transaction, then signs the user
+ * straight in — no email-verification gate yet (that needs the
+ * Notifications system, which is out of scope for Phase 2; see
+ * docs/implementation-plan.md §15, Question 3-adjacent).
+ */
+export async function registerAction(formData: FormData): Promise<RegisterResult> {
+  const parsed = registerSchema.safeParse({
+    firstName: formData.get("firstName"),
+    lastName: formData.get("lastName"),
+    email: formData.get("email"),
+    phone: formData.get("phone"),
+    password: formData.get("password"),
+    confirmPassword: formData.get("confirmPassword"),
+  });
+
+  if (!parsed.success) {
+    return {
+      success: false,
+      error: "Please fix the highlighted fields.",
+      fieldErrors: parsed.error.flatten().fieldErrors,
+    };
+  }
+
+  const { firstName, lastName, email, phone, password } = parsed.data;
+
+  const existing = await prisma.user.findUnique({ where: { email } });
+  if (existing) {
+    return {
+      success: false,
+      error: "An account with this email already exists.",
+      fieldErrors: { email: ["An account with this email already exists."] },
+    };
+  }
+
+  const passwordHash = await bcrypt.hash(password, 12);
+
+  await prisma.user.create({
+    data: {
+      email,
+      phone: phone || null,
+      name: `${firstName} ${lastName}`,
+      passwordHash,
+      customerProfile: {
+        create: {
+          firstName,
+          lastName,
+          email,
+          phone: phone || null,
+          isGuest: false,
+        },
+      },
+    },
+  });
+
+  await signIn("credentials", { email, password, redirectTo: "/home" });
+
+  return { success: true };
+}

src/features/auth/components/register-form.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { registerAction } from "@/features/auth/actions/register";
+import { registerSchema, type RegisterInput } from "@/features/auth/schemas";
+
+export function RegisterForm() {
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<RegisterInput>({
+    resolver: zodResolver(registerSchema),
+  });
+
+  const onSubmit = async (data: RegisterInput) => {
+    setFormError(null);
+    const formData = new FormData();
+    Object.entries(data).forEach(([key, value]) => formData.set(key, value ?? ""));
+
+    const result = await registerAction(formData);
+
+    // A successful call redirects server-side and never resolves here with
+    // success: true in practice, but we still handle it for completeness.
+    if (!result.success) {
+      setFormError(result.error ?? "Something went wrong. Please try again.");
+      if (result.fieldErrors) {
+        for (const [field, messages] of Object.entries(result.fieldErrors)) {
+          if (messages?.[0]) {
+            setError(field as keyof RegisterInput, { message: messages[0] });
+          }
+        }
+      }
+    }
+  };
+
+  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")} />
+      </div>
+      <Input
+        label="Email Address"
+        type="email"
+        placeholder="name@example.com"
+        error={errors.email?.message}
+        {...register("email")}
+      />
+      <Input
+        label="Phone Number (optional)"
+        type="tel"
+        placeholder="+44 7700 900000"
+        error={errors.phone?.message}
+        {...register("phone")}
+      />
+      <Input
+        label="Password"
+        type="password"
+        placeholder="••••••••"
+        error={errors.password?.message}
+        {...register("password")}
+      />
+      <Input
+        label="Confirm Password"
+        type="password"
+        placeholder="••••••••"
+        error={errors.confirmPassword?.message}
+        {...register("confirmPassword")}
+      />
+
+      {formError && (
+        <p role="alert" className="text-sm font-medium text-red-500">
+          {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>
+
+      <Button type="submit" className="mt-4 w-full" isLoading={isSubmitting}>
+        Sign Up
+      </Button>
+
+      <p className="mt-10 text-center text-sm text-muted">
+        Already have an account?{" "}
+        <Link href="/sign-in" className="border-b border-ink font-bold text-ink">
+          Log in
+        </Link>
+      </p>
+    </form>
+  );
+}

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

@@ -0,0 +1,100 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Mail, Lock } from "lucide-react";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { signInSchema, type SignInInput } from "@/features/auth/schemas";
+
+export function SignInForm() {
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") ?? "/home";
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<SignInInput>({
+    resolver: zodResolver(signInSchema),
+  });
+
+  const onSubmit = async (data: SignInInput) => {
+    setFormError(null);
+    const result = await signIn("credentials", { ...data, redirect: false, callbackUrl });
+    if (result?.error) {
+      setFormError("Incorrect email or password.");
+      return;
+    }
+    window.location.assign(result?.url ?? callbackUrl);
+  };
+
+  return (
+    <div className="w-full">
+      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
+        <Input
+          label="Email Address"
+          type="email"
+          icon={<Mail className="h-4 w-4" aria-hidden="true" />}
+          placeholder="name@example.com"
+          error={errors.email?.message}
+          {...register("email")}
+        />
+        <Input
+          label="Password"
+          id="password"
+          type="password"
+          icon={<Lock className="h-4 w-4" aria-hidden="true" />}
+          placeholder="••••••••"
+          error={errors.password?.message}
+          {...register("password")}
+        />
+        {/* Password reset needs the Notifications system (email delivery)
+            to actually send a reset link — out of scope for this phase.
+            The "Forgot Password" template (8) is a design reference for
+            when that lands; no dead link to it here in the meantime. */}
+
+        {formError && (
+          <p role="alert" className="text-sm font-medium text-red-500">
+            {formError}
+          </p>
+        )}
+
+        <Button type="submit" className="mt-2 w-full" isLoading={isSubmitting}>
+          Sign In
+        </Button>
+      </form>
+
+      <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>
+          <span className="relative bg-stone px-4 text-[10px] font-bold uppercase tracking-widest text-muted">
+            Or continue with
+          </span>
+        </div>
+        <Button
+          type="button"
+          variant="secondary"
+          className="w-full normal-case tracking-normal"
+          onClick={() => signIn("google", { callbackUrl })}
+        >
+          Continue with Google
+        </Button>
+      </div>
+
+      <p className="mt-10 text-center text-sm text-muted">
+        Don&apos;t have an account?{" "}
+        <Link href="/register" className="border-b-2 border-ink font-bold text-ink">
+          Create one
+        </Link>
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+import { signOut } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+
+export function SignOutButton() {
+  return (
+    <Button
+      variant="secondary"
+      className="w-full text-red-500 hover:bg-red-50"
+      onClick={() => signOut({ callbackUrl: "/" })}
+    >
+      <LogOut className="h-4 w-4" aria-hidden="true" />
+      Log Out
+    </Button>
+  );
+}

src/features/auth/schemas.ts

@@ -0,0 +1,28 @@
+import { z } from "zod";
+
+/**
+ * Single source of truth for auth form shapes — shared between the client
+ * form (react-hook-form + zodResolver) and the server action / Credentials
+ * `authorize()` callback, so validation never drifts between the two.
+ */
+
+export const signInSchema = z.object({
+  email: z.email("Enter a valid email address"),
+  password: z.string().min(1, "Password is required"),
+});
+export type SignInInput = z.infer<typeof signInSchema>;
+
+export const registerSchema = z
+  .object({
+    firstName: z.string().trim().min(1, "First name is required"),
+    lastName: z.string().trim().min(1, "Last name is required"),
+    email: z.email("Enter a valid email address"),
+    phone: z.string().trim().optional().or(z.literal("")),
+    password: z.string().min(8, "Password must be at least 8 characters"),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ["confirmPassword"],
+  });
+export type RegisterInput = z.infer<typeof registerSchema>;

src/lib/auth/permissions.ts

@@ -0,0 +1,25 @@
+import { prisma } from "@/lib/db/prisma";
+import type { Permission } from "@/generated/prisma/enums";
+
+/**
+ * Foundation for Phase 3+ role gating — not exercised by any UI yet.
+ * Deliberately re-checks the database rather than trusting only the JWT:
+ * permission changes (e.g. an owner demoting a barber) must take effect
+ * without waiting for the token to expire. See
+ * docs/implementation-plan.md §11 ("Permission enforcement happens AGAIN
+ * at the server-action/service layer — never trust the route group alone").
+ */
+export async function getStaffPermissions(userId: string): Promise<Set<Permission>> {
+  const staffProfile = await prisma.staffProfile.findUnique({
+    where: { userId },
+    include: { role: { include: { permissions: true } } },
+  });
+
+  if (!staffProfile) return new Set();
+  return new Set(staffProfile.role.permissions.map((rolePermission) => rolePermission.permission));
+}
+
+export async function hasPermission(userId: string, permission: Permission): Promise<boolean> {
+  const permissions = await getStaffPermissions(userId);
+  return permissions.has(permission);
+}

src/lib/db/prisma.ts

@@ -0,0 +1,34 @@
+import { PrismaClient } from "@/generated/prisma/client";
+import { PrismaPg } from "@prisma/adapter-pg";
+
+/**
+ * Single Prisma Client instance for the whole app.
+ *
+ * Prisma 7 requires a driver adapter instead of a `datasource.url` in the
+ * schema (see prisma/schema.prisma). This is the ONLY file that imports
+ * `@prisma/adapter-pg` — switching to MySQL later means swapping this one
+ * adapter (`@prisma/adapter-mariadb`), updating `datasource.provider` in
+ * the schema, and re-running `prisma migrate dev`. No other file in the
+ * app touches the database driver directly.
+ */
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+const adapter = new PrismaPg({
+  connectionString: process.env.DATABASE_URL,
+});
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    adapter,
+    log: process.env.NODE_ENV === "development" ? ["warn", "error"] : ["error"],
+  });
+
+// Reuse the client across hot-reloads in dev so we don't exhaust the
+// connection pool every time a file changes.
+if (process.env.NODE_ENV !== "production") {
+  globalForPrisma.prisma = prisma;
+}

src/lib/navigation/staff-nav-items.ts

@@ -0,0 +1,23 @@
+import type { BottomNavItem } from "@/components/navigation/bottom-nav";
+
+/**
+ * Single source of truth for the staff/owner bottom nav. The templates had
+ * two competing 4-item sets for what is conceptually the same nav
+ * (Calendar/Current/Clients/Settings on most staff+owner screens vs.
+ * Dashboard/Staff/Calendar/Admin on the Team Management screen — see
+ * docs/implementation-plan.md §5/§8). Owner-only screens (team, business
+ * settings, etc.) are reached from Settings rather than getting their own
+ * top-level tab, so this one list serves both the (staff) and (owner)
+ * route groups.
+ *
+ * Icons are string keys, not component references — this module is
+ * imported by Server Component layouts, and a Lucide icon component isn't
+ * a serializable prop across the Server → Client boundary into `BottomNav`
+ * (see bottom-nav.tsx).
+ */
+export const STAFF_NAV_ITEMS: BottomNavItem[] = [
+  { href: "/staff", label: "Calendar", icon: "calendar-days" },
+  { href: "/staff/current", label: "Current", icon: "scissors" },
+  { href: "/staff/clients", label: "Clients", icon: "users" },
+  { href: "/staff/settings", label: "Settings", icon: "settings" },
+];

src/lib/utils/cn.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merge Tailwind class lists safely — later classes win over earlier ones
+ * for the same utility group (e.g. `cn("px-4", condition && "px-6")`).
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/proxy.ts

@@ -0,0 +1,30 @@
+import NextAuth from "next-auth";
+import { NextResponse } from "next/server";
+import { authConfig } from "@/auth.config";
+
+const PROTECTED_PREFIXES = ["/home", "/appointments", "/settings", "/staff", "/owner"];
+
+// Lightweight instance built from the DB-free config — see auth.config.ts.
+// Next.js 16 renamed this file convention from `middleware` to `proxy`
+// (https://nextjs.org/docs/messages/middleware-to-proxy); it now always
+// runs on the Node.js runtime rather than Edge, but this stays split from
+// the full `@/auth` regardless, so checking "is there a session" doesn't
+// spin up a Postgres connection pool on every request.
+const { auth } = NextAuth(authConfig);
+
+export default auth((req) => {
+  const { pathname } = req.nextUrl;
+  const isProtected = PROTECTED_PREFIXES.some(
+    (prefix) => pathname === prefix || pathname.startsWith(`${prefix}/`),
+  );
+
+  if (isProtected && !req.auth) {
+    const signInUrl = new URL("/sign-in", req.nextUrl.origin);
+    signInUrl.searchParams.set("callbackUrl", pathname);
+    return NextResponse.redirect(signInUrl);
+  }
+});
+
+export const config = {
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};

src/types/domain.ts

@@ -0,0 +1,32 @@
+/**
+ * Small, UI-facing display types. Deliberately NOT imported from
+ * `@/generated/prisma` — components in `components/ui` should never depend
+ * on the ORM layer directly (see docs/implementation-plan.md §11, "Server
+ * and client boundaries"). Feature code maps Prisma results onto these
+ * shapes; if the two drift, that mapping step is exactly where it should
+ * be caught.
+ */
+
+export type AppointmentStatus =
+  | "pending_approval"
+  | "confirmed"
+  | "arrived"
+  | "in_progress"
+  | "completed"
+  | "cancelled"
+  | "no_show";
+
+export interface StaffSummary {
+  id: string;
+  name: string;
+  avatarUrl?: string;
+}
+
+export interface ServiceSummary {
+  id: string;
+  name: string;
+  durationMinutes: number;
+  /** Formatted for display, e.g. "£22.00" — currency formatting is a
+   * presentation concern handled once, upstream of these components. */
+  formattedPrice: string;
+}

src/types/next-auth.d.ts

@@ -0,0 +1,15 @@
+import type { DefaultSession } from "next-auth";
+
+declare module "next-auth" {
+  interface Session {
+    user: {
+      id: string;
+    } & DefaultSession["user"];
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    id?: string;
+  }
+}