added upload queue notifications

resources/js/guest/context/NotificationCenterContext.tsx

@@ -7,14 +7,17 @@ import {
   markGuestNotificationRead,
   type GuestNotificationItem,
 } from '../services/notificationApi';
+import { fetchPendingUploadsSummary } from '../services/pendingUploadsApi';
 
 export type NotificationCenterValue = {
   notifications: GuestNotificationItem[];
   unreadCount: number;
   queueItems: QueueItem[];
   queueCount: number;
+  pendingCount: number;
   totalCount: number;
   loading: boolean;
+  pendingLoading: boolean;
   refresh: () => Promise<void>;
   setFilters: (filters: { status?: 'new' | 'read' | 'dismissed' | 'all'; scope?: 'all' | 'uploads' | 'tips' | 'general' }) => void;
   markAsRead: (id: number) => Promise<void>;
@@ -31,6 +34,8 @@ export function NotificationCenterProvider({ eventToken, children }: { eventToke
   const [notifications, setNotifications] = React.useState<GuestNotificationItem[]>([]);
   const [unreadCount, setUnreadCount] = React.useState(0);
   const [loadingNotifications, setLoadingNotifications] = React.useState(true);
+  const [pendingCount, setPendingCount] = React.useState(0);
+  const [pendingLoading, setPendingLoading] = React.useState(true);
   const [filters, setFiltersState] = React.useState<{ status?: 'new' | 'read' | 'dismissed' | 'all'; scope?: 'all' | 'uploads' | 'tips' | 'general' }>({
     status: 'new',
     scope: 'all',
@@ -95,19 +100,40 @@ export function NotificationCenterProvider({ eventToken, children }: { eventToke
     [eventToken]
   );
 
+  const loadPendingUploads = React.useCallback(async () => {
+    if (!eventToken) {
+      setPendingLoading(false);
+      return;
+    }
+
+    try {
+      setPendingLoading(true);
+      const result = await fetchPendingUploadsSummary(eventToken, 1);
+      setPendingCount(result.totalCount);
+    } catch (error) {
+      console.error('Failed to load pending uploads', error);
+      setPendingCount(0);
+    } finally {
+      setPendingLoading(false);
+    }
+  }, [eventToken]);
+
   React.useEffect(() => {
     setNotifications([]);
     setUnreadCount(0);
     etagRef.current = null;
+    setPendingCount(0);
 
     if (!eventToken) {
       setLoadingNotifications(false);
+      setPendingLoading(false);
       return;
     }
 
     setLoadingNotifications(true);
     void loadNotifications();
-  }, [eventToken, loadNotifications]);
+    void loadPendingUploads();
+  }, [eventToken, loadNotifications, loadPendingUploads]);
 
   React.useEffect(() => {
     if (!eventToken) {
@@ -116,10 +142,11 @@ export function NotificationCenterProvider({ eventToken, children }: { eventToke
 
     const interval = window.setInterval(() => {
       void loadNotifications({ silent: true });
+      void loadPendingUploads();
     }, 90000);
 
     return () => window.clearInterval(interval);
-  }, [eventToken, loadNotifications]);
+  }, [eventToken, loadNotifications, loadPendingUploads]);
 
   React.useEffect(() => {
     const handleOnline = () => setIsOffline(false);
@@ -232,19 +259,21 @@ export function NotificationCenterProvider({ eventToken, children }: { eventToke
   }, [loadNotifications]);
 
   const refresh = React.useCallback(async () => {
-    await Promise.all([loadNotifications(), refreshQueue()]);
-  }, [loadNotifications, refreshQueue]);
+    await Promise.all([loadNotifications(), refreshQueue(), loadPendingUploads()]);
+  }, [loadNotifications, refreshQueue, loadPendingUploads]);
 
-  const loading = loadingNotifications || queueLoading;
-  const totalCount = unreadCount + queueCount;
+  const loading = loadingNotifications || queueLoading || pendingLoading;
+  const totalCount = unreadCount + queueCount + pendingCount;
 
   const value: NotificationCenterValue = {
     notifications,
     unreadCount,
     queueItems: items,
     queueCount,
+    pendingCount,
     totalCount,
     loading,
+    pendingLoading,
     refresh,
     setFilters,
     markAsRead,