@eohjsc/react-native-smart-city 0.6.0-rc2 → 0.6.0-rc4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.6.0-rc2",
+  "version": "0.6.0-rc4",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlay.js

@@ -21,7 +21,7 @@ const ControlPlay = memo(
         >
           <AntDesign
             size={32}
-            name={'backward'}
+            name={'stepbackward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />
@@ -44,7 +44,7 @@ const ControlPlay = memo(
         >
           <AntDesign
             size={32}
-            name={'forward'}
+            name={'stepforward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />

package/src/commons/Device/DisconnectedView.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -57,7 +57,7 @@ const DisconnectedView = memo(({ sensor, type, isDeviceHasBle }) => {
       </View>
       <View style={styles.disconnectSuggestionContainer} testID={'suggestions'}>
         <View style={styles.row}>
-          <AntDesign name={'alert'} size={16} />
+          <MaterialCommunityIcons name={'alert-circle-outline'} size={16} />
           <Text bold style={styles.boldText}>
             {t('suggestions')}:
           </Text>

package/src/commons/EmergencyButton/AlertSendConfirm.js

@@ -29,7 +29,7 @@ const AlertSendConfirm = ({
       bodyStyle={styles.buttonPopupBody}
     >
       <View style={styles.firstInfo}>
-        <AntDesign name="clock-circle" size={42} style={styles.clock} />
+        <AntDesign name="clockcircleo" size={42} style={styles.clock} />
         <Text semibold type="H4" style={styles.textAlertWillBe}>
           {t('alert_will_be_sent_in')}
         </Text>

package/src/commons/EmergencyButton/AlertSent.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { ButtonPopup } from '../index';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -59,7 +59,11 @@ const AlertSent = ({
         type="H5"
         style={styles.location}
       >{`${unit?.name} - ${station?.name}`}</Text>
-      <AntDesign name="alert" size={42} style={styles.alert} />
+      <MaterialCommunityIcons
+        name="alert-circle-outline"
+        size={42}
+        style={styles.alert}
+      />
       <Text semibold style={styles.textAlertSent}>
         {data.title}
       </Text>

package/src/commons/Header/HeaderCustom.js

@@ -3,6 +3,7 @@ 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 MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -98,7 +99,11 @@ const HeaderCustom = ({
               accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE}
             >
               <View style={styles.buttonBack}>
-                <AntDesign name={'more'} size={27} color={Colors.Black} />
+                <MaterialIcons
+                  name={'more-vert'}
+                  size={27}
+                  color={Colors.Black}
+                />
               </View>
             </TouchableOpacity>
           </>

package/src/commons/SearchLocation/index.js

@@ -11,7 +11,7 @@ const SearchBarLocation = memo(({ input, onTextInput }) => {
   return (
     <View style={styles.container}>
       <AntDesign
-        name="search"
+        name="search1"
         size={24}
         color={Colors.Gray6}
         accessibilityLabel="icon-search"

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, Image } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { Colors, Images } from '../../../configs';
 import Text from '../../Text';
@@ -27,8 +27,8 @@ const SubUnitCard = ({ onPressItem, devices, name, id }) => {
           </Text>
           <Text style={[styles.subText]}>{devices + ' devices'}</Text>
         </View>
-        <AntDesign
-          name="more"
+        <MaterialIcons
+          name="more-vert"
           color={Colors.White}
           size={24}
           onPress={() => {}}

package/src/commons/SummaryItem/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import styles from './styles';
 import { Colors } from '../../configs';
@@ -11,38 +11,37 @@ import WaterQuality from '../../../assets/images/WaterQuality.svg';
 import Device from '../../../assets/images/Device.svg';
 import { AccessibilityLabel } from '../../configs/Constants';
 
+const iconMap = {
+  air_quality: AirQuality,
+  water_quality: WaterQuality,
+  temperature: Temperature,
+  uv_index: UVIndex,
+  three_phase_power_consumption: PowerMeter,
+  power_consumption: PowerMeter,
+  default: Device,
+};
+
 const SummaryItem = memo(({ item, goToSummary }) => {
-  const Icon = (() => {
-    switch (item.template) {
-      case 'air_quality':
-        return AirQuality; /* istanbul ignore next */
-      case 'water_quality':
-        return WaterQuality; /* istanbul ignore next */
-      case 'temperature':
-        return Temperature; /* istanbul ignore next */
-      case 'uv_index':
-        return UVIndex; /* istanbul ignore next */
-      case 'three_phase_power_consumption':
-        return PowerMeter; /* istanbul ignore next */
-      case 'power_consumption':
-        return PowerMeter; /* istanbul ignore next */
-      default:
-        return Device; /* istanbul ignore next */
-    }
-  })();
+  const { template, left_text, left_value, id } = item;
+  const Icon = useMemo(() => iconMap[template] || iconMap.default, [template]);
+
+  const handlePress = useCallback(() => {
+    goToSummary(item);
+  }, [goToSummary, item]);
+
   return (
     <TouchableOpacity
-      onPress={() => goToSummary(item)}
+      onPress={handlePress}
       style={styles.wrapSummaryItem}
-      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${item?.id}`}
+      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${id}`}
     >
       <View style={styles.summaryItem}>
         <Icon />
         <Text type="Body" color={Colors.Gray7} style={styles.summaryText}>
-          {item.left_text}
+          {left_text}
         </Text>
         <Text color={Colors.Gray9} bold>
-          {item.left_value}
+          {left_value}
         </Text>
       </View>
       <View style={styles.dashItem} />

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

@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useRef } from 'react';
 import { View, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
@@ -84,8 +85,8 @@ const HeaderUnit = memo(
               accessibilityLabel={idButtonMore}
             >
               <View style={styles.btnMore}>
-                <AntDesign
-                  name={'more'}
+                <MaterialIcons
+                  name={'more-vert'}
                   size={27}
                   color={transparent ? Colors.White : Colors.Black}
                 />

package/src/commons/Unit/SharedUnit.js

@@ -100,7 +100,7 @@ const SharedUnit = ({
               />
             ) : (
               <AntDesign
-                name="pushpin"
+                name="pushpino"
                 size={20}
                 onPress={addPinSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
@@ -116,7 +116,7 @@ const SharedUnit = ({
               />
             ) : (
               <AntDesign
-                name="star"
+                name="staro"
                 size={20}
                 onPress={addStarSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}

package/src/configs/API.js

@@ -195,8 +195,7 @@ const API = {
     },
   },
   NOTIFICATION: {
-    LIST_EOH_NOTIFICATIONS: (page, type) =>
-      `/notifications/eoh/?page=${page}&type=${type}`,
+    LIST_EOH_NOTIFICATIONS: (page) => `/notifications/eoh/?page=${page}`,
     SET_READ: (id) => `/notifications/eoh/${id}/set_read/`,
   },
   VALUE_EVALUATIONS: () => '/property_manager/config_value_evaluations/',

package/src/navigations/AutomateStack.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useContext } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/core';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { SCContext } from '../context';
 import { Action } from '../context/actionType';
 
@@ -44,7 +44,7 @@ const AutomateStack = memo(() => {
         title: t('smart'),
         headerLeft: () => (
           <TouchableOpacity style={Theme.menuIcon} onPress={toggleDrawer}>
-            <AntDesign name={'menu'} color={Colors.Black} />
+            <MaterialIcons name={'menu'} color={Colors.Black} size={27} />
           </TouchableOpacity>
         ),
         headerTitleAlign: 'left',

package/src/navigations/SharedStack.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useTranslations } from '../hooks/Common/useTranslations';
 
 import Shared from '../screens/SharedUnit';
@@ -15,6 +15,7 @@ const SharedStack = memo(() => {
   const t = useTranslations();
   const { toggleDrawer, goBack } = useNavigation();
   const { params } = useRoute();
+  const { isMainSource } = params;
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -26,11 +27,12 @@ const SharedStack = memo(() => {
           headerLeft: () => (
             <TouchableOpacity
               style={styles.btnMenu}
-              onPress={() => (params?.isMainSource ? toggleDrawer() : goBack())}
+              onPress={() => (isMainSource ? toggleDrawer() : goBack())}
             >
-              <AntDesign
-                name={params?.isMainSource ? 'menu' : 'arrow-left'}
+              <MaterialIcons
+                name={isMainSource ? 'menu' : 'chevron-left'}
                 color={Colors.Black}
+                size={27}
               />
             </TouchableOpacity>
           ),

package/src/screens/AddLocationMaps/index.js

@@ -3,6 +3,7 @@ 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 MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { check, RESULTS } from 'react-native-permissions';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -204,7 +205,11 @@ const AddLocationMaps = memo(() => {
                   style={styles.button}
                   accessibilityLabel={AccessibilityLabel.BUTTON_YOUR_LOCATION}
                 >
-                  <AntDesign name="aim" size={27} color={Colors.Primary} />
+                  <MaterialIcons
+                    name="my-location"
+                    size={27}
+                    color={Colors.Primary}
+                  />
                   <Text
                     type="Body"
                     color={Colors.Gray9}
@@ -221,7 +226,7 @@ const AddLocationMaps = memo(() => {
                   accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
                 >
                   <AntDesign
-                    name="environment"
+                    name="enviroment"
                     size={27}
                     color={Colors.Primary}
                   />
@@ -270,7 +275,7 @@ const AddLocationMaps = memo(() => {
                   tracksViewChanges={false}
                 >
                   <AntDesign
-                    name="environment"
+                    name="enviroment"
                     size={27}
                     color={Colors.Blue10}
                   />

package/src/screens/Automate/ScriptDetail/index.js

@@ -8,6 +8,7 @@ import React, {
 import { Image, Platform, TouchableOpacity, View, Switch } from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import styles from './Styles/indexStyles';
@@ -191,7 +192,7 @@ const ScriptDetail = ({ route }) => {
           accessibilityLabel={AccessibilityLabel.ICON_MORE}
         >
           <View style={[styles.headerButton, styles.moreButton]}>
-            <AntDesign name={'more'} size={27} color={Colors.Black} />
+            <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
           </View>
         </TouchableOpacity>
       </View>
@@ -480,7 +481,7 @@ const ButtonStar = ({ automate }) => {
       {isStarred ? (
         <AntDesign name="star" size={25} color={Colors.Yellow6} />
       ) : (
-        <AntDesign name="star" size={25} />
+        <AntDesign name="staro" size={25} />
       )}
     </PreventDoubleTouch>
   );

package/src/screens/Automate/index.js

@@ -197,7 +197,7 @@ const Automate = () => {
       /* istanbul ignore next */
       headerRight: () => (
         <TouchableOpacity style={styles.buttonAdd}>
-          <AntDesign name={'plus-circle'} size={28} color={Colors.Orange} />
+          <AntDesign name={'pluscircle'} size={28} color={Colors.Orange} />
         </TouchableOpacity>
       ),
     });

package/src/screens/Device/detail.js

@@ -9,6 +9,7 @@ import React, {
 import { View, TouchableOpacity, Platform } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
 
 import { SCContext } from '../../context';
@@ -684,9 +685,9 @@ const DeviceDetail = ({ route }) => {
         >
           <View style={styles.buttonStar}>
             {isFavorite ? (
-              <AntDesign name="star" size={25} color={Colors.Yellow6} />
+              <AntDesign name="star" size={30} color={Colors.Yellow6} />
             ) : (
-              <AntDesign name="star" size={25} />
+              <AntDesign name="staro" size={30} />
             )}
           </View>
         </TouchableOpacity>
@@ -705,7 +706,7 @@ const DeviceDetail = ({ route }) => {
           ref={refMenuAction}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_MORE}
         >
-          <AntDesign name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/HanetCamera/Detail.js

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, FlatList, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
 import styles from './styles/detailStyles';
 import { HeaderCustom } from '../../commons/Header';
@@ -184,7 +184,11 @@ const HanetCameraDetail = ({ route }) => {
               onPress={handleShowMenuAction}
               ref={refMenuAction}
             >
-              <AntDesign name={'more'} size={27} color={Colors.Black} />
+              <MaterialIcons
+                name={'more-vert'}
+                size={27}
+                color={Colors.Black}
+              />
             </TouchableOpacity>
           </View>
         );

package/src/screens/Notification/__test__/Notification.test.js

@@ -73,9 +73,7 @@ describe('test Notification', () => {
         },
       ],
     };
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)).reply(200, response);
     await act(async () => {
       tree = await create(wrapComponent());
     });
@@ -101,9 +99,7 @@ describe('test Notification', () => {
         type: 'NEWS',
       });
     }
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)).reply(200, response);
     await act(async () => {
       tree = await create(wrapComponent());
     });
@@ -112,9 +108,7 @@ describe('test Notification', () => {
     expect(wrapHeaderScrollable.props.disableLoadMore).toEqual(false);
 
     const scrollView = instance.findByType(Animated.ScrollView);
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(2, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(2)).reply(200, response);
     await act(async () => {
       scrollView.props.onMomentumScrollEnd();
     });
@@ -144,9 +138,7 @@ describe('test Notification', () => {
         },
       ],
     };
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)).reply(200, response);
     await act(async () => {
       tree = await create(wrapComponent());
     });
@@ -179,9 +171,7 @@ describe('test Notification', () => {
         },
       ],
     };
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)).reply(200, response);
     await act(async () => {
       tree = await create(wrapComponent());
     });

package/src/screens/Notification/index.js

@@ -41,7 +41,7 @@ const Notification = memo(() => {
             notImplemented(t);
           }}
         >
-          <AntDesign name={'search'} size={27} color={Colors.Black} />
+          <AntDesign name={'search1'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),
@@ -51,7 +51,7 @@ const Notification = memo(() => {
 
   const fetchNotifications = useCallback(async (pageParam) => {
     const { success, data } = await axiosGet(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(pageParam, '')
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(pageParam)
     );
     if (success) {
       setNotifications((preState) => preState.concat(data.results));
@@ -69,7 +69,7 @@ const Notification = memo(() => {
   const onRefresh = useCallback(async () => {
     setPage(1);
     const { success, data } = await axiosGet(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, '')
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)
     );
     if (success) {
       setNotifications(data.results);

package/src/screens/SharedUnit/TabHeader.js

@@ -54,7 +54,7 @@ const TabHeader = ({ current, getCurrentTab, showModal, textFilter }) => {
           <Text style={styles.sortBy}>
             {t('sort_by') + ': '} {textFilter}
           </Text>
-          <AntDesign name="arrow-down" size={10} onPress={() => {}} />
+          <AntDesign name="arrowdown" size={10} />
         </TouchableOpacity>
       </View>
     </View>

package/src/screens/Sharing/UnitMemberList.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -81,11 +82,11 @@ const UnitMemberList = ({ route }) => {
       onPress={onPressRightHeader}
       style={styles.rightHeader}
     >
-      <AntDesign
-        name={isOwner ? 'plus' : 'more'}
-        size={30}
-        color={Colors.Black}
-      />
+      {isOwner ? (
+        <AntDesign name={'plus'} size={30} color={Colors.Black} />
+      ) : (
+        <MaterialIcons name={'more-vert'} size={30} color={Colors.Black} />
+      )}
     </TouchableOpacity>
   );
 

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -6,6 +6,7 @@ import SmartTiviActionTemplate from '../../../../commons/ActionGroup/SmartTiviAc
 import Text from '../../../../commons/Text';
 import { ModalCustom } from '../../../../commons/Modal';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { Colors } from '../../../../configs';
 import TextInput from '../../../../commons/Form/TextInput';
 import { ButtonsBottom } from './ButtonsBottom';
@@ -58,7 +59,7 @@ const GroupButtonByType = memo(({ route }) => {
               accessibilityLabel={AccessibilityLabel.HEADER_BUTTON_TYPE_RELOAD}
             >
               <AntDesign
-                name={'reload'}
+                name={'reload1'}
                 size={27}
                 color={Colors.Black}
                 accessibilityLabel={AccessibilityLabel.ICON_OUTLINE_TYPE_RELOAD}
@@ -69,8 +70,8 @@ const GroupButtonByType = memo(({ route }) => {
               style={[styles.headerButton]}
               accessibilityLabel={AccessibilityLabel.HEADER_BUTTON_TYPE_MORE}
             >
-              <AntDesign
-                name={'more'}
+              <MaterialIcons
+                name={'more-vert'}
                 size={27}
                 color={Colors.Black}
                 accessibilityLabel={AccessibilityLabel.ICON_OUTLINE_TYPE_MORE}

package/src/screens/SubUnit/ManageSubUnit.js

@@ -15,6 +15,7 @@ import Text from '../../commons/Text';
 
 import styles from './ManageSubUnitStyles';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Routes from '../../utils/Route';
 import { RowItem } from '../../commons/RowItem';
 import NoSubUnitImage from '../../../assets/images/Illustrations.svg';
@@ -60,7 +61,7 @@ const ManageSubUnit = ({ route }) => {
           // ref={refMenuAction}
           style={[styles.headerButton, styles.moreButton]}
         >
-          <AntDesign name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/Template/detail.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
@@ -163,7 +163,7 @@ const TemplateDetail = () => {
           ref={refMenuAction}
           style={styles.headerButton}
         >
-          <AntDesign name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     );

package/src/screens/Unit/SelectAddress.js

@@ -3,6 +3,7 @@ import { TouchableOpacity, View, ScrollView } 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 MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { check, RESULTS } from 'react-native-permissions';
 import { openPromptEnableLocation } from '../../utils/Setting/Location';
 
@@ -194,7 +195,11 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_YOUR_LOCATION}
             >
-              <AntDesign name="aim" size={27} color={Colors.Primary} />
+              <MaterialIcons
+                name="my-location"
+                size={27}
+                color={Colors.Primary}
+              />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('your_location')}
               </Text>
@@ -205,7 +210,7 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
             >
-              <AntDesign name="environment" size={27} color={Colors.Primary} />
+              <AntDesign name="enviroment" size={27} color={Colors.Primary} />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('choose_on_map')}
               </Text>
@@ -243,7 +248,7 @@ const SelectAddress = memo(({ route }) => {
               }}
               tracksViewChanges={false}
             >
-              <AntDesign name="environment" size={27} color={Colors.Blue10} />
+              <AntDesign name="enviroment" size={27} color={Colors.Blue10} />
             </Marker>
           </>
         )}

package/src/screens/Unit/SmartAccountItem.js

@@ -4,7 +4,7 @@ import React, { memo, useRef } from 'react';
 import styles from './SmartAccountStyles';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 export const SmartAccountItem = memo(
@@ -44,7 +44,7 @@ export const SmartAccountItem = memo(
           onPress={onPressMore}
           ref={buttonMoreRef}
         >
-          <AntDesign name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     );

package/src/screens/Unit/Summaries.js

@@ -10,6 +10,7 @@ import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 
 const Summaries = memo(({ unit }) => {
+  const { id } = unit;
   const [unitSummaries, setUnitSummaries] = useState([]);
   const isFocused = useIsFocused();
   const navigation = useNavigation();
@@ -17,12 +18,12 @@ const Summaries = memo(({ unit }) => {
   const timeoutId = useRef(null);
 
   const fetchUnitSummary = useCallback(async () => {
-    if (!unit.id) {
+    if (!id) {
       return false;
     }
 
     const { success, data } = await axiosGet(
-      API.UNIT.UNIT_SUMMARY(unit.id),
+      API.UNIT.UNIT_SUMMARY(id),
       {},
       true
     );
@@ -31,18 +32,18 @@ const Summaries = memo(({ unit }) => {
       return true;
     }
     return false;
-  }, [unit.id]);
+  }, [id]);
 
   const goToSummary = useCallback(
     (summary) => {
       navigation.navigate(Routes.UnitSummary, {
         summaryId: summary.id,
-        unitId: unit.id,
+        unitId: id,
         summaryData: summary,
         unitData: unit,
       });
     },
-    [navigation, unit]
+    [navigation, unit, id]
   );
 
   const continuousFetchSummary = useCallback(async () => {
@@ -80,32 +81,25 @@ const Summaries = memo(({ unit }) => {
   const { dataNotification } = useReceiveNotifications();
 
   useEffect(() => {
-    if (dataNotification) {
-      const { summary_id } = dataNotification.params || {};
-      if (summary_id) {
-        fetchUnitSummary();
-      }
+    if (dataNotification?.params?.summary_id) {
+      fetchUnitSummary();
     }
   }, [dataNotification, fetchUnitSummary]);
 
+  if (unitSummaries.length === 0) {
+    return null;
+  }
+
   return (
-    <>
-      {unitSummaries.length > 0 && (
-        <ScrollView
-          horizontal
-          scrollIndicatorInsets={{ right: 1 }}
-          accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
-        >
-          {unitSummaries.map((item, index) => (
-            <SummaryItem
-              key={(item?.id || index).toString()}
-              item={item}
-              goToSummary={goToSummary}
-            />
-          ))}
-        </ScrollView>
-      )}
-    </>
+    <ScrollView
+      horizontal
+      scrollIndicatorInsets={{ right: 1 }}
+      accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
+    >
+      {unitSummaries.map((item) => (
+        <SummaryItem key={item.id} item={item} goToSummary={goToSummary} />
+      ))}
+    </ScrollView>
   );
 });
 

package/src/screens/Unit/components/Header/index.js

@@ -2,6 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { Dimensions, View, TouchableOpacity, StyleSheet } from 'react-native';
 import Popover from '../../../../commons/Popover';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
@@ -107,8 +108,8 @@ const HeaderComponent = ({ title, goBack, dark, hideRight, style }) => {
                 onPress={() => setMenu(true)}
                 style={styles.rightHeader}
               >
-                <AntDesign
-                  name="more"
+                <MaterialIcons
+                  name="more-vert"
                   size={30}
                   color={dark ? Colors.Black : Colors.White}
                 />

package/src/screens/UnitSummary/components/AirQuality/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import styles from './styles';
 
@@ -121,7 +122,11 @@ const AirQuality = memo(({ summaryDetail }) => {
           {<SegmentedRoundChart data={outdoor} />}
           {!!advices?.length && (
             <View style={styles.boxHealth}>
-              <AntDesign name="alert" size={20} style={styles.iconMargin} />
+              <MaterialCommunityIcons
+                name="alert-circle-outline"
+                size={20}
+                style={styles.iconMargin}
+              />
               <Text semibold color={Colors.Gray9} type="H4">
                 {t('Health advices:')}
               </Text>

package/src/screens/UnitSummary/components/UvIndex/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
@@ -37,7 +37,11 @@ const UvIndex = memo(({ summaryDetail }) => {
         <Today />
         <SegmentedRoundChart data={data} />
         <View style={styles.boxHealth}>
-          <AntDesign name="alert" size={20} style={styles.iconMargin} />
+          <MaterialCommunityIcons
+            name="alert-circle-outline"
+            size={20}
+            style={styles.iconMargin}
+          />
           <Text
             semibold
             color={Colors.Gray9}