Add detailed rendering for non-reminder notifications in NotificationDetailTab, including error information and device details. Introduced new properties for reminders in notification data transformation. #49
@@ -102,6 +102,8 @@ const transformNotificationData = (apiData) => {
|
|||||||
brand_name: apiData.brand_name,
|
brand_name: apiData.brand_name,
|
||||||
},
|
},
|
||||||
users: apiData.users || [],
|
users: apiData.users || [],
|
||||||
|
is_reminder: apiData.is_reminder || false,
|
||||||
|
spareparts_reminder: apiData.spareparts_reminder || [],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -362,6 +364,104 @@ const NotificationDetailTab = (props) => {
|
|||||||
<Row gutter={[8, 8]}>
|
<Row gutter={[8, 8]}>
|
||||||
{/* Kolom Kiri: Data Kompresor */}
|
{/* Kolom Kiri: Data Kompresor */}
|
||||||
|
|
||||||
|
{notification.is_reminder == false && (
|
||||||
|
<Col xs={24} lg={8}>
|
||||||
|
<Card
|
||||||
|
size="small"
|
||||||
|
style={{ height: '100%', borderColor: '#d4380d' }}
|
||||||
|
bodyStyle={{ padding: '16px' }}
|
||||||
|
>
|
||||||
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size="large"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
<Row gutter={16} align="middle">
|
||||||
|
<Col>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '32px',
|
||||||
|
height: '32px',
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: '#d4380d',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: '18px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseOutlined />
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Text>{notification.title}</Text>
|
||||||
|
<div style={{ marginTop: '2px' }}>
|
||||||
|
<Text strong style={{ fontSize: '16px' }}>
|
||||||
|
Error Code {notification.issue}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<div>
|
||||||
|
<Text strong>Plant Subsection</Text>
|
||||||
|
<div>{notification.location}</div>
|
||||||
|
<Text
|
||||||
|
strong
|
||||||
|
style={{ display: 'block', marginTop: '8px' }}
|
||||||
|
>
|
||||||
|
Date & Time
|
||||||
|
</Text>
|
||||||
|
<div>{notification.timestamp}</div>
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
)}
|
||||||
|
{/* Kolom Tengah: Informasi Teknis */}
|
||||||
|
<Col xs={24} lg={8}>
|
||||||
|
<Card
|
||||||
|
title="Device Information"
|
||||||
|
size="small"
|
||||||
|
style={{ height: '100%' }}
|
||||||
|
>
|
||||||
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size="middle"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Text strong>Error Channel</Text>
|
||||||
|
<div>{notification.error_chanel || 'N/A'}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Device Code</Text>
|
||||||
|
<div>
|
||||||
|
{notification.device_info?.device_code || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Device Name</Text>
|
||||||
|
<div>
|
||||||
|
{notification.device_info?.device_name || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Device Location</Text>
|
||||||
|
<div>
|
||||||
|
{notification.device_info?.device_location || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Brand</Text>
|
||||||
|
<div>
|
||||||
|
{notification.device_info?.brand_name || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
{notification.is_reminder == true && (
|
{notification.is_reminder == true && (
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<div>
|
<div>
|
||||||
@@ -515,104 +615,6 @@ const NotificationDetailTab = (props) => {
|
|||||||
</Col>
|
</Col>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{notification.is_reminder == false && (
|
|
||||||
<Col xs={24} lg={8}>
|
|
||||||
<Card
|
|
||||||
size="small"
|
|
||||||
style={{ height: '100%', borderColor: '#d4380d' }}
|
|
||||||
bodyStyle={{ padding: '16px' }}
|
|
||||||
>
|
|
||||||
<Space
|
|
||||||
direction="vertical"
|
|
||||||
size="large"
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
>
|
|
||||||
<Row gutter={16} align="middle">
|
|
||||||
<Col>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '32px',
|
|
||||||
height: '32px',
|
|
||||||
borderRadius: '50%',
|
|
||||||
backgroundColor: '#d4380d',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
color: '#ffffff',
|
|
||||||
fontSize: '18px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CloseOutlined />
|
|
||||||
</div>
|
|
||||||
</Col>
|
|
||||||
<Col>
|
|
||||||
<Text>{notification.title}</Text>
|
|
||||||
<div style={{ marginTop: '2px' }}>
|
|
||||||
<Text strong style={{ fontSize: '16px' }}>
|
|
||||||
Error Code {notification.issue}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<div>
|
|
||||||
<Text strong>Plant Subsection</Text>
|
|
||||||
<div>{notification.location}</div>
|
|
||||||
<Text
|
|
||||||
strong
|
|
||||||
style={{ display: 'block', marginTop: '8px' }}
|
|
||||||
>
|
|
||||||
Date & Time
|
|
||||||
</Text>
|
|
||||||
<div>{notification.timestamp}</div>
|
|
||||||
</div>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
)}
|
|
||||||
{/* Kolom Tengah: Informasi Teknis */}
|
|
||||||
<Col xs={24} lg={8}>
|
|
||||||
<Card
|
|
||||||
title="Device Information"
|
|
||||||
size="small"
|
|
||||||
style={{ height: '100%' }}
|
|
||||||
>
|
|
||||||
<Space
|
|
||||||
direction="vertical"
|
|
||||||
size="middle"
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Text strong>Error Channel</Text>
|
|
||||||
<div>{notification.error_chanel || 'N/A'}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong>Device Code</Text>
|
|
||||||
<div>
|
|
||||||
{notification.device_info?.device_code || 'N/A'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong>Device Name</Text>
|
|
||||||
<div>
|
|
||||||
{notification.device_info?.device_name || 'N/A'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong>Device Location</Text>
|
|
||||||
<div>
|
|
||||||
{notification.device_info?.device_location || 'N/A'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong>Brand</Text>
|
|
||||||
<div>
|
|
||||||
{notification.device_info?.brand_name || 'N/A'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
{/* Kolom Kanan: User History */}
|
{/* Kolom Kanan: User History */}
|
||||||
<Col xs={24} lg={8}>
|
<Col xs={24} lg={8}>
|
||||||
<Card title="User History" size="small" style={{ height: '100%' }}>
|
<Card title="User History" size="small" style={{ height: '100%' }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user