feat: add shift management functionality with CRUD operations and UI components

2025-10-13 02:25:16 +07:00
parent af6c6de301
commit 54290baaac
10 changed files with 864 additions and 1 deletions
--- a/src/pages/master/shift/component/DetailShift.jsx
+++ b/src/pages/master/shift/component/DetailShift.jsx
@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { createShift, updateShift } from '../../../../api/master-shift';
+
+const { Text } = Typography;
+
+const DetailShift = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const readOnly = props.actionMode === 'preview';
+
+    const defaultData = {
+        id: '',
+        nama_shift: '',
+        jam_shift: '',
+        status: true, // default to active
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        if (!FormData.nama_shift) {
+            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Nama Shift Tidak Boleh Kosong' });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.jam_shift) {
+            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Jam Shift Tidak Boleh Kosong' });
+            setConfirmLoading(false);
+            return;
+        }
+
+        const payload = {
+            nama_shift: FormData.nama_shift,
+            jam_shift: FormData.jam_shift,
+            status: FormData.status,
+        };
+
+        try {
+            const response = FormData.id
+                ? await updateShift(FormData.id, payload)
+                : await createShift(payload);
+
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Shift "${FormData.nama_shift}" berhasil ${FormData.id ? 'diubah' : 'ditambahkan'}.`,
+                });
+                props.setActionMode('list');
+            } else {
+                NotifAlert({ icon: 'error', title: 'Gagal', message: response?.message || 'Terjadi kesalahan saat menyimpan data.' });
+            }
+        } catch (error) {
+            NotifAlert({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan pada server.' });
+        }
+
+        setConfirmLoading(false);
+    };
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...FormData, [name]: value });
+    };
+
+    const handleStatusToggle = (checked) => {
+        setFormData({ ...FormData, status: checked });
+    };
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+        } else {
+            setFormData(defaultData);
+        }
+    }, [props.actionMode, props.selectedData]);
+
+    return (
+        <Modal
+            title={`${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`}
+            open={props.actionMode !== 'list'}
+            onCancel={handleCancel}
+            footer={[
+                <Button key="back" onClick={handleCancel}>Batal</Button>,
+                !readOnly && (
+                    <Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave}>
+                        Simpan
+                    </Button>
+                ),
+            ]}
+        >
+            {FormData && (
+                <div>
+                    <div>
+                        <Text strong>Status</Text>
+                        <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
+                            <Switch
+                                disabled={readOnly}
+                                checked={FormData.status}
+                                onChange={handleStatusToggle}
+                            />
+                            <Text style={{ marginLeft: '8px' }}>{FormData.status ? 'Active' : 'Inactive'}</Text>
+                        </div>
+                    </div>
+                    <Divider />
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Nama Shift</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="nama_shift"
+                            value={FormData.nama_shift}
+                            onChange={handleInputChange}
+                            placeholder="Masukkan Nama Shift"
+                            readOnly={readOnly}
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Jam Shift</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="jam_shift"
+                            value={FormData.jam_shift}
+                            onChange={handleInputChange}
+                            placeholder="Contoh: 08:00 - 17:00"
+                            readOnly={readOnly}
+                        />
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default DetailShift;