yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update notification handling to prioritize active solutions and improve data extraction

Browse Source
This commit is contained in:
vinix
2025-12-18 17:57:25 +07:00
parent 6b75f6f4b9
commit 8cf21643ea
3 changed files with 61 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/notification/component/DetailNotification.jsx
View File

@@ -14,8 +14,9 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
// Get error code data from the nested structure
const errorCodeData = selectedData.error_code;
const solutionData = errorCodeData?.solution?.[0] || {};
const sparepartsData = errorCodeData?.spareparts || [];
// Get active solution (is_active: true) or first solution
const activeSolution = errorCodeData?.solution?.find(sol => sol.is_active) || errorCodeData?.solution?.[0] || {};
const sparepartsData = selectedData.spareparts || errorCodeData?.spareparts || [];
// Determine notification type based on is_read status
const getTypeFromStatus = () => {
@@ -137,7 +138,7 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
Solusi
</div>
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{solutionData?.solution_name || 'N/A'}
{activeSolution?.solution_name || 'N/A'}
</div>
</div>
</Col>

21
src/pages/notification/component/ListNotification.jsx
View File

@@ -47,28 +47,29 @@ const transformNotificationData = (apiData) => {
return apiData.map((item, index) => ({
id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical',
title: item.device_name || 'Unknown Device',
issue: item.error_code_name || 'Unknown Error',
description: `${item.error_code} - ${item.error_code_name}`,
title: item.error_code?.error_code_name || item.device_name || 'Unknown Error',
issue: item.error_code || item.error_code_name || 'Unknown Error',
description: `${item.error_code} - ${item.error_code_name || ''}`,
timestamp:
new Date(item.created_at).toLocaleString('id-ID', {
item.created_at ? new Date(item.created_at).toLocaleString('id-ID', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
}) + ' WIB',
location: item.device_location || 'Location not specified',
}) + ' WIB' : 'N/A',
location: item.plant_sub_section_name || item.device_location || 'Location not specified',
details: item.message_error_issue || 'No details available',
link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
subsection: item.solution_name || 'N/A',
subsection: item.plant_sub_section_name || 'N/A',
isRead: item.is_read,
status: item.is_read ? 'Resolved' : item.is_delivered ? 'Delivered' : 'Pending',
tag: item.error_code,
errorCode: item.error_code,
solutionName: item.solution_name,
typeSolution: item.type_solution,
pathSolution: item.path_solution,
solutionName: item.error_code?.solution?.[0]?.solution_name || 'N/A',
typeSolution: item.error_code?.solution?.[0]?.type_solution || 'N/A',
pathSolution: item.error_code?.solution?.[0]?.path_document || item.error_code?.solution?.[0]?.path_solution || 'N/A',
error_code: item.error_code,
}));
};

78
src/pages/notificationDetail/IndexNotificationDetail.jsx
View File

