Merge pull request 'fix-lav-notification' (#31) from fix-lav-notification into lavoce
Reviewed-on: #31
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user