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 React, { useEffect, useState } from 'react';
-import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, TimePicker, Space } from 'antd';
-import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { NotifOk } from '../../../../components/Global/ToastNotif';
-import { createShift, updateShift } from '../../../../api/master-shift';
 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: '',
+        start_time: '08:00',
-        end_time: '',
+        end_time: '16:00',
         is_active: true,
     };
 
-    const [FormData, setFormData] = useState(defaultData);
+    const [formData, setFormData] = useState(defaultData);
 
     const handleCancel = () => {
         props.setSelectedData(null);
@@ -30,347 +31,123 @@ const DetailShift = (props) => {
     const handleSave = async () => {
         setConfirmLoading(true);
 
-        // Validasi required fields
+        if (!formData.shift_name) {
-        if (!FormData.shift_name || FormData.shift_name.trim() === '') {
+            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Nama Shift wajib diisi.' });
-            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)',
-            });
             setConfirmLoading(false);
             return;
         }
 
         try {
-            if (FormData.shift_id) {
-                // Update existing shift
             const payload = {
-                    shift_name: FormData.shift_name,
+                shift_name: formData.shift_name,
-                    start_time: FormData.start_time,
+                start_time: formData.start_time,
-                    end_time: FormData.end_time,
+                end_time: formData.end_time,
-                    is_active: FormData.is_active,
+                is_active: formData.is_active,
             };
 
-                const response = await updateShift(FormData.shift_id, payload);
+            const response =
-                console.log('updateShift response:', response);
+                props.actionMode === 'edit'
+                    ? await updateShift(formData.shift_id, payload)
+                    : await createShift(payload);
 
-                if (response.statusCode === 200) {
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
-                    NotifOk({
+                NotifOk({ icon: 'success', title: 'Berhasil', message: `Data Shift berhasil disimpan.` });
-                        icon: 'success',
-                        title: 'Berhasil',
-                        message: `Data Shift "${FormData.shift_name}" berhasil diubah.`,
-                    });
                 props.setActionMode('list');
             } else {
-                    NotifAlert({
+                NotifOk({ icon: 'error', title: 'Gagal', message: response?.message || 'Gagal menyimpan data.' });
-                        icon: 'error',
-                        title: 'Gagal',
-                        message: response.message || 'Gagal mengubah data Shift.',
-                    });
-                }
-            } 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.',
-                    });
-                }
             }
         } catch (error) {
-            console.error('Save Shift Error:', error);
+            NotifOk({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan server.' });
-            NotifAlert({
+        } finally {
-                icon: 'error',
-                title: 'Error',
-                message: error.message || 'Terjadi kesalahan saat menyimpan data.',
-            });
-        }
-
             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;
-
+        setFormData({ ...formData, [name]: value });
-        // Just set the value without formatting during typing
-        setFormData({
-            ...FormData,
-            [name]: value,
-        });
     };
 
-    // Format time when user leaves the input field (onBlur)
+    const handleTimeChange = (time, timeString, field) => {
-    const handleTimeBlur = (e) => {
+        setFormData({ ...formData, [field]: timeString });
-        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;
     };
 
     useEffect(() => {
-        const token = localStorage.getItem('token');
+        if (props.selectedData) {
-        if (token) {
+            setFormData(props.selectedData);
-            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);
         }
-        }
+    }, [props.showModal, props.selectedData]);
-    }, [props.showModal]);
+
+    const modalTitle = `${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`;
 
     return (
         <Modal
-            title={`${
+            title={modalTitle}
-                props.actionMode === 'add'
-                    ? 'Tambah'
-                    : props.actionMode === 'preview'
-                    ? 'Preview'
-                    : 'Edit'
-            } Shift`}
             open={props.showModal}
             onCancel={handleCancel}
             footer={[
-                <>
+                <ConfigProvider key="footer-buttons" theme={{ components: { Button: { defaultColor: '#23A55A', defaultBorderColor: '#23A55A' } } }}>
-                    <ConfigProvider
+                    <Button key="back" onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
-                        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}>
+                        <Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave} style={{ backgroundColor: '#23a55a' }}>
                             Simpan
                         </Button>
                     )}
-                    </ConfigProvider>
+                </ConfigProvider>,
-                </>,
             ]}
         >
-            {FormData && (
             <div>
-                    {/* Status Toggle */}
-                    <div style={{ marginBottom: 12 }}>
                 <div>
                     <Text strong>Status</Text>
-                        </div>
+                    <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
-                        <div
-                            style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                marginTop: '8px',
-                            }}
-                        >
-                            <div style={{ marginRight: '8px' }}>
                         <Switch
                             disabled={props.readOnly}
