From 7224c87cef725beb0c4c34d4d475e050e89aebfb Mon Sep 17 00:00:00 2001
From: Stefan Lazic <s.lazic@edynamix.com>
Date: Sat, 12 Sep 2026 17:24:47 +0100
Subject: [PATCH] Header Update

Updated the header of these pages to match the rest of the pages.
---
 src/app/(owner)/owner/reports/page.tsx        | 227 +++++++++---------
 src/app/(owner)/owner/services/page.tsx       |  47 ++--
 src/app/(owner)/owner/team/page.tsx           | 147 ++++++------
 .../(staff)/staff/settings/calendar/page.tsx  |   4 +-
 4 files changed, 216 insertions(+), 209 deletions(-)

diff --git a/src/app/(owner)/owner/reports/page.tsx b/src/app/(owner)/owner/reports/page.tsx
index 5e0a980..d065a18 100644
--- a/src/app/(owner)/owner/reports/page.tsx
+++ b/src/app/(owner)/owner/reports/page.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
 import { Card } from "@/components/ui/card";
+import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { hasPermission } from "@/lib/auth/permissions";
 import { Permission } from "@/generated/prisma/enums";
@@ -70,132 +71,132 @@ export default async function OwnerReportsPage({
     ]);
 
   return (
-    <div className="space-y-6 px-6 pt-12 pb-12">
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">Reports</h1>
+    <div className="pb-12">
+      <TopNav title="Reports" onBack sticky className="bg-stone" />
+      <main className="space-y-6 px-6 py-6">
         <p className="text-muted text-sm">
           {fromDate} to {toDate}
         </p>
-      </div>
 
-      <div className="flex flex-wrap gap-2">
-        {PRESETS.map((preset) => (
-          <Link
-            key={preset.days}
-            href={`/owner/reports?from=${addDays(today, -(preset.days - 1))}&to=${today}`}
-            className="border-line rounded-full border bg-white px-4 py-2 text-xs font-bold"
-          >
-            Last {preset.label}
-          </Link>
-        ))}
-      </div>
-
-      <section className="space-y-3">
-        <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Appointments</h2>
-        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-          <StatTile label="Total" value={appointmentReport.totalAppointments} />
-          <StatTile label="Completed" value={appointmentReport.completed} hint={`${appointmentReport.completionRate}% of total`} />
-          <StatTile label="Cancelled" value={appointmentReport.cancelled} hint={`${appointmentReport.cancellationRate}% of total`} />
-          <StatTile label="No-shows" value={appointmentReport.noShow} hint={`${appointmentReport.noShowRate}% of total`} />
+        <div className="flex flex-wrap gap-2">
+          {PRESETS.map((preset) => (
+            <Link
+              key={preset.days}
+              href={`/owner/reports?from=${addDays(today, -(preset.days - 1))}&to=${today}`}
+              className="border-line rounded-full border bg-white px-4 py-2 text-xs font-bold"
+            >
+              Last {preset.label}
+            </Link>
+          ))}
         </div>
-        <div className="grid grid-cols-3 gap-3">
-          <StatTile label="Gross revenue" value={`£${appointmentReport.grossRevenue}`} />
-          <StatTile label="Discounts given" value={`£${appointmentReport.discountsGiven}`} />
-          <StatTile label="Net revenue" value={`£${appointmentReport.netRevenue}`} />
-        </div>
-      </section>
 
-      <section className="space-y-3">
-        <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Services</h2>
-        <Card className="divide-line divide-y px-5">
-          {serviceReport.length === 0 ? (
-            <p className="text-muted py-4 text-sm">No completed appointments in this range.</p>
-          ) : (
-            serviceReport.map((s) => (
-              <div key={s.serviceId} className="flex items-center justify-between py-3 text-sm">
-                <div>
-                  <p className="font-bold">{s.name}</p>
-                  <p className="text-muted text-xs">{s.timesCompleted} completed</p>
-                </div>
-                <span className="font-bold">£{s.revenue}</span>
-              </div>
-            ))
-          )}
-        </Card>
-      </section>
+        <section className="space-y-3">
+          <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Appointments</h2>
+          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+            <StatTile label="Total" value={appointmentReport.totalAppointments} />
+            <StatTile label="Completed" value={appointmentReport.completed} hint={`${appointmentReport.completionRate}% of total`} />
+            <StatTile label="Cancelled" value={appointmentReport.cancelled} hint={`${appointmentReport.cancellationRate}% of total`} />
+            <StatTile label="No-shows" value={appointmentReport.noShow} hint={`${appointmentReport.noShowRate}% of total`} />
+          </div>
+          <div className="grid grid-cols-3 gap-3">
+            <StatTile label="Gross revenue" value={`£${appointmentReport.grossRevenue}`} />
+            <StatTile label="Discounts given" value={`£${appointmentReport.discountsGiven}`} />
+            <StatTile label="Net revenue" value={`£${appointmentReport.netRevenue}`} />
+          </div>
+        </section>
 
-      <section className="space-y-3">
-        <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Staff</h2>
-        <Card className="divide-line divide-y px-5">
-          {staffReport.length === 0 ? (
-            <p className="text-muted py-4 text-sm">No appointments in this range.</p>
-          ) : (
-            staffReport.map((s) => (
-              <div key={s.staffId} className="flex items-center justify-between py-3 text-sm">
-                <div>
-                  <p className="font-bold">{s.name}</p>
-                  <p className="text-muted text-xs">
-                    {s.completed} completed · {s.cancelled} cancelled · {s.noShow} no-show
-                  </p>
-                </div>
-                <span className="font-bold">£{s.revenue}</span>
-              </div>
-            ))
-          )}
-        </Card>
-      </section>
-
-      <section className="space-y-3">
-        <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Customers</h2>
-        <div className="grid grid-cols-2 gap-3">
-          <StatTile label="New customers" value={customerReport.newCustomers} />
-          <StatTile label="Returning customers" value={customerReport.returningCustomers} />
-        </div>
-        {customerReport.topCustomers.length > 0 && (
+        <section className="space-y-3">
+          <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Services</h2>
           <Card className="divide-line divide-y px-5">
-            {customerReport.topCustomers.map((c) => (
-              <div key={c.customerId} className="flex items-center justify-between py-3 text-sm">
-                <div>
-                  <p className="font-bold">{c.name}</p>
-                  <p className="text-muted text-xs">{c.visits} visit{c.visits === 1 ? "" : "s"}</p>
+            {serviceReport.length === 0 ? (
+              <p className="text-muted py-4 text-sm">No completed appointments in this range.</p>
+            ) : (
+              serviceReport.map((s) => (
+                <div key={s.serviceId} className="flex items-center justify-between py-3 text-sm">
+                  <div>
+                    <p className="font-bold">{s.name}</p>
+                    <p className="text-muted text-xs">{s.timesCompleted} completed</p>
+                  </div>
+                  <span className="font-bold">£{s.revenue}</span>
                 </div>
-                <span className="font-bold">£{c.spend}</span>
-              </div>
-            ))}
+              ))
+            )}
           </Card>
-        )}
-      </section>
+        </section>
 
-      <section className="space-y-3">
-        <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Loyalty</h2>
-        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-          <StatTile label="Stamps issued" value={loyaltyReport.stampsIssued} />
-          <StatTile label="Stamps removed" value={loyaltyReport.stampsRemoved} />
-          <StatTile label="Rewards earned" value={loyaltyReport.rewardsEarned} />
-          <StatTile label="Rewards redeemed" value={loyaltyReport.rewardsRedeemed} />
-        </div>
-        {loyaltyReport.rewardsExpired > 0 && <StatTile label="Rewards expired" value={loyaltyReport.rewardsExpired} />}
-      </section>
-
-      <section className="space-y-3">
-        <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Notifications</h2>
-        <div className="grid grid-cols-2 gap-3">
-          <StatTile label="Sent" value={notificationReport.totalSent} />
-          <StatTile label="Failed" value={notificationReport.totalFailed} />
-        </div>
-        {notificationReport.byChannel.length > 0 && (
+        <section className="space-y-3">
+          <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Staff</h2>
           <Card className="divide-line divide-y px-5">
-            {notificationReport.byChannel.map((c) => (
-              <div key={c.channel} className="flex items-center justify-between py-3 text-sm">
-                <span className="font-bold">{c.channel}</span>
-                <span className="text-muted">
-                  {c.sent} sent{c.failed > 0 ? ` · ${c.failed} failed` : ""}
-                </span>
-              </div>
-            ))}
+            {staffReport.length === 0 ? (
+              <p className="text-muted py-4 text-sm">No appointments in this range.</p>
+            ) : (
+              staffReport.map((s) => (
+                <div key={s.staffId} className="flex items-center justify-between py-3 text-sm">
+                  <div>
+                    <p className="font-bold">{s.name}</p>
+                    <p className="text-muted text-xs">
+                      {s.completed} completed · {s.cancelled} cancelled · {s.noShow} no-show
+                    </p>
+                  </div>
+                  <span className="font-bold">£{s.revenue}</span>
+                </div>
+              ))
+            )}
           </Card>
-        )}
-      </section>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Customers</h2>
+          <div className="grid grid-cols-2 gap-3">
+            <StatTile label="New customers" value={customerReport.newCustomers} />
+            <StatTile label="Returning customers" value={customerReport.returningCustomers} />
+          </div>
+          {customerReport.topCustomers.length > 0 && (
+            <Card className="divide-line divide-y px-5">
+              {customerReport.topCustomers.map((c) => (
+                <div key={c.customerId} className="flex items-center justify-between py-3 text-sm">
+                  <div>
+                    <p className="font-bold">{c.name}</p>
+                    <p className="text-muted text-xs">{c.visits} visit{c.visits === 1 ? "" : "s"}</p>
+                  </div>
+                  <span className="font-bold">£{c.spend}</span>
+                </div>
+              ))}
+            </Card>
+          )}
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Loyalty</h2>
+          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+            <StatTile label="Stamps issued" value={loyaltyReport.stampsIssued} />
+            <StatTile label="Stamps removed" value={loyaltyReport.stampsRemoved} />
+            <StatTile label="Rewards earned" value={loyaltyReport.rewardsEarned} />
+            <StatTile label="Rewards redeemed" value={loyaltyReport.rewardsRedeemed} />
+          </div>
+          {loyaltyReport.rewardsExpired > 0 && <StatTile label="Rewards expired" value={loyaltyReport.rewardsExpired} />}
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Notifications</h2>
+          <div className="grid grid-cols-2 gap-3">
+            <StatTile label="Sent" value={notificationReport.totalSent} />
+            <StatTile label="Failed" value={notificationReport.totalFailed} />
+          </div>
+          {notificationReport.byChannel.length > 0 && (
+            <Card className="divide-line divide-y px-5">
+              {notificationReport.byChannel.map((c) => (
+                <div key={c.channel} className="flex items-center justify-between py-3 text-sm">
+                  <span className="font-bold">{c.channel}</span>
+                  <span className="text-muted">
+                    {c.sent} sent{c.failed > 0 ? ` · ${c.failed} failed` : ""}
+                  </span>
+                </div>
+              ))}
+            </Card>
+          )}
+        </section>
+      </main>
     </div>
   );
 }
