feat: add real-time notification system with Socket.IO client

Implements the frontend notification client for TEC-2217:

1. notifications-api.ts — API client for list, unread-count,
   markAsRead, markAllAsRead endpoints
2. notifications-store.ts — Zustand store for notification state
   (recent list, unread count, dropdown open state)
3. use-socket-notifications.ts — Socket.IO hook that connects with
   httpOnly cookie auth, listens for notification:new events,
   auto-reconnects, and syncs unread count on (re)connect
4. notification-bell.tsx — Bell icon with unread badge + dropdown
   showing 10 most recent notifications with time-ago formatting,
   mark-as-read on click, mark-all-as-read, and "Xem tất cả" link
5. notifications-provider.tsx — Provider wired into locale layout
   (inside AuthProvider) to initialize Socket.IO connection
6. Dashboard header — NotificationBell placed before LanguageSwitcher

Added socket.io-client dependency.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-16 02:24:21 +07:00
parent 3a5d2ca9c1
commit 4400d0c123
9 changed files with 851 additions and 13 deletions

View File

@@ -14,8 +14,11 @@
"@hookform/resolvers": "^5.2.2",
"@sentry/nextjs": "^10.47.0",
"@tanstack/react-query": "^5.96.2",
"@tanstack/react-table": "^8.21.3",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"html2canvas": "^1.4.1",
"jspdf": "^4.2.1",
"lucide-react": "^1.7.0",
"mapbox-gl": "^3.21.0",
"next": "^15.5.14",
@@ -24,6 +27,7 @@
"react-dom": "^18.3.0",
"react-hook-form": "^7.72.1",
"recharts": "^3.8.1",
"socket.io-client": "^4.8.3",
"tailwind-merge": "^3.5.0",
"web-vitals": "^5.2.0",
"zod": "^4.3.6",