[FE-09] Build real-time order notification system using the existing Socket.io dependency

[Leothosine]

Problem

socket.io-client is listed in package.json but there is no WebSocket connection, no event listeners, and no notification UI anywhere in the frontend. Restaurant admins have no way to know when a new order arrives without manually refreshing the page. The backend has socket.io installed, suggesting real-time was planned but never implemented on the client side.

Proposed Solution

1. Create frontend/lib/socket/socketClient.ts establishing a Socket.io connection authenticated with the JWT (passed as handshake auth token)
2. Create a useOrderNotifications() hook that subscribes to order:new and order:status_changed events and shows a persistent toast on new orders
3. Add a Zustand notificationSlice storing unread count and notifications array
4. Display an unread badge on the Orders nav item in the admin sidebar
5. Clicking the toast navigates to /admin/orders/{orderId}

Acceptance Criteria

• New order event from the backend appears as a toast within 1 second
• Unread badge on the Orders nav item increments on each new order
• Badge clears when the admin visits the Orders page
• Socket reconnects automatically after a disconnect (exponential backoff)
• Connection is rejected if the JWT is missing or invalid (server-side namespace auth)
• No memory leaks: socket disconnects when the admin logs out

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[jaynomyaro]

Hi! I’m a full-stack developer with a strong blockchain background. I’d love to handle this issue and can deliver a clean, reliable solution. Kindly assign it to me.