diff --git a/src/app/(owner)/owner/services/page.tsx b/src/app/(owner)/owner/services/page.tsx
index 148f5da..f17fc7f 100644
--- a/src/app/(owner)/owner/services/page.tsx
+++ b/src/app/(owner)/owner/services/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
+import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { hasPermission } from "@/lib/auth/permissions";
 import { Permission } from "@/generated/prisma/enums";
@@ -24,28 +25,30 @@ export default async function OwnerServicesPage() {
   const categories = await listCategories(prisma, context.businessId);
 
   return (
-    <div className="px-6 pt-12 pb-12 lg:max-w-3xl">
-      <h1 className="mb-6 text-2xl font-bold tracking-tight">Services</h1>
-      <CatalogueManager
-        categories={categories.map((c) => ({
-          id: c.id,
-          name: c.name,
-          isActive: c.isActive,
-          services: c.services.map((s) => ({
-            id: s.id,
-            categoryId: s.categoryId,
-            name: s.name,
-            description: s.description ?? "",
-            imageUrl: s.imageUrl,
-            durationMinutes: s.durationMinutes,
-            price: s.price.toString(),
-            bufferBeforeMinutes: s.bufferBeforeMinutes,
-            bufferAfterMinutes: s.bufferAfterMinutes,
-            isActive: s.isActive,
-            allowOnlineBooking: s.allowOnlineBooking,
-          })),
-        }))}
-      />
+    <div className="pb-12">
+      <TopNav title="Services" onBack sticky className="bg-stone" />
+      <main className="px-6 py-6 lg:max-w-3xl">
+        <CatalogueManager
+          categories={categories.map((c) => ({
+            id: c.id,
+            name: c.name,
+            isActive: c.isActive,
+            services: c.services.map((s) => ({
+              id: s.id,
+              categoryId: s.categoryId,
+              name: s.name,
+              description: s.description ?? "",
+              imageUrl: s.imageUrl,
+              durationMinutes: s.durationMinutes,
+              price: s.price.toString(),
+              bufferBeforeMinutes: s.bufferBeforeMinutes,
+              bufferAfterMinutes: s.bufferAfterMinutes,
+              isActive: s.isActive,
+              allowOnlineBooking: s.allowOnlineBooking,
+            })),
+          }))}
+        />
+      </main>
     </div>
   );
 }
