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

feat: enhance jadwal shift management with improved component structure and dummy data handling

Browse Source
This commit is contained in:
Iqbal Rizqi Kurniawan
2025-10-17 15:49:49 +07:00
parent 6be90b6ea9
commit 4a9b6c9d01
3 changed files with 400 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/jadwalShift/IndexJadwalShift.jsx
View File

@@ -1,62 +1,74 @@
import { useState, useEffect } from 'react'; import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import ListJadwalShift from './component/ListJadwalShift'; import ListJadwalShift from './component/ListJadwalShift';
import DetailJadwalShift from './component/DetailJadwalShift'; import DetailJadwalShift from './component/DetailJadwalShift';
import { getAllJadwalShift, deleteJadwalShift } from '../../api/jadwal-shift'; import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
const { Text } = Typography;
const IndexJadwalShift = memo(function IndexJadwalShift() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const IndexJadwalShift = () => {
const [actionMode, setActionMode] = useState('list'); const [actionMode, setActionMode] = useState('list');
const [selectedData, setSelectedData] = useState(null); const [selectedData, setSelectedData] = useState(null);
const [jadwalShiftData, setJadwalShiftData] = useState([]); const [readOnly, setReadOnly] = useState(false);
const [loading, setLoading] = useState(false); const [showModal, setShowModal] = useState(false);
const fetchData = async () => { const setMode = (param) => {
setLoading(true); setShowModal(true);
try { switch (param) {
const response = await getAllJadwalShift(new URLSearchParams()); case 'add':
if (response.data) { setReadOnly(false);
setJadwalShiftData(response.data.data); break;
case 'edit':
setReadOnly(false);
break;
case 'preview':
setReadOnly(true);
break;
default:
setShowModal(false);
break;
} }
} catch (error) { setActionMode(param);
console.error("Error fetching jadwal shift data:", error);
}
setLoading(false);
}; };
useEffect(() => { useEffect(() => {
fetchData(); const token = localStorage.getItem('token');
if (token) {
setBreadcrumbItems([
{ title: <Text strong style={{ fontSize: '14px' }}>• Jadwal</Text> },
{ title: <Text strong style={{ fontSize: '14px' }}>Jadwal Shift</Text> }
]);
} else {
navigate('/signin');
}
}, []); }, []);
const handleDelete = async (id) => {
try {
await deleteJadwalShift(id);
fetchData();
} catch (error) {
console.error("Error deleting jadwal shift:", error);
}
};
return ( return (
<> <React.Fragment>
{actionMode === 'list' && (
<ListJadwalShift <ListJadwalShift
setActionMode={setActionMode}
setSelectedData={setSelectedData}
jadwalShiftData={jadwalShiftData}
loading={loading}
onDelete={handleDelete}
/>
)}
{(actionMode === 'add' || actionMode === 'edit') && (
<DetailJadwalShift
actionMode={actionMode} actionMode={actionMode}
setActionMode={setMode}
selectedData={selectedData} selectedData={selectedData}
setActionMode={setActionMode}
setSelectedData={setSelectedData} setSelectedData={setSelectedData}
fetchData={fetchData} readOnly={readOnly}
/> />
)} <DetailJadwalShift
</> setActionMode={setMode}
selectedData={selectedData}
setSelectedData={setSelectedData}
readOnly={readOnly}
showModal={showModal}
actionMode={actionMode}
/>
</React.Fragment>
); );
}; });
export default IndexJadwalShift; export default IndexJadwalShift;

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

