Revert "PHP Rebuild"

This reverts commit 2ef3654841.

src/components/deployment-providers.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { ManagerProviders } from "@/components/manager-providers";
+import { Providers } from "@/components/providers";
+
+/**
+ * Keep the business provider graph behind a client boundary. This prevents
+ * the Manager server bundle from evaluating SessionProvider or its business
+ * client-side dependencies while still preserving the business provider
+ * behavior when the deployment mode is false.
+ */
+export function DeploymentProviders({ managerMode, children }: { managerMode: boolean; children: ReactNode }) {
+  return managerMode ? <ManagerProviders>{children}</ManagerProviders> : <Providers>{children}</Providers>;
+}

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="bg-danger/10 text-danger mb-5 flex h-16 w-16 items-center justify-center rounded-full">
+        <TriangleAlert className="h-6 w-6" aria-hidden="true" />
+      </div>
+      <h3 className="mb-1 text-base font-bold">{title}</h3>
+      <p className="text-muted mb-6 text-sm">{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-md 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/manager-providers.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+/**
+ * Manager authentication uses its own signed cookie. This provider is kept
+ * free of next-auth/react so the Manager never polls `/api/auth/session`.
+ */
+export function ManagerProviders({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

src/components/navigation/bottom-nav.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Briefcase, CalendarCheck, CalendarDays, ChartLine, Gift, House, Scissors, Settings, User, Users } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+import { resolveActiveHref } from "@/lib/navigation/nav-config";
+
+/**
+ * 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.
+ */
+export const NAV_ICON_MAP = {
+  house: House,
+  "calendar-check": CalendarCheck,
+  gift: Gift,
+  user: User,
+  "calendar-days": CalendarDays,
+  scissors: Scissors,
+  users: Users,
+  settings: Settings,
+  "chart-line": ChartLine,
+  briefcase: Briefcase,
+} satisfies Record<string, LucideIcon>;
+
+export type BottomNavIconName = keyof typeof NAV_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";
+  /** Business-wide, Super Administrator-only display setting (see Business.bottomNavShowLabels) — defaults to the original icon+label layout when a caller doesn't pass it. */
+  showLabels?: boolean;
+}
+
+/**
+ * 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", showLabels = true }: BottomNavProps) {
+  const pathname = usePathname();
+  const isStaff = variant === "staff";
+  const activeHref = resolveActiveHref(pathname, items);
+
+  return (
+    <nav
+      aria-label="Primary"
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 border-t px-5 py-2",
+        "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+        isStaff ? "border-white/5 bg-[#0c0c0c] text-gray-400" : "border-line text-muted bg-white",
+        // Staff/owner get a persistent left sidebar at lg+ instead (see
+        // staff-sidebar-nav.tsx) — a bottom bar doesn't earn its keep once
+        // there's room for one-hand-unnecessary desktop chrome. Customer
+        // nav stays bottom-anchored at every size; that's Phase 4 scope.
+        isStaff && "lg:hidden",
+      )}
+    >
+      {/* The bar itself stays edge-to-edge (matches the booking flow's fixed
+          action bars); only the items inside are centered/width-capped so
+          they don't stretch out unreadably on a wide desktop viewport. */}
+      <div className="mx-auto flex w-full max-w-2xl items-center justify-between">
+        {items.map(({ href, label, icon }) => {
+          const Icon = NAV_ICON_MAP[icon];
+          const active = href === activeHref;
+          return (
+            <Link
+              key={href}
+              href={href}
+              aria-current={active ? "page" : undefined}
+              // Icon-only drops the flex-col label row entirely (not just
+              // hides the text) so the tap target re-centers vertically
+              // instead of leaving an empty gap where the label used to be.
+              aria-label={showLabels ? undefined : label}
+              className={cn(
+                "flex items-center rounded-lg transition-colors",
+                showLabels ? "flex-col gap-1 px-3 py-1" : "justify-center px-4 py-2",
+                active ? (isStaff ? "text-white" : "text-ink") : "hover:text-ink",
+                isStaff && !active && "hover:text-white",
+              )}
+            >
+              <Icon className={showLabels ? "h-5 w-5" : "h-6 w-6"} aria-hidden="true" />
+              {showLabels && <span className="text-[10px] font-bold tracking-widest uppercase">{label}</span>}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

src/components/navigation/staff-shell.tsx

@@ -0,0 +1,39 @@
+import { NotificationBell } from "@/features/notifications/components/notification-bell";
+import { getBranding } from "@/lib/business/branding";
+import { BottomNav } from "./bottom-nav";
+import { StaffSidebarNav } from "./staff-sidebar-nav";
+import type { BottomNavItem } from "./bottom-nav";
+import { getNavItems } from "@/lib/navigation/nav-config";
+
+/**
+ * Shared by (staff) and (owner) — owner and super-admin are permissions on
+ * top of the same app, not separate shells. `items` is the merged,
+ * role-aware nav list from lib/navigation/nav-config.ts (defaults to the
+ * barber nav) — same shell, same sidebar/bottom-nav components, one
+ * centralized nav configuration rather than parallel staff/owner ones.
+ *
+ * Reads business branding itself (async Server Component) rather than
+ * requiring every (staff)/(owner) layout to fetch and thread it through —
+ * one call site covers both.
+ */
+export async function StaffShell({
+  children,
+  items = getNavItems("staff"),
+  notificationsHref = "/staff/notifications",
+  unreadNotificationCount = 0,
+}: {
+  children: React.ReactNode;
+  items?: BottomNavItem[];
+  notificationsHref?: string;
+  unreadNotificationCount?: number;
+}) {
+  const branding = await getBranding();
+  return (
+    <div className="min-h-screen bg-stone pb-24 lg:pb-0 lg:pl-56">
+      <StaffSidebarNav items={items} businessName={branding.name} logoUrl={branding.logoUrl} />
+      <NotificationBell href={notificationsHref} unreadCount={unreadNotificationCount} />
+      <div id="main-content">{children}</div>
+      <BottomNav items={items} variant="staff" showLabels={branding.bottomNavShowLabels} />
+    </div>
+  );
+}

src/components/navigation/staff-sidebar-nav.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Scissors } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+import { NAV_ICON_MAP } from "./bottom-nav";
+import type { BottomNavItem } from "./bottom-nav";
+import { resolveActiveHref } from "@/lib/navigation/nav-config";
+
+/**
+ * The desktop counterpart to BottomNav's staff variant — a persistent left
+ * rail instead of a bottom bar, shown only at lg+ (BottomNav hides itself
+ * there in turn, see bottom-nav.tsx). Same dark palette, same nav items,
+ * same active-route logic; just a different shape for a screen with room
+ * to spare. One role-aware `items` list (see lib/navigation/nav-config.ts)
+ * covers barber, owner and super-admin — there is no separate owner
+ * sidebar or "switch tools" control here.
+ */
+export function StaffSidebarNav({
+  items,
+  businessName,
+  logoUrl,
+}: {
+  items: BottomNavItem[];
+  businessName: string;
+  logoUrl: string | null;
+}) {
+  const pathname = usePathname();
+  const activeHref = resolveActiveHref(pathname, items);
+
+  return (
+    <nav
+      aria-label="Primary"
+      className="fixed inset-y-0 left-0 z-50 hidden w-56 flex-col border-r border-white/5 bg-[#0c0c0c] px-4 py-6 lg:flex"
+    >
+      <div className="mb-8 flex items-center gap-2 px-2 text-white">
+        {logoUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element -- external, business-supplied URL.
+          <img src={logoUrl} alt="" className="h-5 w-5 rounded object-cover" />
+        ) : (
+          <Scissors className="h-5 w-5" aria-hidden="true" />
+        )}
+        <span className="truncate text-sm font-bold tracking-widest uppercase">{businessName}</span>
+      </div>
+      <div className="flex flex-1 flex-col gap-1">
+        {items.map(({ href, label, icon }) => {
+          const Icon = NAV_ICON_MAP[icon];
+          const active = href === activeHref;
+          return (
+            <Link
+              key={href}
+              href={href}
+              aria-current={active ? "page" : undefined}
+              className={cn(
+                "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-bold transition-colors",
+                active ? "bg-white/10 text-white" : "text-gray-400 hover:bg-white/5 hover:text-white",
+              )}
+            >
+              <Icon className="h-4 w-4" aria-hidden="true" />
+              {label}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

src/components/navigation/top-nav.tsx

@@ -0,0 +1,53 @@
+"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;
+  /** Rendered in the back button's place when `onBack` isn't given — e.g. a notification bell on a top-level page that has no "back" to go to. Ignored if `onBack` is set. */
+  leftAction?: ReactNode;
+  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, leftAction, 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>
+        ) : (
+          leftAction
+        )}
+        <h1 className="text-xl font-bold tracking-tight">{title}</h1>
+      </div>
+      {action}
+    </header>
+  );
+}

src/components/providers.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import type { ReactNode } from "react";
+import { ServiceWorkerManager } from "@/features/pwa/components/service-worker-manager";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <SessionProvider>
+      <ServiceWorkerManager />
+      {children}
+    </SessionProvider>
+  );
+}

src/components/settings/settings-page-shell.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { TopNav } from "@/components/navigation/top-nav";
+import { cn } from "@/lib/utils/cn";
+
+export interface SettingsPageShellProps {
+  title: string;
+  children: ReactNode;
+  /** Merged onto the default `<main>` classes via cn()/tailwind-merge — pass e.g. "lg:max-w-2xl" to opt out of the default wide desktop layout, or extra utilities like "space-y-8". */
+  mainClassName?: string;
+}
+
+/**
+ * The TopNav + centered container wrapper repeated verbatim across every
+ * owner settings page (Business Details, Gallery, Loyalty, Booking
+ * Rules, Opening Hours, Reviews, ...) — extracted here in Phase 9 once
+ * enough pages shared it to be worth the indirection. See
+ * docs/phase-9-summary.md, "Architecture Review".
+ */
+export function SettingsPageShell({ title, children, mainClassName }: SettingsPageShellProps) {
+  return (
+    <div className="pb-12">
+      <TopNav title={title} onBack sticky className="bg-stone" />
+      <main className={cn("mx-auto max-w-2xl px-6 py-6 lg:max-w-4xl", mainClassName)}>{children}</main>
+    </div>
+  );
+}

src/components/ui/appointment-card.tsx

@@ -0,0 +1,84 @@
+import Image from "next/image";
+import { Gift, NotebookText } from "lucide-react";
+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;
+  /** The other party shown on the card — the barber on a customer-facing card, the customer on a staff-facing one. Same {id, name, avatarUrl} shape either way. */
+  person: StaffSummary;
+  /** Defaults to "with" — a staff card might prefer e.g. "for". */
+  personLabel?: string;
+  /** Pre-formatted for display, e.g. "Sat, Oct 12" — omit when the surrounding page already makes the date clear (e.g. a single day's agenda). */
+  formattedDate?: string;
+  /** Pre-formatted for display, e.g. "2:00 PM". */
+  formattedTime: string;
+  /** Small notes-exist indicator — staff calendar/agenda use, customer cards leave this unset. */
+  hasNotes?: boolean;
+  /** Small loyalty-reward-available indicator — same. */
+  hasAvailableReward?: boolean;
+  /** 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,
+  person,
+  personLabel = "with",
+  formattedDate,
+  formattedTime,
+  hasNotes,
+  hasAvailableReward,
+  actions,
+}: AppointmentCardProps) {
+  return (
+    <Card className="p-5">
+      <div className="mb-4 flex items-start justify-between">
+        <StatusPill status={status} />
+        <div className="text-right">
+          {formattedDate && <p className="text-sm font-bold">{formattedDate}</p>}
+          <p className="text-muted text-xs">{formattedTime}</p>
+        </div>
+      </div>
+      <div className="mb-4 flex items-center gap-3">
+        {person.avatarUrl ? (
+          <Image
+            src={person.avatarUrl}
+            alt=""
+            width={40}
+            height={40}
+            className="h-10 w-10 rounded-full object-cover"
+          />
+        ) : (
+          <div className="bg-stone text-muted flex h-10 w-10 items-center justify-center rounded-full text-xs font-bold">
+            {person.name.charAt(0)}
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1.5">
+            <h3 className="truncate text-sm font-bold">{serviceName}</h3>
+            {hasNotes && (
+              <NotebookText className="text-muted h-3.5 w-3.5 shrink-0" aria-label="Has notes" />
+            )}
+            {hasAvailableReward && (
+              <Gift
+                className="text-accent-loyalty h-3.5 w-3.5 shrink-0"
+                aria-label="Reward available"
+              />
+            )}
+          </div>
+          <p className="text-muted text-xs">
+            {personLabel} {person.name}
+          </p>
+        </div>
+      </div>
+      {actions && <div className="border-line flex gap-2 border-t 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,73 @@
+"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-danger/30 text-danger hover:bg-danger/10",
+      },
+      size: {
+        sm: "h-9 rounded-md px-4 text-[10px]",
+        md: "h-12 rounded-md px-6 text-xs",
+        lg: "h-[52px] rounded-md px-8 text-xs",
+        icon: "h-10 w-10 rounded-md",
+      },
+    },
+    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-md 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/color-picker.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useId, useState } from "react";
+import { cn } from "@/lib/utils/cn";
+
+const DEFAULT_PRESETS = ["#111b15", "#1d4ed8", "#b91c1c", "#15803d", "#a16207", "#374151", "#ffffff"];
+const HEX_PATTERN = /^#[0-9a-f]{6}$/i;
+
+export interface ColorPickerProps {
+  label?: string;
+  value: string | null | undefined;
+  onChange: (hex: string) => void;
+  presets?: string[];
+  className?: string;
+}
+
+/**
+ * Single reusable colour input — native swatch + hex text field + presets
+ * — shared by theme/background colour (Business Branding) and the
+ * loyalty card designer rather than each screen rolling its own. See
+ * docs/phase-9-summary.md.
+ */
+export function ColorPicker({ label, value, onChange, presets = DEFAULT_PRESETS, className }: ColorPickerProps) {
+  const id = useId();
+  const [text, setText] = useState(value ?? "");
+  const swatchColor = value && HEX_PATTERN.test(value) ? value : "#000000";
+
+  function commit(next: string) {
+    setText(next);
+    if (HEX_PATTERN.test(next)) onChange(next);
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      {label && (
+        <label htmlFor={id} className="text-muted mb-2 ml-1 block text-[10px] font-bold tracking-widest uppercase">
+          {label}
+        </label>
+      )}
+      <div className="flex items-center gap-3">
+        <label
+          className="border-line relative h-11 w-11 shrink-0 overflow-hidden rounded-xl border"
+          style={{ backgroundColor: swatchColor }}
+        >
+          <input
+            type="color"
+            value={swatchColor}
+            onChange={(e) => commit(e.target.value)}
+            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            aria-label={label ? `${label} colour swatch` : "Colour swatch"}
+          />
+        </label>
+        <input
+          id={id}
+          type="text"
+          value={text}
+          onChange={(e) => commit(e.target.value)}
+          placeholder="#111b15"
+          spellCheck={false}
+          className="border-line placeholder:text-muted focus:ring-ink w-full rounded-xl border bg-white px-4 py-3 font-mono text-sm outline-none focus:ring-2"
+        />
+      </div>
+      {presets.length > 0 && (
+        <div className="mt-2 flex flex-wrap gap-2">
+          {presets.map((preset) => (
+            <button
+              key={preset}
+              type="button"
+              onClick={() => commit(preset)}
+              aria-label={`Use ${preset}`}
+              className={cn(
+                "h-6 w-6 rounded-full border-2",
+                swatchColor.toLowerCase() === preset.toLowerCase() ? "border-ink" : "border-transparent",
+              )}
+              style={{ backgroundColor: preset }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/ui/icon-picker.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useId, useMemo, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Search } from "lucide-react";
+import { Modal } from "@/components/ui/modal";
+import { ICON_CATALOG, findCatalogIcon } from "@/lib/icons/icon-catalog";
+import { cn } from "@/lib/utils/cn";
+
+export interface IconPickerProps {
+  label?: string;
+  value: string | null | undefined;
+  onChange: (iconName: string) => void;
+}
+
+/** Searchable Font Awesome icon picker — replaces free-text icon-name input (e.g. the loyalty stamp icon). See src/lib/icons/icon-catalog.ts. */
+export function IconPicker({ label, value, onChange }: IconPickerProps) {
+  const labelId = useId();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const selected = findCatalogIcon(value);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return ICON_CATALOG;
+    return ICON_CATALOG.filter((icon) => icon.iconName.toLowerCase().includes(q));
+  }, [query]);
+
+  return (
+    <div className="w-full">
+      {label && (
+        <span id={labelId} className="text-muted mb-2 ml-1 block text-[10px] font-bold tracking-widest uppercase">
+          {label}
+        </span>
+      )}
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-labelledby={label ? labelId : undefined}
+        className="border-line flex w-full items-center gap-3 rounded-xl border bg-white px-5 py-4 text-left text-sm"
+      >
+        <span className="bg-stone flex h-9 w-9 shrink-0 items-center justify-center rounded-full">
+          <FontAwesomeIcon icon={selected} className="h-4 w-4" />
+        </span>
+        <span className="flex-1 capitalize">{selected.iconName.replace(/-/g, " ")}</span>
+        <span className="text-muted text-xs font-bold tracking-widest uppercase">Change</span>
+      </button>
+
+      <Modal open={open} onClose={() => setOpen(false)} title="Choose an icon">
+        <div className="relative mb-4">
+          <Search className="text-muted pointer-events-none absolute top-1/2 left-4 h-4 w-4 -translate-y-1/2" aria-hidden="true" />
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search icons"
+            className="border-line focus:ring-ink w-full rounded-xl border bg-white py-3 pr-4 pl-11 text-sm outline-none focus:ring-2"
+          />
+        </div>
+        {filtered.length === 0 ? (
+          <p className="text-muted py-6 text-center text-sm">No icons match &ldquo;{query}&rdquo;.</p>
+        ) : (
+          <div className="grid max-h-80 grid-cols-5 gap-2 overflow-y-auto">
+            {filtered.map((icon) => (
+              <button
+                key={icon.iconName}
+                type="button"
+                onClick={() => {
+                  onChange(icon.iconName);
+                  setOpen(false);
+                }}
+                aria-label={icon.iconName}
+                aria-pressed={icon.iconName === selected.iconName}
+                className={cn(
+                  "flex aspect-square flex-col items-center justify-center rounded-xl border",
+                  icon.iconName === selected.iconName ? "border-ink bg-stone" : "border-line hover:bg-stone",
+                )}
+              >
+                <FontAwesomeIcon icon={icon} className="h-4 w-4" />
+              </button>
+            ))}
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+}

src/components/ui/image-gallery.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+
+export interface ImageGalleryProps {
+  images: { id: string; url: string; caption?: string | null }[];
+  className?: string;
+}
+
+/**
+ * Home page hero — a real gallery with thumbnails (Phase 9), replacing
+ * the old single full-bleed logo banner. Matches the content width rather
+ * than bleeding edge-to-edge, per the brief. Plain click-to-swap + arrow
+ * buttons; no swipe-gesture library, since the thumbnail strip already
+ * covers "jump to any image" and arrows cover "next/previous" — a
+ * touch-drag carousel would be a reasonable future upgrade, not required
+ * for this to be a real gallery.
+ */
+export function ImageGallery({ images, className }: ImageGalleryProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  if (images.length === 0) return null;
+
+  const active = images[Math.min(activeIndex, images.length - 1)]!;
+  const goTo = (index: number) => setActiveIndex((index + images.length) % images.length);
+
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="bg-stone relative aspect-[16/9] w-full overflow-hidden">
+        {/* eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern used app-wide */}
+        <img src={active.url} alt={active.caption ?? ""} className="h-full w-full object-cover" />
+        {images.length > 1 && (
+          <>
+            <button
+              type="button"
+              onClick={() => goTo(activeIndex - 1)}
+              aria-label="Previous image"
+              className="bg-ink/60 hover:bg-ink/80 absolute top-1/2 left-3 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-sm text-white"
+            >
+              <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              onClick={() => goTo(activeIndex + 1)}
+              aria-label="Next image"
+              className="bg-ink/60 hover:bg-ink/80 absolute top-1/2 right-3 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-white"
+            >
+              <ChevronRight className="h-4 w-4" aria-hidden="true" />
+            </button>
+          </>
+        )}
+      </div>
+
+      {images.length > 1 && (
+        <div className="px-1 mt-1 flex gap-1 overflow-x-auto">
+          {images.map((image, index) => (
+            <button
+              key={image.id}
+              type="button"
+              onClick={() => setActiveIndex(index)}
+              aria-label={`Show image ${index + 1}`}
+              aria-current={index === activeIndex}
+              className={cn(
+                "h-14 w-20 shrink-0 overflow-hidden border-2",
+                index === activeIndex ? "border-ink" : "border-transparent opacity-70",
+              )}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern used app-wide */}
+              <img src={image.url} alt="" className="h-full w-full object-cover" />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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="text-muted mb-2 ml-1 block text-[10px] font-bold tracking-widest uppercase"
+          >
+            {label}
+            {required && <span aria-hidden="true"> *</span>}
+          </label>
+        )}
+        <div className="relative">
+          {icon && (
+            <span className="text-muted pointer-events-none absolute top-1/2 left-5 -translate-y-1/2">
+              {icon}
+            </span>
+          )}
+          <input
+            ref={ref}
+            id={inputId}
+            required={required}
+            aria-invalid={!!error || undefined}
+            aria-describedby={cn(hintId, errorId) || undefined}
+            className={cn(
+              "border-line placeholder:text-muted focus:ring-ink w-full rounded-xl border bg-white px-5 py-4 text-sm transition-all outline-none focus:ring-2",
+              icon && "pl-12",
+              error && "border-danger/50 focus:ring-danger",
+              className,
+            )}
+            {...props}
+          />
+        </div>
+        {hint && !error && (
+          <p id={hintId} className="text-muted mt-1.5 ml-1 text-xs">
+            {hint}
+          </p>
+        )}
+        {error && (
+          <p id={errorId} role="alert" className="text-danger mt-1.5 ml-1 text-xs font-medium">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+Input.displayName = "Input";

src/components/ui/loyalty-card.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Gift } from "lucide-react";
+import { LoyaltyCardFont, LoyaltyCardTextSize, RewardPositionMode } from "@/generated/prisma/enums";
+import { findCatalogIcon } from "@/lib/icons/icon-catalog";
+import { cn } from "@/lib/utils/cn";
+import { resolveRewardThreshold } from "@/services/loyalty/reward-threshold";
+
+const FONT_CLASSES: Record<LoyaltyCardFont, string> = {
+  [LoyaltyCardFont.SANS]: "font-sans",
+  [LoyaltyCardFont.SERIF]: "font-serif",
+  [LoyaltyCardFont.MONO]: "font-mono",
+};
+
+/** MD matches the size "Loyalty Card" rendered at before this was configurable, so leaving this unset doesn't change the default look. */
+const TITLE_TEXT_SIZE_CLASSES: Record<LoyaltyCardTextSize, string> = {
+  [LoyaltyCardTextSize.SM]: "text-base",
+  [LoyaltyCardTextSize.MD]: "text-lg",
+  [LoyaltyCardTextSize.LG]: "text-2xl",
+};
+
+export interface LoyaltyCardProps {
+  businessName: string;
+  memberNumber: string;
+  stampsRequired: number;
+  stampsEarned: number;
+  rewardLabel: string;
+  termsLine?: string;
+  /** Owner-configured card appearance (LoyaltyProgramme) — see the loyalty settings designer. All optional; sensible defaults apply when unset. */
+  cardBackgroundColor?: string | null;
+  cardBackgroundImageUrl?: string | null;
+  stampIcon?: string | null;
+  /** See resolveRewardThreshold's doc comment — determines whether the final stamp position renders as a normal stamp or as the reward slot itself. */
+  rewardPosition?: RewardPositionMode;
+  /** Replaces the "Loyalty Card" title (top-left) when set. */
+  cardTitleText?: string | null;
+  cardFont?: LoyaltyCardFont;
+  cardTitleTextSize?: LoyaltyCardTextSize;
+  cardTitleTextColor?: string | null;
+  cardBorderColor?: string | null;
+  cardMemberNumberColor?: string | null;
+}
+
+/**
+ * Static, non-flipping card — see docs/phase-9-summary.md ("Loyalty Card
+ * Improvements"). Previously a 3D flip whose back face just repeated the
+ * business name in a generic panel; the brief asked to drop that and only
+ * ever show the stamped side, restyled to feel like a real plastic
+ * loyalty card (diagonal shine + soft depth via layered CSS
+ * gradients/shadows only — no extra image asset, so this stays cheap to
+ * render). Also, previously, cardBackgroundColor/cardBackgroundImageUrl/
+ * stampIcon were stored on LoyaltyProgramme but never actually reached
+ * this component — every business rendered the same hardcoded card
+ * regardless of configuration. Fixed here.
+ */
+export function LoyaltyCard({
+  businessName,
+  memberNumber,
+  stampsRequired,
+  stampsEarned,
+  rewardLabel,
+  termsLine,
+  cardBackgroundColor,
+  cardBackgroundImageUrl,
+  stampIcon,
+  rewardPosition = RewardPositionMode.AFTER_ALL_STAMPS,
+  cardTitleText,
+  cardFont = LoyaltyCardFont.SANS,
+  cardTitleTextSize = LoyaltyCardTextSize.MD,
+  cardTitleTextColor,
+  cardBorderColor,
+  cardMemberNumberColor,
+}: LoyaltyCardProps) {
+  const icon = findCatalogIcon(stampIcon);
+  const threshold = resolveRewardThreshold({ stampsRequired, rewardPosition });
+  // Only FINAL_SLOT_IS_REWARD sets aside a dedicated slot — under
+  // AFTER_ALL_STAMPS every position is a plain stamp and the reward is
+  // shown separately (see the "Reward available" banner on the loyalty
+  // page), not by any one slot.
+  const rewardSlotIndex = rewardPosition === RewardPositionMode.FINAL_SLOT_IS_REWARD ? stampsRequired - 1 : null;
+  const borderColor = cardBorderColor || "var(--color-accent-loyalty)";
+
+  return (
+    <div
+      className={cn(
+        "relative w-full overflow-hidden rounded-2xl",
+        FONT_CLASSES[cardFont],
+      )}
+      style={{
+        aspectRatio: "1.65 / 1",
+        backgroundColor: cardBackgroundColor || "#141414",
+        boxShadow: `0 30px 60px rgba(0,0,0,0.45), 0 0 0 3px ${borderColor}`,
+      }}
+      role="img"
+      aria-label={`${businessName} loyalty card, ${stampsEarned} of ${stampsRequired} stamps`}
+    >
+      {cardBackgroundImageUrl && (
+        // eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern used app-wide
+        <img src={cardBackgroundImageUrl} alt="" className="absolute inset-0 h-full w-full object-cover" />
+      )}
+      {/* Dark scrim so stamps/text stay legible over an arbitrary background image. */}
+      {cardBackgroundImageUrl && <div className="absolute inset-0 bg-black/35" aria-hidden="true" />}
+      {/* Premium plastic-card shine — a soft diagonal highlight, CSS-only. */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            "linear-gradient(115deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.08) 100%)",
+        }}
+        aria-hidden="true"
+      />
+
+      <div className="relative flex h-full flex-col justify-between p-4">
+        <div className="flex items-start justify-between gap-2">
+          <h2
+            className={cn(TITLE_TEXT_SIZE_CLASSES[cardTitleTextSize], "font-black italic tracking-tight text-white")}
+            style={{ color: cardTitleTextColor || undefined }}
+          >
+            {cardTitleText || "Loyalty Card"}
+          </h2>
+          <span
+            className="border-accent-loyalty/30 text-accent-loyalty shrink-0 rounded border px-2 py-0.5 text-[8px] font-bold tracking-widest uppercase"
+            style={{ color: cardMemberNumberColor || undefined, borderColor: cardMemberNumberColor ? `${cardMemberNumberColor}4d` : undefined }}
+          >
+            Member #{memberNumber}
+          </span>
+        </div>
+        <div className="grid grid-cols-5 gap-2">
+          {Array.from({ length: stampsRequired }, (_, i) => {
+            const isRewardSlot = i === rewardSlotIndex;
+            const earned = isRewardSlot ? stampsEarned >= threshold : i < stampsEarned;
+            return (
+              <div
+                key={i}
+                className={cn(
+                  "flex aspect-square items-center justify-center rounded-full",
+                  isRewardSlot
+                    ? earned
+                      ? "bg-accent-loyalty scale-[1.08] shadow-lg"
+                      : "border-accent-loyalty/50 bg-accent-loyalty/10 border-2 border-dashed"
+                    : earned
+                      ? "bg-white shadow-inner"
+                      : "border-2 border-dashed border-white/20 bg-white/10",
+                )}
+              >
+                {isRewardSlot ? (
+                  earned ? (
+                    <span className="text-ink text-center text-[7px] leading-tight font-black">{rewardLabel}</span>
+                  ) : (
+                    <Gift className="text-accent-loyalty h-3.5 w-3.5" aria-hidden="true" />
+                  )
+                ) : earned ? (
+                  <FontAwesomeIcon icon={icon} className="text-ink h-3.5 w-3.5" />
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+        {termsLine && (
+          <p className="mt-2 text-center text-[7px] font-bold tracking-widest text-white/40 uppercase">{termsLine}</p>
+        )}
+      </div>
+    </div>
+  );
+}

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-md 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,52 @@
+import Image from "next/image";
+import Link from "next/link";
+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;
+  /** Renders the edit-pencil as a `<Link>` instead of a button — lets a Server Component page use the edit affordance without becoming a Client Component. Ignored if `onEdit` is also passed. */
+  editHref?: string;
+}
+
+/** Avatar + name + meta + edit-pencil pattern reused across nearly every settings/profile screen. */
+export function ProfileCard({ name, meta, avatarUrl, onEdit, editHref }: ProfileCardProps) {
+  const editButtonClassName = "flex h-10 w-10 items-center justify-center rounded-full bg-stone text-ink";
+
+  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={editButtonClassName}>
+          <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      ) : (
+        editHref && (
+          <Link href={editHref} aria-label={`Edit ${name}`} className={editButtonClassName}>
+            <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
+          </Link>
+        )
+      )}
+    </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="text-muted mb-2 ml-1 block text-[10px] font-bold tracking-widest uppercase"
+          >
+            {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(
+              "border-line focus:ring-ink w-full appearance-none rounded-xl border bg-white px-4 py-3 pr-10 text-sm font-medium transition-all outline-none focus:ring-2",
+              error && "border-danger/50 focus:ring-danger",
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </select>
+          <ChevronDown
+            aria-hidden="true"
+            className="text-muted pointer-events-none absolute top-1/2 right-4 h-4 w-4 -translate-y-1/2"
+          />
+        </div>
+        {error && (
+          <p id={errorId} role="alert" className="text-danger mt-1.5 ml-1 text-xs font-medium">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+Select.displayName = "Select";

src/components/ui/service-card.tsx

@@ -0,0 +1,30 @@
+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">
+      {service.imageUrl && (
+        // eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern used app-wide
+        <img src={service.imageUrl} alt="" className="bg-stone h-14 w-14 shrink-0 rounded-xl object-cover" />
+      )}
+      <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>
+        {service.description && (
+          <p className="mt-1 text-xs text-muted line-clamp-2">{service.description}</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,74 @@
+import { Ban, CheckCheck, CircleDot, Clock, LogIn, UserX } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { AppointmentStatus } from "@/types/domain";
+import { cn } from "@/lib/utils/cn";
+
+/**
+ * Icon + text + colour, never colour alone — the barber calendar packs
+ * these into small blocks where colour alone would be genuinely hard to
+ * tell apart at a glance (see docs/phase-5-summary.md, Accessibility).
+ * Reused as-is on the customer side too, where the icon is a small,
+ * harmless addition to a pill that already carried a text label.
+ */
+const STATUS_CONFIG: Record<
+  AppointmentStatus,
+  { label: string; className: string; icon: LucideIcon }
+> = {
+  pending_approval: {
+    label: "Pending Approval",
+    className: "bg-status-pending/10 text-status-pending-foreground",
+    icon: Clock,
+  },
+  confirmed: {
+    label: "Confirmed",
+    className: "bg-status-confirmed/10 text-status-confirmed-foreground",
+    icon: CheckCheck,
+  },
+  arrived: {
+    label: "Arrived",
+    className: "bg-status-confirmed/10 text-status-confirmed-foreground",
+    icon: LogIn,
+  },
+  in_progress: {
+    label: "In Progress",
+    className: "bg-status-progress/10 text-status-progress",
+    icon: CircleDot,
+  },
+  completed: { label: "Completed", className: "bg-stone text-muted", icon: CheckCheck },
+  cancelled: {
+    label: "Cancelled",
+    className: "bg-status-cancelled/10 text-status-cancelled-foreground",
+    icon: Ban,
+  },
+  no_show: {
+    label: "No-show",
+    className: "bg-status-cancelled/10 text-status-cancelled-foreground",
+    icon: UserX,
+  },
+};
+
+export function StatusPill({
+  status,
+  className,
+  iconOnly,
+}: {
+  status: AppointmentStatus;
+  className?: string;
+  /** Renders just the icon with a visually-hidden label — for tight spaces like calendar blocks. */
+  iconOnly?: boolean;
+}) {
+  const config = STATUS_CONFIG[status];
+  const Icon = config.icon;
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-bold tracking-widest uppercase",
+        config.className,
+        className,
+      )}
+    >
+      <Icon className="h-3 w-3 shrink-0" aria-hidden="true" />
+      {iconOnly ? <span className="sr-only">{config.label}</span> : 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-1 rounded-md bg-white p-1", className)}
+      {...props}
+    />
+  );
+}
+
+export function TabsTrigger({ className, ...props }: TabsPrimitive.TabsTriggerProps) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        "flex-1 rounded-md px-3 py-2.5 text-xs font-bold uppercase 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="text-muted mb-2 ml-1 block text-[10px] font-bold tracking-widest uppercase"
+          >
+            {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(
+            "border-line placeholder:text-muted focus:ring-ink w-full resize-none rounded-xl border bg-white p-4 text-sm transition-all outline-none focus:ring-2",
+            error && "border-danger/50 focus:ring-danger",
+            className,
+          )}
+          {...props}
+        />
+        {hint && !error && (
+          <p id={hintId} className="text-muted mt-1.5 ml-1 text-xs">
+            {hint}
+          </p>
+        )}
+        {error && (
+          <p id={errorId} role="alert" className="text-danger mt-1.5 ml-1 text-xs font-medium">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+Textarea.displayName = "Textarea";