add file

android/app/src/main/assets/custom/fonts.js

+/* eslint-disable prettier/prettier */
+export const fonts = {
+    beProLight: 'BeVietnamPro-Light',
+    beProBlack: 'BeVietnamPro-Black',
+    beProBlackItalic: 'BeVietnamPro-BlackItalic',
+    beProBold: 'BeVietnamPro-Bold',
+    beProBoldItalic: 'BeVietnamPro-BoldItalic',
+    beProExtraBold: 'BeVietnamPro-ExtraBold',
+    beProExtraBoldItalic: 'BeVietnamPro-ExtraBoldItalic',
+    beProExtraLight: 'BeVietnamPro-ExtraLight',
+    beProExtraLightItalic: 'BeVietnamPro-ExtraLightItalic',
+    beProItalic: 'BeVietnamPro-Italic',
+    beProLightItalic: 'BeVietnamPro-LightItalic',
+    beProMedium: 'BeVietnamPro-Medium',
+    beProMediumItalic: 'BeVietnamPro-MediumItalic',
+    beProRegular: 'BeVietnamPro-Regular',
+    beProSemiBold: 'BeVietnamPro-SemiBold',
+    beProSemiBoldItalic: 'BeVietnamPro-SemiBoldItalic',
+    beProThin: 'BeVietnamPro-Thin',
+    beProThinItalic: 'BeVietnamPro-ThinItalic'
+}
\ No newline at end of file

android/link-assets-manifest.json

+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Black.ttf",
+      "sha1": "405a6e7828f292099161bf5cccb5402ec19f1833"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-BlackItalic.ttf",
+      "sha1": "cffbcaeae7ec6a4baabdcdd02227beddfaa49d5e"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Bold.ttf",
+      "sha1": "0bd7e256f73efd0a8135c5090d62f150107ff37a"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-BoldItalic.ttf",
+      "sha1": "1a5d8555a995733597d706fe3d02a38aa48dcc44"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ExtraBold.ttf",
+      "sha1": "18efb439fa36b6da24cf550de93a94c92cbe8d71"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ExtraBoldItalic.ttf",
+      "sha1": "33ae2a753d95b035cf7534a9af614fde3de2bdc0"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ExtraLight.ttf",
+      "sha1": "2487b745e3b46baa3c249062a48b79efeb48d314"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ExtraLightItalic.ttf",
+      "sha1": "2b61bfae7dc344b368c1a4c95c25f0b2e65ac415"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Italic.ttf",
+      "sha1": "cd74c031ed87c52f81b12e1886133283f36cc44a"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Light.ttf",
+      "sha1": "4c7d4497bc6b506d9fefdc8227418bbb637bc524"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-LightItalic.ttf",
+      "sha1": "e6985b646a67ed2885e15c3f5b23dab28246621b"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Medium.ttf",
+      "sha1": "7525dd63d853386f3c192fa78502e547ea620e96"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-MediumItalic.ttf",
+      "sha1": "b1d0a7a04e0b02414e50a69d8c7c952e42abea20"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Regular.ttf",
+      "sha1": "03d9e7cd56b446b0585b36a46c3f4b140c6e0026"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-SemiBold.ttf",
+      "sha1": "1b8668d1e0f6949d9a702c2a590971ab7946a79f"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-SemiBoldItalic.ttf",
+      "sha1": "6d432d0456dfc9f59a091444b5aae82f35c3df2d"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Thin.ttf",
+      "sha1": "629a4d348ac61e1ddabafc63683296ca7e1bfbe5"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ThinItalic.ttf",
+      "sha1": "6d7cc87fe54c683c66d0a791d82c4a10561488b8"
+    },
+    {
+      "path": "src/assets/fonts/fonts.js",
+      "sha1": "1a48e89032f6926794526e3977050a10666bb856"
+    }
+  ]
+}

ios/anawork_mobile/Info.plist

@@ -26,14 +26,13 @@
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-	  <!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
 		<key>NSAllowsArbitraryLoads</key>
 		<false/>
 		<key>NSAllowsLocalNetworking</key>
 		<true/>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -48,5 +47,26 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>BeVietnamPro-Black.ttf</string>
+		<string>BeVietnamPro-BlackItalic.ttf</string>
+		<string>BeVietnamPro-Bold.ttf</string>
+		<string>BeVietnamPro-BoldItalic.ttf</string>
+		<string>BeVietnamPro-ExtraBold.ttf</string>
+		<string>BeVietnamPro-ExtraBoldItalic.ttf</string>
+		<string>BeVietnamPro-ExtraLight.ttf</string>
+		<string>BeVietnamPro-ExtraLightItalic.ttf</string>
+		<string>BeVietnamPro-Italic.ttf</string>
+		<string>BeVietnamPro-Light.ttf</string>
+		<string>BeVietnamPro-LightItalic.ttf</string>
+		<string>BeVietnamPro-Medium.ttf</string>
+		<string>BeVietnamPro-MediumItalic.ttf</string>
+		<string>BeVietnamPro-Regular.ttf</string>
+		<string>BeVietnamPro-SemiBold.ttf</string>
+		<string>BeVietnamPro-SemiBoldItalic.ttf</string>
+		<string>BeVietnamPro-Thin.ttf</string>
+		<string>BeVietnamPro-ThinItalic.ttf</string>
+	</array>
 </dict>
 </plist>

ios/link-assets-manifest.json

+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Black.ttf",
+      "sha1": "405a6e7828f292099161bf5cccb5402ec19f1833"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-BlackItalic.ttf",
+      "sha1": "cffbcaeae7ec6a4baabdcdd02227beddfaa49d5e"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Bold.ttf",
+      "sha1": "0bd7e256f73efd0a8135c5090d62f150107ff37a"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-BoldItalic.ttf",
+      "sha1": "1a5d8555a995733597d706fe3d02a38aa48dcc44"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ExtraBold.ttf",
+      "sha1": "18efb439fa36b6da24cf550de93a94c92cbe8d71"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ExtraBoldItalic.ttf",
+      "sha1": "33ae2a753d95b035cf7534a9af614fde3de2bdc0"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ExtraLight.ttf",
+      "sha1": "2487b745e3b46baa3c249062a48b79efeb48d314"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ExtraLightItalic.ttf",
+      "sha1": "2b61bfae7dc344b368c1a4c95c25f0b2e65ac415"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Italic.ttf",
+      "sha1": "cd74c031ed87c52f81b12e1886133283f36cc44a"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Light.ttf",
+      "sha1": "4c7d4497bc6b506d9fefdc8227418bbb637bc524"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-LightItalic.ttf",
+      "sha1": "e6985b646a67ed2885e15c3f5b23dab28246621b"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Medium.ttf",
+      "sha1": "7525dd63d853386f3c192fa78502e547ea620e96"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-MediumItalic.ttf",
+      "sha1": "b1d0a7a04e0b02414e50a69d8c7c952e42abea20"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Regular.ttf",
+      "sha1": "03d9e7cd56b446b0585b36a46c3f4b140c6e0026"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-SemiBold.ttf",
+      "sha1": "1b8668d1e0f6949d9a702c2a590971ab7946a79f"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-SemiBoldItalic.ttf",
+      "sha1": "6d432d0456dfc9f59a091444b5aae82f35c3df2d"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-Thin.ttf",
+      "sha1": "629a4d348ac61e1ddabafc63683296ca7e1bfbe5"
+    },
+    {
+      "path": "src/assets/fonts/BeVietnamPro-ThinItalic.ttf",
+      "sha1": "6d7cc87fe54c683c66d0a791d82c4a10561488b8"
+    },
+    {
+      "path": "src/assets/fonts/fonts.js",
+      "sha1": "1a48e89032f6926794526e3977050a10666bb856"
+    }
+  ]
+}

react-native.config.js

+/* eslint-disable prettier/prettier */
+module.exports = {
+    assets: ['./src/assets/fonts'],
+  };
+  
\ No newline at end of file

src/Main.js

-import React, {useState} from 'react';
-import AppNavigation from './navigation/AppNavigation';
+import React, { useState, useEffect } from 'react'
+import AsyncStorageKeys from './utils/AsyncStorageKeys'
+import AppNavigation from './navigation/AppNavigation'
 function Main() {
     //TODO: Check whether user is admin or normal user
-  const [isLogged, setIsLogged] = useState(null);
+    const [isLogged, setIsLogged] = useState(null)
    
-  return <AppNavigation isLogged={isLogged}></AppNavigation>;
+    return <AppNavigation isLogged={isLogged}></AppNavigation>
 }
-export default Main;
+export default Main

src/api/authAPI.js

+/* eslint-disable prettier/prettier */
+import axiosClient from '../network/axios';
+
+const authAPI = {
+  requestConfirmOTP: ({otp, email}) =>
+    axiosClient.post('check-otp', {otp, email}),
+
+  requestSendMail: email =>
+    axiosClient.post('users/forgotPassword?username=ntdung899@gmail.com'),
+
+  requestChangePassword: payload => axiosClient.post('reset-password', payload),
+
+  requestAuthenticate: ({username, password}) => {
+    return axiosClient.post(
+      `authenticate/authenticate?username=${username}&password=${password}`,
+    );
+  },
+
+  requestLogout: ({token}) => axiosClient.post('authenticate/logout', {token}),
+};
+
+export default authAPI;

src/api/homeAPI.js

+/* eslint-disable prettier/prettier */
+import ApiClient from '../network/axios';
+
+const homeAPI = {
+  requestGetQuotation: () => {
+    return ApiClient.get(`getAllQuote`);
+  },
+  requestGetRandomQuotation: () => {
+    return ApiClient.get(`getRandomQuotation`);
+  },
+  requestGetUsersDirectManagers: () => {
+    return ApiClient.get(`myDirectManagers`);
+  },
+  requestGetBirthdayUser: ({month, year}) =>
+    ApiClient.get(`users/statistics/birthday?year=${year}'&month=${month}`),
+};
+
+export default homeAPI;

src/app/loaderSlice.js

+/* eslint-disable prettier/prettier */
+import {createSlice} from '@reduxjs/toolkit';
+
+const initLoaderState = {
+  isLoading: false,
+  loadersCount: 0,
+};
+
+const loader = createSlice({
+  name: 'loader',
+  initialState: initLoaderState,
+  reducers: {
+    startLoading: state => {
+      state.isLoading = true;
+      state.loadersCount = state.loadersCount + 1;
+    },
+    finishLoading: state => {
+      const newCount = state.loadersCount - 1;
+      const stillWaitingOtherComponent = newCount !== 0;
+      state.isLoading = stillWaitingOtherComponent;
+      state.loadersCount = newCount;
+    },
+  },
+});
+
+const {actions, reducer} = loader;
+export const {startLoading, finishLoading} = actions;
+export default reducer;

src/app/selectors.js

+/* eslint-disable prettier/prettier */
+export const authSelector = state => state.auth;
+export const homeSelector = state => state.home;
+export const onLeaveSelector = state => state.onLeave;

src/app/serviceRequest.js

+import {finishLoading, startLoading} from './loaderSlice';
+
+const serviceRequest = async serviceRequestProps => {
+  const {options, dispatch, serviceMethod, payload} = serviceRequestProps;
+  try {
+    if (!options.skipLoader) {
+      dispatch(startLoading());
+    }
+    const serviceRequestResponse = await serviceMethod(payload);
+    return serviceRequestResponse;
+  } catch {
+  } finally {
+    if (!options.skipLoader) {
+      dispatch(finishLoading());
+    }
+  }
+};
+
+export default serviceRequest;

src/app/store.js

+/* eslint-disable prettier/prettier */
+import {configureStore} from '@reduxjs/toolkit';
+
+import authReducer from '../screens/authentication/authSlice';
+import loaderReducer from './loaderSlice';
+import homeReducer from '../screens/home/homeSlice';
+import onLeaveReducer from '../screens/onleave/onLeaveSlice';
+const rootReducer = {
+  loader: loaderReducer,
+  auth: authReducer,
+  home: homeReducer,
+  onLeave: onLeaveReducer,
+};
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
+});
+export default store;

