From 406b306275a1c1933568a463c7ac8797ed8d5afd Mon Sep 17 00:00:00 2001 From: Rafiafrzl Date: Thu, 9 Oct 2025 14:48:36 +0700 Subject: [PATCH] refactor event alarm components to improve detail view and add action buttons --- .../eventAlarm/component/DetailEventAlarm.jsx | 295 ++++-------------- .../eventAlarm/component/ListEventAlarm.jsx | 95 +++--- 2 files changed, 108 insertions(+), 282 deletions(-) diff --git a/src/pages/eventAlarm/component/DetailEventAlarm.jsx b/src/pages/eventAlarm/component/DetailEventAlarm.jsx index 5506f2d..0a0b487 100644 --- a/src/pages/eventAlarm/component/DetailEventAlarm.jsx +++ b/src/pages/eventAlarm/component/DetailEventAlarm.jsx @@ -1,247 +1,58 @@ -import React, { memo, useState, useEffect } from 'react'; -import { Button, Row, Col, Card, Input } from 'antd'; -import { SearchOutlined } from '@ant-design/icons'; -import { useNavigate } from 'react-router-dom'; -import TableList from '../../../components/Global/TableList'; - -// Dummy data untuk riwayat alarm -const initialAlarmsData = [ - { - alarm_id: 1, - tanggal: '2025-01-15 08:30:00', - plant_sub_section: 'Plant A - Section 1', - device: 'Device 001', - tag: 'TEMP-001', - engineer: 'Pras', - }, - { - alarm_id: 2, - tanggal: '2025-01-15 09:15:00', - plant_sub_section: 'Plant B - Section 2', - device: 'Device 002', - tag: 'PRESS-002', - engineer: 'Bagus', - }, - { - alarm_id: 3, - tanggal: '2025-01-15 10:00:00', - plant_sub_section: 'Plant A - Section 3', - device: 'Device 003', - tag: 'FLOW-003', - engineer: 'iqbal', - }, - { - alarm_id: 4, - tanggal: '2025-01-15 11:45:00', - plant_sub_section: 'Plant C - Section 1', - device: 'Device 004', - tag: 'LEVEL-004', - engineer: 'riski', - }, - { - alarm_id: 5, - tanggal: '2025-01-15 13:20:00', - plant_sub_section: 'Plant B - Section 3', - device: 'Device 005', - tag: 'TEMP-005', - engineer: 'anton', - }, - { - alarm_id: 6, - tanggal: '2025-01-15 14:00:00', - plant_sub_section: 'Plant A - Section 2', - device: 'Device 006', - tag: 'PRESS-006', - engineer: 'kurniawan', - }, - { - alarm_id: 7, - tanggal: '2025-01-15 15:30:00', - plant_sub_section: 'Plant C - Section 2', - device: 'Device 007', - tag: 'FLOW-007', - engineer: 'wawan', - }, -]; - -const columns = [ - { - title: 'No', - key: 'no', - width: '5%', - align: 'center', - render: (_, __, index) => index + 1, - }, - { - title: 'Tanggal', - dataIndex: 'tanggal', - key: 'tanggal', - width: '15%', - }, - { - title: 'Plant Sub Section', - dataIndex: 'plant_sub_section', - key: 'plant_sub_section', - width: '20%', - }, - { - title: 'Device', - dataIndex: 'device', - key: 'device', - width: '15%', - }, - { - title: 'Tag', - dataIndex: 'tag', - key: 'tag', - width: '15%', - }, - { - title: 'Engineer', - dataIndex: 'engineer', - key: 'engineer', - width: '15%', - }, -]; - -const ListEventAlarm = memo(function ListEventAlarm(props) { - const [trigerFilter, setTrigerFilter] = useState(false); - const [alarmsData] = useState(initialAlarmsData); - - const defaultFilter = { search: '' }; - const [formDataFilter, setFormDataFilter] = useState(defaultFilter); - const [searchValue, setSearchValue] = useState(''); - - const navigate = useNavigate(); - - // Dummy data function to simulate API call - const getAllEventAlarm = async (params) => { - // Simulate API delay - await new Promise((resolve) => setTimeout(resolve, 300)); - - // Extract URLSearchParams - const searchParam = params.get('search') || ''; - const page = parseInt(params.get('page')) || 1; - const limit = parseInt(params.get('limit')) || 10; - - console.log('getAllEventAlarm called with:', { searchParam, page, limit }); - - // Filter by search - let filteredAlarms = alarmsData; - if (searchParam) { - const searchLower = searchParam.toLowerCase(); - filteredAlarms = alarmsData.filter( - (alarm) => - alarm.tanggal.toLowerCase().includes(searchLower) || - alarm.plant_sub_section.toLowerCase().includes(searchLower) || - alarm.device.toLowerCase().includes(searchLower) || - alarm.tag.toLowerCase().includes(searchLower) || - alarm.engineer.toLowerCase().includes(searchLower) - ); - } - - // Pagination logic - const totalData = filteredAlarms.length; - const totalPages = Math.ceil(totalData / limit); - const startIndex = (page - 1) * limit; - const endIndex = startIndex + limit; - const paginatedData = filteredAlarms.slice(startIndex, endIndex); - - return { - status: 200, - statusCode: 200, - data: { - data: paginatedData, - total: totalData, - paging: { - page: page, - limit: limit, - total: totalData, - page_total: totalPages, - }, - }, - }; - }; - - useEffect(() => { - const token = localStorage.getItem('token'); - if (token) { - if (props.actionMode == 'list') { - setFormDataFilter(defaultFilter); - doFilter(); - } - } else { - navigate('/signin'); - } - }, [props.actionMode, alarmsData]); - - const doFilter = () => { - setTrigerFilter((prev) => !prev); - }; - - const handleSearch = () => { - setFormDataFilter({ search: searchValue }); - setTrigerFilter((prev) => !prev); - }; - - const handleSearchClear = () => { - setSearchValue(''); - setFormDataFilter({ search: '' }); - setTrigerFilter((prev) => !prev); - }; +import { memo } from 'react'; +import { Modal, Divider, Descriptions } from 'antd'; +const DetailEventAlarm = memo(function DetailEventAlarm({ visible, onCancel, selectedData }) { return ( - - - - - - - { - const value = e.target.value; - setSearchValue(value); - // Auto search when clearing by backspace/delete - if (value === '') { - setFormDataFilter({ search: '' }); - setTrigerFilter((prev) => !prev); - } - }} - onSearch={handleSearch} - allowClear={{ - clearIcon: ✕, - }} - enterButton={ - - } - size="large" - /> - - - - - - - - - + + {selectedData && ( +
+ + + {selectedData.tanggal} + + + {selectedData.plant_sub_section} + + + {selectedData.device} + + + {selectedData.tag} + + + {selectedData.engineer} + + + + + + {/* Additional Info */} +
+
+ Catatan: Event alarm ini telah tercatat dalam sistem untuk + monitoring dan analisis lebih lanjut. +
+
+
+ )} + ); }); -export default ListEventAlarm; +export default DetailEventAlarm; diff --git a/src/pages/eventAlarm/component/ListEventAlarm.jsx b/src/pages/eventAlarm/component/ListEventAlarm.jsx index 5506f2d..bf4bfe6 100644 --- a/src/pages/eventAlarm/component/ListEventAlarm.jsx +++ b/src/pages/eventAlarm/component/ListEventAlarm.jsx @@ -64,47 +64,62 @@ const initialAlarmsData = [ }, ]; -const columns = [ - { - title: 'No', - key: 'no', - width: '5%', - align: 'center', - render: (_, __, index) => index + 1, - }, - { - title: 'Tanggal', - dataIndex: 'tanggal', - key: 'tanggal', - width: '15%', - }, - { - title: 'Plant Sub Section', - dataIndex: 'plant_sub_section', - key: 'plant_sub_section', - width: '20%', - }, - { - title: 'Device', - dataIndex: 'device', - key: 'device', - width: '15%', - }, - { - title: 'Tag', - dataIndex: 'tag', - key: 'tag', - width: '15%', - }, - { - title: 'Engineer', - dataIndex: 'engineer', - key: 'engineer', - width: '15%', - }, -]; - const ListEventAlarm = memo(function ListEventAlarm(props) { + const handleViewDetail = (record) => { + props.setSelectedData(record); + props.setActionMode('preview'); + }; + + const columns = [ + { + title: 'No', + key: 'no', + width: '5%', + align: 'center', + render: (_, __, index) => index + 1, + }, + { + title: 'Tanggal', + dataIndex: 'tanggal', + key: 'tanggal', + width: '15%', + }, + { + title: 'Plant Sub Section', + dataIndex: 'plant_sub_section', + key: 'plant_sub_section', + width: '20%', + }, + { + title: 'Device', + dataIndex: 'device', + key: 'device', + width: '15%', + }, + { + title: 'Tag', + dataIndex: 'tag', + key: 'tag', + width: '15%', + }, + { + title: 'Engineer', + dataIndex: 'engineer', + key: 'engineer', + width: '10%', + }, + { + title: 'Action', + key: 'action', + width: '10%', + align: 'center', + render: (_, record) => ( + + ), + }, + ]; const [trigerFilter, setTrigerFilter] = useState(false); const [alarmsData] = useState(initialAlarmsData);