add base shadow

src/screens/confirm_date/ConfirmDateContainer.js

@@ -8,6 +8,7 @@ import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew';
 import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
 import {getConfirmApprovedDate, getUserConfirmDay} from './confirmDateSlice';
 import ConfirmDateMainView from './template/ConfirmMainView';
+import confirmDatePropsProvider from './confirmDatePropsProvider';
 const ConfirmDateContainer = props => {
   const {confirmDateList, confirmApprovedDateList, userInfo} = props;
   const dispatch = useDispatch();
@@ -93,7 +94,7 @@ const ConfirmDateContainer = props => {
     });
   };
 
-  const loadDataRequestApprove = async () => {
+  const fetchAbsentApprovalRequests = async () => {
     const res = await dispatch(
       getConfirmApprovedDate({
         filter: approveReqPayload.filter,
@@ -362,7 +363,7 @@ const ConfirmDateContainer = props => {
   }, [confirmApprovedDateList]);
 
   useEffect(() => {
-    approveReqPayload && loadDataRequestApprove();
+    approveReqPayload && fetchAbsentApprovalRequests();
   }, [approveReqPayload]);
   useEffect(() => {
     userConfirmPayload && loadDataConfirmDay();
@@ -395,7 +396,7 @@ const ConfirmDateContainer = props => {
     onChangeMonthFilter,
     minutesToHours,
   };
-  return <ConfirmDateMainView {...confirmProps} />;
+  return <ConfirmDateMainView {...confirmDatePropsProvider(confirmProps)} />;
 };
 
 export default ConfirmDateContainer;

src/screens/confirm_date/confirmDatePropsProvider.js

+export default function confirmDatePropsProvider(props) {
+  const {
+    userInfo,
+    showAlert,
+    requestApproveArr,
+    confirmList,
+    isDisableLoadMore,
+    dataChart,
+    modalContent,
+    approveReqPayload,
+    dayPress,
+    onChangeDayPressInChart,
+    onOpenDetailModal,
+    onOpenAddModal,
+    onLoadMoreConfirmList,
+    onHideAlert,
+    navigateToDayWage,
+    alertMessage,
+    onLoadMoreRequestApprove,
+    onRefreshApproveList,
+    onRefreshConfirmList,
+    onChangeSelectFilter,
+    onChangeMonthFilter,
+    minutesToHours,
+  } = props;
+  return {
+    userInfo,
+    showAlert,
+    requestApproveArr,
+    confirmList,
+    isDisableLoadMore,
+    dataChart,
+    modalContent,
+    approveReqPayload,
+    dayPress,
+    onChangeDayPressInChart,
+    onOpenDetailModal,
+    onOpenAddModal,
+    onLoadMoreConfirmList,
+    onHideAlert,
+    navigateToDayWage,
+    alertMessage,
+    onLoadMoreRequestApprove,
+    onRefreshApproveList,
+    onRefreshConfirmList,
+    onChangeSelectFilter,
+    onChangeMonthFilter,
+    minutesToHours,
+  };
+}

src/screens/confirm_date/style.js

@@ -396,5 +396,13 @@ const styles = StyleSheet.create({
     paddingTop: 15,
   },
 });
-
+export const statisticsConfirmWorkdaysStyles = StyleSheet.create({
+  container: {
+    padding: 15,
+    backgroundColor: 'white',
+    height: 380,
+    margin: 10,
+    borderRadius: 5,
+  },
+});
 export default styles;

src/screens/confirm_date/template/ConfirmMainView.js

@@ -16,20 +16,17 @@ import FastImage from 'react-native-fast-image';
 import SelectDropdown from 'react-native-select-dropdown';
 import AppText from '../../../components/AppText';
 import StatisticsConfirmWorkdays from './components/StatisticsConfirmWorkdays';
+import commonStyles from '../../../styles/commonStyles';
 
 const ConfirmDateMainView = ({
-  dataChart,
   isDisableLoadMore,
-  userDetails,
   showAlert,
   onHideAlert,
   navigateToDayWage,
-  alertMessage,
   onLoadMoreRequestApprove,
   onLoadMoreConfirmList,
   requestApproveArr,
   confirmList,
-  monthChart,
   onRefreshConfirmList,
   modalContent,
   onOpenDetailModal,
@@ -37,31 +34,19 @@ const ConfirmDateMainView = ({
   approveReqPayload,
   onChangeSelectFilter,
   minutesToHours,
+  dataChart,
+  onChangeMonthFilter,
+  dayPress,
 }) => {
-  const typeChartColor = [
-    {color: '#7d93ff', name: 'Trên 6h'},
-    {color: '#9eaeff', name: '4-6h'},
-    {color: '#bec9ff', name: '2-4h'},
-    {color: '#dfe4ff', name: '0-2h'},
-    {color: '#f2f2f2', name: '0h'},
-  ];
-
-  //console.log(dataChart?.data);
-  const dayOfWeek = [
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
-    'Sunday',
-  ];
-
   return (
     <SafeAreaView>
       <ScrollView nestedScrollEnabled={true}>
-        <StatisticsConfirmWorkdays />
-        <View style={styles.view}>
+        <StatisticsConfirmWorkdays
+          dataChart={dataChart}
+          onChangeMonthFilter={onChangeMonthFilter}
+          dayPress={dayPress}
+        />
+        <View style={[styles.view, commonStyles.baseShadow]}>
           <AppText style={{fontWeight: '500', marginBottom: 10}}>
             Xác nhận ngày công của bạn:{' '}
           </AppText>

src/screens/confirm_date/template/components/StatisticsConfirmWorkdays.js

 import Moment from 'moment';
-import React from 'react';
+import React, {memo} from 'react';
 import {Image, View} from 'react-native';
 import {IMAGES} from '../../../../values/images';
-import styles from '../../style';
+import styles, {statisticsConfirmWorkdaysStyles} from '../../style';
 
 import SelectDropdown from 'react-native-select-dropdown';
 import AppText from '../../../../components/AppText';
+import SelectDropdownComponent from '../../../../components/Select';
+import commonStyles from '../../../../styles/commonStyles';
 
-const StatisticsConfirmWorkdays = ({
-  dataChart,
-  onChangeMonthFilter,
-  dayPress,
-}) => {
-  const typeChartColor = [
+const chartDaysOfWeek = ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'];
+const typeChartColor = [
   {color: '#7d93ff', name: 'Trên 6h'},
   {color: '#9eaeff', name: '4-6h'},
   {color: '#bec9ff', name: '2-4h'},
   {color: '#dfe4ff', name: '0-2h'},
   {color: '#f2f2f2', name: '0h'},
-  ];
-
-  //console.log(dataChart?.data);
-  const dayOfWeek = [
+];
+const dayOfWeek = [
   'Monday',
   'Tuesday',
   'Wednesday',
@@ -29,56 +25,45 @@ const StatisticsConfirmWorkdays = ({
   'Friday',
   'Saturday',
   'Sunday',
-  ];
-
+];
+const monthsOfYear = [
+  {label: 'Tháng 01', value: 'Tháng 01'},
+  {label: 'Tháng 02', value: 'Tháng 02'},
+  {label: 'Tháng 03', value: 'Tháng 03'},
+  {label: 'Tháng 04', value: 'Tháng 04'},
+  {label: 'Tháng 05', value: 'Tháng 05'},
+  {label: 'Tháng 06', value: 'Tháng 06'},
+  {label: 'Tháng 07', value: 'Tháng 07'},
+  {label: 'Tháng 08', value: 'Tháng 08'},
+  {label: 'Tháng 09', value: 'Tháng 09'},
+  {label: 'Tháng 10', value: 'Tháng 10'},
+  {label: 'Tháng 11', value: 'Tháng 11'},
+  {label: 'Tháng 12', value: 'Tháng 12'},
+];
+const StatisticsConfirmWorkdays = React.memo(
+  ({dataChart, onChangeMonthFilter, dayPress}) => {
     return (
-    <View style={{padding: 15, backgroundColor: 'white'}}>
+      <View
+        style={[
+          statisticsConfirmWorkdaysStyles.container,
+          commonStyles.baseShadow,
+        ]}>
         <AppText style={[styles.title, {marginBottom: 20}]}>
           Thống kê xác nhận ngày công của tôi
         </AppText>
-      <SelectDropdown
-        data={[
-          'Tháng 01',
-          'Tháng 02',
-          'Tháng 03',
-          'Tháng 04',
-          'Tháng 05',
-          'Tháng 06',
-          'Tháng 07',
-          'Tháng 08',
-          'Tháng 09',
-          'Tháng 10',
-          'Tháng 11',
-          'Tháng 12',
-        ]}
-        dropdownIconPosition={'right'}
-        defaultButtonText={'Tháng ' + (new Date().getMonth() + 1)}
-        buttonStyle={styles.dropdown1BtnStyle}
-        onSelect={selectedItem => onChangeMonthFilter(selectedItem)}
-        dropdownStyle={styles.dropdown1DropdownStyle}
-        rowStyle={styles.dropdown1RowStyle}
-        rowTextStyle={styles.dropdown1RowTxtStyle}
-        buttonTextStyle={styles.dropdown1BtnTxtStyle}
-        renderDropdownIcon={isOpened => {
-          return (
-            <Image
-              source={isOpened ? IMAGES.IcUpArrow : IMAGES.IcArrowDown}
-              style={{width: 20, height: 20}}
+        <SelectDropdownComponent
+          selectData={monthsOfYear}
+          width={130}
+          setValue={onChangeMonthFilter}
         />
-          );
-        }}
-      />
-
         <View style={{flexDirection: 'row', marginTop: 20}}>
           <View style={styles.viewCalendar}>
             <View style={styles.viewDayOfWeek}>
-            <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T2</AppText>
-            <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T3</AppText>
-            <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T4</AppText>
-            <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T5</AppText>
-            <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T6</AppText>
-            <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T7</AppText>
-            <AppText style={{fontSize: 12, fontWeight: 'bold'}}>CN</AppText>
+              {chartDaysOfWeek.map((day, i) => (
+                <AppText key={day} style={{fontSize: 12, fontWeight: 'bold'}}>
+                  {day}
+                </AppText>
+              ))}
             </View>
             {dataChart?.data.length > 0 &&
               dataChart?.data?.map((item, index) => {
@@ -161,7 +146,11 @@ const StatisticsConfirmWorkdays = ({
                           alignItems: 'center',
                           margin: 2,
                         }}>
-                      {<AppText>{`${new Date(item.date).getDate()}`}</AppText>}
+                        {
+                          <AppText>{`${new Date(
+                            item.date,
+                          ).getDate()}`}</AppText>
+                        }
                       </View>
                     )}
                   </View>
@@ -191,6 +180,10 @@ const StatisticsConfirmWorkdays = ({
         </View>
       </View>
     );
-};
+  },
+  function areEquals(prevProps, nextProps) {
+    return prevProps.dataChart === nextProps.dataChart;
+  },
+);
 
-export default StatisticsConfirmWorkdays;
+export default memo(StatisticsConfirmWorkdays);

src/screens/home/style.js

@@ -5,17 +5,15 @@ const windowWidth = Dimensions.get('window').width;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 10,
   },
   viewContent: {
     borderRadius: 5,
     borderWidth: 1,
-    width: '100%',
-    borderColor: 'white',
-    backgroundColor: 'white',
+    width: windowWidth - 20,
+    borderColor: colors.white,
+    backgroundColor: colors.white,
     alignSelf: 'center',
-    marginTop: 10,
-    marginBottom: 10,
+    margin: 10,
   },
   bgQuote: {
     width: windowWidth - 10,
@@ -33,7 +31,7 @@ const styles = StyleSheet.create({
     textAlign: 'right',
   },
   calendarHolder: {
-    marginBottom: 10,
+    margin: 10,
     borderTopLeftRadius: 15,
     borderTopRightRadius: 15,
     backgroundColor: 'white',

src/screens/home/template/subViews/CalendarBirthday.js

@@ -8,6 +8,7 @@ import AppText from '../../../../components/AppText';
 import colors from '../../../../values/colors';
 import {IMAGES} from '../../../../values/images';
 import styles from '../../style';
+import commonStyles from '../../../../styles/commonStyles';
 const CalendarBirthday = React.memo(
   ({
     birthdayOfUser,
@@ -17,7 +18,7 @@ const CalendarBirthday = React.memo(
   }) => {
     const today = moment(moment()).format('YYYY-MM-DD'); // Today
     return (
-      <View style={styles.viewContent}>
+      <View style={[styles.viewContent, commonStyles.baseShadow]}>
         <Image source={IMAGES.BgBirthdayHeader} style={styles.BgBirthday} />
         {birthdayOfUser && (
           <Swiper

src/screens/home/template/subViews/QuotationList.js

-/* eslint-disable prettier/prettier */
 import React from 'react';
 import {Dimensions, Image, StyleSheet, View} from 'react-native';
 import AppText from '../../../../components/AppText';
 import {IMAGES} from '../../../../values/images';
+import commonStyles from '../../../../styles/commonStyles';
 const windowWidth = Dimensions.get('window').width;
 const Quotation = ({quotation}) => {
   return (
-    <View style={styles.quotationContainer}>
+    <View style={[styles.quotationContainer, commonStyles.baseShadow]}>
       <View style={styles.quotationContent}>
         <AppText style={styles.textQuote}>
           {quotation?.content
@@ -26,9 +26,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'white',
     backgroundColor: 'white',
-    marginTop: 10,
     paddingTop: 30,
     borderRadius: 5,
+    margin: 10,
   },
   quotationContent: {
     justifyContent: 'center',

src/screens/onleave/template/OnLeaveMainView.js

@@ -16,6 +16,7 @@ import config from '../../../config';
 import {GifType, IMAGES} from '../../../values/images';
 import styles from '../style';
 import RequestLeavesDays from './subViews/RequestLeavesDays';
+import commonStyles from '../../../styles/commonStyles';
 
 const sliceColorRight = ['#6dc9ee', '#d9f4ff'];
 const selectDataDropDown = [
@@ -35,7 +36,9 @@ const DataChartLeavesRestDays = React.memo(
               dataChart?.length &&
               dataChart.map((item, index) => {
                 return (
-                  <View key={index} style={styles.pieChartView}>
+                  <View
+                    key={index}
+                    style={[styles.pieChartView, commonStyles.baseShadow]}>
                     <View style={styles.pieItem}>
                       <View style={{marginBottom: 10}}>
                         <AppText style={{textAlign: 'center', fontSize: 12}}>
@@ -100,9 +103,9 @@ const AddNewLeavesSection = React.memo(props => {
   const {onOpenRequestLeavesModal, navigateToConfirmDate, navigateToOverTime} =
     props;
   return (
-    <View style={styles.view}>
+    <View style={[styles.view, commonStyles.baseShadow]}>
       <AppText style={{fontWeight: '500', marginBottom: 10}}>
-        Nghỉ phép của bạn:{' '}
+        Nghỉ phép của bạn:
       </AppText>
       <View style={{alignItems: 'center', justifyContent: 'center'}}>
         <TouchableOpacity
@@ -139,7 +142,7 @@ const ApproveRequestLeavesDays = React.memo(
       onOpenDetailModal,
     } = props;
     return (
-      <View style={styles.view}>
+      <View style={[styles.view, commonStyles.baseShadow]}>
         <View style={styles.approveRequestFilter}>
           <AppText style={styles.approveRequestTitle}>
             Duyệt yêu cầu nghỉ phép
@@ -226,7 +229,7 @@ const LeavesRequest = React.memo(
   props => {
     const {leaveRequestList, onRefreshLeaveList, onOpenDetailModal} = props;
     return (
-      <View style={[styles.view, {marginBottom: 30}]}>
+      <View style={[styles.view, commonStyles.baseShadow, {marginBottom: 10}]}>
         <View style={styles.myLeavesTitleView}>
           <AppText
             style={{

src/styles/commonStyles.js

+import {Dimensions, StyleSheet} from 'react-native';
+import colors from '../values/colors';
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+const commonStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseShadow: {
+    shadowColor: colors.baseShadowColor,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+});
+export default commonStyles;

src/values/colors.js

@@ -32,5 +32,6 @@ const colors = {
   gray59: '#595959',
   grayE9: '#e9eaf9',
   textColor: '#202121',
+  baseShadowColor: '#000',
 };
 export default colors;