@eohjsc/react-native-smart-city 0.4.66 → 0.4.68

package/android/build.gradle

@@ -10,10 +10,10 @@
 //   original location:
 //   - https://github.com/facebook/react-native/blob/0.58-stable/local-cli/templates/HelloWorld/android/app/build.gradle
 
-def DEFAULT_COMPILE_SDK_VERSION = 28
+def DEFAULT_COMPILE_SDK_VERSION = 32
 def DEFAULT_BUILD_TOOLS_VERSION = '28.0.3'
-def DEFAULT_MIN_SDK_VERSION = 16
-def DEFAULT_TARGET_SDK_VERSION = 28
+def DEFAULT_MIN_SDK_VERSION = 24
+def DEFAULT_TARGET_SDK_VERSION = 32
 
 def safeExtGet(prop, fallback) {
     rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.66",
+  "version": "0.4.68",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -186,7 +186,7 @@
     "react-native-pager-view": "^5.4.1",
     "react-native-parallax-scroll-view": "^0.21.3",
     "react-native-parsed-text": "^0.0.22",
-    "react-native-permissions": "3.4.0",
+    "react-native-permissions": "3.6.0",
     "react-native-popover-view": "^4.0.3",
     "react-native-progress": "^5.0.0",
     "react-native-reanimated": "1.10.1",

package/src/commons/Device/ConnectedViewHeader.js

@@ -4,7 +4,7 @@ import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import { timeDifference } from '../../utils/Converter/time';
+import LastUpdatedText from './LastUpdatedText';
 
 const DisplayTextConnected = memo(({ type }) => {
   const t = useTranslations();
@@ -26,9 +26,6 @@ const DisplayTextConnected = memo(({ type }) => {
 const ConnectedViewHeader = memo(
   ({ lastUpdated, type, isDisplayTime, showWindDirection }) => {
     const t = useTranslations();
-    const lastUpdatedStr = lastUpdated
-      ? timeDifference(new Date(), lastUpdated)
-      : `5 ${t('seconds_ago')}`;
 
     return (
       <View style={styles.statusContainer}>
@@ -36,12 +33,10 @@ const ConnectedViewHeader = memo(
           <IconOutline name={'wifi'} color={Colors.Green6} size={16} />
           <DisplayTextConnected type={type} />
         </View>
-        {lastUpdatedStr && isDisplayTime && (
+        {isDisplayTime && (
           <View style={styles.showWindDirection}>
             {showWindDirection && <Text>{t('current_wind_direction')} </Text>}
-            <Text color={Colors.Gray7} size={12} style={styles.txtLastUpdate}>
-              {`${t('last_updated')} ${lastUpdatedStr}`}
-            </Text>
+            <LastUpdatedText lastUpdated={lastUpdated} showText />
           </View>
         )}
       </View>
@@ -66,11 +61,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: Colors.Green6,
   },
-  txtLastUpdate: {
-    marginLeft: 8,
-    lineHeight: 20,
-    marginTop: 8,
-  },
   showWindDirection: {
     flexDirection: 'column',
     justifyContent: 'center',

package/src/commons/Device/ItemDevice.js

@@ -1,10 +1,5 @@
-import React, { memo, useCallback } from 'react';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
+import React, { memo, useCallback, useMemo } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Routes from '../../utils/Route';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
@@ -12,18 +7,15 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import ItemQuickAction from '../../commons/Action/ItemQuickAction';
 import Text from '../../commons/Text';
 import {
-  useHomeAssistantDeviceConnected,
   useBluetoothDeviceConnected,
   useEoHBackendDeviceConnected,
+  useHomeAssistantDeviceConnected,
 } from '../../hooks/IoT';
 
 import { Colors } from '../../configs';
-import {
-  AccessibilityLabel,
-  DEVICE_TYPE,
-  DEVICE_SIZE,
-} from '../../configs/Constants';
+import { DEVICE_TYPE } from '../../configs/Constants';
 import IconComponent from '../IconComponent';
+import ItemDeviceWrapper from './ItemDeviceWrapper';
 
 const ItemDevice = memo(
   ({ svgMain, description, title, sensor, unit, station, wrapStyle }) => {
@@ -52,29 +44,7 @@ const ItemDevice = memo(
       });
     }, [navigation, sensor, station, title, unit]);
 
-    const borderColor = (() => {
-      if (!!sensor && sensor?.is_managed_by_backend) {
-        if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-          return Colors.Gray4;
-        }
-        if (isBluetoothConnected) {
-          return Colors.Gray4;
-        }
-        if (isFetchingStatusFromEoHBackend || isEoHBackendConnected) {
-          return Colors.Gray4;
-        }
-        return Colors.Red6;
-      }
-      // not managed by backend
-      if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
-        if (isHomeAssistantConnecting || isHomeAssistantConnected) {
-          return Colors.Gray4;
-        }
-      }
-      return Colors.Red6;
-    })();
-
-    const textConnected = (() => {
+    const textConnected = useMemo(() => {
       if (!!sensor && sensor?.is_managed_by_backend) {
         if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
           return t('connected');
@@ -100,9 +70,17 @@ const ItemDevice = memo(
         }
       }
       return t('disconnected');
-    })();
+    }, [
+      isBluetoothConnected,
+      isEoHBackendConnected,
+      isFetchingStatusFromEoHBackend,
+      isHomeAssistantConnected,
+      isHomeAssistantConnecting,
+      sensor,
+      t,
+    ]);
 
-    const canRenderQuickAction = (() => {
+    const canRenderQuickAction = useMemo(() => {
       if (!!sensor && sensor?.is_managed_by_backend) {
         if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
           return true;
@@ -120,50 +98,52 @@ const ItemDevice = memo(
         return isHomeAssistantConnected;
       }
       return true;
-    })();
+    }, [
+      isBluetoothConnected,
+      isFetchingStatusFromEoHBackend,
+      isHomeAssistantConnected,
+      sensor,
+    ]);
 
     return (
-      <TouchableWithoutFeedback
-        onPress={goToSensorDisplay}
-        accessibilityLabel={`${AccessibilityLabel.SENSOR_NAME}-${sensor?.id}`}
+      <ItemDeviceWrapper
+        device={sensor}
+        unit={unit}
+        station={station}
+        wrapStyle={wrapStyle}
       >
-        <View
-          style={[styles.container, wrapStyle, { borderColor }]}
-          accessibilityLabel={AccessibilityLabel.SUB_UNIT_DEVICES}
-        >
-          <View style={styles.boxIcon}>
-            <TouchableOpacity onPress={goToSensorDisplay}>
-              <IconComponent icon={sensor?.icon_kit || sensor?.icon} />
-            </TouchableOpacity>
-            {canRenderQuickAction && (
-              <ItemQuickAction sensor={sensor} unit={unit} />
-            )}
-          </View>
+        <View style={styles.boxIcon}>
           <TouchableOpacity onPress={goToSensorDisplay}>
+            <IconComponent icon={sensor?.icon_kit || sensor?.icon} />
+          </TouchableOpacity>
+          {!!canRenderQuickAction && (
+            <ItemQuickAction sensor={sensor} unit={unit} />
+          )}
+        </View>
+        <TouchableOpacity onPress={goToSensorDisplay}>
+          <Text
+            numberOfLines={1}
+            semibold
+            size={14}
+            color={Colors.Gray9}
+            style={styles.lineHeight22}
+          >
+            {title}
+          </Text>
+          <View style={styles.descriptionContainer}>
             <Text
               numberOfLines={1}
               semibold
-              size={14}
-              color={Colors.Gray9}
-              style={styles.lineHeight22}
+              size={12}
+              color={Colors.Gray8}
+              style={styles.lineHeight20}
             >
-              {title}
+              {description || textConnected}
             </Text>
-            <View style={styles.descriptionContainer}>
-              <Text
-                numberOfLines={1}
-                semibold
-                size={12}
-                color={Colors.Gray8}
-                style={styles.lineHeight20}
-              >
-                {description || textConnected}
-              </Text>
-              <IconOutline name="right" size={12} />
-            </View>
-          </TouchableOpacity>
-        </View>
-      </TouchableWithoutFeedback>
+            <IconOutline name="right" size={12} />
+          </View>
+        </TouchableOpacity>
+      </ItemDeviceWrapper>
     );
   }
 );
@@ -171,27 +151,9 @@ const ItemDevice = memo(
 export default ItemDevice;
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 12,
-    borderRadius: 10,
-    shadowColor: Colors.Shadow,
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 3,
-    elevation: 4,
-    width: DEVICE_SIZE.width,
-    height: DEVICE_SIZE.height,
-    backgroundColor: Colors.White,
-    justifyContent: 'space-between',
-    marginBottom: 8,
-    borderWidth: 1,
-  },
   boxIcon: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    flex: 1,
   },
   descriptionContainer: {
     flexDirection: 'row',

package/src/commons/Device/ItemDeviceWrapper.js

@@ -0,0 +1,109 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import Routes from '../../utils/Route';
+import { useNavigation } from '@react-navigation/native';
+
+import {
+  useBluetoothDeviceConnected,
+  useEoHBackendDeviceConnected,
+  useHomeAssistantDeviceConnected,
+} from '../../hooks/IoT';
+
+import { Colors } from '../../configs';
+import {
+  AccessibilityLabel,
+  DEVICE_SIZE,
+  DEVICE_TYPE,
+} from '../../configs/Constants';
+
+const ItemDeviceWrapper = memo(
+  ({ device, unit, station, wrapStyle, children }) => {
+    const navigation = useNavigation();
+
+    const {
+      isConnected: isEoHBackendConnected,
+      isFetchingStatus: isFetchingStatusFromEoHBackend,
+    } = useEoHBackendDeviceConnected(device);
+
+    const {
+      isConnected: isHomeAssistantConnected,
+      isConnecting: isHomeAssistantConnecting,
+    } = useHomeAssistantDeviceConnected(device);
+
+    const { isConnected: isBluetoothConnected } =
+      useBluetoothDeviceConnected(device);
+
+    const goToSensorDisplay = useCallback(() => {
+      navigation.navigate(Routes.DeviceDetail, {
+        unitData: unit,
+        station,
+        sensorData: device,
+        title: device.name,
+      });
+    }, [navigation, device, station, unit]);
+
+    const borderColor = useMemo(() => {
+      if (!!device && device?.is_managed_by_backend) {
+        if (device?.device_type === DEVICE_TYPE.LG_THINQ) {
+          return Colors.Gray4;
+        }
+        if (isBluetoothConnected) {
+          return Colors.Gray4;
+        }
+        if (isFetchingStatusFromEoHBackend || isEoHBackendConnected) {
+          return Colors.Gray4;
+        }
+        return Colors.Red6;
+      }
+      // not managed by backend
+      if (device?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
+        if (isHomeAssistantConnecting || isHomeAssistantConnected) {
+          return Colors.Gray4;
+        }
+      }
+      return Colors.Red6;
+    }, [
+      isBluetoothConnected,
+      isEoHBackendConnected,
+      isFetchingStatusFromEoHBackend,
+      isHomeAssistantConnected,
+      isHomeAssistantConnecting,
+      device,
+    ]);
+
+    return (
+      <TouchableWithoutFeedback
+        onPress={goToSensorDisplay}
+        accessibilityLabel={`${AccessibilityLabel.SENSOR_NAME}-${device?.id}`}
+      >
+        <View
+          style={[styles.container, wrapStyle, { borderColor }]}
+          accessibilityLabel={AccessibilityLabel.SUB_UNIT_DEVICES}
+        >
+          {children}
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+);
+
+export default ItemDeviceWrapper;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 4,
+    width: DEVICE_SIZE.width,
+    backgroundColor: Colors.White,
+    marginBottom: 8,
+    borderWidth: 1,
+  },
+});

package/src/commons/Device/LastUpdatedText.js

@@ -0,0 +1,31 @@
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { timeDifference } from '../../utils/Converter/time';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import React, { memo } from 'react';
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  txtLastUpdate: {
+    marginLeft: 8,
+    lineHeight: 20,
+    marginTop: 8,
+  },
+});
+
+const LastUpdatedText = memo(({ lastUpdated, showText }) => {
+  const t = useTranslations();
+
+  const lastUpdatedStr = lastUpdated
+    ? timeDifference(new Date(), lastUpdated)
+    : `5 ${t('seconds_ago')}`;
+  return (
+    <Text color={Colors.Gray7} size={12} style={styles.txtLastUpdate}>
+      {!!showText && t('last_updated')}
+      {!!showText && ' '}
+      {lastUpdatedStr}
+    </Text>
+  );
+});
+
+export default LastUpdatedText;

package/src/commons/Device/__test__/ConnectedViewHeader.test.js

@@ -28,7 +28,11 @@ describe('Test ConnectedViewHeader', () => {
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts[0].props.children).toEqual(t('connected_via_internet'));
-    expect(texts[1].props.children).toEqual(t('last_updated') + ' 2 years ago');
+    expect(texts[1].props.children).toEqual([
+      t('last_updated'),
+      ' ',
+      '2 years ago',
+    ]);
   });
 
   it('render ConnectedViewHeader no last updated', async () => {
@@ -37,8 +41,10 @@ describe('Test ConnectedViewHeader', () => {
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
-    expect(texts[1].props.children).toEqual(
-      t('last_updated') + ' 5 seconds ago'
-    );
+    expect(texts[1].props.children).toEqual([
+      t('last_updated'),
+      ' ',
+      '5 seconds ago',
+    ]);
   });
 });

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

@@ -0,0 +1,46 @@
+import React, { memo } from 'react';
+import styles from '../styles/ConfigValueStyles';
+import { View } from 'react-native';
+import Text from '../../../Text';
+import LastUpdatedText from '../../../Device/LastUpdatedText';
+import { EvaluationConfigWrapper } from '../EvaluationOverConfig/EvaluationOverConfig';
+
+const ConfigAndEvaluationDisplay = memo(
+  ({ valueEvaluation, stationItem, configValue }) => {
+    return (
+      <>
+        <View>
+          <View style={styles.rowTop}>
+            <Text type="H4" bold>
+              {stationItem?.configuration?.config_data?.name}
+            </Text>
+          </View>
+          <Text type="Body" color={valueEvaluation?.color}>
+            {valueEvaluation?.text}
+          </Text>
+        </View>
+        <View style={styles.rowBottom}>
+          <Text style={styles.textValue} bold>
+            {configValue?.value || '-'}
+          </Text>
+          <Text type="H4">{stationItem?.configuration?.config_data?.unit}</Text>
+        </View>
+        {configValue?.last_updated && (
+          <LastUpdatedText lastUpdated={configValue?.last_updated} />
+        )}
+      </>
+    );
+  }
+);
+
+const ConfigAndEvaluation = memo(({ device, stationItem }) => {
+  return (
+    <EvaluationConfigWrapper
+      device={device}
+      stationItem={stationItem}
+      Child={ConfigAndEvaluationDisplay}
+    />
+  );
+});
+
+export default ConfigAndEvaluation;

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

@@ -0,0 +1,12 @@
+import ConfigAndEvaluation from './ConfigAndEvaluation';
+import { registerTemplate } from '../register';
+
+const isWidget = (item) => {
+  return item.template === 'ConfigAndEvaluation';
+};
+
+const isSettingValid = (configuration) => {
+  return configuration.config && configuration.evaluation;
+};
+
+registerTemplate(isWidget, isSettingValid, ConfigAndEvaluation, {});

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

@@ -0,0 +1,41 @@
+import React, { memo, useMemo } from 'react';
+import styles from '../styles/ConfigValueStyles';
+import { View } from 'react-native';
+import Text from '../../../Text';
+import { useConfigGlobalState } from '../../../../iot/states';
+import { useWatchConfigs } from '../../../../hooks/IoT';
+import LastUpdatedText from '../../../Device/LastUpdatedText';
+
+const ConfigValue = ({ device, stationItem }) => {
+  // eslint-disable-next-line no-unused-vars
+  const [configValues, _] = useConfigGlobalState('configValues');
+  const configValue = configValues[stationItem.configuration?.config];
+  const configIds = useMemo(() => {
+    return [stationItem.configuration?.config];
+  }, [stationItem.configuration?.config]);
+
+  useWatchConfigs(configIds);
+
+  return (
+    <>
+      <View>
+        <View style={styles.rowTop}>
+          <Text type="H4" bold>
+            {stationItem?.configuration?.config_data?.name}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.rowBottom}>
+        <Text style={styles.textValue} bold>
+          {configValue?.value || '-'}
+        </Text>
+        <Text type="H4">{stationItem?.configuration?.config_data?.unit}</Text>
+      </View>
+      {configValue?.last_updated && (
+        <LastUpdatedText lastUpdated={configValue?.last_updated} />
+      )}
+    </>
+  );
+};
+
+export default memo(ConfigValue);

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

@@ -0,0 +1,12 @@
+import ConfigValue from './ConfigValue';
+import { registerTemplate } from '../register';
+
+const isWidget = (item) => {
+  return item.template === 'ConfigValue';
+};
+
+const isSettingValid = (configuration) => {
+  return configuration.config;
+};
+
+registerTemplate(isWidget, isSettingValid, ConfigValue, {});

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

@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+import { getTemplate } from './';
+import ItemDeviceWrapper from '../../Device/ItemDeviceWrapper';
+
+export const DeviceTemplate = memo(
+  ({ device, stationItem, unit, station, index }) => {
+    const Template = getTemplate(stationItem);
+    if (!Template) {
+      return null;
+    }
+    return (
+      <ItemDeviceWrapper device={device} unit={unit} station={station}>
+        <Template.Display
+          device={device}
+          stationItem={stationItem}
+          index={index}
+        />
+      </ItemDeviceWrapper>
+    );
+  }
+);

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

@@ -0,0 +1,79 @@
+import React, { memo, useMemo } from 'react';
+import styles from '../styles/ConfigValueStyles';
+import { View } from 'react-native';
+import Text from '../../../Text';
+import { useConfigGlobalState } from '../../../../iot/states';
+import {
+  useEvaluateValue,
+  useValueEvaluation,
+} from '../../../../screens/Device/hooks/useEvaluateValue';
+import { useWatchConfigs } from '../../../../hooks/IoT';
+import LastUpdatedText from '../../../Device/LastUpdatedText';
+
+export const EvaluationConfigWrapper = memo(
+  ({ device, stationItem, Child }) => {
+    // eslint-disable-next-line no-unused-vars
+    const [configValues, _] = useConfigGlobalState('configValues');
+    const configValue = configValues[stationItem.configuration?.config];
+    const configIds = useMemo(() => {
+      return [stationItem.configuration?.config];
+    }, [stationItem.configuration?.config]);
+
+    useWatchConfigs(configIds);
+
+    const valueEvaluationObject = useValueEvaluation(
+      stationItem.configuration?.config,
+      device.unit_id,
+      stationItem.configuration?.evaluation
+    );
+
+    const valueEvaluation = useEvaluateValue()(
+      configValue?.value,
+      valueEvaluationObject
+    );
+
+    return (
+      <Child
+        valueEvaluation={valueEvaluation}
+        stationItem={stationItem}
+        configValue={configValue}
+      />
+    );
+  }
+);
+
+const EvaluationOverConfigDisplay = memo(
+  ({ valueEvaluation, stationItem, configValue }) => {
+    return (
+      <>
+        <View>
+          <View style={styles.rowTop}>
+            <Text type="H4" bold>
+              {stationItem?.configuration?.config_data?.name}
+            </Text>
+          </View>
+        </View>
+        <View style={styles.rowBottom}>
+          <Text style={styles.textValue} bold color={valueEvaluation?.color}>
+            {valueEvaluation?.text}
+          </Text>
+        </View>
+        {configValue?.last_updated && (
+          <LastUpdatedText lastUpdated={configValue?.last_updated} />
+        )}
+      </>
+    );
+  }
+);
+
+const EvaluationOverConfig = memo(({ device, stationItem }) => {
+  return (
+    <EvaluationConfigWrapper
+      device={device}
+      stationItem={stationItem}
+      Child={EvaluationOverConfigDisplay}
+    />
+  );
+});
+
+export default EvaluationOverConfig;

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

@@ -0,0 +1,12 @@
+import EvaluationOverConfig from './EvaluationOverConfig';
+import { registerTemplate } from '../register';
+
+const isWidget = (item) => {
+  return item.template === 'EvaluationOverConfig';
+};
+
+const isSettingValid = (configuration) => {
+  return configuration.config && configuration.evaluation;
+};
+
+registerTemplate(isWidget, isSettingValid, EvaluationOverConfig, {});

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

@@ -0,0 +1,9 @@
+import { DeviceItemTemplates } from './register';
+
+export * from './ConfigAndEvaluation';
+export * from './ConfigValue';
+export * from './EvaluationOverConfig';
+
+export const getTemplate = (item) => {
+  return DeviceItemTemplates.find((w) => w.detect(item));
+};

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

@@ -0,0 +1,14 @@
+export const DeviceItemTemplates = [];
+export const registerTemplate = (
+  isWidget,
+  isSettingValid,
+  DisplayComponent,
+  defaultConfiguration
+) => {
+  DeviceItemTemplates.push({
+    detect: isWidget,
+    isSettingValid: isSettingValid,
+    Display: DisplayComponent,
+    defaultConfiguration,
+  });
+};

package/src/commons/SubUnit/DeviceTemplate/styles/ConfigValueStyles.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  rowTop: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  rowBottom: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  batteryStatus: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  textValue: {
+    fontSize: 28,
+    lineHeight: 32,
+    marginRight: 8,
+  },
+});

