From 450873895882c9af7f6ac1b67e8cd558c50020dd Mon Sep 17 00:00:00 2001 From: Rafiafrzl Date: Mon, 22 Dec 2025 18:47:42 +0700 Subject: [PATCH] feat: implement log history fetching and display in ListNotification component --- .../component/ListNotification.jsx | 717 ++++++++++-------- 1 file changed, 387 insertions(+), 330 deletions(-) diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx index 3fc11c8..96cba0f 100644 --- a/src/pages/notification/component/ListNotification.jsx +++ b/src/pages/notification/component/ListNotification.jsx @@ -38,7 +38,7 @@ import { SearchOutlined, } from '@ant-design/icons'; import { useNavigate, Link as RouterLink } from 'react-router-dom'; -import { getAllNotification } from '../../../api/notification'; +import { getAllNotification, getNotificationLogByNotificationId } from '../../../api/notification'; const { Text, Paragraph, Link: AntdLink } = Typography; @@ -47,17 +47,18 @@ 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.error_code?.error_code_name || item.device_name || 'Unknown Error', + title: item.device_name || 'Unknown Device', issue: item.error_code || item.error_code_name || 'Unknown Error', description: `${item.error_code} - ${item.error_code_name || ''}`, - timestamp: - 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' : 'N/A', + timestamp: 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' + : '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 @@ -68,7 +69,10 @@ const transformNotificationData = (apiData) => { errorCode: item.error_code, 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', + pathSolution: + item.error_code?.solution?.[0]?.path_document || + item.error_code?.solution?.[0]?.path_solution || + 'N/A', error_code: item.error_code, })); }; @@ -98,37 +102,6 @@ const userHistoryData = [ }, ]; -// Dummy data untuk log history -const logHistoryData = [ - { - id: 1, - timestamp: '04-11-2025 11:55 WIB', - addedBy: { - name: 'Budi Santoso', - phone: '081122334455', - }, - description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.', - }, - { - id: 2, - timestamp: '04-11-2025 11:45 WIB', - addedBy: { - name: 'John Doe', - phone: '081234567890', - }, - description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.', - }, - { - id: 3, - timestamp: '04-11-2025 11:40 WIB', - addedBy: { - name: 'Jane Smith', - phone: '087654321098', - }, - description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.', - }, -]; - const ListNotification = memo(function ListNotification(props) { const [notifications, setNotifications] = useState([]); const [activeTab, setActiveTab] = useState('all'); @@ -138,6 +111,8 @@ const ListNotification = memo(function ListNotification(props) { const [modalContent, setModalContent] = useState(null); // 'user', 'log', 'details', or null const [isAddingLog, setIsAddingLog] = useState(false); const [selectedNotification, setSelectedNotification] = useState(null); + const [logHistoryData, setLogHistoryData] = useState([]); + const [logLoading, setLogLoading] = useState(false); const [pagination, setPagination] = useState({ current_page: 1, current_limit: 10, @@ -281,6 +256,40 @@ const ListNotification = memo(function ListNotification(props) { }); }; + // Fetch log history from API + const fetchLogHistory = async (notificationId) => { + try { + setLogLoading(true); + const response = await getNotificationLogByNotificationId(notificationId); + if (response && response.data) { + // Transform API data to component format + const transformedLogs = response.data.map((log) => ({ + id: log.notification_error_log_id, + timestamp: log.created_at + ? new Date(log.created_at).toLocaleString('id-ID', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }) + ' WIB' + : 'N/A', + addedBy: { + name: log.contact_name || 'Unknown', + phone: log.contact_phone || 'N/A', + }, + description: log.notification_error_log_description || '', + })); + setLogHistoryData(transformedLogs); + } + } catch (err) { + console.error('Error fetching log history:', err); + setLogHistoryData([]); // Set empty array on error + } finally { + setLogLoading(false); + } + }; + const tabButtonStyle = (isActive) => ({ padding: '12px 16px', border: 'none', @@ -500,6 +509,15 @@ const ListNotification = memo(function ListNotification(props) { }} onClick={(e) => { e.stopPropagation(); + + // Set the selected notification for the log history + const notificationId = + notification.id.split('-')[1]; + setSelectedNotification(notification); + + // Fetch log history for the selected notification + fetchLogHistory(notificationId); + setModalContent('log'); }} /> @@ -554,291 +572,314 @@ const ListNotification = memo(function ListNotification(props) { const renderLogHistory = () => ( <> -
- {/* Garis vertikal yang menyambung */} -
+ {logLoading ? ( +
+ +
+ ) : logHistoryData.length === 0 ? ( +
+ Tidak ada log history +
+ ) : ( +
+ {/* Garis vertikal yang menyambung */} +
- {logHistoryData.map((log, index) => ( - - {/* Kolom Kiri: Branch/Timeline */} - ( + -
- - - {/* Kolom Kanan: Card */} - - - - - - - - - Added at {log.timestamp} - - -
- Added by: {log.addedBy.name} - - {log.addedBy.phone} - -
- - - - - {log.description} - - - - - - - ))} -
- - ); - - const renderDetailsNotification = () => { - if (!selectedNotification) return null; - - const { IconComponent, color } = getIconAndColor(selectedNotification.type); - - return ( - - - {/* Kolom Kiri: Data Kompresor */} - - - - - -
+ + + {/* Kolom Kanan: Card */} + + + + + + + + + Added at {log.timestamp} + + +
+ Added by: {log.addedBy.name} + + {log.addedBy.phone} + +
+ + + + - -
- - - {selectedNotification.title} -
- - {selectedNotification.issue} - -
+ {log.description} + -
- Plant Subsection -
{selectedNotification.subsection}
- - Date & Time - -
{selectedNotification.timestamp}
-
- -
- - - - Value - -
- N/A -
- - - - Treshold - -
N/A
- - -
- - - - - {/* Kolom Kanan: Informasi Teknis */} - - - -
- PLC -
{selectedNotification.plc}
-
-
- Status -
- {selectedNotification.status} -
-
-
- Tag -
- {selectedNotification.tag} -
-
- - - - -
- - - - - - - Handling Guideline - - - - - - - - - - Spare Part - - - - - - setModalContent('log')} - > - - - - Log Activity - - - - - - - - PDF - - } > + ))} +
+ )} + + ); + + const renderDetailsNotification = () => { + if (!selectedNotification) return null; + + const { IconComponent, color } = getIconAndColor(selectedNotification.type); + + return ( + + + {/* Kolom Kiri: Data Kompresor */} + + + + + +
+ +
+ + + {selectedNotification.title} +
+ + {selectedNotification.issue} + +
+ + +
+ Plant Subsection +
{selectedNotification.subsection}
+ + Date & Time + +
{selectedNotification.timestamp}
+
+ +
+ + + + Value + +
+ N/A +
+ + + + Treshold + +
N/A
+ + +
+ + + + + {/* Kolom Kanan: Informasi Teknis */} + + + +
+ PLC +
{selectedNotification.plc}
+
+
+ Status +
+ {selectedNotification.status} +
+
+
+ Tag +
+ {selectedNotification.tag} +
+
+ + + + +
+ + + + + + + Handling Guideline + + + + + + + + + + Spare Part + + + + + + { + // Set the selected notification for the log history if not already set + if (selectedNotification) { + const notificationId = + selectedNotification.id.split('-')[1]; + // Fetch log history for the selected notification + fetchLogHistory(notificationId); + } + setModalContent('log'); + }} + > + + + + Log Activity + + + + + + + + + + + PDF + + } + >
- {logHistoryData.map((log) => ( - + +
+ ) : logHistoryData.length === 0 ? ( +
- + ) : ( + logHistoryData.map((log) => ( + - {log.addedBy.name}:{' '} - {log.description} - - - {log.timestamp} - - - ))} + + {log.addedBy.name}:{' '} + {log.description} + + + {log.timestamp} + + + )) + )}