Merge pull request 'fix-lav-notification' (#31) from fix-lav-notification into lavoce

Reviewed-on: #31

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);
@@ -646,7 +645,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 +707,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 +1413,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>
                         )}

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>

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: 1,
-    { id: 3, name: 'Peter Jones', phone: '082345678901', status: 'Delivered', timestamp: '04-11-2025 11:42 WIB' },
+        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 => (
+                {userHistoryData.map((user) => (
-                    <Card key={user.id} style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}>
+                    <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>