@@ -37,12 +37,13 @@ const { Text, Paragraph, Link } = Typography;
const transformNotificationData = (apiData) => {
// Extract nested data
const errorCodeData = apiData.error_code;
const solutionData = errorCodeData?.solution?.[0] || {};
// Get active solution (is_active: true)
const activeSolution = errorCodeData?.solution?.find(sol => sol.is_active) || errorCodeData?.solution?.[0] || {};
return {
id: `notification-${apiData.notification_error_id}-0`,
type: apiData.is_read ? 'resolved' : apiData.is_delivered ? 'warning' : 'critical',
title: errorCodeData?.error_code_name || 'Unknown Device',
title: errorCodeData?.error_code_name || 'Unknown Error',
issue: errorCodeData?.error_code || 'Unknown Error',
description: apiData.message_error_issue || 'No details available',
timestamp: apiData.created_at ? new Date(apiData.created_at).toLocaleString('id-ID', {
@@ -52,7 +53,7 @@ const transformNotificationData = (apiData) => {
hour: '2-digit',
minute: '2-digit',
}) + ' WIB' : 'N/A',
location: solutionData?.solution_name || 'Location not specified',
location: apiData.plant_sub_section_name || 'Location not specified',
details: apiData.message_error_issue || 'No details available',
isRead: apiData.is_read || false,
isDelivered: apiData.is_delivered || false,
@@ -62,9 +63,19 @@ const transformNotificationData = (apiData) => {
plc: 'N/A', // PLC not available in API response
notification_error_id: apiData.notification_error_id,
error_code_id: apiData.error_code_id,
error_chanel: apiData.error_chanel,
spareparts: errorCodeData?.spareparts || [],
solution: solutionData, // Include the solution data
solution: {
...activeSolution,
path_document: activeSolution.path_document ? activeSolution.path_document.replace('/detail-notification/pdf/', '/notification-detail/pdf/') : activeSolution.path_document
}, // Include the active solution data with fixed URL
error_code: errorCodeData,
device_info: {
device_code: apiData.device_code,
device_name: apiData.device_name,
device_location: apiData.device_location,
brand_name: apiData.brand_name
}
};
};
@@ -222,12 +233,6 @@ const NotificationDetailTab = () => {
<Text strong style={{ display: 'block', marginTop: '8px' }}>Time</Text>
<div>{notification.timestamp.split(' ')[1]} WIB</div>
</div>
<div style={{ border: '1px solid #d4380d', borderRadius: '4px', padding: '8px', background: 'linear-gradient(to right, #ffe7e6, #ffffff)' }}>
<Row justify="space-around" align="middle">
<Col><Text style={{ fontSize: '12px', color: color }}>Value</Text><div style={{ fontWeight: 'bold', fontSize: '16px', color: color }}>N/A</div></Col>
<Col><Text type="secondary" style={{ fontSize: '12px' }}>Treshold</Text><div style={{ fontWeight: 500 }}>N/A</div></Col>
</Row>
</div>
</Space>
</Card>
</Col>
@@ -236,9 +241,11 @@ const NotificationDetailTab = () => {
<Col xs={24} lg={8}>
<Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<div><Text strong>PLC</Text><div>{notification.plc || 'N/A'}</div></div>
<div><Text strong>Status</Text><div style={{ color: '#faad14', fontWeight: 500 }}>{notification.status}</div></div>
<div><Text strong>Tag</Text><div style={{ fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '4px', display: 'inline-block' }}>{notification.tag}</div></div>
<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>
@@ -259,28 +266,35 @@ const NotificationDetailTab = () => {
<Col xs={24} md={8}>
<Card size="small" title="Guideline Documents" style={{ height: '100%' }}>
<Space direction="vertical" size="small" style={{ width: '100%' }}>
{notification.solution && (
{notification.error_code?.solution && notification.error_code.solution.length > 0 ? (
<>
{notification.solution.path_document ? (
<Card size="small" bodyStyle={{ padding: '8px 12px' }} hoverable extra={<Text type="secondary" style={{ fontSize: '10px' }}>PDF</Text>}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
<Text style={{ fontSize: '12px', color: '#262626' }}><FilePdfOutlined style={{ marginRight: '8px' }} /> {notification.solution.file_upload_name || 'Solution Document.pdf'}</Text>
<Link href={notification.solution.path_document} target="_blank" style={{ fontSize: '12px', display: 'block' }}>lihat disini</Link>
</div>
{notification.error_code.solution
.filter(sol => sol.is_active) // Hanya tampilkan solusi yang aktif
.map((sol, index) => (
<div key={sol.brand_code_solution_id || index}>
{sol.path_document ? (
<Card size="small" bodyStyle={{ padding: '8px 12px' }} hoverable extra={<Text type="secondary" style={{ fontSize: '10px' }}>PDF</Text>}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
<Text style={{ fontSize: '12px', color: '#262626' }}><FilePdfOutlined style={{ marginRight: '8px' }} /> {sol.file_upload_name || 'Solution Document.pdf'}</Text>
<Link href={sol.path_document.replace('/detail-notification/pdf/', '/notification-detail/pdf/')} target="_blank" style={{ fontSize: '12px', display: 'block' }}>lihat disini</Link>
</div>
</div>
</Card>
) : null}
{sol.type_solution === 'text' && sol.text_solution ? (
<Card size="small" bodyStyle={{ padding: '8px 12px' }} extra={<Text type="secondary" style={{ fontSize: '10px' }}>{sol.type_solution.toUpperCase()}</Text>}>
<div>
<Text strong>{sol.solution_name}:</Text>
<div style={{ marginTop: '4px' }}>{sol.text_solution}</div>
</div>
</Card>
) : null}
</div>
</Card>
) : null}
{notification.solution.type_solution === 'text' && notification.solution.text_solution ? (
<Card size="small" bodyStyle={{ padding: '8px 12px' }} extra={<Text type="secondary" style={{ fontSize: '10px' }}>{notification.solution.type_solution.toUpperCase()}</Text>}>
<Paragraph style={{ fontSize: '12px', margin: 0 }}>
<Text strong>{notification.issue}:</Text> {notification.solution.text_solution}
</Paragraph>
</Card>
) : null}
))
}
</>
)}
{!notification.solution && (
) : (
<div style={{ textAlign: 'center', padding: '20px', color: '#8c8c8c' }}>
Tidak ada dokumen solusi tersedia
</div>