diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx index 6db9cf5..8812841 100644 --- a/src/pages/notification/component/ListNotification.jsx +++ b/src/pages/notification/component/ListNotification.jsx @@ -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 -

+

Riwayat notifikasi yang dikirim ke engineer

+ + + setSearchTerm(value)} + onChange={(e) => setSearchTerm(e.target.value)} + style={{ marginBottom: '24px', width: 300 }} + /> + + + {/* Tabs */}
@@ -212,7 +205,7 @@ const ListNotification = memo(function ListNotification(props) {
{/* Notification List */} -
+ {filteredNotifications.length === 0 ? (
{ - 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 && ( -
- )} - -
+
{/* Icon */}
- +
{/* Content */}
-
- {notification.title} -
+ + {/* Left: Title and Issue */} + +
+
+ {notification.title} +
+ {notification.issue} +
+
+ {!notification.isRead && ( + + )} +
+ -
- - {notification.plc} - - - • - - - Tag: {notification.tag} - -
+ {/* Middle: Description and Details */} + +
+ + + {notification.description} +
+ {notification.details} + +
+ + + + {notification.timestamp} + + + + {notification.location} + + + + {notification.link} + + + + -
- - Engineer:{' '} - - {notification.engineer} - - - - {notification.time} - -
+ {/* Right: Action Icons */} + + +
- - {/* Button */} -
-
+ ); }) )} -
+ @@ -397,5 +321,3 @@ const ListNotification = memo(function ListNotification(props) { }); export default ListNotification; - -