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

feat: implement log history fetching and display in ListNotification component

Browse Source
This commit is contained in:
Rafiafrzl
2025-12-22 18:47:42 +07:00
parent eb23612444
commit 4508738958
1 changed files with 387 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,7 +38,7 @@ import {
SearchOutlined, SearchOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { useNavigate, Link as RouterLink } from 'react-router-dom'; 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; const { Text, Paragraph, Link: AntdLink } = Typography;
@@ -47,17 +47,18 @@ const transformNotificationData = (apiData) => {
return apiData.map((item, index) => ({ return apiData.map((item, index) => ({
id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical', 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', issue: item.error_code || item.error_code_name || 'Unknown Error',
description: `${item.error_code} - ${item.error_code_name || ''}`, description: `${item.error_code} - ${item.error_code_name || ''}`,
timestamp: timestamp: item.created_at
item.created_at ? new Date(item.created_at).toLocaleString('id-ID', { ? new Date(item.created_at).toLocaleString('id-ID', {
day: '2-digit', day: '2-digit',
month: '2-digit', month: '2-digit',
year: 'numeric', year: 'numeric',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
}) + ' WIB' : 'N/A', }) + ' WIB'
: 'N/A',
location: item.plant_sub_section_name || item.device_location || 'Location not specified', location: item.plant_sub_section_name || item.device_location || 'Location not specified',
details: item.message_error_issue || 'No details available', details: item.message_error_issue || 'No details available',
link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
@@ -68,7 +69,10 @@ const transformNotificationData = (apiData) => {
errorCode: item.error_code, errorCode: item.error_code,
solutionName: item.error_code?.solution?.[0]?.solution_name || 'N/A', solutionName: item.error_code?.solution?.[0]?.solution_name || 'N/A',
typeSolution: item.error_code?.solution?.[0]?.type_solution || '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, 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 ListNotification = memo(function ListNotification(props) {
const [notifications, setNotifications] = useState([]); const [notifications, setNotifications] = useState([]);
const [activeTab, setActiveTab] = useState('all'); 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 [modalContent, setModalContent] = useState(null); // 'user', 'log', 'details', or null
const [isAddingLog, setIsAddingLog] = useState(false); const [isAddingLog, setIsAddingLog] = useState(false);
const [selectedNotification, setSelectedNotification] = useState(null); const [selectedNotification, setSelectedNotification] = useState(null);
const [logHistoryData, setLogHistoryData] = useState([]);
const [logLoading, setLogLoading] = useState(false);
const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
current_page: 1, current_page: 1,
current_limit: 10, 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) => ({ const tabButtonStyle = (isActive) => ({
padding: '12px 16px', padding: '12px 16px',
border: 'none', border: 'none',
@@ -500,6 +509,15 @@ const ListNotification = memo(function ListNotification(props) {
}} }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); 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'); setModalContent('log');
}} }}
/> />
@@ -554,6 +572,15 @@ const ListNotification = memo(function ListNotification(props) {
const renderLogHistory = () => ( const renderLogHistory = () => (
<> <>
{logLoading ? (
<div style={{ textAlign: 'center', padding: '24px' }}>
<Spin size="large" />
</div>
) : logHistoryData.length === 0 ? (
<div style={{ textAlign: 'center', padding: '24px', color: '#8c8c8c' }}>
Tidak ada log history
</div>
) : (
<div style={{ padding: '0 16px', position: 'relative' }}> <div style={{ padding: '0 16px', position: 'relative' }}>
{/* Garis vertikal yang menyambung */} {/* Garis vertikal yang menyambung */}
<div <div
@@ -605,7 +632,10 @@ const ListNotification = memo(function ListNotification(props) {
<Space direction="vertical" size={4}> <Space direction="vertical" size={4}>
<Space> <Space>
<ClockCircleOutlined /> <ClockCircleOutlined />
<Text type="secondary" style={{ fontSize: '12px' }}> <Text
type="secondary"
style={{ fontSize: '12px' }}
>
Added at {log.timestamp} Added at {log.timestamp}
</Text> </Text>
</Space> </Space>
@@ -643,6 +673,7 @@ const ListNotification = memo(function ListNotification(props) {
</Row> </Row>
))} ))}
</div> </div>
)}
</> </>
); );
@@ -813,7 +844,16 @@ const ListNotification = memo(function ListNotification(props) {
cursor: 'pointer', cursor: 'pointer',
}} }}
bodyStyle={{ padding: '12px' }} bodyStyle={{ padding: '12px' }}
onClick={() => setModalContent('log')} onClick={() => {
// 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');
}}
> >
<Space> <Space>
<HistoryOutlined <HistoryOutlined
@@ -838,7 +878,8 @@ const ListNotification = memo(function ListNotification(props) {
<Text type="secondary" style={{ fontSize: '10px' }}> <Text type="secondary" style={{ fontSize: '10px' }}>
PDF PDF
</Text> </Text>
} > }
>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
@@ -1129,7 +1170,22 @@ const ListNotification = memo(function ListNotification(props) {
</Button> </Button>
</Space> </Space>
</Card> </Card>
{logHistoryData.map((log) => ( {logLoading ? (
<div style={{ textAlign: 'center', padding: '12px' }}>
<Spin size="small" />
</div>
) : logHistoryData.length === 0 ? (
<div
style={{
textAlign: 'center',
padding: '12px',
color: '#8c8c8c',
}}
>
Tidak ada log history
</div>
) : (
logHistoryData.map((log) => (
<Card <Card
key={log.id} key={log.id}
size="small" size="small"
@@ -1146,7 +1202,8 @@ const ListNotification = memo(function ListNotification(props) {
{log.timestamp} {log.timestamp}
</Text> </Text>
</Card> </Card>
))} ))
)}
</Space> </Space>
</Card> </Card>
</Col> </Col>