src/pages/master/brandDevice/component/DetailBrandDevice.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Modal, Input, Typography, Button, ConfigProvider, Select } from 'antd';
+import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 
 const { Text } = Typography;
@@ -143,6 +143,14 @@ const DetailBrandDevice = (props) => {
         });
     };
 
+    const handleStatusToggle = (event) => {
+        const isChecked = event;
+        setFormData({
+            ...FormData,
+            status: isChecked ? true : false,
+        });
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
@@ -212,6 +220,34 @@ const DetailBrandDevice = (props) => {
         >
             {FormData && (
                 <div>
+                    <div>
+                        <div>
+                            <Text strong>Status</Text>
+                        </div>
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginTop: '8px',
+                            }}
+                        >
+                            <div style={{ marginRight: '8px' }}>
+                                <Switch
+                                    disabled={props.readOnly}
+                                    style={{
+                                        backgroundColor:
+                                            FormData.status === true ? '#23A55A' : '#bfbfbf',
+                                    }}
+                                    checked={FormData.status === true}
+                                    onChange={handleStatusToggle}
+                                />
+                            </div>
+                            <div>
+                                <Text>{FormData.status === true ? 'Active' : 'Inactive'}</Text>
+                            </div>
+                        </div>
+                    </div>
+                    <Divider style={{ margin: '12px 0' }} />
                     <div hidden>
                         <Text strong>Brand ID</Text>
                         <Input
@@ -265,21 +301,6 @@ const DetailBrandDevice = (props) => {
                             readOnly={props.readOnly}
                         />
                     </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Status</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-                        <Select
-                            value={FormData.status}
-                            onChange={(value) => handleSelectChange('status', value)}
-                            disabled={props.readOnly}
-                            style={{ width: '100%' }}
-                            placeholder="Select Status"
-                            options={[
-                                { value: 'Active', label: 'Active' },
-                                { value: 'Inactive', label: 'Inactive' },
-                            ]}
-                        />
-                    </div>
                 </div>
             )}
         </Modal>

src/pages/master/brandDevice/component/ListBrandDevice.jsx

@@ -101,7 +101,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         ),
     },
     {
-        title: 'Action',
+        title: 'Aksi',
         key: 'action',
         align: 'center',
         width: '15%',