feat: enhance DetailShift and ListShift components with improved validation and UI updates

src/pages/master/shift/component/DetailShift.jsx

@@ -1,13 +1,14 @@
-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';
+import React, { useEffect, useState } from 'react';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, TimePicker, Space } from 'antd';
+import { NotifOk } from '../../../../components/Global/ToastNotif';
 import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 
-dayjs.extend(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 } });
 
 const { Text } = Typography;
+const timeFormat = 'HH:mm';
 
 const DetailShift = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
@@ -15,12 +16,12 @@ const DetailShift = (props) => {
     const defaultData = {
         shift_id: '',
         shift_name: '',
-        start_time: '',
-        end_time: '',
+        start_time: '08:00',
+        end_time: '16:00',
         is_active: true,
     };
 
-    const [FormData, setFormData] = useState(defaultData);
+    const [formData, setFormData] = useState(defaultData);
 
     const handleCancel = () => {
         props.setSelectedData(null);
@@ -30,349 +31,125 @@ const DetailShift = (props) => {
     const handleSave = async () => {
         setConfirmLoading(true);
 
-        // Validasi required fields
-        if (!FormData.shift_name || FormData.shift_name.trim() === '') {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Nama Shift Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!FormData.start_time || FormData.start_time.trim() === '') {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Jam Mulai Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!FormData.end_time || FormData.end_time.trim() === '') {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Jam Selesai Tidak Boleh Kosong',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        // Validate time format
-        const timePattern = /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/;
-        if (!timePattern.test(FormData.start_time)) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message:
-                    'Format Jam Mulai tidak valid. Gunakan format HH:mm atau HH:mm:ss (contoh: 08:00)',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
-        if (!timePattern.test(FormData.end_time)) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message:
-                    'Format Jam Selesai tidak valid. Gunakan format HH:mm atau HH:mm:ss (contoh: 17:00)',
-            });
+        if (!formData.shift_name) {
+            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Nama Shift wajib diisi.' });
             setConfirmLoading(false);
             return;
         }
 
         try {
-            if (FormData.shift_id) {
-                // Update existing shift
-                const payload = {
-                    shift_name: FormData.shift_name,
-                    start_time: FormData.start_time,
-                    end_time: FormData.end_time,
-                    is_active: FormData.is_active,
-                };
+            const payload = {
+                shift_name: formData.shift_name,
+                start_time: formData.start_time,
+                end_time: formData.end_time,
+                is_active: formData.is_active,
+            };
 
-                const response = await updateShift(FormData.shift_id, payload);
-                console.log('updateShift response:', response);
+            const response =
+                props.actionMode === 'edit'
+                    ? await updateShift(formData.shift_id, payload)
+                    : await createShift(payload);
 
-                if (response.statusCode === 200) {
-                    NotifOk({
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: `Data Shift "${FormData.shift_name}" berhasil diubah.`,
-                    });
-                    props.setActionMode('list');
-                } else {
-                    NotifAlert({
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: response.message || 'Gagal mengubah data Shift.',
-                    });
-                }
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                NotifOk({ icon: 'success', title: 'Berhasil', message: `Data Shift berhasil disimpan.` });
+                props.setActionMode('list');
             } else {
-                // Create new shift
-                const payload = {
-                    shift_name: FormData.shift_name,
-                    start_time: FormData.start_time,
-                    end_time: FormData.end_time,
-                    is_active: FormData.is_active,
-                };
-
-                const response = await createShift(payload);
-                console.log('createShift response:', response);
-
-                if (response.statusCode === 200 || response.statusCode === 201) {
-                    NotifOk({
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: `Data Shift "${FormData.shift_name}" berhasil ditambahkan.`,
-                    });
-                    props.setActionMode('list');
-                } else {
-                    NotifAlert({
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: response.message || 'Gagal menambahkan data Shift.',
-                    });
-                }
+                NotifOk({ icon: 'error', title: 'Gagal', message: response?.message || 'Gagal menyimpan data.' });
             }
         } catch (error) {
-            console.error('Save Shift Error:', error);
-            NotifAlert({
-                icon: 'error',
-                title: 'Error',
-                message: error.message || 'Terjadi kesalahan saat menyimpan data.',
-            });
+            NotifOk({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan server.' });
+        } finally {
+            setConfirmLoading(false);
         }
-
-        setConfirmLoading(false);
-    };
-
-    // Helper function to format time input
-    const formatTimeInput = (value) => {
-        if (!value) return value;
-
-        // Remove any whitespace
-        value = value.trim();
-
-        // If user inputs single digit hour like "8:00", convert to "08:00"
-        const timeRegex = /^(\d{1,2}):(\d{2})(:\d{2})?$/;
-        const match = value.match(timeRegex);
-
-        if (match) {
-            const hours = match[1].padStart(2, '0');
-            const minutes = match[2];
-            const seconds = match[3] || '';
-            return `${hours}:${minutes}${seconds}`;
-        }
-
-        return value;
     };
 
     const handleInputChange = (e) => {
         const { name, value } = e.target;
-
-        // Just set the value without formatting during typing
-        setFormData({
-            ...FormData,
-            [name]: value,
-        });
+        setFormData({ ...formData, [name]: value });
     };
 
-    // Format time when user leaves the input field (onBlur)
-    const handleTimeBlur = (e) => {
-        const { name, value } = e.target;
-
-        if (name === 'start_time' || name === 'end_time') {
-            const formattedValue = formatTimeInput(value);
-            setFormData({
-                ...FormData,
-                [name]: formattedValue,
-            });
-        }
-    };
-
-    const handleStatusToggle = (isChecked) => {
-        setFormData({
-            ...FormData,
-            is_active: isChecked,
-        });
-    };
-
-    // Helper function to extract time from ISO timestamp using dayjs
-    const extractTime = (timeString) => {
-        if (!timeString) return '';
-
-        // If it's ISO timestamp like "1970-01-01T08:00:00.000Z"
-        if (timeString.includes('T')) {
-            return dayjs.utc(timeString).format('HH:mm');
-        }
-
-        // If it's already in HH:mm:ss format, remove seconds
-        if (timeString.includes(':')) {
-            const parts = timeString.split(':');
-            return `${parts[0]}:${parts[1]}`;
-        }
-
-        return timeString;
+    const handleTimeChange = (time, timeString, field) => {
+        setFormData({ ...formData, [field]: timeString });
     };
 
     useEffect(() => {
-        const token = localStorage.getItem('token');
-        if (token) {
-            if (props.selectedData != null) {
-                // Only set fields that are in defaultData
-                const filteredData = {
-                    shift_id: props.selectedData.shift_id || '',
-                    shift_name: props.selectedData.shift_name || '',
-                    start_time: extractTime(props.selectedData.start_time) || '',
-                    end_time: extractTime(props.selectedData.end_time) || '',
-                    is_active: props.selectedData.is_active ?? true,
-                };
-                setFormData(filteredData);
-            } else {
-                setFormData(defaultData);
-            }
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+        } else {
+            setFormData(defaultData);
         }
-    }, [props.showModal]);
+    }, [props.showModal, props.selectedData]);
+
+    const modalTitle = `${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`;
 
     return (
         <Modal
-            title={`${
-                props.actionMode === 'add'
-                    ? 'Tambah'
-                    : props.actionMode === 'preview'
-                    ? 'Preview'
-                    : 'Edit'
-            } Shift`}
+            title={modalTitle}
             open={props.showModal}
             onCancel={handleCancel}
             footer={[
-                <>
-                    <ConfigProvider
-                        theme={{
-                            token: { colorBgContainer: '#E9F6EF' },
-                            components: {
-                                Button: {
-                                    defaultBg: 'white',
-                                    defaultColor: '#23A55A',
-                                    defaultBorderColor: '#23A55A',
-                                    defaultHoverColor: '#23A55A',
-                                },
-                            },
-                        }}
-                    >
-                        <Button onClick={handleCancel}>Batal</Button>
-                    </ConfigProvider>
-                    <ConfigProvider
-                        theme={{
-                            token: {
-                                colorBgContainer: '#209652',
-                            },
-                            components: {
-                                Button: {
-                                    defaultBg: '#23a55a',
-                                    defaultColor: '#FFFFFF',
-                                    defaultBorderColor: '#23a55a',
-                                    defaultHoverColor: '#FFFFFF',
-                                    defaultHoverBorderColor: '#23a55a',
-                                },
-                            },
-                        }}
-                    >
-                        {!props.readOnly && (
-                            <Button loading={confirmLoading} onClick={handleSave}>
-                                Simpan
-                            </Button>
-                        )}
-                    </ConfigProvider>
-                </>,
+                <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>,
             ]}
         >
-            {FormData && (
+            <div>
                 <div>
-                    {/* Status Toggle */}
-                    <div style={{ marginBottom: 12 }}>
-                        <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 === true ? '#23A55A' : '#bfbfbf',
-                                    }}
-                                    checked={FormData.is_active === true}
-                                    onChange={handleStatusToggle}
-                                />
-                            </div>
-                            <div>
-                                <Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text>
-                            </div>
-                        </div>
-                    </div>
-                    <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="Masukkan Nama Shift"
-                            readOnly={props.readOnly}
+                    <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 style={{ marginBottom: 12 }}>
-                        <Text strong>Jam Mulai</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-                        <Input
-                            name="start_time"
-                            value={FormData.start_time}
-                            onChange={handleInputChange}
-                            placeholder="Masukkan Jam Mulai"
-                            readOnly={props.readOnly}
-                            maxLength={8}
-                        />
-                        <Text
-                            type="secondary"
-                            style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
-                        >
-                            Contoh: 08:00 atau 08:00:00
-                        </Text>
-                    </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Jam Selesai</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-                        <Input
-                            name="end_time"
-                            value={FormData.end_time}
-                            onChange={handleInputChange}
-                            placeholder="Masukkan Jam Selesai"
-                            readOnly={props.readOnly}
-                            maxLength={8}
-                        />
-                        <Text
-                            type="secondary"
-                            style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
-                        >
-                            Contoh: 17:00 atau 17:00:00
-                        </Text>
+                        <Text style={{ marginLeft: '8px' }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
                     </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;