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/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>
+  );
+}