feature/IO-3096-GlobalNotifications - Checkpoint - Notification Center

client/src/components/header/header.component.jsx

@@ -137,12 +137,32 @@ function Header({
 
   const [notificationVisible, setNotificationVisible] = useState(false);
 
-  const { data: unreadData } = useQuery(GET_UNREAD_COUNT, {
-    fetchPolicy: "cache-and-network"
+  const {
+    data: unreadData,
+    error: unreadError,
+    refetch: refetchUnread,
+    loading: unreadLoading
+  } = useQuery(GET_UNREAD_COUNT, {
+    fetchPolicy: "network-only", // Force network request for fresh data
+    pollInterval: 30000, // Poll every 30 seconds to ensure updates
+    onError: (err) => {
+      console.error("Error fetching unread count:", err);
+      console.log("Unread data state:", unreadData, "Error details:", err);
+    }
   });
 
   const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count || 0;
 
+  // Refetch unread count when the component mounts, updates, or on specific events
+  useEffect(() => {
+    refetchUnread();
+  }, [refetchUnread, bodyshop, currentUser]); // Add dependencies to trigger refetch on user or shop changes
+
+  // Log unread count for debugging
+  useEffect(() => {
+    console.log("Unread count updated:", unreadCount, "Loading:", unreadLoading, "Error:", unreadError);
+  }, [unreadCount, unreadLoading, unreadError]);
+
   const handleNotificationClick = (e) => {
     setNotificationVisible(!notificationVisible);
     if (handleMenuClick) handleMenuClick(e);
@@ -669,7 +689,7 @@ function Header({
     {
       key: "notifications",
       icon: (
-        <Badge count={unreadCount} offset={[10, 0]}>
+        <Badge count={unreadCount}>
           <BellFilled />
         </Badge>
       ),