feat: implement field auto-incrementing code

src/pages/master/device/component/DetailDevice.jsx

@@ -12,7 +12,7 @@ import {
 } from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { createApd, getJenisPermit, updateApd } from '../../../../api/master-apd';
-import { createDevice, updateDevice } from '../../../../api/master-device';
+import { createDevice, updateDevice, getAllDevice } from '../../../../api/master-device';
 import { Checkbox } from 'antd';
 const CheckboxGroup = Checkbox.Group;
 
@@ -33,6 +33,7 @@ const DetailDevice = (props) => {
     };
 
     const [FormData, setFormData] = useState(defaultData);
+    const [nextDeviceCode, setNextDeviceCode] = useState('Auto-fill');
 
     const [jenisPermit, setJenisPermit] = useState([]);
     const [checkedList, setCheckedList] = useState([]);
@@ -215,12 +216,55 @@ const DetailDevice = (props) => {
         });
     };
 
+    const generateNextDeviceCode = async () => {
+        try {
+            const params = new URLSearchParams({ limit: 10000 });
+            const response = await getAllDevice(params);
+
+            if (response && response.data && response.data.data) {
+                const devices = response.data.data;
+
+                if (devices.length === 0) {
+                    setNextDeviceCode('DVC001');
+                    return;
+                }
+
+                // Extract numeric part from device codes and find the maximum
+                const deviceNumbers = devices
+                    .map((device) => {
+                        const match = device.device_code?.match(/dvc(\d+)/i);
+                        return match ? parseInt(match[1], 10) : 0;
+                    })
+                    .filter((num) => !isNaN(num));
+
+                const maxNumber = deviceNumbers.length > 0 ? Math.max(...deviceNumbers) : 0;
+                const nextNumber = maxNumber + 1;
+
+                // Format with leading zeros (DVC001, DVC002, etc.)
+                const nextCode = `DVC${String(nextNumber).padStart(3, '0')}`;
+                setNextDeviceCode(nextCode);
+            } else {
+                setNextDeviceCode('DVC001');
+            }
+        } catch (error) {
+            console.error('Error generating next device code:', error);
+            setNextDeviceCode('Auto-fill');
+        }
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
-            // Only call getDataJenisPermit if permitDefault is enabled
-            if (props.permitDefault) {
-                getDataJenisPermit();
+            if (props.showModal) {
+                // Only call getDataJenisPermit if permitDefault is enabled
+                if (props.permitDefault) {
+                    getDataJenisPermit();
+                }
+
+                // Generate next device code only for add mode
+                if (props.actionMode === 'add' && !props.selectedData) {
+                    generateNextDeviceCode();
+                }
             }
 
             if (props.selectedData != null) {
@@ -234,7 +278,7 @@ const DetailDevice = (props) => {
         } else {
             // navigate('/signin'); // Uncomment if useNavigate is imported
         }
-    }, [props.showModal]);
+    }, [props.showModal, props.actionMode]);
 
     return (
         <Modal
@@ -332,17 +376,21 @@ const DetailDevice = (props) => {
                             disabled
                         />
                     </div>
-                    {/* <div style={{ marginBottom: 12 }}>
+                    {/* Device Code - Auto Increment & Read Only */}
+                    <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Code</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
                         <Input
                             name="device_code"
-                            value={FormData.device_code}
-                            onChange={handleInputChange}
-                            placeholder="Enter Device Code"
-                            readOnly={props.readOnly}
+                            value={FormData.device_code || nextDeviceCode}
+                            placeholder={nextDeviceCode}
+                            disabled
+                            style={{
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'not-allowed',
+                                color: FormData.device_code ? '#000000' : '#bfbfbf'
+                            }}
                         />
-                    </div> */}
+                    </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>