UI Updates

Updated some pages pages to be more consistent.

e2e/owner-journeys.spec.ts

@@ -55,21 +55,26 @@ test.describe.serial("owner administration journeys", () => {
     await page.goto("/owner/calendar");
 
     await expect(page.getByRole("heading", { name: "Calendar" })).toBeVisible();
-    await expect(page.getByRole("link", { name: "Marcus Reed", exact: true })).toBeVisible();
-    await expect(page.getByRole("link", { name: "Leo Vance", exact: true })).toBeVisible();
+    // The staff filter pills are avatar+name+hours cards now, so their
+    // accessible name is "Marcus Reed 10:00 AM – 7:00 PM" etc — a
+    // substring match (Playwright's default, no `exact`) still uniquely
+    // identifies each pill's link.
+    await expect(page.getByRole("link", { name: "Marcus Reed" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Leo Vance" })).toBeVisible();
 
     // Filtering to one staff member narrows the day view to a single column.
-    await page.getByRole("link", { name: "Leo Vance", exact: true }).click();
+    await page.getByRole("link", { name: "Leo Vance" }).click();
     await expect(page).toHaveURL(/staffId=/);
     // The single remaining day-view column is headed by a <p> with the staff member's exact name
-    // (the filter pill link has the same text, so scope to the paragraph specifically).
-    await expect(page.locator("p").getByText("Leo Vance", { exact: true })).toBeVisible();
+    // — the staff filter pill above it is *also* an avatar+name+hours card with its own <p> of the
+    // same text now, so scope to the grid itself (data-testid="calendar-grid") to disambiguate.
+    await expect(page.getByTestId("calendar-grid").locator("p").getByText("Leo Vance", { exact: true })).toBeVisible();
 
     await page.getByRole("link", { name: "Agenda", exact: true }).click();
     await expect(page).toHaveURL(/view=agenda/);
     await expect(page.getByRole("link", { name: "Day", exact: true })).toBeVisible();
 
-    await page.getByRole("link", { name: "All Staff", exact: true }).click();
+    await page.getByRole("link", { name: "All Staff" }).click();
     await expect(page).not.toHaveURL(/staffId=/);
   });
 

src/app/(customer)/appointments/page.tsx

@@ -6,11 +6,14 @@ import { AppointmentCard } from "@/components/ui/appointment-card";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { EmptyState } from "@/components/feedback/empty-state";
+import { TopNav } from "@/components/navigation/top-nav";
 import { getPrimaryBusiness } from "@/lib/business/get-primary-business";
 import { prisma } from "@/lib/db/prisma";
 import { listAppointments } from "@/services/scheduling/appointment.service";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
 import { BookAgainButton } from "@/features/booking/components/book-again-button";
 import { CancelAppointmentDialog } from "@/features/booking/components/cancel-appointment-dialog";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
 import type { AppointmentStatus } from "@/types/domain";
 
 export const metadata: Metadata = { title: "Appointments" };
@@ -36,41 +39,49 @@ export default async function AppointmentsPage() {
 
   if (!session?.user) {
     return (
-      <div className="mx-auto max-w-2xl px-6 pt-12">
-        <h1 className="mb-6 text-2xl font-bold tracking-tight">Appointments</h1>
-        <EmptyState
-          icon={LogIn}
-          title="Sign in to see your appointments"
-          description="Create an account or sign in to view, reschedule, and cancel your bookings."
-          action={
-            <Button asChild>
-              <Link href="/sign-in?callbackUrl=/appointments">Sign In</Link>
-            </Button>
-          }
-        />
+      <div className="pb-12">
+        <TopNav title="Appointments" sticky className="bg-stone" />
+        <div className="mx-auto max-w-2xl px-6 pt-6">
+          <EmptyState
+            icon={LogIn}
+            title="Sign in to see your appointments"
+            description="Create an account or sign in to view, reschedule, and cancel your bookings."
+            action={
+              <Button asChild>
+                <Link href="/sign-in?callbackUrl=/appointments">Sign In</Link>
+              </Button>
+            }
+          />
+        </div>
       </div>
     );
   }
 
-  const business = await getPrimaryBusiness();
+  const [business, unreadNotificationCount] = await Promise.all([
+    getPrimaryBusiness(),
+    getUnreadNotificationCount(prisma, session.user.id),
+  ]);
   const customerProfile = await prisma.customerProfile.findUnique({
     where: { userId: session.user.id },
   });
+  const bell = <InlineNotificationBell href="/notifications" unreadCount={unreadNotificationCount} />;
 
   if (!customerProfile) {
     return (
-      <div className="mx-auto max-w-2xl px-6 pt-12">
-        <h1 className="mb-6 text-2xl font-bold tracking-tight">Appointments</h1>
-        <EmptyState
-          icon={CalendarPlus}
-          title="No appointments yet"
-          description="Book your first appointment to see it here."
-          action={
-            <Button asChild>
-              <Link href="/book">Book Now</Link>
-            </Button>
-          }
-        />
+      <div className="pb-12">
+        <TopNav title="Appointments" sticky className="bg-stone" action={bell} />
+        <div className="mx-auto max-w-2xl px-6 pt-6">
+          <EmptyState
+            icon={CalendarPlus}
+            title="No appointments yet"
+            description="Book your first appointment to see it here."
+            action={
+              <Button asChild>
+                <Link href="/book">Book Now</Link>
+              </Button>
+            }
+          />
+        </div>
       </div>
     );
   }
@@ -153,18 +164,20 @@ export default async function AppointmentsPage() {
   };
 
   return (
-    <div className="mx-auto max-w-2xl px-6 pt-12">
-      <h1 className="mb-6 text-2xl font-bold tracking-tight">Appointments</h1>
-      <Tabs defaultValue="upcoming">
-        <TabsList>
-          <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
-          <TabsTrigger value="past">Past</TabsTrigger>
-          <TabsTrigger value="cancelled">Cancelled</TabsTrigger>
-        </TabsList>
-        <TabsContent value="upcoming">{renderList(upcoming, "upcoming")}</TabsContent>
-        <TabsContent value="past">{renderList(past, "past")}</TabsContent>
-        <TabsContent value="cancelled">{renderList(cancelled, "cancelled")}</TabsContent>
-      </Tabs>
+    <div className="pb-12">
+      <TopNav title="Appointments" sticky className="bg-stone" action={bell} />
+      <div className="mx-auto max-w-2xl px-6 pt-6">
+        <Tabs defaultValue="upcoming">
+          <TabsList>
+            <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
+            <TabsTrigger value="past">Past</TabsTrigger>
+            <TabsTrigger value="cancelled">Cancelled</TabsTrigger>
+          </TabsList>
+          <TabsContent value="upcoming">{renderList(upcoming, "upcoming")}</TabsContent>
+          <TabsContent value="past">{renderList(past, "past")}</TabsContent>
+          <TabsContent value="cancelled">{renderList(cancelled, "cancelled")}</TabsContent>
+        </Tabs>
+      </div>
     </div>
   );
 }

src/app/(customer)/loyalty/page.tsx

@@ -10,7 +10,9 @@ import { TopNav } from "@/components/navigation/top-nav";
 import { getPrimaryBusiness } from "@/lib/business/get-primary-business";
 import { prisma } from "@/lib/db/prisma";
 import { getLoyaltyHistory, getLoyaltySummary } from "@/services/loyalty/loyalty.service";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
 import { resolveRewardThreshold } from "@/services/loyalty/reward-threshold";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
 
 export const metadata: Metadata = { title: "Loyalty" };
 export const dynamic = "force-dynamic";
@@ -20,25 +22,29 @@ export default async function LoyaltyPage() {
 
   if (!session?.user) {
     return (
-      <div className="mx-auto max-w-2xl px-6 pt-12">
-        <h1 className="mb-6 text-2xl font-bold tracking-tight">Loyalty</h1>
-        <EmptyState
-          icon={LogIn}
-          title="Sign in to see your loyalty card"
-          description="Track your stamps and rewards across visits."
-          action={
-            <Button asChild>
-              <Link href="/sign-in?callbackUrl=/loyalty">Sign In</Link>
-            </Button>
-          }
-        />
+      <div className="pb-12">
+        <TopNav title="Loyalty" sticky className="bg-stone" />
+        <main className="mx-auto max-w-2xl px-6 py-6">
+          <EmptyState
+            icon={LogIn}
+            title="Sign in to see your loyalty card"
+            description="Track your stamps and rewards across visits."
+            action={
+              <Button asChild>
+                <Link href="/sign-in?callbackUrl=/loyalty">Sign In</Link>
+              </Button>
+            }
+          />
+        </main>
       </div>
     );
   }
 
-  const customerProfile = await prisma.customerProfile.findUnique({
-    where: { userId: session.user.id },
-  });
+  const [customerProfile, unreadNotificationCount] = await Promise.all([
+    prisma.customerProfile.findUnique({ where: { userId: session.user.id } }),
+    getUnreadNotificationCount(prisma, session.user.id),
+  ]);
+  const bell = <InlineNotificationBell href="/notifications" unreadCount={unreadNotificationCount} />;
 
   const loyalty = customerProfile
     ? await getLoyaltySummary(prisma, { customerId: customerProfile.id, businessId: business.id })
@@ -47,7 +53,7 @@ export default async function LoyaltyPage() {
   if (!customerProfile || !loyalty?.isEnabled) {
     return (
       <div className="pb-12">
-        <TopNav title="Loyalty" onBack sticky className="bg-stone" />
+        <TopNav title="Loyalty" sticky className="bg-stone" action={bell} />
         <main className="mx-auto max-w-2xl px-6 py-6">
           <EmptyState
             icon={Gift}
@@ -72,7 +78,7 @@ export default async function LoyaltyPage() {
 
   return (
     <div className="pb-12">
-      <TopNav title="Loyalty" onBack sticky className="bg-stone" />
+      <TopNav title="Loyalty" sticky className="bg-stone" action={bell} />
 
       <main className="mx-auto max-w-2xl space-y-4 px-6 py-6">
         <LoyaltyCard

src/app/(customer)/settings/page.tsx

@@ -5,10 +5,13 @@ import { auth } from "@/auth";
 import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/feedback/empty-state";
 import { ProfileCard } from "@/components/ui/profile-card";
+import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { getBranding } from "@/lib/business/branding";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
 import { SignOutButton } from "@/features/auth/components/sign-out-button";
 import { InstallAppButton } from "@/features/pwa/components/install-app-button";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
 
 export const metadata: Metadata = { title: "Settings" };
 export const dynamic = "force-dynamic";
@@ -24,57 +27,67 @@ export default async function CustomerSettingsPage() {
 
   if (!session?.user) {
     return (
-      <div className="mx-auto max-w-2xl px-6 pt-12">
-        <h1 className="mb-6 text-2xl font-bold tracking-tight">Settings</h1>
-        <EmptyState
-          icon={LogIn}
-          title="Sign in to manage your account"
-          description="Save your details, track loyalty rewards, and manage your bookings."
-          action={
-            <Button asChild>
-              <Link href="/sign-in?callbackUrl=/settings">Sign In</Link>
-            </Button>
-          }
-        />
+      <div className="pb-12">
+        <TopNav title="Settings" sticky className="bg-stone" />
+        <div className="mx-auto max-w-2xl px-6 pt-6">
+          <EmptyState
+            icon={LogIn}
+            title="Sign in to manage your account"
+            description="Save your details, track loyalty rewards, and manage your bookings."
+            action={
+              <Button asChild>
+                <Link href="/sign-in?callbackUrl=/settings">Sign In</Link>
+              </Button>
+            }
+          />
+        </div>
       </div>
     );
   }
 
-  const [customerProfile, user, branding] = await Promise.all([
+  const [customerProfile, user, branding, unreadNotificationCount] = await Promise.all([
     prisma.customerProfile.findUnique({ where: { userId: session.user.id } }),
     prisma.user.findUnique({ where: { id: session.user.id }, select: { image: true } }),
     getBranding(),
+    getUnreadNotificationCount(prisma, session.user.id),
   ]);
 
   return (
-    <div className="mx-auto max-w-2xl space-y-6 px-6 pt-12">
-      <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
-      <ProfileCard
-        name={
-          customerProfile
-            ? `${customerProfile.firstName} ${customerProfile.lastName}`
-            : (session.user.name ?? "Signed-in customer")
-        }
-        meta={customerProfile?.email ?? session.user.email}
-        avatarUrl={user?.image ?? undefined}
-        editHref="/settings/profile"
+    <div className="pb-12">
+      <TopNav
+        title="Settings"
+        sticky
+        className="bg-stone"
+        action={<InlineNotificationBell href="/notifications" unreadCount={unreadNotificationCount} />}
       />
-      <ul className="divide-line divide-y rounded-md border border-line bg-white">
-        {SETTINGS_LINKS.map(({ href, label, icon: Icon }) => (
-          <li key={href}>
-            <Link href={href} className="hover:bg-stone flex items-center gap-3 px-5 py-4 text-sm font-bold">
-              <Icon className="text-muted h-5 w-5" aria-hidden="true" />
-              <span className="flex-1">{label}</span>
-              <ChevronRight className="text-muted h-4 w-4" aria-hidden="true" />
-            </Link>
-          </li>
-        ))}
-      </ul>
-      <div className="border-line rounded-md border bg-white p-5">
-        <p className="mb-3 text-sm font-bold">Get the app</p>
-        <InstallAppButton businessName={branding.name} />
+      <div className="mx-auto max-w-2xl space-y-6 px-6 pt-6">
+        <ProfileCard
+          name={
+            customerProfile
+              ? `${customerProfile.firstName} ${customerProfile.lastName}`
+              : (session.user.name ?? "Signed-in customer")
+          }
+          meta={customerProfile?.email ?? session.user.email}
+          avatarUrl={user?.image ?? undefined}
+          editHref="/settings/profile"
+        />
+        <ul className="divide-line divide-y rounded-md border border-line bg-white">
+          {SETTINGS_LINKS.map(({ href, label, icon: Icon }) => (
+            <li key={href}>
+              <Link href={href} className="hover:bg-stone flex items-center gap-3 px-5 py-4 text-sm font-bold">
+                <Icon className="text-muted h-5 w-5" aria-hidden="true" />
+                <span className="flex-1">{label}</span>
+                <ChevronRight className="text-muted h-4 w-4" aria-hidden="true" />
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <div className="border-line rounded-md border bg-white p-5">
+          <p className="mb-3 text-sm font-bold">Get the app</p>
+          <InstallAppButton businessName={branding.name} />
+        </div>
+        <SignOutButton />
       </div>
-      <SignOutButton />
     </div>
   );
 }

src/app/(owner)/owner/calendar/page.tsx

@@ -6,6 +6,7 @@ import { auth } from "@/auth";
 import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/feedback/empty-state";
 import { AppointmentCard } from "@/components/ui/appointment-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";
@@ -19,11 +20,15 @@ import {
 import type { CalendarDate } from "@/lib/time/business-time";
 import { getAvailableRewardFlags } from "@/services/loyalty/loyalty.service";
 import { listAppointments } from "@/services/scheduling/appointment.service";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
 import { DateStrip } from "@/features/staff/components/date-strip";
 import { DayCalendar } from "@/features/staff/components/day-calendar";
 import type { CalendarAppointment, CalendarBlock, CalendarColumn } from "@/features/staff/components/day-calendar";
+import { ViewSwitch } from "@/features/staff/components/view-switch";
 import { OwnerBlockTimeButton } from "@/features/owner/components/owner-block-time-button";
-import { cn } from "@/lib/utils/cn";
+import { StaffFilterPills } from "@/features/owner/components/staff-filter-pills";
+import type { StaffFilterOption } from "@/features/owner/components/staff-filter-pills";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
 import type { AppointmentStatus } from "@/types/domain";
 
 export const metadata: Metadata = { title: "All-Staff Calendar" };
@@ -64,6 +69,8 @@ export default async function OwnerCalendarPage({
   const context = await getActingBusinessContext();
   if (!context) redirect("/staff");
 
+  const unreadNotificationCount = await getUnreadNotificationCount(prisma, session.user.id);
+
   const { date: dateParam, view: viewParam, staffId: staffIdParam } = await searchParams;
   const today = todayIn(context.businessTimezone);
   const date: CalendarDate = dateParam ?? today;
@@ -173,23 +180,42 @@ export default async function OwnerCalendarPage({
     };
   });
 
+  // Every active staff member gets a filter card (not just staffToRender,
+  // which narrows to the current selection) — the filter row needs to show
+  // everyone to filter *between*.
+  const staffFilterOptions: StaffFilterOption[] = allStaff.map((s) => {
+    const workingHours = workingHoursAll.find((h) => h.staffId === s.id);
+    const hoursLabel =
+      workingHours && !workingHours.isOff && workingHours.startMinutes !== null && workingHours.endMinutes !== null
+        ? formatRange(workingHours.startMinutes, workingHours.endMinutes)
+        : null;
+    return { id: s.id, name: s.user.name ?? "Staff", avatarUrl: s.user.image, hoursLabel };
+  });
+  const staffFilterHrefFor = (staffId: string | null) =>
+    `/owner/calendar?date=${date}&view=${view}${staffId ? `&staffId=${staffId}` : ""}`;
+
   return (
     <div className="pb-6">
-      <div className="flex items-center justify-between px-6 pt-12">
-        <h1 className="text-2xl font-bold tracking-tight">Calendar</h1>
-        <div className="flex gap-2">
-          {selectedStaff && <OwnerBlockTimeButton staffId={selectedStaff.id} staffName={selectedStaff.user.name ?? "Staff"} date={date} />}
-          <Button asChild size="sm">
-            {/* /staff/book already lets whoever is signed in book with any eligible barber — the
-                owner is a staff member too, so this is the same "book for a customer" flow Phase 5
-                built, not a duplicate. See docs/phase-6-summary.md, "Owner appointment access". */}
-            <Link href="/staff/book">
-              <Plus className="h-4 w-4" aria-hidden="true" />
-              New
-            </Link>
-          </Button>
-        </div>
-      </div>
+      <TopNav
+        title="Calendar"
+        sticky
+        className="bg-stone"
+        leftAction={<InlineNotificationBell href="/owner/notifications" unreadCount={unreadNotificationCount} />}
+        action={
+          <div className="flex gap-2">
+            {selectedStaff && <OwnerBlockTimeButton staffId={selectedStaff.id} staffName={selectedStaff.user.name ?? "Staff"} date={date} />}
+            <Button asChild size="sm">
+              {/* /staff/book already lets whoever is signed in book with any eligible barber — the
+                  owner is a staff member too, so this is the same "book for a customer" flow Phase 5
+                  built, not a duplicate. See docs/phase-6-summary.md, "Owner appointment access". */}
+              <Link href="/staff/book">
+                <Plus className="h-4 w-4" aria-hidden="true" />
+                New
+              </Link>
+            </Button>
+          </div>
+        }
+      />
 
       <DateStrip
         selectedDate={date}
@@ -199,49 +225,16 @@ export default async function OwnerCalendarPage({
         extraParams={selectedStaff ? { staffId: selectedStaff.id } : undefined}
       />
 
-      <div className="mt-4 flex flex-wrap items-center gap-2 px-6">
-        <Link
-          href={`/owner/calendar?date=${date}&view=${view}`}
-          className={cn(
-            "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
-            !selectedStaff ? "bg-ink text-white" : "border-line text-muted border bg-white",
-          )}
-        >
-          All Staff
-        </Link>
-        {allStaff.map((s) => (
-          <Link
-            key={s.id}
-            href={`/owner/calendar?date=${date}&view=${view}&staffId=${s.id}`}
-            className={cn(
-              "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
-              selectedStaff?.id === s.id ? "bg-ink text-white" : "border-line text-muted border bg-white",
-            )}
-          >
-            {s.user.name}
-          </Link>
-        ))}
+      <div className="mt-4 px-6">
+        <ViewSwitch
+          view={view}
+          dayHref={`/owner/calendar?date=${date}&view=day${selectedStaff ? `&staffId=${selectedStaff.id}` : ""}`}
+          agendaHref={`/owner/calendar?date=${date}&view=agenda${selectedStaff ? `&staffId=${selectedStaff.id}` : ""}`}
+        />
       </div>
 
-      <div className="mt-4 flex gap-2 px-6">
-        <Link
-          href={`/owner/calendar?date=${date}&view=day${selectedStaff ? `&staffId=${selectedStaff.id}` : ""}`}
-          className={cn(
-            "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
-            view === "day" ? "bg-ink text-white" : "border-line text-muted border bg-white",
-          )}
-        >
-          Day
-        </Link>
-        <Link
-          href={`/owner/calendar?date=${date}&view=agenda${selectedStaff ? `&staffId=${selectedStaff.id}` : ""}`}
-          className={cn(
-            "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
-            view === "agenda" ? "bg-ink text-white" : "border-line text-muted border bg-white",
-          )}
-        >
-          Agenda
-        </Link>
+      <div className="mt-4">
+        <StaffFilterPills options={staffFilterOptions} selectedId={selectedStaff?.id} hrefFor={staffFilterHrefFor} />
       </div>
 
       <div className="mt-4">

src/app/(owner)/owner/page.tsx

@@ -22,12 +22,15 @@ import {
 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";
 import { getActingBusinessContext } from "@/lib/business/get-acting-business-context";
 import { todayIn } from "@/lib/time/business-time";
 import { getDashboardSummary } from "@/services/reporting/owner-reporting.service";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
 
 export const metadata: Metadata = { title: "Business Dashboard" };
 export const dynamic = "force-dynamic";
@@ -105,130 +108,139 @@ export default async function OwnerDashboardPage() {
   if (!context) redirect("/staff");
 
   const today = todayIn(context.businessTimezone);
-  const summary = await getDashboardSummary(prisma, {
-    businessId: context.businessId,
-    businessTimezone: context.businessTimezone,
-    date: today,
-  });
+  const [summary, unreadNotificationCount] = await Promise.all([
+    getDashboardSummary(prisma, {
+      businessId: context.businessId,
+      businessTimezone: context.businessTimezone,
+      date: today,
+    }),
+    getUnreadNotificationCount(prisma, session.user.id),
+  ]);
 
   return (
-    <div className="space-y-6 px-6 pt-12 pb-12">
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">Manage</h1>
+    <div className="pb-12">
+      <TopNav
+        title="Manage"
+        sticky
+        className="bg-stone"
+        leftAction={<InlineNotificationBell href="/owner/notifications" unreadCount={unreadNotificationCount} />}
+      />
+
+      <div className="space-y-6 px-6 pt-6">
         <p className="text-muted text-sm">{context.businessName} — today&apos;s overview</p>
-      </div>
 
-      {summary.warnings.length > 0 && (
-        <section className="space-y-2">
-          {summary.warnings.map((w, i) => (
-            <div
-              key={`${w.code}-${i}`}
-              role="alert"
-              className="bg-warning/10 text-warning-foreground border-warning/30 flex items-start gap-3 rounded-md border p-4 text-sm"
-            >
-              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
-              <p>{w.message}</p>
-            </div>
-          ))}
-        </section>
-      )}
-
-      <section className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        <StatTile icon={Calendar} label="Today's appointments" value={summary.totals.total} />
-        <StatTile icon={CheckCheck} label="Completed" value={summary.totals.completed} />
-        <StatTile icon={CalendarX2} label="Cancelled" value={summary.totals.cancelled} />
-        <StatTile icon={UserX} label="No-shows" value={summary.totals.noShow} />
-      </section>
-
-      <section className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        <StatTile icon={TrendingUp} label="In progress now" value={summary.totals.inProgress} />
-        <StatTile icon={Calendar} label="Still to come today" value={summary.totals.upcoming} />
-        <StatTile
-          icon={TrendingUp}
-          label="Estimated occupancy"
-          value={summary.occupancy ? `${summary.occupancy.percent}%` : "—"}
-          hint={summary.occupancy ? "Booked vs. working minutes today — an estimate, not a financial figure." : "No staff working today."}
-        />
-        <StatTile icon={Gift} label="Customers with a reward" value={summary.customersWithAvailableRewards} />
-      </section>
-
-      <section className="grid gap-4 lg:grid-cols-2">
-        <Card className="p-5">
-          <h2 className="mb-3 flex items-center gap-2 text-sm font-bold">
-            <Users className="text-accent h-4 w-4" aria-hidden="true" /> Staff Today
-          </h2>
-          {summary.staffWorkingToday.length === 0 ? (
-            <p className="text-muted text-sm">No one is scheduled to work today.</p>
-          ) : (
-            <ul className="space-y-2">
-              {summary.staffWorkingToday.map((s) => (
-                <li key={s.staffId} className="flex items-center justify-between text-sm">
-                  <span className="font-bold">{s.name}</span>
-                  <span className="text-accent text-xs font-bold tracking-widest uppercase">Working</span>
-                </li>
-              ))}
-            </ul>
-          )}
-          {summary.staffOnTimeOffToday.length > 0 && (
-            <ul className="border-line mt-3 space-y-2 border-t pt-3">
-              {summary.staffOnTimeOffToday.map((s) => (
-                <li key={s.staffId} className="flex items-center justify-between text-sm">
-                  <span className="font-bold">{s.name}</span>
-                  <span className="text-muted text-xs font-bold tracking-widest uppercase">
-                    {s.reason ?? "Time off"}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </Card>
-
-        <Card className="p-5">
-          <h2 className="mb-3 flex items-center gap-2 text-sm font-bold">
-            <TrendingUp className="text-accent h-4 w-4" aria-hidden="true" /> Popular Services
-          </h2>
-          <p className="text-muted mb-3 text-xs">Completed visits, last 30 days.</p>
-          {summary.popularServices.length === 0 ? (
-            <p className="text-muted text-sm">No completed visits in the last 30 days yet.</p>
-          ) : (
-            <ul className="space-y-2">
-              {summary.popularServices.map((s) => (
-                <li key={s.serviceId} className="flex items-center justify-between text-sm">
-                  <span className="font-bold">{s.name}</span>
-                  <span className="text-muted">{s.count}</span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </Card>
-      </section>
-
-      <Card className="p-5">
-        <h2 className="mb-3 flex items-center gap-2 text-sm font-bold">
-          <Stamp className="text-accent h-4 w-4" aria-hidden="true" /> Recent Loyalty Activity
-        </h2>
-        {summary.recentLoyaltyActivity.length === 0 ? (
-          <p className="text-muted text-sm">No loyalty activity yet.</p>
-        ) : (
-          <ul className="space-y-2">
-            {summary.recentLoyaltyActivity.map((t) => (
-              <li key={t.id} className="text-muted text-xs">
-                <span className="text-ink font-bold">
-                  {t.loyaltyAccount.customer.firstName} {t.loyaltyAccount.customer.lastName}
-                </span>{" "}
-                — {t.amount > 0 ? "+" : ""}
-                {t.amount} stamp{Math.abs(t.amount) === 1 ? "" : "s"} ({t.type.replace(/_/g, " ").toLowerCase()})
-                {t.authoredByStaff?.user.name ? ` · ${t.authoredByStaff.user.name}` : ""}
-              </li>
+        {summary.warnings.length > 0 && (
+          <section className="space-y-2">
+            {summary.warnings.map((w, i) => (
+              <div
+                key={`${w.code}-${i}`}
+                role="alert"
+                className="bg-warning/10 text-warning-foreground border-warning/30 flex items-start gap-3 rounded-md border p-4 text-sm"
+              >
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+                <p>{w.message}</p>
+              </div>
             ))}
-          </ul>
+          </section>
         )}
-      </Card>
 
-      <div className="space-y-5">
-        {MANAGE_SECTIONS.map((section) => (
-          <ManageSection key={section.title} {...section} />
-        ))}
+        <section className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+          <StatTile icon={Calendar} label="Today's appointments" value={summary.totals.total} />
+          <StatTile icon={CheckCheck} label="Completed" value={summary.totals.completed} />
+          <StatTile icon={CalendarX2} label="Cancelled" value={summary.totals.cancelled} />
+          <StatTile icon={UserX} label="No-shows" value={summary.totals.noShow} />
+        </section>
+
+        <section className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+          <StatTile icon={TrendingUp} label="In progress now" value={summary.totals.inProgress} />
+          <StatTile icon={Calendar} label="Still to come today" value={summary.totals.upcoming} />
+          <StatTile
+            icon={TrendingUp}
+            label="Estimated occupancy"
+            value={summary.occupancy ? `${summary.occupancy.percent}%` : "—"}
+            hint={summary.occupancy ? "Booked vs. working minutes today — an estimate, not a financial figure." : "No staff working today."}
+          />
+          <StatTile icon={Gift} label="Customers with a reward" value={summary.customersWithAvailableRewards} />
+        </section>
+
+        <section className="grid gap-4 lg:grid-cols-2">
+          <Card className="p-5">
+            <h2 className="mb-3 flex items-center gap-2 text-sm font-bold">
+              <Users className="text-accent h-4 w-4" aria-hidden="true" /> Staff Today
+            </h2>
+            {summary.staffWorkingToday.length === 0 ? (
+              <p className="text-muted text-sm">No one is scheduled to work today.</p>
+            ) : (
+              <ul className="space-y-2">
+                {summary.staffWorkingToday.map((s) => (
+                  <li key={s.staffId} className="flex items-center justify-between text-sm">
+                    <span className="font-bold">{s.name}</span>
+                    <span className="text-accent text-xs font-bold tracking-widest uppercase">Working</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {summary.staffOnTimeOffToday.length > 0 && (
+              <ul className="border-line mt-3 space-y-2 border-t pt-3">
+                {summary.staffOnTimeOffToday.map((s) => (
+                  <li key={s.staffId} className="flex items-center justify-between text-sm">
+                    <span className="font-bold">{s.name}</span>
+                    <span className="text-muted text-xs font-bold tracking-widest uppercase">
+                      {s.reason ?? "Time off"}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Card>
+
+          <Card className="p-5">
+            <h2 className="mb-3 flex items-center gap-2 text-sm font-bold">
+              <TrendingUp className="text-accent h-4 w-4" aria-hidden="true" /> Popular Services
+            </h2>
+            <p className="text-muted mb-3 text-xs">Completed visits, last 30 days.</p>
+            {summary.popularServices.length === 0 ? (
+              <p className="text-muted text-sm">No completed visits in the last 30 days yet.</p>
+            ) : (
+              <ul className="space-y-2">
+                {summary.popularServices.map((s) => (
+                  <li key={s.serviceId} className="flex items-center justify-between text-sm">
+                    <span className="font-bold">{s.name}</span>
+                    <span className="text-muted">{s.count}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Card>
+        </section>
+
+        <Card className="p-5">
+          <h2 className="mb-3 flex items-center gap-2 text-sm font-bold">
+            <Stamp className="text-accent h-4 w-4" aria-hidden="true" /> Recent Loyalty Activity
+          </h2>
+          {summary.recentLoyaltyActivity.length === 0 ? (
+            <p className="text-muted text-sm">No loyalty activity yet.</p>
+          ) : (
+            <ul className="space-y-2">
+              {summary.recentLoyaltyActivity.map((t) => (
+                <li key={t.id} className="text-muted text-xs">
+                  <span className="text-ink font-bold">
+                    {t.loyaltyAccount.customer.firstName} {t.loyaltyAccount.customer.lastName}
+                  </span>{" "}
+                  — {t.amount > 0 ? "+" : ""}
+                  {t.amount} stamp{Math.abs(t.amount) === 1 ? "" : "s"} ({t.type.replace(/_/g, " ").toLowerCase()})
+                  {t.authoredByStaff?.user.name ? ` · ${t.authoredByStaff.user.name}` : ""}
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+
+        <div className="space-y-5">
+          {MANAGE_SECTIONS.map((section) => (
+            <ManageSection key={section.title} {...section} />
+          ))}
+        </div>
       </div>
     </div>
   );

src/app/(staff)/staff/clients/[id]/page.tsx

@@ -180,18 +180,18 @@ export default async function StaffCustomerDetailsPage({
             {customer.phone && (
               <a
                 href={`tel:${customer.phone}`}
-                className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
+                className="border-line flex h-12 min-w-[104px] flex-1 items-center justify-center gap-2 rounded-md border bg-white px-4 text-xs font-bold"
               >
                 <Phone className="text-accent h-3.5 w-3.5" aria-hidden="true" /> Call
               </a>
             )}
             <a
               href={`mailto:${customer.email}`}
-              className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
+              className="border-line flex h-12 min-w-[104px] flex-1 items-center justify-center gap-2 rounded-md border bg-white px-4 text-xs font-bold"
             >
               <Mail className="text-accent h-3.5 w-3.5" aria-hidden="true" /> Email
             </a>
-            <Button asChild size="sm">
+            <Button asChild size="md" className="min-w-[104px] flex-1">
               <Link href={`/staff/book?customerId=${customer.id}`}>Book Appointment</Link>
             </Button>
           </div>
@@ -208,8 +208,11 @@ export default async function StaffCustomerDetailsPage({
                 )}
               </p>
               <div className="mb-3 flex flex-wrap gap-2">
-                <AddStampButton customerId={id} />
-                <CorrectStampButton loyaltyAccountId={loyalty.accountId} />
+                <AddStampButton customerId={id} className="min-w-[140px] flex-1" />
+                <CorrectStampButton
+                  loyaltyAccountId={loyalty.accountId}
+                  className="min-w-[140px] flex-1"
+                />
               </div>
               {loyaltyTransactions.length > 0 && (
                 <ul className="space-y-1">
@@ -246,6 +249,17 @@ export default async function StaffCustomerDetailsPage({
         </Card>
 
         <div className="mt-4 space-y-4 lg:mt-0">
+          <Card className="p-6">
+            <h2 className="text-muted mb-4 text-sm font-bold tracking-widest uppercase">Notes</h2>
+            {/* A Super Administrator has no StaffProfile/staffId — passing "" is a
+                deliberate never-matches sentinel (see CustomerNotes' isOwn check),
+                so they can view every note but own none. Adding a note as a
+                Super Administrator fails gracefully server-side (see
+                addCustomerNoteAction: "You must be signed in as staff.") rather
+                than fabricating a staff identity for them. */}
+            <CustomerNotes customerId={customer.id} notes={notes} actingStaffId={context.staffId ?? ""} />
+          </Card>
+
           <Tabs defaultValue="upcoming">
             <TabsList>
               <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
@@ -260,17 +274,6 @@ export default async function StaffCustomerDetailsPage({
               {renderList(cancelled, "No cancelled appointments")}
             </TabsContent>
           </Tabs>
-
-          <Card className="p-6">
-            <h2 className="text-muted mb-4 text-sm font-bold tracking-widest uppercase">Notes</h2>
-            {/* A Super Administrator has no StaffProfile/staffId — passing "" is a
-                deliberate never-matches sentinel (see CustomerNotes' isOwn check),
-                so they can view every note but own none. Adding a note as a
-                Super Administrator fails gracefully server-side (see
-                addCustomerNoteAction: "You must be signed in as staff.") rather
-                than fabricating a staff identity for them. */}
-            <CustomerNotes customerId={customer.id} notes={notes} actingStaffId={context.staffId ?? ""} />
-          </Card>
         </div>
       </main>
     </div>

src/app/(staff)/staff/clients/page.tsx

@@ -3,10 +3,13 @@ import { Search, Users } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { EmptyState } from "@/components/feedback/empty-state";
+import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { getActingBusinessContext } from "@/lib/business/get-acting-business-context";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
 import { matchesCustomerSearch } from "@/services/customer/customer.service";
 import { getLoyaltySummariesForCustomers } from "@/services/loyalty/loyalty.service";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
 import { cn } from "@/lib/utils/cn";
 
 export const metadata: Metadata = { title: "Clients" };
@@ -24,6 +27,8 @@ export default async function StaffClientsPage({
 
   const { q = "", sort } = await searchParams;
 
+  const unreadNotificationCount = await getUnreadNotificationCount(prisma, context.userId);
+
   // Scoped via the appointment relation, not "every CustomerProfile row" —
   // a real business boundary even though this is a single-business v1 app
   // (see docs/phase-5-summary.md). `select`-scoped rather than the full
@@ -67,106 +72,113 @@ export default async function StaffClientsPage({
   const now = new Date();
 
   return (
-    <div className="px-6 pt-12 pb-8 lg:max-w-5xl">
-      <h1 className="mb-6 text-2xl font-bold tracking-tight">Clients</h1>
+    <div className="pb-8 lg:max-w-5xl">
+      <TopNav
+        title="Clients"
+        sticky
+        className="bg-stone"
+        leftAction={<InlineNotificationBell href="/staff/notifications" unreadCount={unreadNotificationCount} />}
+      />
 
-      <form action="/staff/clients" method="GET" className="relative mb-4">
-        {sort && <input type="hidden" name="sort" value={sort} />}
-        <Search
-          className="text-muted absolute top-1/2 left-4 h-4 w-4 -translate-y-1/2"
-          aria-hidden="true"
-        />
-        <label htmlFor="client-search" className="sr-only">
-          Search clients by name, email, or phone
-        </label>
-        <input
-          id="client-search"
-          type="search"
-          name="q"
-          defaultValue={q}
-          placeholder="Search by name, email, or phone"
-          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="px-6 pt-6">
+        <form action="/staff/clients" method="GET" className="relative mb-4">
+          {sort && <input type="hidden" name="sort" value={sort} />}
+          <Search
+            className="text-muted absolute top-1/2 left-4 h-4 w-4 -translate-y-1/2"
+            aria-hidden="true"
+          />
+          <label htmlFor="client-search" className="sr-only">
+            Search clients by name, email, or phone
+          </label>
+          <input
+            id="client-search"
+            type="search"
+            name="q"
+            defaultValue={q}
+            placeholder="Search by name, email, or phone"
+            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="mb-4 flex gap-2">
-        <Link
-          href={`/staff/clients?q=${encodeURIComponent(q)}&sort=name`}
-          className={cn(
-            "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
-            sort !== "recent" ? "bg-ink text-white" : "border-line text-muted border bg-white",
-          )}
-        >
-          Alphabetical
-        </Link>
-        <Link
-          href={`/staff/clients?q=${encodeURIComponent(q)}&sort=recent`}
-          className={cn(
-            "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
-            sort === "recent" ? "bg-ink text-white" : "border-line text-muted border bg-white",
-          )}
-        >
-          Recent
-        </Link>
-      </div>
-
-      {sorted.length === 0 ? (
-        <EmptyState
-          icon={Users}
-          title={q ? "No matching clients" : "No clients yet"}
-          description={
-            q
-              ? "Try a different name, email, or phone number."
-              : "Clients will show up here once they've booked with you."
-          }
-        />
-      ) : (
-        <div className="grid gap-3 lg:grid-cols-2">
-          {sorted.map((customer) => {
-            const completedVisits = customer.appointments.filter(
-              (a) => a.status === "COMPLETED",
-            ).length;
-            const lastVisit = customer.appointments.find((a) => a.status === "COMPLETED");
-            const upcoming = customer.appointments.find(
-              (a) => UPCOMING_STATUSES.includes(a.status) && a.startAt > now,
-            );
-            const loyalty = loyaltySummaries.get(customer.id);
-
-            return (
-              <Link
-                key={customer.id}
-                href={`/staff/clients/${customer.id}`}
-                className="rounded-md border-line hover:bg-stone flex items-center gap-3 border bg-white px-5 py-4"
-              >
-                <div className="bg-stone text-muted flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-bold">
-                  {customer.firstName.charAt(0)}
-                  {customer.lastName.charAt(0)}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-bold">
-                    {customer.firstName} {customer.lastName}
-                  </p>
-                  <p className="text-muted truncate text-xs">
-                    {customer.phone ?? customer.email}
-                    {lastVisit &&
-                      ` · Last visit ${lastVisit.startAt.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}`}
-                  </p>
-                  <p className="text-muted mt-0.5 text-[10px] font-bold tracking-widest uppercase">
-                    {completedVisits} visit{completedVisits === 1 ? "" : "s"}
-                    {upcoming && <span className="text-accent"> · Upcoming</span>}
-                    {loyalty && (
-                      <span className={loyalty.hasAvailableReward ? "text-accent-loyalty" : ""}>
-                        {" "}
-                        · {loyalty.currentStamps}/{loyalty.rewardThreshold} stamps
-                      </span>
-                    )}
-                  </p>
-                </div>
-              </Link>
-            );
-          })}
+        <div className="mb-4 flex gap-2">
+          <Link
+            href={`/staff/clients?q=${encodeURIComponent(q)}&sort=name`}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
+              sort !== "recent" ? "bg-ink text-white" : "border-line text-muted border bg-white",
+            )}
+          >
+            Alphabetical
+          </Link>
+          <Link
+            href={`/staff/clients?q=${encodeURIComponent(q)}&sort=recent`}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
+              sort === "recent" ? "bg-ink text-white" : "border-line text-muted border bg-white",
+            )}
+          >
+            Recent
+          </Link>
         </div>
-      )}
+
+        {sorted.length === 0 ? (
+          <EmptyState
+            icon={Users}
+            title={q ? "No matching clients" : "No clients yet"}
+            description={
+              q
+                ? "Try a different name, email, or phone number."
+                : "Clients will show up here once they've booked with you."
+            }
+          />
+        ) : (
+          <div className="grid gap-3 lg:grid-cols-2">
+            {sorted.map((customer) => {
+              const completedVisits = customer.appointments.filter(
+                (a) => a.status === "COMPLETED",
+              ).length;
+              const lastVisit = customer.appointments.find((a) => a.status === "COMPLETED");
+              const upcoming = customer.appointments.find(
+                (a) => UPCOMING_STATUSES.includes(a.status) && a.startAt > now,
+              );
+              const loyalty = loyaltySummaries.get(customer.id);
+
+              return (
+                <Link
+                  key={customer.id}
+                  href={`/staff/clients/${customer.id}`}
+                  className="rounded-md border-line hover:bg-stone flex items-center gap-3 border bg-white px-5 py-4"
+                >
+                  <div className="bg-stone text-muted flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-bold">
+                    {customer.firstName.charAt(0)}
+                    {customer.lastName.charAt(0)}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-bold">
+                      {customer.firstName} {customer.lastName}
+                    </p>
+                    <p className="text-muted truncate text-xs">
+                      {customer.phone ?? customer.email}
+                      {lastVisit &&
+                        ` · Last visit ${lastVisit.startAt.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}`}
+                    </p>
+                    <p className="text-muted mt-0.5 text-[10px] font-bold tracking-widest uppercase">
+                      {completedVisits} visit{completedVisits === 1 ? "" : "s"}
+                      {upcoming && <span className="text-accent"> · Upcoming</span>}
+                      {loyalty && (
+                        <span className={loyalty.hasAvailableReward ? "text-accent-loyalty" : ""}>
+                          {" "}
+                          · {loyalty.currentStamps}/{loyalty.rewardThreshold} stamps
+                        </span>
+                      )}
+                    </p>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

src/app/(staff)/staff/current/page.tsx

@@ -5,11 +5,13 @@ import { redirect } from "next/navigation";
 import { Card } from "@/components/ui/card";
 import { StatusPill } from "@/components/ui/status-pill";
 import { EmptyState } from "@/components/feedback/empty-state";
+import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { getActingStaff } from "@/lib/staff/get-acting-staff";
 import { todayIn } from "@/lib/time/business-time";
 import { getLoyaltySummary } from "@/services/loyalty/loyalty.service";
 import { resolveRewardThreshold } from "@/services/loyalty/reward-threshold";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
 import {
   listAppointments,
   selectCurrentAppointment,
@@ -17,6 +19,7 @@ import {
 import { AppointmentStatusActions } from "@/features/staff/components/appointment-status-actions";
 import { BookFollowUpButton } from "@/features/staff/components/book-follow-up-button";
 import { AddStampButton } from "@/features/staff/components/add-stamp-button";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
 import type { AppointmentStatus } from "@/types/domain";
 
 export const metadata: Metadata = { title: "Current Appointment" };
@@ -46,16 +49,24 @@ export default async function StaffCurrentPage() {
   });
 
   const current = selectCurrentAppointment(todaysAppointments, new Date());
+  const unreadNotificationCount = await getUnreadNotificationCount(prisma, staff.user.id);
 
   if (!current) {
     return (
-      <div className="px-6 pt-12">
-        <h1 className="mb-6 text-2xl font-bold tracking-tight">Current Appointment</h1>
-        <EmptyState
-          icon={Scissors}
-          title="Nothing scheduled right now"
-          description="Your next appointment today will show up here."
+      <div className="pb-8">
+        <TopNav
+          title="Current Appointment"
+          sticky
+          className="bg-stone"
+          leftAction={<InlineNotificationBell href="/staff/notifications" unreadCount={unreadNotificationCount} />}
         />
+        <div className="px-6 pt-6">
+          <EmptyState
+            icon={Scissors}
+            title="Nothing scheduled right now"
+            description="Your next appointment today will show up here."
+          />
+        </div>
       </div>
     );
   }
@@ -80,147 +91,158 @@ export default async function StaffCurrentPage() {
   const tz = staff.business.timezone;
 
   return (
-    <div className="space-y-4 px-6 pt-12 pb-8">
-      <h1 className="text-2xl font-bold tracking-tight">Current Appointment</h1>
-
-      <Card className="space-y-5 p-6">
-        <div className="flex items-start justify-between">
-          <div>
-            <p className="text-lg font-bold">
-              {current.customer.firstName} {current.customer.lastName}
-            </p>
-            <p className="text-muted text-xs">
-              {current.customer.isGuest ? "Guest customer" : "Registered customer"}
-            </p>
+    <div className="pb-8">
+      <TopNav
+        title="Current Appointment"
+        sticky
+        className="bg-stone"
+        leftAction={<InlineNotificationBell href="/staff/notifications" unreadCount={unreadNotificationCount} />}
+      />
+      <div className="space-y-4 px-6 pt-6">
+        <Card className="space-y-5 p-6">
+          <div className="flex items-start justify-between">
+            <div>
+              <p className="text-lg font-bold">
+                {current.customer.firstName} {current.customer.lastName}
+              </p>
+              <p className="text-muted text-xs">
+                {current.customer.isGuest ? "Guest customer" : "Registered customer"}
+              </p>
+            </div>
+            <StatusPill status={STATUS_MAP[current.status] ?? "confirmed"} />
           </div>
-          <StatusPill status={STATUS_MAP[current.status] ?? "confirmed"} />
-        </div>
 
-        <div className="flex flex-wrap gap-3">
-          {current.customer.phone && (
+          <div className="flex flex-wrap gap-3">
+            {current.customer.phone && (
+              <a
+                href={`tel:${current.customer.phone}`}
+                className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
+              >
+                <Phone className="text-accent h-3.5 w-3.5" aria-hidden="true" /> Call
+              </a>
+            )}
             <a
-              href={`tel:${current.customer.phone}`}
+              href={`mailto:${current.customer.email}`}
               className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
             >
-              <Phone className="text-accent h-3.5 w-3.5" aria-hidden="true" /> Call
+              <Mail className="text-accent h-3.5 w-3.5" aria-hidden="true" /> Email
             </a>
-          )}
-          <a
-            href={`mailto:${current.customer.email}`}
-            className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
-          >
-            <Mail className="text-accent h-3.5 w-3.5" aria-hidden="true" /> Email
-          </a>
-          <Link
-            href={`/staff/clients/${current.customerId}`}
-            className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
-          >
-            View Customer
-          </Link>
-        </div>
+            <Link
+              href={`/staff/clients/${current.customerId}`}
+              className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
+            >
+              View Customer
+            </Link>
+          </div>
 
-        <div className="border-line grid grid-cols-2 gap-4 border-t pt-4 text-sm">
-          <div>
-            <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
-              Services
-            </span>
-            <p className="font-bold">{current.services.map((s) => s.service.name).join(" + ")}</p>
-          </div>
-          <div>
-            <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
-              Time
-            </span>
-            <p className="font-bold">
-              {current.startAt.toLocaleTimeString("en-GB", {
-                hour: "2-digit",
-                minute: "2-digit",
-                timeZone: tz,
-              })}{" "}
-              –{" "}
-              {current.endAt.toLocaleTimeString("en-GB", {
-                hour: "2-digit",
-                minute: "2-digit",
-                timeZone: tz,
-              })}
-            </p>
-          </div>
-          <div>
-            <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
-              Duration
-            </span>
-            <p className="font-bold">{totalDuration} min</p>
-          </div>
-          <div>
-            <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
-              Price
-            </span>
-            <p className="font-bold">£{totalPrice.toFixed(2)}</p>
-          </div>
-        </div>
-
-        {current.notes && (
-          <div className="border-line border-t pt-4">
-            <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
-              Booking Notes
-            </span>
-            <p className="text-muted mt-1 text-sm italic">{current.notes}</p>
-          </div>
-        )}
-
-        {notes.length > 0 && (
-          <div className="border-line border-t pt-4">
-            <span className="text-muted mb-2 flex items-center gap-1.5 text-[10px] font-bold tracking-widest uppercase">
-              <NotebookText className="h-3 w-3" aria-hidden="true" /> Customer Notes
-            </span>
-            <div className="space-y-2">
-              {notes.map((n) => (
-                <p key={n.id} className="text-muted text-xs">
-                  <span className="font-bold">{n.author.user.name ?? "Staff"}:</span> {n.body}
-                </p>
-              ))}
+          <div className="border-line grid grid-cols-2 gap-4 border-t pt-4 text-sm">
+            <div>
+              <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
+                Services
+              </span>
+              <p className="font-bold">{current.services.map((s) => s.service.name).join(" + ")}</p>
+            </div>
+            <div>
+              <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
+                Time
+              </span>
+              <p className="font-bold">
+                {current.startAt.toLocaleTimeString("en-GB", {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  timeZone: tz,
+                })}{" "}
+                –{" "}
+                {current.endAt.toLocaleTimeString("en-GB", {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  timeZone: tz,
+                })}
+              </p>
+            </div>
+            <div>
+              <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
+                Duration
+              </span>
+              <p className="font-bold">{totalDuration} min</p>
+            </div>
+            <div>
+              <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
+                Price
+              </span>
+              <p className="font-bold">£{totalPrice.toFixed(2)}</p>
             </div>
           </div>
-        )}
 
-        {loyalty?.isEnabled && (
-          <div className="border-line border-t pt-4">
-            <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
-              Loyalty
-            </span>
-            <p className="text-sm font-bold">
-              {loyalty.currentStamps}/{resolveRewardThreshold(loyalty)} stamps
-              {loyalty.availableReward && (
-                <span className="text-accent-loyalty"> · Reward available</span>
-              )}
-            </p>
-          </div>
-        )}
+          {current.notes && (
+            <div className="border-line border-t pt-4">
+              <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
+                Booking Notes
+              </span>
+              <p className="text-muted mt-1 text-sm italic">{current.notes}</p>
+            </div>
+          )}
 
-        {lastCompleted && (
-          <div className="border-line border-t pt-4">
-            <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
-              Last Visit
-            </span>
-            <p className="text-muted text-sm">
-              {lastCompleted.services.map((s) => s.service.name).join(" + ")} ·{" "}
-              {lastCompleted.startAt.toLocaleDateString("en-GB", {
-                day: "numeric",
-                month: "short",
-                year: "numeric",
-                timeZone: tz,
-              })}
-            </p>
-          </div>
-        )}
-      </Card>
+          {notes.length > 0 && (
+            <div className="border-line border-t pt-4">
+              <span className="text-muted mb-2 flex items-center gap-1.5 text-[10px] font-bold tracking-widest uppercase">
+                <NotebookText className="h-3 w-3" aria-hidden="true" /> Customer Notes
+              </span>
+              <div className="space-y-2">
+                {notes.map((n) => (
+                  <p key={n.id} className="text-muted text-xs">
+                    <span className="font-bold">{n.author.user.name ?? "Staff"}:</span> {n.body}
+                  </p>
+                ))}
+              </div>
+            </div>
+          )}
 
-      <AppointmentStatusActions appointmentId={current.id} status={current.status} />
+          {loyalty?.isEnabled && (
+            <div className="border-line border-t pt-4">
+              <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
+                Loyalty
+              </span>
+              <p className="text-sm font-bold">
+                {loyalty.currentStamps}/{resolveRewardThreshold(loyalty)} stamps
+                {loyalty.availableReward && (
+                  <span className="text-accent-loyalty"> · Reward available</span>
+                )}
+              </p>
+            </div>
+          )}
 
-      <div className="flex flex-wrap gap-3">
-        {loyalty?.isEnabled && (
-          <AddStampButton customerId={current.customerId} appointmentId={current.id} />
-        )}
-        <BookFollowUpButton appointmentId={current.id} />
+          {lastCompleted && (
+            <div className="border-line border-t pt-4">
+              <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
+                Last Visit
+              </span>
+              <p className="text-muted text-sm">
+                {lastCompleted.services.map((s) => s.service.name).join(" + ")} ·{" "}
+                {lastCompleted.startAt.toLocaleDateString("en-GB", {
+                  day: "numeric",
+                  month: "short",
+                  year: "numeric",
+                  timeZone: tz,
+                })}
+              </p>
+            </div>
+          )}
+        </Card>
+
+        <AppointmentStatusActions appointmentId={current.id} status={current.status} layout="stack" />
+
+        <div className="flex flex-col gap-2">
+          {loyalty?.isEnabled && (
+            <AddStampButton
+              customerId={current.customerId}
+              appointmentId={current.id}
+              size="lg"
+              className="w-full"
+            />
+          )}
+          <BookFollowUpButton appointmentId={current.id} className="w-full" />
+        </div>
       </div>
     </div>
   );

src/app/(staff)/staff/page.tsx

@@ -5,6 +5,7 @@ import { redirect } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/feedback/empty-state";
 import { AppointmentCard } from "@/components/ui/appointment-card";
+import { TopNav } from "@/components/navigation/top-nav";
 import { prisma } from "@/lib/db/prisma";
 import { getActingStaff } from "@/lib/staff/get-acting-staff";
 import {
@@ -16,11 +17,13 @@ import {
 import type { CalendarDate } from "@/lib/time/business-time";
 import { getAvailableRewardFlags } from "@/services/loyalty/loyalty.service";
 import { listAppointments, selectCurrentAppointment } from "@/services/scheduling/appointment.service";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
 import { DateStrip } from "@/features/staff/components/date-strip";
 import { DayCalendar } from "@/features/staff/components/day-calendar";
 import type { CalendarAppointment, CalendarBlock, CalendarColumn } from "@/features/staff/components/day-calendar";
+import { ViewSwitch } from "@/features/staff/components/view-switch";
 import { BlockTimeButton } from "@/features/staff/components/block-time-button";
-import { cn } from "@/lib/utils/cn";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
 import type { AppointmentStatus } from "@/types/domain";
 
 export const metadata: Metadata = { title: "Calendar" };
@@ -142,20 +145,27 @@ export default async function StaffCalendarPage({
   // "Responsive Design"). Only meaningful when viewing today.
   const rightNow = date === today ? selectCurrentAppointment(appointments, new Date()) : null;
 
+  const unreadNotificationCount = await getUnreadNotificationCount(prisma, staff.user.id);
+
   return (
     <div className="pb-6">
-      <div className="flex items-center justify-between px-6 pt-12">
-        <h1 className="text-2xl font-bold tracking-tight">Calendar</h1>
-        <div className="flex gap-2">
-          <BlockTimeButton date={date} />
-          <Button asChild size="sm">
-            <Link href="/staff/book">
-              <Plus className="h-4 w-4" aria-hidden="true" />
-              New
-            </Link>
-          </Button>
-        </div>
-      </div>
+      <TopNav
+        title="Calendar"
+        sticky
+        className="bg-stone"
+        leftAction={<InlineNotificationBell href="/staff/notifications" unreadCount={unreadNotificationCount} />}
+        action={
+          <div className="flex gap-2">
+            <BlockTimeButton date={date} />
+            <Button asChild size="sm">
+              <Link href="/staff/book">
+                <Plus className="h-4 w-4" aria-hidden="true" />
+                New
+              </Link>
+            </Button>
+          </div>
+        }
+      />
 
       <DateStrip
         selectedDate={date}
@@ -164,25 +174,8 @@ export default async function StaffCalendarPage({
         view={view}
       />
 
-      <div className="mt-4 flex gap-2 px-6">
-        <Link
-          href={`/staff?date=${date}&view=day`}
-          className={cn(
-            "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
-            view === "day" ? "bg-ink text-white" : "border-line text-muted border bg-white",
-          )}
-        >
-          Day
-        </Link>
-        <Link
-          href={`/staff?date=${date}&view=agenda`}
-          className={cn(
-            "rounded-full px-4 py-1.5 text-xs font-bold tracking-widest uppercase",
-            view === "agenda" ? "bg-ink text-white" : "border-line text-muted border bg-white",
-          )}
-        >
-          Agenda
-        </Link>
+      <div className="mt-4 px-6">
+        <ViewSwitch view={view} dayHref={`/staff?date=${date}&view=day`} agendaHref={`/staff?date=${date}&view=agenda`} />
       </div>
 
       <div className="mt-4 lg:flex lg:items-start lg:gap-6 lg:px-6">

src/app/(staff)/staff/settings/page.tsx

@@ -1,17 +1,18 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { Bell, CalendarClock, CalendarOff, CalendarSync, Clock, UserCircle } from "lucide-react";
+import { Bell, CalendarClock, CalendarOff, CalendarSync, Clock, type LucideIcon } from "lucide-react";
 import { auth } from "@/auth";
 import { ProfileCard } from "@/components/ui/profile-card";
+import { TopNav } from "@/components/navigation/top-nav";
 import { SignOutButton } from "@/features/auth/components/sign-out-button";
 import { getNavRole } from "@/lib/auth/permissions";
 import { getBranding } from "@/lib/business/branding";
 import { InstallAppButton } from "@/features/pwa/components/install-app-button";
+import { InlineNotificationBell } from "@/features/notifications/components/notification-bell";
+import { prisma } from "@/lib/db/prisma";
+import { getUnreadNotificationCount } from "@/services/notifications/notification.service";
 
-const ACCOUNT_LINKS = [
-  { href: "/staff/settings/profile", label: "Profile", icon: UserCircle },
-  { href: "/staff/settings/notifications", label: "Notifications", icon: Bell },
-] as const;
+const ACCOUNT_LINKS = [{ href: "/staff/settings/notifications", label: "Notifications", icon: Bell }] as const;
 
 const WORKING_PATTERN_LINKS = [
   { href: "/staff/settings/working-hours", label: "Working Hours", icon: Clock },
@@ -26,7 +27,7 @@ function SettingsSection({
   links,
 }: {
   title: string;
-  links: ReadonlyArray<{ href: string; label: string; icon: typeof UserCircle }>;
+  links: ReadonlyArray<{ href: string; label: string; icon: LucideIcon }>;
 }) {
   return (
     <div>
@@ -54,45 +55,60 @@ export const metadata: Metadata = { title: "Settings" };
  * lives behind the "Manage" nav item, see (owner)/owner/page.tsx). Working
  * Pattern and Integrations only apply to a real personal barber schedule,
  * so a Super Administrator (who deliberately has no StaffProfile — see
- * isSuperAdmin) sees only Notifications and Sign Out; their identity is
- * shown via the ProfileCard above rather than a "Profile" link, since the
- * profile-edit page below is staff-bio-specific and a Super Administrator
- * has no StaffProfile to edit.
+ * isSuperAdmin) sees only Notifications and Sign Out. Profile editing is
+ * the ProfileCard's own edit-pencil (matching the customer settings hub)
+ * rather than a menu link — withheld for a Super Administrator since the
+ * profile-edit page below is staff-bio-specific and they have no
+ * StaffProfile to edit.
  */
 export default async function StaffSettingsPage() {
   const session = await auth();
   if (!session?.user) return null;
 
-  const [role, branding] = await Promise.all([getNavRole(session.user.id), getBranding()]);
+  const [role, branding, unreadNotificationCount] = await Promise.all([
+    getNavRole(session.user.id),
+    getBranding(),
+    getUnreadNotificationCount(prisma, session.user.id),
+  ]);
   const isSuperAdmin = role === "superadmin";
 
   return (
-    <div className="space-y-6 px-6 pt-12 pb-12">
-      <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
-      <ProfileCard name={session.user.name ?? "Account"} meta={session.user.email} avatarUrl={session.user.image ?? undefined} />
+    <div className="pb-12">
+      <TopNav
+        title="Settings"
+        sticky
+        className="bg-stone"
+        leftAction={<InlineNotificationBell href="/staff/notifications" unreadCount={unreadNotificationCount} />}
+      />
 
-      <div className="space-y-5">
-        <SettingsSection
-          title="Account"
-          links={isSuperAdmin ? ACCOUNT_LINKS.filter((l) => l.label === "Notifications") : ACCOUNT_LINKS}
+      <div className="space-y-6 px-6 pt-6">
+        <ProfileCard
+          name={session.user.name ?? "Account"}
+          meta={session.user.email}
+          avatarUrl={session.user.image ?? undefined}
+          editHref={isSuperAdmin ? undefined : "/staff/settings/profile"}
         />
 
-        {!isSuperAdmin && (
-          <>
-            <SettingsSection title="Working Pattern" links={WORKING_PATTERN_LINKS} />
-            <SettingsSection title="Integrations" links={INTEGRATION_LINKS} />
-          </>
-        )}
-      </div>
+        <div className="space-y-5">
+          <SettingsSection title="Account" links={ACCOUNT_LINKS} />
 
-      <div>
-        <p className="text-muted mb-2 px-1 text-[10px] font-bold tracking-widest uppercase">App</p>
-        <div className="space-y-3">
-          <div className="rounded-md border border-line bg-white p-5">
-            <p className="mb-3 text-sm font-bold">Get the app</p>
-            <InstallAppButton businessName={branding.name} />
+          {!isSuperAdmin && (
+            <>
+              <SettingsSection title="Working Pattern" links={WORKING_PATTERN_LINKS} />
+              <SettingsSection title="Integrations" links={INTEGRATION_LINKS} />
+            </>
+          )}
+        </div>
+
+        <div>
+          <p className="text-muted mb-2 px-1 text-[10px] font-bold tracking-widest uppercase">App</p>
+          <div className="space-y-3">
+            <div className="rounded-md border border-line bg-white p-5">
+              <p className="mb-3 text-sm font-bold">Get the app</p>
+              <InstallAppButton businessName={branding.name} />
+            </div>
+            <SignOutButton />
           </div>
-          <SignOutButton />
         </div>
       </div>
     </div>

src/components/navigation/top-nav.tsx

@@ -9,6 +9,8 @@ export interface TopNavProps {
   title: string;
   /** Show a back button that calls router.back(), or a custom href/handler. */
   onBack?: (() => void) | true;
+  /** Rendered in the back button's place when `onBack` isn't given — e.g. a notification bell on a top-level page that has no "back" to go to. Ignored if `onBack` is set. */
+  leftAction?: ReactNode;
   action?: ReactNode;
   sticky?: boolean;
   className?: string;
@@ -19,7 +21,7 @@ export interface TopNavProps {
  * variations, across nearly every template screen — consolidated into one
  * component (see docs/implementation-plan.md §7, "TopHeader").
  */
-export function TopNav({ title, onBack, action, sticky = true, className }: TopNavProps) {
+export function TopNav({ title, onBack, leftAction, action, sticky = true, className }: TopNavProps) {
   const router = useRouter();
 
   return (
@@ -31,7 +33,7 @@ export function TopNav({ title, onBack, action, sticky = true, className }: TopN
       )}
     >
       <div className="flex items-center gap-4">
-        {onBack && (
+        {onBack ? (
           <button
             type="button"
             onClick={onBack === true ? () => router.back() : onBack}
@@ -40,6 +42,8 @@ export function TopNav({ title, onBack, action, sticky = true, className }: TopN
           >
             <ArrowLeft className="h-4 w-4" aria-hidden="true" />
           </button>
+        ) : (
+          leftAction
         )}
         <h1 className="text-xl font-bold tracking-tight">{title}</h1>
       </div>

src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ export const Tabs = TabsPrimitive.Root;
 export function TabsList({ className, ...props }: TabsPrimitive.TabsListProps) {
   return (
     <TabsPrimitive.List
-      className={cn("flex gap-1 rounded-full bg-white p-1", className)}
+      className={cn("flex gap-1 rounded-md bg-white p-1", className)}
       {...props}
     />
   );

src/features/notifications/components/notification-bell.tsx

@@ -1,5 +1,30 @@
+"use client";
+
 import Link from "next/link";
 import { Bell } from "lucide-react";
+import { usePathname } from "next/navigation";
+
+/** Pages that render their own inline bell (see InlineNotificationBell) as part of a proper header — the shell's own floating bell steps aside there instead of sitting on top of it. */
+const PAGES_WITH_INLINE_BELL = [
+  "/staff",
+  "/owner/calendar",
+  "/staff/current",
+  "/staff/clients",
+  "/staff/settings",
+  "/appointments",
+  "/loyalty",
+  "/settings",
+  "/owner",
+];
+
+function badge(unreadCount: number) {
+  if (unreadCount === 0) return null;
+  return (
+    <span className="bg-danger absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white">
+      {unreadCount > 9 ? "9+" : unreadCount}
+    </span>
+  );
+}
 
 /**
  * Fixed top-right on every screen inside the shell that renders it (see
@@ -8,8 +33,16 @@ import { Bell } from "lucide-react";
  * only ever reflects "as of this page load/navigation". Real-time badge
  * updates without a reload would need a persistent connection this phase
  * doesn't build (see docs/phase-7-summary.md, "Known limitations").
+ *
+ * Steps aside (renders nothing) on pages that build their own proper
+ * header — a fixed top-right bell has nowhere sensible to sit once a page
+ * already has its own top-right control (e.g. Calendar's "New" button) —
+ * see InlineNotificationBell below, used in exactly those pages' headers.
  */
 export function NotificationBell({ href, unreadCount }: { href: string; unreadCount: number }) {
+  const pathname = usePathname();
+  if (PAGES_WITH_INLINE_BELL.includes(pathname)) return null;
+
   return (
     <Link
       href={href}
@@ -17,11 +50,21 @@ export function NotificationBell({ href, unreadCount }: { href: string; unreadCo
       className="fixed top-4 right-4 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-line bg-white shadow-sm"
     >
       <Bell className="h-4 w-4" aria-hidden="true" />
-      {unreadCount > 0 && (
-        <span className="bg-danger absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white">
-          {unreadCount > 9 ? "9+" : unreadCount}
-        </span>
-      )}
+      {badge(unreadCount)}
+    </Link>
+  );
+}
+
+/** Same look as the fixed bell above, but a normal in-flow element — for a page's own TopNav `leftAction`, not the shell's floating corner. */
+export function InlineNotificationBell({ href, unreadCount }: { href: string; unreadCount: number }) {
+  return (
+    <Link
+      href={href}
+      aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"}
+      className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-line"
+    >
+      <Bell className="h-4 w-4" aria-hidden="true" />
+      {badge(unreadCount)}
     </Link>
   );
 }

src/features/owner/components/owner-block-time-button.tsx

@@ -57,9 +57,9 @@ export function OwnerBlockTimeButton({ staffId, staffName, date }: { staffId: st
 
   return (
     <>
-      <Button variant="secondary" size="sm" onClick={() => setOpen(true)}>
+      <Button variant="secondary" size="sm" aria-label="Block Time" onClick={() => setOpen(true)}>
         <CalendarOff className="h-4 w-4" aria-hidden="true" />
-        Block Time
+        <span className="hidden sm:inline">Block Time</span>
       </Button>
       <BottomSheet open={open} onClose={handleClose} title={`Block Time — ${staffName}`}>
         <div className="space-y-4 pb-2">

src/features/owner/components/staff-filter-pills.tsx

@@ -0,0 +1,71 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Users } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+
+export interface StaffFilterOption {
+  id: string;
+  name: string;
+  avatarUrl?: string | null;
+  /** Working-hours range for the day (e.g. "10:00 AM – 7:00 PM"), or null if off entirely. */
+  hoursLabel: string | null;
+}
+
+const CARD_CLASS = "flex shrink-0 items-center gap-2 rounded-2xl border bg-white px-3 py-2 text-left";
+
+/** Avatar + name + hours cards for filtering the all-staff calendar by barber — an "All Staff" card plus one per active staff member, matching the day grid's own column-header style so the filter row and the grid read as one system. */
+export function StaffFilterPills({
+  options,
+  selectedId,
+  hrefFor,
+}: {
+  options: StaffFilterOption[];
+  /** undefined = "All Staff" selected. */
+  selectedId?: string;
+  hrefFor: (staffId: string | null) => string;
+}) {
+  return (
+    <div className="flex gap-2 overflow-x-auto px-6 py-1">
+      <Link
+        href={hrefFor(null)}
+        aria-current={!selectedId ? "true" : undefined}
+        className={cn(CARD_CLASS, !selectedId ? "border-ink ring-ink ring-1" : "border-line")}
+      >
+        <span className="bg-stone text-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-line">
+          <Users className="h-4 w-4" aria-hidden="true" />
+        </span>
+        <span className="min-w-0">
+          <p className="text-sm font-bold">All Staff</p>
+          <p className="text-muted text-[10px]">Everyone</p>
+        </span>
+      </Link>
+
+      {options.map((option) => (
+        <Link
+          key={option.id}
+          href={hrefFor(option.id)}
+          aria-current={selectedId === option.id ? "true" : undefined}
+          className={cn(CARD_CLASS, selectedId === option.id ? "border-ink ring-ink ring-1" : "border-line")}
+        >
+          {option.avatarUrl ? (
+            <Image
+              src={option.avatarUrl}
+              alt=""
+              width={36}
+              height={36}
+              className="h-9 w-9 shrink-0 rounded-full border border-line object-cover"
+            />
+          ) : (
+            <div className="bg-stone text-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-line text-sm font-bold">
+              {option.name.charAt(0)}
+            </div>
+          )}
+          <span className="min-w-0">
+            <p className="truncate text-sm font-bold">{option.name}</p>
+            <p className="text-muted truncate text-[10px]">{option.hoursLabel ?? "Off today"}</p>
+          </span>
+        </Link>
+      ))}
+    </div>
+  );
+}

src/features/staff/components/add-stamp-button.tsx

@@ -6,14 +6,19 @@ import { useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Modal } from "@/components/ui/modal";
 import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils/cn";
 import { addLoyaltyStampAction } from "../actions/loyalty-actions";
 
 export function AddStampButton({
   customerId,
   appointmentId,
+  className,
+  size = "sm",
 }: {
   customerId: string;
   appointmentId?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg";
 }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -57,7 +62,12 @@ export function AddStampButton({
 
   return (
     <>
-      <Button variant="secondary" size="sm" onClick={() => setOpen(true)}>
+      <Button
+        variant="secondary"
+        size={size}
+        className={cn("shrink-0", className)}
+        onClick={() => setOpen(true)}
+      >
         <Stamp className="h-4 w-4" aria-hidden="true" />
         Add Loyalty Stamp
       </Button>

src/features/staff/components/appointment-status-actions.tsx

@@ -54,10 +54,13 @@ export function AppointmentStatusActions({
   appointmentId,
   status,
   actions = DEFAULT_ACTIONS,
+  layout = "wrap",
 }: {
   appointmentId: string;
   status: RawStatus;
   actions?: AppointmentActionSet;
+  /** "stack" renders one full-width button per row (Current Appointment); "wrap" (default, used by Appointment Details) keeps the original inline small buttons. */
+  layout?: "wrap" | "stack";
 }) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -121,10 +124,11 @@ export function AppointmentStatusActions({
           {error}
         </p>
       )}
-      <div className="flex flex-wrap gap-2">
+      <div className={layout === "stack" ? "flex flex-col gap-2" : "flex flex-wrap gap-2"}>
         {status === "PENDING" && (
           <Button
-            size="sm"
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.confirm(appointmentId))}
           >
@@ -133,7 +137,8 @@ export function AppointmentStatusActions({
         )}
         {status === "CONFIRMED" && (
           <Button
-            size="sm"
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.checkIn(appointmentId))}
           >
@@ -142,7 +147,8 @@ export function AppointmentStatusActions({
         )}
         {status === "CHECKED_IN" && (
           <Button
-            size="sm"
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.start(appointmentId))}
           >
@@ -150,17 +156,31 @@ export function AppointmentStatusActions({
           </Button>
         )}
         {status === "IN_PROGRESS" && (
-          <Button size="sm" onClick={() => setConfirmKind("complete")}>
+          <Button
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
+            onClick={() => setConfirmKind("complete")}
+          >
             Complete Appointment
           </Button>
         )}
         {status === "CONFIRMED" && (
-          <Button size="sm" variant="secondary" onClick={() => setConfirmKind("no_show")}>
+          <Button
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
+            variant="secondary"
+            onClick={() => setConfirmKind("no_show")}
+          >
             Mark No-Show
           </Button>
         )}
         {(status === "PENDING" || status === "CONFIRMED" || status === "CHECKED_IN") && (
-          <Button size="sm" variant="destructive" onClick={() => setConfirmKind("cancel")}>
+          <Button
+            size={layout === "stack" ? undefined : "sm"}
+            className={layout === "stack" ? "w-full" : undefined}
+            variant="destructive"
+            onClick={() => setConfirmKind("cancel")}
+          >
             Cancel
           </Button>
         )}

src/features/staff/components/block-time-button.tsx

@@ -62,9 +62,9 @@ export function BlockTimeButton({ date }: { date: string }) {
 
   return (
     <>
-      <Button variant="secondary" size="sm" onClick={() => setOpen(true)}>
+      <Button variant="secondary" size="sm" aria-label="Block Time" onClick={() => setOpen(true)}>
         <CalendarOff className="h-4 w-4" aria-hidden="true" />
-        Block Time
+        <span className="hidden sm:inline">Block Time</span>
       </Button>
       <BottomSheet open={open} onClose={handleClose} title="Block Time">
         <div className="space-y-4 pb-2">

src/features/staff/components/book-follow-up-button.tsx

@@ -2,15 +2,22 @@
 
 import { useTransition } from "react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils/cn";
 import { startStaffFollowUpAction } from "../actions/staff-booking";
 
-export function BookFollowUpButton({ appointmentId }: { appointmentId: string }) {
+export function BookFollowUpButton({
+  appointmentId,
+  className,
+}: {
+  appointmentId: string;
+  className?: string;
+}) {
   const [isPending, startTransition] = useTransition();
 
   return (
     <Button
       variant="secondary"
-      className="rounded-md border-line border bg-white px-5 py-3 text-sm font-bold"
+      className={cn("rounded-md border-line border bg-white px-5 py-3 text-sm font-bold", className)}
       isLoading={isPending}
       onClick={() => startTransition(() => startStaffFollowUpAction(appointmentId))}
     >

src/features/staff/components/correct-stamp-button.tsx

@@ -7,10 +7,17 @@ import { Button } from "@/components/ui/button";
 import { Modal } from "@/components/ui/modal";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils/cn";
 import { correctLoyaltyStampAction } from "../actions/loyalty-actions";
 
 /** Removes stamps via a compensating ledger entry — never edits or deletes the original transaction. A reason is required (enforced both here and server-side in LoyaltyService.correctStamp). */
-export function CorrectStampButton({ loyaltyAccountId }: { loyaltyAccountId: string }) {
+export function CorrectStampButton({
+  loyaltyAccountId,
+  className,
+}: {
+  loyaltyAccountId: string;
+  className?: string;
+}) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [amount, setAmount] = useState("1");
@@ -52,7 +59,7 @@ export function CorrectStampButton({ loyaltyAccountId }: { loyaltyAccountId: str
 
   return (
     <>
-      <Button variant="secondary" size="sm" onClick={() => setOpen(true)}>
+      <Button variant="secondary" size="sm" className={cn(className)} onClick={() => setOpen(true)}>
         <Undo2 className="h-4 w-4" aria-hidden="true" />
         Correct Stamp
       </Button>

src/features/staff/components/date-strip.tsx

@@ -42,15 +42,15 @@ export function DateStrip({
 
   return (
     <div className="space-y-3 px-6 pt-4">
-      <div className="flex items-center justify-between">
+      <div className="border-line flex items-center overflow-hidden rounded-full border bg-white">
         <Link
           href={hrefFor(addDays(selectedDate, -1))}
           aria-label="Previous day"
-          className="border-line flex h-9 w-9 items-center justify-center rounded-full border bg-white text-white"
+          className="hover:bg-stone flex h-11 w-12 shrink-0 items-center justify-center"
         >
           <ChevronLeft className="text-ink h-4 w-4" aria-hidden="true" />
         </Link>
-        <div className="text-center">
+        <div className="flex-1 py-1.5 text-center">
           <p className="text-sm font-bold">{selectedDate === today ? "Today" : label}</p>
           {selectedDate === today && <p className="text-muted text-xs">{label}</p>}
           {selectedDate !== today && (
@@ -65,7 +65,7 @@ export function DateStrip({
         <Link
           href={hrefFor(addDays(selectedDate, 1))}
           aria-label="Next day"
-          className="border-line flex h-9 w-9 items-center justify-center rounded-full border bg-white"
+          className="hover:bg-stone flex h-11 w-12 shrink-0 items-center justify-center"
         >
           <ChevronRight className="text-ink h-4 w-4" aria-hidden="true" />
         </Link>

src/features/staff/components/day-calendar.tsx

@@ -29,6 +29,14 @@ function formatCompactTime(minutes: number): string {
   const displayHour = h % 12 === 0 ? 12 : h % 12;
   return `${displayHour}:${String(m).padStart(2, "0")}`;
 }
+/** "2:47 pm" — the current-time indicator's own label, read out next to its dot on the axis. */
+function formatCurrentTimeLabel(minutes: number): string {
+  const h = Math.floor(minutes / MINUTES_PER_HOUR);
+  const m = minutes % MINUTES_PER_HOUR;
+  const period = h >= 12 ? "pm" : "am";
+  const displayHour = h % 12 === 0 ? 12 : h % 12;
+  return `${displayHour}:${String(m).padStart(2, "0")} ${period}`;
+}
 
 export interface CalendarAppointment {
   id: string;
@@ -104,7 +112,7 @@ export function DayCalendar({
     currentTimeMinutes !== null && currentTimeMinutes >= RANGE_START_MINUTES && currentTimeMinutes <= RANGE_END_MINUTES;
 
   return (
-    <div className="flex gap-2 px-6 pb-8">
+    <div className="flex gap-2 px-6 pb-8" data-testid="calendar-grid">
       {/* Time axis — a plain sibling of the scrolling columns strip below, not part of its horizontal scroll at all, so it's immune to any scroll-snap/sticky edge cases: it simply never moves. */}
       <div className="w-11 shrink-0" style={{ height: HEADER_HEIGHT + gridHeight }}>
         <div style={{ height: HEADER_HEIGHT }} aria-hidden="true" />
@@ -126,11 +134,16 @@ export function DayCalendar({
             ),
           )}
           {showCurrentTime && (
-            <span
-              className="bg-danger absolute right-0 top-0 h-2 w-2 -translate-y-1/2 rounded-full"
+            <div
+              className="absolute inset-x-0 z-40 flex items-center justify-end gap-1"
               style={{ top: topFor(currentTimeMinutes!) }}
               aria-hidden="true"
-            />
+            >
+              <span className="bg-danger h-2 w-2 shrink-0 -translate-y-1/2 rounded-full" />
+              <span className="bg-danger absolute left-full -translate-y-1/2 rounded px-1.5 py-0.5 text-[9px] font-bold whitespace-nowrap text-white">
+                {formatCurrentTimeLabel(currentTimeMinutes!)}
+              </span>
+            </div>
           )}
         </div>
       </div>

src/features/staff/components/view-switch.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils/cn";
+
+/** Day/Agenda as one segmented switch (a single bordered pill, active side filled) rather than two separate floating pills. Plain Links — same "no client JS needed just to change a view" reasoning as DateStrip. */
+export function ViewSwitch({ dayHref, agendaHref, view }: { dayHref: string; agendaHref: string; view: "day" | "agenda" }) {
+  const segmentClass = (active: boolean) =>
+    cn(
+      "flex-1 rounded-full px-4 py-1.5 text-center text-xs font-bold tracking-widest uppercase transition-colors",
+      active ? "bg-ink text-white" : "text-muted",
+    );
+
+  return (
+    <div className="border-line inline-flex rounded-full border bg-white p-1">
+      <Link href={dayHref} aria-current={view === "day" ? "true" : undefined} className={segmentClass(view === "day")}>
+        Day
+      </Link>
+      <Link href={agendaHref} aria-current={view === "agenda" ? "true" : undefined} className={segmentClass(view === "agenda")}>
+        Agenda
+      </Link>
+    </div>
+  );
+}