tam 2

management/src/components/ChatWidget.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { apiChat, type ChatConversation, type ChatMessage, type ChatStudent } from '../api';
 import { type StaffChatOpenDetail } from '../chatEvents';
 import { useAuth } from '../auth/AuthContext';
-import { onStaffChatMessage, playChatSound } from '../hooks/useStaffChatSocket';
+import { onStaffChatMessage, onStudentViolation, playChatSound, kindLabel } from '../hooks/useStaffChatSocket';
 
 export function ChatWidget() {
   const { staff } = useAuth();
@@ -83,6 +83,13 @@ export function ChatWidget() {
     return () => { off(); };
   }, [handleIncoming]);
 
+  useEffect(() => {
+    return onStudentViolation((v) => {
+      const name = v.studentName || v.studentCode || `SV #${v.studentId}`;
+      showToast(`⚠ ${kindLabel(v.kind)}`, `${name}: ${v.reason || 'Vi phạm giám sát'}`);
+    });
+  }, []);
+
   useEffect(() => {
     const onOpen = (e: Event) => {
       const detail = (e as CustomEvent<StaffChatOpenDetail>).detail;
@@ -152,7 +159,7 @@ export function ChatWidget() {
   const dock = (
     <div className="chat-dock">
       {toast && (
-        <div className="chat-toast" role="status">
+        <div className={`chat-toast ${toast.title.startsWith('⚠') ? 'chat-toast-alert' : ''}`} role="status">
           <strong>{toast.title}</strong>
           <span>{toast.body}</span>
         </div>