feat: Enhance notification system with device alerts, user history, and log history modals

2025-11-18 04:04:25 +07:00
parent 1d06963f67
commit 0e8078c29f
4 changed files with 833 additions and 199 deletions
--- a/src/pages/notification/component/LogHistoryModal.jsx
+++ b/src/pages/notification/component/LogHistoryModal.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { Modal, Table, Tag, Typography } from 'antd';
+import { ClockCircleOutlined, UserOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+
+const { Text } = Typography;
+
+// Dummy data untuk log history
+const getDummyLogHistory = (notification) => {
+    if (!notification) return [];
+    return [
+        {
+            key: '1',
+            timestamp: dayjs().subtract(2, 'hour').format('DD-MM-YYYY HH:mm:ss'),
+            activity: 'Notification Created',
+            details: `System generated a ${notification.type} notification for: ${notification.issue}`,
+        },
+        {
+            key: '2',
+            timestamp: dayjs().subtract(1, 'hour').format('DD-MM-YYYY HH:mm:ss'),
+            activity: 'Notification Sent',
+            details: 'Sent to 2 engineers',
+        },
+        {
+            key: '3',
+            timestamp: dayjs().subtract(30, 'minute').format('DD-MM-YYYY HH:mm:ss'),
+            activity: 'Notification Read',
+            details: 'Read by Engineer A',
+        },
+        {
+            key: '4',
+            timestamp: dayjs().subtract(5, 'minute').format('DD-MM-YYYY HH:mm:ss'),
+            activity: 'Resend Triggered',
+            details: 'Notification resent by Admin',
+        },
+    ];
+};
+
+const columns = [
+    {
+        title: 'Timestamp',
+        dataIndex: 'timestamp',
+        key: 'timestamp',
+        render: (text) => (
+            <span>
+                <ClockCircleOutlined style={{ marginRight: 8 }} />
+                {text}
+            </span>
+        ),
+    },
+    {
+        title: 'Activity',
+        dataIndex: 'activity',
+        key: 'activity',
+        render: (text) => {
+            let color = 'blue';
+            if (text.includes('Created')) {
+                color = 'geekblue';
+            } else if (text.includes('Sent')) {
+                color = 'purple';
+            } else if (text.includes('Read')) {
+                color = 'green';
+            } else if (text.includes('Triggered')) {
+                color = 'orange';
+            }
+            return <Tag color={color}>{text.toUpperCase()}</Tag>;
+        },
+    },
+    {
+        title: 'Details',
+        dataIndex: 'details',
+        key: 'details',
+    },
+];
+
+const LogHistoryModal = ({ visible, onCancel, notificationData }) => {
+    const logHistoryData = getDummyLogHistory(notificationData);
+
+    return (
+        <Modal
+            title={
+                <Text strong>
+                    Log History: <Text type="secondary">{notificationData?.title}</Text>
+                </Text>
+            }
+            open={visible}
+            onCancel={onCancel}
+            footer={null}
+            width={800}
+            destroyOnClose
+        >
+            <Table
+                columns={columns}
+                dataSource={logHistoryData}
+                pagination={{ pageSize: 5 }}
+                style={{ marginTop: 24 }}
+            />
+        </Modal>
+    );
+};
+
+export default LogHistoryModal;