diff --git a/src/app/(owner)/owner/team/page.tsx b/src/app/(owner)/owner/team/page.tsx
index 8e221bb..0f49298 100644
--- a/src/app/(owner)/owner/team/page.tsx
+++ b/src/app/(owner)/owner/team/page.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { Plus, Search, ShieldCheck, ShieldPlus } from "lucide-react";
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
+import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { hasPermission } from "@/lib/auth/permissions";
 import { Permission } from "@/generated/prisma/enums";
@@ -30,80 +31,82 @@ export default async function OwnerTeamPage({
   const { q = "" } = await searchParams;
   const staff = await listStaffForBusiness(prisma, { businessId: context.businessId, q, includeInactive: true });
 
+  const headerAction = (
+    <div className="flex items-center gap-2">
+      <Link
+        href="/owner/team/add-administrator"
+        className="border-line text-ink flex h-10 w-10 items-center justify-center rounded-full border"
+        aria-label="Invite administrator"
+        title="Invite Administrator"
+      >
+        <ShieldPlus className="h-4 w-4" aria-hidden="true" />
+      </Link>
+      <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>
+  );
+
   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>
-        <div className="flex items-center gap-2">
-          <Link
-            href="/owner/team/add-administrator"
-            className="border-line text-ink flex h-10 w-10 items-center justify-center rounded-full border"
-            aria-label="Invite administrator"
-            title="Invite Administrator"
-          >
-            <ShieldPlus className="h-4 w-4" aria-hidden="true" />
-          </Link>
-          <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 className="pb-12">
+      <TopNav title="Team" onBack sticky className="bg-stone" action={headerAction} />
+      <main className="px-6 py-6 lg:max-w-4xl">
+        <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-md 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-md 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 flex items-center gap-1 text-[10px] font-bold tracking-widest uppercase">
+                    {s.role.name === "Administrator" && (
+                      <ShieldCheck className="h-3 w-3 shrink-0" aria-hidden="true" />
+                    )}
+                    {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>
-
-      <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-md 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-md 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 flex items-center gap-1 text-[10px] font-bold tracking-widest uppercase">
-                  {s.role.name === "Administrator" && (
-                    <ShieldCheck className="h-3 w-3 shrink-0" aria-hidden="true" />
-                  )}
-                  {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>
+      </main>
     </div>
   );
 }
diff --git a/src/app/(staff)/staff/settings/calendar/page.tsx b/src/app/(staff)/staff/settings/calendar/page.tsx
index ed8c58f..4eb5f63 100644
--- a/src/app/(staff)/staff/settings/calendar/page.tsx
+++ b/src/app/(staff)/staff/settings/calendar/page.tsx
@@ -28,8 +28,8 @@ export default async function StaffCalendarSettingsPage() {
       <TopNav title="Google Calendar" onBack sticky className="bg-stone" />
       <main className="mx-auto max-w-2xl space-y-6 px-6 py-6">
         <p className="text-muted text-sm">
-          One-way sync: {branding.name} stays the source of truth, and your confirmed appointments are pushed to
-          Google Calendar. Nothing is ever imported back from Google.
+         {/* {branding.name} */}
+      NextChair is where your bookings are managed. Connect your Google Calendar to automatically add confirmed appointments to your personal calendar.
         </p>
         <CalendarConnectionPanel
           configured={configured}