yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'lavoce' (#7) from lavoce into main

Browse Source 
Reviewed-on: #7
This commit is contained in:
Bragas Rexita Ecos Fernanda
2025-10-24 05:43:32 +00:00
parent 4cdaa042da 50d040953f
commit 029ea269a7
30 changed files with 2226 additions and 1780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.jsx
View File

@@ -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 />}>

2
src/components/Global/TableList.jsx
View File

@@ -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}

72
src/pages/eventAlarm/IndexEventAlarm.jsx
View File

@@ -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;

58
src/pages/eventAlarm/component/DetailEventAlarm.jsx
View File

@@ -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
View 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
View 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
View 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;

130
src/pages/eventAlarm/component/ListEventAlarm.jsx → src/pages/history/event/component/ListHistoryEvent.jsx
View File

@@ -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;

275
src/pages/history/report/IndexReport.jsx
View File

@@ -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;

297
src/pages/history/trending/IndexTrending.jsx
View File

@@ -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;

271
src/pages/jadwalShift/component/DetailJadwalShift.jsx
View File

@@ -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>
);
};

655
src/pages/jadwalShift/component/ListJadwalShift.jsx
View File

@@ -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;

4
src/pages/master/brandDevice/component/ListBrandDevice.jsx
View File

@@ -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%',

19
src/pages/master/device/component/DetailDevice.jsx
View File

@@ -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

6
src/pages/master/device/component/ListDevice.jsx
View File

@@ -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',

314
src/pages/master/shift/component/DetailShift.jsx
View File

@@ -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;

269
src/pages/master/shift/component/ListShift.jsx
View File

@@ -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;

68
src/pages/master/status/component/DetailStatus.jsx
View File

@@ -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;

193
src/pages/master/tag/component/DetailTag.jsx
View File

@@ -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>

3
src/pages/master/tag/component/ListTag.jsx
View File

@@ -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',

79
src/pages/master/unit/component/DetailUnit.jsx
View File

@@ -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
View 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
View 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
View 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
View 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;

0
src/pages/history/trending/trending.css → src/pages/report/trending/trending.css
View File

136
src/pages/role/IndexRole.jsx
View File

@@ -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;

259
src/pages/role/component/DetailRole.jsx
View File

@@ -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;

73
src/pages/role/component/ListRole.jsx
View File

@@ -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;

147
src/pages/user/component/ListUser.jsx
View File

@@ -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>
);
});