Update DetailDevice component to set 'listen_channel' to null and modify NotificationDetailTab to enhance the display of spare part reminders and update the title from 'Error Notification Detail' to 'Notification Detail'.
This commit is contained in:
@@ -36,7 +36,7 @@ const DetailDevice = (props) => {
|
|||||||
device_description: '',
|
device_description: '',
|
||||||
ip_address: '',
|
ip_address: '',
|
||||||
reminder_at: null,
|
reminder_at: null,
|
||||||
listen_channel: '',
|
listen_channel: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
const [formData, setFormData] = useState(defaultData);
|
const [formData, setFormData] = useState(defaultData);
|
||||||
|
|||||||
@@ -353,7 +353,7 @@ const NotificationDetailTab = (props) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
|
<Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
|
||||||
Error Notification Detail
|
Notification Detail
|
||||||
</Typography.Title>
|
</Typography.Title>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -361,6 +361,161 @@ const NotificationDetailTab = (props) => {
|
|||||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||||
<Row gutter={[8, 8]}>
|
<Row gutter={[8, 8]}>
|
||||||
{/* Kolom Kiri: Data Kompresor */}
|
{/* Kolom Kiri: Data Kompresor */}
|
||||||
|
|
||||||
|
{notification.is_reminder && (
|
||||||
|
<Col xs={24} md={8}>
|
||||||
|
<div>
|
||||||
|
<Card hoverable bodyStyle={{ padding: '12px' }}>
|
||||||
|
<Space>
|
||||||
|
<ToolOutlined
|
||||||
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
strong
|
||||||
|
style={{ fontSize: '16px', color: '#262626' }}
|
||||||
|
>
|
||||||
|
Spare Part Reminder Maintenance
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size="small"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
{notification.spareparts_reminder &&
|
||||||
|
notification.spareparts_reminder.length > 0 ? (
|
||||||
|
notification.spareparts_reminder.map(
|
||||||
|
(sparepart, index) => (
|
||||||
|
<Card
|
||||||
|
size="small"
|
||||||
|
key={index}
|
||||||
|
bodyStyle={{ padding: '12px' }}
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
|
<Row gutter={16} align="top">
|
||||||
|
<Col
|
||||||
|
span={7}
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '60px',
|
||||||
|
backgroundColor:
|
||||||
|
'#f0f0f0',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems:
|
||||||
|
'center',
|
||||||
|
justifyContent:
|
||||||
|
'center',
|
||||||
|
borderRadius: '4px',
|
||||||
|
marginBottom: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ToolOutlined
|
||||||
|
style={{
|
||||||
|
fontSize:
|
||||||
|
'24px',
|
||||||
|
color: '#bfbfbf',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: '12px',
|
||||||
|
color:
|
||||||
|
sparepart.sparepart_stok ===
|
||||||
|
'Available' ||
|
||||||
|
sparepart.sparepart_stok ===
|
||||||
|
'available'
|
||||||
|
? '#52c41a'
|
||||||
|
: '#ff4d4f',
|
||||||
|
fontWeight: 500,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
sparepart.sparepart_stok
|
||||||
|
}
|
||||||
|
</Text>
|
||||||
|
</Col>
|
||||||
|
<Col span={17}>
|
||||||
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size={4}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text strong>
|
||||||
|
{
|
||||||
|
sparepart.sparepart_name
|
||||||
|
}
|
||||||
|
</Text>
|
||||||
|
<Paragraph
|
||||||
|
style={{
|
||||||
|
fontSize:
|
||||||
|
'12px',
|
||||||
|
margin: 0,
|
||||||
|
color: '#595959',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sparepart.sparepart_description ||
|
||||||
|
'Deskripsi tidak tersedia'}
|
||||||
|
</Paragraph>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid #d9d9d9',
|
||||||
|
borderRadius:
|
||||||
|
'4px',
|
||||||
|
padding:
|
||||||
|
'4px 8px',
|
||||||
|
fontSize:
|
||||||
|
'11px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
marginTop:
|
||||||
|
'8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Kode:{' '}
|
||||||
|
{
|
||||||
|
sparepart.sparepart_code
|
||||||
|
}{' '}
|
||||||
|
| Qty:{' '}
|
||||||
|
{
|
||||||
|
sparepart.sparepart_qty
|
||||||
|
}{' '}
|
||||||
|
| Unit:{' '}
|
||||||
|
{
|
||||||
|
sparepart.sparepart_unit
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '20px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tidak ada spare parts terkait
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!notification.is_reminder && (
|
||||||
<Col xs={24} lg={8}>
|
<Col xs={24} lg={8}>
|
||||||
<Card
|
<Card
|
||||||
size="small"
|
size="small"
|
||||||
@@ -413,7 +568,7 @@ const NotificationDetailTab = (props) => {
|
|||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
)}
|
||||||
{/* Kolom Tengah: Informasi Teknis */}
|
{/* Kolom Tengah: Informasi Teknis */}
|
||||||
<Col xs={24} lg={8}>
|
<Col xs={24} lg={8}>
|
||||||
<Card
|
<Card
|
||||||
@@ -545,10 +700,7 @@ const NotificationDetailTab = (props) => {
|
|||||||
<Row gutter={[8, 8]}>
|
<Row gutter={[8, 8]}>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<div>
|
<div>
|
||||||
<Card
|
<Card hoverable bodyStyle={{ padding: '12px' }}>
|
||||||
hoverable
|
|
||||||
bodyStyle={{ padding: '12px'}}
|
|
||||||
>
|
|
||||||
<Space>
|
<Space>
|
||||||
<BookOutlined
|
<BookOutlined
|
||||||
style={{ fontSize: '16px', color: '#1890ff' }}
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
@@ -700,10 +852,7 @@ const NotificationDetailTab = (props) => {
|
|||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<div>
|
<div>
|
||||||
<Card
|
<Card hoverable bodyStyle={{ padding: '12px' }}>
|
||||||
hoverable
|
|
||||||
bodyStyle={{ padding: '12px'}}
|
|
||||||
>
|
|
||||||
<Space>
|
<Space>
|
||||||
<ToolOutlined
|
<ToolOutlined
|
||||||
style={{ fontSize: '16px', color: '#1890ff' }}
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
|
|||||||
Reference in New Issue
Block a user