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/features/owner/components/service-form-sheet.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import { BottomSheet } from "@/components/ui/bottom-sheet";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { createServiceAction, updateServiceAction } from "../actions/catalogue";
+
+export interface EditableService {
+  id: string;
+  categoryId: string;
+  name: string;
+  description: string;
+  durationMinutes: number;
+  price: string;
+  bufferBeforeMinutes: number;
+  bufferAfterMinutes: number;
+  allowOnlineBooking: boolean;
+}
+
+export function ServiceFormSheet({
+  open,
+  onClose,
+  categories,
+  defaultCategoryId,
+  existing,
+}: {
+  open: boolean;
+  onClose: () => void;
+  categories: { id: string; name: string }[];
+  defaultCategoryId: string;
+  existing?: EditableService | null;
+}) {
+  const router = useRouter();
+  const [categoryId, setCategoryId] = useState(existing?.categoryId ?? defaultCategoryId);
+  const [name, setName] = useState(existing?.name ?? "");
+  const [description, setDescription] = useState(existing?.description ?? "");
+  const [duration, setDuration] = useState(String(existing?.durationMinutes ?? 30));
+  const [price, setPrice] = useState(existing?.price ?? "");
+  const [bufferBefore, setBufferBefore] = useState(String(existing?.bufferBeforeMinutes ?? 0));
+  const [bufferAfter, setBufferAfter] = useState(String(existing?.bufferAfterMinutes ?? 0));
+  const [allowOnlineBooking, setAllowOnlineBooking] = useState(existing?.allowOnlineBooking ?? true);
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  const submit = () => {
+    setError(null);
+    const durationMinutes = Number(duration);
+    const bufferBeforeMinutes = Number(bufferBefore);
+    const bufferAfterMinutes = Number(bufferAfter);
+    if (!Number.isInteger(durationMinutes) || durationMinutes <= 0) {
+      setError("Duration must be a positive number of minutes.");
+      return;
+    }
+    startTransition(async () => {
+      const input = {
+        categoryId,
+        name,
+        description: description || undefined,
+        durationMinutes,
+        price,
+        bufferBeforeMinutes,
+        bufferAfterMinutes,
+        allowOnlineBooking,
+      };
+      const result = existing ? await updateServiceAction(existing.id, input) : await createServiceAction(input);
+      if (!result.success) {
+        setError(result.error ?? "Something went wrong.");
+        return;
+      }
+      onClose();
+      router.refresh();
+    });
+  };
+
+  return (
+    <BottomSheet open={open} onClose={onClose} title={existing ? "Edit Service" : "New Service"}>
+      <div className="space-y-4 pb-2">
+        <Select label="Category" value={categoryId} onChange={(e) => setCategoryId(e.target.value)}>
+          {categories.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </Select>
+        <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+        <Textarea label="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
+        <div className="grid grid-cols-2 gap-4">
+          <Input label="Duration (min)" type="number" min={1} value={duration} onChange={(e) => setDuration(e.target.value)} />
+          <Input label="Price" placeholder="22.50" value={price} onChange={(e) => setPrice(e.target.value)} />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <Input label="Buffer Before (min)" type="number" min={0} value={bufferBefore} onChange={(e) => setBufferBefore(e.target.value)} />
+          <Input label="Buffer After (min)" type="number" min={0} value={bufferAfter} onChange={(e) => setBufferAfter(e.target.value)} />
+        </div>
+        <Switch label="Available for online booking" checked={allowOnlineBooking} onCheckedChange={setAllowOnlineBooking} />
+        {error && (
+          <p role="alert" className="text-danger text-sm font-medium">
+            {error}
+          </p>
+        )}
+        <Button className="w-full" isLoading={isPending} onClick={submit}>
+          {existing ? "Save Changes" : "Add Service"}
+        </Button>
+      </div>
+    </BottomSheet>
+  );
+}