src/assets/fonts/fonts.js

+/* eslint-disable prettier/prettier */
+export const fonts = {
+    beProLight: 'BeVietnamPro-Light',
+    beProBlack: 'BeVietnamPro-Black',
+    beProBlackItalic: 'BeVietnamPro-BlackItalic',
+    beProBold: 'BeVietnamPro-Bold',
+    beProBoldItalic: 'BeVietnamPro-BoldItalic',
+    beProExtraBold: 'BeVietnamPro-ExtraBold',
+    beProExtraBoldItalic: 'BeVietnamPro-ExtraBoldItalic',
+    beProExtraLight: 'BeVietnamPro-ExtraLight',
+    beProExtraLightItalic: 'BeVietnamPro-ExtraLightItalic',
+    beProItalic: 'BeVietnamPro-Italic',
+    beProLightItalic: 'BeVietnamPro-LightItalic',
+    beProMedium: 'BeVietnamPro-Medium',
+    beProMediumItalic: 'BeVietnamPro-MediumItalic',
+    beProRegular: 'BeVietnamPro-Regular',
+    beProSemiBold: 'BeVietnamPro-SemiBold',
+    beProSemiBoldItalic: 'BeVietnamPro-SemiBoldItalic',
+    beProThin: 'BeVietnamPro-Thin',
+    beProThinItalic: 'BeVietnamPro-ThinItalic'
+}
\ No newline at end of file

src/components/AppText/index.js

+/* eslint-disable prettier/prettier */
+import React from 'react';
+import {Text} from 'react-native-paper';
+import {fonts} from '../../assets/fonts/fonts';
+import colors from '../../values/colors';
+
+const FONT_FAMILY = fonts.beProMedium;
+
+const AppText = ({variant, children, style, onPress, color}) => {
+  const defaultStyle = {
+    fontFamily: FONT_FAMILY,
+    color: color ?? colors.textColor,
+  };
+  return (
+    <Text variant={variant} style={[defaultStyle, style]} onPress={onPress}>
+      {children}
+    </Text>
+  );
+};
+export default AppText;

src/components/ButtonComponent.js