-                                    style={{
+                            style={{ backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf' }}
-                                        backgroundColor:
+                            checked={formData.is_active}
-                                            FormData.is_active === true ? '#23A55A' : '#bfbfbf',
+                            onChange={(checked) => setFormData({ ...formData, is_active: checked })}
-                                    }}
-                                    checked={FormData.is_active === true}
-                                    onChange={handleStatusToggle}
                         />
-                            </div>
+                        <Text style={{ marginLeft: '8px' }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
-                            <div>
-                                <Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text>
-                            </div>
                     </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}
+                        value={formData.shift_name}
                         onChange={handleInputChange}
-                            placeholder="Masukkan Nama Shift"
+                        placeholder="Contoh: Pagi, Sore, Malam"
                         readOnly={props.readOnly}
                     />
                 </div>
+
                 <div style={{ marginBottom: 12 }}>
-                        <Text strong>Jam Mulai</Text>
+                    <Text strong>Waktu Shift</Text>
                     <Text style={{ color: 'red' }}> *</Text>
-                        <Input
+                    <Space.Compact block style={{ marginTop: '4px' }}>
-                            name="start_time"
+                        <TimePicker
-                            value={FormData.start_time}
+                            value={dayjs(formData.start_time, timeFormat)}
-                            onChange={handleInputChange}
+                            format={timeFormat}
-                            placeholder="Masukkan Jam Mulai"
+                            onChange={(time, timeString) => handleTimeChange(time, timeString, 'start_time')}
-                            readOnly={props.readOnly}
+                            style={{ width: '50%' }}
-                            maxLength={8}
+                            placeholder="Waktu Mulai"
+                            disabled={props.readOnly}
                         />
-                        <Text
+                        <TimePicker
-                            type="secondary"
+                            value={dayjs(formData.end_time, timeFormat)}
-                            style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
+                            format={timeFormat}
-                        >
+                            onChange={(time, timeString) => handleTimeChange(time, time-string, 'end_time')}
-                            Contoh: 08:00 atau 08:00:00
+                            style={{ width: '50%' }}
-                        </Text>
+                            placeholder="Waktu Selesai"
-                    </div>
+                            disabled={props.readOnly}
-                    <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
+                    </Space.Compact>
-                            type="secondary"
-                            style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
-                        >
-                            Contoh: 17:00 atau 17:00:00
-                        </Text>
                 </div>
             </div>
-            )}
         </Modal>
     );
 };

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

