165 lines
6.5 KiB
JavaScript
165 lines
6.5 KiB
JavaScript
import React, { memo } from 'react';
|
|
import { Row, Col, Tag, Card, Button } from 'antd';
|
|
import { CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons';
|
|
|
|
const DetailNotification = memo(function DetailNotification({ selectedData, onClose }) {
|
|
if (!selectedData) {
|
|
return null;
|
|
}
|
|
|
|
const getIconAndColor = (type) => {
|
|
switch (type) {
|
|
case 'critical':
|
|
return {
|
|
IconComponent: CloseCircleFilled,
|
|
color: '#ff4d4f',
|
|
bgColor: '#fff1f0',
|
|
tagColor: 'error',
|
|
};
|
|
case 'warning':
|
|
return {
|
|
IconComponent: WarningFilled,
|
|
color: '#faad14',
|
|
bgColor: '#fffbe6',
|
|
tagColor: 'warning',
|
|
};
|
|
case 'resolved':
|
|
return {
|
|
IconComponent: CheckCircleFilled,
|
|
color: '#52c41a',
|
|
bgColor: '#f6ffed',
|
|
tagColor: 'success',
|
|
};
|
|
default:
|
|
return {
|
|
IconComponent: InfoCircleFilled,
|
|
color: '#1890ff',
|
|
bgColor: '#e6f7ff',
|
|
tagColor: 'processing',
|
|
};
|
|
}
|
|
};
|
|
|
|
const { IconComponent, color, bgColor, tagColor } = getIconAndColor(selectedData.type);
|
|
|
|
return (
|
|
<Card
|
|
title="Detail Notifikasi"
|
|
extra={<Button onClick={onClose}>Tutup</Button>}
|
|
style={{ height: '100%' }}
|
|
bodyStyle={{ padding: '0 24px' }}
|
|
>
|
|
<div>
|
|
{/* Header with Icon and Status */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
marginBottom: '0',
|
|
padding: '2px 0',
|
|
backgroundColor: '#fafafa',
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '32px',
|
|
height: '32px',
|
|
borderRadius: '50%',
|
|
backgroundColor: bgColor,
|
|
color: color,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '18px',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{IconComponent && <IconComponent style={{ fontSize: '18px' }} />}
|
|
</div>
|
|
<div style={{ flex: 1 }}>
|
|
<Tag color={tagColor} style={{ marginBottom: '2px', fontSize: '11px' }}>
|
|
{selectedData.type.toUpperCase()}
|
|
</Tag>
|
|
<div style={{ fontSize: '14px', fontWeight: 600, color: '#262626' }}>
|
|
{selectedData.title}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Information Grid */}
|
|
<Row gutter={[16, 0]}>
|
|
<Col span={12}>
|
|
<div style={{ marginBottom: '2px' }}>
|
|
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
|
PLC
|
|
</div>
|
|
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
|
|
{selectedData.plc}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
<Col span={12}>
|
|
<div style={{ marginBottom: '2px' }}>
|
|
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>Tag</div>
|
|
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
|
|
{selectedData.tag}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row gutter={[16, 0]}>
|
|
<Col span={12}>
|
|
<div style={{ marginBottom: '2px' }}>
|
|
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
|
Engineer
|
|
</div>
|
|
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
|
|
{selectedData.engineer}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
<Col span={12}>
|
|
<div style={{ marginBottom: '2px' }}>
|
|
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
|
Waktu
|
|
</div>
|
|
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
|
|
{selectedData.time}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
|
|
{/* Status */}
|
|
<div style={{ marginBottom: '2px' }}>
|
|
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '2px' }}>Status</div>
|
|
<Tag color={selectedData.isRead ? 'default' : 'blue'}>
|
|
{selectedData.isRead ? 'Sudah Dibaca' : 'Belum Dibaca'}
|
|
</Tag>
|
|
</div>
|
|
|
|
{/* Additional Info */}
|
|
<div
|
|
style={{
|
|
marginTop: '0',
|
|
padding: '4px',
|
|
backgroundColor: '#f6f9ff',
|
|
borderRadius: '6px',
|
|
border: '1px solid #d6e4ff',
|
|
}}
|
|
>
|
|
<div style={{ fontSize: '11px', color: '#595959' }}>
|
|
<strong>Catatan:</strong> Notifikasi ini telah dikirim ke engineer yang bersangkutan
|
|
untuk ditindaklanjuti sesuai dengan prosedur yang berlaku.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
});
|
|
|
|
export default DetailNotification;
|