src/components/Global/MqttConnection.jsx

@@ -10,7 +10,8 @@ const topics = [
     'PIU_COD/COMPRESSOR/OVERVIEW',
     'PIU_COD/COMPRESSOR/COMPRESSOR_A',
     'PIU_COD/COMPRESSOR/COMPRESSOR_B',
-    'PIU_COD/COMPRESSOR/COMPRESSOR_C'
+    'PIU_COD/COMPRESSOR/COMPRESSOR_C',
+    'PIU_COD/ERROR_CODE/SIM',
 ];
 const options = {
     keepalive: 30,
@@ -98,4 +99,22 @@ const setValSvg = (listenTopic, svg) => {
     });
 };
 
-export { publishMessage, listenMessage, setValSvg };
+// === NOTIFICATION LISTENER ===
+const notifListeners = [];
+
+const onNotifUpdate = (callback) => {
+    notifListeners.push(callback);
+};
+
+client.on('message', (topic, message) => {
+    if (topic === import.meta.env.VITE_MQTT_TOPIC_COD) {
+        try {
+            const payload = JSON.parse(message.toString());
+            notifListeners.forEach((cb) => cb(payload));
+        } catch (err) {
+            console.error('Invalid notif payload', err);
+        }
+    }
+});
+
+export { publishMessage, listenMessage, setValSvg, onNotifUpdate };

src/pages/notification/component/ListNotification.jsx

@@ -46,6 +46,7 @@ import {
     resendChatAllUser,
     searchData,
 } from '../../../api/notification';
+import { onNotifUpdate } from '../../../components/Global/MqttConnection';
 
 const { Text, Paragraph, Link: AntdLink } = Typography;
 const OpenMail = ({ size = 22, color = 'black' }) => (
@@ -101,6 +102,7 @@ const ListNotification = memo(function ListNotification(props) {
     const [activeTab, setActiveTab] = useState('all');
     const [searchTerm, setSearchTerm] = useState('');
     const [searchValue, setSearchValue] = useState('');
+    const [notifTrigger, setNotifTrigger] = useState(0);
     const [loading, setLoading] = useState(false);
     const [modalContent, setModalContent] = useState(null); // 'user', 'log', 'details', or null
     const [isAddingLog, setIsAddingLog] = useState(false);
@@ -178,6 +180,12 @@ const ListNotification = memo(function ListNotification(props) {
         fetchNotifications(page, pageSize, isReadFilter);
     };
 
+    useEffect(() => {
+        onNotifUpdate(() => {
+            setNotifTrigger((prev) => prev + 1);
+        });
+    }, []);
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (!token) {
@@ -188,7 +196,7 @@ const ListNotification = memo(function ListNotification(props) {
         // Fetch notifications on component mount and when tab changes
         const isReadFilter = activeTab === 'read' ? 1 : activeTab === 'unread' ? 0 : null;
         fetchNotifications(pagination.current_page, pagination.current_limit, isReadFilter);
-    }, [activeTab]);
+    }, [activeTab, notifTrigger]);
 
     const getIconAndColor = (type) => {
         switch (type) {