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/app/(owner)/owner/team/page.tsx

@@ -1,9 +1,95 @@
 import type { Metadata } from "next";
-import { Users } from "lucide-react";
-import { ComingSoon } from "@/components/feedback/coming-soon";
+import Link from "next/link";
+import { Plus, Search } from "lucide-react";
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/db/prisma";
+import { hasPermission } from "@/lib/auth/permissions";
+import { Permission } from "@/generated/prisma/enums";
+import { listStaffForBusiness } from "@/services/staff/staff.service";
+import { cn } from "@/lib/utils/cn";
 
-export const metadata: Metadata = { title: "Team Management" };
+export const metadata: Metadata = { title: "Team" };
+export const dynamic = "force-dynamic";
 
-export default function OwnerTeamPage() {
-  return <ComingSoon icon={Users} title="Team Management" phase="Phase 4: Owner Administration" />;
+export default async function OwnerTeamPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string }>;
+}) {
+  const session = await auth();
+  if (!session?.user) redirect("/sign-in");
+
+  const canManage = await hasPermission(session.user.id, Permission.MANAGE_STAFF);
+  if (!canManage) redirect("/staff");
+
+  const owner = await prisma.staffProfile.findUnique({ where: { userId: session.user.id } });
+  if (!owner) redirect("/staff");
+
+  const { q = "" } = await searchParams;
+  const staff = await listStaffForBusiness(prisma, { businessId: owner.businessId, q, includeInactive: true });
+
+  return (
+    <div className="px-6 pt-12 pb-12 lg:max-w-4xl">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight">Team</h1>
+        <Link
+          href="/owner/team/add"
+          className="bg-ink flex h-10 w-10 items-center justify-center rounded-full text-white"
+          aria-label="Add staff member"
+        >
+          <Plus className="h-4 w-4" aria-hidden="true" />
+        </Link>
+      </div>
+
+      <form action="/owner/team" method="GET" className="relative mb-4">
+        <Search className="text-muted absolute top-1/2 left-4 h-4 w-4 -translate-y-1/2" aria-hidden="true" />
+        <label htmlFor="team-search" className="sr-only">
+          Search staff by name or email
+        </label>
+        <input
+          id="team-search"
+          type="search"
+          name="q"
+          defaultValue={q}
+          placeholder="Search by name or email"
+          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"
+        />
+      </form>
+
+      <div className="grid gap-3 lg:grid-cols-2">
+        {staff.length === 0 ? (
+          <p className="text-muted col-span-full rounded-jumbo border border-line bg-white p-5 text-center text-sm">
+            No staff match &ldquo;{q}&rdquo;.
+          </p>
+        ) : (
+          staff.map((s) => (
+            <Link
+              key={s.id}
+              href={`/owner/team/${s.id}`}
+              className={cn(
+                "rounded-jumbo border-line flex items-center gap-4 border bg-white p-5",
+                s.status === "INACTIVE" && "opacity-60",
+              )}
+            >
+              <div className="bg-stone text-muted flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm font-bold">
+                {(s.user.name ?? "?").charAt(0)}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-bold">{s.user.name}</p>
+                <p className="text-muted truncate text-xs">{s.user.email}</p>
+                <p className="text-accent mt-0.5 text-[10px] font-bold tracking-widest uppercase">
+                  {s.role.name}
+                  {s.status === "INACTIVE" && <span className="text-muted"> · Inactive</span>}
+                  {s.status === "ACTIVE" && s.invitation && !s.invitation.acceptedAt && (
+                    <span className="text-warning-foreground"> · Invite Pending</span>
+                  )}
+                </p>
+              </div>
+            </Link>
+          ))
+        )}
+      </div>
+    </div>
+  );
 }