feat: add getNotificationDetail API function and integrate it into DetailNotification component for enhanced notification handling
This commit is contained in:
@@ -1,12 +1,29 @@
|
||||
import React, { memo } from 'react';
|
||||
import { Row, Col, Tag, Card, Button } from 'antd';
|
||||
import { CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons';
|
||||
import {
|
||||
CloseCircleFilled,
|
||||
WarningFilled,
|
||||
CheckCircleFilled,
|
||||
InfoCircleFilled,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const DetailNotification = memo(function DetailNotification({ selectedData, onClose }) {
|
||||
if (!selectedData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get error code data from the nested structure
|
||||
const errorCodeData = selectedData.error_code;
|
||||
const solutionData = errorCodeData?.solution?.[0] || {};
|
||||
const sparepartsData = errorCodeData?.spareparts || [];
|
||||
|
||||
// Determine notification type based on is_read status
|
||||
const getTypeFromStatus = () => {
|
||||
if (selectedData.is_read === false) return 'critical'; // Not read yet
|
||||
if (selectedData.is_delivered === false) return 'warning'; // Not delivered
|
||||
return 'resolved'; // Read and delivered
|
||||
};
|
||||
|
||||
const getIconAndColor = (type) => {
|
||||
switch (type) {
|
||||
case 'critical':
|
||||
@@ -40,7 +57,8 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
|
||||
}
|
||||
};
|
||||
|
||||
const { IconComponent, color, bgColor, tagColor } = getIconAndColor(selectedData.type);
|
||||
const notificationType = getTypeFromStatus();
|
||||
const { IconComponent, color, bgColor, tagColor } = getIconAndColor(notificationType);
|
||||
|
||||
return (
|
||||
<Card
|
||||
@@ -80,10 +98,10 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<Tag color={tagColor} style={{ marginBottom: '2px', fontSize: '11px' }}>
|
||||
{selectedData.type.toUpperCase()}
|
||||
{notificationType.toUpperCase()}
|
||||
</Tag>
|
||||
<div style={{ fontSize: '14px', fontWeight: 600, color: '#262626' }}>
|
||||
{selectedData.title}
|
||||
{errorCodeData?.error_code_name || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,18 +111,20 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '2px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
||||
PLC
|
||||
Kode Error
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
|
||||
{selectedData.plc}
|
||||
{errorCodeData?.error_code || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '2px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>Tag</div>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
||||
ID Notifikasi
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
|
||||
{selectedData.tag}
|
||||
{selectedData.notification_error_id || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
@@ -114,48 +134,115 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '2px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
||||
Engineer
|
||||
Solusi
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
|
||||
{selectedData.engineer}
|
||||
{solutionData?.solution_name || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '2px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
||||
Waktu
|
||||
Waktu Dibuat
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
|
||||
{selectedData.time}
|
||||
{selectedData.created_at
|
||||
? new Date(selectedData.created_at).toLocaleString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}) + ' WIB'
|
||||
: 'N/A'}
|
||||
</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>
|
||||
{/* Status Information */}
|
||||
<Row gutter={[16, 0]}>
|
||||
<Col span={8}>
|
||||
<div style={{ marginBottom: '2px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
||||
Status Kirim
|
||||
</div>
|
||||
<Tag color={selectedData.is_send ? 'success' : 'error'}>
|
||||
{selectedData.is_send ? 'Terkirim' : 'Belum Terkirim'}
|
||||
</Tag>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ marginBottom: '2px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
||||
Status Terkirim
|
||||
</div>
|
||||
<Tag color={selectedData.is_delivered ? 'success' : 'warning'}>
|
||||
{selectedData.is_delivered ? 'Terkirim' : 'Belum Terkirim'}
|
||||
</Tag>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ marginBottom: '2px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
|
||||
Status Baca
|
||||
</div>
|
||||
<Tag color={selectedData.is_read ? 'success' : 'processing'}>
|
||||
{selectedData.is_read ? 'Dibaca' : 'Belum Dibaca'}
|
||||
</Tag>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 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.
|
||||
{/* Description */}
|
||||
<div style={{ marginTop: '16px', marginBottom: '8px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '4px' }}>
|
||||
Deskripsi Error
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
color: '#262626',
|
||||
fontWeight: 500,
|
||||
padding: '8px',
|
||||
backgroundColor: '#fafafa',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #f0f0f0',
|
||||
}}
|
||||
>
|
||||
{selectedData.message_error_issue || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spareparts Information */}
|
||||
{sparepartsData.length > 0 && (
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '4px' }}>
|
||||
Spareparts Terkait
|
||||
</div>
|
||||
{sparepartsData.map((sparepart, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
padding: '8px',
|
||||
marginBottom: '4px',
|
||||
backgroundColor: '#fafafa',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #f0f0f0',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontWeight: 600, marginBottom: '4px' }}>
|
||||
{sparepart.sparepart_name}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px' }}>
|
||||
Kode: {sparepart.sparepart_code} | Stok:{' '}
|
||||
{sparepart.sparepart_stok}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user