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>
2026-07-19 07:42:41 +01:00
parent 08038dffb1
commit fa202db4a7
4 changed files with 114 additions and 3 deletions
@@ -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>
+  );
+}