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).
2026-08-04 17:10:30 +01:00
1 parent 77f25c0489
commit 9e39908ea7
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+
+export interface ImageGalleryProps {
+  images: { id: string; url: string; caption?: string | null }[];
+  className?: string;
+}
+
+/**
+ * Home page hero — a real gallery with thumbnails (Phase 9), replacing
+ * the old single full-bleed logo banner. Matches the content width rather
+ * than bleeding edge-to-edge, per the brief. Plain click-to-swap + arrow
+ * buttons; no swipe-gesture library, since the thumbnail strip already
+ * covers "jump to any image" and arrows cover "next/previous" — a
+ * touch-drag carousel would be a reasonable future upgrade, not required
+ * for this to be a real gallery.
+ */
+export function ImageGallery({ images, className }: ImageGalleryProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  if (images.length === 0) return null;
+
+  const active = images[Math.min(activeIndex, images.length - 1)]!;
+  const goTo = (index: number) => setActiveIndex((index + images.length) % images.length);
+
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="bg-stone relative aspect-[16/9] w-full overflow-hidden rounded-jumbo">
+        {/* eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern used app-wide */}
+        <img src={active.url} alt={active.caption ?? ""} className="h-full w-full object-cover" />
+        {images.length > 1 && (
+          <>
+            <button
+              type="button"
+              onClick={() => goTo(activeIndex - 1)}
+              aria-label="Previous image"
+              className="bg-ink/60 hover:bg-ink/80 absolute top-1/2 left-3 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-white"
+            >
+              <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              onClick={() => goTo(activeIndex + 1)}
+              aria-label="Next image"
+              className="bg-ink/60 hover:bg-ink/80 absolute top-1/2 right-3 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-white"
+            >
+              <ChevronRight className="h-4 w-4" aria-hidden="true" />
+            </button>
+          </>
+        )}
+      </div>
+
+      {images.length > 1 && (
+        <div className="mt-2 flex gap-2 overflow-x-auto pb-1">
+          {images.map((image, index) => (
+            <button
+              key={image.id}
+              type="button"
+              onClick={() => setActiveIndex(index)}
+              aria-label={`Show image ${index + 1}`}
+              aria-current={index === activeIndex}
+              className={cn(
+                "h-14 w-20 shrink-0 overflow-hidden rounded-lg border-2",
+                index === activeIndex ? "border-ink" : "border-transparent opacity-70",
+              )}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern used app-wide */}
+              <img src={image.url} alt="" className="h-full w-full object-cover" />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}