fix profile screen

src/navigation/BottomTabNavigation.js

@@ -4,14 +4,12 @@ import {Image} from 'react-native';
 import {useSelector} from 'react-redux';
 import {authSelector} from '../app/selectors';
 import HeaderComponent from '../components/header/HeaderComponent';
+import config from '../config';
 import NotificationScreen from '../screens/notification/NotificationContainer';
-import ProfileScreen from '../screens/profile/ProfileContainer';
+import ProfileScreen from '../screens/profile';
 import {APP_NAVIGATE_SCREEN} from '../utils/constant';
 import {IconDrawer, IMAGES} from '../values/images';
-import DayWageNavigation from './DayWageTopTabNavigation';
 import TopTabNavigation from './TopTabNavigation';
-import config from '../config';
-import HomeScreen from '../screens/home';
 
 const {HOME, SHIFT, PROFILE, DAY_WAGE, Notification} = APP_NAVIGATE_SCREEN;
 

src/screens/onleave/OnLeaveContainer.js

@@ -4,30 +4,25 @@ import Moment from 'moment';
 import React, {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import RootNavigation from '../../navigation/RootNavigation';
-import {
-  getUserLeaveDayApproveReq,
-  getUserLeavesById,
-} from '../../store/actions/UserAction';
+import {getUserLeavesById} from '../../store/actions/UserAction';
 import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
 
-import OnLeaveModalAddNew from './template/subViews/RequestLeavesDays';
-import OnLeaveModalDetail from './modals/OnLeaveModalDetails';
+import moment from 'moment';
+import {launchImageLibrary} from 'react-native-image-picker';
+import Utils from '../../utils';
+import {ToastMessage} from '../../utils/MessageUtil';
+import onLeavePropsProvider from './onLeavePropsProvider';
 import {
-  getUserLeavesDay,
   getApproveRequestLeavesDays,
-  getUserRestDay,
-  getLeaveCategory,
   getDirectManagers,
+  getLeaveCategory,
+  getUserLeavesDay,
+  getUserRestDay,
   handleSelectManagersLeaveRequest,
   postLeaveRequest,
   postSubmitApproveLeaveRequest,
 } from './onLeaveSlice';
 import OnLeaveMainView from './template/OnLeaveMainView';
-import onLeavePropsProvider from './onLeavePropsProvider';
-import {launchImageLibrary} from 'react-native-image-picker';
-import {ToastMessage} from '../../utils/MessageUtil';
-import moment from 'moment';
-import Utils from '../../utils';
 
 const initPayloadApprove = {
   type: 'Tất cả',

src/screens/profile/ProfileContainer.js

-/* eslint-disable prettier/prettier */
 import React, {useEffect, useState} from 'react';
 
-import ProfileScreen from './ProfileScreen';
-import {useDispatch, useSelector} from 'react-redux';
+import {launchImageLibrary} from 'react-native-image-picker';
+import Toast from 'react-native-toast-message';
+import {useDispatch} from 'react-redux';
 import RootNavigation from '../../navigation/RootNavigation';
-import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
+import {logoutApp} from '../../store/actions/CommonAction';
 import {
+  addContactUser,
   changeAvatar,
+  changeContactUser,
   changeCoverAvatar,
   changeUserInfo,
-  getContactUser,
-  changeContactUser,
   deleteContactUser,
-  addContactUser,
+  getContactUser,
 } from '../../store/actions/UserAction';
-import {launchImageLibrary} from 'react-native-image-picker';
-import Toast from 'react-native-toast-message';
-import Moment from 'moment';
-import {logoutApp} from '../../store/actions/CommonAction';
+import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
+import profilePropsProvider from './profilePropsProvider';
+import ProfileMainView from './template/ProfileMainView';
 const ProfileContainer = props => {
-  const {userDetails} = props;
+  const {userInfo} = props;
   const dispatch = useDispatch();
 
   const [modalVisible, setModalVisible] = useState(false);
@@ -34,7 +33,7 @@ const ProfileContainer = props => {
     contactBtn: false,
     detailBtn: false,
   });
-  const [infoUser, setInfoUser] = useState(userDetails);
+  const [infoUser, setInfoUser] = useState(userInfo);
 
   const [contactUser, setContactUser] = useState([]);
   const [defaultContact, setDefaultContact] = useState([]);
@@ -96,7 +95,7 @@ const ProfileContainer = props => {
         if (!response.didCancel) {
           //setCoverAvatar(response.assets);
           const resChangeCoverAvatar = dispatch(
-            changeCoverAvatar(userDetails.id, response.assets),
+            changeCoverAvatar(userInfo.id, response.assets),
           );
           if (resChangeCoverAvatar) {
             setEditField(prev => ({...prev, avatar: false}));
@@ -124,7 +123,7 @@ const ProfileContainer = props => {
   };
   const onSaveInfo = async () => {
     if (!!compareInfoUser) {
-      const res = await dispatch(changeUserInfo(userDetails.id, infoUser));
+      const res = await dispatch(changeUserInfo(userInfo.id, infoUser));
       if (res) {
         Toast.show({
           type: 'success',
@@ -145,7 +144,7 @@ const ProfileContainer = props => {
     setEditField(prev => ({...prev, avatar: false}));
   };
   const onConfirmAvatar = () => {
-    const res = dispatch(changeAvatar(userDetails.id, avatar));
+    const res = dispatch(changeAvatar(userInfo.id, avatar));
     if (res) {
       setEditField(prev => ({...prev, avatar: false}));
       Toast.show({
@@ -160,7 +159,7 @@ const ProfileContainer = props => {
   };
   const compareInfoUser = () => {
     // check user have change info
-    if (JSON.stringify(infoUser) == JSON.stringify(userDetails)) return true;
+    if (JSON.stringify(infoUser) == JSON.stringify(userInfo)) return true;
     return false;
   };
 
@@ -173,7 +172,7 @@ const ProfileContainer = props => {
   };
 
   const getContactSocialUser = async () => {
-    const res = await dispatch(getContactUser(userDetails.id));
+    const res = await dispatch(getContactUser(userInfo.id));
     //console.log(res)
     if (res.length > 0) {
       let arrContact = [];
@@ -312,7 +311,7 @@ const ProfileContainer = props => {
       if (duplicateSocial === undefined) {
         const res = await dispatch(
           addContactUser(
-            userDetails.id,
+            userInfo.id,
             userInputContact.text,
             userInputContact.type,
           ),
@@ -354,11 +353,8 @@ const ProfileContainer = props => {
     getContactSocialUser();
   }, []);
 
-  // useEffect(() => {
-  //     infoUser && console.log("infoUser", infoUser)
-  // }, [])
   const profileProps = {
-    userDetails,
+    userInfo,
     isEditField,
     btnAvailable,
     infoUser,
@@ -400,14 +396,7 @@ const ProfileContainer = props => {
     onChangeCoverAvatar,
   };
 
-  // useEffect(() => {
-  //     infoUser && userDetails && compareInfoUser()
-  // }, [userDetails, infoUser])
-  // useEffect(() => {
-  //     infoUser && console.log("infoUser", infoUser)
-  // }, [])
-
-  return <ProfileScreen {...profileProps} />;
+  return <ProfileMainView {...profilePropsProvider(profileProps)} />;
 };
 
 export default ProfileContainer;

src/screens/profile/index.js

-/* eslint-disable prettier/prettier */
 import React from 'react';
 
 import {useSelector} from 'react-redux';
@@ -6,10 +5,10 @@ import {authSelector} from '../../app/selectors';
 import ProfileContainer from './ProfileContainer';
 
 export default function ProfileScreen() {
-  const userDetails = useSelector(authSelector);
-
+  const authSelect = useSelector(authSelector);
+  const {userInfo} = authSelect;
   const profileScreenProps = {
-    userDetails,
+    userInfo,
   };
   return <ProfileContainer {...profileScreenProps} />;
 }

src/screens/profile/profilePropsProvider.js

+export default function profilePropsProvider(props) {
+  const {
+    userInfo,
+    isEditField,
+    btnAvailable,
+    infoUser,
+    avatar,
+    visibleMenu,
+    isSlideShow,
+    dateTimePicker,
+    contactUser,
+    showAlert,
+    modalVisible,
+    userInputContact,
+    setAvatar,
+    setInfoUser,
+    navigateMain,
+    setEditField,
+    setBtnAvailable,
+    onSaveInfo,
+    onDeniedAvatar,
+    onConfirmAvatar,
+    showMenu,
+    openGallery,
+    showFullScreen,
+    hideFullScreen,
+    hideMenu,
+    hideDateTimePicker,
+    setDateTimePicker,
+    onSubmitChangeContactUser,
+    setContactUser,
+    onChangeDropDownContactUser,
+    onChangeInputContactUser,
+    onPressDeleteItem,
+    onPressAddItem,
+    onConfirmDeleteAlert,
+    onCancelAlert,
+    setUserInputContact,
+    onSubmitCreateNew,
+    setModalVisible,
+    navigateToLogout,
+    onChangeCoverAvatar,
+  } = props;
+  return {
+    userInfo,
+    isEditField,
+    btnAvailable,
+    infoUser,
+    avatar,
+    visibleMenu,
+    isSlideShow,
+    dateTimePicker,
+    contactUser,
+    showAlert,
+    modalVisible,
+    userInputContact,
+    setAvatar,
+    setInfoUser,
+    navigateMain,
+    setEditField,
+    setBtnAvailable,
+    onSaveInfo,
+    onDeniedAvatar,
+    onConfirmAvatar,
+    showMenu,
+    openGallery,
+    showFullScreen,
+    hideFullScreen,
+    hideMenu,
+    hideDateTimePicker,
+    setDateTimePicker,
+    onSubmitChangeContactUser,
+    setContactUser,
+    onChangeDropDownContactUser,
+    onChangeInputContactUser,
+    onPressDeleteItem,
+    onPressAddItem,
+    onConfirmDeleteAlert,
+    onCancelAlert,
+    setUserInputContact,
+    onSubmitCreateNew,
+    setModalVisible,
+    navigateToLogout,
+    onChangeCoverAvatar,
+    introduceUserProps: {
+      userInfo,
+      isEditField,
+      avatar,
+      onDeniedAvatar,
+      onConfirmAvatar,
+      showMenu,
+      hideMenu,
+      visibleMenu,
+      openGallery,
+      onChangeCoverAvatar,
+    },
+  };
+}

src/screens/profile/style.js

@@ -6,6 +6,7 @@ const windowHeight = Dimensions.get('window').height;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    padding: 10,
   },
   flexRow: {
     flexDirection: 'row',
@@ -22,6 +23,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
     borderColor: colors.white,
     marginBottom: 10,
+    borderRadius: 5,
   },
   viewCardProfile: {
     width: windowWidth - 20,
@@ -29,7 +31,6 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     backgroundColor: colors.white,
     borderColor: colors.white,
-    marginBottom: 10,
   },
   coverImage: {
     width: windowWidth - 20,
@@ -83,9 +84,10 @@ const styles = StyleSheet.create({
     height: windowHeight,
   },
   viewInfo: {
-    width: windowWidth - 10,
+    width: '100%',
     alignSelf: 'center',
     borderWidth: 1,
+    borderRadius: 5,
     backgroundColor: colors.white,
     borderColor: colors.white,
     padding: 10,
@@ -95,9 +97,10 @@ const styles = StyleSheet.create({
     borderBottomColor: 'gray',
     borderBottomWidth: 1,
     marginBottom: 10,
-    padding: 10,
+    paddingHorizontal: 10,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
   },
   paddingView: {
     padding: 20,
@@ -113,8 +116,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     borderBottomWidth: 1,
     borderBottomColor: '#f6f6f6',
-    paddingBottom: 10,
-    paddingTop: 10,
+    paddingVertical: 10,
   },
   btnSubmit: {
     backgroundColor: '#5d78ff',
@@ -214,6 +216,21 @@ const styles = StyleSheet.create({
     elevation: 5,
     flexDirection: 'row',
   },
+  activeDot: {
+    backgroundColor: colors.purple_blue,
+    width: 25,
+    height: 8,
+    borderRadius: 4,
+  },
+  avatarFrame: {
+    width: 100,
+    height: 100,
+    resizeMode: 'contain',
+    alignSelf: 'center',
+    borderRadius: 60,
+    zIndex: -100,
+  },
+  infoView: {flexDirection: 'row', paddingVertical: 10},
 });
 
 export default styles;

src/screens/profile/template/ProfileMainView.js

+import Moment from 'moment';
+import React from 'react';
+import {
+  Animated,
+  Image,
+  ImageBackground,
+  Modal,
+  SafeAreaView,
+  ScrollView,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Alert from 'react-native-awesome-alerts';
+import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
+import {Menu, MenuItem} from 'react-native-material-menu';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import SelectDropdown from 'react-native-select-dropdown';
+import Swiper from 'react-native-swiper';
+import AppText from '../../../components/AppText';
+import ButtonComponent from '../../../components/ButtonComponent';
+import TextInputComponent from '../../../components/TextInputComponent';
+import {
+  IMAGES,
+  IcNotificationList,
+  IconProfile,
+  IconSocial,
+} from '../../../values/images';
+import {default as string, default as strings} from '../../../values/string';
+import styles from '../style';
+import colors from '../../../values/colors';
+import config from '../../../config';
+import IntroduceUser from './components/IntroduceUser';
+import GeneralInformation from './components/GeneralInformation';
+import PersonalInformation from './components/PersonalInformation';
+import DetailInformation from './components/DetailInformation';
+const Socials = [
+  'FACEBOOK',
+  'EMAIL',
+  'SKYPE',
+  'LINKEDIN',
+  'TWITTER',
+  'INSTAGRAM',
+  'WHATSAPP',
+  'VIPER',
+  'SNAPCHAT',
+  'TELEGRAM',
+  'APPLE',
+  'YOUTUBE',
+  'PINTEREST',
+];
+const gender = ['Nam', 'Nữ'];
+
+const ProfileMainView = ({
+  userInfo,
+  contactUser,
+  btnAvailable,
+  isEditField,
+  navigateMain,
+  setEditField,
+  setBtnAvailable,
+  infoUser,
+  setInfoUser,
+  onSaveInfo,
+  avatar = [],
+  onDeniedAvatar,
+  onConfirmAvatar,
+  showMenu,
+  hideMenu,
+  visibleMenu,
+  openGallery,
+  isSlideShow,
+  showFullScreen,
+  hideFullScreen,
+  dateTimePicker,
+  hideDateTimePicker,
+  setDateTimePicker,
+  showAlert,
+  onSubmitChangeContactUser,
+  onChangeDropDownContactUser,
+  onChangeInputContactUser,
+  onPressDeleteItem,
+  onPressAddItem,
+  onCancelAlert,
+  modalVisible,
+  setModalVisible,
+  setUserInputContact,
+  userInputContact,
+  onSubmitCreateNew,
+  onConfirmDeleteAlert,
+  navigateToLogout,
+  onChangeCoverAvatar,
+  introduceUserProps,
+}) => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView nestedScrollEnabled={true}>
+        <IntroduceUser {...introduceUserProps} />
+
+        {/* General information  */}
+        <GeneralInformation userInfo={userInfo} />
+        {/* personal information  */}
+        <PersonalInformation userInfo={userInfo} />
+        {/* detail information  */}
+        <DetailInformation userInfo={userInfo} />
+        {/* Logout Btn */}
+        <View
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginTop: 10,
+          }}>
+          <ButtonComponent
+            text={'Đăng xuất'}
+            style={{marginBottom: 10, flexDirection: 'row'}}
+            rightIcon={IMAGES.IcLogout}
+            styleIcon={{width: 20, height: 20, marginLeft: 10}}
+            onPress={navigateToLogout}
+          />
+        </View>
+        {/* <View style={styles.centeredView}>
+          <Modal
+            animationType="slide"
+            transparent={true}
+            visible={modalVisible}
+            onRequestClose={() => {
+              Alert.alert('Modal has been closed.');
+              setModalVisible(!modalVisible);
+            }}>
+            <View style={styles.centeredView}>
+              <View style={styles.modalView}>
+                <View style={{flexDirection: 'row'}}>
+                  <View style={{flex: 1}}>
+                    <SelectDropdown
+                      data={Socials}
+                      dropdownIconPosition={'right'}
+                      defaultButtonText={'Loại liên hệ'}
+                      buttonStyle={styles.dropdown1BtnStyle}
+                      onSelect={(selectedItem, item_index) =>
+                        setUserInputContact(prev => ({
+                          ...prev,
+                          type: selectedItem,
+                        }))
+                      }
+                      dropdownStyle={styles.dropdown1DropdownStyle}
+                      rowStyle={styles.dropdown1RowStyle}
+                      rowTextStyle={styles.dropdown1RowTxtStyle}
+                      buttonTextStyle={styles.dropdown1BtnTxtStyle}
+                      renderDropdownIcon={isOpened => {
+                        return (
+                          <Image
+                            source={
+                              isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow
+                            }
+                            style={{width: 20, height: 20}}
+                          />
+                        );
+                      }}
+                    />
+                    {userInputContact.type.length <= 0 && (
+                      <AppText style={{fontSize: 12, color: 'red'}}>
+                        {' '}
+                        Vui lòng chọn liên hệ
+                      </AppText>
+                    )}
+                  </View>
+                  <View style={{flex: 1}}>
+                    <TextInput
+                      style={{borderBottomWidth: 0.2}}
+                      placeholder={'Nhập F'}
+                      keyboardType={'email-address'}
+                      autoCapitalize="none"
+                      value={userInputContact.text}
+                      onChangeText={text =>
+                        setUserInputContact(prev => ({
+                          ...prev,
+                          text: text,
+                        }))
+                      }
+                    />
+                    {userInputContact.text.length <= 0 && (
+                      <AppText style={{fontSize: 12, color: 'red'}}>
+                        {' '}
+                        Vui lòng nhập liên hệ
+                      </AppText>
+                    )}
+                  </View>
+                </View>
+                <View style={{flexDirection: 'row', marginTop: 20}}>
+                  <ButtonComponent
+                    text={'Đóng'}
+                    textStyle={styles.textStyle}
+                    style={[
+                      styles.button,
+                      styles.buttonClose,
+                      {marginRight: 15},
+                    ]}
+                    onPress={() => setModalVisible(!modalVisible)}
+                  />
+                  <ButtonComponent
+                    text={'Thêm mới'}
+                    textStyle={styles.textStyle}
+                    style={[styles.button, styles.buttonClose]}
+                    onPress={onSubmitCreateNew}
+                  />
+                </View>
+              </View>
+            </View>
+          </Modal>
+        </View> */}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default ProfileMainView;

src/screens/profile/template/components/DetailInformation.js

+import React, {memo} from 'react';
+import {Image, TouchableOpacity, View} from 'react-native';
+import AppText from '../../../../components/AppText';
+import {IMAGES} from '../../../../values/images';
+import string from '../../../../values/string';
+import styles from '../../style';
+import commonStyles from '../../../../styles/commonStyles';
+import moment from 'moment';
+
+const DetailInformation = React.memo(
+  ({userInfo}) => {
+    const personalInfo = [
+      {
+        name: 'Số CMND',
+        value: userInfo?.id_card_number || '',
+        icon: IMAGES.IcInfoGuess,
+        width: '50%',
+      },
+      {
+        name: 'Ngày cấp CMND',
+        value: moment(userInfo?.id_card_issue_date).format('dd/MM/YYYY') || '',
+        icon: IMAGES.IcInfoGuess,
+        width: '50%',
+      },
+      {
+        name: 'Nơi cấp CMND',
+        value: userInfo?.id_card_issue_palce || '',
+        icon: IMAGES.IcInfoGuess,
+        width: '50%',
+      },
+      {
+        name: 'Ngày sinh',
+        value: userInfo?.birthday ? 'Nam' : 'Nữ',
+        icon: IMAGES.IcInfoGuess,
+        width: '50%',
+      },
+      {
+        name: 'Nguyên quán',
+        value: userInfo?.domicile || '',
+        icon: IMAGES.IcPhone,
+        width: '50%',
+      },
+      {
+        name: 'Nơi sinh',
+        value: userInfo?.birthplace || '',
+        icon: IMAGES.IcPhone,
+        width: '50%',
+      },
+      {
+        name: 'Tôn giáo',
+        value: userInfo?.religion || '',
+        icon: IMAGES.IcMailGray,
+        width: '50%',
+      },
+      {
+        name: 'Dân tộc',
+        value: userInfo?.ethnic || '',
+        icon: IMAGES.IcMailGray,
+        width: '50%',
+      },
+      {
+        name: 'MST cá nhân',
+        value: userInfo?.personal_tax_code || '',
+        icon: IMAGES.IcCalendarGray,
+        width: '50%',
+      },
+      {
+        name: 'Quốc tịch',
+        value: userInfo?.nationality || '',
+        icon: IMAGES.IcMailGray,
+        width: '50%',
+      },
+      {
+        name: 'Địa chỉ liên hệ',
+        value: userInfo?.address || '',
+        icon: IMAGES.IcLocationGray,
+        width: '50%',
+      },
+      {
+        name: 'Địa chỉ thường trú',
+        value: userInfo?.permanent_address || '',
+        icon: IMAGES.IcLocationGray,
+        width: '100%',
+      },
+    ];
+    return (
+      <View style={[styles.viewInfo]}>
+        <View style={styles.viewTitle}>
+          <AppText style={{fontSize: 17}}>
+            {string.PERSONAL_INFORMATION}
+          </AppText>
+          <View>
+            <TouchableOpacity>
+              <Image source={IMAGES.IcEdit} style={{height: 30, width: 30}} />
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View style={[commonStyles.row, {flexWrap: 'wrap'}]}>
+          {personalInfo.map(item => (
+            <View
+              key={item.name}
+              style={[styles.infoView, {width: item.width}]}>
+              <Image source={item.icon} style={{width: 20, height: 20}} />
+              <View style={{marginLeft: 5}}>
+                <AppText>{item.name}</AppText>
+                <AppText isSubText>{item?.value}</AppText>
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+    );
+  },
+  function (prevProps, nextProps) {
+    return prevProps.userInfo === nextProps.userInfo;
+  },
+);
+
+export default memo(DetailInformation);

src/screens/profile/template/components/GeneralInformation.js

+import React, {memo} from 'react';
+import {Image, View} from 'react-native';
+import AppText from '../../../../components/AppText';
+import {IMAGES} from '../../../../values/images';
+import styles from '../../style';
+import string from '../../../../values/string';
+import commonStyles from '../../../../styles/commonStyles';
+
+const GeneralInformation = React.memo(
+  ({userInfo}) => {
+    return (
+      <View style={[styles.viewInfo, commonStyles.baseShadow]}>
+        <View style={styles.viewTitle}>
+          <AppText style={{color: 'black', fontSize: 18}}>
+            {string.GENERAL_INFORMATION}
+          </AppText>
+        </View>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <View style={{flexDirection: 'row'}}>
+            <Image source={IMAGES.IcUser} style={{height: 45, width: 45}} />
+            <View style={{marginLeft: 5}}>
+              <AppText>{string.USER_ID}</AppText>
+              <AppText style={{color: 'black', fontSize: 15}}>
+                {userInfo?.employee_code}
+              </AppText>
+            </View>
+          </View>
+          <View style={{flexDirection: 'row'}}>
+            <Image source={IMAGES.IcCheck} style={{height: 45, width: 45}} />
+            <View style={{marginLeft: 5}}>
+              <AppText>{string.TIME_ATTENDANCE_CODE}</AppText>
+              <AppText style={{color: 'black', fontSize: 15}}>
+                {userInfo?.employee_code}
+              </AppText>
+            </View>
+          </View>
+        </View>
+        <View style={{flexDirection: 'row', marginTop: 10}}>
+          <Image source={IMAGES.IcCalendar} style={{height: 45, width: 45}} />
+          <View style={{marginLeft: 5}}>
+            <AppText>{string.SHIFT}</AppText>
+            <AppText style={{color: 'black', fontSize: 15}}>
+              Meu Official working time
+            </AppText>
+          </View>
+        </View>
+        <View style={{flexDirection: 'row', marginTop: 10}}>
+          <Image source={IMAGES.IcUserTag} style={{height: 45, width: 45}} />
+          <View style={{marginLeft: 5}}>
+            <AppText>{string.STATUS}</AppText>
+            <AppText style={{color: 'black', fontSize: 15}}>
+              Nhân viên chính thức
+            </AppText>
+          </View>
+        </View>
+      </View>
+    );
+  },
+  function (prevProps, nextProps) {
+    return prevProps.userInfo === nextProps.userInfo;
+  },
+);
+
+export default memo(GeneralInformation);

src/screens/profile/template/components/IntroduceUser.js

+import React from 'react';
+import {Image, ImageBackground, TouchableOpacity, View} from 'react-native';
+import {Menu, MenuItem} from 'react-native-material-menu';
+import Swiper from 'react-native-swiper';
+import AppText from '../../../../components/AppText';
+import ButtonComponent from '../../../../components/ButtonComponent';
+import config from '../../../../config';
+import colors from '../../../../values/colors';
+import {IMAGES} from '../../../../values/images';
+import styles from '../../style';
+import commonStyles from '../../../../styles/commonStyles';
+
+const CardInfo = React.memo(
+  ({userInfo}) => {
+    return (
+      <ImageBackground
+        source={IMAGES.BgProfileCard}
+        style={[
+          styles.viewCardProfile,
+          {
+            borderRadius: 10,
+            paddingTop: 30,
+          },
+        ]}
+        resizeMode="cover">
+        <View style={{position: 'absolute', left: 15, top: 10}}>
+          <Image source={IMAGES.ImageQrCode} style={{height: 45, width: 45}} />
+        </View>
+        <ImageBackground source={IMAGES.BgFrame} style={styles.imgFrame}>
+          <Image
+            source={
+              userInfo?.avatar
+                ? {uri: config.imageEndPoint + userInfo?.avatar}
+                : IMAGES.IcAvatarDefault
+            }
+            style={styles.avatarFrame}
+          />
+        </ImageBackground>
+        <View style={[commonStyles.centerView, commonStyles.marginVertical10]}>
+          {userInfo?.position && <AppText>{userInfo?.position}</AppText>}
+          <AppText style={{fontSize: 18, fontWeight: 'bold'}}>
+            {`${userInfo?.first_name} ${
+              userInfo?.middle_name ? userInfo?.middle_name : ''
+            } ${userInfo?.last_name} `}
+          </AppText>
+          {userInfo?.email && (
+            <View style={{flexDirection: 'row', marginTop: 10}}>
+              <View style={{flex: 1, alignItems: 'flex-end', paddingRight: 5}}>
+                <Image
+                  source={IMAGES.IconMailGrey}
+                  style={{height: 25, width: 25}}
+                />
+              </View>
+              <AppText style={{flex: 2}}>{userInfo?.email}</AppText>
+            </View>
+          )}
+          {userInfo?.cell_phone && (
+            <View style={{flexDirection: 'row', marginTop: 10}}>
+              <View style={{flex: 1, alignItems: 'flex-end', paddingRight: 5}}>
+                <Image
+                  source={IMAGES.IcPhoneGrey}
+                  style={{height: 25, width: 25}}
+                />
+              </View>
+              <AppText style={{flex: 2, color: 'black'}}>
+                {userInfo?.cell_phone}
+              </AppText>
+            </View>
+          )}
+        </View>
+        <View
+          style={[
+            commonStyles.row,
+            {
+              justifyContent: 'space-evenly',
+            },
+          ]}>
+          <AppText style={{fontWeight: 'bold'}}>#willing-to-do</AppText>
+          <AppText style={{fontWeight: 'bold'}}>#passion</AppText>
+          <AppText style={{fontWeight: 'bold'}}>#hard-working</AppText>
+        </View>
+      </ImageBackground>
+    );
+  },
+  function (prevProps, nextProps) {
+    return prevProps.userInfo === nextProps.userInfo;
+  },
+);
+const IntroduceUser = props => {
+  const {
+    userInfo,
+    isEditField,
+    avatar = [],
+    onDeniedAvatar,
+    onConfirmAvatar,
+    showMenu,
+    hideMenu,
+    visibleMenu,
+    openGallery,
+    onChangeCoverAvatar,
+  } = props;
+  return (
+    <Swiper
+      style={[commonStyles.baseShadow, {height: 380}]}
+      showsButtons={false}
+      loop={false}
+      showsPagination={true}
+      activeDot={<View style={styles.activeDot} />}>
+      <View style={styles.viewImageProfile}>
+        <ImageBackground
+          source={
+            userInfo?.cover_image
+              ? {
+                  uri: config.imageEndPoint + userInfo?.cover_image,
+                }
+              : IMAGES.ImageCoverBg
+          }
+          style={styles.coverImage}>
+          <ButtonComponent
+            iconSource={IMAGES.IcChangeCoverImage}
+            styleIcon={{height: 20, width: 20}}
+            style={{marginRight: 15, marginBottom: 10}}
+            onPress={onChangeCoverAvatar}
+          />
+        </ImageBackground>
+        <TouchableOpacity onPress={showMenu} style={styles.viewAvatar}>
+          {avatar.length > 0 ? (
+            <Image source={{uri: avatar[0].uri}} style={styles.imgAvatar} />
+          ) : (
+            <Image
+              source={
+                userInfo?.avatar
+                  ? {uri: config.imageEndPoint + userInfo?.avatar}
+                  : IMAGES.IcAvatarDefault
+              }
+              style={styles.imgAvatar}
+            />
+          )}
+
+          {/* menu option */}
+          <View style={{justifyContent: 'center', alignItems: 'center'}}>
+            <Menu visible={visibleMenu} onRequestClose={hideMenu}>
+              <MenuItem onPress={openGallery}>
+                <AppText>Đổi hình nền</AppText>
+              </MenuItem>
+            </Menu>
+          </View>
+        </TouchableOpacity>
+        {isEditField.avatar && (
+          <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
+            <TouchableOpacity onPress={onDeniedAvatar}>
+              <Image source={IMAGES.IcDenied} style={{width: 25, height: 25}} />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={onConfirmAvatar}>
+              <Image
+                source={IMAGES.IcCheckMark}
+                style={{width: 25, height: 25}}
+              />
+            </TouchableOpacity>
+          </View>
+        )}
+        <AppText style={{fontSize: 18}}>
+          {`${userInfo?.first_name} ${
+            userInfo?.middle_name ? userInfo?.middle_name : ''
+          } ${userInfo?.last_name} (${userInfo?.employee_code})`}{' '}
+        </AppText>
+        <AppText style={{marginBottom: 20}}>{userInfo?.position}</AppText>
+      </View>
+      <CardInfo userInfo={userInfo} />
+    </Swiper>
+  );
+};
+
+export default IntroduceUser;

src/screens/profile/template/components/PersonalInformation.js

+import React, {memo} from 'react';
+import {Image, TouchableOpacity, View} from 'react-native';
+import AppText from '../../../../components/AppText';
+import {IMAGES} from '../../../../values/images';
+import string from '../../../../values/string';
+import styles from '../../style';
+import commonStyles from '../../../../styles/commonStyles';
+
+const PersonalInformation = React.memo(
+  ({userInfo}) => {
+    const personalInfo = [
+      {
+        name: 'Họ',
+        value: userInfo?.first_name || '',
+        icon: IMAGES.IcInfoGuess,
+        width: '50%',
+      },
+      {
+        name: 'Tên lót',
+        value: userInfo?.middle_name || '',
+        icon: IMAGES.IcInfoGuess,
+        width: '50%',
+      },
+      {
+        name: 'Tên',
+        value: userInfo?.last_name || '',
+        icon: IMAGES.IcInfoGuess,
+        width: '50%',
+      },
+      {
+        name: 'Giới tính',
+        value: userInfo?.gender ? 'Nam' : 'Nữ',
+        icon: IMAGES.IcInfoGuess,
+        width: '50%',
+      },
+      {
+        name: 'Số điện thoại',
+        value: userInfo?.cell_phone || '',
+        icon: IMAGES.IcPhone,
+        width: '100%',
+      },
+      {
+        name: 'Email',
+        value: userInfo?.email || '',
+        icon: IMAGES.IcMailGray,
+        width: '100%',
+      },
+    ];
+    return (
+      <View style={[styles.viewInfo]}>
+        <View style={styles.viewTitle}>
+          <AppText style={{fontSize: 17}}>
+            {string.PERSONAL_INFORMATION}
+          </AppText>
+          <View>
+            <TouchableOpacity>
+              <Image source={IMAGES.IcEdit} style={{height: 30, width: 30}} />
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View style={[commonStyles.row, {flexWrap: 'wrap'}]}>
+          {personalInfo.map(item => (
+            <View
+              key={item.name}
+              style={[styles.infoView, {width: item.width}]}>
+              <Image source={item.icon} style={{width: 20, height: 20}} />
+              <View style={{marginLeft: 5}}>
+                <AppText>{item.name}</AppText>
+                <AppText isSubText>{item?.value}</AppText>
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+    );
+  },
+  function (prevProps, nextProps) {
+    return prevProps.userInfo === nextProps.userInfo;
+  },
+);
+
+export default memo(PersonalInformation);

src/styles/commonStyles.js

@@ -27,5 +27,6 @@ const commonStyles = StyleSheet.create({
   marginVertical20: {
     marginVertical: 20,
   },
+  centerView: {justifyContent: 'center', alignItems: 'center'},
 });
 export default commonStyles;