lavoce #7
11
src/App.jsx
11
src/App.jsx
@@ -23,12 +23,11 @@ import IndexShift from './pages/master/shift/IndexShift';
|
||||
import IndexJadwalShift from './pages/jadwalShift/IndexJadwalShift';
|
||||
|
||||
// History
|
||||
import IndexTrending from './pages/history/trending/IndexTrending';
|
||||
import IndexReport from './pages/history/report/IndexReport';
|
||||
import IndexTrending from './pages/report/trending/IndexTrending';
|
||||
import IndexReport from './pages/report/report/IndexReport';
|
||||
|
||||
// Other Pages
|
||||
import IndexNotification from './pages/notification/IndexNotification';
|
||||
import IndexEventAlarm from './pages/eventAlarm/IndexEventAlarm';
|
||||
import IndexRole from './pages/role/IndexRole';
|
||||
import IndexUser from './pages/user/IndexUser';
|
||||
|
||||
@@ -40,6 +39,8 @@ import SvgCompressorC from './pages/home/SvgCompressorC';
|
||||
import SvgAirDryerA from './pages/home/SvgAirDryerA';
|
||||
import SvgAirDryerB from './pages/home/SvgAirDryerB';
|
||||
import SvgAirDryerC from './pages/home/SvgAirDryerC';
|
||||
import IndexHistoryAlarm from './pages/history/alarm/IndexHistoryAlarm';
|
||||
import IndexHistoryEvent from './pages/history/event/IndexHistoryEvent';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@@ -84,8 +85,8 @@ const App = () => {
|
||||
</Route>
|
||||
|
||||
<Route path="/history" element={<ProtectedRoute />}>
|
||||
<Route path="alarm" element={<IndexEventAlarm />} />
|
||||
<Route path="event" element={<IndexEventAlarm />} />
|
||||
<Route path="alarm" element={<IndexHistoryAlarm />} />
|
||||
<Route path="event" element={<IndexHistoryEvent />} />
|
||||
</Route>
|
||||
|
||||
<Route path="/notification" element={<ProtectedRoute />}>
|
||||
|
||||
@@ -108,7 +108,7 @@ const TableList = memo(function TableList({
|
||||
showDeleteDialog={showDeleteDialog}
|
||||
/>
|
||||
) : (
|
||||
<Row gutter={24}>
|
||||
<Row gutter={24} style={{ marginTop: '16px' }}>
|
||||
<Table
|
||||
rowSelection={rowSelection || null}
|
||||
columns={columns}
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
|
||||
import { Form, Typography } from 'antd';
|
||||
import ListEventAlarm from './component/ListEventAlarm';
|
||||
import DetailEventAlarm from './component/DetailEventAlarm';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexEventAlarm = memo(function IndexEventAlarm() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [actionMode, setActionMode] = useState('list');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
setBreadcrumbItems([
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• Event Alarm
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [navigate, setBreadcrumbItems]);
|
||||
|
||||
useEffect(() => {
|
||||
if (actionMode === 'preview') {
|
||||
setIsModalVisible(true);
|
||||
if (selectedData) {
|
||||
form.setFieldsValue(selectedData);
|
||||
}
|
||||
} else {
|
||||
setIsModalVisible(false);
|
||||
form.resetFields();
|
||||
}
|
||||
}, [actionMode, selectedData, form]);
|
||||
|
||||
const handleCancel = () => {
|
||||
setActionMode('list');
|
||||
setSelectedData(null);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ListEventAlarm
|
||||
actionMode={actionMode}
|
||||
setActionMode={setActionMode}
|
||||
selectedData={selectedData}
|
||||
setSelectedData={setSelectedData}
|
||||
/>
|
||||
<DetailEventAlarm
|
||||
visible={isModalVisible}
|
||||
onCancel={handleCancel}
|
||||
form={form}
|
||||
selectedData={selectedData}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexEventAlarm;
|
||||
@@ -1,58 +0,0 @@
|
||||
import { memo } from 'react';
|
||||
import { Modal, Divider, Descriptions } from 'antd';
|
||||
|
||||
const DetailEventAlarm = memo(function DetailEventAlarm({ visible, onCancel, selectedData }) {
|
||||
return (
|
||||
<Modal
|
||||
title="Detail Event Alarm"
|
||||
open={visible}
|
||||
onCancel={onCancel}
|
||||
onOk={onCancel}
|
||||
okText="Tutup"
|
||||
cancelButtonProps={{ style: { display: 'none' } }}
|
||||
width={700}
|
||||
>
|
||||
{selectedData && (
|
||||
<div>
|
||||
<Descriptions bordered column={2}>
|
||||
<Descriptions.Item label="Tanggal" span={2}>
|
||||
{selectedData.tanggal}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Plant Sub Section" span={2}>
|
||||
{selectedData.plant_sub_section}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Device">
|
||||
{selectedData.device}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Tag">
|
||||
{selectedData.tag}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Engineer" span={2}>
|
||||
{selectedData.engineer}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
<Divider style={{ margin: '16px 0' }} />
|
||||
|
||||
{/* Additional Info */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: '16px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#f6f9ff',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #d6e4ff',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '12px', color: '#595959' }}>
|
||||
<strong>Catatan:</strong> Event alarm ini telah tercatat dalam sistem untuk
|
||||
monitoring dan analisis lebih lanjut.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
export default DetailEventAlarm;
|
||||
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;
|
||||
@@ -1,70 +1,9 @@
|
||||
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';
|
||||
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 ListEventAlarm = memo(function ListEventAlarm(props) {
|
||||
const ListHistoryEvent = memo(function ListHistoryEvent(props) {
|
||||
const columns = [
|
||||
{
|
||||
title: 'No',
|
||||
@@ -74,33 +13,27 @@ const ListEventAlarm = memo(function ListEventAlarm(props) {
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: 'Tanggal',
|
||||
dataIndex: 'tanggal',
|
||||
key: 'tanggal',
|
||||
width: '15%',
|
||||
title: 'Datetime',
|
||||
dataIndex: 'datetime',
|
||||
key: 'datetime',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
title: 'Plant Sub Section',
|
||||
dataIndex: 'plant_sub_section',
|
||||
key: 'plant_sub_section',
|
||||
width: '25%',
|
||||
title: 'Tag Name',
|
||||
dataIndex: 'tag_name',
|
||||
key: 'tag_name',
|
||||
width: '40%',
|
||||
},
|
||||
{
|
||||
title: 'Device',
|
||||
dataIndex: 'device',
|
||||
key: 'device',
|
||||
width: '15%',
|
||||
title: 'Stat',
|
||||
dataIndex: 'stat',
|
||||
key: 'stat',
|
||||
width: '5%',
|
||||
},
|
||||
{
|
||||
title: 'Tag',
|
||||
dataIndex: 'tag',
|
||||
key: 'tag',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: 'Engineer',
|
||||
dataIndex: 'engineer',
|
||||
key: 'engineer',
|
||||
title: 'Description',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
width: '15%',
|
||||
},
|
||||
];
|
||||
@@ -111,31 +44,12 @@ const ListEventAlarm = memo(function ListEventAlarm(props) {
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Dummy data function to simulate API call
|
||||
const getAllEventAlarm = async (params) => {
|
||||
return {
|
||||
data: initialAlarmsData,
|
||||
data: [],
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
if (props.actionMode == 'list') {
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
}
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [props.actionMode]);
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ search: searchValue });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
@@ -155,15 +69,13 @@ const ListEventAlarm = memo(function ListEventAlarm(props) {
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search alarm by tanggal, plant, device, tag, engineer..."
|
||||
placeholder="Search ..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
// Auto search when clearing by backspace/delete
|
||||
if (value === '') {
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
handleSearchClear();
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
@@ -201,4 +113,4 @@ const ListEventAlarm = memo(function ListEventAlarm(props) {
|
||||
);
|
||||
});
|
||||
|
||||
export default ListEventAlarm;
|
||||
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,172 +1,173 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Input,
|
||||
Typography,
|
||||
Button,
|
||||
ConfigProvider,
|
||||
Row,
|
||||
Col
|
||||
Form,
|
||||
Select,
|
||||
Spin,
|
||||
Input
|
||||
} from 'antd';
|
||||
import { NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { NotifOk, NotifAlert } from '../../../components/Global/ToastNotif';
|
||||
import { updateJadwalShift, createJadwalShift } from '../../../api/jadwal-shift.jsx';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { Option } = Select;
|
||||
|
||||
const DetailJadwalShift = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const [loadingEmployees, setLoadingEmployees] = useState(false);
|
||||
|
||||
const defaultData = {
|
||||
id: '',
|
||||
nama_shift: '',
|
||||
jam_masuk: '',
|
||||
jam_pulang: '',
|
||||
username: '',
|
||||
nama_employee: '',
|
||||
whatsapp: ''
|
||||
};
|
||||
|
||||
const [FormData, setFormData] = useState(defaultData);
|
||||
const isReadOnly = props.actionMode === 'preview';
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
};
|
||||
|
||||
const fetchEmployees = async () => {
|
||||
setLoadingEmployees(true);
|
||||
try {
|
||||
// Data dummy untuk dropdown karyawan
|
||||
const dummyEmployees = [
|
||||
{ employee_id: '101', nama_employee: 'Andi Pratama' },
|
||||
{ employee_id: '102', nama_employee: 'Budi Santoso' },
|
||||
{ employee_id: '103', nama_employee: 'Citra Lestari' },
|
||||
{ employee_id: '104', nama_employee: 'Dewi Anggraini' },
|
||||
{ employee_id: '105', nama_employee: 'Eko Wahyudi' },
|
||||
{ employee_id: '106', nama_employee: 'Fitriani' },
|
||||
];
|
||||
setEmployees(dummyEmployees);
|
||||
} catch (error) {
|
||||
NotifAlert({ icon: 'error', title: 'Gagal', message: 'Gagal memuat daftar karyawan.' });
|
||||
} finally {
|
||||
setLoadingEmployees(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
// This is a dummy save function for slicing purposes
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
let payload;
|
||||
let responseMessage;
|
||||
|
||||
setConfirmLoading(true);
|
||||
if (props.actionMode === 'edit') {
|
||||
payload = { ...props.selectedData, ...values };
|
||||
// await updateJadwalShift(payload.schedule_id, payload);
|
||||
console.log("Updating schedule with payload:", payload);
|
||||
responseMessage = 'Jadwal berhasil diperbarui.';
|
||||
} else { // 'add' mode
|
||||
payload = {
|
||||
employee_id: values.employee_id,
|
||||
shift_name: props.selectedData.shift_name,
|
||||
schedule_date: new Date().toISOString().split('T')[0], // Example date
|
||||
};
|
||||
// await createJadwalShift(payload);
|
||||
console.log("Creating schedule with payload:", payload);
|
||||
responseMessage = 'User berhasil ditambahkan ke jadwal.';
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, 500)); // Simulasi API call
|
||||
|
||||
NotifOk({ icon: 'success', title: 'Berhasil', message: responseMessage });
|
||||
props.setActionMode('list'); // Menutup modal dan memicu refresh di parent
|
||||
} catch (error) {
|
||||
const message = error.response?.data?.message || 'Gagal memperbarui jadwal.';
|
||||
NotifAlert({ icon: 'error', title: 'Gagal', message });
|
||||
} finally {
|
||||
setConfirmLoading(false);
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Data dummy berhasil disimpan.',
|
||||
});
|
||||
props.setActionMode('list');
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.selectedData) {
|
||||
setFormData(props.selectedData);
|
||||
} else {
|
||||
setFormData(defaultData);
|
||||
// Hanya jalankan jika modal untuk 'edit' atau 'preview' terbuka
|
||||
if (props.showModal) {
|
||||
fetchEmployees();
|
||||
if (props.actionMode === 'edit' || props.actionMode === 'preview') {
|
||||
form.setFieldsValue({
|
||||
employee_id: props.selectedData.employee_id,
|
||||
shift_name: props.selectedData.shift_name,
|
||||
});
|
||||
} else if (props.actionMode === 'add') {
|
||||
form.setFieldsValue({
|
||||
shift_name: props.selectedData.shift_name,
|
||||
employee_id: null, // Reset employee selection
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [props.showModal, props.selectedData]);
|
||||
|
||||
// Dummy handler for slicing
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({ ...FormData, [name]: value });
|
||||
};
|
||||
}, [props.actionMode, props.showModal, props.selectedData, form]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${
|
||||
props.actionMode === 'add'
|
||||
? 'Tambah'
|
||||
: props.actionMode === 'preview'
|
||||
? 'Preview'
|
||||
: 'Edit'
|
||||
} Jadwal Shift`}
|
||||
title={isReadOnly ? 'Preview Jadwal' : (props.actionMode === 'edit' ? 'Edit Jadwal' : 'Tambah User')}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
width={800}
|
||||
width={600}
|
||||
footer={[
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{!props.readOnly && (
|
||||
<Button loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
<Button key="back" onClick={handleCancel}>
|
||||
{isReadOnly ? 'Tutup' : 'Batal'}
|
||||
</Button>
|
||||
{!isReadOnly && (
|
||||
<Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave} style={{ backgroundColor: '#23A55A' }}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</React.Fragment>,
|
||||
]}
|
||||
>
|
||||
{FormData && (
|
||||
<div>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={12}>
|
||||
<Text strong>Nama Karyawan</Text>
|
||||
<Input
|
||||
name="nama_employee"
|
||||
value={FormData.nama_employee}
|
||||
onChange={handleInputChange}
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Username</Text>
|
||||
<Input
|
||||
name="username"
|
||||
value={FormData.username}
|
||||
onChange={handleInputChange}
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Nama Shift</Text>
|
||||
<Input
|
||||
name="nama_shift"
|
||||
value={FormData.nama_shift}
|
||||
onChange={handleInputChange}
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Whatsapp</Text>
|
||||
<Input
|
||||
name="whatsapp"
|
||||
value={FormData.whatsapp}
|
||||
onChange={handleInputChange}
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Jam Masuk</Text>
|
||||
<Input
|
||||
name="jam_masuk"
|
||||
value={FormData.jam_masuk}
|
||||
onChange={handleInputChange}
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Jam Pulang</Text>
|
||||
<Input
|
||||
name="jam_pulang"
|
||||
value={FormData.jam_pulang}
|
||||
onChange={handleInputChange}
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
<Spin spinning={loadingEmployees} tip="Memuat data...">
|
||||
<Form form={form} layout="vertical" name="shift_form">
|
||||
{props.actionMode === 'add' ? (
|
||||
<>
|
||||
<Form.Item
|
||||
name="shift_name"
|
||||
label="Shift"
|
||||
>
|
||||
<Input disabled />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="employee_id"
|
||||
label="Nama Karyawan"
|
||||
rules={[{ required: true, message: 'Nama karyawan wajib dipilih!' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="Pilih karyawan"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
>
|
||||
{employees.map(emp => (
|
||||
<Option key={emp.employee_id} value={emp.employee_id}>{emp.nama_employee}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Form.Item
|
||||
name="employee_id"
|
||||
label="Nama Karyawan"
|
||||
rules={[{ required: true, message: 'Nama karyawan wajib dipilih!' }]}
|
||||
>
|
||||
<Select placeholder="Pilih karyawan" disabled={isReadOnly} showSearch optionFilterProp="children">
|
||||
{employees.map(emp => (
|
||||
<Option key={emp.employee_id} value={emp.employee_id}>{emp.nama_employee}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="shift_name" label="Shift" rules={[{ required: true, message: 'Shift wajib dipilih!' }]}>
|
||||
<Select placeholder="Pilih shift" disabled={isReadOnly}>
|
||||
<Option value="PAGI">PAGI</Option>
|
||||
<Option value="SIANG">SIANG</Option>
|
||||
<Option value="MALAM">MALAM</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
</Spin>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,153 +1,146 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
|
||||
import { Space, ConfigProvider, Button, Row, Col, Card, Input, Typography, Spin, Divider, Checkbox, Select } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
SearchOutlined,
|
||||
EyeOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
SearchOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
|
||||
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import TableList from '../../../components/Global/TableList';
|
||||
import { getAllJadwalShift, deleteJadwalShift } from '../../../api/jadwal-shift';
|
||||
import { getAllJadwalShift, deleteJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift.jsx';
|
||||
|
||||
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
{
|
||||
title: 'Tanggal Jadwal',
|
||||
dataIndex: 'schedule_date',
|
||||
key: 'schedule_date',
|
||||
render: (date) => date ? new Date(date).toLocaleDateString('id-ID') : '-',
|
||||
},
|
||||
{
|
||||
title: 'Nama Shift',
|
||||
dataIndex: 'shift_name',
|
||||
key: 'shift_name',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Jam Masuk',
|
||||
dataIndex: 'start_time',
|
||||
key: 'start_time',
|
||||
render: (time) => time || '-',
|
||||
},
|
||||
{
|
||||
title: 'Jam Pulang',
|
||||
dataIndex: 'end_time',
|
||||
key: 'end_time',
|
||||
render: (time) => time || '-',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'is_active',
|
||||
key: 'is_active',
|
||||
render: (isActive) => (
|
||||
<Tag color={isActive ? 'green' : 'red'}>
|
||||
{isActive ? 'Aktif' : 'Tidak Aktif'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Aksi',
|
||||
key: 'aksi',
|
||||
align: 'center',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<EyeOutlined style={{ color: '#1890ff' }} />}
|
||||
onClick={() => showPreviewModal(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<EditOutlined style={{ color: '#faad14' }} />}
|
||||
onClick={() => showEditModal(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => showDeleteDialog(record)}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const ListJadwalShift = memo(function ListJadwalShift(props) {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const defaultFilter = { criteria: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [groupedSchedules, setGroupedSchedules] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [isEditMode, setIsEditMode] = useState(false);
|
||||
const [selectedSchedules, setSelectedSchedules] = useState([]);
|
||||
const [editingShift, setEditingShift] = useState(null); // State for shift-specific edit mode
|
||||
const [pendingChanges, setPendingChanges] = useState({}); // State for bulk shift edits
|
||||
const [employeeOptions, setEmployeeOptions] = useState([]); // State for employee dropdown
|
||||
const navigate = useNavigate();
|
||||
|
||||
const getData = async (queryParams) => {
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: queryParams.page || 1,
|
||||
limit: queryParams.limit || 10,
|
||||
criteria: queryParams.criteria || ''
|
||||
});
|
||||
// Function to format timestamp without moment.js
|
||||
const formatTimestamp = (timestamp) => {
|
||||
const date = new Date(timestamp);
|
||||
const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
||||
const optionsTime = { hour: '2-digit', minute: '2-digit', hour12: false };
|
||||
|
||||
const response = await getAllJadwalShift(params);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('Error fetching jadwal shift:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: 'Gagal mengambil data jadwal shift.',
|
||||
});
|
||||
return {
|
||||
status: 500,
|
||||
data: {
|
||||
data: [],
|
||||
paging: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
page_total: 0
|
||||
}
|
||||
const formattedDate = date.toLocaleDateString('id-ID', optionsDate);
|
||||
const formattedTime = date.toLocaleTimeString('id-ID', optionsTime);
|
||||
return `${formattedDate} pukul ${formattedTime}`;
|
||||
};
|
||||
|
||||
const formatRelativeTimestamp = (timestamp) => {
|
||||
const now = new Date();
|
||||
const date = new Date(timestamp);
|
||||
const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
const startOfYesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
|
||||
|
||||
let dayString;
|
||||
if (date >= startOfToday) {
|
||||
dayString = 'Hari ini';
|
||||
} else if (date >= startOfYesterday) {
|
||||
dayString = 'Kemarin';
|
||||
} else {
|
||||
dayString = date.toLocaleDateString('id-ID', { day: 'numeric', month: 'long' });
|
||||
}
|
||||
|
||||
const timeString = date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', hour12: false }).replace('.', ':');
|
||||
return `${dayString}, ${timeString}`;
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// const params = new URLSearchParams({ ... });
|
||||
// const response = await getAllJadwalShift(params);
|
||||
|
||||
// ================== START: DUMMY DATA FOR VISUAL PREVIEW ==================
|
||||
// This section creates dummy schedules and users to ensure all shifts are populated.
|
||||
// The actual API call is commented out for now.
|
||||
|
||||
const mockSchedules = [
|
||||
{ schedule_id: 1, employee_id: '101', shift_name: 'PAGI', nama_employee: 'Andi Pratama', whatsapp: '081234567890', updated_by: 'Admin Super', updated_at: '2024-05-21T10:00:00' },
|
||||
{ schedule_id: 2, employee_id: '102', shift_name: 'PAGI', nama_employee: 'Budi Santoso', whatsapp: '081234567891', updated_by: 'Admin Super', updated_at: '2024-05-21T10:00:00' },
|
||||
{ schedule_id: 3, employee_id: '103', shift_name: 'SIANG', nama_employee: 'Citra Lestari', whatsapp: '081234567892', updated_by: 'John Doe', updated_at: '2024-05-21T09:45:00' },
|
||||
{ schedule_id: 4, employee_id: '104', shift_name: 'SIANG', nama_employee: 'Dewi Anggraini', whatsapp: '081234567893', updated_by: 'John Doe', updated_at: '2024-05-21T09:45:00' },
|
||||
{ schedule_id: 5, employee_id: '105', shift_name: 'MALAM', nama_employee: 'Eko Wahyudi', whatsapp: '081234567894', updated_by: 'Jane Smith', updated_at: '2024-05-20T22:15:00' },
|
||||
{ schedule_id: 6, employee_id: '106', shift_name: 'MALAM', nama_employee: 'Fitriani', whatsapp: '081234567895', updated_by: 'Jane Smith', updated_at: '2024-05-20T22:15:00' },
|
||||
];
|
||||
|
||||
// Dummy employee data for dropdowns
|
||||
const dummyEmployees = [
|
||||
{ employee_id: '101', nama_employee: 'Andi Pratama' },
|
||||
{ employee_id: '102', nama_employee: 'Budi Santoso' },
|
||||
{ employee_id: '103', nama_employee: 'Citra Lestari' },
|
||||
{ employee_id: '104', nama_employee: 'Dewi Anggraini' },
|
||||
{ employee_id: '105', nama_employee: 'Eko Wahyudi' },
|
||||
{ employee_id: '106', nama_employee: 'Fitriani' },
|
||||
];
|
||||
setEmployeeOptions(dummyEmployees);
|
||||
// =================== END: DUMMY DATA FOR VISUAL PREVIEW ===================
|
||||
|
||||
|
||||
const grouped = mockSchedules.reduce((acc, schedule) => {
|
||||
const shiftName = schedule.shift_name.toUpperCase().trim();
|
||||
if (!acc[shiftName]) {
|
||||
acc[shiftName] = { users: [], lastUpdate: { user: 'N/A', timestamp: '1970-01-01T00:00:00Z' } };
|
||||
}
|
||||
acc[shiftName].users.push(schedule);
|
||||
|
||||
// Find the latest update timestamp for the shift
|
||||
const currentUpdate = new Date(schedule.updated_at || schedule.created_at);
|
||||
const lastUpdate = new Date(acc[shiftName].lastUpdate.timestamp);
|
||||
if (currentUpdate > lastUpdate) {
|
||||
acc[shiftName].lastUpdate = {
|
||||
user: schedule.updated_by || 'N/A',
|
||||
timestamp: currentUpdate.toISOString()
|
||||
};
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const finalGrouped = {
|
||||
'PAGI': grouped['PAGI'] || { users: [], lastUpdate: { user: 'N/A', timestamp: new Date().toISOString() } },
|
||||
'SIANG': grouped['SIANG'] || { users: [], lastUpdate: { user: 'N/A', timestamp: new Date().toISOString() } },
|
||||
'MALAM': grouped['MALAM'] || { users: [], lastUpdate: { user: 'N/A', timestamp: new Date().toISOString() } },
|
||||
};
|
||||
|
||||
setGroupedSchedules(finalGrouped);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error processing dummy data:', error);
|
||||
NotifAlert({ // Changed to NotifAlert for consistency
|
||||
icon: 'error', // Changed to error icon
|
||||
title: 'Gagal Memuat Data', // Changed title
|
||||
message: 'Terjadi kesalahan saat memuat data jadwal shift.', // Changed message
|
||||
});
|
||||
} finally {
|
||||
// Add a small delay to simulate network loading
|
||||
setTimeout(() => setLoading(false), 500);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
if (props.actionMode === 'list') {
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
}
|
||||
fetchData();
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [props.actionMode]);
|
||||
}, [searchValue, props.actionMode]); // Refetch when searchValue changes or after modal closes
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ criteria: searchValue });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
const handleSearch = (value) => {
|
||||
setSearchValue(value);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter({ criteria: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const showPreviewModal = (param) => {
|
||||
props.setSelectedData(param);
|
||||
props.setActionMode('preview');
|
||||
};
|
||||
|
||||
const showEditModal = (param = null) => {
|
||||
props.setSelectedData(param);
|
||||
props.setActionMode('edit');
|
||||
};
|
||||
|
||||
const showAddModal = (param = null) => {
|
||||
@@ -155,123 +148,361 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
|
||||
props.setActionMode('add');
|
||||
};
|
||||
|
||||
const showDeleteDialog = (param) => {
|
||||
const dateStr = param.schedule_date ? new Date(param.schedule_date).toLocaleDateString('id-ID') : 'tanggal tidak diketahui';
|
||||
const handleAction = (mode, record) => {
|
||||
props.setSelectedData(record);
|
||||
props.setActionMode(mode);
|
||||
};
|
||||
|
||||
const showDeleteDialog = (user) => {
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi Hapus',
|
||||
message: `Jadwal shift tanggal ${dateStr} akan dihapus?`,
|
||||
onConfirm: () => handleDelete(param.schedule_id),
|
||||
onCancel: () => props.setSelectedData(null),
|
||||
message: `Hapus jadwal untuk karyawan "${user.nama_employee}"?`,
|
||||
onConfirm: () => handleDelete(user.schedule_id),
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
const handleDelete = async (schedule_id) => {
|
||||
try {
|
||||
const response = await deleteJadwalShift(id);
|
||||
if (response.statusCode === 200) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Data Jadwal Shift berhasil dihapus.',
|
||||
});
|
||||
doFilter();
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: response.message || 'Gagal menghapus data jadwal shift.',
|
||||
});
|
||||
}
|
||||
await deleteJadwalShift(schedule_id);
|
||||
NotifOk({ icon: 'success', title: 'Berhasil', message: 'Jadwal berhasil dihapus.' });
|
||||
fetchData(); // Refresh data
|
||||
} catch (error) {
|
||||
console.error('Error deleting jadwal shift:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: 'Terjadi kesalahan saat menghapus data.',
|
||||
});
|
||||
console.error("Failed to delete schedule:", error);
|
||||
NotifAlert({ icon: "error", title: "Gagal", message: "Gagal menghapus jadwal." });
|
||||
}
|
||||
};
|
||||
|
||||
const handleShiftEditMode = (shiftName) => {
|
||||
setEditingShift(shiftName);
|
||||
setPendingChanges({}); // Clear pending changes
|
||||
setSelectedSchedules([]); // Clear selections when entering a new edit mode
|
||||
};
|
||||
|
||||
const cancelShiftEditMode = () => {
|
||||
setEditingShift(null);
|
||||
setPendingChanges({});
|
||||
setSelectedSchedules([]);
|
||||
};
|
||||
|
||||
const handleSelectSchedule = (scheduleId, isChecked) => {
|
||||
if (isChecked) {
|
||||
setSelectedSchedules(prev => [...prev, scheduleId]);
|
||||
} else {
|
||||
setSelectedSchedules(prev => prev.filter(id => id !== scheduleId));
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkUpdateChange = (scheduleId, field, value) => {
|
||||
setPendingChanges(prev => ({
|
||||
...prev,
|
||||
[scheduleId]: {
|
||||
...prev[scheduleId],
|
||||
[field]: value,
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const handleBulkSave = async () => {
|
||||
if (Object.keys(pendingChanges).length === 0) {
|
||||
NotifAlert({ icon: 'info', title: 'Tidak Ada Perubahan', message: 'Tidak ada perubahan untuk disimpan.' });
|
||||
cancelShiftEditMode();
|
||||
return;
|
||||
}
|
||||
|
||||
const updatePromises = Object.keys(pendingChanges).map(scheduleId => {
|
||||
const originalSchedule = groupedSchedules[editingShift].users.find(u => u.schedule_id.toString() === scheduleId);
|
||||
const updatedData = { ...originalSchedule, ...pendingChanges[scheduleId] };
|
||||
// return updateJadwalShift(scheduleId, updatedData); // UNCOMMENT FOR REAL API
|
||||
console.log(`Simulating update for schedule ${scheduleId}:`, updatedData); // DUMMY LOG
|
||||
return Promise.resolve(); // DUMMY PROMISE
|
||||
});
|
||||
|
||||
try {
|
||||
await Promise.all(updatePromises);
|
||||
NotifOk({ icon: 'success', title: 'Berhasil', message: 'Semua perubahan berhasil disimpan.' });
|
||||
fetchData();
|
||||
cancelShiftEditMode();
|
||||
} catch (error) {
|
||||
NotifAlert({ icon: 'error', title: 'Gagal', message: 'Gagal menyimpan beberapa perubahan.' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = () => {
|
||||
if (selectedSchedules.length === 0) {
|
||||
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Pilih setidaknya satu jadwal untuk dihapus.' });
|
||||
return;
|
||||
}
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: `Konfirmasi Hapus`,
|
||||
message: `Anda yakin ingin menghapus ${selectedSchedules.length} jadwal yang dipilih?`,
|
||||
onConfirm: async () => {
|
||||
await Promise.all(selectedSchedules.map(id => deleteJadwalShift(id)));
|
||||
NotifOk({ icon: 'success', title: 'Berhasil', message: `${selectedSchedules.length} jadwal berhasil dihapus.` });
|
||||
fetchData();
|
||||
// Exit both edit modes
|
||||
setIsEditMode(false);
|
||||
setEditingShift(null);
|
||||
setSelectedSchedules([]);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card>
|
||||
<Title level={3}>Jadwal Shift</Title>
|
||||
<Divider />
|
||||
|
||||
<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="Cari jadwal shift..."
|
||||
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',
|
||||
{isEditMode ? (
|
||||
<Col span={24}>
|
||||
<Row justify="space-between" align="middle">
|
||||
<Text strong>Mode Edit Halaman</Text>
|
||||
<Space wrap align="center">
|
||||
<Button onClick={() => { setIsEditMode(false); setPendingChanges({}); setSelectedSchedules([]); }}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
onClick={handleBulkDelete}
|
||||
disabled={selectedSchedules.length === 0}
|
||||
>
|
||||
Hapus yang Dipilih ({selectedSchedules.length})
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleBulkSave}
|
||||
style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
|
||||
>
|
||||
Simpan Semua Perubahan
|
||||
</Button>
|
||||
</Space>
|
||||
</Row>
|
||||
</Col>
|
||||
) : (
|
||||
<>
|
||||
<Col>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Space wrap size="small">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => showAddModal()}
|
||||
<Button
|
||||
icon={<EditOutlined />}
|
||||
size="large"
|
||||
onClick={() => { setIsEditMode(true); setEditingShift(null); setPendingChanges({}); setSelectedSchedules([]); }}
|
||||
>
|
||||
Edit Halaman
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Cari berdasarkan nama..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
if (value === '') {
|
||||
handleSearchClear();
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
/>
|
||||
}
|
||||
size="large"
|
||||
>
|
||||
Tambah Data
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
</Col>
|
||||
/>
|
||||
</Col>
|
||||
</>
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'schedule_date'}
|
||||
showPreviewModal={showPreviewModal}
|
||||
showEditModal={showEditModal}
|
||||
showDeleteDialog={showDeleteDialog}
|
||||
getData={getData}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Spin spinning={loading} tip="Memuat data...">
|
||||
<div style={{ marginTop: '24px' }}>
|
||||
{(Object.keys(groupedSchedules).length === 0 && !loading) ? (
|
||||
<Text>Tidak ada data jadwal untuk ditampilkan.</Text>
|
||||
) : (
|
||||
Object.keys(groupedSchedules).map(shiftName => ( // Iterate through each shift (PAGI, SIANG, MALAM)
|
||||
<div key={shiftName} style={{ marginBottom: '32px' }}> {/* Container for each shift section */}
|
||||
<Row justify="space-between" align="middle" style={{ paddingBottom: '12px', borderBottom: '1px solid #f0f0f0', marginBottom: '16px' }}>
|
||||
<Col>
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
SHIFT {shiftName} ({groupedSchedules[shiftName].users.length} Karyawan)
|
||||
</Title>
|
||||
</Col>
|
||||
{editingShift === shiftName ? (
|
||||
<Col>
|
||||
<Space wrap>
|
||||
<Button onClick={cancelShiftEditMode}>Batal</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
onClick={handleBulkDelete}
|
||||
disabled={selectedSchedules.length === 0}
|
||||
>
|
||||
Hapus Dipilih ({selectedSchedules.length})
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleBulkSave}
|
||||
style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
|
||||
>
|
||||
Simpan Perubahan
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
) : (
|
||||
<Col>
|
||||
<Space wrap>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => showAddModal({ shift_name: shiftName })}
|
||||
style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
|
||||
disabled={editingShift !== null || isEditMode}
|
||||
>
|
||||
Tambah User
|
||||
</Button>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleShiftEditMode(shiftName)}
|
||||
disabled={editingShift !== null || isEditMode}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
|
||||
{/* Horizontal scrollable container for employee cards */}
|
||||
<div style={{ display: 'flex', overflowX: 'auto', gap: '16px', paddingBottom: '10px' }}>
|
||||
{groupedSchedules[shiftName].users.length > 0 ? (
|
||||
groupedSchedules[shiftName].users.map(user => (
|
||||
<Card
|
||||
key={user.nik}
|
||||
hoverable
|
||||
style={{
|
||||
width: 320, height: 240, flexShrink: 0, textAlign: 'left', border: '1px solid #42AAFF',
|
||||
opacity: (editingShift !== null && editingShift !== shiftName) ? 0.5 : 1, // Dim inactive shifts
|
||||
pointerEvents: (editingShift !== null && editingShift !== shiftName) ? 'none' : 'auto' // Disable interaction on inactive shifts
|
||||
}}
|
||||
bodyStyle={{ padding: '16px', height: '100%' }}
|
||||
>
|
||||
{isEditMode && editingShift === null && ( // Checkbox for global delete mode only
|
||||
<Checkbox
|
||||
style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }}
|
||||
checked={selectedSchedules.includes(user.schedule_id)}
|
||||
onChange={(e) => handleSelectSchedule(user.schedule_id, e.target.checked)}
|
||||
onClick={(e) => e.stopPropagation()} // Prevent card click
|
||||
/>
|
||||
)}
|
||||
{editingShift === shiftName || (isEditMode && editingShift === null) ? ( // Global or Shift-specific Edit Mode
|
||||
// EDIT MODE VIEW
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<Space direction="vertical" style={{ width: '100%', marginTop: '24px' }}>
|
||||
<Select
|
||||
showSearch
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Pilih Karyawan"
|
||||
optionFilterProp="children"
|
||||
defaultValue={user.employee_id}
|
||||
onChange={(value) => handleBulkUpdateChange(user.schedule_id, 'employee_id', value)}
|
||||
>
|
||||
{employeeOptions.map(emp => (
|
||||
<Select.Option key={emp.employee_id} value={emp.employee_id}>{emp.nama_employee}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
defaultValue={user.shift_name}
|
||||
onChange={(value) => handleBulkUpdateChange(user.schedule_id, 'shift_name', value)}
|
||||
>
|
||||
<Select.Option value="PAGI">PAGI</Select.Option>
|
||||
<Select.Option value="SIANG">SIANG</Select.Option>
|
||||
<Select.Option value="MALAM">MALAM</Select.Option>
|
||||
</Select>
|
||||
</Space>
|
||||
<Checkbox
|
||||
style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }}
|
||||
checked={selectedSchedules.includes(user.schedule_id)}
|
||||
onChange={(e) => handleSelectSchedule(user.schedule_id, e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
// NORMAL VIEW
|
||||
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
|
||||
<div>
|
||||
<Text strong ellipsis style={{
|
||||
fontSize: '22px', display: 'inline-block', backgroundColor: '#42AAFF',
|
||||
color: '#FFFFFF', padding: '4px 8px', borderRadius: '4px', marginBottom: '8px'
|
||||
}}>{user.nama_employee}</Text>
|
||||
<Text style={{ fontSize: '18px', display: 'block' }}>{user.whatsapp}</Text>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
|
||||
<Text style={{ fontSize: '12px', display: 'block', lineHeight: '1.4' }}>
|
||||
<Text strong>Terakhir diperbarui</Text> <br />
|
||||
{formatRelativeTimestamp(groupedSchedules[shiftName].lastUpdate.timestamp)} <br />
|
||||
oleh {groupedSchedules[shiftName].lastUpdate.user}
|
||||
</Text>
|
||||
<Space>
|
||||
<Button type="text" size="small" icon={<EyeOutlined />} onClick={() => handleAction('preview', user)} style={{ color: '#1890ff', borderColor: '#1890ff' }} />
|
||||
<Button type="text" size="small" icon={<EditOutlined />} onClick={() => handleAction('edit', user)} style={{ color: '#faad14', borderColor: '#faad14' }} />
|
||||
<Button danger type="text" size="small" icon={<DeleteOutlined />} onClick={() => showDeleteDialog(user)} style={{ borderColor: '#ff4d4f' }} />
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<Text type="secondary" style={{ marginLeft: '16px' }}>Tidak ada karyawan yang dijadwalkan untuk shift ini.</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListJadwalShift;
|
||||
export default ListJadwalShift;
|
||||
|
||||
@@ -75,13 +75,13 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'model',
|
||||
title: 'Model',
|
||||
dataIndex: 'model',
|
||||
key: 'model',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: 'status',
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: '10%',
|
||||
|
||||
@@ -14,6 +14,7 @@ const DetailDevice = (props) => {
|
||||
device_id: '',
|
||||
device_code: '',
|
||||
device_name: '',
|
||||
brand_device: '',
|
||||
is_active: true,
|
||||
device_location: '',
|
||||
device_description: '',
|
||||
@@ -228,6 +229,7 @@ const DetailDevice = (props) => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Device Name</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
@@ -239,6 +241,23 @@ const DetailDevice = (props) => {
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Brand Device</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="brand_device"
|
||||
value={formData.brand_device}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Brand Device"
|
||||
readOnly={props.readOnly}
|
||||
disabled
|
||||
style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed',
|
||||
color: formData.brand_device ? '#000000' : '#bfbfbf',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Device Location</Text>
|
||||
<Input
|
||||
|
||||
@@ -34,6 +34,12 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
key: 'device_name',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Brand Device',
|
||||
dataIndex: 'brand_device',
|
||||
key: 'brand_device',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Location',
|
||||
dataIndex: 'device_location',
|
||||
|
||||
@@ -1,11 +1,22 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, TimePicker, Space } from 'antd';
|
||||
import {
|
||||
Modal,
|
||||
Input,
|
||||
Typography,
|
||||
Switch,
|
||||
Button,
|
||||
ConfigProvider,
|
||||
Divider,
|
||||
TimePicker,
|
||||
Space,
|
||||
} from 'antd';
|
||||
import { NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import { createShift, updateShift } from '../../../../api/master-shift';
|
||||
import { validateRun } from '../../../../Utils/validate';
|
||||
import dayjs from 'dayjs';
|
||||
import utc from 'dayjs/plugin/utc';
|
||||
|
||||
// Mock API calls for demonstration
|
||||
const createShift = async (payload) => ({ statusCode: 201, data: { ...payload, shift_id: Date.now() } });
|
||||
const updateShift = async (id, payload) => ({ statusCode: 200, data: { ...payload, shift_id: id } });
|
||||
dayjs.extend(utc);
|
||||
|
||||
const { Text } = Typography;
|
||||
const timeFormat = 'HH:mm';
|
||||
@@ -16,13 +27,21 @@ const DetailShift = (props) => {
|
||||
const defaultData = {
|
||||
shift_id: '',
|
||||
shift_name: '',
|
||||
start_time: '08:00',
|
||||
end_time: '16:00',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
@@ -31,125 +50,264 @@ const DetailShift = (props) => {
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
|
||||
if (!formData.shift_name) {
|
||||
NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Nama Shift wajib diisi.' });
|
||||
// Daftar aturan validasi
|
||||
const validationRules = [
|
||||
{ field: 'shift_name', label: 'Shift Name', required: true },
|
||||
{ field: 'start_time', label: 'Start Time', required: true },
|
||||
{ field: 'end_time', label: 'End Time', required: true },
|
||||
];
|
||||
|
||||
if (
|
||||
validateRun(formData, validationRules, (errorMessages) => {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: errorMessages,
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
})
|
||||
)
|
||||
return;
|
||||
|
||||
// Validasi format waktu
|
||||
if (!formData.start_time || !formData.end_time) {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: 'Waktu Mulai dan Waktu Selesai wajib diisi.',
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Pastikan format waktu HH:mm sesuai validasi BE (regex: /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/)
|
||||
const formatTimeForAPI = (timeValue) => {
|
||||
if (!timeValue) return '';
|
||||
|
||||
// Jika sudah dalam format HH:mm, return langsung
|
||||
if (typeof timeValue === 'string' && timeValue.match(/^\d{2}:\d{2}$/)) {
|
||||
return timeValue;
|
||||
}
|
||||
|
||||
// Parse dengan dayjs dan format ke HH:mm (string murni, bukan Date object)
|
||||
const time = dayjs(timeValue, 'HH:mm', true); // strict mode
|
||||
if (time.isValid()) {
|
||||
return time.format('HH:mm'); // Return string "08:00" bukan Date object
|
||||
}
|
||||
|
||||
// Fallback: coba parse sebagai ISO date dan ambil jam/menitnya (gunakan UTC)
|
||||
const isoTime = dayjs.utc(timeValue);
|
||||
if (isoTime.isValid()) {
|
||||
return isoTime.format('HH:mm');
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const payload = {
|
||||
shift_name: formData.shift_name,
|
||||
start_time: formData.start_time,
|
||||
end_time: formData.end_time,
|
||||
start_time: formatTimeForAPI(formData.start_time),
|
||||
end_time: formatTimeForAPI(formData.end_time),
|
||||
is_active: formData.is_active,
|
||||
};
|
||||
|
||||
console.log('Payload yang dikirim:', payload);
|
||||
console.log('Type start_time:', typeof payload.start_time, payload.start_time);
|
||||
console.log('Type end_time:', typeof payload.end_time, payload.end_time);
|
||||
|
||||
const response =
|
||||
props.actionMode === 'edit'
|
||||
? await updateShift(formData.shift_id, payload)
|
||||
: await createShift(payload);
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
NotifOk({ icon: 'success', title: 'Berhasil', message: `Data Shift berhasil disimpan.` });
|
||||
const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
|
||||
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Shift berhasil ${action}.`,
|
||||
});
|
||||
|
||||
props.setActionMode('list');
|
||||
} else {
|
||||
NotifOk({ icon: 'error', title: 'Gagal', message: response?.message || 'Gagal menyimpan data.' });
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
NotifOk({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan server.' });
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: error.message || 'Terjadi kesalahan pada server.',
|
||||
});
|
||||
} finally {
|
||||
setConfirmLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({ ...formData, [name]: value });
|
||||
const handleTimeChange = (time, _, field) => {
|
||||
// Pastikan format HH:mm yang konsisten sesuai validasi BE
|
||||
const formattedTime = time && time.isValid() ? time.format('HH:mm') : '';
|
||||
setFormData({
|
||||
...formData,
|
||||
[field]: formattedTime,
|
||||
});
|
||||
};
|
||||
|
||||
const handleTimeChange = (time, timeString, field) => {
|
||||
setFormData({ ...formData, [field]: timeString });
|
||||
const handleStatusToggle = (checked) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
is_active: checked,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.selectedData) {
|
||||
setFormData(props.selectedData);
|
||||
// Konversi waktu dari berbagai format ke HH:mm menggunakan dayjs
|
||||
const convertTimeToString = (timeValue) => {
|
||||
if (!timeValue) return '';
|
||||
|
||||
// Jika sudah dalam format HH:mm, return langsung
|
||||
if (typeof timeValue === 'string' && timeValue.match(/^\d{2}:\d{2}$/)) {
|
||||
return timeValue;
|
||||
}
|
||||
|
||||
// Jika dalam format ISO (1970-01-01T08:00:00.000Z), extract jam:menit dalam UTC
|
||||
const time = dayjs.utc(timeValue);
|
||||
if (time.isValid()) {
|
||||
return time.format('HH:mm');
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
setFormData({
|
||||
...props.selectedData,
|
||||
start_time: convertTimeToString(props.selectedData.start_time),
|
||||
end_time: convertTimeToString(props.selectedData.end_time),
|
||||
});
|
||||
} else {
|
||||
setFormData(defaultData);
|
||||
}
|
||||
}, [props.showModal, props.selectedData]);
|
||||
|
||||
const modalTitle = `${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`;
|
||||
}, [props.showModal, props.selectedData, props.actionMode]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
title={`${
|
||||
props.actionMode === 'add'
|
||||
? 'Tambah'
|
||||
: props.actionMode === 'preview'
|
||||
? 'Preview'
|
||||
: 'Edit'
|
||||
} Shift`}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
footer={[
|
||||
<ConfigProvider key="footer-buttons" theme={{ components: { Button: { defaultColor: '#23A55A', defaultBorderColor: '#23A55A' } } }}>
|
||||
<Button key="back" onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
|
||||
{!props.readOnly && (
|
||||
<Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave} style={{ backgroundColor: '#23a55a' }}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</ConfigProvider>,
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{!props.readOnly && (
|
||||
<Button loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</React.Fragment>,
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{formData && (
|
||||
<div>
|
||||
<Text strong>Status</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
|
||||
<Switch
|
||||
disabled={props.readOnly}
|
||||
style={{ backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf' }}
|
||||
checked={formData.is_active}
|
||||
onChange={(checked) => setFormData({ ...formData, is_active: checked })}
|
||||
<div>
|
||||
<div>
|
||||
<Text strong>Status</Text>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<Switch
|
||||
disabled={props.readOnly}
|
||||
style={{
|
||||
backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf',
|
||||
}}
|
||||
checked={formData.is_active}
|
||||
onChange={handleStatusToggle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text>{formData.is_active ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Shift Name</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="shift_name"
|
||||
value={formData.shift_name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Contoh: Pagi, Sore, Malam"
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
<Text style={{ marginLeft: '8px' }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Shift Time</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Space.Compact block style={{ marginTop: '4px' }}>
|
||||
<TimePicker
|
||||
format={timeFormat}
|
||||
onChange={(time, timeString) =>
|
||||
handleTimeChange(time, timeString, 'start_time')
|
||||
}
|
||||
style={{ width: '50%' }}
|
||||
placeholder="Start Time "
|
||||
disabled={props.readOnly}
|
||||
/>
|
||||
<TimePicker
|
||||
value={
|
||||
formData.end_time ? dayjs(formData.end_time, timeFormat) : null
|
||||
}
|
||||
format={timeFormat}
|
||||
onChange={(time, timeString) =>
|
||||
handleTimeChange(time, timeString, 'end_time')
|
||||
}
|
||||
style={{ width: '50%' }}
|
||||
placeholder="End Time "
|
||||
disabled={props.readOnly}
|
||||
/>
|
||||
</Space.Compact>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Nama Shift</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="shift_name"
|
||||
value={formData.shift_name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Contoh: Pagi, Sore, Malam"
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Waktu Shift</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Space.Compact block style={{ marginTop: '4px' }}>
|
||||
<TimePicker
|
||||
value={dayjs(formData.start_time, timeFormat)}
|
||||
format={timeFormat}
|
||||
onChange={(time, timeString) => handleTimeChange(time, timeString, 'start_time')}
|
||||
style={{ width: '50%' }}
|
||||
placeholder="Waktu Mulai"
|
||||
disabled={props.readOnly}
|
||||
/>
|
||||
<TimePicker
|
||||
value={dayjs(formData.end_time, timeFormat)}
|
||||
format={timeFormat}
|
||||
onChange={(time, timeString) => handleTimeChange(time, time-string, 'end_time')}
|
||||
style={{ width: '50%' }}
|
||||
placeholder="Waktu Selesai"
|
||||
disabled={props.readOnly}
|
||||
/>
|
||||
</Space.Compact>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailShift;
|
||||
export default DetailShift;
|
||||
|
||||
@@ -9,19 +9,23 @@ import {
|
||||
} from '@ant-design/icons';
|
||||
import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { deleteShift, getAllShift } from '../../../../api/master-shift';
|
||||
import TableList from '../../../../components/Global/TableList';
|
||||
// import { getAllShift, deleteShift } from '../../../../api/master-shift'; // <-- API needs to be created
|
||||
import dayjs from 'dayjs';
|
||||
import utc from 'dayjs/plugin/utc';
|
||||
|
||||
// Mock API calls for demonstration
|
||||
const getAllShift = async () => ({
|
||||
data: [
|
||||
{ shift_id: 1, shift_name: 'Pagi', start_time: '08:00', end_time: '16:00', is_active: true },
|
||||
{ shift_id: 2, shift_name: 'Sore', start_time: '16:00', end_time: '00:00', is_active: true },
|
||||
{ shift_id: 3, shift_name: 'Malam', start_time: '00:00', end_time: '08:00', is_active: false },
|
||||
],
|
||||
statusCode: 200,
|
||||
});
|
||||
const deleteShift = async (id) => ({ statusCode: 200, message: 'Data berhasil dihapus' });
|
||||
dayjs.extend(utc);
|
||||
|
||||
// Helper function untuk convert ISO time ke HH:mm
|
||||
const formatTime = (timeValue) => {
|
||||
if (!timeValue) return '-';
|
||||
if (typeof timeValue === 'string' && timeValue.match(/^\d{2}:\d{2}$/)) {
|
||||
return timeValue;
|
||||
}
|
||||
// UTC untuk menghindari timezone conversion
|
||||
const time = dayjs.utc(timeValue);
|
||||
return time.isValid() ? time.format('HH:mm') : '-';
|
||||
};
|
||||
|
||||
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
{
|
||||
@@ -29,7 +33,6 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
dataIndex: 'shift_name',
|
||||
key: 'shift_name',
|
||||
width: '30%',
|
||||
render: (text, record, index) => `${index + 1}. ${text}`,
|
||||
},
|
||||
{
|
||||
title: 'Start Time',
|
||||
@@ -37,6 +40,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
key: 'start_time',
|
||||
width: '15%',
|
||||
align: 'center',
|
||||
render: (time) => formatTime(time),
|
||||
},
|
||||
{
|
||||
title: 'End Time',
|
||||
@@ -44,6 +48,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
key: 'end_time',
|
||||
width: '15%',
|
||||
align: 'center',
|
||||
render: (time) => formatTime(time),
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
@@ -51,15 +56,9 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
key: 'is_active',
|
||||
width: '15%',
|
||||
align: 'center',
|
||||
render: (_, { is_active }) => {
|
||||
const color = is_active ? 'green' : 'red';
|
||||
const text = is_active ? 'Active' : 'Inactive';
|
||||
return (
|
||||
<Tag color={color} key={'status'}>
|
||||
{text}
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
render: (status) => (
|
||||
<Tag color={status ? 'green' : 'red'}>{status ? 'Active' : 'Inactive'}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Aksi',
|
||||
@@ -68,9 +67,25 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
width: '25%',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button ghost icon={<EyeOutlined />} onClick={() => showPreviewModal(record)} style={{ color: '#1890ff', borderColor: '#1890ff' }} />
|
||||
<Button ghost icon={<EditOutlined />} onClick={() => showEditModal(record)} style={{ color: '#faad14', borderColor: '#faad14' }} />
|
||||
<Button danger ghost icon={<DeleteOutlined />} onClick={() => showDeleteDialog(record)} />
|
||||
<Button
|
||||
type="text"
|
||||
style={{ borderColor: '#1890ff' }}
|
||||
icon={<EyeOutlined style={{ color: '#1890ff' }} />}
|
||||
onClick={() => showPreviewModal(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ borderColor: '#faad14' }}
|
||||
icon={<EditOutlined style={{ color: '#faad14' }} />}
|
||||
onClick={() => showEditModal(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
style={{ borderColor: 'red' }}
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => showDeleteDialog(record)}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
@@ -78,25 +93,36 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
|
||||
const ListShift = memo(function ListShift(props) {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const [formDataFilter, setFormDataFilter] = useState({ criteria: '' });
|
||||
const defaultFilter = { criteria: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (props.actionMode === 'list') {
|
||||
doFilter();
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
if (props.actionMode === 'list') {
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
}
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [props.actionMode]);
|
||||
|
||||
const doFilter = () => setTrigerFilter((prev) => !prev);
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter((prev) => ({ ...prev, criteria: searchValue }));
|
||||
doFilter();
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ criteria: searchValue });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter((prev) => ({ ...prev, criteria: '' }));
|
||||
doFilter();
|
||||
setFormDataFilter({ criteria: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const showPreviewModal = (param) => {
|
||||
@@ -116,96 +142,111 @@ const ListShift = memo(function ListShift(props) {
|
||||
|
||||
const showDeleteDialog = (param) => {
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi Hapus',
|
||||
message: `Apakah Anda yakin ingin menghapus shift "${param.shift_name}"?`,
|
||||
onConfirm: () => handleDelete(param),
|
||||
message: 'Shift "' + param.shift_name + '" akan dihapus?',
|
||||
onConfirm: () => handleDelete(param.shift_id),
|
||||
onCancel: () => props.setSelectedData(null),
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async (param) => {
|
||||
try {
|
||||
const response = await deleteShift(param.shift_id);
|
||||
if (response.statusCode === 200) {
|
||||
NotifAlert({ icon: 'success', title: 'Berhasil', message: 'Data shift berhasil dihapus.' });
|
||||
doFilter();
|
||||
} else {
|
||||
NotifAlert({ icon: 'error', title: 'Gagal', message: response.message || 'Gagal menghapus data.' });
|
||||
}
|
||||
} catch (error) {
|
||||
NotifAlert({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan server.' });
|
||||
const handleDelete = async (shift_id) => {
|
||||
const response = await deleteShift(shift_id);
|
||||
if (response.statusCode === 200) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Data Shift berhasil dihapus.',
|
||||
});
|
||||
doFilter();
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Gagal Menghapus Data Shift',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Cari berdasarkan nama shift..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
// Auto search when clearing by backspace/delete
|
||||
if (value === '') {
|
||||
handleSearchClear();
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear
|
||||
onClear={handleSearchClear}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Space wrap size="small">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
<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="Cari berdasarkan nama shift..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
if (value === '') {
|
||||
handleSearchClear();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button icon={<PlusOutlined />} onClick={() => showAddModal()} size="large">
|
||||
Tambah Data
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'shift_name'} // Menggunakan shift_name langsung untuk judul kartu
|
||||
getData={getAllShift}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Space wrap size="small">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => showAddModal()}
|
||||
size="large"
|
||||
>
|
||||
Tambah Data
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'shift_name'}
|
||||
showPreviewModal={showPreviewModal}
|
||||
showEditModal={showEditModal}
|
||||
showDeleteDialog={showDeleteDialog}
|
||||
getData={getAllShift}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListShift;
|
||||
export default ListShift;
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Switch, Row, Col } from 'antd';
|
||||
import {
|
||||
Modal,
|
||||
Input,
|
||||
Divider,
|
||||
Typography,
|
||||
Button,
|
||||
InputNumber,
|
||||
Switch,
|
||||
Row,
|
||||
Col,
|
||||
ColorPicker,
|
||||
} from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import { validateRun } from '../../../../Utils/validate';
|
||||
import { createStatus, updateStatus } from '../../../../api/master-status';
|
||||
@@ -34,6 +45,10 @@ const DetailStatus = (props) => {
|
||||
setFormData({ ...formData, is_active: checked });
|
||||
};
|
||||
|
||||
const handleColorChange = (color, hex) => {
|
||||
setFormData({ ...formData, status_color: hex });
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
@@ -123,7 +138,14 @@ const DetailStatus = (props) => {
|
||||
onCancel={handleCancel}
|
||||
footer={
|
||||
!props.readOnly && (
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', paddingTop: '15px' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '10px',
|
||||
paddingTop: '15px',
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>Batal</Button>
|
||||
<Button type="primary" loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
@@ -141,7 +163,9 @@ const DetailStatus = (props) => {
|
||||
checked={formData.is_active}
|
||||
onChange={handleStatusToggle}
|
||||
/>
|
||||
<Text style={{ marginLeft: 8 }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
|
||||
<Text style={{ marginLeft: 8 }}>
|
||||
{formData.is_active ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
@@ -176,13 +200,35 @@ const DetailStatus = (props) => {
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Status Color</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="status_color"
|
||||
value={formData.status_color}
|
||||
placeholder="Masukan warna status (e.g., hijau, #00ff00)"
|
||||
readOnly={props.readOnly}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<ColorPicker
|
||||
value={formData.status_color || '#000000'}
|
||||
onChange={handleColorChange}
|
||||
disabled={props.readOnly}
|
||||
showText={(color) => `color hex: ${color.toHexString()}`}
|
||||
allowClear={false}
|
||||
format="hex"
|
||||
size="large"
|
||||
style={{ width: '100%' }}
|
||||
presets={[
|
||||
{
|
||||
label: 'Recommended',
|
||||
colors: [
|
||||
'#EF4444', // Merah
|
||||
'#3B82F6', // Biru
|
||||
'#10B981', // Hijau
|
||||
'#F59E0B', // Kuning
|
||||
'#8B5CF6', // Ungu
|
||||
'#EC4899', // Pink
|
||||
'#F97316', // Orange
|
||||
'#14B8A6', // Teal
|
||||
'#6B7280', // Gray
|
||||
'#000000', // Black
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Description</Text>
|
||||
@@ -199,4 +245,4 @@ const DetailStatus = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailStatus;
|
||||
export default DetailStatus;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, Select } from 'antd';
|
||||
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Select, Checkbox } from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import { createTag, updateTag, getAllTag } from '../../../../api/master-tag';
|
||||
import { getAllDevice } from '../../../../api/master-device';
|
||||
@@ -34,6 +34,7 @@ const DetailTag = (props) => {
|
||||
lim_high: '',
|
||||
lim_high_crash: '',
|
||||
device_id: null,
|
||||
description: '',
|
||||
|
||||
sub_section_id: null,
|
||||
};
|
||||
@@ -147,10 +148,8 @@ const DetailTag = (props) => {
|
||||
payload.unit = formData.unit.trim();
|
||||
}
|
||||
|
||||
// Add device_id only if it's selected
|
||||
if (formData.device_id) {
|
||||
payload.device_id = parseInt(formData.device_id);
|
||||
}
|
||||
// Add device_id - backend requires this field even if null
|
||||
payload.device_id = formData.device_id ? parseInt(formData.device_id) : null;
|
||||
|
||||
// Add limit fields only if they have values
|
||||
if (formData.lim_low_crash !== '' && formData.lim_low_crash !== null) {
|
||||
@@ -166,10 +165,8 @@ const DetailTag = (props) => {
|
||||
payload.lim_high_crash = parseFloat(formData.lim_high_crash);
|
||||
}
|
||||
|
||||
// Add sub_section_id only if it's selected
|
||||
if (formData.sub_section_id) {
|
||||
payload.sub_section_id = parseInt(formData.sub_section_id);
|
||||
}
|
||||
// Add sub_section_id - backend requires this field even if null
|
||||
payload.sub_section_id = formData.sub_section_id ? parseInt(formData.sub_section_id) : null;
|
||||
|
||||
try {
|
||||
const response =
|
||||
@@ -234,24 +231,24 @@ const DetailTag = (props) => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleAlarmToggle = (checked) => {
|
||||
const handleAlarmToggle = (e) => {
|
||||
setformData({
|
||||
...formData,
|
||||
is_alarm: checked,
|
||||
is_alarm: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
const handleReportToggle = (checked) => {
|
||||
const handleReportToggle = (e) => {
|
||||
setformData({
|
||||
...formData,
|
||||
is_report: checked,
|
||||
is_report: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
const handleHistoryToggle = (checked) => {
|
||||
const handleHistoryToggle = (e) => {
|
||||
setformData({
|
||||
...formData,
|
||||
is_history: checked,
|
||||
is_history: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -336,7 +333,7 @@ const DetailTag = (props) => {
|
||||
} Tag`}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
width={800}
|
||||
width={1000}
|
||||
footer={[
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
@@ -403,127 +400,66 @@ const DetailTag = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Alarm, Report, dan History dalam satu baris */}
|
||||
{/* Tag Code dan Alarm, Report dan History */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: '16px',
|
||||
gap: '20px',
|
||||
}}
|
||||
>
|
||||
{/* Alarm Toggle */}
|
||||
{/* Tag Code - Auto Increment & Read Only */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div>
|
||||
<Text strong>Alarm</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
</div>
|
||||
<div
|
||||
<Text strong>Tag Code</Text>
|
||||
<Input
|
||||
name="tag_code"
|
||||
value={formData.tag_code || ''}
|
||||
placeholder={'Tag Code Auto Fill'}
|
||||
disabled
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: '8px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed',
|
||||
color: formData.tag_code ? '#000000' : '#bfbfbf',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<Switch
|
||||
disabled={props.readOnly}
|
||||
style={{
|
||||
backgroundColor:
|
||||
formData.is_alarm === true
|
||||
? '#23A55A'
|
||||
: '#bfbfbf',
|
||||
}}
|
||||
checked={formData.is_alarm === true}
|
||||
onChange={handleAlarmToggle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text>{formData.is_alarm === true ? 'Yes' : 'No'}</Text>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
{/* Alarm Checkbox */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text strong>Alarm</Text>
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<Checkbox
|
||||
disabled={props.readOnly}
|
||||
checked={formData.is_alarm === true}
|
||||
onChange={handleAlarmToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Report Toggle */}
|
||||
{/* Report Checkbox */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div>
|
||||
<Text strong>Report</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<Switch
|
||||
disabled={props.readOnly}
|
||||
style={{
|
||||
backgroundColor:
|
||||
formData.is_report === true
|
||||
? '#23A55A'
|
||||
: '#bfbfbf',
|
||||
}}
|
||||
checked={formData.is_report === true}
|
||||
onChange={handleReportToggle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text>{formData.is_report === true ? 'Yes' : 'No'}</Text>
|
||||
</div>
|
||||
<Text strong>Report</Text>
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<Checkbox
|
||||
disabled={props.readOnly}
|
||||
checked={formData.is_report === true}
|
||||
onChange={handleReportToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* History Toggle */}
|
||||
{/* History Checkbox */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text strong>History</Text>
|
||||
<div>
|
||||
<Text strong>History</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<Switch
|
||||
disabled={props.readOnly}
|
||||
style={{
|
||||
backgroundColor:
|
||||
formData.is_history === true
|
||||
? '#23A55A'
|
||||
: '#bfbfbf',
|
||||
}}
|
||||
checked={formData.is_history === true}
|
||||
onChange={handleHistoryToggle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text>{formData.is_history === true ? 'Yes' : 'No'}</Text>
|
||||
</div>
|
||||
<Checkbox
|
||||
disabled={props.readOnly}
|
||||
checked={formData.is_history === true}
|
||||
onChange={handleHistoryToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
{/* Tag Code - Auto Increment & Read Only */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Tag Code</Text>
|
||||
<Input
|
||||
name="tag_code"
|
||||
value={formData.tag_code || ''}
|
||||
placeholder={'Tag Code Auto Fill'}
|
||||
disabled
|
||||
style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed',
|
||||
color: formData.tag_code ? '#000000' : '#bfbfbf',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/* Tag Number dan Tag Name dalam satu baris */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div
|
||||
@@ -685,13 +621,13 @@ const DetailTag = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Limit Low Crash dan Limit Low dalam satu baris */}
|
||||
{/* Semua Limit dalam satu baris */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: '16px',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
{/* Limit Low Crash */}
|
||||
@@ -720,17 +656,6 @@ const DetailTag = (props) => {
|
||||
step="any"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Limit High dan Limit High Crash dalam satu baris */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: '16px',
|
||||
}}
|
||||
>
|
||||
{/* Limit High */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text strong>Limit High</Text>
|
||||
@@ -759,6 +684,18 @@ const DetailTag = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Description */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Description</Text>
|
||||
<Input.TextArea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Description (Optional)"
|
||||
readOnly={props.readOnly}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
@@ -44,12 +44,14 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
dataIndex: 'data_type',
|
||||
key: 'data_type',
|
||||
width: '10%',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Unit',
|
||||
dataIndex: 'unit',
|
||||
key: 'unit',
|
||||
width: '8%',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Sub Section',
|
||||
@@ -63,6 +65,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
dataIndex: 'device_name',
|
||||
key: 'device_name',
|
||||
width: '12%',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
|
||||
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, Select } from 'antd';
|
||||
import { NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import { createUnit, updateUnit } from '../../../../api/master-unit';
|
||||
import { getAllTag } from '../../../../api/master-tag'; // Import API untuk Tag
|
||||
import { validateRun } from '../../../../Utils/validate';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const DetailUnit = (props) => {
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [tagList, setTagList] = useState([]);
|
||||
const [loadingTags, setLoadingTags] = useState(false);
|
||||
|
||||
const defaultData = {
|
||||
unit_id: '',
|
||||
@@ -15,10 +18,28 @@ const DetailUnit = (props) => {
|
||||
unit_name: '',
|
||||
unit_description: '',
|
||||
is_active: true,
|
||||
tag_id: null, // Tambahkan tag_id
|
||||
};
|
||||
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
|
||||
// Fungsi untuk mengambil data Tag
|
||||
const loadTags = async () => {
|
||||
setLoadingTags(true);
|
||||
try {
|
||||
const params = new URLSearchParams({ limit: 1000, criteria: '' });
|
||||
const response = await getAllTag(params);
|
||||
if (response && response.data) {
|
||||
const activeTags = response.data.filter((tag) => tag.is_active === true);
|
||||
setTagList(activeTags);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading tags:', error);
|
||||
} finally {
|
||||
setLoadingTags(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
@@ -27,8 +48,10 @@ const DetailUnit = (props) => {
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
|
||||
// Daftar aturan validasi
|
||||
const validationRules = [{ field: 'unit_name', label: 'Unit Name', required: true }];
|
||||
const validationRules = [
|
||||
{ field: 'unit_name', label: 'Unit Name', required: true },
|
||||
{ field: 'tag_id', label: 'Tag', required: true }, // Tambah validasi untuk tag_id
|
||||
];
|
||||
|
||||
if (
|
||||
validateRun(formData, validationRules, (errorMessages) => {
|
||||
@@ -39,14 +62,16 @@ const DetailUnit = (props) => {
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
})
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
is_active: formData.is_active,
|
||||
unit_name: formData.unit_name,
|
||||
unit_description: formData.unit_description,
|
||||
is_active: formData.is_active,
|
||||
tag_id: formData.tag_id, // Tambahkan tag_id ke payload
|
||||
};
|
||||
|
||||
const response =
|
||||
@@ -90,6 +115,13 @@ const DetailUnit = (props) => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectChange = (name, value) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleStatusToggle = (checked) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
@@ -98,6 +130,10 @@ const DetailUnit = (props) => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.showModal) {
|
||||
loadTags(); // Panggil fungsi loadTags saat modal muncul
|
||||
}
|
||||
|
||||
if (props.selectedData) {
|
||||
setFormData(props.selectedData);
|
||||
} else {
|
||||
@@ -116,6 +152,7 @@ const DetailUnit = (props) => {
|
||||
} Unit`}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
width={600}
|
||||
footer={[
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
@@ -175,13 +212,12 @@ const DetailUnit = (props) => {
|
||||
</div>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
{/* Unit Code - Auto Increment & Read Only */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Unit Code</Text>
|
||||
<Input
|
||||
name="unit_code"
|
||||
value={formData.unit_code || ''}
|
||||
placeholder={'Unit Code Auto Fill'}
|
||||
placeholder="Dibuat otomatis oleh sistem"
|
||||
disabled
|
||||
style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
@@ -191,6 +227,33 @@ const DetailUnit = (props) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Tag</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Pilih Tag"
|
||||
value={formData.tag_id || undefined}
|
||||
onChange={(value) => handleSelectChange('tag_id', value)}
|
||||
disabled={props.readOnly}
|
||||
loading={loadingTags}
|
||||
showSearch
|
||||
allowClear
|
||||
optionFilterProp="children"
|
||||
filterOption={(input, option) => {
|
||||
const text = option.children;
|
||||
if (!text) return false;
|
||||
return text.toLowerCase().includes(input.toLowerCase());
|
||||
}}
|
||||
>
|
||||
{tagList.map((tag) => (
|
||||
<Select.Option key={tag.tag_id} value={tag.tag_id}>
|
||||
{`${tag.tag_code || ''} - ${tag.tag_name || ''}`}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Unit Name</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
@@ -221,4 +284,4 @@ const DetailUnit = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailUnit;
|
||||
export default DetailUnit;
|
||||
38
src/pages/report/report/IndexReport.jsx
Normal file
38
src/pages/report/report/IndexReport.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 ListReport from './component/ListReport';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexReport = memo(function IndexReport() {
|
||||
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' }}>
|
||||
• Report
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [navigate, setBreadcrumbItems]);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ListReport selectedData={selectedData} setSelectedData={setSelectedData} />
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexReport;
|
||||
163
src/pages/report/report/component/ListReport.jsx
Normal file
163
src/pages/report/report/component/ListReport.jsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Row, Col, Card, Input, DatePicker, Select, Typography } from 'antd';
|
||||
import TableList from '../../../../components/Global/TableList';
|
||||
import dayjs from 'dayjs';
|
||||
import { FileTextOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const ListReport = memo(function ListReport(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: '70%',
|
||||
},
|
||||
{
|
||||
title: 'Value',
|
||||
dataIndex: 'val',
|
||||
key: 'val',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
title: 'Stat',
|
||||
dataIndex: 'stat',
|
||||
key: 'stat',
|
||||
width: '10%',
|
||||
},
|
||||
];
|
||||
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
|
||||
const defaultFilter = { search: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
|
||||
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 getAllReport = async (params) => {
|
||||
return {
|
||||
data: [],
|
||||
};
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setPlantSubSection('Semua Plant');
|
||||
setStartDate(dayjs('2025-09-30'));
|
||||
setEndDate(dayjs('2025-10-09'));
|
||||
setPeriode('10 Menit');
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<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 />}>
|
||||
Tampilkan
|
||||
</Button>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
onClick={handleReset}
|
||||
style={{ backgroundColor: '#6c757d', color: 'white' }}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
getData={getAllReport}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListReport;
|
||||
38
src/pages/report/trending/IndexTrending.jsx
Normal file
38
src/pages/report/trending/IndexTrending.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 ReportTrending from './ReportTrending';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexTrending = memo(function IndexTrending() {
|
||||
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' }}>
|
||||
• Trending
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [navigate, setBreadcrumbItems]);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ReportTrending/>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexTrending;
|
||||
222
src/pages/report/trending/ReportTrending.jsx
Normal file
222
src/pages/report/trending/ReportTrending.jsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Row, Col, Card, Input, DatePicker, Select, Typography } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { FileTextOutlined } from '@ant-design/icons';
|
||||
import { ResponsiveLine } from '@nivo/line';
|
||||
import './trending.css';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
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 ReportTrending = memo(function ReportTrending(props) {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
|
||||
const defaultFilter = { search: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
|
||||
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 getAllReport = async (params) => {
|
||||
return {
|
||||
data: [],
|
||||
};
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setPlantSubSection('Semua Plant');
|
||||
setStartDate(dayjs('2025-09-30'));
|
||||
setEndDate(dayjs('2025-10-09'));
|
||||
setPeriode('10 Menit');
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<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 />}>
|
||||
Tampilkan
|
||||
</Button>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
onClick={handleReset}
|
||||
style={{ backgroundColor: '#6c757d', color: 'white' }}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<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>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ReportTrending;
|
||||
@@ -1,144 +1,70 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
|
||||
import { Form, Typography } from 'antd';
|
||||
import ListRole from './component/ListRole';
|
||||
import DetailRole from './component/DetailRole';
|
||||
import { createRole, updateRole } from '../../api/role';
|
||||
import { NotifAlert, NotifOk } from '../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
|
||||
import { Typography } from 'antd';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexRole = memo(function IndexRole() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [actionMode, setActionMode] = useState('list');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [readOnly, setReadOnly] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const setMode = (param) => {
|
||||
setShowModal(true);
|
||||
switch (param) {
|
||||
case 'add':
|
||||
setReadOnly(false);
|
||||
break;
|
||||
case 'edit':
|
||||
setReadOnly(false);
|
||||
break;
|
||||
case 'preview':
|
||||
setReadOnly(true);
|
||||
break;
|
||||
default:
|
||||
setShowModal(false);
|
||||
break;
|
||||
}
|
||||
setActionMode(param);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
setBreadcrumbItems([
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• Role
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{ title: <Text strong style={{ fontSize: '14px' }}>• Role</Text> },
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [navigate, setBreadcrumbItems]);
|
||||
|
||||
useEffect(() => {
|
||||
if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
|
||||
setIsModalVisible(true);
|
||||
setReadOnly(actionMode === 'preview');
|
||||
|
||||
if (actionMode === 'add') {
|
||||
form.resetFields();
|
||||
} else if (selectedData) {
|
||||
form.setFieldsValue(selectedData);
|
||||
}
|
||||
} else {
|
||||
setIsModalVisible(false);
|
||||
form.resetFields();
|
||||
}
|
||||
}, [actionMode, selectedData, form]);
|
||||
|
||||
const handleCancel = () => {
|
||||
setActionMode('list');
|
||||
setSelectedData(null);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
if (readOnly) {
|
||||
handleCancel();
|
||||
return;
|
||||
}
|
||||
|
||||
form.validateFields()
|
||||
.then(async (values) => {
|
||||
try {
|
||||
let response;
|
||||
if (actionMode === 'edit') {
|
||||
response = await updateRole(selectedData.role_id, values);
|
||||
console.log('Update Response:', response);
|
||||
|
||||
const isSuccess = response.statusCode === 200 || response.statusCode === 201;
|
||||
if (isSuccess) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Role "${values.role_name}" berhasil diubah.`,
|
||||
});
|
||||
handleCancel();
|
||||
} else {
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response.message || 'Gagal mengubah data Role',
|
||||
});
|
||||
}
|
||||
} else if (actionMode === 'add') {
|
||||
response = await createRole(values);
|
||||
console.log('Create Response:', response);
|
||||
|
||||
const isSuccess = response.statusCode === 200 || response.statusCode === 201;
|
||||
if (isSuccess) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Role "${values.role_name}" berhasil ditambahkan.`,
|
||||
});
|
||||
handleCancel();
|
||||
} else {
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response.message || 'Gagal menambahkan data Role',
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: 'Terjadi kesalahan saat menyimpan data',
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((info) => {
|
||||
console.log('Validate Failed:', info);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ListRole
|
||||
actionMode={actionMode}
|
||||
setActionMode={setActionMode}
|
||||
setActionMode={setMode}
|
||||
selectedData={selectedData}
|
||||
setSelectedData={setSelectedData}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
<DetailRole
|
||||
visible={isModalVisible}
|
||||
onCancel={handleCancel}
|
||||
onOk={handleOk}
|
||||
form={form}
|
||||
editingKey={selectedData?.role_id}
|
||||
setActionMode={setMode}
|
||||
selectedData={selectedData}
|
||||
setSelectedData={setSelectedData}
|
||||
readOnly={readOnly}
|
||||
showModal={showModal}
|
||||
actionMode={actionMode}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexRole;
|
||||
export default IndexRole;
|
||||
@@ -1,72 +1,213 @@
|
||||
import React from 'react';
|
||||
import { Modal, Form, Input, InputNumber, Switch, Row, Col, Typography, Divider } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, InputNumber, Row, Col } from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { validateRun } from '../../../Utils/validate';
|
||||
import { createRole, updateRole } from '../../../api/role';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const DetailRole = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
|
||||
const modalTitle = editingKey ? (readOnly ? 'Preview Role' : 'Edit Role') : 'Tambah Role';
|
||||
const DetailRole = (props) => {
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
|
||||
const defaultData = {
|
||||
role_id: '',
|
||||
role_name: '',
|
||||
role_level: null,
|
||||
role_description: '',
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({ ...formData, [name]: value });
|
||||
};
|
||||
|
||||
const handleInputNumberChange = (value) => {
|
||||
setFormData({ ...formData, role_level: value });
|
||||
};
|
||||
|
||||
const handleStatusToggle = (checked) => {
|
||||
setFormData({ ...formData, is_active: checked });
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
|
||||
const validationRules = [
|
||||
{ field: 'role_name', label: 'Nama Role', required: true },
|
||||
{ field: 'role_level', label: 'Level', required: true },
|
||||
];
|
||||
|
||||
if (
|
||||
validateRun(formData, validationRules, (errorMessages) => {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: errorMessages,
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
})
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
role_name: formData.role_name,
|
||||
role_level: formData.role_level,
|
||||
role_description: formData.role_description,
|
||||
is_active: formData.is_active,
|
||||
};
|
||||
|
||||
const response = formData.role_id
|
||||
? await updateRole(formData.role_id, payload)
|
||||
: await createRole(payload);
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
const action = formData.role_id ? 'diubah' : 'ditambahkan';
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Role "${payload.role_name}" berhasil ${action}.`,
|
||||
});
|
||||
props.setActionMode('list');
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Gagal menyimpan data.',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: error.message || 'Terjadi kesalahan pada server.',
|
||||
});
|
||||
} finally {
|
||||
setConfirmLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.selectedData) {
|
||||
setFormData({ ...defaultData, ...props.selectedData });
|
||||
} else {
|
||||
setFormData(defaultData);
|
||||
}
|
||||
}, [props.showModal, props.selectedData]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={<Text style={{ fontSize: '18px' }}>{modalTitle}</Text>}
|
||||
open={visible}
|
||||
onCancel={onCancel}
|
||||
onOk={onOk}
|
||||
okText="Simpan"
|
||||
cancelText="Batal"
|
||||
okButtonProps={{ disabled: readOnly }}
|
||||
destroyOnClose
|
||||
|
||||
title={
|
||||
<Text style={{ fontSize: '18px' }}>
|
||||
{props.actionMode === 'add'
|
||||
? 'Tambah Role'
|
||||
: props.actionMode === 'preview'
|
||||
? 'Preview Role'
|
||||
: 'Edit Role'}
|
||||
</Text>
|
||||
}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
footer={[
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{!props.readOnly && (
|
||||
<Button loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</React.Fragment>,
|
||||
]}
|
||||
>
|
||||
<Divider />
|
||||
<Form form={form} layout="vertical" name="role_form">
|
||||
<Form.Item
|
||||
name="is_active"
|
||||
label={<Text strong>Status</Text>}
|
||||
valuePropName="checked"
|
||||
initialValue={true}
|
||||
>
|
||||
<Switch disabled={readOnly} />
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="role_name"
|
||||
label={<Text strong>Nama Role</Text>}
|
||||
rules={[{ required: true, message: 'Nama Role wajib diisi!' }]}
|
||||
>
|
||||
<Input placeholder="Masukan nama role" readOnly={readOnly} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="role_level"
|
||||
label={<Text strong>Level</Text>}
|
||||
rules={[{ required: true, message: 'Level wajib diisi!' }]}
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="Masukan level role"
|
||||
readOnly={readOnly}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item
|
||||
name="role_description"
|
||||
label={<Text strong>Deskripsi Role</Text>}
|
||||
>
|
||||
<Input.TextArea
|
||||
rows={4}
|
||||
placeholder="Masukan deskripsi (opsional)"
|
||||
readOnly={readOnly}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Status</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
|
||||
<Switch
|
||||
disabled={props.readOnly}
|
||||
checked={formData.is_active}
|
||||
onChange={handleStatusToggle}
|
||||
style={{ backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Text style={{ marginLeft: 8 }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Nama Role</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="role_name"
|
||||
value={formData.role_name}
|
||||
placeholder="Masukan nama role"
|
||||
readOnly={props.readOnly}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Level</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<InputNumber
|
||||
name="role_level"
|
||||
value={formData.role_level}
|
||||
placeholder="Masukan level role"
|
||||
readOnly={props.readOnly}
|
||||
style={{ width: '100%' }}
|
||||
onChange={handleInputNumberChange}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Deskripsi Role</Text>
|
||||
<TextArea
|
||||
name="role_description"
|
||||
value={formData.role_description}
|
||||
placeholder="Masukan deskripsi (opsional)"
|
||||
readOnly={props.readOnly}
|
||||
rows={4}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailRole;
|
||||
export default DetailRole;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Space, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
|
||||
import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
@@ -14,17 +14,17 @@ import TableList from '../../../components/Global/TableList';
|
||||
|
||||
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
{
|
||||
title: 'No',
|
||||
key: 'no',
|
||||
title: 'ID',
|
||||
dataIndex: 'role_id',
|
||||
key: 'role_id',
|
||||
width: '5%',
|
||||
align: 'center',
|
||||
render: (_, __, index) => index + 1,
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
title: 'Nama Role',
|
||||
dataIndex: 'role_name',
|
||||
key: 'role_name',
|
||||
width: '20%',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
title: 'Level',
|
||||
@@ -37,7 +37,19 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
title: 'Deskripsi',
|
||||
dataIndex: 'role_description',
|
||||
key: 'role_description',
|
||||
width: '40%',
|
||||
width: '35%',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'is_active',
|
||||
key: 'is_active',
|
||||
width: '10%',
|
||||
align: 'center',
|
||||
render: (_, { is_active }) => (
|
||||
<Tag color={is_active ? 'green' : 'red'} key={'status'}>
|
||||
{is_active ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Aksi',
|
||||
@@ -47,28 +59,23 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
icon={<EyeOutlined />}
|
||||
type="text"
|
||||
style={{ borderColor: '#1890ff' }}
|
||||
icon={<EyeOutlined style={{ color: '#1890ff' }} />}
|
||||
onClick={() => showPreviewModal(record)}
|
||||
style={{
|
||||
color: '#1890ff',
|
||||
borderColor: '#1890ff',
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon={<EditOutlined />}
|
||||
type="text"
|
||||
style={{ borderColor: '#faad14' }}
|
||||
icon={<EditOutlined style={{ color: '#faad14' }} />}
|
||||
onClick={() => showEditModal(record)}
|
||||
style={{
|
||||
color: '#faad14',
|
||||
borderColor: '#faad14',
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
style={{ borderColor: 'red' }}
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => showDeleteDialog(record)}
|
||||
style={{
|
||||
borderColor: '#ff4d4f',
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
@@ -76,19 +83,16 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
];
|
||||
|
||||
const ListRole = memo(function ListRole(props) {
|
||||
const [showFilter, setShowFilter] = useState(false);
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
|
||||
const defaultFilter = { criteria: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
if (props.actionMode == 'list') {
|
||||
if (props.actionMode === 'list') {
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
}
|
||||
@@ -97,11 +101,6 @@ const ListRole = memo(function ListRole(props) {
|
||||
}
|
||||
}, [props.actionMode]);
|
||||
|
||||
const toggleFilter = () => {
|
||||
setFormDataFilter(defaultFilter);
|
||||
setShowFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
@@ -135,8 +134,8 @@ const ListRole = memo(function ListRole(props) {
|
||||
const showDeleteDialog = (param) => {
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi',
|
||||
message: 'Apakah anda yakin hapus data "' + param.role_name + '" ?',
|
||||
title: 'Konfirmasi Hapus',
|
||||
message: 'Role "' + param.role_name + '" akan dihapus?',
|
||||
onConfirm: () => handleDelete(param.role_id, param.role_name),
|
||||
onCancel: () => props.setSelectedData(null),
|
||||
});
|
||||
@@ -144,13 +143,11 @@ const ListRole = memo(function ListRole(props) {
|
||||
|
||||
const handleDelete = async (role_id, role_name) => {
|
||||
const response = await deleteRole(role_id);
|
||||
console.log('Delete Role Response:', response);
|
||||
|
||||
if (response.statusCode == 200) {
|
||||
if (response.statusCode === 200) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Data Role "' + role_name + '" berhasil dihapus.',
|
||||
message: `Data Role "${role_name}" berhasil dihapus.`,
|
||||
});
|
||||
doFilter();
|
||||
} else {
|
||||
@@ -175,7 +172,6 @@ const ListRole = memo(function ListRole(props) {
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
// Auto search when clearing by backspace/delete
|
||||
if (value === '') {
|
||||
setFormDataFilter({ criteria: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
@@ -204,14 +200,11 @@ const ListRole = memo(function ListRole(props) {
|
||||
<Space wrap size="small">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
@@ -248,4 +241,4 @@ const ListRole = memo(function ListRole(props) {
|
||||
);
|
||||
});
|
||||
|
||||
export default ListRole;
|
||||
export default ListRole;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
|
||||
import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input, Modal } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
SearchOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
ClockCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
@@ -49,13 +50,7 @@ const getRoleColor = (role_name, role_level) => {
|
||||
return 'default';
|
||||
};
|
||||
|
||||
const columns = (
|
||||
showPreviewModal,
|
||||
showEditModal,
|
||||
showDeleteDialog,
|
||||
showApproveDialog,
|
||||
showRejectDialog
|
||||
) => [
|
||||
const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApprovalModal) => [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'user_id',
|
||||
@@ -116,32 +111,22 @@ const columns = (
|
||||
render: (_, record) => {
|
||||
// is_approve: 0 = Rejected, 1 = Pending, 2 = Approved
|
||||
if (record.is_approve === 1 || record.is_approve === '1') {
|
||||
// Pending - show both Approve and Reject buttons
|
||||
// Pending - show single Pending button
|
||||
return (
|
||||
<Space size="small" direction="vertical">
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<CheckOutlined />}
|
||||
onClick={() => showApproveDialog(record)}
|
||||
style={{
|
||||
backgroundColor: '#52c41a',
|
||||
borderColor: '#52c41a',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
danger
|
||||
size="small"
|
||||
icon={<CloseOutlined />}
|
||||
onClick={() => showRejectDialog(record)}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
</Space>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
icon={<ClockCircleOutlined />}
|
||||
onClick={() => showApprovalModal(record)}
|
||||
style={{
|
||||
backgroundColor: '#faad14',
|
||||
borderColor: '#faad14',
|
||||
color: 'white',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
Pending
|
||||
</Button>
|
||||
);
|
||||
} else if (record.is_approve === 0 || record.is_approve === '0') {
|
||||
// Rejected
|
||||
@@ -233,6 +218,8 @@ const columns = (
|
||||
const ListUser = memo(function ListUser(props) {
|
||||
const [showFilter, setShowFilter] = useState(false);
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const [approvalModalVisible, setApprovalModalVisible] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
|
||||
const defaultFilter = { criteria: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
@@ -285,44 +272,30 @@ const ListUser = memo(function ListUser(props) {
|
||||
props.setActionMode('add');
|
||||
};
|
||||
|
||||
const showApproveDialog = (param) => {
|
||||
Swal.fire({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi Approve User',
|
||||
text: 'Apakah anda yakin approve user "' + param.user_fullname + '" ?',
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: '#d33',
|
||||
cancelButtonText: 'Batal',
|
||||
confirmButtonColor: '#23A55A',
|
||||
confirmButtonText: 'Approve',
|
||||
reverseButtons: true,
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
handleApprove(param.user_id);
|
||||
} else if (result.dismiss) {
|
||||
props.setSelectedData(null);
|
||||
}
|
||||
});
|
||||
const showApprovalModal = (param) => {
|
||||
setSelectedUser(param);
|
||||
setApprovalModalVisible(true);
|
||||
};
|
||||
|
||||
const showRejectDialog = (param) => {
|
||||
Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Konfirmasi Reject User',
|
||||
text: 'Apakah anda yakin reject user "' + param.user_fullname + '" ?',
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: '#23A55A',
|
||||
cancelButtonText: 'Batal',
|
||||
confirmButtonColor: '#d33',
|
||||
confirmButtonText: 'Reject',
|
||||
reverseButtons: true,
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
handleReject(param.user_id);
|
||||
} else if (result.dismiss) {
|
||||
props.setSelectedData(null);
|
||||
}
|
||||
});
|
||||
const handleModalApprove = () => {
|
||||
if (selectedUser) {
|
||||
handleApprove(selectedUser.user_id);
|
||||
setApprovalModalVisible(false);
|
||||
setSelectedUser(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalReject = () => {
|
||||
if (selectedUser) {
|
||||
handleReject(selectedUser.user_id);
|
||||
setApprovalModalVisible(false);
|
||||
setSelectedUser(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalCancel = () => {
|
||||
setApprovalModalVisible(false);
|
||||
setSelectedUser(null);
|
||||
};
|
||||
|
||||
const showDeleteDialog = (param) => {
|
||||
@@ -470,14 +443,46 @@ const ListUser = memo(function ListUser(props) {
|
||||
showPreviewModal,
|
||||
showEditModal,
|
||||
showDeleteDialog,
|
||||
showApproveDialog,
|
||||
showRejectDialog
|
||||
showApprovalModal
|
||||
)}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
{/* Approval Modal */}
|
||||
<Modal
|
||||
title="Konfirmasi Persetujuan User"
|
||||
open={approvalModalVisible}
|
||||
onCancel={handleModalCancel}
|
||||
footer={[
|
||||
<Button key="reject" danger onClick={handleModalReject}>
|
||||
Reject User
|
||||
</Button>,
|
||||
<Button
|
||||
key="approve"
|
||||
type="primary"
|
||||
style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
|
||||
onClick={handleModalApprove}
|
||||
>
|
||||
Approve User
|
||||
</Button>,
|
||||
]}
|
||||
width={400}
|
||||
>
|
||||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||||
<ClockCircleOutlined
|
||||
style={{ fontSize: '48px', color: '#faad14', marginBottom: '16px' }}
|
||||
/>
|
||||
<p style={{ fontSize: '16px', margin: '16px 0' }}>
|
||||
User: <strong>{selectedUser?.user_fullname}</strong>
|
||||
</p>
|
||||
<p style={{ color: '#666', margin: '8px 0' }}>
|
||||
Apakah Anda ingin approve atau reject user ini?
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user