feat: convert line chart data to table format and enhance filtering options in IndexReport
This commit is contained in:
@@ -1,116 +1,305 @@
|
||||
import React, { memo, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { Typography, Table } from 'antd';
|
||||
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;
|
||||
|
||||
// Mock Data
|
||||
const initialData = [
|
||||
// Line Chart Data (same as IndexTrending) converted to table format
|
||||
const lineChartData = [
|
||||
{
|
||||
key: '1',
|
||||
plantSubSection: 'Section A',
|
||||
device: 'Device 1',
|
||||
errorCode: 'E-101',
|
||||
status: 'Warning',
|
||||
id: 'Compressor Section 1',
|
||||
color: '#FF6B4A',
|
||||
data: [
|
||||
{ x: 'Jan', y: 15 },
|
||||
{ x: 'Feb', y: 18 },
|
||||
{ x: 'Mar', y: 17 },
|
||||
{ x: 'Apr', y: 24 },
|
||||
{ x: 'Mei', y: 21 },
|
||||
{ x: 'Jun', y: 19 },
|
||||
{ x: 'Jul', y: 28 },
|
||||
{ x: 'Agu', y: 26 },
|
||||
{ x: 'Sep', y: 22 },
|
||||
{ x: 'Okt', y: 25 },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
plantSubSection: 'Section B',
|
||||
device: 'Device 2',
|
||||
errorCode: 'E-102',
|
||||
status: 'Alarm',
|
||||
id: 'Compressor Section 2',
|
||||
color: '#4ECDC4',
|
||||
data: [
|
||||
{ x: 'Jan', y: 12 },
|
||||
{ x: 'Feb', y: 14 },
|
||||
{ x: 'Mar', y: 19 },
|
||||
{ x: 'Apr', y: 21 },
|
||||
{ x: 'Mei', y: 22 },
|
||||
{ x: 'Jun', y: 20 },
|
||||
{ x: 'Jul', y: 19 },
|
||||
{ x: 'Agu', y: 21 },
|
||||
{ x: 'Sep', y: 18 },
|
||||
{ x: 'Okt', y: 20 },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
plantSubSection: 'Section C',
|
||||
device: 'Device 3',
|
||||
errorCode: 'E-103',
|
||||
status: 'Done',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
plantSubSection: 'Section A',
|
||||
device: 'Device 4',
|
||||
errorCode: 'E-104',
|
||||
status: 'Warning',
|
||||
id: 'Compressor Section 3',
|
||||
color: '#FFE66D',
|
||||
data: [
|
||||
{ x: 'Jan', y: 8 },
|
||||
{ x: 'Feb', y: 10 },
|
||||
{ x: 'Mar', y: 12 },
|
||||
{ x: 'Apr', y: 15 },
|
||||
{ x: 'Mei', y: 18 },
|
||||
{ x: 'Jun', y: 20 },
|
||||
{ x: 'Jul', y: 22 },
|
||||
{ x: 'Agu', y: 21 },
|
||||
{ x: 'Sep', y: 19 },
|
||||
{ x: 'Okt', y: 26 },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const IndexReport = memo(function IndexReport() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [data, setData] = useState(initialData);
|
||||
|
||||
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('Bulanan');
|
||||
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> }
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• History
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
Report
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getTitleStyle = (statusName) => {
|
||||
let backgroundColor;
|
||||
switch (statusName.toLowerCase()) {
|
||||
case 'done':
|
||||
backgroundColor = '#52c41a'; // green
|
||||
break;
|
||||
case 'warning':
|
||||
backgroundColor = '#faad14'; // orange
|
||||
break;
|
||||
case 'alarm':
|
||||
backgroundColor = '#f5222d'; // red
|
||||
break;
|
||||
case 'critical':
|
||||
backgroundColor = '#000000'; // black
|
||||
break;
|
||||
default:
|
||||
backgroundColor = 'transparent';
|
||||
}
|
||||
return {
|
||||
backgroundColor,
|
||||
color: '#fff',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
display: 'inline-block'
|
||||
};
|
||||
const handleReset = () => {
|
||||
setPlantSubSection('Semua Plant');
|
||||
setStartDate(dayjs('2025-09-30'));
|
||||
setEndDate(dayjs('2025-10-09'));
|
||||
setPeriode('Bulanan');
|
||||
};
|
||||
|
||||
// Check if user has permission to view data (all except guest)
|
||||
const canViewData = userRole && userRole !== 'guest';
|
||||
|
||||
// Convert chart data to table format
|
||||
const convertToTableData = () => {
|
||||
return lineChartData.map((section, index) => {
|
||||
const rowData = {
|
||||
key: index,
|
||||
section: section.id,
|
||||
color: section.color,
|
||||
};
|
||||
|
||||
// Add each month's data as a column
|
||||
section.data.forEach((point) => {
|
||||
rowData[point.x] = point.y;
|
||||
});
|
||||
|
||||
return rowData;
|
||||
});
|
||||
};
|
||||
|
||||
const tableData = convertToTableData();
|
||||
|
||||
// Create dynamic columns based on months
|
||||
const months = lineChartData[0]?.data.map((point) => point.x) || [];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Plant Sub Section',
|
||||
dataIndex: 'plantSubSection',
|
||||
key: 'plantSubSection',
|
||||
},
|
||||
{
|
||||
title: 'Device',
|
||||
dataIndex: 'device',
|
||||
key: 'device',
|
||||
},
|
||||
{
|
||||
title: 'Error Code',
|
||||
dataIndex: 'errorCode',
|
||||
key: 'errorCode',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status) => (
|
||||
<span style={getTitleStyle(status)}>{status}</span>
|
||||
dataIndex: 'section',
|
||||
key: 'section',
|
||||
fixed: 'left',
|
||||
width: 200,
|
||||
render: (text, record) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: record.color,
|
||||
}}
|
||||
/>
|
||||
<Text strong>{text}</Text>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
...months.map((month) => ({
|
||||
title: month,
|
||||
dataIndex: month,
|
||||
key: month,
|
||||
align: 'center',
|
||||
width: 80,
|
||||
render: (value) => <Text>{value}</Text>,
|
||||
})),
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ padding: 24, minHeight: 360 }}>
|
||||
<Table columns={columns} dataSource={data} />
|
||||
</div>
|
||||
<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: 'Harian', label: 'Harian' },
|
||||
{ value: 'Mingguan', label: 'Mingguan' },
|
||||
{ value: 'Bulanan', label: 'Bulanan' },
|
||||
]}
|
||||
/>
|
||||
</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' }}>
|
||||
☰ Trending Error per Plant Sub Section
|
||||
</Text>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
pagination={false}
|
||||
scroll={{ x: 1000 }}
|
||||
size="middle"
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user