Phase 6

Owner Administration is complete. Summary of this final stretch of work:

Seed data extended with an inactive staff member, a pending invitation, a redeemed-reward fixture, a service with no eligible staff, and a future-appointment fixture for conflict testing — all idempotent, verified against the dev DB.

Testing brought to 179 unit / 86 integration / 27 E2E tests, all passing together on a freshly seeded, disposable Postgres:

Unit tests for every new pure validator (business hours, categories/services, booking rules, loyalty config, staff creation).
Integration tests covering opening-hours conflicts, last-owner protection, staff deactivation/eligibility conflicts, loyalty redemption's atomic race-guard, and owner-vs-barber/business-isolation authorization — all against a real Postgres.
12 new Playwright owner journeys, which surfaced and fixed two genuine issues along the way: a cookie-clearing race condition in the sign-out-mid-test flow (a real, reproducible timing bug, not just a test artifact), and confirmation that seed fixtures upserted by deterministic ID go stale once "today" has moved on — now handled defensively.
Desktop responsiveness: converted the single-column Business Details, Booking Rules, and Loyalty Configuration forms to a genuine two-column layout at the lg: breakpoint (verified via measured element positions, not just screenshots), confirmed mobile stacking is unaffected.

Final verification: clean tsc, eslint, and next build, plus the full three-suite run against one fresh database as the authoritative pass.

src/components/navigation/bottom-nav.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { CalendarCheck, CalendarDays, House, Scissors, Settings, User, Users } from "lucide-react";
+import { CalendarCheck, CalendarDays, ChartLine, House, Scissors, Settings, User, Users } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils/cn";
 
@@ -23,6 +23,7 @@ export const NAV_ICON_MAP = {
   scissors: Scissors,
   users: Users,
   settings: Settings,
+  "chart-line": ChartLine,
 } satisfies Record<string, LucideIcon>;
 
 export type BottomNavIconName = keyof typeof NAV_ICON_MAP;

src/components/navigation/staff-shell.tsx

@@ -1,14 +1,29 @@
 import { BottomNav } from "./bottom-nav";
 import { StaffSidebarNav } from "./staff-sidebar-nav";
+import type { BottomNavItem } from "./bottom-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 }) {
+/**
+ * Shared by (staff) and (owner) — see docs/implementation-plan.md §3: owner
+ * is a permission on a staff account, not a separate shell. `items`
+ * defaults to the staff nav; (owner) passes OWNER_NAV_ITEMS instead (see
+ * staff-nav-items.ts) — same shell, same sidebar/bottom-nav components,
+ * different item set, per the Phase 6 brief's own nav requirement.
+ */
+export function StaffShell({
+  children,
+  items = STAFF_NAV_ITEMS,
+  footerLink,
+}: {
+  children: React.ReactNode;
+  items?: BottomNavItem[];
+  footerLink?: { href: string; label: string };
+}) {
   return (
     <div className="min-h-screen bg-stone pb-24 lg:pb-0 lg:pl-56">
-      <StaffSidebarNav items={STAFF_NAV_ITEMS} />
+      <StaffSidebarNav items={items} footerLink={footerLink} />
       {children}
-      <BottomNav items={STAFF_NAV_ITEMS} variant="staff" />
+      <BottomNav items={items} variant="staff" />
     </div>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Scissors } from "lucide-react";
+import { ArrowLeftRight, Scissors } from "lucide-react";
 import { cn } from "@/lib/utils/cn";
 import { NAV_ICON_MAP } from "./bottom-nav";
 import type { BottomNavItem } from "./bottom-nav";
@@ -15,7 +15,14 @@ import type { BottomNavItem } from "./bottom-nav";
  * 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[] }) {
+export function StaffSidebarNav({
+  items,
+  footerLink,
+}: {
+  items: BottomNavItem[];
+  /** Owner sidebar's explicit "back to barber tools" — see the brief's "clear access back to barber tools". Omitted on the staff sidebar itself. */
+  footerLink?: { href: string; label: string };
+}) {
   const pathname = usePathname();
 
   return (
@@ -27,7 +34,7 @@ export function StaffSidebarNav({ items }: { items: BottomNavItem[] }) {
         <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">
+      <div className="flex flex-1 flex-col gap-1">
         {items.map(({ href, label, icon }) => {
           const Icon = NAV_ICON_MAP[icon];
           const active = pathname === href || pathname.startsWith(`${href}/`);
@@ -47,6 +54,15 @@ export function StaffSidebarNav({ items }: { items: BottomNavItem[] }) {
           );
         })}
       </div>
+      {footerLink && (
+        <Link
+          href={footerLink.href}
+          className="mt-4 flex items-center gap-3 rounded-xl border-t border-white/5 px-3 pt-4 text-sm font-bold text-gray-400 transition-colors hover:text-white"
+        >
+          <ArrowLeftRight className="h-4 w-4" aria-hidden="true" />
+          {footerLink.label}
+        </Link>
+      )}
     </nav>
   );
 }