feat: update notification data transformation and enhance user history display
This commit is contained in:
@@ -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={{
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user