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/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)} />