From ec094b8f55e2a24ed514ac6c17687d9c9a3ea97b Mon Sep 17 00:00:00 2001
From: zain94rif <zainul94rifin@gmail.com>
Date: Mon, 5 Jan 2026 09:38:27 +0700
Subject: [PATCH 1/3] fix(text): change 'User History' to 'History User'

---
 .../component/ListNotification.jsx            |  8 +--
 .../component/UserHistoryModal.jsx            | 30 +++++++++--
 src/pages/notification/detail/UserHistory.jsx | 54 +++++++++++++++----
 3 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index 9889007..ba3c8eb 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -646,7 +646,7 @@ const ListNotification = memo(function ListNotification(props) {
                         padding: '0 16px',
                         position: 'relative',
                         border: '1px solid #f0f0f0',
-                        borderRadius: '4px'
+                        borderRadius: '4px',
                     }}
                 >
                     <div style={{ position: 'relative' }}>
@@ -708,7 +708,9 @@ const ListNotification = memo(function ListNotification(props) {
                                                         </Text>
                                                     </Space>
                                                     <div>
-                                                        <Text strong>Added by: {log.addedBy.name}</Text>
+                                                        <Text strong>
+                                                            Added by: {log.addedBy.name}
+                                                        </Text>
                                                         <span
                                                             style={{
                                                                 marginLeft: '8px',
@@ -1412,7 +1414,7 @@ const ListNotification = memo(function ListNotification(props) {
                             </div>
                         ) : (
                             <Typography.Title level={4} style={{ margin: 0 }}>
-                                {modalContent === 'user' && 'User History Notification'}
+                                {modalContent === 'user' && 'History User Notification'}
                                 {modalContent === 'log' && 'Log History Notification'}
                             </Typography.Title>
                         )}
diff --git a/src/pages/notification/component/UserHistoryModal.jsx b/src/pages/notification/component/UserHistoryModal.jsx
index 9cf832e..e6c0727 100644
--- a/src/pages/notification/component/UserHistoryModal.jsx
+++ b/src/pages/notification/component/UserHistoryModal.jsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import { Modal, Typography, Card, Row, Col, Avatar, Tag, Button, Space } from 'antd';
-import { UserOutlined, PhoneOutlined, CheckCircleOutlined, SyncOutlined, SendOutlined } from '@ant-design/icons';
+import {
+    UserOutlined,
+    PhoneOutlined,
+    CheckCircleOutlined,
+    SyncOutlined,
+    SendOutlined,
+} from '@ant-design/icons';
 
 const { Text } = Typography;
 
@@ -41,9 +47,17 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
     const getStatusTag = (status) => {
         switch (status) {
             case 'delivered':
-                return <Tag icon={<CheckCircleOutlined />} color="success">Delivered</Tag>;
+                return (
+                    <Tag icon={<CheckCircleOutlined />} color="success">
+                        Delivered
+                    </Tag>
+                );
             case 'sent':
-                return <Tag icon={<SyncOutlined spin />} color="processing">Sent</Tag>;
+                return (
+                    <Tag icon={<SyncOutlined spin />} color="processing">
+                        Sent
+                    </Tag>
+                );
             case 'failed':
                 return <Tag color="error">Failed</Tag>;
             default:
@@ -55,7 +69,7 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
         <Modal
             title={
                 <Text strong style={{ fontSize: '18px' }}>
-                    User History Notification
+                    History User Notification
                 </Text>
             }
             open={visible}
@@ -78,7 +92,13 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
                                         <Avatar size="large" icon={<UserOutlined />} />
                                         <div>
                                             <Text strong>{user.name}</Text>
-                                            <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                                            <div
+                                                style={{
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: '4px',
+                                                }}
+                                            >
                                                 <PhoneOutlined style={{ color: '#8c8c8c' }} />
                                                 <Text type="secondary">{user.phone}</Text>
                                             </div>
diff --git a/src/pages/notification/detail/UserHistory.jsx b/src/pages/notification/detail/UserHistory.jsx
index 9ec87bb..8170ee5 100644
--- a/src/pages/notification/detail/UserHistory.jsx
+++ b/src/pages/notification/detail/UserHistory.jsx
@@ -1,14 +1,37 @@
 import React from 'react';
 import { Button, Row, Col, Card, Badge, Typography, Space, Divider } from 'antd';
-import { SendOutlined, MobileOutlined, CheckCircleFilled, ArrowLeftOutlined } from '@ant-design/icons';
+import {
+    SendOutlined,
+    MobileOutlined,
+    CheckCircleFilled,
+    ArrowLeftOutlined,
+} from '@ant-design/icons';
 
 const { Text } = Typography;
 
 // Dummy data for user history
 const userHistoryData = [
-    { id: 1, name: 'John Doe', phone: '081234567890', status: 'Delivered', timestamp: '04-11-2025 11:40 WIB' },
-    { id: 2, name: 'Jane Smith', phone: '087654321098', status: 'Delivered', timestamp: '04-11-2025 11:41 WIB' },
-    { id: 3, name: 'Peter Jones', phone: '082345678901', status: 'Delivered', timestamp: '04-11-2025 11:42 WIB' },
+    {
+        id: 1,
+        name: 'John Doe',
+        phone: '081234567890',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:40 WIB',
+    },
+    {
+        id: 2,
+        name: 'Jane Smith',
+        phone: '087654321098',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:41 WIB',
+    },
+    {
+        id: 3,
+        name: 'Peter Jones',
+        phone: '082345678901',
+        status: 'Delivered',
+        timestamp: '04-11-2025 11:42 WIB',
+    },
 ];
 
 const UserHistory = ({ notification, onBack }) => {
@@ -18,7 +41,9 @@ const UserHistory = ({ notification, onBack }) => {
                 <Col>
                     <Space align="center">
                         <Button type="text" icon={<ArrowLeftOutlined />} onClick={onBack} />
-                        <Typography.Title level={4} style={{ margin: 0 }}>User History Notification</Typography.Title>
+                        <Typography.Title level={4} style={{ margin: 0 }}>
+                            History User Notification
+                        </Typography.Title>
                     </Space>
                     <Text type="secondary" style={{ marginLeft: '40px' }}>
                         {notification.title} - {notification.issue}
@@ -27,25 +52,34 @@ const UserHistory = ({ notification, onBack }) => {
             </Row>
 
             <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-                {userHistoryData.map(user => (
-                    <Card key={user.id} style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}>
+                {userHistoryData.map((user) => (
+                    <Card
+                        key={user.id}
+                        style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}
+                    >
                         <Row align="middle" justify="space-between">
                             <Col>
                                 <Space align="center">
                                     <Text strong>{user.name}</Text>
                                     <Text>|</Text>
-                                    <Text><MobileOutlined /> {user.phone}</Text>
+                                    <Text>
+                                        <MobileOutlined /> {user.phone}
+                                    </Text>
                                     <Text>|</Text>
                                     <Badge status="success" text={user.status} />
                                 </Space>
                                 <Divider style={{ margin: '8px 0' }} />
                                 <Space align="center">
                                     <CheckCircleFilled style={{ color: '#52c41a' }} />
-                                    <Text type="secondary">Success Delivered at {user.timestamp}</Text>
+                                    <Text type="secondary">
+                                        Success Delivered at {user.timestamp}
+                                    </Text>
                                 </Space>
                             </Col>
                             <Col>
-                                <Button type="primary" ghost icon={<SendOutlined />}>Resend</Button>
+                                <Button type="primary" ghost icon={<SendOutlined />}>
+                                    Resend
+                                </Button>
                             </Col>
                         </Row>
                     </Card>

From d03bbf2a418e9bf65f61a9cbcfc81b4e5685b0a3 Mon Sep 17 00:00:00 2001
From: bragaz_rexita <bragazrexi@gmail.com>
Date: Mon, 5 Jan 2026 10:38:24 +0700
Subject: [PATCH 2/3] Repair topic mqtt

---
 src/components/Global/MqttConnection.jsx | 11 ++++++++++-
 src/pages/home/SvgAirDryerA.jsx          |  2 +-
 src/pages/home/SvgAirDryerB.jsx          |  2 +-
 src/pages/home/SvgAirDryerC.jsx          |  2 +-
 src/pages/home/SvgCompressorA.jsx        |  2 +-
 src/pages/home/SvgCompressorB.jsx        |  2 +-
 src/pages/home/SvgCompressorC.jsx        |  2 +-
 src/pages/home/SvgOverviewAirDryer.jsx   |  2 +-
 src/pages/home/SvgOverviewCompressor.jsx |  2 +-
 9 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/Global/MqttConnection.jsx b/src/components/Global/MqttConnection.jsx
index 829f598..bde3404 100644
--- a/src/components/Global/MqttConnection.jsx
+++ b/src/components/Global/MqttConnection.jsx
@@ -2,7 +2,16 @@
 import mqtt from 'mqtt';
 
 const mqttUrl = `${import.meta.env.VITE_MQTT_SERVER ?? 'ws://localhost:1884'}`;
-const topics = ['cod/air_dryer/air_dryer1'];
+const topics = [
+    'PIU_COD/AIR_DRYER/OVERVIEW',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_A',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_B',
+    'PIU_COD/AIR_DRYER/AIR_DRYER_C',
+    'PIU_COD/COMPRESSOR/OVERVIEW',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_A',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_B',
+    'PIU_COD/COMPRESSOR/COMPRESSOR_C'
+];
 const options = {
     keepalive: 30,
     clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),
diff --git a/src/pages/home/SvgAirDryerA.jsx b/src/pages/home/SvgAirDryerA.jsx
index 5c42bd0..38747a2 100644
--- a/src/pages/home/SvgAirDryerA.jsx
+++ b/src/pages/home/SvgAirDryerA.jsx
@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_A_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_A_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_A';
 
 const SvgAirDryerA = () => {
     return (
diff --git a/src/pages/home/SvgAirDryerB.jsx b/src/pages/home/SvgAirDryerB.jsx
index aa12b2c..7af0de8 100644
--- a/src/pages/home/SvgAirDryerB.jsx
+++ b/src/pages/home/SvgAirDryerB.jsx
@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_B_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_B_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_B';
 
 const SvgAirDryerB = () => {
     return (
diff --git a/src/pages/home/SvgAirDryerC.jsx b/src/pages/home/SvgAirDryerC.jsx
index f1ad6d0..2a31b2a 100644
--- a/src/pages/home/SvgAirDryerC.jsx
+++ b/src/pages/home/SvgAirDryerC.jsx
@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_C_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/air_dryer_C_rev.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_C';
 
 const SvgAirDryerC = () => {
     return (
diff --git a/src/pages/home/SvgCompressorA.jsx b/src/pages/home/SvgCompressorA.jsx
index 617635b..580ae92 100644
--- a/src/pages/home/SvgCompressorA.jsx
+++ b/src/pages/home/SvgCompressorA.jsx
@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/compressorA_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_A';
 
 const SvgCompressorA = () => {
     return (
diff --git a/src/pages/home/SvgCompressorB.jsx b/src/pages/home/SvgCompressorB.jsx
index 418a39c..cfcc2ac 100644
--- a/src/pages/home/SvgCompressorB.jsx
+++ b/src/pages/home/SvgCompressorB.jsx
@@ -6,7 +6,7 @@ import SvgViewer from './SvgViewer';
 import filePathSvg from '../../assets/svg/compressorB_rev.svg';
 
 const { Text } = Typography;
-const topicMqtt = 'cod/air_dryer/air_dryer1';
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_B';
 
 const SvgCompressorB = () => {
     return (
diff --git a/src/pages/home/SvgCompressorC.jsx b/src/pages/home/SvgCompressorC.jsx
index e8152d7..1d9a8a1 100644
--- a/src/pages/home/SvgCompressorC.jsx
+++ b/src/pages/home/SvgCompressorC.jsx
@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/compressorC_rev.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_C';
 
 const SvgCompressorC = () => {
     return (
diff --git a/src/pages/home/SvgOverviewAirDryer.jsx b/src/pages/home/SvgOverviewAirDryer.jsx
index c3c7181..4ab7d2d 100644
--- a/src/pages/home/SvgOverviewAirDryer.jsx
+++ b/src/pages/home/SvgOverviewAirDryer.jsx
@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/overview-airdryer.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/AIR_DRYER/OVERVIEW';
 
 const SvgOverviewAirDryer = () => {
     return (
diff --git a/src/pages/home/SvgOverviewCompressor.jsx b/src/pages/home/SvgOverviewCompressor.jsx
index ad505e0..f2b5671 100644
--- a/src/pages/home/SvgOverviewCompressor.jsx
+++ b/src/pages/home/SvgOverviewCompressor.jsx
@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/overview-compressor.svg';
 const { Text } = Typography;
 
 // const filePathSvg = '/src/assets/svg/test-new.svg';
-const topicMqtt = 'PIU_GGCP/Devices/PB';
+const topicMqtt = 'PIU_COD/COMPRESSOR/OVERVIEW';
 
 const SvgOverviewCompressor = () => {
     return (

From b3422898882c08f28c4004aef3ec701aff94dd96 Mon Sep 17 00:00:00 2001
From: zain94rif <zainul94rifin@gmail.com>
Date: Mon, 5 Jan 2026 10:39:01 +0700
Subject: [PATCH 3/3] fix(view): adjustment view page notification

---
 .../component/ListNotification.jsx            | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index ba3c8eb..91c0ecf 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -64,7 +64,7 @@ const transformNotificationData = (apiData) => {
               }) + ' WIB'
             : 'N/A',
         location: item.plant_sub_section_name || item.device_location || 'Location not specified',
-        details: item.message_error_issue || 'No details available',
+        details: item.device_name || '-',
         link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
         subsection: item.plant_sub_section_name || 'N/A',
         isRead: item.is_read,
@@ -396,7 +396,7 @@ const ListNotification = memo(function ListNotification(props) {
                                                 </div>
                                             </Col>
                                             <Col flex="auto">
-                                                <div
+                                                {/* <div
                                                     style={{
                                                         display: 'flex',
                                                         gap: '8px',
@@ -419,12 +419,18 @@ const ListNotification = memo(function ListNotification(props) {
                                                     >
                                                         {notification.details}
                                                     </Paragraph>
-                                                </div>
+                                                </div> */}
                                                 <Space
                                                     direction="vertical"
                                                     size={4}
                                                     style={{ fontSize: '13px', color: '#8c8c8c' }}
                                                 >
+                                                    <Space>
+                                                        <MobileOutlined />
+                                                        <Text type="secondary">
+                                                            {notification.details}
+                                                        </Text>
+                                                    </Space>
                                                     <Space>
                                                         <ClockCircleOutlined />
                                                         <Text type="secondary">
@@ -438,17 +444,10 @@ const ListNotification = memo(function ListNotification(props) {
                                                         </Text>
                                                     </Space>
                                                     <Space>
-                                                        <LinkOutlined />
-                                                        <AntdLink
-                                                            href={notification.link}
-                                                            target="_blank"
-                                                        >
-                                                            {notification.link}
-                                                        </AntdLink>
                                                         <Button
                                                             type="link"
                                                             icon={<SendOutlined />}
-                                                            style={{ paddingLeft: '8px' }}
+                                                            style={{ paddingLeft: '0px' }}
                                                             onClick={(e) => {
                                                                 e.stopPropagation();
                                                                 handleResend(notification);