Slicing menu history alarm and event alarm
This commit is contained in:
38
src/pages/history/alarm/IndexHistoryAlarm.jsx
Normal file
38
src/pages/history/alarm/IndexHistoryAlarm.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { Typography } from 'antd';
|
||||
import ListHistoryAlarm from './component/ListHistoryAlarm';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexHistoryAlarm = memo(function IndexHistoryAlarm() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
setBreadcrumbItems([
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• History Event
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [navigate, setBreadcrumbItems]);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ListHistoryAlarm selectedData={selectedData} setSelectedData={setSelectedData} />
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexHistoryAlarm;
|
||||
128
src/pages/history/alarm/component/ListHistoryAlarm.jsx
Normal file
128
src/pages/history/alarm/component/ListHistoryAlarm.jsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Row, Col, Card, Input } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import TableList from '../../../../components/Global/TableList';
|
||||
|
||||
const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
|
||||
const columns = [
|
||||
{
|
||||
title: 'No',
|
||||
key: 'no',
|
||||
width: '5%',
|
||||
align: 'center',
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: 'Datetime',
|
||||
dataIndex: 'datetime',
|
||||
key: 'datetime',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
title: 'Tag Name',
|
||||
dataIndex: 'tag_name',
|
||||
key: 'tag_name',
|
||||
width: '40%',
|
||||
},
|
||||
{
|
||||
title: 'Value',
|
||||
dataIndex: 'stat',
|
||||
key: 'stat',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
title: 'Threshold',
|
||||
dataIndex: 'threshold',
|
||||
key: 'threshold',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
title: 'Condition',
|
||||
dataIndex: 'condition',
|
||||
key: 'condition',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Stat',
|
||||
dataIndex: 'stat',
|
||||
key: 'stat',
|
||||
width: '5%',
|
||||
},
|
||||
];
|
||||
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
|
||||
const defaultFilter = { search: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const getAllEventAlarm = async (params) => {
|
||||
return {
|
||||
data: [],
|
||||
};
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ search: searchValue });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search ..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
if (value === '') {
|
||||
handleSearchClear();
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
getData={getAllEventAlarm}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListHistoryAlarm;
|
||||
38
src/pages/history/event/IndexHistoryEvent.jsx
Normal file
38
src/pages/history/event/IndexHistoryEvent.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { Typography } from 'antd';
|
||||
import ListHistoryEvent from './component/ListHistoryEvent';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexHistoryEvent = memo(function IndexHistoryEvent() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
setBreadcrumbItems([
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• History Event
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [navigate, setBreadcrumbItems]);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ListHistoryEvent selectedData={selectedData} setSelectedData={setSelectedData} />
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexHistoryEvent;
|
||||
116
src/pages/history/event/component/ListHistoryEvent.jsx
Normal file
116
src/pages/history/event/component/ListHistoryEvent.jsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Row, Col, Card, Input } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import TableList from '../../../../components/Global/TableList';
|
||||
|
||||
const ListHistoryEvent = memo(function ListHistoryEvent(props) {
|
||||
const columns = [
|
||||
{
|
||||
title: 'No',
|
||||
key: 'no',
|
||||
width: '5%',
|
||||
align: 'center',
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: 'Datetime',
|
||||
dataIndex: 'datetime',
|
||||
key: 'datetime',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
title: 'Tag Name',
|
||||
dataIndex: 'tag_name',
|
||||
key: 'tag_name',
|
||||
width: '40%',
|
||||
},
|
||||
{
|
||||
title: 'Stat',
|
||||
dataIndex: 'stat',
|
||||
key: 'stat',
|
||||
width: '5%',
|
||||
},
|
||||
{
|
||||
title: 'Description',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
width: '15%',
|
||||
},
|
||||
];
|
||||
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
|
||||
const defaultFilter = { search: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const getAllEventAlarm = async (params) => {
|
||||
return {
|
||||
data: [],
|
||||
};
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ search: searchValue });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search ..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
if (value === '') {
|
||||
handleSearchClear();
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
getData={getAllEventAlarm}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListHistoryEvent;
|
||||
@@ -1,275 +0,0 @@
|
||||
import React, { memo, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { Typography, Table, Card, Select, DatePicker, Button, Row, Col } from 'antd';
|
||||
import { FileTextOutlined } from '@ant-design/icons';
|
||||
import { decryptData } from '../../../components/Global/Formatter';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
// New data structure for tag history
|
||||
const tagHistoryData = [
|
||||
{
|
||||
tag: 'TEMP_SENSOR_1',
|
||||
color: '#FF6B4A',
|
||||
history: [
|
||||
{ timestamp: '2025-10-09 08:00', value: 75 },
|
||||
{ timestamp: '2025-10-09 08:05', value: 76 },
|
||||
{ timestamp: '2025-10-09 08:10', value: 75 },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: 'GAS_LEAK_SENSOR_1',
|
||||
color: '#4ECDC4',
|
||||
history: [
|
||||
{ timestamp: '2025-10-09 08:00', value: 10 },
|
||||
{ timestamp: '2025-10-09 08:05', value: 150 },
|
||||
{ timestamp: '2025-10-09 08:10', value: 12 },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: 'PRESSURE_SENSOR_1',
|
||||
color: '#FFE66D',
|
||||
history: [
|
||||
{ timestamp: '2025-10-09 08:00', value: 1.2 },
|
||||
{ timestamp: '2025-10-09 08:05', value: 1.3 },
|
||||
{ timestamp: '2025-10-09 08:10', value: 1.2 },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const IndexReport = memo(function IndexReport() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
|
||||
const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
|
||||
const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
|
||||
const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
|
||||
const [periode, setPeriode] = useState('30 Menit');
|
||||
const [userRole, setUserRole] = useState(null);
|
||||
const [roleLevel, setRoleLevel] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
// Get user data and role
|
||||
let userData = null;
|
||||
const sessionData = localStorage.getItem('session');
|
||||
if (sessionData) {
|
||||
userData = decryptData(sessionData);
|
||||
} else {
|
||||
const userRaw = localStorage.getItem('user');
|
||||
if (userRaw) {
|
||||
try {
|
||||
userData = { user: JSON.parse(userRaw) };
|
||||
} catch (e) {
|
||||
console.error('Error parsing user data:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (userData?.user) {
|
||||
setUserRole(userData.user.role_name);
|
||||
setRoleLevel(userData.user.role_level);
|
||||
}
|
||||
|
||||
setBreadcrumbItems([
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• History
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
Report
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleReset = () => {
|
||||
setPlantSubSection('Semua Plant');
|
||||
setStartDate(dayjs('2025-09-30'));
|
||||
setEndDate(dayjs('2025-10-09'));
|
||||
setPeriode('30 Menit');
|
||||
};
|
||||
|
||||
// Check if user has permission to view data (all except guest)
|
||||
const canViewData = userRole && userRole !== 'guest';
|
||||
|
||||
// Convert tag history data to table format
|
||||
const convertToTableData = () => {
|
||||
const timestamps = {}; // Use an object to collect data per timestamp
|
||||
|
||||
tagHistoryData.forEach((tagData) => {
|
||||
tagData.history.forEach((point) => {
|
||||
if (!timestamps[point.timestamp]) {
|
||||
timestamps[point.timestamp] = {
|
||||
key: point.timestamp,
|
||||
'Date and Time': point.timestamp,
|
||||
};
|
||||
}
|
||||
timestamps[point.timestamp][tagData.tag] = point.value;
|
||||
});
|
||||
});
|
||||
|
||||
// Convert the object to an array
|
||||
return Object.values(timestamps);
|
||||
};
|
||||
|
||||
const tableData = convertToTableData();
|
||||
|
||||
// Create dynamic columns based on tags
|
||||
const tags = tagHistoryData.map((tagData) => tagData.tag);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Date and Time',
|
||||
dataIndex: 'Date and Time',
|
||||
key: 'Date and Time',
|
||||
fixed: 'left',
|
||||
width: 180,
|
||||
render: (text) => <Text strong>{text}</Text>,
|
||||
},
|
||||
...tags.map((tag) => ({
|
||||
title: tag,
|
||||
dataIndex: tag,
|
||||
key: tag,
|
||||
align: 'center',
|
||||
width: 150,
|
||||
render: (value) => <Text>{value !== undefined ? value : '-'}</Text>,
|
||||
})),
|
||||
];
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ minHeight: 360 }}>
|
||||
{/* Filter Section */}
|
||||
<Card className="filter-card">
|
||||
<div className="filter-header">
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
☰ Filter Data
|
||||
</Text>
|
||||
</div>
|
||||
<Row gutter={16} style={{ marginTop: '16px' }}>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<div className="filter-item">
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>
|
||||
Plant Sub Section
|
||||
</Text>
|
||||
<Select
|
||||
value={plantSubSection}
|
||||
onChange={setPlantSubSection}
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
options={[
|
||||
{ value: 'Semua Plant', label: 'Semua Plant' },
|
||||
{ value: 'Plant 1', label: 'Plant 1' },
|
||||
{ value: 'Plant 2', label: 'Plant 2' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<div className="filter-item">
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>
|
||||
Tanggal Mulai
|
||||
</Text>
|
||||
<DatePicker
|
||||
value={startDate}
|
||||
onChange={setStartDate}
|
||||
format="DD/MM/YYYY"
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<div className="filter-item">
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>
|
||||
Tanggal Akhir
|
||||
</Text>
|
||||
<DatePicker
|
||||
value={endDate}
|
||||
onChange={setEndDate}
|
||||
format="DD/MM/YYYY"
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<div className="filter-item">
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>Periode</Text>
|
||||
<Select
|
||||
value={periode}
|
||||
onChange={setPeriode}
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
options={[
|
||||
{ value: '5 Menit', label: '5 Menit' },
|
||||
{ value: '10 Menit', label: '10 Menit' },
|
||||
{ value: '30 Menit', label: '30 Menit' },
|
||||
{ value: '1 Jam', label: '1 Jam' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={8} style={{ marginTop: '16px' }}>
|
||||
<Col>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
icon={<FileTextOutlined />}
|
||||
disabled={!canViewData}
|
||||
>
|
||||
Tampilkan
|
||||
</Button>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
onClick={handleReset}
|
||||
style={{ backgroundColor: '#6c757d', color: 'white' }}
|
||||
disabled={!canViewData}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
{/* Table Section */}
|
||||
{/* {!canViewData ? (
|
||||
<Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
|
||||
<Text style={{ fontSize: '16px', color: '#999' }}>
|
||||
Anda tidak memiliki akses untuk melihat data report.
|
||||
<br />
|
||||
Silakan hubungi administrator untuk mendapatkan akses.
|
||||
</Text>
|
||||
</Card>
|
||||
) : ( */}
|
||||
<Card style={{ marginTop: '24px' }}>
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px' }}>
|
||||
☰ History Report
|
||||
</Text>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
pagination={false}
|
||||
scroll={{ x: 1000 }}
|
||||
size="middle"
|
||||
/>
|
||||
</Card>
|
||||
{/* )} */}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexReport;
|
||||
@@ -1,297 +0,0 @@
|
||||
import React, { memo, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { Typography, Select, DatePicker, Button, Row, Col, Card } from 'antd';
|
||||
import { ResponsiveLine } from '@nivo/line';
|
||||
import { FileTextOutlined } from '@ant-design/icons';
|
||||
import { decryptData } from '../../../components/Global/Formatter';
|
||||
import dayjs from 'dayjs';
|
||||
import './trending.css';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexTrending = memo(function IndexTrending() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
|
||||
const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
|
||||
const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
|
||||
const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
|
||||
const [periode, setPeriode] = useState('10 Menit');
|
||||
const [userRole, setUserRole] = useState(null);
|
||||
const [roleLevel, setRoleLevel] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
// Get user data and role
|
||||
let userData = null;
|
||||
const sessionData = localStorage.getItem('session');
|
||||
if (sessionData) {
|
||||
userData = decryptData(sessionData);
|
||||
} else {
|
||||
const userRaw = localStorage.getItem('user');
|
||||
if (userRaw) {
|
||||
try {
|
||||
userData = { user: JSON.parse(userRaw) };
|
||||
} catch (e) {
|
||||
console.error('Error parsing user data:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (userData?.user) {
|
||||
setUserRole(userData.user.role_name);
|
||||
setRoleLevel(userData.user.role_level);
|
||||
}
|
||||
|
||||
setBreadcrumbItems([
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• History
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
Trending
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const tagTrendingData = [
|
||||
{
|
||||
id: 'TEMP_SENSOR_1',
|
||||
color: '#FF6B4A',
|
||||
data: [
|
||||
{ y: '08:00', x: 75 },
|
||||
{ y: '08:05', x: 76 },
|
||||
{ y: '08:10', x: 75 },
|
||||
{ y: '08:15', x: 77 },
|
||||
{ y: '08:20', x: 76 },
|
||||
{ y: '08:25', x: 78 },
|
||||
{ y: '08:30', x: 79 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'GAS_LEAK_SENSOR_1',
|
||||
color: '#4ECDC4',
|
||||
data: [
|
||||
{ y: '08:00', x: 10 },
|
||||
{ y: '08:05', x: 150 },
|
||||
{ y: '08:10', x: 40 },
|
||||
{ y: '08:15', x: 20 },
|
||||
{ y: '08:20', x: 15 },
|
||||
{ y: '08:25', x: 18 },
|
||||
{ y: '08:30', x: 25 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'PRESSURE_SENSOR_1',
|
||||
color: '#FFE66D',
|
||||
data: [
|
||||
{ y: '08:00', x: 1.2 },
|
||||
{ y: '08:05', x: 1.3 },
|
||||
{ y: '08:10', x: 1.2 },
|
||||
{ y: '08:15', x: 1.4 },
|
||||
{ y: '08:20', x: 1.5 },
|
||||
{ y: '08:25', x: 1.3 },
|
||||
{ y: '08:30', x: 1.2 },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleReset = () => {
|
||||
setPlantSubSection('Semua Plant');
|
||||
setStartDate(dayjs('2025-09-30'));
|
||||
setEndDate(dayjs('2025-10-09'));
|
||||
setPeriode('10 Menit');
|
||||
};
|
||||
|
||||
// Check if user has permission to view data (all except guest)
|
||||
const canViewData = userRole && userRole !== 'guest';
|
||||
|
||||
// Check if user can export/filter (administrator, engineer)
|
||||
const canExportData = userRole && (userRole === 'administrator' || userRole === 'engineer');
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{/* Filter Section */}
|
||||
<Card className="filter-card">
|
||||
<div className="filter-header">
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
☰ Filter Data
|
||||
</Text>
|
||||
</div>
|
||||
<Row gutter={16} style={{ marginTop: '16px' }}>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<div className="filter-item">
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>
|
||||
Plant Sub Section
|
||||
</Text>
|
||||
<Select
|
||||
value={plantSubSection}
|
||||
onChange={setPlantSubSection}
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
options={[
|
||||
{ value: 'Semua Plant', label: 'Semua Plant' },
|
||||
{ value: 'Plant 1', label: 'Plant 1' },
|
||||
{ value: 'Plant 2', label: 'Plant 2' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<div className="filter-item">
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>Tanggal Mulai</Text>
|
||||
<DatePicker
|
||||
value={startDate}
|
||||
onChange={setStartDate}
|
||||
format="DD/MM/YYYY"
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<div className="filter-item">
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>Tanggal Akhir</Text>
|
||||
<DatePicker
|
||||
value={endDate}
|
||||
onChange={setEndDate}
|
||||
format="DD/MM/YYYY"
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<div className="filter-item">
|
||||
<Text style={{ fontSize: '12px', color: '#666' }}>Periode</Text>
|
||||
<Select
|
||||
value={periode}
|
||||
onChange={setPeriode}
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
options={[
|
||||
{ value: '5 Menit', label: '5 Menit' },
|
||||
{ value: '10 Menit', label: '10 Menit' },
|
||||
{ value: '30 Menit', label: '30 Menit' },
|
||||
{ value: '1 Jam', label: '1 Jam' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={8} style={{ marginTop: '16px' }}>
|
||||
<Col>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
icon={<FileTextOutlined />}
|
||||
disabled={!canViewData}
|
||||
>
|
||||
Tampilkan
|
||||
</Button>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
onClick={handleReset}
|
||||
style={{ backgroundColor: '#6c757d', color: 'white' }}
|
||||
disabled={!canViewData}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
{/* Charts Section */}
|
||||
{/* {!canViewData ? (
|
||||
<Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
|
||||
<Text style={{ fontSize: '16px', color: '#999' }}>
|
||||
Anda tidak memiliki akses untuk melihat data trending.
|
||||
<br />
|
||||
Silakan hubungi administrator untuk mendapatkan akses.
|
||||
</Text>
|
||||
</Card>
|
||||
) : ( */}
|
||||
<>
|
||||
<Row gutter={16} style={{ marginTop: '24px' }}>
|
||||
{/* Line Chart */}
|
||||
<Col xs={24}>
|
||||
<Card className="chart-card">
|
||||
<div className="chart-header">
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
☰ Tag Value Trending
|
||||
</Text>
|
||||
</div>
|
||||
<div style={{ height: '500px', marginTop: '16px' }}>
|
||||
<ResponsiveLine
|
||||
data={tagTrendingData}
|
||||
margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
|
||||
xScale={{
|
||||
type: 'linear',
|
||||
min: 'auto',
|
||||
max: 'auto',
|
||||
stacked: false,
|
||||
reverse: false,
|
||||
}}
|
||||
yScale={{
|
||||
type: 'point',
|
||||
}}
|
||||
curve="natural"
|
||||
axisBottom={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
legend: 'Value',
|
||||
legendOffset: 40,
|
||||
legendPosition: 'middle',
|
||||
}}
|
||||
axisLeft={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
legend: 'Time',
|
||||
legendOffset: -45,
|
||||
legendPosition: 'middle',
|
||||
}}
|
||||
colors={{ datum: 'color' }}
|
||||
pointSize={6}
|
||||
pointColor={{ theme: 'background' }}
|
||||
pointBorderWidth={2}
|
||||
pointBorderColor={{ from: 'serieColor' }}
|
||||
pointLabelYOffset={-12}
|
||||
useMesh={true}
|
||||
legends={[
|
||||
{
|
||||
anchor: 'bottom-right',
|
||||
direction: 'column',
|
||||
justify: false,
|
||||
translateX: 100,
|
||||
translateY: 0,
|
||||
itemsSpacing: 2,
|
||||
itemDirection: 'left-to-right',
|
||||
itemWidth: 80,
|
||||
itemHeight: 20,
|
||||
itemOpacity: 0.75,
|
||||
symbolSize: 12,
|
||||
symbolShape: 'circle',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
{/* )} */}
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexTrending;
|
||||
@@ -1,118 +0,0 @@
|
||||
.trending-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Filter Card */
|
||||
.filter-card {
|
||||
margin-bottom: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.filter-header {
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Statistic Cards */
|
||||
.stat-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stat-card-red::before {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.stat-card-orange::before {
|
||||
background-color: #ff9f43;
|
||||
}
|
||||
|
||||
.stat-card-green::before {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.stat-card-blue::before {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.stat-card-red .stat-icon {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.stat-card-orange .stat-icon {
|
||||
color: #ff9f43;
|
||||
}
|
||||
|
||||
.stat-card-green .stat-icon {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.stat-card-blue .stat-icon {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* Chart Cards */
|
||||
.chart-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.trending-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Ant Design overrides */
|
||||
.trending-container .ant-statistic-title {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.trending-container .ant-statistic-content {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.trending-container .ant-card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
Reference in New Issue
Block a user