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

integration jadwal shift

Browse Source
This commit is contained in:
Rafiafrzl
2025-10-28 12:54:24 +07:00
parent 6b727c84d8
commit 3738adf85a
3 changed files with 829 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/jadwal-shift.jsx
View File

@@ -3,7 +3,7 @@ import { SendRequest } from '../components/Global/ApiRequest';
const getAllJadwalShift = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `jadwal-shift?${queryParams.toString()}`,
prefix: `user-schedule?${queryParams.toString()}`,
});
return response.data;
@@ -12,7 +12,7 @@ const getAllJadwalShift = async (queryParams) => {
const getJadwalShiftById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `jadwal-shift/${id}`,
prefix: `user-schedule/${id}`,
});
return response.data;
@@ -21,7 +21,7 @@ const getJadwalShiftById = async (id) => {
const createJadwalShift = async (queryParams) => {
const response = await SendRequest({
method: 'post',
prefix: `jadwal-shift`,
prefix: `user-schedule`,
params: queryParams,
});
@@ -31,7 +31,7 @@ const createJadwalShift = async (queryParams) => {
const updateJadwalShift = async (id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `jadwal-shift/${id}`,
prefix: `user-schedule/${id}`,
params: queryParams,
});
@@ -41,7 +41,7 @@ const updateJadwalShift = async (id, queryParams) => {
const deleteJadwalShift = async (id) => {
const response = await SendRequest({
method: 'delete',
prefix: `jadwal-shift/${id}`,
prefix: `user-schedule/${id}`,
});
return response.data;
};

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

@@ -1,173 +1,278 @@
import React, { useEffect, useState } from 'react';
import {
Modal,
Typography,
Button,
ConfigProvider,
Form,
Select,
Spin,
Input
} from 'antd';
import { NotifOk, NotifAlert } from '../../../components/Global/ToastNotif';
import { updateJadwalShift, createJadwalShift } from '../../../api/jadwal-shift.jsx';
import { Modal, Select, Typography, Button, ConfigProvider } from 'antd';
import { NotifOk } from '../../../components/Global/ToastNotif';
import { createJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift';
import { getAllUser } from '../../../api/user';
import { getAllShift } from '../../../api/master-shift';
import { validateRun } from '../../../Utils/validate';
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 [shifts, setShifts] = useState([]);
const [loadingData, setLoadingData] = useState(false);
const isReadOnly = props.actionMode === 'preview';
const defaultData = {
id: '',
user_id: null,
shift_id: null,
schedule_id: '',
user_phone: null,
};
const [formData, setFormData] = useState(defaultData);
const handleSelectChange = (name, value) => {
const updates = { [name]: value };
if (name === 'user_id') {
const selectedEmployee = employees.find((emp) => emp.user_id === value);
updates.user_phone = selectedEmployee?.user_phone || '-';
}
setFormData({
...formData,
...updates,
});
};
const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list');
};
const fetchEmployees = async () => {
setLoadingEmployees(true);
const fetchData = async () => {
setLoadingData(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);
const params = new URLSearchParams({
page: 1,
limit: 100,
});
const [usersResponse, shiftsResponse] = await Promise.all([
getAllUser(params),
getAllShift(params),
]);
const userData = usersResponse?.data || usersResponse || [];
const shiftData = shiftsResponse?.data || shiftsResponse || [];
setEmployees(Array.isArray(userData) ? userData : []);
setShifts(Array.isArray(shiftData) ? shiftData : []);
} catch (error) {
NotifAlert({ icon: 'error', title: 'Gagal', message: 'Gagal memuat daftar karyawan.' });
NotifOk({
icon: 'error',
title: 'Gagal',
message: 'Gagal memuat data karyawan atau shift.',
});
} finally {
setLoadingEmployees(false);
setLoadingData(false);
}
};
const handleSave = async () => {
setConfirmLoading(true);
// Daftar aturan validasi
const validationRules = [
{ field: 'user_id', label: 'Nama Karyawan', required: true },
{ field: 'shift_id', label: 'Shift', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: errorMessages,
});
setConfirmLoading(false);
})
)
return;
try {
const values = await form.validateFields();
let payload;
let responseMessage;
const payload = {
user_id: formData.user_id,
shift_id: formData.shift_id,
};
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.';
// Add schedule_id only if editing and it exists
if (props.actionMode === 'edit' && formData.schedule_id) {
payload.schedule_id = formData.schedule_id;
}
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
const response =
props.actionMode === 'edit'
? await updateJadwalShift(formData.id, payload)
: await createJadwalShift(payload);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Jadwal berhasil ${action}.`,
});
props.setActionMode('list');
} else {
NotifOk({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
} catch (error) {
const message = error.response?.data?.message || 'Gagal memperbarui jadwal.';
NotifAlert({ icon: 'error', title: 'Gagal', message });
NotifOk({
icon: 'error',
title: 'Error',
message: error.message || 'Terjadi kesalahan pada server.',
});
} finally {
setConfirmLoading(false);
}
};
useEffect(() => {
// 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
});
}
fetchData();
}
}, [props.actionMode, props.showModal, props.selectedData, form]);
if (props.selectedData) {
setFormData({
id: props.selectedData.id || '',
user_id: props.selectedData.user_id || null,
shift_id: props.selectedData.shift_id || null,
schedule_id: props.selectedData.schedule_id || '',
user_phone: props.selectedData.whatsapp || props.selectedData.user_phone || null,
});
} else {
setFormData(defaultData);
}
}, [props.showModal, props.selectedData, props.actionMode]);
return (
<Modal
title={isReadOnly ? 'Preview Jadwal' : (props.actionMode === 'edit' ? 'Edit Jadwal' : 'Tambah User')}
title={`${
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit'
} Jadwal Shift`}
open={props.showModal}
onCancel={handleCancel}
width={600}
footer={[
<React.Fragment key="modal-footer">
<Button key="back" onClick={handleCancel}>
{isReadOnly ? 'Tutup' : 'Batal'}
</Button>
{!isReadOnly && (
<Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave} style={{ backgroundColor: '#23A55A' }}>
Simpan
</Button>
)}
<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>,
]}
>
<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>
{formData && (
<div>
<div style={{ marginBottom: 12 }}>
<Text strong>Nama Karyawan</Text>
<Text style={{ color: 'red' }}> *</Text>
<Select
value={formData.user_id}
onChange={(value) => handleSelectChange('user_id', value)}
placeholder="Pilih karyawan"
disabled={props.readOnly || loadingData}
loading={loadingData}
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
style={{ width: '100%' }}
>
{employees
.filter((emp) => emp.user_id != null)
.map((emp) => (
<Option key={`emp-${emp.user_id}`} value={emp.user_id}>
{emp.user_fullname || emp.user_name}
</Option>
))}
</Select>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>No. Telepon</Text>
<div
style={{
padding: '8px 12px',
backgroundColor: '#f5f5f5',
borderRadius: '6px',
marginTop: '4px',
color: formData.user_phone ? '#000' : '#999',
}}
>
{formData.user_phone || 'Pilih karyawan terlebih dahulu'}
</div>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Shift</Text>
<Text style={{ color: 'red' }}> *</Text>
<Select
value={formData.shift_id}
onChange={(value) => handleSelectChange('shift_id', value)}
placeholder="Pilih shift"
disabled={props.readOnly || loadingData}
loading={loadingData}
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
style={{ width: '100%' }}
>
{shifts
.filter((shift) => shift.shift_id != null)
.map((shift) => (
<Option key={`shift-${shift.shift_id}`} value={shift.shift_id}>
{shift.shift_name}
</Option>
))}
</Select>
</div>
</div>
)}
</Modal>
);
};

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

File diff suppressed because it is too large Load Diff