Post Phase 8 - Fixes 1

Delivered:

Super Administrator — env-var provisioned, no StaffProfile at all (structural exclusion from Team/barber-picker/appointments/staff-totals, not a filter). hasPermission short-circuit + new getActingBusinessContext() helper retrofitted across 16 owner pages so it can actually manage the business.
Media Manager — one upload/library/external-URL modal + field picker, backing every image field app-wide. Local-disk storage + Docker volume, SVG rejected, size-capped.
Welcome backgrounds — desktop/mobile images with CSS breakpoint swap.
Business Branding settings — logo/cover/welcome/favicon/icon/colours all editable post-install; cover image finally rendered (was dead config).
Service descriptions — now surfaced on Home and in the booking flow.
Loyalty card — live preview, ColorPicker/MediaPicker/IconPicker, flip removed for a static premium-styled card, Loyalty added to bottom nav. Fixed a real pre-existing bug where the card's configured colour/image/icon were stored but never actually rendered.
Home Screen Redesign — hero gallery + sticky Services/Portfolio/Reviews/Details tabs, backed by a new unified gallery model/service (no hero/portfolio duplication). Details tab surfaces social links and a map that were never shown before.
Google Reviews — real sync pipeline (24h cron, CRON_SECRET-gated, mirrors the existing notification cron exactly), DB-only customer reads, owner hide/unhide + policy management page.
Architecture cleanup — SettingsPageShell extracted from 6 duplicated page wrappers; fixed a second pre-existing bug where branding image fields could never actually be cleared once set.
Verification: 418 tests passing (236 unit + 182 integration, all against a real MySQL database), full typecheck/lint clean across src, and a real Docker build+run cycle — which caught and fixed a genuine bug (scripts/ wasn't copied into the production image, so Super Admin sync would have crashed on every real deployment).

src/features/owner/components/business-details-form.tsx

@@ -3,9 +3,11 @@
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
+import { ColorPicker } from "@/components/ui/color-picker";
 import { Input } from "@/components/ui/input";
 import { Select } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import { MediaPicker } from "@/features/media/components/media-picker";
 import { updateBusinessProfileAction, updateBusinessSettingsAction } from "../actions/business";
 
 const TIMEZONES = ["Europe/London", "Europe/Paris", "Europe/Dublin", "America/New_York", "America/Los_Angeles"];
@@ -15,7 +17,14 @@ const LOCALES = ["en-GB", "en-US"];
 export interface BusinessDetailsInitial {
   name: string;
   description: string;
-  logoUrl: string;
+  logoUrl: string | null;
+  coverImageUrl: string | null;
+  welcomeBackgroundDesktopUrl: string | null;
+  welcomeBackgroundMobileUrl: string | null;
+  faviconUrl: string | null;
+  appIconUrl: string | null;
+  themeColor: string | null;
+  backgroundColor: string | null;
   phone: string;
   email: string;
   website: string;
@@ -55,7 +64,14 @@ export function BusinessDetailsForm({ initial }: { initial: BusinessDetailsIniti
         profile: {
           name: form.name,
           description: form.description || undefined,
-          logoUrl: form.logoUrl || undefined,
+          logoUrl: form.logoUrl,
+          coverImageUrl: form.coverImageUrl,
+          welcomeBackgroundDesktopUrl: form.welcomeBackgroundDesktopUrl,
+          welcomeBackgroundMobileUrl: form.welcomeBackgroundMobileUrl,
+          faviconUrl: form.faviconUrl,
+          appIconUrl: form.appIconUrl,
+          themeColor: form.themeColor,
+          backgroundColor: form.backgroundColor,
           phone: form.phone || undefined,
           email: form.email || undefined,
           website: form.website || undefined,
@@ -101,11 +117,55 @@ export function BusinessDetailsForm({ initial }: { initial: BusinessDetailsIniti
         <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Profile</h3>
         <div className="rounded-jumbo border-line space-y-4 border bg-white p-6">
           <Input label="Business Name" required value={form.name} onChange={(e) => set("name", e.target.value)} />
-          <Input label="Logo URL" placeholder="https://…" value={form.logoUrl} onChange={(e) => set("logoUrl", e.target.value)} />
+          <MediaPicker label="Logo" value={form.logoUrl} onChange={(url) => set("logoUrl", url)} category="branding" />
           <Textarea label="Description" value={form.description} onChange={(e) => set("description", e.target.value)} />
         </div>
       </section>
 
+      <section className="space-y-3">
+        <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Branding</h3>
+        <div className="rounded-jumbo border-line space-y-4 border bg-white p-6">
+          <MediaPicker
+            label="Cover Image"
+            value={form.coverImageUrl}
+            onChange={(url) => set("coverImageUrl", url)}
+            category="branding"
+            hint="Shown at the top of the customer Home page."
+          />
+          <MediaPicker
+            label="Welcome Background — Desktop"
+            value={form.welcomeBackgroundDesktopUrl}
+            onChange={(url) => set("welcomeBackgroundDesktopUrl", url)}
+            category="welcome"
+          />
+          <MediaPicker
+            label="Welcome Background — Mobile"
+            value={form.welcomeBackgroundMobileUrl}
+            onChange={(url) => set("welcomeBackgroundMobileUrl", url)}
+            category="welcome"
+            hint="Shown on the sign-in/welcome screen, before someone signs in."
+          />
+          <MediaPicker
+            label="Favicon"
+            value={form.faviconUrl}
+            onChange={(url) => set("faviconUrl", url)}
+            category="branding"
+            hint="Browser tab icon. Falls back to the app default when unset."
+          />
+          <MediaPicker
+            label="App Icon"
+            value={form.appIconUrl}
+            onChange={(url) => set("appIconUrl", url)}
+            category="branding"
+            hint="Used when someone installs this as an app on their phone."
+          />
+          <div className="grid grid-cols-2 gap-4">
+            <ColorPicker label="Theme Colour" value={form.themeColor} onChange={(hex) => set("themeColor", hex)} />
+            <ColorPicker label="Background Colour" value={form.backgroundColor} onChange={(hex) => set("backgroundColor", hex)} />
+          </div>
+        </div>
+      </section>
+
       <section className="space-y-3">
         <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Contact &amp; Address</h3>
         <div className="rounded-jumbo border-line space-y-4 border bg-white p-6">

src/features/owner/components/catalogue-manager.tsx

@@ -23,6 +23,7 @@ export interface CatalogueService {
   categoryId: string;
   name: string;
   description: string;
+  imageUrl: string | null;
   durationMinutes: number;
   price: string;
   bufferBeforeMinutes: number;
@@ -114,6 +115,7 @@ export function CatalogueManager({ categories }: { categories: CatalogueCategory
       categoryId: service.categoryId,
       name: service.name,
       description: service.description,
+      imageUrl: service.imageUrl,
       durationMinutes: service.durationMinutes,
       price: service.price,
       bufferBeforeMinutes: service.bufferBeforeMinutes,
@@ -220,14 +222,20 @@ export function CatalogueManager({ categories }: { categories: CatalogueCategory
                     <ChevronDown className="h-3 w-3" aria-hidden="true" />
                   </button>
                 </div>
-                <button type="button" onClick={() => openEditService(service)} className="min-w-0 flex-1 text-left">
-                  <p className={service.isActive ? "text-sm font-bold" : "text-muted text-sm font-bold line-through"}>
-                    {service.name}
-                  </p>
-                  <p className="text-muted mt-0.5 text-xs">
-                    {service.durationMinutes} min · {formatPrice(service.price)}
-                    {!service.allowOnlineBooking && " · Not bookable online"}
-                  </p>
+                <button type="button" onClick={() => openEditService(service)} className="flex min-w-0 flex-1 items-center gap-3 text-left">
+                  {service.imageUrl && (
+                    // eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern used app-wide
+                    <img src={service.imageUrl} alt="" className="bg-stone h-10 w-10 shrink-0 rounded-lg object-cover" />
+                  )}
+                  <span className="min-w-0 flex-1">
+                    <p className={service.isActive ? "text-sm font-bold" : "text-muted text-sm font-bold line-through"}>
+                      {service.name}
+                    </p>
+                    <p className="text-muted mt-0.5 text-xs">
+                      {service.durationMinutes} min · {formatPrice(service.price)}
+                      {!service.allowOnlineBooking && " · Not bookable online"}
+                    </p>
+                  </span>
                 </button>
                 <Switch
                   checked={service.isActive}

src/features/owner/components/gallery-manager.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
+import { GalleryPlacement } from "@/generated/prisma/enums";
+import { Input } from "@/components/ui/input";
+import { MediaManagerModal } from "@/features/media/components/media-manager-modal";
+import {
+  addGalleryImageAction,
+  deleteGalleryImageAction,
+  reorderGalleryImagesAction,
+  updateGalleryImageAction,
+} from "@/features/gallery/actions/gallery";
+import type { GalleryImageSummary } from "@/services/gallery/gallery.service";
+
+export interface GalleryManagerProps {
+  placement: GalleryPlacement;
+  title: string;
+  description: string;
+  /** Portfolio images carry a category tag for the customer-facing filter pills; the hero gallery has no use for one. */
+  showCategory: boolean;
+  initialImages: GalleryImageSummary[];
+}
+
+export function GalleryManager({ placement, title, description, showCategory, initialImages }: GalleryManagerProps) {
+  const router = useRouter();
+  const [images, setImages] = useState(initialImages);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  const run = (fn: () => Promise<{ success: boolean; error?: string }>) => {
+    setError(null);
+    startTransition(async () => {
+      const result = await fn();
+      if (!result.success) {
+        setError(result.error ?? "Something went wrong.");
+        return;
+      }
+      router.refresh();
+    });
+  };
+
+  const handleSelect = (url: string) => {
+    run(async () => {
+      const result = await addGalleryImageAction({ placement, imageUrl: url });
+      if (result.success) setImages((prev) => [...prev, result.image]);
+      return result;
+    });
+  };
+
+  const move = (index: number, direction: -1 | 1) => {
+    const targetIndex = index + direction;
+    if (targetIndex < 0 || targetIndex >= images.length) return;
+    const reordered = [...images];
+    const [moved] = reordered.splice(index, 1);
+    if (!moved) return;
+    reordered.splice(targetIndex, 0, moved);
+    setImages(reordered);
+    run(() => reorderGalleryImagesAction(placement, reordered.map((i) => i.id)));
+  };
+
+  const remove = (id: string) => {
+    setImages((prev) => prev.filter((i) => i.id !== id));
+    run(() => deleteGalleryImageAction(id));
+  };
+
+  const setCategory = (id: string, category: string) => {
+    setImages((prev) => prev.map((i) => (i.id === id ? { ...i, category } : i)));
+    run(() => updateGalleryImageAction(id, { category }));
+  };
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">{title}</h3>
+        <p className="text-muted mt-1 ml-1 text-xs">{description}</p>
+      </div>
+
+      {error && (
+        <p role="alert" className="text-danger text-sm font-medium">
+          {error}
+        </p>
+      )}
+
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+        {images.map((image, index) => (
+          <div key={image.id} className="border-line overflow-hidden rounded-xl border bg-white">
+            {/* eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern used app-wide */}
+            <img src={image.imageUrl} alt="" className="bg-stone h-28 w-full object-cover" />
+            <div className="space-y-2 p-2">
+              {showCategory && (
+                <Input
+                  value={image.category ?? ""}
+                  onChange={(e) => setCategory(image.id, e.target.value)}
+                  placeholder="Category (optional)"
+                  className="px-3 py-2 text-xs"
+                />
+              )}
+              <div className="flex items-center justify-between">
+                <div className="flex gap-1">
+                  <button
+                    type="button"
+                    onClick={() => move(index, -1)}
+                    disabled={index === 0}
+                    aria-label="Move earlier"
+                    className="text-muted disabled:opacity-30"
+                  >
+                    <ChevronUp className="h-3.5 w-3.5" aria-hidden="true" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => move(index, 1)}
+                    disabled={index === images.length - 1}
+                    aria-label="Move later"
+                    className="text-muted disabled:opacity-30"
+                  >
+                    <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
+                  </button>
+                </div>
+                <button type="button" onClick={() => remove(image.id)} aria-label="Delete image" className="text-danger">
+                  <Trash2 className="h-3.5 w-3.5" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        <button
+          type="button"
+          onClick={() => setPickerOpen(true)}
+          disabled={isPending}
+          className="border-line text-muted flex h-full min-h-[9rem] flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed"
+        >
+          <Plus className="h-5 w-5" aria-hidden="true" />
+          <span className="text-xs font-bold tracking-widest uppercase">Add Image</span>
+        </button>
+      </div>
+
+      <MediaManagerModal
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+        onSelect={handleSelect}
+        category={placement === GalleryPlacement.HERO ? "gallery" : "portfolio"}
+      />
+    </section>
+  );
+}

src/features/owner/components/loyalty-config-form.tsx

@@ -4,9 +4,13 @@ import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import { ColorPicker } from "@/components/ui/color-picker";
+import { IconPicker } from "@/components/ui/icon-picker";
 import { Input } from "@/components/ui/input";
+import { LoyaltyCard } from "@/components/ui/loyalty-card";
 import { Select } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { MediaPicker } from "@/features/media/components/media-picker";
 import { updateLoyaltyConfigAction } from "../actions/loyalty-config";
 import type { ProgrammeConfigInput } from "@/services/loyalty/loyalty.service";
 
@@ -17,6 +21,7 @@ const REWARD_TYPES: { value: ProgrammeConfigInput["rewardType"]; label: string }
 ];
 
 export interface LoyaltyConfigFormProps {
+  businessName: string;
   initialConfig: ProgrammeConfigInput;
   initialEligibleServiceIds: string[];
   initialEligibleStaffIds: string[];
@@ -25,6 +30,7 @@ export interface LoyaltyConfigFormProps {
 }
 
 export function LoyaltyConfigForm({
+  businessName,
   initialConfig,
   initialEligibleServiceIds,
   initialEligibleStaffIds,
@@ -191,13 +197,43 @@ export function LoyaltyConfigForm({
         </div>
       </section>
 
-      <section className="space-y-3">
+      <section className="space-y-3 lg:col-span-2">
         <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Card Appearance</h3>
-        <div className="rounded-jumbo border-line space-y-4 border bg-white p-6">
-          <Input label="Card background color" value={config.cardBackgroundColor ?? ""} onChange={(e) => set("cardBackgroundColor", e.target.value)} placeholder="#111b15" />
-          <Input label="Card background image URL (optional)" value={config.cardBackgroundImageUrl ?? ""} onChange={(e) => set("cardBackgroundImageUrl", e.target.value)} />
-          <Input label="Stamp icon" value={config.stampIcon ?? ""} onChange={(e) => set("stampIcon", e.target.value)} placeholder="scissors" />
-          <Input label="Terms line" value={config.termsLine ?? ""} onChange={(e) => set("termsLine", e.target.value)} placeholder="Valid for 12 months. One reward per visit." />
+        <div className="rounded-jumbo border-line space-y-4 border bg-white p-6 lg:grid lg:grid-cols-[minmax(0,320px)_1fr] lg:gap-8 lg:space-y-0">
+          <div>
+            <p className="text-muted mb-2 ml-1 text-[10px] font-bold tracking-widest uppercase">Live Preview</p>
+            <LoyaltyCard
+              businessName={businessName}
+              memberNumber="A1B2C3"
+              stampsRequired={Math.max(config.stampsRequired, 1)}
+              stampsEarned={Math.min(3, Math.max(config.stampsRequired - 1, 0))}
+              rewardLabel={config.rewardLabel || "Reward"}
+              termsLine={config.termsLine}
+              cardBackgroundColor={config.cardBackgroundColor}
+              cardBackgroundImageUrl={config.cardBackgroundImageUrl}
+              stampIcon={config.stampIcon}
+            />
+          </div>
+          <div className="mt-4 space-y-4 lg:mt-0">
+            <ColorPicker
+              label="Background colour"
+              value={config.cardBackgroundColor}
+              onChange={(hex) => set("cardBackgroundColor", hex)}
+            />
+            <MediaPicker
+              label="Background image (optional)"
+              value={config.cardBackgroundImageUrl}
+              onChange={(url) => set("cardBackgroundImageUrl", url ?? undefined)}
+              category="loyalty"
+            />
+            <IconPicker label="Stamp icon" value={config.stampIcon} onChange={(iconName) => set("stampIcon", iconName)} />
+            <Input
+              label="Terms line"
+              value={config.termsLine ?? ""}
+              onChange={(e) => set("termsLine", e.target.value)}
+              placeholder="Valid for 12 months. One reward per visit."
+            />
+          </div>
         </div>
       </section>
 

src/features/owner/components/reviews-manager.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { useMemo, useState, useTransition } from "react";
+import { RefreshCw, Star, StarOff } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils/cn";
+import { setReviewHiddenAction, syncReviewsNowAction, updateReviewsSettingsAction } from "../actions/reviews";
+
+export interface OwnerReviewRow {
+  id: string;
+  authorName: string;
+  rating: number;
+  text: string | null;
+  relativeTimeDescription: string | null;
+  isHidden: boolean;
+}
+
+export interface ReviewsManagerProps {
+  initialGooglePlaceId: string;
+  initialReviewsMinRating: number | null;
+  initialReviewsExcludeRatingOnly: boolean;
+  googleRating: number | null;
+  googleRatingCount: number | null;
+  reviews: OwnerReviewRow[];
+}
+
+const RATING_FILTERS = [null, 5, 4, 3, 2, 1] as const;
+
+function StarRating({ rating }: { rating: number }) {
+  return (
+    <div className="flex items-center gap-0.5" aria-label={`${rating} out of 5 stars`}>
+      {Array.from({ length: 5 }, (_, i) => (
+        <Star
+          key={i}
+          className={cn("h-3.5 w-3.5", i < rating ? "fill-accent-loyalty text-accent-loyalty" : "text-line")}
+          aria-hidden="true"
+        />
+      ))}
+    </div>
+  );
+}
+
+export function ReviewsManager({
+  initialGooglePlaceId,
+  initialReviewsMinRating,
+  initialReviewsExcludeRatingOnly,
+  googleRating,
+  googleRatingCount,
+  reviews,
+}: ReviewsManagerProps) {
+  const router = useRouter();
+  const [googlePlaceId, setGooglePlaceId] = useState(initialGooglePlaceId);
+  const [reviewsMinRating, setReviewsMinRating] = useState(initialReviewsMinRating);
+  const [reviewsExcludeRatingOnly, setReviewsExcludeRatingOnly] = useState(initialReviewsExcludeRatingOnly);
+  const [settingsError, setSettingsError] = useState<string | null>(null);
+  const [settingsSaved, setSettingsSaved] = useState(false);
+  const [syncMessage, setSyncMessage] = useState<string | null>(null);
+  const [isSettingsPending, startSettingsTransition] = useTransition();
+  const [isSyncPending, startSyncTransition] = useTransition();
+
+  const [ratingFilter, setRatingFilter] = useState<number | null>(null);
+  const [query, setQuery] = useState("");
+  const [rows, setRows] = useState(reviews);
+  const [hidingId, setHidingId] = useState<string | null>(null);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return rows.filter((r) => {
+      if (ratingFilter && r.rating !== ratingFilter) return false;
+      if (q && !(r.authorName.toLowerCase().includes(q) || (r.text ?? "").toLowerCase().includes(q))) return false;
+      return true;
+    });
+  }, [rows, ratingFilter, query]);
+
+  const saveSettings = () => {
+    setSettingsError(null);
+    setSettingsSaved(false);
+    startSettingsTransition(async () => {
+      const result = await updateReviewsSettingsAction({
+        googlePlaceId: googlePlaceId.trim() || null,
+        reviewsMinRating,
+        reviewsExcludeRatingOnly,
+      });
+      if (!result.success) {
+        setSettingsError(result.error ?? "Couldn't save review settings.");
+        return;
+      }
+      setSettingsSaved(true);
+      router.refresh();
+    });
+  };
+
+  const syncNow = () => {
+    setSyncMessage(null);
+    startSyncTransition(async () => {
+      const result = await syncReviewsNowAction();
+      setSyncMessage(result.success ? "Synced — refreshing…" : (result.error ?? "Sync failed."));
+      if (result.success) router.refresh();
+    });
+  };
+
+  const toggleHidden = (review: OwnerReviewRow) => {
+    setHidingId(review.id);
+    const nextHidden = !review.isHidden;
+    setRows((prev) => prev.map((r) => (r.id === review.id ? { ...r, isHidden: nextHidden } : r)));
+    startSettingsTransition(async () => {
+      const result = await setReviewHiddenAction(review.id, nextHidden);
+      if (!result.success) {
+        // Revert on failure.
+        setRows((prev) => prev.map((r) => (r.id === review.id ? { ...r, isHidden: review.isHidden } : r)));
+      }
+      setHidingId(null);
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <section className="rounded-jumbo border-line space-y-4 border bg-white p-6">
+        <h3 className="text-sm font-bold">Google Reviews Sync</h3>
+        {googleRating !== null && (
+          <p className="text-muted text-sm">
+            Google&apos;s aggregate: <span className="text-ink font-bold">{googleRating.toFixed(1)}</span> from{" "}
+            {googleRatingCount ?? 0} ratings.
+          </p>
+        )}
+        <Input
+          label="Google Place ID"
+          value={googlePlaceId}
+          onChange={(e) => setGooglePlaceId(e.target.value)}
+          placeholder="ChIJ…"
+          hint="Found via Google's Place ID Finder. Leave blank to disable review syncing for this business."
+        />
+        <div className="grid grid-cols-2 gap-4">
+          <Select
+            label="Minimum rating shown to customers"
+            value={reviewsMinRating?.toString() ?? ""}
+            onChange={(e) => setReviewsMinRating(e.target.value ? Number(e.target.value) : null)}
+          >
+            <option value="">No minimum</option>
+            {[1, 2, 3, 4, 5].map((n) => (
+              <option key={n} value={n}>
+                {n}+ stars
+              </option>
+            ))}
+          </Select>
+          <div className="border-line flex items-center rounded-xl border p-4">
+            <Switch
+              label="Exclude rating-only reviews"
+              checked={reviewsExcludeRatingOnly}
+              onCheckedChange={setReviewsExcludeRatingOnly}
+            />
+          </div>
+        </div>
+        {settingsError && (
+          <p role="alert" className="text-danger text-sm font-medium">
+            {settingsError}
+          </p>
+        )}
+        {settingsSaved && !settingsError && (
+          <p role="status" className="text-accent-foreground text-sm font-medium">
+            Saved.
+          </p>
+        )}
+        <div className="flex flex-wrap gap-3">
+          <Button isLoading={isSettingsPending} onClick={saveSettings}>
+            Save
+          </Button>
+          <Button variant="secondary" isLoading={isSyncPending} onClick={syncNow}>
+            <RefreshCw className="h-4 w-4" aria-hidden="true" /> Sync Now
+          </Button>
+        </div>
+        {syncMessage && <p className="text-muted text-xs">{syncMessage}</p>}
+      </section>
+
+      <section className="space-y-3">
+        <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Imported Reviews</h3>
+
+        <div className="flex flex-wrap items-center gap-2">
+          {RATING_FILTERS.map((r) => (
+            <button
+              key={r ?? "all"}
+              type="button"
+              onClick={() => setRatingFilter(r)}
+              className={cn(
+                "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
+                ratingFilter === r ? "bg-ink text-white" : "border-line text-muted border bg-white",
+              )}
+            >
+              {r ? `${r}★` : "All"}
+            </button>
+          ))}
+        </div>
+        <input
+          type="search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search by author or review text"
+          className="border-line focus:ring-ink w-full rounded-xl border bg-white px-4 py-2.5 text-sm outline-none focus:ring-2"
+        />
+
+        {filtered.length === 0 ? (
+          <p className="text-muted py-6 text-center text-sm">No reviews match this filter.</p>
+        ) : (
+          <div className="space-y-3">
+            {filtered.map((review) => (
+              <Card key={review.id} className={cn("space-y-2 p-5", review.isHidden && "opacity-60")}>
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <p className="text-sm font-bold">{review.authorName}</p>
+                    <div className="mt-1 flex items-center gap-2">
+                      <StarRating rating={review.rating} />
+                      {review.relativeTimeDescription && (
+                        <span className="text-muted text-xs">{review.relativeTimeDescription}</span>
+                      )}
+                    </div>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    isLoading={hidingId === review.id}
+                    onClick={() => toggleHidden(review)}
+                  >
+                    {review.isHidden ? (
+                      <>
+                        <Star className="h-3.5 w-3.5" aria-hidden="true" /> Unhide
+                      </>
+                    ) : (
+                      <>
+                        <StarOff className="h-3.5 w-3.5" aria-hidden="true" /> Hide
+                      </>
+                    )}
+                  </Button>
+                </div>
+                {review.text && <p className="text-muted text-sm">{review.text}</p>}
+              </Card>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

src/features/owner/components/service-form-sheet.tsx

@@ -8,6 +8,7 @@ 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 { MediaPicker } from "@/features/media/components/media-picker";
 import { createServiceAction, updateServiceAction } from "../actions/catalogue";
 
 export interface EditableService {
@@ -15,6 +16,7 @@ export interface EditableService {
   categoryId: string;
   name: string;
   description: string;
+  imageUrl: string | null;
   durationMinutes: number;
   price: string;
   bufferBeforeMinutes: number;
@@ -39,6 +41,7 @@ export function ServiceFormSheet({
   const [categoryId, setCategoryId] = useState(existing?.categoryId ?? defaultCategoryId);
   const [name, setName] = useState(existing?.name ?? "");
   const [description, setDescription] = useState(existing?.description ?? "");
+  const [imageUrl, setImageUrl] = useState(existing?.imageUrl ?? "");
   const [duration, setDuration] = useState(String(existing?.durationMinutes ?? 30));
   const [price, setPrice] = useState(existing?.price ?? "");
   const [bufferBefore, setBufferBefore] = useState(String(existing?.bufferBeforeMinutes ?? 0));
@@ -61,6 +64,7 @@ export function ServiceFormSheet({
         categoryId,
         name,
         description: description || undefined,
+        imageUrl: imageUrl || undefined,
         durationMinutes,
         price,
         bufferBeforeMinutes,
@@ -89,6 +93,7 @@ export function ServiceFormSheet({
         </Select>
         <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
         <Textarea label="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
+        <MediaPicker label="Photo (optional)" value={imageUrl} onChange={(url) => setImageUrl(url ?? "")} category="service" />
         <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)} />