feat: implement field auto-incrementing code

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Modal, Input, Typography, Button, ConfigProvider, Switch } from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
-import { createUnit, updateUnit } from '../../../../api/master-unit';
+import { createUnit, updateUnit, getAllUnit } from '../../../../api/master-unit';
 
 const { Text } = Typography;
 
@@ -16,6 +16,7 @@ const DetailUnit = (props) => {
     };
 
     const [FormData, setFormData] = useState(defaultData);
+    const [nextUnitCode, setNextUnitCode] = useState('Auto-fill');
 
     const handleCancel = () => {
         props.setSelectedData(null);
@@ -117,9 +118,52 @@ const DetailUnit = (props) => {
         });
     };
 
+    const generateNextUnitCode = async () => {
+        try {
+            const params = new URLSearchParams({ limit: 10000 });
+            const response = await getAllUnit(params);
+
+            if (response && response.data && response.data.data) {
+                const units = response.data.data;
+
+                if (units.length === 0) {
+                    setNextUnitCode('UNT001');
+                    return;
+                }
+
+                // Extract numeric part from unit codes and find the maximum
+                const unitNumbers = units
+                    .map((unit) => {
+                        const match = unit.unit_code?.match(/unt(\d+)/i);
+                        return match ? parseInt(match[1], 10) : 0;
+                    })
+                    .filter((num) => !isNaN(num));
+
+                const maxNumber = unitNumbers.length > 0 ? Math.max(...unitNumbers) : 0;
+                const nextNumber = maxNumber + 1;
+
+                // Format with leading zeros (UNT001, UNT002, etc.)
+                const nextCode = `UNT${String(nextNumber).padStart(3, '0')}`;
+                setNextUnitCode(nextCode);
+            } else {
+                setNextUnitCode('UNT001');
+            }
+        } catch (error) {
+            console.error('Error generating next unit code:', error);
+            setNextUnitCode('Auto-fill');
+        }
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
+            if (props.showModal) {
+                // Generate next unit code only for add mode
+                if (props.actionMode === 'add' && !props.selectedData) {
+                    generateNextUnitCode();
+                }
+            }
+
             if (props.selectedData != null) {
                 // Only set fields that are in defaultData
                 const filteredData = {
@@ -133,7 +177,7 @@ const DetailUnit = (props) => {
                 setFormData(defaultData);
             }
         }
-    }, [props.showModal]);
+    }, [props.showModal, props.actionMode]);
 
     return (
         <Modal
@@ -222,17 +266,21 @@ const DetailUnit = (props) => {
                             </div>
                         </div>
                     </div>
-                    {/* Unit Code - Display only for edit/preview */}
-                    {FormData.unit_code && (
-                        <div style={{ marginBottom: 12 }}>
-                            <Text strong>Unit Code</Text>
-                            <Input
-                                name="unit_code"
-                                value={FormData.unit_code}
-                                disabled
-                            />
-                        </div>
-                    )}
+                    {/* Unit Code - Auto Increment & Read Only */}
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Unit Code</Text>
+                        <Input
+                            name="unit_code"
+                            value={FormData.unit_code || nextUnitCode}
+                            placeholder={nextUnitCode}
+                            disabled
+                            style={{
+                                backgroundColor: '#f5f5f5',
+                                cursor: 'not-allowed',
+                                color: FormData.unit_code ? '#000000' : '#bfbfbf'
+                            }}
+                        />
+                    </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>