feat: implement log history fetching and display in ListNotification component
This commit is contained in:
@@ -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,291 +572,314 @@ const ListNotification = memo(function ListNotification(props) {
|
|||||||
|
|
||||||
const renderLogHistory = () => (
|
const renderLogHistory = () => (
|
||||||
<>
|
<>
|
||||||
<div style={{ padding: '0 16px', position: 'relative' }}>
|
{logLoading ? (
|
||||||
{/* Garis vertikal yang menyambung */}
|
<div style={{ textAlign: 'center', padding: '24px' }}>
|
||||||
<div
|
<Spin size="large" />
|
||||||
style={{
|
</div>
|
||||||
position: 'absolute',
|
) : logHistoryData.length === 0 ? (
|
||||||
top: '7px',
|
<div style={{ textAlign: 'center', padding: '24px', color: '#8c8c8c' }}>
|
||||||
left: '23px',
|
Tidak ada log history
|
||||||
bottom: '7px',
|
</div>
|
||||||
width: '2px',
|
) : (
|
||||||
backgroundColor: '#91d5ff',
|
<div style={{ padding: '0 16px', position: 'relative' }}>
|
||||||
zIndex: 0,
|
{/* Garis vertikal yang menyambung */}
|
||||||
}}
|
<div
|
||||||
></div>
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '7px',
|
||||||
|
left: '23px',
|
||||||
|
bottom: '7px',
|
||||||
|
width: '2px',
|
||||||
|
backgroundColor: '#91d5ff',
|
||||||
|
zIndex: 0,
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
|
||||||
{logHistoryData.map((log, index) => (
|
{logHistoryData.map((log, index) => (
|
||||||
<Row
|
<Row
|
||||||
key={log.id}
|
key={log.id}
|
||||||
wrap={false}
|
wrap={false}
|
||||||
style={{ marginBottom: '16px', position: 'relative', zIndex: 1 }}
|
style={{ marginBottom: '16px', position: 'relative', zIndex: 1 }}
|
||||||
>
|
|
||||||
{/* Kolom Kiri: Branch/Timeline */}
|
|
||||||
<Col
|
|
||||||
style={{
|
|
||||||
position: 'relative',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginRight: '16px',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div
|
{/* Kolom Kiri: Branch/Timeline */}
|
||||||
|
<Col
|
||||||
style={{
|
style={{
|
||||||
width: '14px',
|
position: 'relative',
|
||||||
height: '14px',
|
display: 'flex',
|
||||||
backgroundColor: '#fff',
|
flexDirection: 'column',
|
||||||
border: '3px solid #1890ff',
|
alignItems: 'center',
|
||||||
borderRadius: '50%',
|
marginRight: '16px',
|
||||||
zIndex: 1,
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
}}
|
||||||
></div>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
{/* Kolom Kanan: Card */}
|
|
||||||
<Col flex="auto">
|
|
||||||
<Card size="small" style={{ borderColor: '#91d5ff' }}>
|
|
||||||
<Row gutter={[16, 8]} align="middle">
|
|
||||||
<Col xs={24} md={12}>
|
|
||||||
<Space direction="vertical" size={4}>
|
|
||||||
<Space>
|
|
||||||
<ClockCircleOutlined />
|
|
||||||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
|
||||||
Added at {log.timestamp}
|
|
||||||
</Text>
|
|
||||||
</Space>
|
|
||||||
<div>
|
|
||||||
<Text strong>Added by: {log.addedBy.name}</Text>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
marginLeft: '8px',
|
|
||||||
border: '1px solid #52c41a',
|
|
||||||
color: '#52c41a',
|
|
||||||
padding: '2px 6px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
fontSize: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MobileOutlined /> {log.addedBy.phone}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</Space>
|
|
||||||
</Col>
|
|
||||||
<Col xs={24} md={12}>
|
|
||||||
<Paragraph
|
|
||||||
style={{
|
|
||||||
color: '#595959',
|
|
||||||
margin: 0,
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{log.description}
|
|
||||||
</Paragraph>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderDetailsNotification = () => {
|
|
||||||
if (!selectedNotification) return null;
|
|
||||||
|
|
||||||
const { IconComponent, color } = getIconAndColor(selectedNotification.type);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
|
||||||
<Row gutter={[16, 8]}>
|
|
||||||
{/* Kolom Kiri: Data Kompresor */}
|
|
||||||
<Col span={12}>
|
|
||||||
<Card
|
|
||||||
title=""
|
|
||||||
size="small"
|
|
||||||
style={{ height: '100%', borderColor: '#d4380d' }}
|
|
||||||
bodyStyle={{ padding: '12px' }}
|
|
||||||
>
|
>
|
||||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
<div
|
||||||
<Row gutter={16} align="middle">
|
style={{
|
||||||
<Col>
|
width: '14px',
|
||||||
<div
|
height: '14px',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
border: '3px solid #1890ff',
|
||||||
|
borderRadius: '50%',
|
||||||
|
zIndex: 1,
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{/* Kolom Kanan: Card */}
|
||||||
|
<Col flex="auto">
|
||||||
|
<Card size="small" style={{ borderColor: '#91d5ff' }}>
|
||||||
|
<Row gutter={[16, 8]} align="middle">
|
||||||
|
<Col xs={24} md={12}>
|
||||||
|
<Space direction="vertical" size={4}>
|
||||||
|
<Space>
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
<Text
|
||||||
|
type="secondary"
|
||||||
|
style={{ fontSize: '12px' }}
|
||||||
|
>
|
||||||
|
Added at {log.timestamp}
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
<div>
|
||||||
|
<Text strong>Added by: {log.addedBy.name}</Text>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
marginLeft: '8px',
|
||||||
|
border: '1px solid #52c41a',
|
||||||
|
color: '#52c41a',
|
||||||
|
padding: '2px 6px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MobileOutlined /> {log.addedBy.phone}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} md={12}>
|
||||||
|
<Paragraph
|
||||||
style={{
|
style={{
|
||||||
width: '32px',
|
color: '#595959',
|
||||||
height: '32px',
|
margin: 0,
|
||||||
borderRadius: '50%',
|
fontSize: '13px',
|
||||||
backgroundColor: '#d4380d',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
color: '#ffffff',
|
|
||||||
fontSize: '18px',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CloseOutlined />
|
{log.description}
|
||||||
</div>
|
</Paragraph>
|
||||||
</Col>
|
|
||||||
<Col>
|
|
||||||
<Text>{selectedNotification.title}</Text>
|
|
||||||
<div style={{ marginTop: '2px' }}>
|
|
||||||
<Text strong style={{ fontSize: '16px' }}>
|
|
||||||
{selectedNotification.issue}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<div>
|
|
||||||
<Text strong>Plant Subsection</Text>
|
|
||||||
<div>{selectedNotification.subsection}</div>
|
|
||||||
<Text strong style={{ display: 'block', marginTop: '8px' }}>
|
|
||||||
Date & Time
|
|
||||||
</Text>
|
|
||||||
<div>{selectedNotification.timestamp}</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>
|
|
||||||
|
|
||||||
{/* Kolom Kanan: Informasi Teknis */}
|
|
||||||
<Col span={12}>
|
|
||||||
<Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
|
|
||||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
|
||||||
<div>
|
|
||||||
<Text strong>PLC</Text>
|
|
||||||
<div>{selectedNotification.plc}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong>Status</Text>
|
|
||||||
<div style={{ color: '#faad14', fontWeight: 500 }}>
|
|
||||||
{selectedNotification.status}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong>Tag</Text>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontFamily: 'monospace',
|
|
||||||
backgroundColor: '#f0f0f0',
|
|
||||||
padding: '2px 6px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
display: 'inline-block',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{selectedNotification.tag}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<div>
|
|
||||||
<Row gutter={[16, 8]}>
|
|
||||||
<Col span={8}>
|
|
||||||
<Card
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
bodyStyle={{ padding: '12px' }}
|
|
||||||
>
|
|
||||||
<Space>
|
|
||||||
<BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
|
|
||||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
|
||||||
Handling Guideline
|
|
||||||
</Text>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
<Col span={8}>
|
|
||||||
<Card
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
bodyStyle={{ padding: '12px' }}
|
|
||||||
>
|
|
||||||
<Space>
|
|
||||||
<ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
|
|
||||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
|
||||||
Spare Part
|
|
||||||
</Text>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
<Col span={8}>
|
|
||||||
<Card
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
bodyStyle={{ padding: '12px' }}
|
|
||||||
onClick={() => setModalContent('log')}
|
|
||||||
>
|
|
||||||
<Space>
|
|
||||||
<HistoryOutlined
|
|
||||||
style={{ fontSize: '16px', color: '#1890ff' }}
|
|
||||||
/>
|
|
||||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
|
||||||
Log Activity
|
|
||||||
</Text>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={[16, 8]} style={{ marginTop: '0' }}>
|
))}
|
||||||
<Col span={8}>
|
</div>
|
||||||
<Card size="small" style={{ height: '100%' }}>
|
)}
|
||||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
</>
|
||||||
<Card
|
);
|
||||||
size="small"
|
|
||||||
bodyStyle={{ padding: '8px 12px' }}
|
const renderDetailsNotification = () => {
|
||||||
hoverable
|
if (!selectedNotification) return null;
|
||||||
extra={
|
|
||||||
<Text type="secondary" style={{ fontSize: '10px' }}>
|
const { IconComponent, color } = getIconAndColor(selectedNotification.type);
|
||||||
PDF
|
|
||||||
</Text>
|
return (
|
||||||
} >
|
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||||
|
<Row gutter={[16, 8]}>
|
||||||
|
{/* Kolom Kiri: Data Kompresor */}
|
||||||
|
<Col span={12}>
|
||||||
|
<Card
|
||||||
|
title=""
|
||||||
|
size="small"
|
||||||
|
style={{ height: '100%', borderColor: '#d4380d' }}
|
||||||
|
bodyStyle={{ padding: '12px' }}
|
||||||
|
>
|
||||||
|
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||||
|
<Row gutter={16} align="middle">
|
||||||
|
<Col>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '32px',
|
||||||
|
height: '32px',
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: '#d4380d',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: '18px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseOutlined />
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Text>{selectedNotification.title}</Text>
|
||||||
|
<div style={{ marginTop: '2px' }}>
|
||||||
|
<Text strong style={{ fontSize: '16px' }}>
|
||||||
|
{selectedNotification.issue}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<div>
|
||||||
|
<Text strong>Plant Subsection</Text>
|
||||||
|
<div>{selectedNotification.subsection}</div>
|
||||||
|
<Text strong style={{ display: 'block', marginTop: '8px' }}>
|
||||||
|
Date & Time
|
||||||
|
</Text>
|
||||||
|
<div>{selectedNotification.timestamp}</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>
|
||||||
|
|
||||||
|
{/* Kolom Kanan: Informasi Teknis */}
|
||||||
|
<Col span={12}>
|
||||||
|
<Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
|
||||||
|
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||||
|
<div>
|
||||||
|
<Text strong>PLC</Text>
|
||||||
|
<div>{selectedNotification.plc}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Status</Text>
|
||||||
|
<div style={{ color: '#faad14', fontWeight: 500 }}>
|
||||||
|
{selectedNotification.status}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Tag</Text>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
backgroundColor: '#f0f0f0',
|
||||||
|
padding: '2px 6px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
display: 'inline-block',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{selectedNotification.tag}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<div>
|
||||||
|
<Row gutter={[16, 8]}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Card
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
bodyStyle={{ padding: '12px' }}
|
||||||
|
>
|
||||||
|
<Space>
|
||||||
|
<BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
|
||||||
|
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||||
|
Handling Guideline
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Card
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
bodyStyle={{ padding: '12px' }}
|
||||||
|
>
|
||||||
|
<Space>
|
||||||
|
<ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
|
||||||
|
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||||
|
Spare Part
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Card
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
bodyStyle={{ padding: '12px' }}
|
||||||
|
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>
|
||||||
|
<HistoryOutlined
|
||||||
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
|
/>
|
||||||
|
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||||
|
Log Activity
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={[16, 8]} style={{ marginTop: '0' }}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Card size="small" style={{ height: '100%' }}>
|
||||||
|
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||||
|
<Card
|
||||||
|
size="small"
|
||||||
|
bodyStyle={{ padding: '8px 12px' }}
|
||||||
|
hoverable
|
||||||
|
extra={
|
||||||
|
<Text type="secondary" style={{ fontSize: '10px' }}>
|
||||||
|
PDF
|
||||||
|
</Text>
|
||||||
|
}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@@ -1129,24 +1170,40 @@ const ListNotification = memo(function ListNotification(props) {
|
|||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
{logHistoryData.map((log) => (
|
{logLoading ? (
|
||||||
<Card
|
<div style={{ textAlign: 'center', padding: '12px' }}>
|
||||||
key={log.id}
|
<Spin size="small" />
|
||||||
size="small"
|
</div>
|
||||||
bodyStyle={{ padding: '8px 12px' }}
|
) : logHistoryData.length === 0 ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '12px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Paragraph
|
Tidak ada log history
|
||||||
style={{ fontSize: '12px', margin: 0 }}
|
</div>
|
||||||
ellipsis={{ rows: 2 }}
|
) : (
|
||||||
|
logHistoryData.map((log) => (
|
||||||
|
<Card
|
||||||
|
key={log.id}
|
||||||
|
size="small"
|
||||||
|
bodyStyle={{ padding: '8px 12px' }}
|
||||||
>
|
>
|
||||||
<Text strong>{log.addedBy.name}:</Text>{' '}
|
<Paragraph
|
||||||
{log.description}
|
style={{ fontSize: '12px', margin: 0 }}
|
||||||
</Paragraph>
|
ellipsis={{ rows: 2 }}
|
||||||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
>
|
||||||
{log.timestamp}
|
<Text strong>{log.addedBy.name}:</Text>{' '}
|
||||||
</Text>
|
{log.description}
|
||||||
</Card>
|
</Paragraph>
|
||||||
))}
|
<Text type="secondary" style={{ fontSize: '11px' }}>
|
||||||
|
{log.timestamp}
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
))
|
||||||
|
)}
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|||||||
Reference in New Issue
Block a user