src/components/Global/CardList.jsx

@@ -12,11 +12,12 @@ const CardList = ({
     showEditModal,
     showDeleteDialog,
     cardColor,
+    fieldColor,
 }) => {
-    const getCardStyle = () => {
+    const getCardStyle = (color) => {
-        const color = cardColor ?? '#F3EDEA'; // Orange color
+        const colorStyle = color ?? '#F3EDEA'; // Orange color
         return {
-            border: `2px solid ${color}`,
+            border: `2px solid ${colorStyle}`,
             borderRadius: '8px',
             textAlign: 'center', // Center text
         };
@@ -47,48 +48,49 @@ const CardList = ({
                                     alignItems: 'center',
                                 }}
                             >
-                                <span style={getTitleStyle(item.color ?? cardColor)}>
+                                <span
+                                    style={getTitleStyle(fieldColor ? item[fieldColor] : cardColor)}
+                                >
                                     {item[header]}
                                 </span>
                             </div>
                         }
-                        style={getCardStyle()}
+                        style={getCardStyle(fieldColor ? item[fieldColor] : cardColor)}
                         actions={[
-                            <Space
+                            <EyeOutlined
-                                size="middle"
-                                style={{ display: 'flex', justifyContent: 'center' }}
-                            >
-                                <Button
-                                    type="text"
                                 style={{ color: '#1890ff' }}
-                                    icon={<EyeOutlined />}
+                                key="preview"
                                 onClick={() => showPreviewModal(item)}
-                                />
+                            />,
-                                <Button
+                            <EditOutlined
-                                    type="text"
                                 style={{ color: '#faad14' }}
-                                    icon={<EditOutlined />}
+                                key="edit"
                                 onClick={() => showEditModal(item)}
-                                />
+                            />,
-                                <Button
+                            <DeleteOutlined
-                                    type="text"
+                                style={{ color: '#ff1818' }}
-                                    danger
+                                key="delete"
-                                    icon={<DeleteOutlined />}
                                 onClick={() => showDeleteDialog(item)}
-                                />
+                            />,
-                            </Space>,
                         ]}
                     >
                         <div style={{ textAlign: 'left' }}>
                             {column.map((itemCard, index) => (
                                 <React.Fragment key={index}>
-                                    {!itemCard.hidden && itemCard.title !== 'No' && itemCard.title !== 'Aksi' && (
+                                    {!itemCard.hidden &&
+                                        itemCard.title !== 'No' &&
+                                        itemCard.title !== 'Aksi' && (
                                             <p style={{ margin: '8px 0' }}>
                                                 <Text strong>{itemCard.title}:</Text>{' '}
                                                 {itemCard.render
-                                                ? itemCard.render(item[itemCard.dataIndex], item, index)
+                                                    ? itemCard.render(
-                                                : item[itemCard.dataIndex] || item[itemCard.key] || '-'
+                                                          item[itemCard.dataIndex],
-                                            }
+                                                          item,
+                                                          index
+                                                      )
+                                                    : item[itemCard.dataIndex] ||
+                                                      item[itemCard.key] ||
+                                                      '-'}
                                             </p>
                                         )}
                                 </React.Fragment>

src/components/Global/TableList.jsx

@@ -17,6 +17,7 @@ const TableList = memo(function TableList({
     showEditModal,
     showDeleteDialog,
     cardColor,
+    fieldColor,
 }) {
     const [gridLoading, setGridLoading] = useState(false);
 
@@ -29,7 +30,7 @@ const TableList = memo(function TableList({
         total_page: 1,
     });
 
-    const [viewMode, setViewMode] = useState('card');
+    const [viewMode, setViewMode] = useState('list');
 
     const { useBreakpoint } = Grid;
 
@@ -98,6 +99,7 @@ const TableList = memo(function TableList({
             {(isMobile && mobile) || viewMode === 'card' ? (
                 <CardList
                     cardColor={cardColor}
+                    fieldColor={fieldColor}
                     data={data}
                     column={columns}
                     header={header}

src/layout/LayoutSidebar.jsx

@@ -7,7 +7,7 @@ const { Sider } = Layout;
 const LayoutSidebar = () => {
     return (
         <Sider
-            width={300}
+            width={255}
             breakpoint="lg"
             collapsedWidth="0"
             onBreakpoint={(broken) => {

src/layout/MainLayout.jsx

@@ -20,7 +20,7 @@ const MainLayout = ({ children }) => {
             <LayoutSidebar />
             <Layout
                 style={{
-                    marginLeft: isDesktop ? '300px' : '0',
+                    marginLeft: isDesktop ? '250px' : '0',
                     overflow: 'auto',
                 }}
             >

src/pages/master/brandDevice/AddBrandDevice.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Input, Divider, Typography, Switch, Button, Steps, Form, message, Table, Row, Col, Radio, Card, Tag, Upload, ConfigProvider } from 'antd';
+import { Input, Divider, Typography, Switch, Button, Steps, Form, message, Table, Row, Col, Modal, Card, Tag, Upload, ConfigProvider, Space } from 'antd';
-import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { PlusOutlined, UploadOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
 import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
 
@@ -26,8 +26,13 @@ const AddBrandDevice = () => {
     const [errorCodeForm] = Form.useForm();
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [currentStep, setCurrentStep] = useState(0);
-    const [anotherSolutionType, setAnotherSolutionType] = useState(null);
     const [fileList, setFileList] = useState([]);
+    const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false); // State untuk mengontrol form read-only
+    const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null); // State untuk melacak item yang sedang diedit
+    // State untuk preview file
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewImage, setPreviewImage] = useState('');
+    const [previewTitle, setPreviewTitle] = useState('');
 
     // Watch for form values changes to update the switch color
     const statusValue = Form.useWatch('status', errorCodeForm);
@@ -35,11 +40,10 @@ const AddBrandDevice = () => {
     const defaultData = {
         brandName: '',
         brandType: '',
-        manufacturer: '',
         model: '',
+        manufacturer: '',
         status: true,
         brand_code: '',
-        country: '',
         description: '',
     };
 
@@ -100,24 +104,45 @@ const AddBrandDevice = () => {
         }
     };
 
+    const handlePreviewErrorCode = (record) => {
+        errorCodeForm.setFieldsValue(record); // Isi form dengan data record
+        setFileList(record.fileList || []); // Muat file jika ada
+        setIsErrorCodeFormReadOnly(true); // Jadikan form read-only
+        setEditingErrorCodeKey(null); // Bukan dalam mode edit
+    };
+
+    const handleEditErrorCode = (record) => {
+        errorCodeForm.setFieldsValue(record); // Isi form dengan data record
+        setFileList(record.fileList || []); // Muat file jika ada
+        setIsErrorCodeFormReadOnly(false); // Aktifkan form untuk diedit
+        setEditingErrorCodeKey(record.key); // Tandai item ini sebagai yang sedang diedit
+    };
+
     const handleAddErrorCode = async () => {
         try {
             const values = await errorCodeForm.validateFields();
             const newErrorCode = {
                 ...values,
                 status: values.status === undefined ? true : values.status,
-                image: fileList.length > 0 ? fileList[0] : null,
+                fileList: fileList,
-                key: `temp-${Date.now()}`
+                key: editingErrorCodeKey || `temp-${Date.now()}` // Gunakan key yang ada jika edit, jika tidak buat baru
             };
+
+            if (editingErrorCodeKey) {
+                setErrorCodes(errorCodes.map(item => item.key === editingErrorCodeKey ? newErrorCode : item));
+                message.success('Error code berhasil diupdate');
+            } else {
                 setErrorCodes([...errorCodes, newErrorCode]);
                 message.success('Error code berhasil ditambahkan');
+            }
             errorCodeForm.resetFields();
-            setAnotherSolutionType(null);
             setFileList([]);
         } catch (error) {
             console.log('Validate Failed:', error);
             NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk error code!' });
         }
+        setIsErrorCodeFormReadOnly(false); // Reset status read-only
+        setEditingErrorCodeKey(null); // Reset key item yang diedit
     };
 
     const handleDeleteErrorCode = (key) => {
@@ -125,15 +150,50 @@ const AddBrandDevice = () => {
         message.success('Error code berhasil dihapus');
     };
 
+    // Fungsi untuk mengubah file menjadi base64 untuk preview gambar
+    const getBase64 = (file) =>
+        new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = (error) => reject(error);
+        });
+
+    // Fungsi untuk menangani preview file dari komponen Upload
+    const handleUploadPreview = async (file) => {
+        // Jika file bukan gambar, buka di tab baru
+        if (!file.type.startsWith('image/')) {
+            const url = URL.createObjectURL(file.originFileObj || file);
+            window.open(url, '_blank');
+            return;
+        }
+        // Jika file adalah gambar, tampilkan di modal
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj || file);
+        }
+        setPreviewImage(file.url || file.preview);
+        setPreviewOpen(true);
+        setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
+    };
+
     const uploadProps = {
+        multiple: true,
+        accept: '.pdf,.jpg,.jpeg,.png,.gif',
         onRemove: (file) => {
-            setFileList([]);
+            const newFileList = fileList.filter(item => item.uid !== file.uid);
+            setFileList(newFileList);
         },
         beforeUpload: (file) => {
-            setFileList([file]);
+            const isAllowedType = ['application/pdf', 'image/jpeg', 'image/png', 'image/gif'].includes(file.type);
+            if (!isAllowedType) {
+                message.error(`${file.name} bukan file PDF atau gambar yang diizinkan.`);
+                return Upload.LIST_IGNORE;
+            }
+            setFileList(prevList => [...prevList, file]);
             return false; // Prevent auto-upload
         },
         fileList,
+        onPreview: handleUploadPreview, // Tambahkan handler onPreview
     };
 
     const errorCodeColumns = [
@@ -153,7 +213,11 @@ const AddBrandDevice = () => {
             title: 'Action',
             key: 'action',
             render: (_, record) => (
-                <Button type="link" danger onClick={() => handleDeleteErrorCode(record.key)}>Delete</Button>
+                <Space>
+                    <Button type="text" icon={<EyeOutlined />} onClick={() => handlePreviewErrorCode(record)} style={{ color: '#1890ff', borderColor: '#1890ff' }} />
+                    <Button type="text" icon={<EditOutlined />} onClick={() => handleEditErrorCode(record)} style={{ color: '#faad14', borderColor: '#faad14' }} />
+                    <Button danger type="text" icon={<DeleteOutlined />} onClick={() => handleDeleteErrorCode(record.key)} style={{ borderColor: '#ff4d4f' }} />
+                </Space>
             ),
         },
     ];
@@ -174,30 +238,44 @@ const AddBrandDevice = () => {
         if (currentStep === 0) {
             return (
                 <Form layout="vertical" form={brandForm} onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))} initialValues={formData}>
-                    <Form.Item label="Status" name="status" valuePropName="checked">
+                    <Form.Item label="Status">
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <Form.Item name="status" valuePropName="checked" noStyle>
                                 <Switch
                                     checked={formData.status}
                                     style={{ backgroundColor: formData.status ? '#23A55A' : '#bfbfbf' }}
                                 />
                             </Form.Item>
+                            <Text style={{ marginLeft: 8 }}>{formData.status ? 'Active' : 'Inactive'}</Text>
+                        </div>
+                    </Form.Item>
                     <Form.Item label="Brand Code" name="brand_code">
                         <Input placeholder={'Brand Code Auto Fill'} disabled style={{ backgroundColor: '#f5f5f5', cursor: 'not-allowed' }} />
                     </Form.Item>
+                    <Row gutter={16}>
+                        <Col span={12}>
                             <Form.Item label="Brand Name" name="brandName" rules={[{ required: true, message: 'Brand Name wajib diisi!' }]}>
                                 <Input />
                             </Form.Item>
-                    <Form.Item label="Brand Type" name="brandType" rules={[{ required: true, message: 'Type wajib diisi!' }]}>
+                        </Col>
-                        <Input />
+                        <Col span={12}>
-                    </Form.Item>
-                    <Form.Item label="Model" name="model" rules={[{ required: true, message: 'Model wajib diisi!' }]}>
-                        <Input />
-                    </Form.Item>
                             <Form.Item label="Manufacturer" name="manufacturer" rules={[{ required: true, message: 'Manufacturer wajib diisi!' }]}>
-                        <Input />
+                                <Input placeholder="Enter Manufacturer" />
                             </Form.Item>
-                    <Form.Item label="Country" name="country" rules={[{ required: true, message: 'Country wajib diisi!' }]}>
+                        </Col>
-                        <Input />
+                    </Row>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item label="Brand Type" name="brandType">
+                                <Input placeholder="Enter Brand Type (Optional)" />
                             </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label="Model" name="model">
+                                <Input placeholder="Enter Model (Optional)" />
+                            </Form.Item>
+                        </Col>
+                    </Row>
                     <Form.Item label="Description" name="description">
                         <Input.TextArea rows={4} placeholder="Enter Description (Optional)" />
                     </Form.Item>
@@ -206,71 +284,67 @@ const AddBrandDevice = () => {
         }
         if (currentStep === 1) {
             return (
-                <div>
+                <Row gutter={24}>
-                    <Title level={5}>Tambah Error Code {errorCodes.length + 1}</Title>
+                    <Col span={12}>
+                        <Title level={5} style={{ marginBottom: 16 }}>Tambah Error Code</Title>
                         <Form form={errorCodeForm} layout="vertical" initialValues={{ status: true }}>
-                        <Form.Item label="Status" name="status" valuePropName="checked">
+                            <Form.Item label="Status">
+                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                    <Form.Item name="status" valuePropName="checked" noStyle>
                                         <Switch
                                             style={{ backgroundColor: statusValue ? '#23A55A' : '#bfbfbf' }}
+                                            disabled={isErrorCodeFormReadOnly}
                                         />
                                     </Form.Item>
+                                    <Text style={{ marginLeft: 8 }}>{statusValue ? 'Active' : 'Inactive'}</Text>
+                                </div>
+                            </Form.Item>
                             <Form.Item name="error_code" label="Error Code" rules={[{ required: true, message: 'Error Code wajib diisi' }]}>
-                            <Input />
+                                <Input disabled={isErrorCodeFormReadOnly} />
                             </Form.Item>
                             <Form.Item name="description" label="Trouble Description" rules={[{ required: true, message: 'Trouble Description wajib diisi' }]}>
-                            <Input.TextArea />
+                                <Input.TextArea disabled={isErrorCodeFormReadOnly} />
                             </Form.Item>
-                        <Form.Item name="detected_method" label="Detected Method" rules={[{ required: true, message: 'Detected Method wajib diisi' }]}>
+                            <Form.Item name="what_action_to_take" label="What Action to Take">
-                            <Input />
+                                <Input.TextArea placeholder="Enter action to take (Optional)" disabled={isErrorCodeFormReadOnly} />
                             </Form.Item>
-                        <Row gutter={16}>
+                            <Form.Item label="Upload File (Opsional)">
-                            <Col span={8}>
+                                <Upload {...uploadProps} disabled={isErrorCodeFormReadOnly}>
-                                <Form.Item name="indicator_light" label="Indicator Light">
+                                    <Button icon={<UploadOutlined />} disabled={isErrorCodeFormReadOnly}>
-                                    <Input />
+                                        Click to Upload (File or Image)
-                                </Form.Item>
+                                    </Button>
-                            </Col>
-                            <Col span={8}>
-                                <Form.Item name="detector" label="Detector">
-                                    <Input />
-                                </Form.Item>
-                            </Col>
-                            <Col span={8}>
-                                <Form.Item name="auto_shutdown" label="Auto Shutdown">
-                                    <Input />
-                                </Form.Item>
-                            </Col>
-                        </Row>
-                        <Form.Item name="what_action_to_take" label="What Action to Take" rules={[{ required: true, message: 'What Action to Take wajib diisi' }]}>
-                            <Input.TextArea />
-                        </Form.Item>
-                        <Form.Item name="another_solution" label="Another Solution (opsional)">
-                            <Radio.Group onChange={(e) => setAnotherSolutionType(e.target.value)}>
-                                <Radio value="image">Image</Radio>
-                                <Radio value="other">Other</Radio>
-                            </Radio.Group>
-                        </Form.Item>
-                        {anotherSolutionType === 'image' && (
-                            <Form.Item label="Upload Image">
-                                <Upload {...uploadProps}>
-                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                 </Upload>
                             </Form.Item>
-                        )}
+                            <Form.Item style={{ textAlign: 'right', marginTop: 24 }}>
-                        {anotherSolutionType === 'other' && (
+                                <ConfigProvider
-                            <Form.Item name="another_solution_text" label="Enter Solution Text">
+                                    theme={{
-                                <Input.TextArea rows={4} />
+                                        components: {
-                            </Form.Item>
+                                            Button: {
-                        )}
+                                                defaultBg: '#23a55a',
-                        <Form.Item>
+                                                defaultColor: '#FFFFFF',
-                            <Button type="dashed" icon={<PlusOutlined />} onClick={handleAddErrorCode} style={{ width: '100%' }}>
+                                                defaultBorderColor: '#23a55a',
-                                Tambah Error Code Lain
+                                                defaultHoverBg: '#209652',
+                                                defaultHoverColor: '#FFFFFF',
+                                                defaultHoverBorderColor: '#23a55a',
+                                            },
+                                        },
+                                    }}
+                                >
+                                    <Button
+                                        icon={<PlusOutlined />}
+                                        onClick={handleAddErrorCode}
+                                    >
+                                        {editingErrorCodeKey ? 'Update Error Code' : 'Tambah Error Code'}
                                     </Button>
+                                </ConfigProvider>
                             </Form.Item>
                         </Form>
-                    <Divider />
+                    </Col>
-                    <Title level={5}>Daftar Error Code</Title>
+                    <Col span={12}>
+                        <Title level={5}>Daftar Error Code ({errorCodes.length})</Title> 
                         <Table columns={errorCodeColumns} dataSource={errorCodes} rowKey="key" pagination={false} />
-                </div>
+                    </Col>
+                </Row>
             );
         }
         return null;
@@ -330,6 +404,15 @@ const AddBrandDevice = () => {
                     )}
                 </ConfigProvider>
             </div>
+            {/* Modal untuk preview gambar */}
+            <Modal
+                open={previewOpen}
+                title={previewTitle}
+                footer={null}
+                onCancel={() => setPreviewOpen(false)}
+            >
+                <img alt="example" style={{ width: '100%' }} src={previewImage} />
+            </Modal>
         </Card>
     );
 };

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 ghost icon={<EyeOutlined />} onClick={() => showPreviewModal(record)} style={{ color: '#1890ff', borderColor: '#1890ff' }} />
-                    type="text"
+                <Button ghost icon={<EditOutlined />} onClick={() => showEditModal(record)} style={{ color: '#faad14', borderColor: '#faad14' }} />
-                    icon={<EyeOutlined />}
+                <Button danger ghost 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/IndexStatus.jsx

@@ -13,46 +13,74 @@ const IndexStatus = memo(function IndexStatus() {
 
     const [actionMode, setActionMode] = useState('list');
     const [selectedData, setSelectedData] = useState(null);
-    const [isModalVisible, setIsModalVisible] = useState(false);
     const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowModal] = useState(false);
+
+    const setMode = (param) => {
+        setShowModal(true);
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                break;
+
+            case 'edit':
+                setReadOnly(false);
+                break;
+
+            case 'preview':
+                setReadOnly(true);
+                break;
+
+            default:
+                setShowModal(false);
+                break;
+        }
+        setActionMode(param);
+    };
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
             setBreadcrumbItems([
-                { title: <Text strong>• Master</Text> },
+                {
-                { title: <Text strong>Status</Text> }
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • Master
+                        </Text>
+                    ),
+                },
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            Status
+                        </Text>
+                    ),
+                },
             ]);
         } else {
             navigate('/signin');
         }
-    }, [navigate, setBreadcrumbItems]);
+    }, []);
-
-    useEffect(() => {
-        if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
-            setIsModalVisible(true);
-            setReadOnly(actionMode === 'preview');
-        } else {
-            setIsModalVisible(false);
-        }
-    }, [actionMode]);
 
     return (
         <React.Fragment>
-            {actionMode === 'list' &&
+            {actionMode === 'list' && (
                 <ListStatus
-                    setActionMode={setActionMode}
-                    setSelectedData={setSelectedData}
                     actionMode={actionMode}
-                />
+                    setActionMode={setMode}
-            }
-            <DetailStatus
-                showModal={isModalVisible}
-                setActionMode={setActionMode}
                     selectedData={selectedData}
                     setSelectedData={setSelectedData}
                     readOnly={readOnly}
                 />
+            )}
+            <DetailStatus
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+            />
         </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/master/status/component/ListStatus.jsx

@@ -1,68 +1,89 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Space, ConfigProvider, Button, Row, Col, Card, Input, Segmented, Table, Pagination } from 'antd';
+import { Space, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
     DeleteOutlined,
     EyeOutlined,
     SearchOutlined,
-    AppstoreOutlined,
-    TableOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
 import { deleteStatus, getAllStatuss } from '../../../../api/master-status';
+import TableList from '../../../../components/Global/TableList';
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    { title: 'Number', dataIndex: 'status_number', key: 'status_number', width: '15%' },
+    { title: 'Name', dataIndex: 'status_name', key: 'status_name', width: '25%' },
+    {
+        title: 'Description',
+        dataIndex: 'status_description',
+        key: 'status_description',
+        width: '40%',
+    },
+    {
+        title: 'Aksi',
+        key: 'aksi',
+        align: 'center',
+        width: '20%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    type="text"
+                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                    onClick={() => showPreviewModal(record)}
+                />
+                <Button
+                    type="text"
+                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
+                    onClick={() => showEditModal(record)}
+                />
+                <Button
+                    type="text"
+                    danger
+                    style={{ borderColor: 'red' }}
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                />
+            </Space>
+        ),
+    },
+];
 
 const ListStatus = memo(function ListStatus(props) {
-    const [data, setData] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [viewMode, setViewMode] = useState('card');
     const [trigerFilter, setTrigerFilter] = useState(false);
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
-    const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
     const navigate = useNavigate();
 
-    const fetchData = async (page = 1, pageSize = 10) => {
-        setLoading(true);
-        try {
-            const params = new URLSearchParams();
-            params.append('page', page);
-            params.append('limit', pageSize);
-            if (searchValue) {
-                params.append('search', searchValue);
-            }
-            const response = await getAllStatuss(params);
-            setData(response.data || []);
-            setPagination(prev => ({ ...prev, total: response.paging?.total || 0, current: page, pageSize: pageSize }));
-        } catch (error) {
-            console.error("Failed to fetch status data:", error);
-            setData([]);
-        } finally {
-            setLoading(false);
-        }
-    };
-
     useEffect(() => {
         const token = localStorage.getItem('token');
-        if (!token) {
+        if (token) {
-            navigate('/signin');
+            if (props.actionMode === 'list') {
-            return;
+                setFormDataFilter(defaultFilter);
+                doFilter();
             }
-        fetchData(pagination.current, pagination.pageSize);
+        } else {
-    }, [props.actionMode, trigerFilter, navigate]);
+            navigate('/signin');
+        }
+    }, [props.actionMode]);
 
     const doFilter = () => {
-        setTrigerFilter(prev => !prev);
+        setTrigerFilter((prev) => !prev);
     };
 
-    const handleSearch = (value) => {
+    const handleSearch = () => {
-        setSearchValue(value);
+        setFormDataFilter({ criteria: searchValue });
-        setPagination(prev => ({ ...prev, current: 1 })); // Reset to first page on search
+        setTrigerFilter((prev) => !prev);
-        doFilter();
     };
 
-    const handlePaginationChange = (page, pageSize) => {
+    const handleSearchClear = () => {
-        fetchData(page, pageSize);
+        setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        setTrigerFilter((prev) => !prev);
     };
 
     const showPreviewModal = (record) => {
@@ -93,40 +114,24 @@ const ListStatus = memo(function ListStatus(props) {
         try {
             const response = await deleteStatus(status_id);
             if (response.statusCode === 200) {
-                NotifAlert({ icon: 'success', title: 'Berhasil', message: 'Data Status berhasil dihapus.' });
+                NotifAlert({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: 'Data Status berhasil dihapus.',
+                });
                 doFilter();
             } else {
-                NotifAlert({ icon: 'error', title: 'Gagal', message: response?.message || 'Gagal Menghapus Data' });
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Gagal Menghapus Data',
+                });
             }
         } catch (error) {
             NotifAlert({ icon: 'error', title: 'Error', message: error.message });
         }
     };
 
-    const columns = [
-        { title: 'Number', dataIndex: 'status_number', key: 'status_number', width: '15%' },
-        { title: 'Name', dataIndex: 'status_name', key: 'status_name', width: '25%' },
-        { title: 'Description', dataIndex: 'status_description', key: 'status_description', width: '40%' },
-        {
-            title: 'Aksi', key: 'aksi', align: 'center', width: '20%',
-            render: (_, record) => (
-                <Space>
-                    <Button type="text" icon={<EyeOutlined />} onClick={() => showPreviewModal(record)} />
-                    <Button type="text" icon={<EditOutlined />} onClick={() => showEditModal(record)} />
-                    <Button danger type="text" icon={<DeleteOutlined />} onClick={() => showDeleteDialog(record)} />
-                </Space>
-            ),
-        },
-    ];
-
-    const getCardStyle = (color) => {
-        return { border: `2px solid ${color || '#d9d9d9'}`, height: '100%' };
-    };
-
-    const getTitleStyle = (color) => {
-        return { backgroundColor: color || 'transparent', color: '#fff', padding: '2px 8px', borderRadius: '4px', display: 'inline-block' };
-    };
-
     return (
         <Card>
             <Row justify="space-between" align="middle" gutter={[16, 16]}>
@@ -134,7 +139,16 @@ const ListStatus = memo(function ListStatus(props) {
                     <Input.Search
                         placeholder="Search by status name..."
                         onSearch={handleSearch}
-                        allowClear
+                        onChange={(e) => {
+                            const value = e.target.value;
+                            setSearchValue(value);
+                            if (value === '') {
+                                handleSearchClear();
+                            }
+                        }}
+                        allowClear={{
+                            clearIcon: <span onClick={handleSearchClear}>✕</span>,
+                        }}
                         enterButton={
                             <Button
                                 type="primary"
@@ -167,57 +181,23 @@ const ListStatus = memo(function ListStatus(props) {
                         </Button>
                     </ConfigProvider>
                 </Col>
-            </Row>
 
-            <Row style={{ marginTop: 16 }}>
+                <Col xs={24} style={{ marginTop: '16px' }}>
-                <Col>
+                    <TableList
-                    <Segmented
+                        mobile
-                        options={[{ value: 'card', icon: <AppstoreOutlined /> }, { value: 'table', icon: <TableOutlined /> }]}
+                        cardColor={'#42AAFF'}
-                        value={viewMode}
+                        fieldColor={'status_color'}
-                        onChange={setViewMode}
+                        header={'status_name'}
+                        showPreviewModal={showPreviewModal}
+                        showEditModal={showEditModal}
+                        showDeleteDialog={showDeleteDialog}
+                        getData={getAllStatuss}
+                        queryParams={formDataFilter}
+                        columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                        triger={trigerFilter}
                     />
                 </Col>
             </Row>
-
-            <div style={{ marginTop: 24 }}>
-                {viewMode === 'card' ? (
-                    <Row gutter={[16, 16]}>
-                        {data.map(item => (
-                            <Col xs={24} sm={12} md={8} lg={6} key={item.status_id}>
-                                <Card
-                                    title={<span style={getTitleStyle(item.status_color)}>{item.status_name}</span>}
-                                    style={getCardStyle(item.status_color)}
-                                    actions={[
-                                        <EyeOutlined key="preview" onClick={() => showPreviewModal(item)} />,
-                                        <EditOutlined key="edit" onClick={() => showEditModal(item)} />,
-                                        <DeleteOutlined key="delete" onClick={() => showDeleteDialog(item)} />,
-                                    ]}
-                                >
-                                    <p><b>Number:</b> {item.status_number}</p>
-                                    <p><b>Description:</b> {item.status_description}</p>
-                                </Card>
-                            </Col>
-                        ))}
-                    </Row>
-                ) : (
-                    <>
-                        <Table
-                            columns={columns}
-                            dataSource={data.map(item => ({ ...item, key: item.status_id }))}
-                            pagination={false}
-                            loading={loading}
-                        />
-                        <Pagination
-                            style={{ marginTop: 16, textAlign: 'right' }}
-                            current={pagination.current}
-                            pageSize={pagination.pageSize}
-                            total={pagination.total}
-                            onChange={handlePaginationChange}
-                            showSizeChanger
-                        />
-                    </>
-                )}
-            </div>
         </Card>
     );
 });

src/pages/master/unit/component/DetailUnit.jsx

@@ -13,6 +13,7 @@ const DetailUnit = (props) => {
         unit_id: '',
         unit_code: '',
         unit_name: '',
+        description: '',
         is_active: true,
     };
 
@@ -27,9 +28,7 @@ const DetailUnit = (props) => {
         setConfirmLoading(true);
 
         // Daftar aturan validasi
-        const validationRules = [
+        const validationRules = [{ field: 'unit_name', label: 'Unit Name', required: true }];
-            { field: 'unit_name', label: 'Unit Name', required: true },
-        ];
 
         if (
             validateRun(formData, validationRules, (errorMessages) => {
@@ -47,6 +46,7 @@ const DetailUnit = (props) => {
             const payload = {
                 is_active: formData.is_active,
                 unit_name: formData.unit_name,
+                description: formData.description,
             };
 
             const response =
@@ -202,6 +202,19 @@ const DetailUnit = (props) => {
                             readOnly={props.readOnly}
                         />
                     </div>
+
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Description</Text>
+                        <Input.TextArea
+                            name="description"
+                            value={formData.description}
+                            onChange={handleInputChange}
+                            placeholder="Enter Description (Optional)"
+                            readOnly={props.readOnly}
+                            rows={4}
+                            maxLength={255}
+                        />
+                    </div>
                 </div>
             )}
         </Modal>

src/pages/master/unit/component/ListUnit.jsx

@@ -32,6 +32,13 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         key: 'unit_name',
         width: '20%',
     },
+    {
+        title: 'Description',
+        dataIndex: 'description',
+        key: 'description',
+        width: '25%',
+        render: (text) => text || '-',
+    },
     {
         title: 'Status',
         dataIndex: 'is_active',

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;

src/pages/role/component/ListRole.jsx

@@ -230,6 +230,12 @@ const ListRole = memo(function ListRole(props) {
                     </Col>
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                         <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'role_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
                             getData={getAllRole}
                             queryParams={formDataFilter}
                             columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}

src/pages/user/component/ListUser.jsx

@@ -150,7 +150,11 @@ const columns = (
                         Rejected
                     </Tag>
                 );
-            } else if (record.is_approve === 2 || record.is_approve === '2' || record.is_approve === true) {
+            } else if (
+                record.is_approve === 2 ||
+                record.is_approve === '2' ||
+                record.is_approve === true
+            ) {
                 // Approved
                 return (
                     <Tag color={'green'} key={'status'}>
@@ -174,7 +178,11 @@ const columns = (
         align: 'center',
         render: (_, record) => {
             // Only show active status if user is approved
-            if (record.is_approve === 2 || record.is_approve === '2' || record.is_approve === true) {
+            if (
+                record.is_approve === 2 ||
+                record.is_approve === '2' ||
+                record.is_approve === true
+            ) {
                 if (record.is_active === true || record.is_active === 1) {
                     return (
                         <Tag color={'green'} key={'active'}>
@@ -450,6 +458,12 @@ const ListUser = memo(function ListUser(props) {
                     </Col>
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                         <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'user_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
                             getData={getAllUser}
                             queryParams={formDataFilter}
                             columns={columns(