diff --git a/src/api/notification.jsx b/src/api/notification.jsx
index fe38523..431358f 100644
--- a/src/api/notification.jsx
+++ b/src/api/notification.jsx
@@ -18,4 +18,13 @@ const getNotificationById = async (id) => {
return response.data;
};
-export { getAllNotification, getNotificationById };
+const getNotificationDetail = async (id) => {
+ const response = await SendRequest({
+ method: 'get',
+ prefix: `notification/${id}`,
+ });
+
+ return response.data;
+};
+
+export { getAllNotification, getNotificationById, getNotificationDetail };
diff --git a/src/pages/detailNotification/IndexDetailNotification.jsx b/src/pages/detailNotification/IndexDetailNotification.jsx
index c842ce8..128c554 100644
--- a/src/pages/detailNotification/IndexDetailNotification.jsx
+++ b/src/pages/detailNotification/IndexDetailNotification.jsx
@@ -26,38 +26,46 @@ import {
PlusOutlined,
UserOutlined,
} from '@ant-design/icons';
-// Path disesuaikan karena lokasi file berubah
-// import { getNotificationById } from '../../api/notification'; // Dihapus karena belum ada di file API
+import { getNotificationDetail } from '../../api/notification';
import UserHistoryModal from '../notification/component/UserHistoryModal';
-import LogHistoryCard from '../notification/component/LogHistoryCard'; // Ganti LogHistoryModal dengan LogHistoryCard
+import LogHistoryCard from '../notification/component/LogHistoryCard';
const { Content } = Layout;
const { Text, Paragraph, Link } = Typography;
-// Menggunakan kembali fungsi transform dari ListNotification untuk konsistensi data
-const transformNotificationData = (item) => ({
- id: `notification-${item.notification_error_id || 'dummy'}-0`,
- 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}`,
- timestamp: new Date(item.created_at || Date.now()).toLocaleString('id-ID'),
- location: item.device_location || 'Location not specified',
- details: item.message_error_issue || 'No details available',
- link: '#',
- subsection: item.solution_name || 'N/A',
- isRead: item.is_read || false,
- status: item.is_read ? 'Resolved' : item.is_delivered ? 'Delivered' : 'Pending',
- tag: item.error_code,
- plc: item.plc || 'N/A',
-});
+// Transform API response to component format
+const transformNotificationData = (apiData) => {
+ // Extract nested data
+ const errorCodeData = apiData.error_code;
+ const solutionData = errorCodeData?.solution?.[0] || {};
-const getDummyNotificationById = (id) => {
- console.log("Fetching dummy data for ID:", id);
- // Data mentah dummy, seolah-olah dari API
- const rawDummyData = { device_name: 'Compressor C-101', error_code_name: 'High Temperature', error_code: 'TEMP-H-303', device_location: 'Gudang Produksi A', message_error_issue: 'Suhu kompresor terdeteksi melebihi ambang batas aman.', is_delivered: true, plc: 'PLC-UTL-01' };
- // Mengolah data mentah dummy menggunakan transform function
- return transformNotificationData(rawDummyData);
+ 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',
+ 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', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ }) + ' WIB' : 'N/A',
+ location: solutionData?.solution_name || 'Location not specified',
+ details: apiData.message_error_issue || 'No details available',
+ isRead: apiData.is_read || false,
+ isDelivered: apiData.is_delivered || false,
+ isSend: apiData.is_send || false,
+ status: apiData.is_read ? 'Resolved' : apiData.is_delivered ? 'Delivered' : 'Pending',
+ tag: errorCodeData?.error_code,
+ plc: 'N/A', // PLC not available in API response
+ notification_error_id: apiData.notification_error_id,
+ error_code_id: apiData.error_code_id,
+ spareparts: errorCodeData?.spareparts || [],
+ solution: solutionData, // Include the solution data
+ error_code: errorCodeData,
+ };
};
const getIconAndColor = (type) => {
@@ -116,20 +124,20 @@ const DetailNotificationTab = () => {
const fetchDetail = async () => {
try {
setLoading(true);
- // Ganti dengan fungsi API asli Anda
- // const response = await getNotificationById(notificationId);
- // setNotification(response.data);
-
- // Menggunakan data dummy untuk sekarang
- const dummyData = getDummyNotificationById(notificationId);
- if (dummyData) {
- setNotification(dummyData);
+
+ // Fetch using the actual API
+ const response = await getNotificationDetail(notificationId);
+
+ if (response && response.data) {
+ const transformedData = transformNotificationData(response.data);
+ setNotification(transformedData);
} else {
throw new Error('Notification not found');
}
} catch (err) {
setError(err.message);
+ console.error('Error fetching notification detail:', err);
} finally {
setLoading(false);
}
@@ -210,9 +218,9 @@ const DetailNotificationTab = () => {
Plant Subsection
-
{notification.subsection}
+
{notification.location}
Time
-
{notification.timestamp}
+
{notification.timestamp.split(' ')[1]} WIB
@@ -240,7 +248,7 @@ const DetailNotificationTab = () => {
-
+
Handling Guideline Spare Part
-
-
-
-
+ {notification.solution && (
+ <>
+ {notification.solution.path_document ? (
+ PDF}>
+
+
+
+
+ ) : null}
+ {notification.solution.type_solution === 'text' && notification.solution.text_solution ? (
+ {notification.solution.type_solution.toUpperCase()}}>
+
+ {notification.issue}: {notification.solution.text_solution}
+
+
+ ) : null}
+
+ )}
+ {!notification.solution && (
+
+ Tidak ada dokumen solusi tersedia
+
+ )}
-
-
-
-
- Available
-
- Air Filter
- Filters incoming air to remove dust.
-
-
-
+ {notification.spareparts && notification.spareparts.length > 0 ? (
+ notification.spareparts.map((sparepart, index) => (
+
+
+
+
+
+ {sparepart.sparepart_stok}
+
+
+
+ {sparepart.sparepart_name}
+
+ {sparepart.sparepart_description || 'Deskripsi tidak tersedia'}
+
+
+ Kode: {sparepart.sparepart_code} | Qty: {sparepart.sparepart_qty} | Unit: {sparepart.sparepart_unit}
+
+
+
+
+
+ ))
+ ) : (
+
+ Tidak ada spare parts terkait
+
+ )}
diff --git a/src/pages/notification/component/DetailNotification.jsx b/src/pages/notification/component/DetailNotification.jsx
index 54bad25..d86ff09 100644
--- a/src/pages/notification/component/DetailNotification.jsx
+++ b/src/pages/notification/component/DetailNotification.jsx
@@ -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 (
- {selectedData.type.toUpperCase()}
+ {notificationType.toUpperCase()}
- {selectedData.title}
+ {errorCodeData?.error_code_name || 'N/A'}
@@ -93,18 +111,20 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
- PLC
+ Kode Error
- {selectedData.plc}
+ {errorCodeData?.error_code || 'N/A'}
-
Tag
+
+ ID Notifikasi
+
- {selectedData.tag}
+ {selectedData.notification_error_id || 'N/A'}
- Engineer
+ Solusi
- {selectedData.engineer}
+ {solutionData?.solution_name || 'N/A'}
- Waktu
+ Waktu Dibuat
- {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'}
- {/* Status */}
-
-
Status
-
- {selectedData.isRead ? 'Sudah Dibaca' : 'Belum Dibaca'}
-
-
+
+
+ Status Kirim
+
+
+ {selectedData.is_send ? 'Terkirim' : 'Belum Terkirim'}
+
+
+
+ Status Terkirim
+
+
+ {selectedData.is_delivered ? 'Terkirim' : 'Belum Terkirim'}
+
+
+
+ Status Baca
+
+
+ {selectedData.is_read ? 'Dibaca' : 'Belum Dibaca'}
+
+
- {/* Additional Info */}
-
-
-
Catatan: Notifikasi ini telah dikirim ke engineer yang bersangkutan
- untuk ditindaklanjuti sesuai dengan prosedur yang berlaku.
+ {/* Description */}
+
+
+ Deskripsi Error
+
+
+ {selectedData.message_error_issue || 'N/A'}
+
+ {/* Spareparts Information */}
+ {sparepartsData.length > 0 && (
+
+
+ Spareparts Terkait
+
+ {sparepartsData.map((sparepart, index) => (
+
+
+ {sparepart.sparepart_name}
+
+
+ Kode: {sparepart.sparepart_code} | Stok:{' '}
+ {sparepart.sparepart_stok}
+
+
+ ))}
+
+ )}
);