Enhance notification list with search functionality and improved layout
This commit is contained in:
@@ -1,79 +1,60 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Row, Col, Card, Badge } from 'antd';
|
||||
import { Button, Row, Col, Card, Badge, Input, Typography, Space } from 'antd';
|
||||
import {
|
||||
CloseCircleFilled,
|
||||
WarningFilled,
|
||||
CheckCircleFilled,
|
||||
InfoCircleFilled,
|
||||
ClockCircleOutlined,
|
||||
EnvironmentOutlined,
|
||||
LinkOutlined,
|
||||
SendOutlined,
|
||||
MailOutlined,
|
||||
UserOutlined,
|
||||
FileTextOutlined,
|
||||
HistoryOutlined,
|
||||
EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const { Text, Paragraph, Link } = Typography;
|
||||
|
||||
// Dummy data untuk notifikasi
|
||||
const initialNotifications = [
|
||||
{
|
||||
id: 1,
|
||||
type: 'critical',
|
||||
title: 'Compressor Unit A - Overheat detected (85°C)',
|
||||
plc: 'PLC-001',
|
||||
tag: 'A1-TEMP',
|
||||
engineer: 'Siti Nurhaliza',
|
||||
time: '2 menit lalu',
|
||||
status: 'unread',
|
||||
title: 'Compressor Unit A',
|
||||
issue: 'Overheat detected (85°C)',
|
||||
description: '⚠️ Compressor Unit A - Overheat Detected (85°C) 🚨',
|
||||
timestamp: '04-11-2025 11.39 WIB',
|
||||
location: 'Lantai 2, Area Produksi A, Zona 3',
|
||||
details: 'Terjadi kenaikan suhu melebihi ambang batas pada Compressor Unit A. Pengecekan potensi kerusakan dibutuhkan.',
|
||||
link: 'https://tinyurl.com/compA85',
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'warning',
|
||||
title: 'Compressor Unit C - Pressure slightly high (7.2 bar)',
|
||||
plc: 'PLC-003',
|
||||
tag: 'C3-PRESS',
|
||||
engineer: 'Joko Widodo',
|
||||
time: '15 menit lalu',
|
||||
status: 'unread',
|
||||
title: 'Compressor Unit C',
|
||||
issue: 'Pressure slightly high (7.2 bar)',
|
||||
description: '🔧 Compressor Unit C - Pressure High (7.2 bar)',
|
||||
timestamp: '04-11-2025 11.30 WIB',
|
||||
location: 'Lantai 1, Area Produksi C, Zona 1',
|
||||
details: 'Tekanan mendekati ambang batas atas. Perlu monitoring lebih lanjut oleh engineer.',
|
||||
link: 'https://tinyurl.com/compC72',
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'resolved',
|
||||
title: 'Compressor Unit B - Vibration issue resolved',
|
||||
plc: 'PLC-002',
|
||||
tag: 'B2-VIB',
|
||||
engineer: 'Rudi Santoso',
|
||||
time: '1 jam lalu',
|
||||
status: 'read',
|
||||
isRead: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: 'critical',
|
||||
title: 'Compressor Unit E - Low oil pressure (1.5 bar)',
|
||||
plc: 'PLC-005',
|
||||
tag: 'E1-OIL',
|
||||
engineer: 'Ahmad Yani',
|
||||
time: '2 jam lalu',
|
||||
status: 'unread',
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 'warning',
|
||||
title: 'Compressor Unit D - Temperature rising (78°C)',
|
||||
plc: 'PLC-004',
|
||||
tag: 'D2-TEMP',
|
||||
engineer: 'Budi Santoso',
|
||||
time: '3 jam lalu',
|
||||
status: 'read',
|
||||
isRead: true,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
type: 'resolved',
|
||||
title: 'Compressor Unit F - Maintenance completed',
|
||||
plc: 'PLC-006',
|
||||
tag: 'F1-MAIN',
|
||||
engineer: 'Dewi Lestari',
|
||||
time: '5 jam lalu',
|
||||
status: 'read',
|
||||
title: 'Compressor Unit B',
|
||||
issue: 'Vibration issue resolved',
|
||||
description: '✅ Compressor Unit B - Vibration Resolved',
|
||||
timestamp: '04-11-2025 10.05 WIB',
|
||||
location: 'Lantai 2, Area Produksi B, Zona 2',
|
||||
details: 'Getaran pada Unit B telah kembali normal setelah perbaikan.',
|
||||
link: 'https://tinyurl.com/compBresolved',
|
||||
isRead: true,
|
||||
},
|
||||
];
|
||||
@@ -81,6 +62,7 @@ const initialNotifications = [
|
||||
const ListNotification = memo(function ListNotification(props) {
|
||||
const [notifications, setNotifications] = useState(initialNotifications);
|
||||
const [activeTab, setActiveTab] = useState('all');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -119,29 +101,29 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
}
|
||||
};
|
||||
|
||||
const filterNotifications = (status) => {
|
||||
if (status === 'all') return notifications;
|
||||
if (status === 'unread') return notifications.filter((n) => !n.isRead);
|
||||
if (status === 'read') return notifications.filter((n) => n.isRead);
|
||||
return notifications;
|
||||
const handleMarkAsRead = (id) => {
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
|
||||
);
|
||||
};
|
||||
|
||||
const filteredNotifications = notifications
|
||||
.filter((n) => {
|
||||
if (activeTab === 'all') return true;
|
||||
if (activeTab === 'unread') return !n.isRead;
|
||||
if (activeTab === 'read') return n.isRead;
|
||||
return true;
|
||||
})
|
||||
.filter((n) => {
|
||||
if (!searchTerm) return true;
|
||||
const searchableText = `${n.title} ${n.issue} ${n.description} ${n.location} ${n.details}`.toLowerCase();
|
||||
return searchableText.includes(searchTerm.toLowerCase());
|
||||
});
|
||||
|
||||
const getUnreadCount = () => {
|
||||
return notifications.filter((n) => !n.isRead).length;
|
||||
};
|
||||
|
||||
const handleViewDetail = (notification) => {
|
||||
props.setSelectedData(notification);
|
||||
props.setActionMode('preview');
|
||||
|
||||
// Mark as read
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === notification.id ? { ...n, isRead: true, status: 'read' } : n))
|
||||
);
|
||||
};
|
||||
|
||||
const filteredNotifications = filterNotifications(activeTab);
|
||||
|
||||
const tabButtonStyle = (isActive) => ({
|
||||
padding: '12px 16px',
|
||||
border: 'none',
|
||||
@@ -170,10 +152,21 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
>
|
||||
Notification
|
||||
</h2>
|
||||
<p style={{ margin: '0 0 24px 0', color: '#8c8c8c', fontSize: '14px' }}>
|
||||
<p style={{ margin: '0 0 16px 0', color: '#8c8c8c', fontSize: '14px' }}>
|
||||
Riwayat notifikasi yang dikirim ke engineer
|
||||
</p>
|
||||
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<Input.Search
|
||||
placeholder="Search notifications..."
|
||||
onSearch={(value) => setSearchTerm(value)}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{ marginBottom: '24px', width: 300 }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Tabs */}
|
||||
<div style={{ borderBottom: '1px solid #f0f0f0', marginBottom: '24px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
@@ -212,7 +205,7 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
</div>
|
||||
|
||||
{/* Notification List */}
|
||||
<div>
|
||||
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
|
||||
{filteredNotifications.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
@@ -230,165 +223,96 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
<Card
|
||||
key={notification.id}
|
||||
style={{
|
||||
marginBottom: '12px',
|
||||
backgroundColor: '#ffffff',
|
||||
border: '1px solid #f0f0f0',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
transition: 'all 0.3s',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.boxShadow =
|
||||
'0 2px 8px rgba(0,0,0,0.06)';
|
||||
e.currentTarget.style.backgroundColor = '#f6f9ff';
|
||||
e.currentTarget.style.borderColor = '#d6e4ff';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
e.currentTarget.style.backgroundColor = '#ffffff';
|
||||
e.currentTarget.style.borderColor = '#f0f0f0';
|
||||
backgroundColor: notification.isRead ? '#ffffff' : '#f6f9ff',
|
||||
borderColor: notification.isRead ? '#f0f0f0' : '#d6e4ff',
|
||||
}}
|
||||
onClick={() => handleMarkAsRead(notification.id)}
|
||||
>
|
||||
{/* Dot for unread */}
|
||||
{!notification.isRead && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '16px',
|
||||
right: '16px',
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#ff4d4f',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '16px',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
|
||||
{/* Icon */}
|
||||
<div
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: bgColor,
|
||||
color: color,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '24px',
|
||||
fontSize: '22px',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IconComponent style={{ fontSize: '24px' }} />
|
||||
<IconComponent style={{ fontSize: '22px' }} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: 600,
|
||||
marginBottom: '4px',
|
||||
color: '#262626',
|
||||
}}
|
||||
>
|
||||
{notification.title}
|
||||
</div>
|
||||
<Row align="top">
|
||||
{/* Left: Title and Issue */}
|
||||
<Col flex="220px">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<div>
|
||||
<Text strong>{notification.title}</Text>
|
||||
<div style={{ marginTop: '4px' }}>
|
||||
<Text style={{ color }}>{notification.issue}</Text>
|
||||
</div>
|
||||
</div>
|
||||
{!notification.isRead && (
|
||||
<Badge color="red" status="processing" style={{ marginLeft: '8px', marginTop: '4px' }} />
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
marginBottom: '4px',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
color: '#8c8c8c',
|
||||
}}
|
||||
>
|
||||
{notification.plc}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
color: '#d9d9d9',
|
||||
}}
|
||||
>
|
||||
•
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
color: '#8c8c8c',
|
||||
}}
|
||||
>
|
||||
Tag: {notification.tag}
|
||||
</span>
|
||||
</div>
|
||||
{/* Middle: Description and Details */}
|
||||
<Col flex="auto">
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start', marginBottom: '12px' }}>
|
||||
<MailOutlined style={{ marginTop: '4px', color: '#1890ff' }} />
|
||||
<Paragraph style={{ color: '#595959', margin: 0, flex: 1 }}>
|
||||
<Text strong>{notification.description}</Text>
|
||||
<br />
|
||||
{notification.details}
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Space direction="vertical" size={4} style={{ fontSize: '13px', color: '#8c8c8c' }}>
|
||||
<Space>
|
||||
<ClockCircleOutlined />
|
||||
<Text type="secondary">{notification.timestamp}</Text>
|
||||
</Space>
|
||||
<Space>
|
||||
<EnvironmentOutlined />
|
||||
<Text type="secondary">{notification.location}</Text>
|
||||
</Space>
|
||||
<Space>
|
||||
<LinkOutlined />
|
||||
<Link href={notification.link} target="_blank">{notification.link}</Link>
|
||||
<Button type="link" icon={<SendOutlined />} style={{ paddingLeft: '8px' }}>
|
||||
Resend
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
</Col>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
color: '#8c8c8c',
|
||||
}}
|
||||
>
|
||||
Engineer:{' '}
|
||||
<span style={{ color: '#595959' }}>
|
||||
{notification.engineer}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
color: '#8c8c8c',
|
||||
}}
|
||||
>
|
||||
{notification.time}
|
||||
</span>
|
||||
</div>
|
||||
{/* Right: Action Icons */}
|
||||
<Col flex="120px" style={{ textAlign: 'center' }} align="bottom">
|
||||
<Space style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
|
||||
<Button type="text" icon={<UserOutlined style={{ color: '#1890ff' }} />} title="User History" style={{ border: '1px solid #1890ff', borderRadius: '4px' }} />
|
||||
<Button type="text" icon={<EyeOutlined style={{ color: '#1890ff' }} />} title="Details" style={{ border: '1px solid #1890ff', borderRadius: '4px' }} />
|
||||
<Button type="text" icon={<HistoryOutlined style={{ color: '#1890ff' }} />} title="Log History" style={{ border: '1px solid #1890ff', borderRadius: '4px' }} />
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
{/* Button */}
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => handleViewDetail(notification)}
|
||||
style={{
|
||||
color: '#FF6B35',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
View Detail
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
@@ -397,5 +321,3 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
});
|
||||
|
||||
export default ListNotification;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user