feat: Implement real-time unread support chat count in the sidebar using WebSockets.

package-lock.json

@@ -11,7 +11,8 @@
         "axios": "^1.13.2",
         "next": "16.1.0",
         "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "react-dom": "19.2.3",
+        "socket.io-client": "^4.8.3"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -1234,6 +1235,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -2726,7 +2733,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2843,6 +2849,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
+      "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.18.3",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.4",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
@@ -5004,7 +5032,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -5909,6 +5936,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
+      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
+      "integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6579,6 +6634,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -12,7 +12,8 @@
     "axios": "^1.13.2",
     "next": "16.1.0",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "socket.io-client": "^4.8.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/components/Sidebar.tsx

@@ -2,6 +2,9 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { useState, useEffect, useCallback } from 'react';
+import { supportChatService } from '@/services/support-chat.service';
+import { adminSocketService } from '@/services/socket.service';
 
 const menuItems = [
   {
@@ -106,6 +109,41 @@ const menuItems = [
 
 export default function Sidebar() {
   const pathname = usePathname();
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  const fetchUnreadCount = useCallback(async () => {
+    try {
+      const count = await supportChatService.getUnreadTotal();
+      setUnreadCount(count);
+    } catch {
+      // Silently fail
+    }
+  }, []);
+
+  useEffect(() => {
+    // Initial fetch
+    fetchUnreadCount();
+
+    // Connect WebSocket for real-time updates
+    adminSocketService.connect();
+
+    const handleUnreadUpdate = (data: unknown) => {
+      const payload = data as { unreadTotal: number };
+      if (typeof payload?.unreadTotal === 'number') {
+        setUnreadCount(payload.unreadTotal);
+      }
+    };
+
+    adminSocketService.on('support_unread_update', handleUnreadUpdate);
+
+    // Fallback polling every 30s (in case socket disconnects)
+    const interval = setInterval(fetchUnreadCount, 30000);
+
+    return () => {
+      clearInterval(interval);
+      adminSocketService.off('support_unread_update', handleUnreadUpdate);
+    };
+  }, [fetchUnreadCount]);
 
   return (
     <aside className="w-64 bg-[#00293d] min-h-screen fixed left-0 top-0">
@@ -140,6 +178,7 @@ export default function Sidebar() {
           {menuItems.map((item) => {
             const isActive = pathname === item.href ||
               (item.href !== '/dashboard' && pathname.startsWith(item.href));
+            const showBadge = item.name === 'Support Chat' && unreadCount > 0;
 
             return (
               <li key={item.name}>
@@ -153,6 +192,11 @@ export default function Sidebar() {
                 >
                   {item.icon}
                   <span className="ml-3 font-medium font-serif text-sm">{item.name}</span>
+                  {showBadge && (
+                    <span className="ml-auto inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-bold text-white bg-red-500 rounded-full">
+                      {unreadCount > 99 ? '99+' : unreadCount}
+                    </span>
+                  )}
                 </Link>
               </li>
             );

src/services/socket.service.ts

@@ -0,0 +1,88 @@
+import { io, Socket } from 'socket.io-client';
+
+class AdminSocketService {
+  private socket: Socket | null = null;
+  private listeners = new Map<string, Set<(data: unknown) => void>>();
+
+  connect() {
+    if (this.socket?.connected) return;
+
+    const token = localStorage.getItem('accessToken');
+    if (!token) return;
+
+    // Strip /api/v1 from API URL to get the socket server URL
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api/v1';
+    const socketUrl = apiUrl.replace(/\/api\/v1\/?$/, '');
+
+    this.socket = io(socketUrl, {
+      auth: { token },
+      transports: ['websocket', 'polling'],
+      reconnection: true,
+      reconnectionDelay: 2000,
+      reconnectionAttempts: 10,
+    });
+
+    this.socket.on('connect', () => {
+      console.log('[AdminSocket] Connected');
+    });
+
+    this.socket.on('disconnect', (reason) => {
+      console.log('[AdminSocket] Disconnected:', reason);
+    });
+
+    this.socket.on('connect_error', (err) => {
+      console.error('[AdminSocket] Connection error:', err.message);
+    });
+
+    // Re-attach all registered listeners
+    this.listeners.forEach((callbacks, event) => {
+      callbacks.forEach((cb) => {
+        this.socket?.on(event, cb as (...args: unknown[]) => void);
+      });
+    });
+  }
+
+  disconnect() {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+  }
+
+  on(event: string, callback: (data: unknown) => void) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event)!.add(callback);
+
+    if (this.socket) {
+      this.socket.on(event, callback as (...args: unknown[]) => void);
+    }
+  }
+
+  off(event: string, callback: (data: unknown) => void) {
+    const callbacks = this.listeners.get(event);
+    if (callbacks) {
+      callbacks.delete(callback);
+      if (callbacks.size === 0) {
+        this.listeners.delete(event);
+      }
+    }
+
+    if (this.socket) {
+      this.socket.off(event, callback as (...args: unknown[]) => void);
+    }
+  }
+
+  emit(event: string, data: unknown) {
+    if (this.socket?.connected) {
+      this.socket.emit(event, data);
+    }
+  }
+
+  get isConnected(): boolean {
+    return this.socket?.connected ?? false;
+  }
+}
+
+export const adminSocketService = new AdminSocketService();

src/services/support-chat.service.ts

@@ -58,6 +58,11 @@ class SupportChatService {
     const response = await api.patch<ApiResponse<SupportChat>>(`/support-chat/admin/${chatId}/close`);
     return response.data.data;
   }
+
+  async getUnreadTotal(): Promise<number> {
+    const response = await api.get<ApiResponse<number>>('/support-chat/admin/unread-total');
+    return response.data.data;
+  }
 }
 
 export const supportChatService = new SupportChatService();