Header Update

Updated the header of these pages to match the rest of the pages.

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,13 +71,12 @@ export default async function OwnerReportsPage({
     ]);
 
   return (
-    <div className="space-y-6 px-6 pt-12 pb-12">
+    <div className="pb-12">
-      <div>
+      <TopNav title="Reports" onBack sticky className="bg-stone" />
-        <h1 className="text-2xl font-bold tracking-tight">Reports</h1>
+      <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) => (
@@ -196,6 +196,7 @@ export default async function OwnerReportsPage({
             </Card>
           )}
         </section>
+      </main>
     </div>
   );
 }

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,8 +25,9 @@ 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">
+    <div className="pb-12">
-      <h1 className="mb-6 text-2xl font-bold tracking-tight">Services</h1>
+      <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,
@@ -46,6 +48,7 @@ export default async function OwnerServicesPage() {
             })),
           }))}
         />
+      </main>
     </div>
   );
 }

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,10 +31,7 @@ export default async function OwnerTeamPage({
   const { q = "" } = await searchParams;
   const staff = await listStaffForBusiness(prisma, { businessId: context.businessId, q, includeInactive: true });
 
-  return (
+  const headerAction = (
-    <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"
@@ -51,8 +49,12 @@ export default async function OwnerTeamPage({
         <Plus className="h-4 w-4" aria-hidden="true" />
       </Link>
     </div>
-      </div>
+  );
 
+  return (
+    <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">
@@ -104,6 +106,7 @@ export default async function OwnerTeamPage({
             ))
           )}
         </div>
+      </main>
     </div>
   );
 }

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
+         {/* {branding.name} */}
-          Google Calendar. Nothing is ever imported back from Google.
+      NextChair is where your bookings are managed. Connect your Google Calendar to automatically add confirmed appointments to your personal calendar.
         </p>
         <CalendarConnectionPanel
           configured={configured}