-import React, {useEffect, useState} from 'react';
-import {
-  SafeAreaView,
-  TouchableOpacity,
-  Image,
-  Text,
-  View,
-  StyleSheet,
-} from 'react-native';
+import React from 'react';
+import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import AppText from './AppText';
 export default function ButtonComponent({
   text,
   style,
@@ -23,12 +17,12 @@ export default function ButtonComponent({
   return (
     <TouchableOpacity style={style} disabled={disable} onPress={onPress}>
       {leftIcon && <Image source={leftIcon} style={styleIcon} />}
-      {text && <Text style={textStyle}>{text}</Text>}
+      {text && <AppText style={textStyle}>{text}</AppText>}
       {iconSource && <Image source={iconSource} style={styleIcon} />}
       {rightIcon && <Image source={rightIcon} style={styleIcon} />}
       {badge && (
         <View style={badgeStyle}>
-          <Text style={{color: 'white', fontSize: 12}}>{badge}</Text>
+          <AppText style={{color: 'white', fontSize: 12}}>{badge}</AppText>
         </View>
       )}
     </TouchableOpacity>

src/components/TextInputComponent.js

-import React from 'react'
+/* eslint-disable prettier/prettier */
+import React from 'react';
 import {
   Image,
   StyleSheet,
-  Text,
   TextInput,
   TouchableOpacity,
   View,
-  KeyboardAvoidingView
-} from 'react-native'
-import { HelperText } from 'react-native-paper'
-import colors from '../values/colors'
-import styles from '../screens/authentication/login/styles'
+} from 'react-native';
+import {HelperText} from 'react-native-paper';
+import styles from '../screens/authentication/login/styles';
+import colors from '../values/colors';
+import AppText from './AppText';
 const TextInputComponent = ({
   placeholder,
   style,
@@ -36,25 +36,31 @@ const TextInputComponent = ({
   noBorder,
   autoCompleteType,
   borderColor,
-  type
+  type,
 }) => {
   return (
-    
     <View style={stylesTextInput.container}>
       {label && (
         <View style={stylesTextInput.containerLabel}>
-            <Text
+          <AppText
             children={`${label}`}
             style={[stylesTextInput.textLabel, styleLabel]}
           />
-            {require && <Text children={' *'} style={{ color: colors.red }} />}
+          {require && <AppText children={' *'} style={{color: colors.red}} />}
         </View>
       )}
-        <View style={[noBorder ? stylesTextInput.containerAreaInputNoBorder : stylesTextInput.containerAreaInput, styleAreaInput, { borderColor: borderColor }]}>
+      <View
+        style={[
+          noBorder
+            ? stylesTextInput.containerAreaInputNoBorder
+            : stylesTextInput.containerAreaInput,
+          styleAreaInput,
+          {borderColor: borderColor},
+        ]}>
         {leftIcon && (
           <TouchableOpacity
             onPress={() => {
-                onPressLeftIcon && onPressLeftIcon()
+              onPressLeftIcon && onPressLeftIcon();
             }}
             style={stylesTextInput.leftIcon}>
             <Image source={leftIcon} style={stylesTextInput.icon} />
@@ -74,12 +80,11 @@ const TextInputComponent = ({
           onFocus={onFocus}
           editable={!disable}
           autoComplete={autoCompleteType}
-
         />
         {rightIcon && (
           <TouchableOpacity
             onPress={() => {
-                onPressRightIcon && onPressRightIcon()
+              onPressRightIcon && onPressRightIcon();
             }}>
             <Image source={rightIcon} style={stylesTextInput.icon} />
           </TouchableOpacity>
@@ -89,9 +94,8 @@ const TextInputComponent = ({
         {errors}
       </HelperText>
     </View>
-
-  )
-}
+  );
+};
 const stylesTextInput = StyleSheet.create({
   container: {
     width: '100%',
@@ -145,5 +149,5 @@ const stylesTextInput = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-})
-export default TextInputComponent
+});
+export default TextInputComponent;

src/components/custom_drawer/CustomDrawer.js

-import React, {useEffect, useState} from 'react';
-import {
-  ImageBackground,
-  Image,
-  TouchableOpacity,
-  Text,
-  View,
-} from 'react-native';
-import {
-  DrawerContentScrollView,
-  DrawerItemList,
-} from '@react-navigation/drawer';
-import {IMAGES} from '../../values/images';
-import styles from './style';
-import {useDispatch, useSelector} from 'react-redux';
-import {logoutApp} from '../../store/actions/CommonAction';
-const CustomDrawer = props => {
-  const userDetails = useSelector(state => state.UserInfo.userInfo);
-  const dispatch = useDispatch();
-  const navigateToLogout = () => {
-    dispatch(logoutApp());
-  };
-  return (
-    <View style={{flex: 1}}>
-      <DrawerContentScrollView {...props}>
-        <ImageBackground style={{padding: 20}} source={IMAGES.BgProfile}>
-          <Image
-            style={styles.iconUser}
-            source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
-          />
-          <Text style={styles.text}>{`${userDetails.first_name} ${
-            userDetails.middle_name ? userDetails.middle_name : ''
-          } ${userDetails.last_name}`}</Text>
-        </ImageBackground>
-        <DrawerItemList {...props} />
-      </DrawerContentScrollView>
-      <TouchableOpacity onPress={navigateToLogout} style={styles.btnLogout}>
-        <Image
-          source={IMAGES.IcLogout}
-          style={{width: 20, height: 20, marginRight: 10}}
-        />
-        <Text>Đăng xuất</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default CustomDrawer;

src/components/custom_drawer/style.js

-import { StyleSheet, Dimensions } from 'react-native'
-const width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
-
-const styles = StyleSheet.create({
-    container: {
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: width,
-        height: 50,
-        flexDirection: 'row'
-    },
-
-    iconUser: {
-        width: 80,
-        height: 80,
-        borderRadius: 40,
-    },
-    text: {
-        fontSize: 18,
-        //fontFamily: 'Roboto-medium',
-        color: '#fff',
-        fontWeight: '500'
-    },
-    btnLogout:
-    {
-        alignItems: 'center',
-        position: 'absolute',
-        bottom: 30,
-        left: width / 4,
-        flexDirection: 'row',
-        justifyContent: 'space-between'
-    }
-
-})
-export default styles
\ No newline at end of file

src/components/header/HeaderComponent.js

-import React, { useEffect, useState } from 'react';
+/* eslint-disable prettier/prettier */
+import React, {useEffect, useState} from 'react';
 import {
-  SafeAreaView,
-  ScrollView,
   Image,
-  TouchableOpacity,
-  Text,
-  View,
   ImageBackground,
+  SafeAreaView,
+  TouchableOpacity,
 } from 'react-native';
-import { IMAGES } from '../../values/images';
-import styles from './style';
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  getCompanyInfo
-} from '../../store/actions/UserAction'
+import {useDispatch} from 'react-redux';
 import RootNavigation from '../../navigation/RootNavigation';
-import { APP_NAVIGATE_SCREEN } from '../../utils/constant';
-import api from '../../network/axios'
+import api from '../../network/axios';
+import {getCompanyInfo} from '../../store/actions/UserAction';
+import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
+import {IMAGES} from '../../values/images';
+import styles from './style';
+
 const HeaderComponent = props => {
   const dispatch = useDispatch();
-  const [logo, setLogo] = useState()
-  const userDetails = useSelector(state => state.UserInfo.userInfo);
+
+  const [logo, setLogo] = useState();
+
   const navigateHome = () => {
     RootNavigation.navigate(APP_NAVIGATE_SCREEN.HOME);
   };
   const getCompanyLogo = async () => {
-    const res = await dispatch(getCompanyInfo())
+    const res = await dispatch(getCompanyInfo());
     if (res.success) {
+      const domain = api.getBaseURL();
 
-      const domain = api.getBaseURL()
-
-      const arr = domain.split('/', 3)
-      setLogo(`https://${arr[arr.length - 1]}${res.data.logo}`)
-
-    }
+      const arr = domain.split('/', 3);
+      setLogo(`https://${arr[arr.length - 1]}${res.data.logo}`);
     }
+  };
   useEffect(() => {
-    getCompanyLogo()
-  }, [])
+    getCompanyLogo();
+  }, []);
   return (
     <SafeAreaView>
       <ImageBackground style={styles.container} source={IMAGES.BgHeader}>
@@ -48,12 +44,11 @@ const HeaderComponent = props => {
         </TouchableOpacity> */}
         <TouchableOpacity
           onPress={navigateHome}
-          style={{ flex: 1, alignItems: 'center' }}>
-          <Image source={{ uri: logo }} style={styles.iconLogo} />
+          style={{flex: 1, alignItems: 'center'}}>
+          <Image source={{uri: logo}} style={styles.iconLogo} />
         </TouchableOpacity>
 
-        {
-        /* <View
+        {/* <View
           style={{
             flexDirection: 'row',
             alignItems: 'center',

src/components/noconnection/NoConnection.js

 import React from 'react';
-import {
-  SafeAreaView,
-  View,
-  Text,
-  Linking,
-  StyleSheet,
-  Dimensions,
-  Image,
-  Platform,
-} from 'react-native';
+import {Linking, Platform, SafeAreaView, StyleSheet} from 'react-native';
 //Screen
-import {IMAGES} from '../../values/images';
 //Values
-import string from '../../values/string';
 import Alert from 'react-native-awesome-alerts';
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
 function NoConnection({isShow}) {
   const onOpenSetting = () => {
     Platform.OS === 'ios'

src/config/index.ts → src/config/index.js

 export default {
-  apiEndpoint: 'https://meu.anawork.com/api/',
+  apiEndpoint: 'https://gateway.dev.meu-solutions.com/staginganawork/api/',
   //apiEndpoint: 'https://gateway.dev.meu-solutions.com/techport/api/',
   imageEndPoint: 'https://techmart.meu-solutions.com',
   siteURL: 'https://saigon-business.erp.meu-solutions.com',

src/navigation/AppNavigation.js

-import * as React from 'react';
-import {View, Text, Linking} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import * as React from 'react';
+import ForgotPassword from '../screens/authentication/forgot_password/ForgotPasswordContainer';
+import IntroScreen from '../screens/authentication/introduction/IntroductionContainer';
 import LoginScreen from '../screens/authentication/login/LoginContainer';
+import ServerScreen from '../screens/authentication/server/ServerContainer';
 import SignUpScreen from '../screens/authentication/signup/SignUpContainer';
 import SplashContainer from '../screens/authentication/splash/SlashContainer';
 import ProfileContainer from '../screens/profile/ProfileContainer';
-import ConfirmedShiftDetail from '../screens/shift/shift-tabs/ConfirmedShiftScreen/ConfirmedShiftDetail/ConfirmedShiftDetailContainer';
-import ForgotPassword from '../screens/authentication/forgot_password/ForgotPasswordContainer';
 import SalaryScreen from '../screens/salary/SalaryContainer';
-import IntroScreen from '../screens/authentication/introduction/IntroductionContainer';
-import ServerScreen from '../screens/authentication/server/ServerContainer';
+import ConfirmedShiftDetail from '../screens/shift/shift-tabs/ConfirmedShiftScreen/ConfirmedShiftDetail/ConfirmedShiftDetailContainer';
 
 import {APP_NAVIGATE_SCREEN} from '../utils/constant';
-import Tabs from './DrawerNavigation';
 import BottomTabs from './BottomTabNavigation';
 import RootNavigation from './RootNavigation';
-import HeaderComponent from '../components/header/HeaderComponent';
 
 const {
   INTRO,
@@ -31,8 +28,8 @@ const {
   SALARY,
 } = APP_NAVIGATE_SCREEN;
 const AppScreen = {
-  [SERVER]: ServerScreen,
   [SPLASH]: SplashContainer,
+  [SERVER]: ServerScreen,
   [LOGIN]: LoginScreen,
   [SIGN_UP]: SignUpScreen,
   [PROFILE]: ProfileContainer,

src/navigation/BottomTabNavigation.js

 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import * as React from 'react';
-import {useDispatch, useSelector} from 'react-redux';
-import {Text, View, Image} from 'react-native';
-import ShiftScreen from '../screens/shift/ShiftContainer';
-import ProfileScreen from '../screens/profile/ProfileContainer';
+import {Image} from 'react-native';
+import {useSelector} from 'react-redux';
+import {authSelector} from '../app/selectors';
+import HeaderComponent from '../components/header/HeaderComponent';
 import NotificationScreen from '../screens/notification/NotificationContainer';
+import ProfileScreen from '../screens/profile/ProfileContainer';
 import {APP_NAVIGATE_SCREEN} from '../utils/constant';
-import HeaderComponent from '../components/header/HeaderComponent';
-import {IMAGES, IconDrawer} from '../values/images';
-import TopTabNavigation from './TopTabNavigation';
+import {IconDrawer} from '../values/images';
 import DayWageNavigation from './DayWageTopTabNavigation';
+import TopTabNavigation from './TopTabNavigation';
+
 const {HOME, SHIFT, PROFILE, DAY_WAGE, Notification} = APP_NAVIGATE_SCREEN;
 
 const AppScreen = {
   [HOME]: TopTabNavigation,
   [Notification]: NotificationScreen,
-  [DAY_WAGE]: DayWageNavigation,
+  // [DAY_WAGE]: DayWageNavigation,
   //[SHIFT]: DayWageNavigation,
   [PROFILE]: ProfileScreen,
 };
@@ -30,7 +31,7 @@ const AppIcon = {
 const Tab = createBottomTabNavigator();
 
 export default function BottomNavigation() {
-  const userDetails = useSelector(state => state.UserInfo.userInfo);
+  const userDetails = useSelector(authSelector);
   return (
     <Tab.Navigator screenOptions={{scrollEnabled: true}}>
       {Object.keys(AppScreen).map((item, index) => (

src/navigation/DayWageTopTabNavigation.js

-import * as React from 'react';
-import {Text, View, Image} from 'react-native';
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
+import * as React from 'react';
 
-import ShiftScreen from '../screens/shift/ShiftContainer';
 import SalaryScreen from '../screens/salary/SalaryContainer';
+import ShiftScreen from '../screens/shift/ShiftContainer';
 import WorkLoadScreen from '../screens/workload/WorkLoadContainer';
 import {APP_NAVIGATE_SCREEN} from '../utils/constant';
 

src/navigation/DrawerNavigation.js

+import {createDrawerNavigator} from '@react-navigation/drawer';
 import * as React from 'react';
 import {Image} from 'react-native';
-import {createDrawerNavigator} from '@react-navigation/drawer';
 
-import HomeScreen from '../screens/home/HomeContainer';
-import ShiftScreen from '../screens/shift/ShiftContainer';
-import OnLeave from '../screens/onleave/OnLeaveContainer';
-import SalaryScreen from '../screens/salary/SalaryContainer';
-import Overtime from '../screens/overtime/OvertimeContainer';
+import HeaderComponent from '../components/header/HeaderComponent';
 import ConfirmDate from '../screens/confirm_date/ConfirmDateContainer';
+import HomeScreen from '../screens/home/homeContainer';
+import OnLeave from '../screens/onleave/onLeaveContainer';
+import Overtime from '../screens/overtime/OvertimeContainer';
+import SalaryScreen from '../screens/salary/SalaryContainer';
+import ShiftScreen from '../screens/shift/ShiftContainer';
 import WorkLoad from '../screens/workload/WorkLoadContainer';
 import {APP_NAVIGATE_SCREEN} from '../utils/constant';
-import CustomDrawer from '../components/custom_drawer/CustomDrawer';
-import HeaderComponent from '../components/header/HeaderComponent';
-import {IMAGES, IconDrawer} from '../values/images';
+import {IconDrawer} from '../values/images';
 const {
   HOME,
   SHIFT,
@@ -46,9 +45,7 @@ const Drawer = createDrawerNavigator();
 
 export default function App() {
   return (
-    <Drawer.Navigator
-      drawerContent={props => <CustomDrawer {...props} />}
-      initialRouteName={HOME}>
+    <Drawer.Navigator initialRouteName={HOME}>
       {Object.keys(AppScreen).map((item, index) => (
         <Drawer.Screen
           key={index}

src/navigation/TopTabNavigation.js

+/* eslint-disable prettier/prettier */
+import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import * as React from 'react';
-import { Text, View, Image } from 'react-native';
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 
-import HomeScreen from '../screens/home/HomeContainer'
-import OnLeave from '../screens/onleave/OnLeaveContainer'
-import Overtime from '../screens/overtime/OvertimeContainer'
-import ConfirmDate from '../screens/confirm_date/ConfirmDateContainer'
-import { APP_NAVIGATE_SCREEN } from '../utils/constant'
+import HomeScreen from '../screens/home';
+import OnLeave from '../screens/onleave';
+import {APP_NAVIGATE_SCREEN} from '../utils/constant';
 
-const {
-    ON_LEAVE,
-    OVERTIME,
-    MAIN,
-    CONFIRM_DATE
-} = APP_NAVIGATE_SCREEN
+const {ON_LEAVE, OVERTIME, MAIN, CONFIRM_DATE} = APP_NAVIGATE_SCREEN;
 
 const AppScreen = {
   [MAIN]: HomeScreen,
   [ON_LEAVE]: OnLeave,
-    [OVERTIME]: Overtime,
-    [CONFIRM_DATE]: ConfirmDate
-}
+  //   [OVERTIME]: Overtime,
+  //   [CONFIRM_DATE]: ConfirmDate,
+};
 const Tab = createMaterialTopTabNavigator();
 
 export default function TopTabNavigation() {
   return (
-        <Tab.Navigator screenOptions={{ scrollEnabled: true }}>
-            {
-                Object.keys(AppScreen).map((item, index) => (
-                    <Tab.Screen key={index} name={item} component={AppScreen[item]}
+    <Tab.Navigator screenOptions={{scrollEnabled: true}}>
+      {Object.keys(AppScreen).map((item, index) => (
+        <Tab.Screen
+          key={index}
+          name={item}
+          component={AppScreen[item]}
           options={{
             tabBarActiveTintColor: '#3947e9', // tab text color
             scrollEnabled: true,
             upperCaseLabel: false,
             tabBarLabelStyle: {
-                                fontSize: 9
-                            }
+              fontSize: 9,
+            },
             // tabBarIcon: ({ focused, size }) => (
             //     <Image source={AppIcon[item]} style={{ width: 24, height: 24 }} />
             // )
-
           }}
-
         />
-                ))
-            }
+      ))}
     </Tab.Navigator>
   );
 }

src/network/ApiService.js

-import AsyncStorage from '@react-native-async-storage/async-storage';
-import {Alert} from 'react-native';
-import RootNavigation from '../navigation/RootNavigation';
-import AsyncStorageKeys from '../utils/AsyncStorageKeys';
-import AsyncStorageService from '../utils/AsyncStorageService';
-import {APP_NAVIGATE_SCREEN} from '../utils/constant';
-import {ToastMessage} from '../utils/MessageUtil';
-import api from './axios';
-
-const createAPI = () => {
-  const APIInstant = require('axios').default.create();
-  APIInstant.defaults.baseURL = api.getBaseURL();
-  APIInstant.defaults.timeout = 40000;
-  APIInstant.defaults.headers = {'Content-Type': 'application/json'};
-  APIInstant.interceptors.request.use(async config => {
-    config.headers.Authorization =
-      'Bearer ' + (await AsyncStorageService.getToken()) ?? '';
-    return config;
-  }, Promise.reject);
-  APIInstant.interceptors.response.use(async response => {
-    const data = response.data;
-    if (data && data?.code === 401) {
-      ToastMessage({title: 'Notification', message: data?.message});
-      await AsyncStorageService.clear().then(() => {
-        RootNavigation.navigate(APP_NAVIGATE_SCREEN.LOGIN);
-      });
-    } else if (data && data.success === false)
-      // Alert.alert(' ', data.message)
-      console.log('data.message', data.message);
-    return response;
-  });
-  return APIInstant;
-};
-
-let axiosClient = createAPI();
-
-/* Support function */
-function handleResult(api) {
-  return api.then(res => {
-    return handleResponse(res.data);
-  });
-}
-
-function handleResponse(data) {
-  if (data && data.success === false) {
-    return Promise.reject(new Error(data?.message || 'Co loi xay ra'));
-  }
-  return Promise.resolve(data);
-}
-export const ApiClient = {
-  get: (url, payload) => handleResult(axiosClient.get(url, payload)),
-  post: (url, payload) => handleResult(axiosClient.post(url, payload)),
-  put: (url, payload) => handleResult(axiosClient.put(url, payload)),
-  path: (url, payload) => handleResult(axiosClient.patch(url, payload)),
-  delete: (url, payload) =>
-    handleResult(axiosClient.delete(url, {data: payload})),
-};
-export function refreshApiService() {
-  axiosClient = createAPI();
-}

src/network/api/authApi.js

-import {ApiClient} from '../ApiService';
+import ApiClient from '../axios';
 import ApiUrl from '../api/apiUrl';
 export default {
   requestConfirmOTP: ({otp, email}) =>

src/network/api/commonApi.js

-import {ApiClient} from '../ApiService';
+import ApiClient from '../axios';
 import ApiUrl from '../api/apiUrl';
 export default {
   requestGetMyInfo: () => ApiClient.get(ApiUrl.GET_USER_INFO),

src/network/api/onLeaveApi.js

+/* eslint-disable prettier/prettier */
+import ApiClient from '../axios';
+export default {
+  requestGetLeavesDay: ({filter, sort, page, pageSize}) =>
+    ApiClient.get(
+      `myLeaveDays?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`,
+    ),
+  requestGetRestDay: () => ApiClient.get('leaveCategories'),
+};

src/network/api/userApi.js

 /* eslint-disable no-dupe-keys */
-import {ApiClient} from '../ApiService';
+import ApiClient from '../axios';
 import ApiUrl from '../api/apiUrl';
 export default {
   requestGetMyInfo: () => ApiClient.get(ApiUrl.GET_USER_INFO),

src/network/axios.js

-import {create} from 'apisauce';
-import {Platform} from 'react-native';
+/* eslint-disable prettier/prettier */
+import axios from 'axios';
+import Utils from '../utils';
 import config from '../config';
 
-const api = create({
+const axiosClient = axios.create({
   baseURL: config.apiEndpoint,
-  timeout: Platform.OS === 'ios' ? 6000 : 2500,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: config.axiosTimeout,
 });
 
-export default api;
+axiosClient.interceptors.request.use(async configAxios => {
+  const auth = await Utils.getData(config.storageKey.AUTH);
+  if (auth.token) {
+    configAxios.headers.Authorization = `Bearer ${auth.token}`;
+  }
+  return configAxios;
+});
+
+axiosClient.interceptors.response.use(
+  response => {
+    console.log('response', response);
+    if (response?.data) {
+      return response.data;
+    }
+    return response;
+  },
+  error => {
+    throw error;
+  },
+);
+
+export default axiosClient;

src/screens/authentication/authSlice.js

+/* eslint-disable prettier/prettier */
+import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
+
+import serviceRequest from '../../app/serviceRequest';
+
+import Utils from '../../utils';
+import authAPI from '../../api/authAPI';
+
+const initialState = {
+  banners: [],
+  news: [],
+  companyInfo: [],
+};
+
+export const authenticate = createAsyncThunk(
+  'auth/authenticate',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: authAPI.requestAuthenticate,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState: initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(authenticate.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+      console.log('authenticate', action);
+      if (success) {
+      }
+    });
+  },
+});
+
+const {reducer} = authSlice;
+export default reducer;

src/screens/authentication/forgot_password/ForgotPasswordScreen.js

-
-import React, { useEffect, useState } from 'react';
-import {
-    SafeAreaView,
-    ScrollView,
-    TextInput,
-    Image,
-    Text,
-    View,
-} from 'react-native';
-import { BgIntroduce } from '../../../values/images'
+import React from 'react';
+import {Image, SafeAreaView, View} from 'react-native';
+import AppText from '../../../components/AppText';
 import ButtonComponent from '../../../components/ButtonComponent';
 import TextInputComponent from '../../../components/TextInputComponent';
-import styles from './style'
+import {BgIntroduce} from '../../../values/images';
+import styles from './style';
 const ForgotPasswordScreen = ({
   email,
   txtResponse,
   onSubmit,
   goBack,
   isError,
-    onChangeText
+  onChangeText,
 }) => {
-
   return (
-        <SafeAreaView style={{ flex: 1 }}>
-            <View style={{ flex: 1 }}>
-                <View style={{ flex: 1 }}>
-                    <Image source={BgIntroduce.BgTop} style={[styles.bgFullWidth,]} />
+    <SafeAreaView style={{flex: 1}}>
+      <View style={{flex: 1}}>
+        <View style={{flex: 1}}>
+          <Image source={BgIntroduce.BgTop} style={[styles.bgFullWidth]} />
         </View>
-                <View style={{ flex: 3, alignItems: 'center' }}>
+        <View style={{flex: 3, alignItems: 'center'}}>
           <View style={styles.centerView}>
-                        <Text style={styles.txtTitle}>Khôi phục tài khoản</Text>
-                        {txtResponse && <Text style={styles.txtResponse}> {txtResponse}</Text>}
-                        <Text style={{ color: 'black', fontWeight: 'bold' }}>Email</Text>
+            <AppText style={styles.txtTitle}>Khôi phục tài khoản</AppText>
+            {txtResponse && (
+              <AppText style={styles.txtResponse}> {txtResponse}</AppText>
+            )}
+            <AppText style={{color: 'black', fontWeight: 'bold'}}>
+              Email
+            </AppText>
             <View>
-                            {isError.type && < Text style={{ color: 'red', fontSize: 11 }}>{isError.text}</Text>}
+              {isError.type && (
+                <AppText style={{color: 'red', fontSize: 11}}>
+                  {isError.text}
+                </AppText>
+              )}
               <TextInputComponent
                 value={email}
                 placeholder={'Vui lòng nhập email của bạn'}
-                                styleAreaInput={{ backgroundColor: 'white' }}
+                styleAreaInput={{backgroundColor: 'white'}}
                 autoCompleteType={'postal-address'}
                 keyboardType={'email'}
                 onChangeText={onChangeText}
               />
-
             </View>
             <ButtonComponent
               style={styles.btnSendRequest}
-                            text={"Gửi yêu cầu"}
-                            textStyle={{ color: 'white' }}
+              text={'Gửi yêu cầu'}
+              textStyle={{color: 'white'}}
               onPress={onSubmit}
             />
             <ButtonComponent
               style={styles.btnBack}
-                            text={"Quay lại"}
-                            textStyle={{ color: 'blue' }}
+              text={'Quay lại'}
+              textStyle={{color: 'blue'}}
               onPress={goBack}
             />
           </View>
         </View>
-                <View style={{ flex: 1, justifyContent: 'flex-end' }}>
-                    <Text style={{ marginLeft: 20 }}>2022 @ MeU Solutions, Inc</Text>
+        <View style={{flex: 1, justifyContent: 'flex-end'}}>
+          <AppText style={{marginLeft: 20}}>2022 @ MeU Solutions, Inc</AppText>
           <Image source={BgIntroduce.BgFtStep1} style={styles.bgFullWidth} />
         </View>
       </View>
-        </SafeAreaView >
-    )
+    </SafeAreaView>
+  );
 };
 
 export default ForgotPasswordScreen;

src/screens/authentication/introduction/IntroductionContainer.js

@@ -44,8 +44,8 @@ const IntroductionContainer = props => {
     }
   };
   const navigateToDomain = () => {
-    RootNavigation.navigate(APP_NAVIGATE_SCREEN.LOGIN)
-  }
+    RootNavigation.navigate(APP_NAVIGATE_SCREEN.LOGIN);
+  };
   const introProps = {
     indexSwiper,
     showsPagination,
@@ -53,7 +53,7 @@ const IntroductionContainer = props => {
     nextView,
     preView,
     onSwiper,
-    navigateToDomain
+    navigateToDomain,
   };
   return <IntroScreen {...introProps} />;
 };

src/screens/authentication/introduction/IntroductionScreen.js

 import React from 'react';
+import {useTranslation} from 'react-i18next';
 import {
-  SafeAreaView,
   Dimensions,
-  Text,
-  View,
   Image,
+  SafeAreaView,
   TouchableOpacity,
+  View,
 } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import Swiper from 'react-native-swiper';
-import {IMAGES, BgIntroduce} from '../../../values/images';
-import colors from '../../../values/colors';
+import AppText from '../../../components/AppText';
+import {BgIntroduce, IMAGES} from '../../../values/images';
 import string from '../../../values/string';
 import styles from './styles';
-import LinearGradient from 'react-native-linear-gradient';
-import {useTranslation} from 'react-i18next';
 
 const windowHeight = Dimensions.get('window').height;
 
@@ -21,10 +20,8 @@ const IntroductionScreen = ({
   indexSwiper,
   showsPagination,
   scroll,
-  nextView,
-  preView,
   onSwiper,
-  navigateToDomain
+  navigateToDomain,
 }) => {
   const {t, i18n} = useTranslation();
   return (
@@ -65,8 +62,8 @@ const IntroductionScreen = ({
           />
 
           {/* <Text style={styles.text}>{string.TITLE_STEP_1}</Text> */}
-          <Text style={styles.text}>{t('Overtime_monitoring')}</Text>
-          <Text style={styles.subText}>{t('Send_req_OT')}</Text>
+          <AppText style={styles.text}>{t('Overtime_monitoring')}</AppText>
+          <AppText style={styles.subText}>{t('Send_req_OT')}</AppText>
           {/* <TouchableOpacity onPress={nextView} style={[styles.startedBtn, styles.centerBtn]}>
                         <Text style={styles.txtBtn}>{string.GET_STARTED}</Text>
                     </TouchableOpacity> */}
@@ -91,8 +88,8 @@ const IntroductionScreen = ({
             }}
           />
 
-          <Text style={styles.text}>{t('Manager_Leave')}</Text>
-          <Text style={styles.subText}>{t('Track_emp_leave')}</Text>
+          <AppText style={styles.text}>{t('Manager_Leave')}</AppText>
+          <AppText style={styles.subText}>{t('Track_emp_leave')}</AppText>
           {/* <TouchableOpacity onPress={nextView} style={[styles.centerBtn, styles.noBorderBtn]} title="Next" >
                         <Text style={styles.textPrimary}>{string.NEXT_BUTTON}</Text>
                     </TouchableOpacity> */}
@@ -113,13 +110,13 @@ const IntroductionScreen = ({
             }}
           />
 
-          <Text style={styles.text}>{t('Payroll')}</Text>
-          <Text style={styles.subText}>{t('Ez_manager_payroll')}</Text>
+          <AppText style={styles.text}>{t('Payroll')}</AppText>
+          <AppText style={styles.subText}>{t('Ez_manager_payroll')}</AppText>
           <TouchableOpacity
             onPress={navigateToDomain}
             style={[styles.centerBtn, styles.noBorderBtn]}
             title="Next">
-            <Text style={styles.textPrimary}>{string.NEXT_BUTTON}</Text>
+            <AppText style={styles.textPrimary}>{string.NEXT_BUTTON}</AppText>
           </TouchableOpacity>
         </View>
       </SafeAreaView>

src/screens/authentication/login/LoginContainer.js

+/* eslint-disable prettier/prettier */
 import React, {useState} from 'react';
 import RootNavigation from '../../../navigation/RootNavigation';
 import LoginScreen from './LoginScreen';
@@ -5,10 +6,9 @@ import LoginScreen from './LoginScreen';
 import {useTranslation} from 'react-i18next';
 import OneSignal from 'react-native-onesignal';
 import {useDispatch} from 'react-redux';
-import AuthApi from '../../../network/api/authApi';
 import {getMyInfo} from '../../../store/actions/CommonAction';
-import AsyncStorageService from '../../../utils/AsyncStorageService';
 import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
+import {authenticate} from '../authSlice';
 const LoginContainer = props => {
   // console.log("props: ", props)
   const dispatch = useDispatch();
@@ -57,26 +57,23 @@ const LoginContainer = props => {
 
   const handleLogin = async () => {
     try {
-      setLoading(true);
+      // setLoading(true);
       if (!handleSetAccount) return;
-
-      // const encode_Pass = await encodePass(userAccount.password);
-      //console.log(encodeURIComponent(userAccount.password));
-      const res = await AuthApi.requestLoginApp({
-        name: userAccount.username,
-        pass: encodeURIComponent(userAccount.password),
+      dispatch(
+        authenticate({
+          username: 'trangbui%40meu-solutions.com',
+          password: 'trang12345',
+        }),
+      ).then(response => {
+        // AsyncStorageService.putToken(res.token);
+        // sendExternalId();
+        // RootNavigation.navigate(APP_NAVIGATE_SCREEN.MAIN);
+        // setLoading(false);
       });
-      //console.log(res)
-      if (res.success) {
-        AsyncStorageService.putToken(res.token);
-        sendExternalId();
-        RootNavigation.navigate(APP_NAVIGATE_SCREEN.MAIN);
-        setLoading(false);
-      }
     } catch (e) {
       console.log('error login: ', e);
       showAlertError('Hệ thống', e.toString());
-      setLoading(false);
+      // setLoading(false);
       // alertMessage(e.toString())
     }
   };

src/screens/authentication/login/LoginScreen.js

-import React, {useEffect, useState} from 'react';
-import {
-  Button,
-  SafeAreaView,
-  Dimensions,
-  TouchableOpacity,
-  Text,
-  View,
-  Image,
-} from 'react-native';
-import Swiper from 'react-native-swiper';
-import {IMAGES, BgIntroduce} from '../../../values/images';
-import colors from '../../../values/colors';
-import string from '../../../values/string';
-import styles from './styles';
-import RootNavigation from '../../../navigation/RootNavigation';
-import TextInputComponent from '../../../components/TextInputComponent';
+/* eslint-disable prettier/prettier */
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {Image, SafeAreaView, View} from 'react-native';
+import Alert from 'react-native-awesome-alerts';
+import AppText from '../../../components/AppText';
 import ButtonComponent from '../../../components/ButtonComponent';
 import LoadingProgress from '../../../components/LoadingProgress';
+import TextInputComponent from '../../../components/TextInputComponent';
+import RootNavigation from '../../../navigation/RootNavigation';
 import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
-import LinearGradient from 'react-native-linear-gradient';
-import Alert from 'react-native-awesome-alerts';
-import {useTranslation} from 'react-i18next';
-import SelectDropdown from 'react-native-select-dropdown';
-
-const windowHeight = Dimensions.get('window').height;
+import colors from '../../../values/colors';
+import {BgIntroduce, IMAGES} from '../../../values/images';
+import styles from './styles';
 
 const LoginScreen = ({
   loading,
@@ -35,7 +23,7 @@ const LoginScreen = ({
   handleUserName,
   handlePassword,
   showAlert,
-  hideAlert
+  hideAlert,
 }) => {
   const {t, i18n} = useTranslation();
   return (
@@ -46,10 +34,10 @@ const LoginScreen = ({
         </View>
         <View style={[styles.loginContainer, {flex: 4, alignItems: 'center'}]}>
           <View style={styles.viewLogin}>
-            <Text style={[styles.textTitleHeader, styles.textBlue]}>
+            <AppText style={[styles.textTitleHeader, styles.textBlue]}>
               {t('Login')}
-            </Text>
-            <Text style={{color: 'black'}}>{t('Email')}</Text>
+            </AppText>
+            <AppText style={{color: 'black'}}>{t('Email')}</AppText>
             <TextInputComponent
               styleAreaInput={{backgroundColor: colors.white}}
               placeholder={t('Enter_your_email')}
@@ -58,7 +46,7 @@ const LoginScreen = ({
               value={userAccount.username}
               leftIcon={IMAGES.IcMail}
             />
-            <Text style={{color: 'black'}}>{t('Password')}</Text>
+            <AppText style={{color: 'black'}}>{t('Password')}</AppText>
             <TextInputComponent
               styleAreaInput={{backgroundColor: colors.white}}
               placeholder={t('Enter_your_password')}
@@ -71,13 +59,13 @@ const LoginScreen = ({
               secureTextEntry={showPass}
               leftIcon={IMAGES.IcLock}
             />
-            <Text
+            <AppText
               style={styles.forgetPassword}
               onPress={() => {
                 RootNavigation.navigate(APP_NAVIGATE_SCREEN.FORGOT_PASS);
               }}>
               {t('Forgot_password')}
-            </Text>
+            </AppText>
             <ButtonComponent
               style={[
                 styles.loginScreenBtn,
@@ -98,7 +86,7 @@ const LoginScreen = ({
           </View>
         </View>
         <View style={{flex: 1, justifyContent: 'flex-end'}}>
-          <Text style={{marginLeft: 20}}>2022 @ MeU Solutions, Inc</Text>
+          <AppText style={{marginLeft: 20}}>2022 @ MeU Solutions, Inc</AppText>
           <Image source={BgIntroduce.BgFtStep1} style={styles.bgFullWidth} />
         </View>
         {loading && <LoadingProgress />}

src/screens/authentication/server/ServerContainer.js

 import React, {useEffect, useState} from 'react';
-import RootNavigation from '../../../navigation/RootNavigation';
 import ServerScreen from './ServerScreen';
+import RootNavigation from '../../../navigation/RootNavigation';
 
+import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
+import AsyncStorageKeys from '../../../utils/AsyncStorageKeys';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import SInfo from 'react-native-sensitive-info';
-import Toast from 'react-native-toast-message';
-import {useDispatch} from 'react-redux';
-import {refreshApiService} from '../../../network/ApiService';
-import api from '../../../network/axios';
-import AsyncStorageKeys from '../../../utils/AsyncStorageKeys';
-import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
 import md5 from '../../../utils/HashService';
-import {BgIntroduce} from '../../../values/images';
+import {useDispatch, useSelector} from 'react-redux';
+import api from '../../../network/axios';
+import {IMAGES, BgIntroduce} from '../../../values/images';
+import Toast from 'react-native-toast-message';
 const ServerContainer = props => {
   // console.log("props: ", props)
   const dispatch = useDispatch();
@@ -89,7 +88,6 @@ const ServerContainer = props => {
 
           api.setBaseURL(urlServer);
           storeDomain(urlServer);
-          refreshApiService();
           // console.log(api.getBaseURL(urlServer));
           setLoading(false);
         } else {
@@ -165,10 +163,6 @@ const ServerContainer = props => {
       style: {zIndex: 1001},
       visibilityTime: 2000,
     });
-    // setTimeout(() => {
-    //   CodePush.allowRestart();
-    //   CodePush.restartApp();
-    // }, 3000);
   };
 
   useEffect(() => {

src/screens/authentication/signup/SignUpContainer.js

+import React from 'react';
+import SignUpScreen from './SignUpScreen';
+const SignUpContainer = () => {
+  return <SignUpScreen />;
+};
 
- import React, { useEffect, useState } from 'react';
- import {
-   SafeAreaView,
-   ScrollView,
-   StatusBar,
-   StyleSheet,
-   Text,
-   useColorScheme,
-   View,
- } from 'react-native';
-import SignUpScreen from './SignUpScreen'
- const SignUpContainer = () => {
-   
-   
-     return (
-       <SignUpScreen />
-     )
- };
- 
- export default SignUpContainer;
- 
+export default SignUpContainer;
\ No newline at end of file

src/screens/authentication/splash/SplashScreen.js

-
-import React, { useEffect } from 'react'
-import { Image, StyleSheet, Text, View } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import colors from '../../../values/colors'
-import { ImageLogo, } from '../../../values/images'
-import FastImage from 'react-native-fast-image'
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import FastImage from 'react-native-fast-image';
+import LinearGradient from 'react-native-linear-gradient';
+import colors from '../../../values/colors';
+import {ImageLogo} from '../../../values/images';
 const SplashScreen = () => {
-
   return (
     <LinearGradient
       colors={colors.appTheme}
@@ -15,11 +13,10 @@ const SplashScreen = () => {
       angle={45}>
       <FastImage source={ImageLogo.GifLogo} style={styles.iconLogo} />
     </LinearGradient>
+  );
+};
 
-  )
-}
-
-export default SplashScreen
+export default SplashScreen;
 const styles = StyleSheet.create({
   main: {
     flex: 1,
@@ -36,4 +33,4 @@ const styles = StyleSheet.create({
     width: 300,
     height: 300,
   },
-})
+});

src/screens/confirm_date/ConfirmDateContainer.js

+import Moment from 'moment';
 import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
-import ConfirmDateScreen from './ConfirmDateScreen';
+import RootNavigation from '../../navigation/RootNavigation';
 import {
-  getUserConfirmDay,
-  getApproveConfirmDay,
   getAbsentChart,
+  getApproveConfirmDay,
+  getUserConfirmDay,
 } from '../../store/actions/UserAction';
 import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
-import RootNavigation from '../../navigation/RootNavigation';
-import Toast from 'react-native-toast-message';
-import Moment from 'moment';
 import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew';
 import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
-const ConfirmDateContainer = () => {
+import ConfirmDateScreen from './ConfirmDateScreen';
+const ConfirmDateContainer = props => {
   const dispatch = useDispatch();
-
-  const userDetails = useSelector(state => state.UserInfo.userInfo);
+  const {userDetails} = props;
   const confirmDay = useSelector(state => state.ConfirmDay.confirmDay);
   const approveConfirmList = useSelector(
     state => state.ApproveDay.approveConfirm,

src/screens/confirm_date/confirm-modals/ConfirmModalAddNew.js

@@ -4,7 +4,6 @@ import {
   ScrollView,
   TouchableOpacity,
   Image,
-  Text,
   View,
   TextInput,
   Modal,
@@ -23,6 +22,7 @@ import ButtonComponent from '../../../components/ButtonComponent';
 import {useDispatch, useSelector} from 'react-redux';
 import {launchImageLibrary} from 'react-native-image-picker';
 import {postUserConfirmDay} from '../../../store/actions/UserAction';
+import AppText from '../../../components/AppText';
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 const ConfirmModalAddNew = ({userDetails, onClose}) => {
@@ -190,7 +190,7 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
       <SafeAreaView>
         <View style={styles.modalView}>
           <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-            <Text style={styles.modalTitle}>Xác nhận ngày công</Text>
+            <AppText style={styles.modalTitle}>Xác nhận ngày công</AppText>
             <TouchableOpacity
               onPress={() => {
                 onClose(null);
@@ -204,18 +204,18 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
               style={styles.ImgAvatar}
             />
             <View style={{marginLeft: 15}}>
-              <Text style={styles.modalTitle}>{`${userDetails.first_name} ${
+              <AppText style={styles.modalTitle}>{`${userDetails.first_name} ${
                 userDetails.middle_name ? userDetails.middle_name : ''
-              } ${userDetails.last_name}`}</Text>
-              <Text>{userDetails.position}</Text>
+              } ${userDetails.last_name}`}</AppText>
+              <AppText>{userDetails.position}</AppText>
             </View>
           </View>
           <View style={styles.bodyHeightCreate}>
             <ScrollView>
               <View style={{marginTop: 20}}>
-                <Text style={styles.modalTitle}>Thông tin xác nhận</Text>
+                <AppText style={styles.modalTitle}>Thông tin xác nhận</AppText>
                 <View style={styles.rowView}>
-                  <Text style={{flex: 1}}>Từ ngày</Text>
+                  <AppText style={{flex: 1}}>Từ ngày</AppText>
                   <View style={{flex: 1}}>
                     <TouchableOpacity
                       onPress={() =>
@@ -232,9 +232,9 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                           justifyContent: 'flex-end',
                         },
                       ]}>
-                      <Text>
+                      <AppText>
                         {Moment(confirmDate.since).format('DD/MM/YYYY')}
-                      </Text>
+                      </AppText>
                       <Image
                         source={IMAGES.IcCalendarGray}
                         style={{width: 20, height: 20}}
@@ -264,7 +264,7 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                   </View>
                 </View>
                 <View style={styles.rowView}>
-                  <Text>Giờ</Text>
+                  <AppText>Giờ</AppText>
                   <TouchableOpacity
                     onPress={() =>
                       setOpenTimePicker(state => ({
@@ -273,7 +273,9 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                       }))
                     }
                     style={{flexDirection: 'row'}}>
-                    <Text>{Moment(confirmDate.hourSince).format('HH:mm')}</Text>
+                    <AppText>
+                      {Moment(confirmDate.hourSince).format('HH:mm')}
+                    </AppText>
                     <Image
                       source={IMAGES.IcLockGrey}
                       style={{width: 20, height: 20}}
@@ -302,7 +304,7 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                   />
                 </View>
                 <View style={styles.rowView}>
-                  <Text style={{flex: 1}}>Đến ngày</Text>
+                  <AppText style={{flex: 1}}>Đến ngày</AppText>
                   <View style={{flex: 1}}>
                     <TouchableOpacity
                       onPress={() =>
@@ -319,9 +321,9 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                           justifyContent: 'flex-end',
                         },
                       ]}>
-                      <Text>
+                      <AppText>
                         {Moment(confirmDate.finish).format('DD/MM/YYYY')}
-                      </Text>
+                      </AppText>
                       <Image
                         source={IMAGES.IcCalendarGray}
                         style={{width: 20, height: 20}}
@@ -351,7 +353,7 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                   </View>
                 </View>
                 <View style={styles.rowView}>
-                  <Text>Giờ</Text>
+                  <AppText>Giờ</AppText>
                   <TouchableOpacity
                     onPress={() =>
                       setOpenTimePicker(state => ({
@@ -360,9 +362,9 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                       }))
                     }
                     style={{flexDirection: 'row'}}>
-                    <Text>
+                    <AppText>
                       {Moment(confirmDate.hourFinish).format('HH:mm')}
-                    </Text>
+                    </AppText>
                     <Image
                       source={IMAGES.IcLockGrey}
                       style={{width: 20, height: 20}}
@@ -392,13 +394,13 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                 </View>
 
                 <View style={styles.rowView}>
-                  <Text
+                  <AppText
                     style={{
                       flex: 1,
                       color: confirmDate.reason.length === 0 ? 'red' : 'grey',
                     }}>
                     {`Lý do (*)`}
-                  </Text>
+                  </AppText>
                   <View style={{flex: 1}}>
                     <TextInput
                       style={styles.inputText}
@@ -414,7 +416,7 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                   </View>
                 </View>
                 <View style={styles.rowView}>
-                  <Text style={{flex: 1}}>Tệp đính kèm</Text>
+                  <AppText style={{flex: 1}}>Tệp đính kèm</AppText>
                   <View
                     style={{
                       flex: 2,
@@ -451,7 +453,7 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                   </View>
                 </View>
                 <View style={{marginTop: 20}}>
-                  <Text
+                  <AppText
                     style={[
                       styles.modalTitle,
                       {
@@ -459,7 +461,7 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                       },
                     ]}>
                     Người duyệt
-                  </Text>
+                  </AppText>
                   {userManagerList.map((item, index) => (
                     <View
                       key={index}
@@ -476,18 +478,18 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                           style={{width: 60, height: 60, borderRadius: 10}}
                         />
                         <View>
-                          <Text
+                          <AppText
                             style={{
                               fontSize: 16,
                               fontWeight: '500',
                               marginLeft: 10,
-                            }}>{`${item.extend_user_full_name}`}</Text>
-                          <Text
+                            }}>{`${item.extend_user_full_name}`}</AppText>
+                          <AppText
                             style={{
                               fontSize: 13,
                               fontWeight: '500',
                               marginLeft: 10,
-                            }}>{`${item?.position} - ${item?.department}`}</Text>
+                            }}>{`${item?.position} - ${item?.department}`}</AppText>
                         </View>
                       </View>
                       <CheckBox
@@ -513,12 +515,12 @@ const ConfirmModalAddNew = ({userDetails, onClose}) => {
                 onClose(null);
               }}
               style={styles.btnCancel}>
-              <Text style={styles.blueTxt}>Hủy</Text>
+              <AppText style={styles.blueTxt}>Hủy</AppText>
             </TouchableOpacity>
             <TouchableOpacity
               style={styles.btnSubmit}
               onPress={onSubmitConfirmDate}>
-              <Text style={styles.whiteTxt}>Gửi yêu cầu</Text>
+              <AppText style={styles.whiteTxt}>Gửi yêu cầu</AppText>
             </TouchableOpacity>
           </View>
         </View>

src/screens/confirm_date/index.js

+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+import {useSelector} from 'react-redux';
+import {authSelector} from '../../app/selectors';
+import ConfirmDateContainer from './ConfirmDateContainer';
+
+export default function ConfirmDateScreen() {
+  const userDetails = useSelector(authSelector);
+
+  const {isLogin, userLoginInfo} = userDetails;
+
+  const homeScreenProps = {
+    isLogin,
+    userLoginInfo,
+  };
+  return <ConfirmDateContainer {...homeScreenProps} />;
+}

src/screens/home/HomeContainer.js

-import React, {useEffect, useState, useCallback} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
-import {
-  getRandomQuotation,
-  getBirthDayUserByDate,
-  getUserDirectManagers,
-  getCompanyInfo,
-  getPersonnel,
-  sendNotification,
-  getNotificationOfUser,
-} from '../../store/actions/UserAction';
+/* eslint-disable prettier/prettier */
+import Moment from 'moment';
+import React, {useCallback, useEffect, useState} from 'react';
 import {
-  Platform,
-  Linking,
-  BackHandler,
   Alert,
-  View,
-  Text,
-  TouchableOpacity,
+  BackHandler,
   Image,
+  Linking,
+  Platform,
+  TouchableOpacity,
+  View,
 } from 'react-native';
-import HomeScreen from './HomeScreen';
-import Moment from 'moment';
 import {launchImageLibrary} from 'react-native-image-picker';
 import Swiper from 'react-native-swiper';
-import styles from './style';
-import {IMAGES, IconProfile} from '../../values/images';
 import Toast from 'react-native-toast-message';
+import {useDispatch} from 'react-redux';
+import AppText from '../../components/AppText';
+import {
+  getBirthDayUserByDate,
+  getNotificationOfUser,
+  getPersonnel,
+  sendNotification,
+} from '../../store/actions/UserAction';
+import {IMAGES} from '../../values/images';
 import ProfileUserComponent from './components/ProfileUserComponent';
-import QuotesComponent from './components/QuotesComponent';
+import homePropsProvider from './homePropsProvider';
+import {
+  getBirthDayUser,
+  getRadomQuotation,
+  getUserDirectManagers,
+} from './homeSlice';
+import styles from './style';
+import HomeMainView from './template/HomeMainView';
 
-// import {CheckInPage} from '@meunpm/imcheckin';
-const HomeContainer = () => {
+const HomeContainer = props => {
+  const {userDetails, quotationList, birthdayListInMonth, randomQuotation} =
+    props;
   const dispatch = useDispatch();
-  const userDetails = useSelector(state => state.UserInfo.userInfo);
-  const quotation = useSelector(state => state.Quotation.quotation);
-  const BirthDay = useSelector(state => state.BirthDayUser.birthday);
 
   const [arrPersonnel, setArrPersonnel] = useState([]);
   //console.log('userDetails', userDetails);
@@ -84,15 +85,8 @@ const HomeContainer = () => {
     day: '',
     managerOpenWish: [],
   });
-  const [chooseSetting, setSettingView] = useState({
-    isVisible: false,
-    view: <QuotesComponent quotation={quotation} />,
-    title: 'Slide personnel',
-  });
-  const [openProfileComponent, setOpenProfileComponent] = useState(false);
-  const [openCheckIn, setOpenCheckIn] = useState(false);
-  const [imgArr, setImgArr] = useState([]);
 
+  const [openProfileComponent, setOpenProfileComponent] = useState(false);
   {
     /**wish birthday */
   }
@@ -110,18 +104,12 @@ const HomeContainer = () => {
 
   const handleOpenDesBirthday = useCallback(
     day => {
-      //   console.log(
-      //     'bdUserCurrentMonth',
-      //     `${day.day < 10 ? `0${day.day}` : `${day.day}`}-${
-      //       day.month < 10 ? `0${day.month}` : `${day.month}`
-      //     }-${day.year}`,
-      //   );
       const formatDate = `${day.day < 10 ? `0${day.day}` : `${day.day}`}-${
         day.month < 10 ? `0${day.month}` : `${day.month}`
       }-${day.year}`;
       let arrBdUser = [];
       let lengthKey = [];
-      for (const [key, value] of Object.entries(BirthDay)) {
+      for (const [key, value] of Object.entries(birthdayListInMonth)) {
         if (key.includes(formatDate)) {
           arrBdUser.push(...value);
           value.forEach(item => lengthKey.push({enable: false}));
@@ -135,7 +123,7 @@ const HomeContainer = () => {
         managerOpenWish: lengthKey,
       });
     },
-    [BirthDay],
+    [birthdayListInMonth],
   );
   const handleCloseDesBirthday = useCallback(() => {
     setModalVisible({
@@ -232,16 +220,15 @@ const HomeContainer = () => {
     }
   };
   const formatDateList = async () => {
-    // const tokenUser = await AsyncStorage.getItem(AsyncStorageKeys.userToken);
-    //console.log('tokenUser', tokenUser);
-    var size = Object.keys(BirthDay).length;
+    if (birthdayListInMonth) {
+      var size = Object.keys(birthdayListInMonth).length;
       const today = new Date();
       const formatToday = Moment(today).format('DD-MM-YYYY');
       // console.log(formatToday)
       // console.log('size', size)
       if (size >= 1) {
         let lstBdUser = [];
-      for (const [key, value] of Object.entries(BirthDay)) {
+        for (const [key, value] of Object.entries(birthdayListInMonth)) {
           if (value.length > 0) {
             //console.log("key", value)
             if ([key].length > 0) {
@@ -255,7 +242,7 @@ const HomeContainer = () => {
             }
           }
           if (key.includes(formatToday)) {
-          const lengthObj = BirthDay[key];
+            const lengthObj = birthdayListInMonth[key];
             //console.log("lengthObj", lengthObj);
             if (lengthObj.length <= 0) {
             } else {
@@ -270,14 +257,9 @@ const HomeContainer = () => {
         const convertArr = Object.assign({}, ...lstBdUser);
         setArrBdCurrentMonth(convertArr);
       }
+    }
   };
-  const getBirthDayUserByMonth = () => {
-    const date = new Date();
-    const month =
-      date.getMonth() > 8 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
-    //console.log(month)
-    dispatch(getBirthDayUserByDate(month, date.getFullYear()));
-  };
+
   const onCalendarChangeMonth = time => {
     dispatch(getBirthDayUserByDate(time.month, time.year));
   };
@@ -360,12 +342,12 @@ const HomeContainer = () => {
                     style={styles.imgAvatar}
                   />
                 </TouchableOpacity>
-                <Text style={{color: 'black', fontSize: 18}}>
+                <AppText style={{color: 'black', fontSize: 18}}>
                   {`${item.first_name} ${
                     item.middle_name ? item.middle_name : ''
                   } ${item.last_name}`}{' '}
-                </Text>
-                <Text style={{marginBottom: 20}}>{item.position}</Text>
+                </AppText>
+                <AppText style={{marginBottom: 20}}>{item.position}</AppText>
               </View>
             );
           })}
@@ -375,12 +357,7 @@ const HomeContainer = () => {
   const openCheckInPage = () => {
     // setOpenCheckIn(<CheckInPage />);
   };
-  const openSettingView = () => {
-    setSettingView(prev => ({
-      ...prev,
-      isVisible: true,
-    }));
-  };
+
   const chooseSettingView = () => {
     if (chooseSetting.title == 'Slide personnel') {
       setSettingView({
@@ -391,14 +368,12 @@ const HomeContainer = () => {
     } else {
       setSettingView({
         isVisible: false,
-        view: <QuotesComponent quotation={quotation} />,
+        view: <QuotesComponent quotation={quotationList} />,
         title: 'Slide personnel',
       });
     }
   };
-  const hideMenu = () => {
-    setSettingView(prev => ({...prev, isVisible: false}));
-  };
+
   const OpenProfileUserComponent = info => {
     //console.log('info', info);
     return setOpenProfileComponent(
@@ -413,6 +388,27 @@ const HomeContainer = () => {
     return setOpenProfileComponent();
   };
 
+  // fetch data
+  const fetchQuotations = () => {
+    dispatch(getRadomQuotation());
+  };
+  const fetchDirectManagers = () => {
+    dispatch(getUserDirectManagers());
+  };
+  const fetchBirthDayUser = () => {
+    const date = new Date();
+    const month =
+      date.getMonth() > 8 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
+    //console.log(month)
+    dispatch(getBirthDayUser({month, year: date.getFullYear()}));
+  };
+  const initialFetchData = () => {
+    fetchQuotations();
+    fetchBirthDayUser();
+    loadWishUser();
+    loadListPersonnel();
+    fetchDirectManagers();
+  };
   // useEffect
   useEffect(() => {
     const backAction = () => {
@@ -426,50 +422,35 @@ const HomeContainer = () => {
       ]);
       return true;
     };
-
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
       backAction,
     );
-    let time = setTimeout(() => dispatch(getRandomQuotation()), 20000);
-    getBirthDayUserByMonth();
-    loadWishUser();
-    dispatch(getUserDirectManagers());
-    loadListPersonnel();
+    initialFetchData();
     return () => {
-      clearTimeout(time);
       backHandler.remove();
     };
   }, []);
 
   useEffect(() => {
-    BirthDay && formatDateList();
-  }, [BirthDay]);
-
-  // useEffect(() => {
-  //   modalVisible && console.log(modalVisible);
-  // }, [modalVisible]);
+    birthdayListInMonth && formatDateList();
+  }, [birthdayListInMonth]);
 
   //props
   const homeProps = {
     userDetails,
-    quotation,
+    quotationList,
     birthdayOfUser,
     dataBirthday,
     openView,
     bdUserCurrentMonth,
-    BirthDay,
     modalVisible,
-    imgArr,
     arrPersonnel,
     wishTxt,
     wishList,
     openProfileComponent,
-    openCheckIn,
-    chooseSetting,
+    randomQuotation,
     chooseSettingView,
-    openSettingView,
-    hideMenu,
     OpenProfileUserComponent,
     setWishTxt,
     sendWishBirthday,
@@ -485,7 +466,7 @@ const HomeContainer = () => {
     onCalendarChangeMonth,
     openCheckInPage,
   };
-  return <HomeScreen {...homeProps} />;
+  return <HomeMainView {...homePropsProvider(homeProps)} />;
 };
 
 export default HomeContainer;

src/screens/home/components/ProfileUserComponent.js

-import Moment from 'moment';
-import React, {useCallback, useState, useRef} from 'react';
+import React from 'react';
 import {
-  Image,
-  Text,
-  View,
-  TouchableOpacity,
   Dimensions,
+  Image,
   StyleSheet,
+  TouchableOpacity,
+  View,
 } from 'react-native';
-import FastImage from 'react-native-fast-image';
 import ButtonComponent from '../../../components/ButtonComponent';
-import {GifType, IMAGES} from '../../../values/images';
+import {IMAGES} from '../../../values/images';
+import AppText from '../../../components/AppText';
 const windowWidth = Dimensions.get('window').width;
 const ProfileUserComponent = ({userDetails, onClose}) => {
   //console.log('userDetails', userDetails);
@@ -30,8 +28,8 @@ const ProfileUserComponent = ({userDetails, onClose}) => {
           ]}>
           <Image
             source={
-              (userDetails.cover_image && {
-                uri: 'https://meu.anawork.com' + userDetails.cover_image,
+              (userDetails?.cover_image && {
+                uri: 'https://meu.anawork.com' + userDetails?.cover_image,
               }) ||
               IMAGES.ImageCoverBg
             }
@@ -45,25 +43,25 @@ const ProfileUserComponent = ({userDetails, onClose}) => {
               style={styles.imgAvatar}
             />
           </TouchableOpacity>
-          <Text style={{color: 'black', fontSize: 18}}>
+          <AppText style={{color: 'black', fontSize: 18}}>
             {`${userDetails.extend_user_full_name}`}
-          </Text>
-          <Text style={{marginBottom: 20}}>{userDetails.position}</Text>
+          </AppText>
+          <AppText style={{marginBottom: 20}}>{userDetails.position}</AppText>
         </View>
         <View style={[styles.viewContent, {padding: 10}]}>
           <View style={{borderBottomWidth: 1}}>
-            <Text style={{fontSize: 17, color: 'black'}}>
+            <AppText style={{fontSize: 17, color: 'black'}}>
               Thông tin cá nhân
-            </Text>
+            </AppText>
           </View>
           <View style={styles.viewInfo}>
             <View style={{flex: 1, flexDirection: 'row'}}>
               <Image source={IMAGES.IcInfoGuess} style={{marginRight: 10}} />
               <View>
-                <Text>Họ và tên</Text>
-                <Text style={styles.subTxt}>
+                <AppText>Họ và tên</AppText>
+                <AppText style={styles.subTxt}>
                   {userDetails.extend_user_full_name}
-                </Text>
+                </AppText>
               </View>
             </View>
           </View>
@@ -71,10 +69,10 @@ const ProfileUserComponent = ({userDetails, onClose}) => {
             <View style={{flex: 1, flexDirection: 'row'}}>
               <Image source={IMAGES.IcInfoGuess} style={{marginRight: 10}} />
               <View>
-                <Text>Giới tính</Text>
-                <Text style={styles.subTxt}>
+                <AppText>Giới tính</AppText>
+                <AppText style={styles.subTxt}>
                   {userDetails.gender ? 'Nam' : 'Nữ'}
-                </Text>
+                </AppText>
               </View>
             </View>
           </View>
@@ -84,8 +82,8 @@ const ProfileUserComponent = ({userDetails, onClose}) => {
               style={{marginRight: 10, height: 20, width: 20}}
             />
             <View>
-              <Text>Số điện thoại</Text>
-              <Text style={styles.subTxt}>{userDetails.cell_phone}</Text>
+              <AppText>Số điện thoại</AppText>
+              <AppText style={styles.subTxt}>{userDetails.cell_phone}</AppText>
             </View>
           </View>
           <View style={{flexDirection: 'row'}}>
@@ -94,8 +92,8 @@ const ProfileUserComponent = ({userDetails, onClose}) => {
               style={{marginRight: 10, height: 20, width: 20}}
             />
             <View>
-              <Text>Email</Text>
-              <Text style={styles.subTxt}>{userDetails.email}</Text>
+              <AppText>Email</AppText>
+              <AppText style={styles.subTxt}>{userDetails.email}</AppText>
             </View>
           </View>
         </View>

src/screens/home/components/WishListComponent.js

-import moment from 'moment';
-import React, {useCallback, useState, useRef} from 'react';
+/* eslint-disable prettier/prettier */
+import React from 'react';
 import {
-  Image,
-  Text,
-  View,
-  TouchableOpacity,
   Dimensions,
+  Image,
   StyleSheet,
+  TouchableOpacity,
+  View,
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import {GifType} from '../../../values/images';
+import AppText from '../../../components/AppText';
 const windowWidth = Dimensions.get('window').width;
 const WishListComponent = ({
   userDetails,
@@ -20,7 +20,9 @@ const WishListComponent = ({
 }) => {
   return (
     <View style={styles.viewContent}>
-      <Text style={[styles.txtTitle, {padding: 10}]}>Lời chúc sinh nhật</Text>
+      <AppText style={[styles.txtTitle, {padding: 10}]}>
+        Lời chúc sinh nhật
+      </AppText>
 
       {dataBirthday.map((item, index) => (
         <View
@@ -44,10 +46,10 @@ const WishListComponent = ({
                 style={{width: 40, height: 40}}
               />
               <View style={{paddingLeft: 10}}>
-                <Text style={styles.txtTitle}>
+                <AppText style={styles.txtTitle}>
                   {item.extend_sender_full_name}
-                </Text>
-                <Text>{item.position}</Text>
+                </AppText>
+                <AppText>{item.position}</AppText>
               </View>
             </View>
             {!openView[index].enable && (
@@ -55,7 +57,9 @@ const WishListComponent = ({
                 <TouchableOpacity
                   onPress={() => openModalHappyBirthday(index)}
                   style={styles.btnOpenHappyBirthday}>
-                  <Text style={{color: 'blue', fontWeight: '500'}}>Xem</Text>
+                  <AppText style={{color: 'blue', fontWeight: '500'}}>
+                    Xem
+                  </AppText>
                 </TouchableOpacity>
               </View>
             )}
@@ -63,7 +67,7 @@ const WishListComponent = ({
           {openView[index].enable && (
             <View>
               <View style={{marginTop: 10}}>
-                <Text style={[styles.txtTitle]}>{item?.details}</Text>
+                <AppText style={[styles.txtTitle]}>{item?.details}</AppText>
                 {item.image_path && (
                   <Image
                     source={{
@@ -92,7 +96,10 @@ const WishListComponent = ({
               <TouchableOpacity
                 onPress={() => closeModalHappyBirthday(index)}
                 style={{alignSelf: 'flex-end'}}>
-                <Text style={{color: 'blue', fontWeight: '600'}}> Đóng</Text>
+                <AppText style={{color: 'blue', fontWeight: '600'}}>
+                  {' '}
+                  Đóng
+                </AppText>
               </TouchableOpacity>
             </View>
           )}

src/screens/home/homePropsProvider.js

+/* eslint-disable prettier/prettier */
+export default function homePropsProvider(props) {
+  const {
+    userDetails,
+    quotationList,
+    birthdayOfUser,
+    dataBirthday,
+    openView,
+    bdUserCurrentMonth,
+    modalVisible,
+    imgArr,
+    arrPersonnel,
+    wishTxt,
+    wishList,
+    openProfileComponent,
+    openCheckIn,
+    chooseSetting,
+    chooseSettingView,
+    openSettingView,
+    hideMenu,
+    OpenProfileUserComponent,
+    setWishTxt,
+    sendWishBirthday,
+    SlidePersonnel,
+    openModalHappyBirthday,
+    closeModalHappyBirthday,
+    openModalWishBirthday,
+    closeModalWishBirthday,
+    OpenURLButton,
+    handleOpenDesBirthday,
+    handleCloseDesBirthday,
+    addMoreImgFromGallery,
+    onCalendarChangeMonth,
+    openCheckInPage,
+    randomQuotation,
+  } = props;
+  return {
+    userDetails,
+    openView,
+    openModalHappyBirthday,
+    closeModalHappyBirthday,
+    wishList,
+    openProfileComponent,
+    openCheckIn,
+    chooseSetting,
+    chooseSettingView,
+    openSettingView,
+    calendarBirthdayProps: {
+      birthdayOfUser,
+      bdUserCurrentMonth,
+      handleOpenDesBirthday,
+      onCalendarChangeMonth,
+    },
+    randomQuotation,
+  };
+}

src/screens/home/homeSlice.js

+/* eslint-disable prettier/prettier */
+import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
+
+import serviceRequest from '../../app/serviceRequest';
+
+import homeAPI from '../../api/homeAPI';
+import Utils from '../../utils';
+
+const initialHome = {
+  quotationList: [],
+  news: [],
+  birthdayListInMonth: [],
+};
+
+export const getQuotation = createAsyncThunk(
+  'home/getQuotation',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: homeAPI.requestGetQuotation,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+export const getRadomQuotation = createAsyncThunk(
+  'home/getRadomQuotation',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: homeAPI.requestGetRandomQuotation,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+export const getUserDirectManagers = createAsyncThunk(
+  'home/getUserDirectManagers',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: homeAPI.requestGetUsersDirectManagers,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+export const getBirthDayUser = createAsyncThunk(
+  'home/getBirthDayUser',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: homeAPI.requestGetBirthdayUser,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+
+const homeSlice = createSlice({
+  name: 'home',
+  initialState: initialHome,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(getQuotation.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+      console.log('action', action);
+      if (success) {
+        state.quotationList = Utils.getValues(
+          action,
+          'payload.data.collection',
+          [],
+        );
+      }
+    });
+    builder.addCase(getRadomQuotation.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+      if (success) {
+        state.randomQuotation = Utils.getValues(action, 'payload.data', null);
+      }
+    });
+    builder.addCase(getBirthDayUser.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+      console.log('getBirthDayUser', action);
+      if (success) {
+        state.birthdayListInMonth = Utils.getValues(
+          action,
+          'payload.data.collection',
+          [],
+        );
+      }
+    });
+  },
+});
+
+const {reducer} = homeSlice;
+export default reducer;

src/screens/home/index.js

+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+import {useSelector} from 'react-redux';
+import HomeContainer from './homeContainer';
+import {authSelector, homeSelector} from '../../app/selectors';
+
+export default function HomeScreen() {
+  const homeSelect = useSelector(homeSelector);
+  const userDetails = useSelector(authSelector);
+
+  const {isLogin, userLoginInfo} = userDetails;
+  const {quotationList, birthdayListInMonth, randomQuotation} = homeSelect;
+
+  const homeScreenProps = {
+    isLogin,
+    userLoginInfo,
+    quotationList,
+    birthdayListInMonth,
+    randomQuotation,
+  };
+  return <HomeContainer {...homeScreenProps} />;
+}

src/screens/home/modals/BirthdayModals.js

-import moment from 'moment';
-import React, {useCallback, useState, useRef} from 'react';
+/* eslint-disable prettier/prettier */
+import React from 'react';
 import {
   Image,
+  Modal,
   ScrollView,
-  Text,
   TextInput,
-  Modal,
-  View,
   TouchableOpacity,
+  View,
 } from 'react-native';
+import FastImage from 'react-native-fast-image';
 import ButtonComponent from '../../../components/ButtonComponent';
 import {IMAGES, IconProfile} from '../../../values/images';
 import styles from '../style';
-import FastImage from 'react-native-fast-image';
-const BirthdayModal = ({
-    modalVisible
-}) => {
-  console.log('modalVisible', modalVisible);
+import AppText from '../../../components/AppText';
+const BirthdayModal = ({modalVisible}) => {
   return (
     <Modal animationType="slide" transparent={true} visible={true}>
       <View
@@ -36,9 +33,9 @@ const BirthdayModal = ({
               }}
               onPress={handleCloseDesBirthday}
             />
-            <Text style={{color: 'black', fontWeight: 'bold', fontSize: 14}}>
+            <AppText style={{color: 'black', fontWeight: 'bold', fontSize: 14}}>
               {`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`}
-            </Text>
+            </AppText>
             {modalVisible?.birthdayArr?.map((item, index) => (
               <View
                 key={index}
@@ -61,11 +58,11 @@ const BirthdayModal = ({
                       style={{width: 40, height: 40}}
                     />
                     <View style={{paddingLeft: 10}}>
-                      <Text
+                      <AppText
                         style={
                           styles.txtTitle
-                        }>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</Text>
-                      <Text>{item.position}</Text>
+                        }>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</AppText>
+                      <AppText>{item.position}</AppText>
                     </View>
                   </View>
                   {!modalVisible?.managerOpenWish[index].enable && (
@@ -77,9 +74,9 @@ const BirthdayModal = ({
                       <TouchableOpacity
                         onPress={() => openModalWishBirthday(index)}
                         style={styles.btnOpenHappyBirthday}>
-                        <Text style={{color: 'blue', fontWeight: '500'}}>
+                        <AppText style={{color: 'blue', fontWeight: '500'}}>
                           Gửi lời chúc
-                        </Text>
+                        </AppText>
                       </TouchableOpacity>
                     </View>
                   )}
@@ -144,17 +141,17 @@ const BirthdayModal = ({
                       <TouchableOpacity
                         onPress={() => closeModalWishBirthday(index)}
                         style={{alignSelf: 'flex-end'}}>
-                        <Text style={{color: 'blue', fontWeight: '600'}}>
+                        <AppText style={{color: 'blue', fontWeight: '600'}}>
                           {' '}
                           Hủy{' '}
-                        </Text>
+                        </AppText>
                       </TouchableOpacity>
                       <TouchableOpacity
                         onPress={() => closeModalHappyBirthday(index)}
                         style={{alignSelf: 'flex-end'}}>
-                        <Text style={{color: 'blue', fontWeight: '600'}}>
+                        <AppText style={{color: 'blue', fontWeight: '600'}}>
                           Gửi
-                        </Text>
+                        </AppText>
                       </TouchableOpacity>
                     </View>
                   </View>

src/screens/home/story/StoryContainer.js

-import React, {useEffect, useState, useCallback} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
-import {
-  getRandomQuotation,
-  getBirthDayUserByDate,
-  getUserDirectManagers,
-  getCompanyInfo,
-} from '../../../store/actions/UserAction';
-import {Platform, Linking, BackHandler, Alert} from 'react-native';
-import StoryScreen from './StoryScreen';
-import Moment from 'moment';
-const StoryContainer = () => {
-  const dispatch = useDispatch();
-  const userDetails = useSelector(state => state.UserInfo.userInfo);
-
-  useEffect(() => {}, []);
-
-  //props
-  const storyProps = {
-    userDetails,
-  };
-  return <StoryScreen {...storyProps} />;
-};
-
-export default StoryContainer;

src/screens/home/story/StoryScreen.js

-import React, {useEffect, useState} from 'react';
-import {
-  SafeAreaView,
-  TouchableOpacity,
-  Image,
-  Text,
-  View,
-  Modal,
-  TextInput,
-  ScrollView,
-  ImageBackground,
-  Animated,
-} from 'react-native';
-
-import {
-  IMAGES,
-  IconProfile,
-  IconSocial,
-  BgIntroduce,
-  StoryIc,
-} from '../../../values/images';
-import Moment from 'moment';
-import {viewStyles, btnStyles, txtStyles} from './styles';
-import ButtonComponent from '../../../components/ButtonComponent';
-
-const StoreScreen = ({userDetails}) => {
-  //console.log("userDetails", userDetails)
-
-  return (
-    <View style={{backgroundColor: 'white', padding: 15, flexDirection: 'row'}}>
-      <TouchableOpacity style={viewStyles.viewItemStory}>
-        <View style={viewStyles.viewContainImg}>
-          <Image
-            source={{
-              uri: 'https://meu.anawork.com' + userDetails.avatar,
-            }}
-            style={viewStyles.imgBackground}
-          />
-        </View>
-        <ButtonComponent
-          style={btnStyles.btnCreate}
-          iconSource={StoryIc.IconAddStory}
-          styleIcon={{width: 35, height: 35}}
-        />
-        <Text style={txtStyles.txtTitle}>Tạo tin</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={viewStyles.viewItemStory}>
-        <ImageBackground
-          source={BgIntroduce.BgStep1}
-          imageStyle={{
-            borderRadius: 10,
-            opacity: 0.8,
-            backgroundColor: '#E0E0E0',
-          }}
-          style={{
-            height: '100%',
-            width: '100%',
-          }}>
-          {/* <View style={viewStyles.viewContainImg}>
-            <Image
-              source={{
-                uri: 'https://meu.anawork.com' + userDetails.avatar,
-              }}
-              style={viewStyles.imgBackground}
-            />
-          </View> */}
-          <View
-            style={{
-              justifyContent: 'space-between',
-              height: '100%',
-              paddingLeft: 10,
-              paddingBottom: 10,
-              paddingTop: 10,
-            }}>
-            <View
-              style={{
-                borderRadius: 30,
-                backgroundColor: '#1876F2',
-                width: 40,
-                height: 40,
-                justifyContent: 'center',
-                alignItems: 'center',
-                zIndex: 100,
-              }}>
-              <Image
-                source={{
-                  uri: 'https://meu.anawork.com' + userDetails.avatar,
-                }}
-                style={{width: 30, height: 30, borderRadius: 30}}
-              />
-            </View>
-            <Text style={{color: 'white', textAlign: 'left'}}>
-              Nguyễn Tiến Dũng
-            </Text>
-          </View>
-        </ImageBackground>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default StoreScreen;

src/screens/home/story/styles.js

-import {StyleSheet, Dimensions} from 'react-native';
-import colors from '../../../values/colors';
-const width = Dimensions.get('window').width;
-const windowWidth = Dimensions.get('window').height;
-
-export const viewStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  viewItemStory: {
-    borderRadius: 10,
-    height: 200,
-    width: 130,
-    backgroundColor: 'white',
-    shadowColor: '#000000',
-    shadowOffset: {
-      width: 0,
-      height: 8,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 10,
-    elevation: 10,
-    marginLeft: 10,
-  },
-  viewContainImg: {
-    width: '100%',
-    height: 140,
-    borderBottomWidth: 0.5,
-    borderColor: 'grey',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  imgBackground: {
-    width: '100%',
-    height: '100%',
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-  },
-});
-export const btnStyles = StyleSheet.create({
-  btnCreate: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'center',
-    padding: 5,
-    borderRadius: 30,
-    marginTop: -25,
-    backgroundColor: 'white',
-  },
-});
-export const txtStyles = StyleSheet.create({
-  txtTitle: {textAlign: 'center', fontWeight: '500', color: 'black'},
-});

src/screens/home/style.js

@@ -5,10 +5,12 @@ const windowWidth = Dimensions.get('window').width;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    padding: 10,
   },
   viewContent: {
+    borderRadius: 5,
     borderWidth: 1,
-    width: windowWidth - 20,
+    width: '100%',
     borderColor: 'white',
     backgroundColor: 'white',
     alignSelf: 'center',

src/screens/home/template/HomeMainView.js

+/* eslint-disable prettier/prettier */
+import React from 'react';
+import {SafeAreaView, ScrollView, View} from 'react-native';
+import ButtonComponent from '../../../components/ButtonComponent';
+import {IMAGES} from '../../../values/images';
+import styles from '../style';
+
+import WishListComponent from '../components/WishListComponent';
+import CalendarBirthday from './subViews/CalendarBirthday';
+import Quotation from './subViews/QuotationList';
+const HomeMainView = ({
+  userDetails,
+  openView,
+  openModalHappyBirthday,
+  closeModalHappyBirthday,
+  wishList,
+  openProfileComponent,
+  openCheckIn,
+  chooseSetting,
+  chooseSettingView,
+  openSettingView,
+  calendarBirthdayProps,
+  randomQuotation,
+}) => {
+  return (
+    <SafeAreaView style={styles.container}>
+      {!openCheckIn && (
+        <ScrollView
+          style={{
+            backgroundColor: openProfileComponent ? 'grey' : null,
+          }}
+          nestedScrollEnabled={true}
+          showsVerticalScrollIndicator={false}>
+          <View>
+            <View
+              style={{
+                position: 'absolute',
+                top: 10,
+                right: 5,
+                zIndex: 100,
+              }}>
+              <ButtonComponent
+                style={{position: 'absolute', top: 10, right: 10}}
+                iconSource={IMAGES.IcMore}
+                styleIcon={{width: 20, height: 20}}
+                onPress={openSettingView}
+              />
+              {chooseSetting?.isVisible && (
+                <ButtonComponent
+                  style={{
+                    backgroundColor: 'white',
+                    padding: 10,
+                    position: 'absolute',
+                    top: 30,
+                    right: 10,
+                  }}
+                  text={chooseSetting?.title}
+                  onPress={chooseSettingView}
+                />
+              )}
+            </View>
+            <Quotation quotation={randomQuotation} />
+          </View>
+          {/*Calendar*/}
+          <CalendarBirthday {...calendarBirthdayProps} />
+          {/*wish */}
+          {wishList.length > 0 && (
+            <WishListComponent
+              userDetails={userDetails}
+              openView={openView}
+              openModalHappyBirthday={openModalHappyBirthday}
+              closeModalHappyBirthday={closeModalHappyBirthday}
+              dataBirthday={wishList}
+            />
+          )}
+        </ScrollView>
+      )}
+      {openProfileComponent && openProfileComponent}
+    </SafeAreaView>
+  );
+};
+
+export default HomeMainView;