import React, { useState, useEffect } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { Layout, Card, Row, Col, Typography, Space, Button, Spin, Result, Input, } from 'antd'; import { ArrowLeftOutlined, CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled, CloseOutlined, BookOutlined, ToolOutlined, HistoryOutlined, FilePdfOutlined, PlusOutlined, UserOutlined, } from '@ant-design/icons'; import { getNotificationDetail } from '../../api/notification'; import UserHistoryModal from '../notification/component/UserHistoryModal'; import LogHistoryCard from '../notification/component/LogHistoryCard'; const { Content } = Layout; const { Text, Paragraph, Link } = Typography; // Transform API response to component format const transformNotificationData = (apiData) => { // Extract nested data const errorCodeData = apiData.error_code; const solutionData = 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', 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) => { switch (type) { case 'critical': return { IconComponent: CloseCircleFilled, color: '#ff4d4f', bgColor: '#fff1f0' }; case 'warning': return { IconComponent: WarningFilled, color: '#faad14', bgColor: '#fffbe6' }; case 'resolved': return { IconComponent: CheckCircleFilled, color: '#52c41a', bgColor: '#f6ffed' }; default: return { IconComponent: InfoCircleFilled, color: '#1890ff', bgColor: '#e6f7ff' }; } }; const NotificationDetailTab = () => { const { notificationId } = useParams(); // Mungkin perlu disesuaikan jika route berbeda const navigate = useNavigate(); const [notification, setNotification] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [modalContent, setModalContent] = useState(null); // 'user', atau null const [isAddingLog, setIsAddingLog] = useState(false); 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.', }, ]; useEffect(() => { const fetchDetail = async () => { try { setLoading(true); // 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); } }; fetchDetail(); }, [notificationId]); if (loading) { return ( ); } if (error || !notification) { return ( navigate('/notification')}>Back to List} /> ); } const { color } = getIconAndColor(notification.type); return (
Error Notification Detail
{/* Kolom Kiri: Data Kompresor */}
{notification.title}
{notification.issue}
Plant Subsection
{notification.location}
Time
{notification.timestamp.split(' ')[1]} WIB
Value
N/A
Treshold
N/A
{/* Kolom Tengah: Informasi Teknis */}
PLC
{notification.plc || 'N/A'}
Status
{notification.status}
Tag
{notification.tag}
 {/* Kolom Kanan: Log History */} Handling Guideline Spare Part Log Activity {notification.solution && ( <> {notification.solution.path_document ? ( PDF}>
{notification.solution.file_upload_name || 'Solution Document.pdf'} lihat disini
) : 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
)} {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
)} {isAddingLog && ( <> Add New Log / Update Progress )} {logHistoryData.map((log) => ( {log.addedBy.name}:{' '} {log.description} {log.timestamp} ))} setModalContent(null)} notificationData={notification} /> ); }; export default NotificationDetailTab;