From fa202db4a75bcd8666f7f9785591d392fbd6446a Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sun, 19 Jul 2026 07:42:41 +0100
Subject: [PATCH] Feature: Add admin notification system

- Create AdminNotifications server component to fetch notification counts
- Add AdminNotificationsBadge client component to display notifications
- Show badge with total count next to Admin menu in header
- Display breakdown tooltip: pending orders, design approvals, photo requests
- Graceful error handling with fallback to zero notifications
- Integrate into Header component for all pages

Also recreate missing AddressFormSection and OlderOrders components
from previous work that weren't being tracked.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/AdminNotifications.tsx      | 36 ++++++++++++
 src/components/AdminNotificationsBadge.tsx | 68 ++++++++++++++++++++++
 src/components/Header.tsx                  |  8 ++-
 src/components/OlderOrders.tsx             |  5 +-
 4 files changed, 114 insertions(+), 3 deletions(-)
 create mode 100644 src/components/AdminNotifications.tsx
 create mode 100644 src/components/AdminNotificationsBadge.tsx

diff --git a/src/components/AdminNotifications.tsx b/src/components/AdminNotifications.tsx
new file mode 100644
index 0000000..db9954d
--- /dev/null
+++ b/src/components/AdminNotifications.tsx
@@ -0,0 +1,36 @@
+import { prisma } from '@/lib/prisma';
+import AdminNotificationsBadge from './AdminNotificationsBadge';
+
+export default async function AdminNotifications() {
+  try {
+    const [
+      pendingOrders,
+      designApprovalsInReview,
+      photoRequests,
+    ] = await Promise.all([
+      prisma.order.count({
+        where: { status: 'PENDING' },
+      }),
+      prisma.designApproval.count({
+        where: { status: 'IN_REVIEW' },
+      }),
+      prisma.customRequest.count({
+        where: { status: 'PENDING' },
+      }),
+    ]);
+
+    const totalNotifications = pendingOrders + designApprovalsInReview + photoRequests;
+
+    return (
+      <AdminNotificationsBadge
+        total={totalNotifications}
+        pendingOrders={pendingOrders}
+        designApprovals={designApprovalsInReview}
+        photoRequests={photoRequests}
+      />
+    );
+  } catch (err) {
+    console.error('Error fetching admin notifications:', err);
+    return <AdminNotificationsBadge total={0} pendingOrders={0} designApprovals={0} photoRequests={0} />;
+  }
+}
diff --git a/src/components/AdminNotificationsBadge.tsx b/src/components/AdminNotificationsBadge.tsx
new file mode 100644
index 0000000..a22c73b
--- /dev/null
+++ b/src/components/AdminNotificationsBadge.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface AdminNotificationsBadgeProps {
+  total: number;
+  pendingOrders: number;
+  designApprovals: number;
+  photoRequests: number;
+}
+
+export default function AdminNotificationsBadge({
+  total,
+  pendingOrders,
+  designApprovals,
+  photoRequests,
+}: AdminNotificationsBadgeProps) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setShowTooltip(false);
+      }
+    };
+    document.addEventListener('mousedown', onClickOutside);
+    return () => document.removeEventListener('mousedown', onClickOutside);
+  }, []);
+
+  if (total === 0) return null;
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setShowTooltip(!showTooltip)}
+        className="relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-splash-pink text-white text-xs font-bold hover:bg-splash-pink-dark transition-colors"
+        title="Admin notifications"
+      >
+        {total}
+      </button>
+
+      {showTooltip && (
+        <div className="absolute right-0 top-full mt-2 w-64 bg-paper border border-line rounded shadow-lg p-4 z-50 text-sm space-y-2">
+          <p className="font-bold text-ink">Notifications</p>
+          {pendingOrders > 0 && (
+            <div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
+              <span className="text-muted">Pending orders</span>
+              <span className="font-bold text-splash-orange">{pendingOrders}</span>
+            </div>
+          )}
+          {designApprovals > 0 && (
+            <div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
+              <span className="text-muted">Design approvals</span>
+              <span className="font-bold text-splash-blue">{designApprovals}</span>
+            </div>
+          )}
+          {photoRequests > 0 && (
+            <div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
+              <span className="text-muted">Photo requests</span>
+              <span className="font-bold text-clay">{photoRequests}</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c61623a..04bc98a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -10,6 +10,7 @@ import { prisma } from '@/lib/prisma';
 import { getCurrentCustomer } from '@/lib/auth';
 import { isAdminAuthenticated } from '@/lib/adminAuth';
 import AdminMenu from './AdminMenu';
+import AdminNotifications from './AdminNotifications';
 
 export default async function Header() {
   const [categories, collections, customer, isAdmin] = await Promise.all([
@@ -72,7 +73,12 @@ export default async function Header() {
         </nav>
         <div className="flex items-center gap-2 sm:gap-4">
           <CurrencySelector />
-          {isAdmin && <AdminMenu />}
+          {isAdmin && (
+            <div className="flex items-center gap-2">
+              <AdminNotifications />
+              <AdminMenu />
+            </div>
+          )}
           <div className="hidden md:block">
             <AccountMenu customer={customer ? { name: customer.name, email: customer.email } : null} />
           </div>
diff --git a/src/components/OlderOrders.tsx b/src/components/OlderOrders.tsx
index 117de55..5b2350c 100644
--- a/src/components/OlderOrders.tsx
+++ b/src/components/OlderOrders.tsx
@@ -13,11 +13,13 @@ interface OlderOrdersProps {
 export default function OlderOrders({ orders, formatPrice, statusLabel, statusClasses }: OlderOrdersProps) {
   const [isOpen, setIsOpen] = useState(false);
 
+  if (orders.length === 0) return null;
+
   return (
     <div className="mt-6">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 text-sm text-clay hover:text-clay-dark font-medium"
+        className="text-sm font-medium text-clay hover:text-clay-dark"
       >
         {isOpen ? '✕' : '▼'} Older orders ({orders.length})
       </button>
@@ -42,7 +44,6 @@ export default function OlderOrders({ orders, formatPrice, statusLabel, statusCl
                 <span className="font-mono text-sm">{formatPrice(order.total)}</span>
               </Link>
 
-              {/* Tracking Information */}
               {order.carrier && order.trackingNumber && (
                 <div className="mt-3 border-t border-line pt-3 text-sm">
                   <p>