From 978e020305befccb7902fd7893f126c303341b0b Mon Sep 17 00:00:00 2001
From: Rafiafrzl <mrafiafrizal0@gmail.com>
Date: Mon, 22 Dec 2025 20:49:48 +0700
Subject: [PATCH] feat: update notification data transformation and enhance
 user history display

---
 .../component/ListNotification.jsx            |   3 +-
 .../IndexNotificationDetail.jsx               | 111 +++++++++++++++---
 2 files changed, 96 insertions(+), 18 deletions(-)

diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index 96cba0f..a959cd9 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -47,7 +47,7 @@ const transformNotificationData = (apiData) => {
     return apiData.map((item, index) => ({
         id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
         type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical',
-        title: item.device_name || 'Unknown Device',
+        title: item.error_code_name || 'Unknown Error',
         issue: item.error_code || item.error_code_name || 'Unknown Error',
         description: `${item.error_code} - ${item.error_code_name || ''}`,
         timestamp: item.created_at
@@ -324,7 +324,6 @@ const ListNotification = memo(function ListNotification(props) {
                                     borderColor: notification.isRead ? '#f0f0f0' : '#d6e4ff',
                                     cursor: 'pointer',
                                 }}
-                                onClick={() => handleMarkAsRead(notification.id)}
                             >
                                 <div
                                     style={{
diff --git a/src/pages/notificationDetail/IndexNotificationDetail.jsx b/src/pages/notificationDetail/IndexNotificationDetail.jsx
index 72a74cb..1cadd15 100644
--- a/src/pages/notificationDetail/IndexNotificationDetail.jsx
+++ b/src/pages/notificationDetail/IndexNotificationDetail.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Layout, Card, Row, Col, Typography, Space, Button, Spin, Result, Input, message } from 'antd';
+import { Layout, Card, Row, Col, Typography, Space, Button, Spin, Result, Input, message, Avatar, Tag } from 'antd';
 import {
     ArrowLeftOutlined,
     CloseCircleFilled,
@@ -15,10 +15,13 @@ import {
     PlusOutlined,
     UserOutlined,
     LoadingOutlined,
+    PhoneOutlined,
+    CheckCircleOutlined,
+    SyncOutlined,
+    SendOutlined,
 } from '@ant-design/icons';
 import { getNotificationDetail, createNotificationLog, getNotificationLogByNotificationId } from '../../api/notification';
 import UserHistoryModal from '../notification/component/UserHistoryModal';
-import LogHistoryCard from '../notification/component/LogHistoryCard';
 
 const { Content } = Layout;
 const { Text, Paragraph, Link } = Typography;
@@ -77,6 +80,50 @@ const transformNotificationData = (apiData) => {
     };
 };
 
+// Dummy data baru untuk user history
+const getDummyUsers = (notification) => {
+    if (!notification) return [];
+    return [
+        {
+            id: '1',
+            name: 'John Doe',
+            phone: '081234567890',
+            status: 'delivered',
+        },
+        {
+            id: '2',
+            name: 'Jane Smith',
+            phone: '082345678901',
+            status: 'sent',
+        },
+        {
+            id: '3',
+            name: 'Bob Johnson',
+            phone: '083456789012',
+            status: 'failed',
+        },
+        {
+            id: '4',
+            name: 'Alice Brown',
+            phone: '084567890123',
+            status: 'delivered',
+        },
+    ];
+};
+
+const getStatusTag = (status) => {
+    switch (status) {
+        case 'delivered':
+            return <Tag icon={<CheckCircleOutlined />} color="success">Delivered</Tag>;
+        case 'sent':
+            return <Tag icon={<SyncOutlined spin />} color="processing">Sent</Tag>;
+        case 'failed':
+            return <Tag color="error">Failed</Tag>;
+        default:
+            return <Tag color="default">{status}</Tag>;
+    }
+};
+
 const getIconAndColor = (type) => {
     switch (type) {
         case 'critical':
@@ -262,14 +309,6 @@ const NotificationDetailTab = () => {
                                     Back to notification list
                                 </Button>
                             </Col>
-                            <Col>
-                                <Button
-                                    icon={<UserOutlined />}
-                                    onClick={() => setModalContent('user')}
-                                >
-                                    User History
-                                </Button>
-                            </Col>
                         </Row>
                         <div
                             style={{
@@ -387,13 +426,52 @@ const NotificationDetailTab = () => {
                                 </Card>
                             </Col>
 
-                            {/* Kolom Kanan: Log History */}
+                            {/* Kolom Kanan: User History */}
                             <Col xs={24} lg={8}>
-                                <LogHistoryCard
-                                    notificationData={notification}
-                                    logData={logHistoryData}
-                                    loading={logLoading}
-                                />
+                                <Card
+                                    title="User History"
+                                    size="small"
+                                    style={{ height: '100%' }}
+                                >
+                                    <div style={{ maxHeight: '400px', overflowY: 'auto', padding: '2px' }}>
+                                        <Space direction="vertical" size={2} style={{ width: '100%' }}>
+                                            {getDummyUsers(notification).map((user) => (
+                                                <Card key={user.id} size="small" style={{ width: '100%', margin: 0 }}>
+                                                    <Row align="middle" justify="space-between">
+                                                        <Col>
+                                                            <Space align="center">
+                                                                <Avatar size="large" icon={<UserOutlined />} />
+                                                                <div>
+                                                                    <Text strong>{user.name}</Text>
+                                                                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                                                                        <PhoneOutlined style={{ color: '#8c8c8c' }} />
+                                                                        <Text type="secondary">{user.phone}</Text>
+                                                                    </div>
+                                                                </div>
+                                                            </Space>
+                                                        </Col>
+                                                        <Col>
+                                                            <Space align="center" size="large">
+                                                                {getStatusTag(user.status)}
+                                                                <Button
+                                                                    type="primary"
+                                                                    icon={<SendOutlined />}
+                                                                    size="small"
+                                                                    onClick={(e) => {
+                                                                        e.stopPropagation();
+                                                                        console.log(`Resend to ${user.name}`);
+                                                                    }}
+                                                                >
+                                                                    Resend
+                                                                </Button>
+                                                            </Space>
+                                                        </Col>
+                                                    </Row>
+                                                </Card>
+                                            ))}
+                                        </Space>
+                                    </div>
+                                </Card>
                             </Col>
                         </Row>
 
@@ -432,6 +510,7 @@ const NotificationDetailTab = () => {
                                 <Card
                                     hoverable
                                     bodyStyle={{ padding: '12px', textAlign: 'center' }}
+                                    onClick={() => setModalContent('user')}
                                 >
                                     <Space>
                                         <HistoryOutlined