Re-Quest/adminpanel
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
pradeepkumar
2026-03-19 04:20:33 +05:30
parent dbc2501d4c
commit 9036e9f32f
5 changed files with 226 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
package-lock.json generated
View File

@@ -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",

3
package.json
View File

@@ -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",

44
src/components/Sidebar.tsx
View File

@@ -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>
);

88
src/services/socket.service.ts Normal file
View File

@@ -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();

5
src/services/support-chat.service.ts
View File

@@ -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();