Phase 5

Phase 5 is complete. All 53 tasks are done, verified on a fresh database in a single clean run: **121 unit tests**, **55 integration tests**, and **15 E2E journeys** (6 Phase 4 + 9 new Phase 5) all passing, plus a clean `tsc`/`eslint`/`build`.

Summary of this final stretch:

- **Fixed a real bug**: `StaffService`'s break/time-off update/delete functions threw uncaught instead of failing gracefully on a permission mismatch — fixed with proper `PERMISSION_DENIED` handling, covered by new integration tests.
- **Built the remaining Phase 5 UI**: Breaks editor, Time Off editor, Barber Profile, and Notification Preferences — all wired to real services, no placeholders.
- **Extended seed data**: more customers, loyalty accounts/transactions/rewards, and appointments spanning every status today (anchored to real time so the "Current Appointment" priority logic is reliably exercised).
- **Found and fixed a second real bug live in the browser**: the Break/Time-Off edit sheets showed stale default values instead of the item being edited (a classic `useState`-doesn't-reinitialize-on-prop-change bug) — fixed with a `key` prop to force remount.
- **Wrote the full Phase 5 test suite**: unit tests for `selectCurrentAppointment` and all `StaffService` validators, integration tests for `LoyaltyService` and `StaffService` (including the permission-fix regression tests), and 9 new Playwright E2E journeys covering the brief's exact required list.
- **Did the desktop-responsive pass**: a persistent sidebar nav replacing the bottom bar at `lg:`, a genuine calendar+"Right Now" side-by-side split, and 2-column layouts for the clients list and customer details — addressing the brief's explicit "more than simple centering" requirement.
- **Wrote [docs/phase-5-summary.md](docs/phase-5-summary.md)** documenting everything above in full.

Nothing is committed — the whole session (Phases 2–5) sits uncommitted on top of the initial template commit, same as you left it. Let me know if you'd like me to commit, or if you want to move on to Phase 6.

src/components/navigation/bottom-nav.tsx

@@ -15,7 +15,7 @@ import { cn } from "@/lib/utils/cn";
  * to Client Components from Server Components"). A string key sidesteps
  * that entirely.
  */
-const ICON_MAP = {
+export const NAV_ICON_MAP = {
   house: House,
   "calendar-check": CalendarCheck,
   user: User,
@@ -25,7 +25,7 @@ const ICON_MAP = {
   settings: Settings,
 } satisfies Record<string, LucideIcon>;
 
-export type BottomNavIconName = keyof typeof ICON_MAP;
+export type BottomNavIconName = keyof typeof NAV_ICON_MAP;
 
 export interface BottomNavItem {
   href: string;
@@ -61,6 +61,11 @@ export function BottomNav({ items, variant = "customer" }: BottomNavProps) {
         "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
@@ -68,7 +73,7 @@ export function BottomNav({ items, variant = "customer" }: BottomNavProps) {
           they don't stretch out unreadably on a wide desktop viewport. */}
       <div className="mx-auto flex w-full max-w-2xl items-center justify-between">
         {items.map(({ href, label, icon }) => {
-          const Icon = ICON_MAP[icon];
+          const Icon = NAV_ICON_MAP[icon];
           const active = pathname === href || pathname.startsWith(`${href}/`);
           return (
             <Link

src/components/navigation/staff-shell.tsx

@@ -0,0 +1,14 @@
+import { BottomNav } from "./bottom-nav";
+import { StaffSidebarNav } from "./staff-sidebar-nav";
+import { STAFF_NAV_ITEMS } from "@/lib/navigation/staff-nav-items";
+
+/** Shared by (staff) and (owner) — see docs/implementation-plan.md §3: owner is a permission on a staff account, not a separate shell. */
+export function StaffShell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-stone pb-24 lg:pb-0 lg:pl-56">
+      <StaffSidebarNav items={STAFF_NAV_ITEMS} />
+      {children}
+      <BottomNav items={STAFF_NAV_ITEMS} variant="staff" />
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+"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";
+
+/**
+ * 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, per the brief's explicit call-out that staff desktop needs
+ * more than the mobile bar simply centered.
+ */
+export function StaffSidebarNav({ items }: { items: BottomNavItem[] }) {
+  const pathname = usePathname();
+
+  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">
+        <Scissors className="h-5 w-5" aria-hidden="true" />
+        <span className="text-sm font-bold tracking-widest uppercase">NextChair</span>
+      </div>
+      <div className="flex flex-col gap-1">
+        {items.map(({ href, label, icon }) => {
+          const Icon = NAV_ICON_MAP[icon];
+          const active = pathname === href || pathname.startsWith(`${href}/`);
+          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>
+  );
+}