feat(orders): Live Kitchen Display System (KDS) View (#175)

[anshika1179]

Closes #175

Description

Implemented a production-ready Kitchen Display System (KDS) for tablet and touch-first devices, including real-time order tracking and STOMP WebSocket integration.

Changes

• Backend (Spring Boot): Fixed NullPointerExceptions caused by commented-out dependency injections in OrderController, OrderNotificationService, OrderDirector, and OrderServiceImpl. Restored standard constructor injections so STOMP events are reliably broadcast to the frontend.
• Frontend (React + Tailwind):
  • Added a new /admin/kds route specifically designed for the kitchen workflow.
  • Implemented KanbanBoard and OrderCard components with Pending, Preparing, and Ready queues.
  • Added a live Stopwatch to track elapsed minutes since the order was placed. Included visual escalation (amber warning at 15m, red pulsing at 20m) to enforce kitchen SLAs.
  • Added a browser-safe Web Audio API chime to automatically alert chefs when new orders arrive over the socket.
  • Protected the route using local storage JWT roles (ADMIN, MANAGER, STAFF).

Verification

• Both backend and frontend builds succeed.
• Tested UI with live data rendering properly.
• Real-time STOMP connections correctly initialize.

[anshika1179]

@rdodiya kindly check this pr if something need to add let me know

[Copilot]

Pull request overview

This PR introduces a new Kitchen Display System (KDS) admin view (Kanban-style) with real-time order updates via STOMP/SockJS, and adjusts backend wiring for order notifications/status updates.

Changes:

• Backend: Restores Spring-managed dependency injection for order notification publishing and order building/mapping.
• Frontend: Adds /admin/kds route with KDS UI (Kanban board + order cards) and role-aware admin routing.
• Frontend: Adds STOMP/SockJS dependencies and WebSocket client for live updates + audible chime.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
RestroHub/src/main/java/com/restroly/qrmenu/order/service/OrderNotificationService.java	Switches to constructor-injected dependencies for STOMP notifications.
RestroHub/src/main/java/com/restroly/qrmenu/order/service/impl/OrderServiceImpl.java	Injects OrderDirector, OrderMapper, and OrderNotificationService instead of manual instantiation.
RestroHub/src/main/java/com/restroly/qrmenu/order/controller/OrderController.java	Moves controller toward constructor injection (but currently breaks paymentService usage).
RestroHub/src/main/java/com/restroly/qrmenu/order/builder/OrderDirector.java	Converts builders to injected dependencies via @RequiredArgsConstructor.
RestroHub-FrontEnd/src/routes/ProtectedRoute.jsx	Adds client-side role-based route restriction for Manager/Staff to KDS/Orders/Profile.
RestroHub-FrontEnd/src/routes/index.jsx	Registers the new kds admin route.
RestroHub-FrontEnd/src/components/admin/Sidebar.jsx	Adds a “Kitchen Display” navigation entry.
RestroHub-FrontEnd/src/components/admin/kds/OrderCard.jsx	Adds UI card + status transition calls (currently uses incorrect API path).
RestroHub-FrontEnd/src/components/admin/kds/KitchenDisplaySystem.jsx	Implements KDS page, order fetching, and WebSocket live updates (currently incorrect REST + WS URLs and reconnect behavior).
RestroHub-FrontEnd/src/components/admin/kds/KanbanBoard.jsx	Implements 3-column Kanban layout for order statuses.
RestroHub-FrontEnd/package.json	Adds STOMP/SockJS dependencies.
RestroHub-FrontEnd/package-lock.json	Locks dependency updates (includes new Node engine requirement via @vitejs/plugin-react).

Files not reviewed (1)

• RestroHub-FrontEnd/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[rdodiya]

Hi @anshika1179 ,
Please perform necessary code changes or add comments in code suggestion given by co-pilot. Also I am getting below error after pull your code changes in local and perform npm install, npm run dev command . Please fix the below error and re-test the flow

Error :

browser-crypto.js:3 Uncaught ReferenceError: global is not defined
at node_modules/sockjs-client/lib/utils/browser-crypto.js (browser-crypto.js:3:1)
at __require (chunk-G3PMV62Z.js:8:50)
at node_modules/sockjs-client/lib/utils/random.js (random.js:3:14)
at __require (chunk-G3PMV62Z.js:8:50)
at node_modules/sockjs-client/lib/utils/event.js (event.js:3:14)
at __require (chunk-G3PMV62Z.js:8:50)
at node_modules/sockjs-client/lib/transport/websocket.js (websocket.js:3:13)
at __require (chunk-G3PMV62Z.js:8:50)
at node_modules/sockjs-client/lib/transport-list.js (transport-list.js:5:3)
at __require (chunk-G3PMV62Z.js:8:50)
(anonymous) @ browser-crypto.js:3
__require @ chunk-G3PMV62Z.js:8
(anonymous) @ random.js:3
__require @ chunk-G3PMV62Z.js:8
(anonymous) @ event.js:3
__require @ chunk-G3PMV62Z.js:8
(anonymous) @ websocket.js:3
__require @ chunk-G3PMV62Z.js:8
(anonymous) @ transport-list.js:5
__require @ chunk-G3PMV62Z.js:8
(anonymous) @ entry.js:3
__require @ chunk-G3PMV62Z.js:8
(anonymous) @ entry.js:10

[anshika1179]

@rdodiya check it now

[anshika1179]

@rdodiya hi kindly review this pr and if modificatrion required let me know