Phase 7

src/components/navigation/staff-shell.tsx

@@ -1,3 +1,4 @@
+import { NotificationBell } from "@/features/notifications/components/notification-bell";
 import { BottomNav } from "./bottom-nav";
 import { StaffSidebarNav } from "./staff-sidebar-nav";
 import type { BottomNavItem } from "./bottom-nav";
@@ -14,15 +15,20 @@ export function StaffShell({
   children,
   items = STAFF_NAV_ITEMS,
   footerLink,
+  notificationsHref = "/staff/notifications",
+  unreadNotificationCount = 0,
 }: {
   children: React.ReactNode;
   items?: BottomNavItem[];
   footerLink?: { href: string; label: string };
+  notificationsHref?: string;
+  unreadNotificationCount?: number;
 }) {
   return (
     <div className="min-h-screen bg-stone pb-24 lg:pb-0 lg:pl-56">
       <StaffSidebarNav items={items} footerLink={footerLink} />
-      {children}
+      <NotificationBell href={notificationsHref} unreadCount={unreadNotificationCount} />
+      <div id="main-content">{children}</div>
       <BottomNav items={items} variant="staff" />
     </div>
   );

src/components/providers.tsx

@@ -2,7 +2,13 @@
 
 import { SessionProvider } from "next-auth/react";
 import type { ReactNode } from "react";
+import { ServiceWorkerManager } from "@/features/pwa/components/service-worker-manager";
 
 export function Providers({ children }: { children: ReactNode }) {
-  return <SessionProvider>{children}</SessionProvider>;
+  return (
+    <SessionProvider>
+      <ServiceWorkerManager />
+      {children}
+    </SessionProvider>
+  );
 }

src/components/ui/loyalty-card.tsx

@@ -58,7 +58,10 @@ export function LoyaltyCard({
           <div className="grid grid-cols-5 gap-2">
             {Array.from({ length: stampsRequired }, (_, i) => {
               const earned = i < stampsEarned;
-              const isRewardSlot = i === stampsRequired - 1;
+              // Only the final slot gets reward styling, and only once it's
+              // actually been earned — otherwise an in-progress card (e.g.
+              // 3/10 stamps) would show the reward label on slot 10 already.
+              const isRewardSlot = earned && i === stampsRequired - 1;
               return (
                 <div
                   key={i}

src/components/ui/status-pill.tsx

@@ -16,17 +16,17 @@ const STATUS_CONFIG: Record<
 > = {
   pending_approval: {
     label: "Pending Approval",
-    className: "bg-status-pending/10 text-status-pending",
+    className: "bg-status-pending/10 text-status-pending-foreground",
     icon: Clock,
   },
   confirmed: {
     label: "Confirmed",
-    className: "bg-status-confirmed/10 text-status-confirmed",
+    className: "bg-status-confirmed/10 text-status-confirmed-foreground",
     icon: CheckCheck,
   },
   arrived: {
     label: "Arrived",
-    className: "bg-status-confirmed/10 text-status-confirmed",
+    className: "bg-status-confirmed/10 text-status-confirmed-foreground",
     icon: LogIn,
   },
   in_progress: {
@@ -37,12 +37,12 @@ const STATUS_CONFIG: Record<
   completed: { label: "Completed", className: "bg-stone text-muted", icon: CheckCheck },
   cancelled: {
     label: "Cancelled",
-    className: "bg-status-cancelled/10 text-status-cancelled",
+    className: "bg-status-cancelled/10 text-status-cancelled-foreground",
     icon: Ban,
   },
   no_show: {
     label: "No-show",
-    className: "bg-status-cancelled/10 text-status-cancelled",
+    className: "bg-status-cancelled/10 text-status-cancelled-foreground",
     icon: UserX,
   },
 };