@@ -1,51 +1,32 @@
import { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Modal, Select, Divider, Typography, Button, ConfigProvider } from 'antd'; import {
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif'; Modal,
import { createJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift'; Input,
import { getAllShift } from '../../../api/master-shift'; Typography,
import { getAllUser } from '../../../api/user'; Button,
ConfigProvider,
Row,
Col
} from 'antd';
import { NotifOk } from '../../../components/Global/ToastNotif';
const { Text } = Typography; const { Text } = Typography;
const { Option } = Select;
const DetailJadwalShift = (props) => { const DetailJadwalShift = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [shifts, setShifts] = useState([]);
const [users, setUsers] = useState([]);
const defaultData = { const defaultData = {
id: '', id: '',
id_shift: null, nama_shift: '',
id_user: null, jam_masuk: '',
jam_pulang: '',
username: '',
nama_employee: '',
whatsapp: ''
}; };
const [FormData, setFormData] = useState(defaultData); const [FormData, setFormData] = useState(defaultData);
const fetchShifts = async () => {
try {
const response = await getAllShift(new URLSearchParams());
setShifts(response?.data?.data || []);
} catch (error) {
console.error("Failed to fetch shifts:", error);
setShifts([]);
}
};
const fetchUsers = async () => {
try {
const response = await getAllUser(new URLSearchParams("limit=1000")); // Fetch all users
setUsers(response?.data?.data || []);
} catch (error) {
console.error("Failed to fetch users:", error);
setUsers([]);
}
};
useEffect(() => {
fetchShifts();
fetchUsers();
}, []);
const handleCancel = () => { const handleCancel = () => {
props.setSelectedData(null); props.setSelectedData(null);
props.setActionMode('list'); props.setActionMode('list');
@@ -53,70 +34,16 @@ const DetailJadwalShift = (props) => {
const handleSave = async () => { const handleSave = async () => {
setConfirmLoading(true); setConfirmLoading(true);
// This is a dummy save function for slicing purposes
if (!FormData.id_shift) { setTimeout(() => {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Shift Tidak Boleh Kosong',
});
setConfirmLoading(false); setConfirmLoading(false);
return;
}
if (!FormData.id_user) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom User Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
const payload = {
id_shift: FormData.id_shift,
id_user: FormData.id_user,
};
try {
const response = FormData.id
? await updateJadwalShift(FormData.id, payload)
: await createJadwalShift(payload);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({ NotifOk({
icon: 'success', icon: 'success',
title: 'Berhasil', title: 'Berhasil',
message: `Data Jadwal Shift berhasil ${FormData.id ? 'diubah' : 'ditambahkan'}.`, message: 'Data dummy berhasil disimpan.',
}); });
props.setActionMode('list'); props.setActionMode('list');
props.fetchData(); }, 1000);
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
} catch (error) {
console.error('Save Jadwal Shift Error:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
});
}
setConfirmLoading(false);
};
const handleSelectChange = (name, value) => {
setFormData({
...FormData,
[name]: value,
});
}; };
useEffect(() => { useEffect(() => {
@@ -125,93 +52,119 @@ const DetailJadwalShift = (props) => {
} else { } else {
setFormData(defaultData); setFormData(defaultData);
} }
}, [props.actionMode, props.selectedData]); }, [props.showModal, props.selectedData]);
// Dummy handler for slicing
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({ ...FormData, [name]: value });
};
return ( return (
<Modal <Modal
title={`${ title={`${
props.actionMode === 'add' props.actionMode === 'add'
? 'Tambah' ? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit' : 'Edit'
} Jadwal Shift`} } Jadwal Shift`}
open={props.actionMode !== 'list'} open={props.showModal}
onCancel={handleCancel} onCancel={handleCancel}
width={800}
footer={[ footer={[
<> <React.Fragment key="modal-footer">
<ConfigProvider <ConfigProvider
theme={{ theme={{
token: { colorBgContainer: '#E9F6EF' },
components: { components: {
Button: { Button: {
defaultBg: 'white', defaultBg: 'white',
defaultColor: '#23A55A', defaultColor: '#23A55A',
defaultBorderColor: '#23A55A', defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
}, },
}, },
}} }}
> >
<Button onClick={handleCancel}>Batal</Button> <Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
</ConfigProvider> </ConfigProvider>
<ConfigProvider <ConfigProvider
theme={{ theme={{
token: {
colorBgContainer: '#209652',
},
components: { components: {
Button: { Button: {
defaultBg: '#23a55a', defaultBg: '#23a55a',
defaultColor: '#FFFFFF', defaultColor: '#FFFFFF',
defaultBorderColor: '#23a55a', defaultBorderColor: '#23a55a',
defaultHoverColor: '#FFFFFF',
defaultHoverBorderColor: '#23a55a',
}, },
}, },
}} }}
> >
{!props.readOnly && (
<Button loading={confirmLoading} onClick={handleSave}> <Button loading={confirmLoading} onClick={handleSave}>
Simpan Simpan
</Button> </Button>
)}
</ConfigProvider> </ConfigProvider>
</>, </React.Fragment>,
]} ]}
> >
{FormData && ( {FormData && (
<div> <div>
<div style={{ marginBottom: 12 }}> <Row gutter={[16, 16]}>
<Text strong>Shift</Text> <Col span={12}>
<Text style={{ color: 'red' }}> *</Text> <Text strong>Nama Karyawan</Text>
<Select <Input
style={{ width: '100%' }} name="nama_employee"
placeholder="Pilih Shift" value={FormData.nama_employee}
onChange={(value) => handleSelectChange('id_shift', value)} onChange={handleInputChange}
value={FormData.id_shift} readOnly={props.readOnly}
> />
{shifts.map(shift => ( </Col>
<Option key={shift.id} value={shift.id}>{shift.nama_shift} ({shift.jam_shift})</Option> <Col span={12}>
))} <Text strong>Username</Text>
</Select> <Input
</div> name="username"
<div style={{ marginBottom: 12 }}> value={FormData.username}
<Text strong>User</Text> onChange={handleInputChange}
<Text style={{ color: 'red' }}> *</Text> readOnly={props.readOnly}
<Select />
style={{ width: '100%' }} </Col>
placeholder="Pilih User" <Col span={12}>
onChange={(value) => handleSelectChange('id_user', value)} <Text strong>Nama Shift</Text>
value={FormData.id_user} <Input
showSearch name="nama_shift"
optionFilterProp="children" value={FormData.nama_shift}
filterOption={(input, option) => onChange={handleInputChange}
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 readOnly={props.readOnly}
} />
> </Col>
{users.map(user => ( <Col span={12}>
<Option key={user.id} value={user.id}>{user.username} ({user.nama_employee})</Option> <Text strong>Whatsapp</Text>
))} <Input
</Select> name="whatsapp"
</div> 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> </div>
)} )}
</Modal> </Modal>

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

@@ -1,75 +1,52 @@
import React, { memo, useState, useEffect } from 'react'; import React, { memo, useState, useEffect } from 'react';
import { Button, Col, Row, Input, ConfigProvider, Card, Table, Space } from 'antd'; import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
import { import {
PlusOutlined, PlusOutlined,
EditOutlined, EditOutlined,
DeleteOutlined, DeleteOutlined,
SearchOutlined,
EyeOutlined, EyeOutlined,
SearchOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { NotifConfirmDialog } from '../../../components/Global/ToastNotif'; import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import TableList from '../../../components/Global/TableList';
const ListJadwalShift = (props) => { // --- DUMMY DATA (Initial State) --- //
const [searchValue, setSearchValue] = useState(''); const initialDummyData = [
const navigate = useNavigate();
useEffect(() => {
const token = localStorage.getItem('token');
if (!token) {
navigate('/signin');
}
}, [navigate]);
const handleSearch = (value) => {
console.log('Search value:', value);
};
const handleSearchClear = () => {
setSearchValue('');
};
const showPreviewModal = (record) => {
props.setSelectedData(record);
props.setActionMode('preview');
};
const showEditModal = (record) => {
props.setSelectedData(record);
props.setActionMode('edit');
};
const showAddModal = () => {
props.setSelectedData(null);
props.setActionMode('add');
};
const showDeleteDialog = (record) => {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi',
message: `Apakah anda yakin ingin menghapus data jadwal shift untuk "${record.nama_employee}"?`,
onConfirm: () => props.onDelete(record.id),
});
};
const columns = [
{ {
title: 'No', id: 1,
key: 'no', nama_shift: 'Shift Pagi',
width: '5%', jam_masuk: '07:00',
align: 'center', jam_pulang: '15:00',
render: (_, __, index) => index + 1, username: 'd.sanjaya',
nama_employee: 'Dede Sanjaya',
whatsapp: '081234567890'
}, },
{ {
title: 'Nama Shift', id: 2,
dataIndex: 'nama_shift', nama_shift: 'Shift Siang',
key: 'nama_shift', jam_masuk: '15:00',
jam_pulang: '23:00',
username: 'a.wijaya',
nama_employee: 'Andi Wijaya',
whatsapp: '081234567891'
}, },
{ {
title: 'Jam Shift', id: 3,
dataIndex: 'jam_shift', nama_shift: 'Shift Malam',
key: 'jam_shift', jam_masuk: '23:00',
jam_pulang: '07:00',
username: 'b.cahya',
nama_employee: 'Budi Cahya',
whatsapp: '081234567892'
},
];
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
title: 'Nama Karyawan',
dataIndex: 'nama_employee',
key: 'nama_employee',
}, },
{ {
title: 'Username', title: 'Username',
@@ -77,110 +54,229 @@ const ListJadwalShift = (props) => {
key: 'username', key: 'username',
}, },
{ {
title: 'Nama Employee', title: 'Nama Shift',
dataIndex: 'nama_employee', dataIndex: 'nama_shift',
key: 'nama_employee', key: 'nama_shift',
}, },
{ {
title: 'WhatsApp', title: 'Jam Masuk',
dataIndex: 'jam_masuk',
key: 'jam_masuk',
},
{
title: 'Jam Pulang',
dataIndex: 'jam_pulang',
key: 'jam_pulang',
},
{
title: 'Whatsapp',
dataIndex: 'whatsapp', dataIndex: 'whatsapp',
key: 'whatsapp', key: 'whatsapp',
}, },
{ {
title: 'Aksi', title: 'Aksi',
key: 'action', key: 'aksi',
align: 'center', align: 'center',
width: '15%',
render: (_, record) => ( render: (_, record) => (
<Space> <Space>
<Button <Button
icon={<EyeOutlined />} type="text"
icon={<EyeOutlined style={{ color: '#1890ff' }} />}
onClick={() => showPreviewModal(record)} onClick={() => showPreviewModal(record)}
style={{
color: '#1890ff',
borderColor: '#1890ff',
}}
/> />
<Button <Button
icon={<EditOutlined />} type="text"
icon={<EditOutlined style={{ color: '#faad14' }} />}
onClick={() => showEditModal(record)} onClick={() => showEditModal(record)}
style={{
color: '#faad14',
borderColor: '#faad14',
}}
/> />
<Button <Button
type="text"
danger danger
icon={<DeleteOutlined />} icon={<DeleteOutlined />}
onClick={() => showDeleteDialog(record)} onClick={() => showDeleteDialog(record)}
style={{
borderColor: '#ff4d4f',
}}
/> />
</Space> </Space>
), ),
}, },
]; ];
const filteredData = props.jadwalShiftData.filter(item => const ListJadwalShift = memo(function ListJadwalShift(props) {
item.nama_employee.toLowerCase().includes(searchValue.toLowerCase()) || const [dataSource, setDataSource] = useState(initialDummyData);
item.username.toLowerCase().includes(searchValue.toLowerCase()) || const [trigerFilter, setTrigerFilter] = useState(false);
item.nama_shift.toLowerCase().includes(searchValue.toLowerCase()) const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
const [searchValue, setSearchValue] = useState('');
const navigate = useNavigate();
// --- DUMMY API --- //
const getDummyData = (queryParams) => {
return new Promise((resolve) => {
const { criteria } = queryParams;
let data = dataSource;
if (criteria) {
data = dataSource.filter(item =>
item.nama_employee.toLowerCase().includes(criteria.toLowerCase()) ||
item.username.toLowerCase().includes(criteria.toLowerCase())
); );
}
setTimeout(() => {
resolve({
status: 200,
data: {
data: data,
paging: {
page: 1,
limit: 10,
total: data.length,
page_total: 1
}
}
});
}, 100);
});
};
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
if (props.actionMode === 'list') {
setFormDataFilter(defaultFilter);
doFilter();
}
} else {
navigate('/signin');
}
}, [props.actionMode, dataSource]); // Added dataSource to dependency array
const doFilter = () => {
setTrigerFilter((prev) => !prev);
};
const handleSearch = () => {
setFormDataFilter({ criteria: searchValue });
setTrigerFilter((prev) => !prev);
};
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) => {
props.setSelectedData(param);
props.setActionMode('add');
};
const showDeleteDialog = (param) => {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi Hapus',
message: `Jadwal shift untuk "${param.nama_employee}" akan dihapus?`,
onConfirm: () => handleDelete(param.id),
onCancel: () => props.setSelectedData(null),
});
};
const handleDelete = (id) => {
setDataSource(prevData => prevData.filter(item => item.id !== id));
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: 'Data Jadwal Shift berhasil dihapus.',
});
doFilter(); // Trigger a re-fetch from the new state
};
return ( return (
<React.Fragment>
<Card> <Card>
<Row justify="space-between" align="middle" gutter={[16, 16]}> <Row>
<Col xs={24} sm={12} md={10} lg={8}> <Col xs={24}>
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search <Input.Search
placeholder="Cari jadwal shift..." placeholder="Cari berdasarkan nama atau username..."
value={searchValue} value={searchValue}
onChange={(e) => setSearchValue(e.target.value)} onChange={(e) => {
const value = e.target.value;
setSearchValue(value);
if (value === '') {
handleSearchClear();
}
}}
onSearch={handleSearch} onSearch={handleSearch}
allowClear={{ allowClear={{
clearIcon: <span onClick={handleSearchClear}>x</span>, clearIcon: <span onClick={handleSearchClear}>✕</span>,
}} }}
enterButton={<Button type="primary" icon={<SearchOutlined />} style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}>Cari</Button>} enterButton={
<Button
type="primary"
icon={<SearchOutlined />}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Search
</Button>
}
size="large" size="large"
/> />
</Col> </Col>
<Col> <Col>
<Space wrap size="small">
<ConfigProvider <ConfigProvider
theme={{ theme={{
token: { colorBgContainer: '#E9F6EF' },
components: { components: {
Button: { Button: {
defaultBg: 'white', defaultBg: 'white',
defaultColor: '#23A55A', defaultColor: '#23A55A',
defaultBorderColor: '#23A55A', defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
}, },
}, },
}} }}
> >
<Button <Button
icon={<PlusOutlined />} icon={<PlusOutlined />}
onClick={showAddModal} onClick={() => showAddModal()}
size="large" size="large"
> >
Tambah Jadwal Shift Tambah Data
</Button> </Button>
</ConfigProvider> </ConfigProvider>
</Space>
</Col> </Col>
</Row> </Row>
<Row style={{ marginTop: 16 }}> </Col>
<Col span={24}> <Col xs={24} style={{ marginTop: '16px' }}>
<Table <TableList
columns={columns} mobile
dataSource={filteredData} cardColor={'#42AAFF'}
loading={props.loading} header={'nama_employee'}
rowKey="id" showPreviewModal={showPreviewModal}
showEditModal={showEditModal}
showDeleteDialog={showDeleteDialog}
getData={getDummyData}
queryParams={formDataFilter}
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
triger={trigerFilter}
/> />
</Col> </Col>
</Row> </Row>
</Card> </Card>
</React.Fragment>
); );
}; });
export default ListJadwalShift; export default ListJadwalShift;