@eohjsc/react-native-smart-city 0.7.3-rc11 → 0.7.3-rc13

package/src/commons/Header/HeaderCustom.js

@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
@@ -111,7 +111,7 @@ const HeaderCustom = ({
         {isShowClose && (
           <TouchableOpacity onPress={handleClose}>
             <View style={styles.buttonAdd}>
-              <AntDesign name={'close'} size={24} color={Colors.Black} />
+              <IconOutline name={'close'} size={24} color={Colors.Black} />
             </View>
           </TouchableOpacity>
         )}

package/src/commons/HeaderAni/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { TouchableOpacity, StyleSheet, Animated, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
@@ -95,7 +95,7 @@ const HeaderAni = memo(
             accessibilityLabel={AccessibilityLabel.ICON_BACK}
           >
             <View style={styles.btnBack}>
-              <AntDesign name={'left'} size={27} color={Colors.Gray9} />
+              <IconOutline name={'left'} size={27} color={Colors.Gray9} />
             </View>
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>

package/src/commons/NavBar/index.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { View, TouchableOpacity } from 'react-native';
 
 import styles from './NavBarStyles';
@@ -40,7 +40,7 @@ const NavBar = ({
           ref={refMenuAction}
           accessibilityLabel={idLabelIconBars}
         >
-          <AntDesign name={'bars'} size={19} color={Colors.Black} />
+          <IconOutline name={'bars'} size={19} color={Colors.Black} />
         </TouchableOpacity>
       </View>
       <MenuActionMore

package/src/commons/OneTapTemplate/NumberUpDownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { memo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './NumberUpDownActionTemplateStyles';
@@ -118,7 +118,7 @@ const NumberUpDownActionTemplate = ({ device, item = {}, onSelectAction }) => {
                   AccessibilityLabel.NUMBER_UP_DOWN_ACTION_DOWN
                 }
               >
-                <AntDesign name="down" size={32} color={Colors.Primary} />
+                <IconOutline name="down" size={32} color={Colors.Primary} />
               </TouchableOpacity>
               <Text
                 type="H2"
@@ -134,7 +134,7 @@ const NumberUpDownActionTemplate = ({ device, item = {}, onSelectAction }) => {
                 onPress={onPressUp}
                 accessibilityLabel={AccessibilityLabel.NUMBER_UP_DOWN_ACTION_UP}
               >
-                <AntDesign name="up" size={32} color={Colors.Primary} />
+                <IconOutline name="up" size={32} color={Colors.Primary} />
               </TouchableOpacity>
             </View>
             <View style={styles.wrapButton}>

package/src/commons/SearchLocation/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, TextInput } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -10,8 +10,8 @@ const SearchBarLocation = memo(({ input, onTextInput }) => {
   const t = useTranslations();
   return (
     <View style={styles.container}>
-      <AntDesign
-        name="search1"
+      <IconOutline
+        name="search"
         size={24}
         color={Colors.Gray6}
         accessibilityLabel="icon-search"

package/src/commons/SelectActionCard/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { Card } from '../CardShadow';
 import Text from '../Text';
@@ -20,7 +20,7 @@ const SelectActionCard = memo(({ title, action, onPress }) => {
               {action}
             </Text>
           </View>
-          <AntDesign name="right" size={20} />
+          <IconOutline name="right" size={20} />
         </View>
       </TouchableOpacity>
     </Card>

package/src/commons/SelectSubUnit/index.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { API, Colors } from '../../configs';
 import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
@@ -98,7 +98,11 @@ const SelectSubUnit = ({ unitId, title, subTitle, onPressNext, route }) => {
               />
             ))}
             <TouchableOpacity style={styles.rowContainer} onPress={addSubUnit}>
-              <AntDesign name="plus-circle" size={20} color={Colors.Primary} />
+              <IconOutline
+                name="plus-circle"
+                size={20}
+                color={Colors.Primary}
+              />
               <View style={styles.row}>
                 <Text type="H4" color={Colors.Primary}>
                   {t('add_new_sub_unit')}

package/src/commons/Sharing/BtnRemoveMember.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 const BtnRemoveMember = memo(({ member, onPressRemove }) => {
@@ -9,7 +9,7 @@ const BtnRemoveMember = memo(({ member, onPressRemove }) => {
   }, [member, onPressRemove]);
   return (
     <TouchableOpacity style={styles.buttonRemove} onPress={onPress}>
-      <AntDesign name={'minus'} size={20} color={Colors.Gray8} />
+      <IconOutline name={'minus'} size={20} color={Colors.Gray8} />
     </TouchableOpacity>
   );
 });

package/src/commons/Sharing/StationDevicePermissions.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -86,7 +86,7 @@ const StationDevicePermissions = ({ dataStation, onselectSensor }) => {
           <View style={styles.infoContainer}>
             <Text style={styles.text}>{sensor.name}</Text>
             <View style={styles.rightImage}>
-              <AntDesign
+              <IconOutline
                 name={expandedIndex === index ? 'up' : 'down'}
                 size={20}
                 color={Colors.Gray6}

package/src/commons/SubUnit/DeviceTemplate/ConfigAndEvaluation/ConfigAndEvaluation.js

@@ -5,7 +5,7 @@ import Text from '../../../Text';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import { EvaluationConfigWrapper } from '../EvaluationOverConfig/EvaluationOverConfig';
 import IconComponent from '../../../IconComponent';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ConfigAndEvaluationDisplay = memo(
   ({ device, valueEvaluation, stationItem, configValue }) => {
@@ -44,7 +44,7 @@ const ConfigAndEvaluationDisplay = memo(
               lastUpdated={configValue?.last_updated}
               format={'DDMMYYYY'}
             />
-            <AntDesign style={styles.marginTop10} name="right" size={12} />
+            <IconOutline style={styles.marginTop10} name="right" size={12} />
           </View>
         )}
       </>

package/src/commons/SubUnit/DeviceTemplate/ConfigValue/ConfigValue.js

@@ -5,7 +5,7 @@ import Text from '../../../Text';
 import { useConfigGlobalState } from '../../../../iot/states';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ConfigValue = ({ device, stationItem }) => {
   const [configValues] = useConfigGlobalState('configValues');
@@ -40,7 +40,7 @@ const ConfigValue = ({ device, stationItem }) => {
               lastUpdated={configValue?.last_updated}
               format={'DDMMYYYY'}
             />
-            <AntDesign style={styles.marginTop10} name="right" size={12} />
+            <IconOutline style={styles.marginTop10} name="right" size={12} />
           </View>
         )}
       </View>

package/src/commons/SubUnit/DeviceTemplate/EvaluationOverConfig/EvaluationOverConfig.js

@@ -9,7 +9,7 @@ import {
 } from '../../../../screens/Device/hooks/useEvaluateValue';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 export const EvaluationConfigWrapper = memo(
   ({ device, stationItem, Child }) => {
@@ -69,7 +69,7 @@ const EvaluationOverConfigDisplay = memo(
                 lastUpdated={configValue?.last_updated}
                 format={'DDMMYYYY'}
               />
-              <AntDesign style={styles.marginTop10} name="right" size={12} />
+              <IconOutline style={styles.marginTop10} name="right" size={12} />
             </View>
           )}
         </View>

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import moment from 'moment';
 import Text from '../../Text';
 import { API, Colors } from '../../../configs';
@@ -107,7 +107,7 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
             >
               {activateAt && t('activated_time', { time: activateAt })}
             </Text>
-            <AntDesign name="right" size={12} />
+            <IconOutline name="right" size={12} />
           </View>
         </TouchableOpacity>
       </View>

package/src/commons/Unit/HeaderUnit/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo, useRef } from 'react';
 import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
@@ -53,7 +53,7 @@ const HeaderUnit = memo(({ transparent, unit }) => {
         onPress={handleGoBack}
       >
         <View style={styles.btnLeft}>
-          <AntDesign name={'left'} size={27} color={colorHeader} />
+          <IconOutline name={'left'} size={27} color={colorHeader} />
         </View>
       </TouchableOpacity>
       {!transparent && (
@@ -71,7 +71,7 @@ const HeaderUnit = memo(({ transparent, unit }) => {
             onPress={setShowAdd}
           >
             <View style={styles.btnAdd}>
-              <AntDesign name={'plus'} size={27} color={colorHeader} />
+              <IconOutline name={'plus'} size={27} color={colorHeader} />
             </View>
           </TouchableOpacity>
         )}

package/src/commons/Unit/SharedUnit.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 
 import { API, Colors, Images } from '../../configs';
 import Text from '../../commons/Text';
@@ -91,7 +91,7 @@ const SharedUnit = ({
         {isOptions && (
           <Fragment>
             {item.is_pin ? (
-              <AntDesign
+              <IconFill
                 name="pushpin"
                 size={20}
                 color={Colors.Blue10}
@@ -99,15 +99,15 @@ const SharedUnit = ({
                 accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT}-${item.id}`}
               />
             ) : (
-              <AntDesign
-                name="pushpino"
+              <IconOutline
+                name="pushpin"
                 size={20}
                 onPress={addPinSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
               />
             )}
             {item.is_star ? (
-              <AntDesign
+              <IconFill
                 name="star"
                 size={20}
                 color={Colors.Yellow6}
@@ -115,8 +115,8 @@ const SharedUnit = ({
                 accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT}-${item.id}`}
               />
             ) : (
-              <AntDesign
-                name="staro"
+              <IconOutline
+                name="star"
                 size={20}
                 onPress={addStarSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}

package/src/configs/Theme.js

@@ -86,7 +86,7 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   menuIcon: {
-    paddingLeft: 16,
+    paddingRight: 10,
     height: '100%',
     justifyContent: 'center',
   },

package/src/navigations/EmergencyContactsStack.js

@@ -1,4 +1,4 @@
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
@@ -19,7 +19,7 @@ export const EmergencyContactsStack = memo(() => {
         ...screenOptions,
         headerTitleAlign: 'center',
         headerBackImage: () => (
-          <AntDesign
+          <IconOutline
             name="left"
             size={27}
             color={Colors.Black}

package/src/navigations/SharedStack.js

@@ -50,6 +50,8 @@ export default SharedStack;
 
 const styles = StyleSheet.create({
   btnMenu: {
+    paddingLeft: 0,
+    paddingRight: 10,
     paddingHorizontal: 16,
     height: '100%',
     justifyContent: 'center',

package/src/navigations/UnitStack.js

@@ -1,6 +1,6 @@
 import React, { memo, useContext, useEffect } from 'react';
 import { AppState, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { BleManager } from 'react-native-ble-plx';
 import NetInfo from '@react-native-community/netinfo';
@@ -173,7 +173,7 @@ export const UnitStack = memo((props) => {
         ...screenOptions,
         headerTitleAlign: 'center',
         headerBackImage: () => (
-          <AntDesign
+          <IconOutline
             name="left"
             size={27}
             color={Colors.Black}

package/src/screens/ActivityLog/index.js

@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 import { HeaderCustom } from '../../commons/Header';
 import ItemLog from './ItemLog';
@@ -83,7 +83,7 @@ const ActivityLogScreen = ({ route }) => {
         onPress={setShowFilterPopup}
         accessibilityLabel={AccessibilityLabel.FILTER_BUTTON}
       >
-        <AntDesign name={'filter'} size={27} color={Colors.Black} />
+        <IconOutline name={'filter'} size={27} color={Colors.Black} />
       </TouchableOpacity>
     ),
     [setShowFilterPopup]

package/src/screens/AddLocationMaps/index.js

@@ -2,7 +2,7 @@ import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
 import { View, ScrollView, TouchableOpacity } from 'react-native';
 import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { check, RESULTS } from 'react-native-permissions';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -225,7 +225,7 @@ const AddLocationMaps = memo(() => {
                   style={styles.button}
                   accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
                 >
-                  <AntDesign
+                  <IconOutline
                     name="enviroment"
                     size={27}
                     color={Colors.Primary}
@@ -274,7 +274,7 @@ const AddLocationMaps = memo(() => {
                   }}
                   tracksViewChanges={false}
                 >
-                  <AntDesign
+                  <IconOutline
                     name="enviroment"
                     size={27}
                     color={Colors.Blue10}

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useState, useMemo } from 'react';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { CommonActions, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
@@ -357,7 +357,7 @@ const RenameNewDevices = memo(({ route }) => {
       />
       <View style={styles.content}>
         <View style={styles.viewIconSuccess}>
-          <AntDesign name="check-circle" size={28} color={Colors.Green6} />
+          <IconOutline name="check-circle" size={28} color={Colors.Green6} />
           <Text
             semibold
             color={Colors.Black}

package/src/screens/Automate/AddNewAction/ChooseAction.js

@@ -14,7 +14,13 @@ import RenderActionItem from './RenderActionItem';
 const ChooseAction = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
-  const { unitId, device, automateId, numberActionCanAdd } = route?.params;
+  const {
+    unitId,
+    device,
+    automateId,
+    numberActionCanAdd,
+    multiUnit = {},
+  } = route.params;
   const [data, setData] = useState([]);
   const [actions, setActions] = useState([]);
 
@@ -48,7 +54,7 @@ const ChooseAction = ({ route }) => {
       API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
       {
         list_action,
-        unit: unitId,
+        unit: unitId || multiUnit.id,
       }
     );
 
@@ -58,7 +64,15 @@ const ChooseAction = ({ route }) => {
         merge: true,
         params: { saveAt: moment().valueOf() },
       });
-  }, [actions, numberActionCanAdd, automateId, unitId, navigate, t]);
+  }, [
+    actions,
+    numberActionCanAdd,
+    automateId,
+    unitId,
+    multiUnit.id,
+    navigate,
+    t,
+  ]);
 
   const handleOnSelectAction = (action) => {
     setActions((prevActions) => {

package/src/screens/Automate/AddNewAction/ChooseConfig.js

@@ -1,17 +1,17 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
 
-import { useTranslations } from '../../../hooks/Common/useTranslations';
+import GridItem from '../../../commons/Grid/GridItem';
 import Text from '../../../commons/Text';
-import { axiosGet } from '../../../utils/Apis/axios';
 import { API, Colors } from '../../../configs';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { axiosGet } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
-import styles from './Styles/SelectActionStyles';
 import { LoadingSelectAction } from './Components';
-import { AUTOMATE_TYPE } from '../../../configs/Constants';
 import NewActionWrapper from './NewActionWrapper';
-import GridItem from '../../../commons/Grid/GridItem';
+import styles from './Styles/SelectActionStyles';
 
 const ChooseConfig = ({ route }) => {
   const t = useTranslations();
@@ -44,6 +44,7 @@ const ChooseConfig = ({ route }) => {
         config,
         automate,
         closeScreen,
+        unitId: automate?.unit,
       });
     },
     [automate, closeScreen, navigate]

package/src/screens/Automate/AddNewAction/NewActionWrapper.js

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 import { useNavigation, useRoute } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { FullLoading, HeaderCustom } from '../../../commons';
 import BottomButtonView from '../../../commons/BottomButtonView';
 import { Colors } from '../../../configs';
@@ -35,7 +35,7 @@ const NewActionWrapper = ({
         onPress={handleClose}
         accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
       >
-        <AntDesign name={'close'} size={24} color={Colors.Black} />
+        <IconOutline name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>
     ),
     [handleClose]

package/src/screens/Automate/AddNewAction/SelectControlDevices.js

@@ -8,8 +8,13 @@ import SelectDevices from './Components/SelectDevices';
 
 const SelectControlDevices = ({ route }) => {
   const t = useTranslations();
-  const { unitId, closeScreen, automateId, numberActionCanAdd } =
-    route?.params || {};
+  const {
+    unitId,
+    closeScreen,
+    automateId,
+    numberActionCanAdd,
+    multiUnit = {},
+  } = route.params || {};
 
   const [stations, setStations] = useState([]);
   const [listStation, setListStation] = useState([]);
@@ -19,22 +24,26 @@ const SelectControlDevices = ({ route }) => {
   const [loading, setLoading] = useState(true);
 
   const fetchDetails = useCallback(async () => {
-    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unitId), {}, (response) => {
-      const { success, data } = response;
-      if (success) {
-        const newData = data.filter((item) => item.sensors.length > 0);
-        const listMenu = newData.map((item, index) => ({
-          text: item.name,
-          station: item,
-          index: index,
-        }));
-        setStations(newData);
-        setListMenuItem(listMenu);
-        setListStation(listMenu);
+    await fetchWithCache(
+      API.UNIT.DEVICE_CONTROL(unitId || multiUnit.id),
+      {},
+      (response) => {
+        const { success, data } = response;
+        if (success) {
+          const newData = data.filter((item) => item.sensors.length > 0);
+          const listMenu = newData.map((item, index) => ({
+            text: item.name,
+            station: item,
+            index: index,
+          }));
+          setStations(newData);
+          setListMenuItem(listMenu);
+          setListStation(listMenu);
+        }
       }
-    });
+    );
     setLoading(false);
-  }, [unitId]);
+  }, [multiUnit.id, unitId]);
 
   useEffect(() => {
     fetchDetails();
@@ -48,9 +57,10 @@ const SelectControlDevices = ({ route }) => {
         device: selectedDevice,
         closeScreen,
         numberActionCanAdd,
+        multiUnit,
       });
     },
-    [navigate, unitId, automateId, closeScreen, numberActionCanAdd]
+    [navigate, unitId, automateId, closeScreen, numberActionCanAdd, multiUnit]
   );
 
   if (loading) {