package/src/commons/SubUnit/ShortDetail.js

@@ -16,6 +16,7 @@ import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
 import FastImage from 'react-native-fast-image';
 import MediaPlayerDetail from '../MediaPlayerDetail';
+import { DeviceTemplate } from './DeviceTemplate/DeviceTemplate';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -25,15 +26,12 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
 
-  useDevicesStatus(unit, station?.sensors);
+  useDevicesStatus(unit, station?.devices);
 
   const configsNeedWatching = useMemo(() => {
     const configIds = [];
-    (station?.sensors || []).forEach((device) => {
-      if (
-        device?.quick_action?.config_id &&
-        device?.device_type !== DEVICE_TYPE.GOOGLE_HOME
-      ) {
+    (station?.devices || []).forEach((device) => {
+      if (device?.quick_action?.config_id && device?.is_managed_by_backend) {
         configIds.push(device.quick_action.config_id);
       }
     });
@@ -108,51 +106,79 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
     });
   };
 
+  const renderSubUnitItem = (device, stationItem, index) => {
+    return (
+      <DeviceTemplate
+        device={device}
+        stationItem={stationItem}
+        index={index}
+        key={index}
+        unit={unit}
+        station={station}
+      />
+    );
+  };
+
+  const renderDeviceList = () => {
+    if (!station.devices) {
+      return [];
+    }
+
+    return station.devices
+      .map((device, index) => {
+        const displays = [];
+        if (device.device_type === DEVICE_TYPE.HANET) {
+          displays.push(
+            <ItemHanetDevice
+              key={`sensor-${device.id}`}
+              id={device.id}
+              svgMain={device.icon || 'sensor'}
+              title={device.name}
+              index={index}
+              sensor={device}
+              unit={unit}
+              station={station}
+            />
+          );
+        } else {
+          displays.push(
+            <ItemDevice
+              key={`sensor-${device.id}`}
+              id={device.id}
+              svgMain={device.icon || 'sensor'}
+              statusIcon={device.action && device.action.icon}
+              statusColor={device.action && device.action.color}
+              description={device.value}
+              title={device.name}
+              index={index}
+              sensor={device}
+              unit={unit}
+              station={station}
+            />
+          );
+        }
+        if (device.station_items) {
+          displays.push(
+            ...device.station_items.map(renderSubUnitItem.bind(device, device))
+          );
+        }
+        return displays;
+      })
+      .flat();
+  };
+
   return (
     <Section style={styles.noShadow}>
       {renderCamera()}
 
-      {!!station?.sensors?.length && (
+      {!!station?.devices?.length && (
         <Text type={'H4'} semibold style={styles.device}>{`${t('device')} (${
-          station?.sensors?.length
+          station?.devices?.length
         })`}</Text>
       )}
 
       <View style={styles.boxDevices}>
-        {!!station.sensors &&
-          station.sensors.map((sensor, index) => {
-            switch (sensor.device_type) {
-              case DEVICE_TYPE.HANET:
-                return (
-                  <ItemHanetDevice
-                    key={`sensor-${sensor.id}`}
-                    id={sensor.id}
-                    svgMain={sensor.icon || 'sensor'}
-                    title={sensor.name}
-                    index={index}
-                    sensor={sensor}
-                    unit={unit}
-                    station={station}
-                  />
-                );
-              default:
-                return (
-                  <ItemDevice
-                    key={`sensor-${sensor.id}`}
-                    id={sensor.id}
-                    svgMain={sensor.icon || 'sensor'}
-                    statusIcon={sensor.action && sensor.action.icon}
-                    statusColor={sensor.action && sensor.action.color}
-                    description={sensor.value}
-                    title={sensor.name}
-                    index={index}
-                    sensor={sensor}
-                    unit={unit}
-                    station={station}
-                  />
-                );
-            }
-          })}
+        {renderDeviceList()}
         {isOwner && (
           <ItemAddNew title={t('add_new_device')} onAddNew={handleOnAddNew} />
         )}

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -9,6 +9,12 @@ import ShortDetailSubUnit from '../ShortDetail';
 import ItemAddNew from '../../Device/ItemAddNew';
 import Routes from '../../../utils/Route';
 import { keyPermission } from '../../../utils/Permission/common';
+import ItemDevice from '../../Device/ItemDevice';
+import { DeviceTemplate } from '../DeviceTemplate/DeviceTemplate';
+import ItemHanetDevice from '../../Device/Hanet/ItemHanetDevice';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+
+jest.mock('../../../iot/Monitor');
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -28,7 +34,7 @@ jest.mock('@react-navigation/native', () => {
       navigate: mockedNavigate,
     }),
     useIsFocused: () => true,
-    useFocusEffect: jest.fn(),
+    useFocusEffect: jest.fn((handler) => handler()),
   };
 });
 
@@ -53,7 +59,7 @@ describe('test ShortDetail Subunit', () => {
             camera: null,
             id: 71,
             name: 'Station 1',
-            sensors: [],
+            devices: [],
           },
         ],
         user_id: 64,
@@ -120,7 +126,7 @@ describe('test ShortDetail Subunit', () => {
   });
 
   it('render ShortDetail with device', async () => {
-    props.station.sensors = [
+    props.station.devices = [
       {
         action: {
           color: '#00979D',
@@ -146,12 +152,110 @@ describe('test ShortDetail Subunit', () => {
       tree = await create(wrapComponent(props));
     });
     const instance = tree.root;
-    const itemDevice = instance.findAll(
-      (item) =>
-        item.props.accessibilityLabel === AccessibilityLabel.SUB_UNIT_DEVICES &&
-        item.type === View
-    );
-    expect(itemDevice.length).toBe(0);
+    const itemDevices = instance.findAllByType(ItemDevice);
+    expect(itemDevices.length).toBe(1);
+  });
+
+  it('render watch config if managed by backend', async () => {
+    props.station.devices = [
+      {
+        action: {
+          color: '#00979D',
+          icon: 'caret-up',
+          id: 1,
+          key: '',
+        },
+        action2: null,
+        chip_id: 1,
+        description: null,
+        icon: '',
+        id: 1,
+        name: 'People Counting',
+        quick_action: { config_id: 1 },
+        remote_control_options: {},
+        station: {},
+        status: null,
+        status2: null,
+        is_managed_by_backend: true,
+      },
+    ];
+
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    expect(watchMultiConfigs).toBeCalledWith([1]);
+  });
+
+  ['ConfigAndEvaluation', 'ConfigValue', 'EvaluationOverConfig'].forEach(
+    (template) => {
+      it(`render with device template ${template}`, async () => {
+        props.station.devices = [
+          {
+            action: {
+              color: '#00979D',
+              icon: 'caret-up',
+              id: 1,
+              key: '',
+            },
+            action2: null,
+            chip_id: 1,
+            description: null,
+            icon: '',
+            id: 1,
+            name: 'People Counting',
+            quick_action: null,
+            remote_control_options: {},
+            station: {},
+            status: null,
+            status2: null,
+            station_items: [
+              {
+                template: template,
+              },
+            ],
+          },
+        ];
+
+        await act(async () => {
+          tree = await create(wrapComponent(props));
+        });
+        const instance = tree.root;
+        const itemDevices = instance.findAllByType(DeviceTemplate);
+        expect(itemDevices.length).toBe(1);
+      });
+    }
+  );
+
+  it('render with device hanet', async () => {
+    props.station.devices = [
+      {
+        device_type: 'HANET',
+        action: {
+          color: '#00979D',
+          icon: 'caret-up',
+          id: 1,
+          key: '',
+        },
+        action2: null,
+        chip_id: 1,
+        description: null,
+        icon: '',
+        id: 1,
+        name: 'People Counting',
+        quick_action: null,
+        remote_control_options: {},
+        station: {},
+        status: null,
+        status2: null,
+      },
+    ];
+
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const itemDevices = instance.findAllByType(ItemHanetDevice);
+    expect(itemDevices.length).toBe(1);
   });
 
   it('render ShortDetail add new device', async () => {

package/src/screens/Device/__test__/detail.test.js

@@ -628,12 +628,8 @@ describe('test DeviceDetail', () => {
     await act(async () => {
       tree = await create(wrapComponent(store, account, route));
     });
-    const instance = tree.root;
-    const sensorDisplayItem = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel === AccessibilityLabel.SENSOR_DISPLAY_ITEM
-    );
-    expect(sensorDisplayItem).toHaveLength(0);
+    const urls = mock.history.get.map((x) => x.url);
+    expect(urls).not.toContain(API.DEVICE.DISPLAY_VALUES_V2(1));
   });
 
   it('HeaderDevice button more onClick', async () => {

package/src/screens/Device/components/SensorConnectStatusViewHeader.js

@@ -30,68 +30,72 @@ export const SensorConnectStatusViewHeader = ({
     return <></>;
   }
 
-  if (!!sensor && sensor?.is_managed_by_backend) {
-    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-      return (
-        <>
-          <ConnectedViewHeader lastUpdated={lastUpdated} />
-          {children}
-        </>
-      );
-    }
-    if (connectedViaNetwork) {
-      return (
-        <>
-          <ConnectedViewHeader
-            lastUpdated={lastUpdated}
-            isDisplayTime={isDisplayTime}
-            showWindDirection={showWindDirection}
-          />
-          {children}
-        </>
-      );
-    } else if (connectedViaBle) {
-      return (
-        <>
-          <ConnectedViewHeader
-            lastUpdated={lastUpdated}
-            type={'Bluetooth'}
-            isDisplayTime={isDisplayTime}
-            showWindDirection={showWindDirection}
-          />
-          {children}
-        </>
-      );
-    } else {
-      return (
-        <DisconnectedView sensor={sensor} isDeviceHasBle={isDeviceHasBle} />
-      );
-    }
-  } else {
-    // not managed by backend
-    if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
-      if (connectedViaHomeAssistant) {
+  const header = () => {
+    if (!!sensor && sensor?.is_managed_by_backend) {
+      if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+        return (
+          <>
+            <ConnectedViewHeader lastUpdated={lastUpdated} />
+          </>
+        );
+      }
+      if (connectedViaNetwork) {
         return (
           <>
             <ConnectedViewHeader
               lastUpdated={lastUpdated}
               isDisplayTime={isDisplayTime}
-              type={'HomeAssistant'}
+              showWindDirection={showWindDirection}
+            />
+          </>
+        );
+      } else if (connectedViaBle) {
+        return (
+          <>
+            <ConnectedViewHeader
+              lastUpdated={lastUpdated}
+              type={'Bluetooth'}
+              isDisplayTime={isDisplayTime}
+              showWindDirection={showWindDirection}
             />
-            {children}
           </>
         );
       } else {
         return (
-          <DisconnectedView
-            sensor={sensor}
-            type={'HomeAssistant'}
-            isDeviceHasBle={isDeviceHasBle}
-          />
+          <DisconnectedView sensor={sensor} isDeviceHasBle={isDeviceHasBle} />
         );
       }
     } else {
-      return <DisconnectedView sensor={sensor} />;
+      // not managed by backend
+      if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
+        if (connectedViaHomeAssistant) {
+          return (
+            <>
+              <ConnectedViewHeader
+                lastUpdated={lastUpdated}
+                isDisplayTime={isDisplayTime}
+                type={'HomeAssistant'}
+              />
+            </>
+          );
+        } else {
+          return (
+            <DisconnectedView
+              sensor={sensor}
+              type={'HomeAssistant'}
+              isDeviceHasBle={isDeviceHasBle}
+            />
+          );
+        }
+      } else {
+        return <DisconnectedView sensor={sensor} />;
+      }
     }
-  }
+  };
+  return (
+    <>
+      {header()}
+      {children}
+    </>
+  );
 };

package/src/screens/Device/hooks/useEvaluateValue.js

@@ -146,3 +146,8 @@ export const useGetEvaluateValue = (configId, unitId) => {
 
   return valueEvaluations[configId];
 };
+
+export const useValueEvaluation = (configId, unitId, valueEvaluationId) => {
+  const valueEvaluations = useGetEvaluateValue(configId, unitId);
+  return valueEvaluations?.find((v) => v.id === valueEvaluationId);
+};

package/src/screens/Sharing/Components/__test__/DeviceItem.test.js

@@ -20,8 +20,8 @@ const wrapComponent = (item) => (
   </SCProvider>
 );
 
-describe('test DeviceItem', () => {
-  it('test DeviceItem', async () => {
+describe('test DeviceTemplate', () => {
+  it('test DeviceTemplate', async () => {
     const item = {
       id: 1,
       name: 'abc',

package/src/screens/SmartAccount/ListDevice/__test__/DeviceItem.test.js

@@ -11,7 +11,7 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-it('test DeviceItem', async () => {
+it('test DeviceTemplate', async () => {
   let tree;
   let props = {
     icon: '',

package/src/utils/Converter/time.js

@@ -8,6 +8,10 @@ export const timeDifference = (current, previous, symbol = false) => {
   let msPerMonth = msPerDay * 30;
   let msPerYear = msPerDay * 365;
 
+  if (typeof previous === 'string') {
+    previous = moment(previous).toDate();
+  }
+
   let elapsed = current - previous;
 
   if (elapsed < msPerMinute) {

package/src/utils/Permission/common.js

@@ -56,7 +56,9 @@ export const keyPermission = {
     : PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
   CAMERA: isAndroid ? PERMISSIONS.ANDROID.CAMERA : PERMISSIONS.IOS.CAMERA,
   SELECT_PHOTO: isAndroid
-    ? PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE
+    ? Platform.Version >= 33
+      ? PERMISSIONS.ANDROID.READ_MEDIA_IMAGES
+      : PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE
     : PERMISSIONS.IOS.PHOTO_LIBRARY,
 };