feat: implement real-time notification updates and toast alerts via socket events

src/components/providers/header-provider.tsx

@@ -6,6 +6,7 @@ import { agentsService } from '@/services/agents.service';
 import { usersService } from '@/services/users.service';
 import { uploadService } from '@/services/upload.service';
 import { notificationsApiService } from '@/services/notifications-api.service';
+import { socketService } from '@/services';
 
 interface HeaderData {
   profileImage: string | null;
@@ -102,7 +103,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
     return () => window.removeEventListener('profile-updated', handleProfileUpdate);
   }, [fetchProfileData]);
 
-  // Notification count polling
+  // Notification count polling + real-time socket updates
   useEffect(() => {
     if (status !== 'authenticated') return;
 
@@ -120,9 +121,17 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
     const handleNotification = () => fetchCount();
     window.addEventListener('notification-received', handleNotification);
 
+    // Listen to socket events for immediate notification count refresh
+    const unsubConnectionReq = socketService.onConnectionRequest(() => fetchCount());
+    const unsubConnectionRes = socketService.onConnectionResponse(() => fetchCount());
+    const unsubNewMessage = socketService.onNewMessage(() => fetchCount());
+
     return () => {
       clearInterval(interval);
       window.removeEventListener('notification-received', handleNotification);
+      unsubConnectionReq();
+      unsubConnectionRes();
+      unsubNewMessage();
     };
   }, [status]);
 

src/components/providers/notification-provider.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import { useSession } from "next-auth/react";
 import { notificationService } from "@/services/notification.service";
+import { socketService } from "@/services";
 
 interface ToastNotification {
   id: number;
@@ -50,8 +51,26 @@ export function NotificationProvider() {
 
     init();
 
+    // Listen to socket events for real-time toast notifications
+    const unsubConnectionReq = socketService.onConnectionRequest((data) => {
+      const senderName = (data.senderName as string) || "Someone";
+      addToast({ title: "New Connection Request", body: `${senderName} wants to connect with you` });
+    });
+
+    const unsubConnectionRes = socketService.onConnectionResponse((data) => {
+      const agentName = (data.agentName as string) || "An agent";
+      const status = data.status as string;
+      if (status === "ACCEPTED") {
+        addToast({ title: "Connection Accepted", body: `${agentName} accepted your connection request` });
+      } else {
+        addToast({ title: "Connection Declined", body: `${agentName} declined your connection request` });
+      }
+    });
+
     return () => {
       if (unsubscribe) unsubscribe();
+      unsubConnectionReq();
+      unsubConnectionRes();
     };
   }, [status, addToast]);