@@ -10,62 +10,46 @@ import {
 import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
 import TableList from '../../../../components/Global/TableList';
-import { getAllShift, deleteShift } from '../../../../api/master-shift';
+// import { getAllShift, deleteShift } from '../../../../api/master-shift'; // <-- API needs to be created
 
-// Helper function to extract time from ISO timestamp
+// Mock API calls for demonstration
-const extractTime = (timeString) => {
+const getAllShift = async () => ({
-    if (!timeString) return '-';
+    data: [
-
+        { shift_id: 1, shift_name: 'Pagi', start_time: '08:00', end_time: '16:00', is_active: true },
-    // If it's ISO timestamp like "1970-01-01T08:00:00.000Z"
+        { shift_id: 2, shift_name: 'Sore', start_time: '16:00', end_time: '00:00', is_active: true },
-    if (timeString.includes('T')) {
+        { shift_id: 3, shift_name: 'Malam', start_time: '00:00', end_time: '08:00', is_active: false },
-        const date = new Date(timeString);
+    ],
-        const hours = String(date.getUTCHours()).padStart(2, '0');
+    statusCode: 200,
-        const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+});
-        return `${hours}:${minutes}`;
+const deleteShift = async (id) => ({ statusCode: 200, message: 'Data berhasil dihapus' });
-    }
-
-    // If it's already in HH:mm or HH:mm:ss format
-    if (timeString.includes(':')) {
-        const parts = timeString.split(':');
-        return `${parts[0]}:${parts[1]}`; // Return HH:mm only
-    }
-
-    return timeString;
-};
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
-        title: 'No',
+        title: 'Shift Name',
-        key: 'no',
-        width: '5%',
-        align: 'center',
-        render: (_, __, index) => index + 1,
-    },
-    {
-        title: 'Nama Shift',
         dataIndex: 'shift_name',
         key: 'shift_name',
-        width: '20%',
+        width: '30%',
+        render: (text, record, index) => `${index + 1}. ${text}`,
     },
     {
-        title: 'Jam Mulai',
+        title: 'Start Time',
         dataIndex: 'start_time',
         key: 'start_time',
         width: '15%',
-        render: (time) => extractTime(time),
+        align: 'center',
     },
     {
-        title: 'Jam Selesai',
+        title: 'End Time',
         dataIndex: 'end_time',
         key: 'end_time',
         width: '15%',
-        render: (time) => extractTime(time),
+        align: 'center',
     },
     {
         title: 'Status',
         dataIndex: 'is_active',
         key: 'is_active',
-        width: '10%',
+        width: '15%',
         align: 'center',
         render: (_, { is_active }) => {
             const color = is_active ? 'green' : 'red';
@@ -81,36 +65,12 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         title: 'Aksi',
         key: 'aksi',
         align: 'center',
-        width: '20%',
+        width: '25%',
         render: (_, record) => (
             <Space>
-                <Button
+                <Button type="text" icon={<EyeOutlined />} onClick={() => showPreviewModal(record)} style={{ color: '#1890ff' }} />
-                    type="text"
+                <Button type="text" icon={<EditOutlined />} onClick={() => showEditModal(record)} style={{ color: '#faad14' }} />
-                    icon={<EyeOutlined />}
+                <Button danger type="text" icon={<DeleteOutlined />} onClick={() => showDeleteDialog(record)} />
-                    onClick={() => showPreviewModal(record)}
-                    style={{
-                        color: '#1890ff',
-                        borderColor: '#1890ff',
-                    }}
-                />
-                <Button
-                    type="text"
-                    icon={<EditOutlined />}
-                    onClick={() => showEditModal(record)}
-                    style={{
-                        color: '#faad14',
-                        borderColor: '#faad14',
-                    }}
-                />
-                <Button
-                    danger
-                    type="text"
-                    icon={<DeleteOutlined />}
-                    onClick={() => showDeleteDialog(record)}
-                    style={{
-                        borderColor: '#ff4d4f',
-                    }}
-                />
             </Space>
         ),
     },
@@ -118,35 +78,21 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
 
 const ListShift = memo(function ListShift(props) {
     const [trigerFilter, setTrigerFilter] = useState(false);
-
+    const [formDataFilter, setFormDataFilter] = useState({ criteria: '' });
-    const defaultFilter = {
-        criteria: '',
-    };
-    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
-
     const navigate = useNavigate();
 
     useEffect(() => {
-        const token = localStorage.getItem('token');
+        if (props.actionMode === 'list') {
-        if (token) {
-            if (props.actionMode == 'list') {
             doFilter();
         }
-        } else {
-            navigate('/signin');
-        }
     }, [props.actionMode]);
 
-    const doFilter = () => {
+    const doFilter = () => setTrigerFilter((prev) => !prev);
-        setTrigerFilter((prev) => !prev);
-    };
-
     const handleSearch = () => {
         setFormDataFilter((prev) => ({ ...prev, criteria: searchValue }));
         doFilter();
     };
-
     const handleSearchClear = () => {
         setSearchValue('');
         setFormDataFilter((prev) => ({ ...prev, criteria: '' }));
@@ -170,63 +116,34 @@ const ListShift = memo(function ListShift(props) {
 
     const showDeleteDialog = (param) => {
         NotifConfirmDialog({
-            icon: 'question',
+            title: 'Konfirmasi Hapus',
-            title: 'Konfirmasi',
+            message: `Apakah Anda yakin ingin menghapus shift "${param.shift_name}"?`,
-            message: `Apakah anda yakin hapus data "${param.shift_name}" ?`,
             onConfirm: () => handleDelete(param),
-            onCancel: () => props.setSelectedData(null),
         });
     };
 
     const handleDelete = async (param) => {
         try {
             const response = await deleteShift(param.shift_id);
-            console.log('deleteShift response:', response);
-
             if (response.statusCode === 200) {
-                NotifAlert({
+                NotifAlert({ icon: 'success', title: 'Berhasil', message: 'Data shift berhasil dihapus.' });
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: `Data Shift "${param.shift_name}" berhasil dihapus.`,
-                });
-                // Refresh table
                 doFilter();
             } else {
-                NotifAlert({
+                NotifAlert({ icon: 'error', title: 'Gagal', message: response.message || 'Gagal menghapus data.' });
-                    icon: 'error',
-                    title: 'Gagal',
-                    message: response.message || 'Gagal menghapus data Shift.',
-                });
             }
         } catch (error) {
-            console.error('Delete Shift Error:', error);
+            NotifAlert({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan server.' });
-            NotifAlert({
-                icon: 'error',
-                title: 'Error',
-                message: error.message || 'Terjadi kesalahan saat menghapus data.',
-            });
         }
     };
 
-    // Function untuk dipanggil dari DetailShift setelah create/update
-    const refreshData = () => {
-        doFilter();
-    };
-
-    // Pass refresh function to props
-    if (props.setRefreshData) {
-        props.setRefreshData(refreshData);
-    }
-
     return (
-        <React.Fragment>
         <Card>
-                <Row>
+            <Row justify="space-between" align="middle" gutter={[8, 8]}>
                 <Col xs={24}>
                     <Row justify="space-between" align="middle" gutter={[8, 8]}>
                         <Col xs={24} sm={24} md={12} lg={12}>
                             <Input.Search
-                                    placeholder="Search shift by name..."
+                                placeholder="Cari berdasarkan nama shift..."
                                 value={searchValue}
                                 onChange={(e) => {
                                     const value = e.target.value;
@@ -243,10 +160,7 @@ const ListShift = memo(function ListShift(props) {
                                     <Button
                                         type="primary"
                                         icon={<SearchOutlined />}
-                                            style={{
+                                        style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
-                                                backgroundColor: '#23A55A',
-                                                borderColor: '#23A55A',
-                                            }}
                                     >
                                         Search
                                     </Button>
@@ -270,11 +184,7 @@ const ListShift = memo(function ListShift(props) {
                                         },
                                     }}
                                 >
-                                        <Button
+                                    <Button icon={<PlusOutlined />} onClick={() => showAddModal()} size="large">
-                                            icon={<PlusOutlined />}
-                                            onClick={() => showAddModal()}
-                                            size="large"
-                                        >
                                         Tambah Data
                                     </Button>
                                 </ConfigProvider>
@@ -286,10 +196,7 @@ const ListShift = memo(function ListShift(props) {
                     <TableList
                         mobile
                         cardColor={'#42AAFF'}
-                            header={'shift_name'}
+                        header={'shift_name'} // Menggunakan shift_name langsung untuk judul kartu
-                            showPreviewModal={showPreviewModal}
-                            showEditModal={showEditModal}
-                            showDeleteDialog={showDeleteDialog}
                         getData={getAllShift}
                         queryParams={formDataFilter}
                         columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
@@ -298,7 +205,6 @@ const ListShift = memo(function ListShift(props) {
                 </Col>
             </Row>
         </Card>
-        </React.Fragment>
     );
 });
 

src/pages/master/status/component/DetailStatus.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Switch } from 'antd';
+import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Switch, Row, Col } from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { validateRun } from '../../../../Utils/validate';
 import { createStatus, updateStatus } from '../../../../api/master-status';
@@ -46,7 +46,6 @@ const DetailStatus = (props) => {
             { field: 'status_number', label: 'Status Number', required: true },
             { field: 'status_name', label: 'Status Name', required: true },
             { field: 'status_color', label: 'Status Color', required: true },
-            { field: 'status_description', label: 'Description', required: true },
         ];
 
         if (
@@ -145,6 +144,8 @@ const DetailStatus = (props) => {
                     <Text style={{ marginLeft: 8 }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
                 </div>
             </div>
+            <Row gutter={16}>
+                <Col span={12}>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Status Number</Text>
                         <Text style={{ color: 'red' }}> *</Text>
@@ -157,6 +158,8 @@ const DetailStatus = (props) => {
                             onChange={handleInputNumberChange}
                         />
                     </div>
+                </Col>
+                <Col span={12}>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Status Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
@@ -168,6 +171,8 @@ const DetailStatus = (props) => {
                             onChange={handleInputChange}
                         />
                     </div>
+                </Col>
+            </Row>
             <div style={{ marginBottom: 12 }}>
                 <Text strong>Status Color</Text>
                 <Text style={{ color: 'red' }}> *</Text>
@@ -181,7 +186,6 @@ const DetailStatus = (props) => {
             </div>
             <div style={{ marginBottom: 12 }}>
                 <Text strong>Description</Text>
-                <Text style={{ color: 'red' }}> *</Text>
                 <TextArea
                     name="status_description"
                     value={formData.status_description}

src/pages/role/component/DetailRole.jsx

@@ -1,98 +1,72 @@
-import React, { memo } from 'react';
+import React from 'react';
-import { Modal, Form, Input, Select, Row, Col } from 'antd';
+import { Modal, Form, Input, InputNumber, Switch, Row, Col, Typography, Divider } from 'antd';
 
-const { TextArea } = Input;
+const { Text } = Typography;
-const { Option } = Select;
 
-const DetailRole = memo(function DetailRole({
+const DetailRole = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
-    visible,
+    const modalTitle = editingKey ? (readOnly ? 'Preview Role' : 'Edit Role') : 'Tambah Role';
-    onCancel,
-    onOk,
-    form,
-    editingKey,
-    readOnly,
-}) {
-    const getModalTitle = () => {
-        if (readOnly) return 'Detail Role';
-        if (editingKey) return 'Edit Role';
-        return 'Tambah Role';
-    };
 
     return (
         <Modal
-            title={getModalTitle()}
+            title={<Text style={{ fontSize: '18px' }}>{modalTitle}</Text>}
             open={visible}
             onCancel={onCancel}
             onOk={onOk}
-            okText={readOnly ? 'Tutup' : editingKey ? 'Simpan' : 'Tambah'}
+            okText="Simpan"
             cancelText="Batal"
-            width={600}
+            okButtonProps={{ disabled: readOnly }}
-            cancelButtonProps={{ style: readOnly ? { display: 'none' } : {} }}
+            destroyOnClose
+            
         >
-            <Form form={form} layout="vertical" name="roleForm" disabled={readOnly}>
+            <Divider />
+            <Form form={form} layout="vertical" name="role_form">
+                <Form.Item
+                    name="is_active"
+                    label={<Text strong>Status</Text>}
+                    valuePropName="checked"
+                    initialValue={true}
+                >
+                    <Switch disabled={readOnly} />
+                </Form.Item>
+
                 <Row gutter={16}>
-                    <Col span={24}>
+                    <Col span={12}>
                         <Form.Item
                             name="role_name"
-                            label="Nama Role"
+                            label={<Text strong>Nama Role</Text>}
-                            rules={[
+                            rules={[{ required: true, message: 'Nama Role wajib diisi!' }]}
-                                {
-                                    required: true,
-                                    message: 'Nama role tidak boleh kosong!',
-                                },
-                            ]}
                         >
-                            <Input placeholder="Masukkan nama role" />
+                            <Input placeholder="Masukan nama role" readOnly={readOnly} />
                         </Form.Item>
                     </Col>
-                </Row>
+                    <Col span={12}>
-
-                <Row gutter={16}>
-                    <Col span={24}>
                         <Form.Item
                             name="role_level"
-                            label="Level"
+                            label={<Text strong>Level</Text>}
-                            rules={[
+                            rules={[{ required: true, message: 'Level wajib diisi!' }]}
-                                {
-                                    required: true,
-                                    message: 'Level tidak boleh kosong!',
-                                },
-                            ]}
                         >
-                            <Select placeholder="Pilih level">
+                            <InputNumber
-                                <Option value={1}>Level 1</Option>
+                                placeholder="Masukan level role"
-                                <Option value={2}>Level 2</Option>
+                                readOnly={readOnly}
-                                <Option value={3}>Level 3</Option>
+                                style={{ width: '100%' }}
-                                <Option value={4}>Level 4</Option>
-                            </Select>
-                        </Form.Item>
-                    </Col>
-                </Row>
-
-                <Row gutter={16}>
-                    <Col span={24}>
-                        <Form.Item
-                            name="role_description"
-                            label="Deskripsi"
-                            rules={[
-                                {
-                                    required: true,
-                                    message: 'Deskripsi tidak boleh kosong!',
-                                },
-                            ]}
-                        >
-                            <TextArea
-                                rows={4}
-                                placeholder="Masukkan deskripsi role"
-                                maxLength={200}
-                                showCount
                             />
                         </Form.Item>
                     </Col>
                 </Row>
+
+                <Form.Item
+                    name="role_description"
+                    label={<Text strong>Deskripsi Role</Text>}
+                >
+                    <Input.TextArea
+                        rows={4}
+                        placeholder="Masukan deskripsi (opsional)"
+                        readOnly={readOnly}
+                    />
+                </Form.Item>
             </Form>
         </Modal>
     );
-});
+};
 
 export default DetailRole;