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

104
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;
}
} catch (error) { case 'edit':
console.error("Error fetching jadwal shift data:", error); setReadOnly(false);
break;
case 'preview':
setReadOnly(true);
break;
default:
setShowModal(false);
break;
} }
setLoading(false); setActionMode(param);
}; };
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 actionMode={actionMode}
setActionMode={setActionMode} setActionMode={setMode}
setSelectedData={setSelectedData} selectedData={selectedData}
jadwalShiftData={jadwalShiftData} setSelectedData={setSelectedData}
loading={loading} readOnly={readOnly}
onDelete={handleDelete} />
/> <DetailJadwalShift
)} setActionMode={setMode}
{(actionMode === 'add' || actionMode === 'edit') && ( selectedData={selectedData}
<DetailJadwalShift setSelectedData={setSelectedData}
actionMode={actionMode} readOnly={readOnly}
selectedData={selectedData} showModal={showModal}
setActionMode={setActionMode} actionMode={actionMode}
setSelectedData={setSelectedData} />
fetchData={fetchData} </React.Fragment>
/>
)}
</>
); );
}; });
export default IndexJadwalShift; export default IndexJadwalShift;

245
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({ NotifOk({
icon: 'warning', icon: 'success',
title: 'Peringatan', title: 'Berhasil',
message: 'Kolom User Tidak Boleh Kosong', message: 'Data dummy berhasil disimpan.',
}); });
setConfirmLoading(false); props.setActionMode('list');
return; }, 1000);
}
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({
icon: 'success',
title: 'Berhasil',
message: `Data Jadwal Shift berhasil ${FormData.id ? 'diubah' : 'ditambahkan'}.`,
});
props.setActionMode('list');
props.fetchData();
} 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',
}, },
}, },
}} }}
> >
<Button loading={confirmLoading} onClick={handleSave}> {!props.readOnly && (
Simpan <Button loading={confirmLoading} onClick={handleSave}>
</Button> Simpan
</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>

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

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