feat: add dropdown field for plant sub sections in DetailTag component

src/pages/master/tag/component/DetailTag.jsx

@@ -3,6 +3,7 @@ import { Modal, Input, Typography, Button, ConfigProvider, Switch, Select } from
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { createTag, updateTag, getAllTag } from '../../../../api/master-tag';
 import { getAllDevice } from '../../../../api/master-device';
+import { getAllPlantSection } from '../../../../api/master-plant-section';
 
 const { Text } = Typography;
 
@@ -10,6 +11,8 @@ const DetailTag = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [deviceList, setDeviceList] = useState([]);
     const [loadingDevices, setLoadingDevices] = useState(false);
+    const [plantSubSectionList, setPlantSubSectionList] = useState([]);
+    const [loadingPlantSubSections, setLoadingPlantSubSections] = useState(false);
 
     const defaultData = {
         tag_id: '',
@@ -224,7 +227,6 @@ const DetailTag = (props) => {
             const params = new URLSearchParams({ limit: 1000 });
             const response = await getAllDevice(params);
             if (response && response.data && response.data.data) {
-                console.log('Loaded devices:', response.data.data); // Debug
                 setDeviceList(response.data.data);
             }
         } catch (error) {
@@ -234,12 +236,33 @@ const DetailTag = (props) => {
         }
     };
 
+    const loadPlantSubSections = async () => {
+        setLoadingPlantSubSections(true);
+        try {
+            const params = new URLSearchParams({ limit: 1000 });
+            const response = await getAllPlantSection(params);
+
+            if (response && response.data && response.data.data) {
+                // Filter hanya plant sub section yang active
+                const activePlantSubSections = response.data.data.filter(
+                    (section) => section.is_active === true
+                );
+                setPlantSubSectionList(activePlantSubSections);
+            }
+        } catch (error) {
+            console.error('Error loading plant sub sections:', error);
+        } finally {
+            setLoadingPlantSubSections(false);
+        }
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
             if (props.showModal) {
-                // Load devices when modal opens
+                // Load devices and plant sub sections when modal opens
                 loadDevices();
+                loadPlantSubSections();
             }
 
             if (props.selectedData != null) {
@@ -422,7 +445,7 @@ const DetailTag = (props) => {
                         <Text style={{ color: 'red' }}> *</Text>
                         <Select
                             style={{ width: '100%' }}
-                            placeholder="Search device by code, name, or type..."
+                            placeholder="Search device code"
                             value={FormData.device_id || undefined}
                             onChange={handleDeviceChange}
                             disabled={props.readOnly}
@@ -453,6 +476,34 @@ const DetailTag = (props) => {
                             style={{ backgroundColor: '#f5f5f5' }}
                         />
                     </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong> Plant Sub Section Name</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Select Plant Sub Section"
+                            value={FormData.sub_section_id || undefined}
+                            onChange={(value) => handleSelectChange('sub_section_id', value)}
+                            disabled={props.readOnly}
+                            loading={loadingPlantSubSections}
+                            showSearch
+                            allowClear
+                            optionFilterProp="children"
+                            filterOption={(input, option) => {
+                                const text = option.children;
+                                if (!text) return false;
+                                return text.toLowerCase().includes(input.toLowerCase());
+                            }}
+                        >
+                            {plantSubSectionList.map((section) => (
+                                <Select.Option
+                                    key={section.sub_section_id}
+                                    value={section.sub_section_id}
+                                >
+                                    {section.sub_section_name || ''}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    </div>
                     {/* Device ID hidden - value dari dropdown */}
                     <input type="hidden" name="device_id" value={FormData.device_id || ''} />
                 </div>