feat: enhance device selection with code and name display, filter active devices

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

@@ -21,10 +21,11 @@ const DetailTag = (props) => {
         tag_number: '',
         data_type: '',
         unit: '',
-        device_name: '', // Read-only, auto-display dari device yang dipilih
         is_active: true,
         is_alarm: false,
-        device_id: null, // akan set ketika user select device dari dropdown
+        device_id: null,
+        device_code: '',
+        device_name: '',
         sub_section_id: null,
     };
 
@@ -147,6 +148,8 @@ const DetailTag = (props) => {
             is_active: FormData.is_active,
             is_alarm: FormData.is_alarm,
             device_id: parseInt(FormData.device_id),
+            device_code: FormData.device_code,
+            device_name: FormData.device_name,
         };
 
         try {
@@ -212,7 +215,8 @@ const DetailTag = (props) => {
         setFormData({
             ...FormData,
             device_id: deviceId,
-            device_name: selectedDevice ? selectedDevice.device_name : '',
+            device_code: selectedDevice?.device_code || '',
+            device_name: selectedDevice?.device_name || '',
         });
     };
 
@@ -235,8 +239,14 @@ const DetailTag = (props) => {
         try {
             const params = new URLSearchParams({ limit: 1000 });
             const response = await getAllDevice(params);
+
             if (response && response.data && response.data.data) {
-                setDeviceList(response.data.data);
+                const devices = response.data.data;
+
+                // Filter hanya device yang active (device_status === true)
+                const activeDevices = devices.filter((device) => device.device_status === true);
+
+                setDeviceList(activeDevices);
             }
         } catch (error) {
             console.error('Error loading devices:', error);
@@ -283,10 +293,11 @@ const DetailTag = (props) => {
                     tag_number: props.selectedData.tag_number || '',
                     data_type: props.selectedData.data_type || '',
                     unit: props.selectedData.unit || '',
-                    device_name: props.selectedData.device_name || '',
                     is_active: props.selectedData.is_active ?? true,
                     is_alarm: props.selectedData.is_alarm ?? false,
                     device_id: props.selectedData.device_id || null,
+                    device_code: props.selectedData.device_code || '',
+                    device_name: props.selectedData.device_name || '',
                     sub_section_id: props.selectedData.sub_section_id || null,
                 };
                 setFormData(filteredData);
@@ -434,7 +445,9 @@ const DetailTag = (props) => {
                                             disabled={props.readOnly}
                                             style={{
                                                 backgroundColor:
-                                                    FormData.is_alarm === true ? '#23A55A' : '#bfbfbf',
+                                                    FormData.is_alarm === true
+                                                        ? '#23A55A'
+                                                        : '#bfbfbf',
                                             }}
                                             checked={FormData.is_alarm === true}
                                             onChange={handleAlarmToggle}
@@ -523,11 +536,11 @@ const DetailTag = (props) => {
                         </Select>
                     </div>
                     <div style={{ marginBottom: 12 }}>
-                        <Text strong>Device Code</Text>
+                        <Text strong>Device</Text>
                         <Text style={{ color: 'red' }}> *</Text>
                         <Select
                             style={{ width: '100%' }}
-                            placeholder="Search device code"
+                            placeholder="Search device code or name"
                             value={FormData.device_id || undefined}
                             onChange={handleDeviceChange}
                             disabled={props.readOnly}
@@ -543,21 +556,11 @@ const DetailTag = (props) => {
                         >
                             {deviceList.map((device) => (
                                 <Select.Option key={device.device_id} value={device.device_id}>
-                                    {device.device_code || ''}
+                                    {`${device.device_code || ''} - ${device.device_name || ''}`}
                                 </Select.Option>
                             ))}
                         </Select>
                     </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Device Name</Text>
-                        <Input
-                            name="device_name"
-                            value={FormData.device_name}
-                            placeholder="Auto-filled from selected device code"
-                            disabled
-                            style={{ backgroundColor: '#f5f5f5' }}
-                        />
-                    </div>
                     {/* Device ID hidden - value dari dropdown */}
                     <input type="hidden" name="device_id" value={FormData.device_id || ''} />
                 </div>