yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update notification data transformation and enhance user history display

Browse Source
This commit is contained in:
Rafiafrzl
2025-12-22 20:49:48 +07:00
parent 4508738958
commit 978e020305
2 changed files with 96 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/notification/component/ListNotification.jsx
View File

@@ -47,7 +47,7 @@ const transformNotificationData = (apiData) => {
return apiData.map((item, index) => ({ return apiData.map((item, index) => ({
id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical', 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', issue: item.error_code || item.error_code_name || 'Unknown Error',
description: `${item.error_code} - ${item.error_code_name || ''}`, description: `${item.error_code} - ${item.error_code_name || ''}`,
timestamp: item.created_at timestamp: item.created_at
@@ -324,7 +324,6 @@ const ListNotification = memo(function ListNotification(props) {
borderColor: notification.isRead ? '#f0f0f0' : '#d6e4ff', borderColor: notification.isRead ? '#f0f0f0' : '#d6e4ff',
cursor: 'pointer', cursor: 'pointer',
}} }}
onClick={() => handleMarkAsRead(notification.id)}
> >
<div <div
style={{ style={{

111
src/pages/notificationDetail/IndexNotificationDetail.jsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; 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 { import {
ArrowLeftOutlined, ArrowLeftOutlined,
CloseCircleFilled, CloseCircleFilled,
@@ -15,10 +15,13 @@ import {
PlusOutlined, PlusOutlined,
UserOutlined, UserOutlined,
LoadingOutlined, LoadingOutlined,
PhoneOutlined,
CheckCircleOutlined,
SyncOutlined,
SendOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { getNotificationDetail, createNotificationLog, getNotificationLogByNotificationId } from '../../api/notification'; import { getNotificationDetail, createNotificationLog, getNotificationLogByNotificationId } from '../../api/notification';
import UserHistoryModal from '../notification/component/UserHistoryModal'; import UserHistoryModal from '../notification/component/UserHistoryModal';
import LogHistoryCard from '../notification/component/LogHistoryCard';
const { Content } = Layout; const { Content } = Layout;
const { Text, Paragraph, Link } = Typography; 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) => { const getIconAndColor = (type) => {
switch (type) { switch (type) {
case 'critical': case 'critical':
@@ -262,14 +309,6 @@ const NotificationDetailTab = () => {
Back to notification list Back to notification list
</Button> </Button>
</Col> </Col>
<Col>
<Button
icon={<UserOutlined />}
onClick={() => setModalContent('user')}
>
User History
</Button>
</Col>
</Row> </Row>
<div <div
style={{ style={{
@@ -387,13 +426,52 @@ const NotificationDetailTab = () => {
</Card> </Card>
</Col> </Col>
{/* Kolom Kanan: Log History */} {/* Kolom Kanan: User History */}
<Col xs={24} lg={8}> <Col xs={24} lg={8}>
<LogHistoryCard <Card
notificationData={notification} title="User History"
logData={logHistoryData} size="small"
loading={logLoading} 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> </Col>
</Row> </Row>
@@ -432,6 +510,7 @@ const NotificationDetailTab = () => {
<Card <Card
hoverable hoverable
bodyStyle={{ padding: '12px', textAlign: 'center' }} bodyStyle={{ padding: '12px', textAlign: 'center' }}
onClick={() => setModalContent('user')}
> >
<Space> <Space>
<HistoryOutlined <HistoryOutlined