fix leave screen

package.json

@@ -33,6 +33,7 @@
     "react-native-awesome-alerts": "^2.0.0",
     "react-native-calendars": "^1.1307.0",
     "react-native-chart-kit": "^6.12.0",
+    "react-native-element-dropdown": "^2.12.1",
     "react-native-fast-image": "^8.6.3",
     "react-native-gesture-handler": "^2.19.0",
     "react-native-image-picker": "^7.1.2",
@@ -79,6 +80,12 @@
     "react-test-renderer": "18.3.1",
     "typescript": "5.0.4"
   },
+  "resolutions": {
+    "react-native-reanimated": "^3.15.3"
+  },
+  "overrides": {
+    "react-native-reanimated": "^3.15.3"
+  },
   "engines": {
     "node": ">=18"
   },

src/api/confirmDateAPI.js

+import axiosClient from '../network/axios';
+
+const confirmDateAPI = {
+  requestGetConfirmDay: (page, pageSize) =>
+    axiosClient.get(`myAbsentRequests?Page=${page}&PageSize=${pageSize}`),
+  requestGetConfirmApprovedDate: ({filter, sort, page, pageSize}) =>
+    axiosClient.get(
+      `myAbsentApprovalRequests?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`,
+    ),
+};
+
+export default confirmDateAPI;

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;
 export const loaderSelector = state => state.loader.isLoading;
+export const confirmDateSelector = state => state.confirmDate;

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';
+import confirmDateReducer from '../screens/confirm_date/confirmDateSlice';
+
 const rootReducer = {
   loader: loaderReducer,
   auth: authReducer,
   home: homeReducer,
   onLeave: onLeaveReducer,
+  confirmDate: confirmDateReducer,
 };
 
 const store = configureStore({

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 FONT_FAMILY = fonts.beProLight;
 
-const AppText = ({variant, children, style, onPress, color}) => {
+const AppText = ({variant, children, style, onPress, color, isSubText}) => {
   const defaultStyle = {
     fontFamily: FONT_FAMILY,
+    fontSize: isSubText ? 12 : 14,
     color: color ?? colors.textColor,
   };
   return (

src/components/Select/index.js

+import React, {useState} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {Dropdown} from 'react-native-element-dropdown';
+import {IMAGES} from '../../values/images';
+import AppText from '../AppText';
+import colors from '../../values/colors';
+
+const data = [
+  {label: 'Item 1', value: '1'},
+  {label: 'Item 2', value: '2'},
+  {label: 'Item 3', value: '3'},
+  {label: 'Item 4', value: '4'},
+  {label: 'Item 5', value: '5'},
+  {label: 'Item 6', value: '6'},
+  {label: 'Item 7', value: '7'},
+  {label: 'Item 8', value: '8'},
+];
+
+const SelectDropdownComponent = ({selectData = [], value, setValue}) => {
+  //   const [value, setValue] = useState(null);
+  const [isFocus, setIsFocus] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <Dropdown
+        style={[styles.dropdown, isFocus && {borderColor: 'blue'}]}
+        itemTextStyle={{color: colors.textColor}}
+        placeholderStyle={styles.placeholderStyle}
+        selectedTextStyle={styles.selectedTextStyle}
+        inputSearchStyle={styles.inputSearchStyle}
+        iconStyle={styles.iconStyle}
+        data={selectData ?? data}
+        maxHeight={300}
+        labelField="label"
+        valueField="value"
+        placeholder={
+          !isFocus
+            ? selectData.length > 0
+              ? selectData[0].label
+              : 'Select'
+            : '...'
+        }
+        value={value}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+        onChange={item => {
+          setValue(item.value);
+          setIsFocus(false);
+        }}
+      />
+    </View>
+  );
+};
+
+export default SelectDropdownComponent;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  dropdown: {
+    width: 100,
+    height: 40,
+    borderColor: 'gray',
+    borderWidth: 0.5,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: colors.textColor,
+  },
+  icon: {
+    marginRight: 5,
+  },
+
+  placeholderStyle: {
+    fontSize: 16,
+    color: colors.textColor,
+  },
+  selectedTextStyle: {
+    fontSize: 16,
+    color: colors.textColor,
+  },
+  iconStyle: {
+    width: 20,
+    height: 20,
+  },
+  inputSearchStyle: {
+    height: 40,
+    fontSize: 16,
+    color: colors.textColor,
+  },
+});

src/components/header/HeaderComponent.js

@@ -42,7 +42,7 @@ const HeaderComponent = React.memo(() => {
         <TouchableOpacity
           onPress={navigateHome}
           style={{flex: 1, alignItems: 'center'}}>
-          <Image source={{uri: logo}} style={styles.iconLogo} />
+          {logo && <Image source={{uri: logo}} style={styles.iconLogo} />}
         </TouchableOpacity>
       </ImageBackground>
     </SafeAreaView>

src/navigation/AppNavigation.js

@@ -14,6 +14,7 @@ import ConfirmedShiftDetail from '../screens/shift/shift-tabs/ConfirmedShiftScre
 import {APP_NAVIGATE_SCREEN} from '../utils/constant';
 import BottomTabs from './BottomTabNavigation';
 import RootNavigation from './RootNavigation';
+import HomeScreen from '../screens/home';
 
 const {
   INTRO,
@@ -26,6 +27,7 @@ const {
   FORGOT_PASS,
   CONFIRM_SHIFT_DETAIL,
   SALARY,
+  HOME,
 } = APP_NAVIGATE_SCREEN;
 const AppScreen = {
   [SPLASH]: SplashContainer,
@@ -39,6 +41,7 @@ const AppScreen = {
   [CONFIRM_SHIFT_DETAIL]: ConfirmedShiftDetail,
   [SALARY]: SalaryScreen,
   [INTRO]: IntroScreen,
+  [HOME]: HomeScreen,
 };
 const Stack = createNativeStackNavigator();
 

src/navigation/BottomTabNavigation.js

@@ -7,9 +7,11 @@ 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 {IconDrawer} from '../values/images';
+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;
 
@@ -23,7 +25,7 @@ const AppScreen = {
 const AppIcon = {
   [HOME]: IconDrawer.IcOverview,
   [Notification]: IconDrawer.IcNotificationColor,
-  [DAY_WAGE]: IconDrawer.IcDataSheet,
+  //[DAY_WAGE]: IconDrawer.IcDataSheet,
   //[SHIFT]: IconDrawer.IcDataSheet,
   [PROFILE]: IconDrawer.IcLeave,
 };
@@ -31,7 +33,8 @@ const AppIcon = {
 const Tab = createBottomTabNavigator();
 
 export default function BottomNavigation() {
-  const userDetails = useSelector(authSelector);
+  const authSelect = useSelector(authSelector);
+  const {userInfo} = authSelect;
   return (
     <Tab.Navigator screenOptions={{scrollEnabled: true}}>
       {Object.keys(AppScreen).map((item, index) => (
@@ -40,15 +43,18 @@ export default function BottomNavigation() {
           name={item}
           component={AppScreen[item]}
           options={{
-            header: props => <HeaderComponent {...props} />,
+            header: props => <HeaderComponent />,
             tabBarActiveTintColor: '#3947e9', // tab text color
             tabBarLabelPosition: 'below-icon',
             tabBarShowLabel: true,
-
             tabBarIcon: ({focused, size}) =>
-              index === 3 ? (
+              index === 2 ? (
                 <Image
-                  source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
+                  source={
+                    userInfo?.avatar
+                      ? {uri: config.imageEndPoint + userInfo?.avatar}
+                      : IMAGES.IcAvatarDefault
+                  }
                   style={{
                     width: 30,
                     height: 30,

src/navigation/TopTabNavigation.js

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

src/network/api/onLeaveApi.js

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

src/network/axios.js

-/* eslint-disable prettier/prettier */
 import axios from 'axios';
 import Utils from '../utils';
 import config from '../config';

src/screens/confirm_date/ConfirmDateContainer.js

 import Moment from 'moment';
 import React, {useEffect, useState} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import RootNavigation from '../../navigation/RootNavigation';
-import {
-  getAbsentChart,
-  getApproveConfirmDay,
-  getUserConfirmDay,
-} from '../../store/actions/UserAction';
+import {getAbsentChart} from '../../store/actions/UserAction';
 import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
 import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew';
 import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
-import ConfirmDateScreen from './ConfirmDateScreen';
+import {getConfirmApprovedDate, getUserConfirmDay} from './confirmDateSlice';
+import ConfirmDateMainView from './template/ConfirmMainView';
 const ConfirmDateContainer = props => {
+  const {confirmDateList, confirmApprovedDateList, userInfo} = props;
   const dispatch = useDispatch();
-  const {userDetails} = props;
-  const confirmDay = useSelector(state => state.ConfirmDay.confirmDay);
-  const approveConfirmList = useSelector(
-    state => state.ApproveDay.approveConfirm,
-  );
+
   const [requestApproveArr, setRequestApproveArr] = useState([]);
   const [confirmList, setConfirmList] = useState([]);
   const [totalArr, setTotalArr] = useState({
@@ -61,7 +55,7 @@ const ConfirmDateContainer = props => {
       <ConfirmModalDetails
         onClose={onCloseModal}
         alertMessage={alertMessage}
-        userDetails={userDetails}
+        userDetails={userInfo}
         detailItem={detailItem}
         setApproveReqPayload={setApproveReqPayload}
       />,
@@ -71,7 +65,7 @@ const ConfirmDateContainer = props => {
   const onOpenAddModal = () => {
     setModalContent(
       <ConfirmModalAddNew
-        userDetails={userDetails}
+        userDetails={userInfo}
         onClose={onCloseModal}
         alertMessage={alertMessage}
       />,
@@ -111,12 +105,12 @@ const ConfirmDateContainer = props => {
 
   const loadDataRequestApprove = async () => {
     const res = await dispatch(
-      getApproveConfirmDay(
-        approveReqPayload.filter,
-        approveReqPayload.sorts,
-        approveReqPayload.page,
-        approveReqPayload.pageSize,
-      ),
+      getConfirmApprovedDate({
+        filter: approveReqPayload.filter,
+        sort: approveReqPayload.sorts,
+        page: approveReqPayload.page,
+        pageSize: approveReqPayload.pageSize,
+      }),
     );
     if (res.success) {
       //console.log(res);
@@ -278,10 +272,10 @@ const ConfirmDateContainer = props => {
   };
   const formatDataConfirmListFromApi = () => {
     if (userConfirmPayload.isRefresh) {
-      setConfirmList(confirmDay);
+      setConfirmList(confirmDateList);
       return;
     }
-    let merge = [...confirmList, ...confirmDay];
+    let merge = [...confirmList, ...confirmDateList];
     //console.log(merge);
     let format = merge.filter(
       (
@@ -295,10 +289,10 @@ const ConfirmDateContainer = props => {
   };
   const formatDataApproveConfirmListFromApi = () => {
     if (approveReqPayload.isRefresh) {
-      setRequestApproveArr(approveConfirmList);
+      setRequestApproveArr(confirmApprovedDateList);
       return;
     }
-    let merge = [...requestApproveArr, ...approveConfirmList];
+    let merge = [...requestApproveArr, ...confirmApprovedDateList];
 
     let format = merge.filter(
       (
@@ -359,12 +353,10 @@ const ConfirmDateContainer = props => {
     return `${Hours}:${minutes} giờ`;
   };
   // useEffect
-  {
-    /*load init data*/
-  }
+
   useEffect(() => {
-    confirmDay && formatDataConfirmListFromApi();
-  }, [confirmDay]);
+    confirmDateList && formatDataConfirmListFromApi();
+  }, [confirmDateList]);
 
   useEffect(() => {
     dataChart.month && fetchDataChart(dataChart.month);
@@ -375,9 +367,9 @@ const ConfirmDateContainer = props => {
   // }, [dataChart.data]);
 
   useEffect(() => {
-    approveConfirmList &&
-      formatDataApproveConfirmListFromApi(approveConfirmList);
-  }, [approveConfirmList]);
+    confirmApprovedDateList &&
+      formatDataApproveConfirmListFromApi(confirmApprovedDateList);
+  }, [confirmApprovedDateList]);
 
   useEffect(() => {
     approveReqPayload && loadDataRequestApprove();
@@ -390,8 +382,7 @@ const ConfirmDateContainer = props => {
   }, [requestApproveArr, confirmList, totalArr]);
 
   const confirmProps = {
-    approveConfirmList,
-    userDetails,
+    userInfo,
     showAlert,
     requestApproveArr,
     confirmList,
@@ -414,7 +405,7 @@ const ConfirmDateContainer = props => {
     onChangeMonthFilter,
     minutesToHours,
   };
-  return <ConfirmDateScreen {...confirmProps} />;
+  return <ConfirmDateMainView {...confirmProps} />;
 };
 
 export default ConfirmDateContainer;

src/screens/confirm_date/confirmDateSlice.js

+import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
+
+import serviceRequest from '../../app/serviceRequest';
+
+import Utils from '../../utils';
+import authAPI from '../../api/authAPI';
+import confirmDateAPI from '../../api/confirmDateAPI';
+const initialState = {};
+
+export const getUserConfirmDay = createAsyncThunk(
+  'confirmDate/getUserConfirmDay',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: confirmDateAPI.requestGetConfirmDay,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+export const getConfirmApprovedDate = createAsyncThunk(
+  'confirmDate/getConfirmApprovedDate',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: confirmDateAPI.requestGetConfirmApprovedDate,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+const authSlice = createSlice({
+  name: 'confirmDate',
+  initialState: initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(getUserConfirmDay.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+
+      if (success) {
+        state.confirmDateList = Utils.getValues(
+          action,
+          'payload.data.collection',
+          [],
+        );
+      }
+    });
+    builder.addCase(getConfirmApprovedDate.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+      if (success) {
+        state.confirmApprovedDateList = Utils.getValues(
+          action,
+          'payload.data.collection',
+          [],
+        );
+      }
+    });
+  },
+});
+
+const {reducer} = authSlice;
+export default reducer;

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 {authSelector, confirmDateSelector} from '../../app/selectors';
 import ConfirmDateContainer from './ConfirmDateContainer';
 
 export default function ConfirmDateScreen() {
-  const userDetails = useSelector(authSelector);
-
-  const {isLogin, userLoginInfo} = userDetails;
-
-  const homeScreenProps = {
-    isLogin,
-    userLoginInfo,
+  const authSelect = useSelector(authSelector);
+  const confirmDateSelect = useSelector(confirmDateSelector);
+  const {userInfo} = authSelect;
+  const {confirmDateList, confirmApprovedDateList} = confirmDateSelect;
+  const confirmScreenProps = {
+    userInfo,
+    confirmDateList,
+    confirmApprovedDateList,
   };
-  return <ConfirmDateContainer {...homeScreenProps} />;
+  return <ConfirmDateContainer {...confirmScreenProps} />;
 }

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

+import Moment from 'moment';
+import React from 'react';
+import {Image, View} from 'react-native';
+import {IMAGES} from '../../../../values/images';
+import styles from '../../style';
+
+import SelectDropdown from 'react-native-select-dropdown';
+import AppText from '../../../../components/AppText';
+
+const StatisticsConfirmWorkdays = ({
+  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 (
+    <View style={{padding: 15, backgroundColor: 'white'}}>
+      <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}}
+            />
+          );
+        }}
+      />
+
+      <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>
+          </View>
+          {dataChart?.data.length > 0 &&
+            dataChart?.data?.map((item, index) => {
+              let flag = false;
+              return (
+                <View key={index}>
+                  {(index == 0 && (
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                      }}>
+                      {dayOfWeek.map((el, i) => {
+                        if (flag) return true;
+                        if (Moment(item.date).format('dddd') === el) {
+                          flag = true;
+                          return (
+                            <View
+                              key={i}
+                              style={{
+                                width: 30,
+                                height: 30,
+                                backgroundColor:
+                                  (parseInt(item.absent_hours) > 6 &&
+                                    '#7d93ff') ||
+                                  (parseInt(item.absent_hours) >= 4 &&
+                                    parseInt(item.absent_hours) <= 6 &&
+                                    '#7d93ff') ||
+                                  (parseInt(item.absent_hours) >= 2 &&
+                                    parseInt(item.absent_hours) <= 4 &&
+                                    '#7d93ff') ||
+                                  (parseInt(item.absent_hours) > 0 &&
+                                    parseInt(item.absent_hours) <= 2 &&
+                                    '#dfe4ff') ||
+                                  '#f2f2f2',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                margin: 2,
+                              }}>
+                              {
+                                <AppText>{`${new Date(
+                                  item.date,
+                                ).getDate()}`}</AppText>
+                              }
+                            </View>
+                          );
+                        } else {
+                          return (
+                            <View
+                              key={i}
+                              style={{
+                                width: 30,
+                                height: 30,
+                                backgroundColor: '#f2f2f2',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                margin: 2,
+                              }}></View>
+                          );
+                        }
+                      })}
+                    </View>
+                  )) || (
+                    <View
+                      style={{
+                        width: 30,
+                        height: 30,
+                        backgroundColor:
+                          (parseInt(item.absent_hours) > 6 && '#7d93ff') ||
+                          (parseInt(item.absent_hours) >= 4 &&
+                            parseInt(item.absent_hours) <= 6 &&
+                            '#7d93ff') ||
+                          (parseInt(item.absent_hours) >= 2 &&
+                            parseInt(item.absent_hours) <= 4 &&
+                            '#7d93ff') ||
+                          (parseInt(item.absent_hours) > 0 &&
+                            parseInt(item.absent_hours) <= 2 &&
+                            '#dfe4ff') ||
+                          '#f2f2f2',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        margin: 2,
+                      }}>
+                      {<AppText>{`${new Date(item.date).getDate()}`}</AppText>}
+                    </View>
+                  )}
+                </View>
+              );
+            })}
+        </View>
+        <View style={{marginLeft: 30}}>
+          {typeChartColor &&
+            typeChartColor.map((item, i) => (
+              <View key={i} style={{flexDirection: 'row'}}>
+                <View
+                  style={{
+                    width: 20,
+                    height: 20,
+                    marginRight: 10,
+                    marginBottom: 2,
+                    backgroundColor: item.color,
+                  }}
+                />
+                <AppText style={{fontSize: 11}}>{item.name}</AppText>
+              </View>
+            ))}
+          <View style={{marginTop: 10}}>
+            {dayPress && <AppText>{dayPress}</AppText>}
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default StatisticsConfirmWorkdays;

src/screens/home/style.js

@@ -41,6 +41,7 @@ const styles = StyleSheet.create({
   BgBirthday: {
     width: windowWidth - 20,
     height: 80,
+    resizeMode: 'cover',
   },
   view: {
     width: windowWidth - 10,

src/screens/home/template/HomeMainView.js

 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 BirthdayModal from '../modals/BirthdayModals';
 import CalendarBirthday from './subViews/CalendarBirthday';
 import Quotation from './subViews/QuotationList';
-import BirthdayModal from '../modals/BirthdayModals';
 const HomeMainView = ({
   userInfo,
   openView,
@@ -33,7 +31,7 @@ const HomeMainView = ({
           nestedScrollEnabled={true}
           showsVerticalScrollIndicator={false}>
           <View>
-            <View
+            {/* <View
               style={{
                 position: 'absolute',
                 top: 10,
@@ -59,7 +57,7 @@ const HomeMainView = ({
                   onPress={chooseSettingView}
                 />
               )}
-            </View>
+            </View> */}
             <Quotation quotation={randomQuotation} />
           </View>
           {/*Calendar*/}

src/screens/onleave/index.js

-/* eslint-disable prettier/prettier */
 import React from 'react';
 
 import {useSelector} from 'react-redux';
@@ -6,13 +5,19 @@ import {authSelector, onLeaveSelector} from '../../app/selectors';
 import OnLeaveContainer from './onLeaveContainer';
 
 export default function OnLeaveScreen() {
-  const userDetails = useSelector(authSelector);
+  const authSelect = useSelector(authSelector);
   const onLeaveSelect = useSelector(onLeaveSelector);
-  const {usersLeavesDayList = [], userRestDayList = []} = onLeaveSelect;
+  const {
+    usersLeavesDayList = [],
+    userRestDayList = [],
+    approveRequestLeavesDaysList = [],
+  } = onLeaveSelect;
+  const {userInfo} = authSelect;
   const onLeaveScreenProps = {
-    userDetails,
+    userInfo,
     usersLeavesDayList,
     userRestDayList,
+    approveRequestLeavesDaysList,
   };
   return <OnLeaveContainer {...onLeaveScreenProps} />;
 }

src/screens/onleave/onLeavePropsProvider.js

-/* eslint-disable prettier/prettier */
-export default function homePropsProvider(props) {
+export default function onLeavePropsProvider(props) {
   const {
-    userDetails,
-    navigateToConfirmDate,
-    navigateToOverTime,
+    usersLeavesDayList,
+    userInfo,
     dataChart,
-    alertMessage,
     showAlert,
-    onHideAlert,
+    totalArr,
     isDisableLoadMore,
-    onLoadMoreLeavesTicket,
-    leaveList,
+    leaveRequestList,
     leaveApproveReqList,
-    onRefreshLeaveList,
+    modalContent,
+    payloadApproveRequestLeavesDays,
+    approveRequestLeavesDaysList,
     onLoadMoreLeavesApproveReqTicket,
+    onRefreshLeaveList,
     onRefreshLeaveApproveReqList,
-    modalContent,
+    navigateToConfirmDate,
+    navigateToOverTime,
+    alertMessage,
+    onHideAlert,
+    onLoadMoreLeavesTicket,
     onOpenDetailModal,
-    onOpenAddModal,
-    payloadApproveLeaves,
+    onOpenRequestLeavesModal,
+    onCloseModal,
     onChangeSelectFilter,
     minutesToHours,
+    leavesDaysModal,
   } = props;
   return {
-    userDetails,
-    navigateToConfirmDate,
-    navigateToOverTime,
+    leavesDaysModal,
+    usersLeavesDayList,
+    userInfo,
     dataChart,
-    alertMessage,
     showAlert,
-    onHideAlert,
+    totalArr,
     isDisableLoadMore,
-    onLoadMoreLeavesTicket,
-    leaveList,
+    leaveRequestList,
     leaveApproveReqList,
-    onRefreshLeaveList,
+    modalContent,
+    payloadApproveRequestLeavesDays,
+    approveRequestLeavesDaysList,
     onLoadMoreLeavesApproveReqTicket,
+    onRefreshLeaveList,
     onRefreshLeaveApproveReqList,
-    modalContent,
+    navigateToConfirmDate,
+    navigateToOverTime,
+    alertMessage,
+    onHideAlert,
+    onLoadMoreLeavesTicket,
     onOpenDetailModal,
-    onOpenAddModal,
-    payloadApproveLeaves,
+    onOpenRequestLeavesModal,
+    onCloseModal,
     onChangeSelectFilter,
     minutesToHours,
+    approveRequestLeavesDaysProps: {
+      payloadApproveRequestLeavesDays,
+      onChangeSelectFilter,
+      approveRequestLeavesDaysList,
+      userInfo,
+      onOpenDetailModal,
+    },
   };
 }

src/screens/onleave/onLeaveSlice.js

-/* eslint-disable prettier/prettier */
 import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
 
 import serviceRequest from '../../app/serviceRequest';
@@ -38,6 +37,19 @@ export const getUserRestDay = createAsyncThunk(
     });
   },
 );
+export const getApproveRequestLeavesDays = createAsyncThunk(
+  'onLeave/getApproveRequestLeavesDays',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: onLeaveApi.requestGetLeaveDayApproved,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
 
 const onLeaveSlice = createSlice({
   name: 'onLeave',
@@ -46,7 +58,6 @@ const onLeaveSlice = createSlice({
   extraReducers: builder => {
     builder.addCase(getUserLeavesDay.fulfilled, (state, action) => {
       const {success} = Utils.getValues(action, 'payload', false);
-      console.log('getUserLeavesDay', action);
       if (success) {
         state.usersLeavesDayList = Utils.getValues(
           action,
@@ -57,7 +68,6 @@ const onLeaveSlice = createSlice({
     });
     builder.addCase(getUserRestDay.fulfilled, (state, action) => {
       const {success} = Utils.getValues(action, 'payload', false);
-      console.log('getUserRestDay', action);
       if (success) {
         state.userRestDayList = Utils.getValues(
           action,
@@ -66,6 +76,16 @@ const onLeaveSlice = createSlice({
         );
       }
     });
+    builder.addCase(getApproveRequestLeavesDays.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+      if (success) {
+        state.approveRequestLeavesDaysList = Utils.getValues(
+          action,
+          'payload.data.collection',
+          [],
+        );
+      }
+    });
   },
 });
 

src/screens/onleave/style.js

@@ -105,9 +105,9 @@ const styles = StyleSheet.create({
     color: '#5d78ff',
   },
   item: {
-    padding: 20,
-    marginVertical: 2,
-    marginHorizontal: 16,
+    padding: 10,
+    marginVertical: 5,
+    marginHorizontal: 5,
     borderWidth: 1,
     borderBottomColor: '#f2f2f2',
     borderTopColor: '#f2f2f2',
@@ -115,6 +115,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderLeftWidth: 3,
     flexDirection: 'row',
+    alignItems: 'center',
   },
   title: {
     fontWeight: '500',
@@ -193,6 +194,7 @@ const styles = StyleSheet.create({
     width: 130,
     fontSize: 12,
     borderColor: '#444',
+    color: 'red',
   },
   dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'center'},
   rowView: {
@@ -343,10 +345,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#5d78ff',
     borderRadius: 4,
   },
-  btnCancel: {
-    paddingHorizontal: 8,
-    paddingVertical: 12,
-  },
   btnReject: {
     flexDirection: 'row',
     paddingHorizontal: 8,
@@ -374,27 +372,32 @@ const styles = StyleSheet.create({
     borderBottomWidth: 0.2,
     height: 24,
   },
-  dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'},
-  dropdown1RowStyle: {
-    backgroundColor: '#EFEFEF',
-    height: 38,
-    borderRadius: 4,
+  approveRequestTitle: {
+    fontWeight: 'bold',
+    marginVertical: 10,
+    fontSize: 16,
   },
-  dropdown1RowTxtStyle: {color: '#444', textAlign: 'left', fontSize: 14},
-  dropdownSelectTimeText: {color: '#444', textAlign: 'left', fontSize: 14},
-  dropdown1BtnStyle: {
-    backgroundColor: '#FFF',
-    borderWidth: 0.5,
-    borderRadius: 8,
-    height: 35,
-    width: 130,
-    fontSize: 12,
-    borderColor: '#444',
+  userAvatarRequest: {
+    width: 30,
+    height: 30,
+    alignSelf: 'center',
+    marginRight: 10,
   },
-  dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'center'},
-  rowView: {
+  approveRequestFilter: {
     flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 5,
+  },
+  leaveRequestEmptyView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
     marginTop: 10,
+    padding: 20,
+  },
+  myLeavesTitleView: {
+    flexDirection: 'row',
+    marginBottom: 10,
     justifyContent: 'space-between',
     alignItems: 'center',
   },

src/values/colors.js

 const colors = {
-    black: '#464646',
-    black1: '#000000',
-    light_black: '#524e4e',
-    primary_blue: '#2430E7',
-    purple_blue: '#5d78ff',
-    secondary_blue: '#007FE8',
-    tertiary_blue: '#005DCE',
-    primary_green: '#56FFB0',
-    bottom_green: '#25E7DB',
-    secondary_green: '#00DAB8',
-    tertiary_green: '#00CFAE',
-    input_green: '#02B19A',
-    appTheme: ['#fffaf7', '#fffaf7', '#fffaf7'],
-    subTheme: ['rgb(31, 162, 255)', 'rgb(18, 216, 250)'],
-    textInput: '#e5e5e5',
-    placeholder: 'rgb(227, 236, 239)',
-    adminHeaderBackground: '#005B3C',
-    red: '#FF6868',
-    orange: '#FF8300',
-    green: '#00d816',
-    green0a: '#0abb87',
-    greenE0: '#e0f7f0',
-    lightGray: '#E5E5E5',
-    grey: '#CACACA',
-    royal_blue: '#057DCD',
-    grayC4: '#C4C4C4',
-    white: '#fff',
-    blue1: '#edf8fe',
-    blue5c: "#5c65dc",
-    gray59: '#595959',
-    grayE9: "#e9eaf9"
-    
-  }
-  export default colors
-  
\ No newline at end of file
+  black: '#464646',
+  black1: '#000000',
+  light_black: '#524e4e',
+  primary_blue: '#2430E7',
+  purple_blue: '#5d78ff',
+  secondary_blue: '#007FE8',
+  tertiary_blue: '#005DCE',
+  primary_green: '#56FFB0',
+  bottom_green: '#25E7DB',
+  secondary_green: '#00DAB8',
+  tertiary_green: '#00CFAE',
+  input_green: '#02B19A',
+  appTheme: ['#fffaf7', '#fffaf7', '#fffaf7'],
+  subTheme: ['rgb(31, 162, 255)', 'rgb(18, 216, 250)'],
+  textInput: '#e5e5e5',
+  placeholder: 'rgb(227, 236, 239)',
+  adminHeaderBackground: '#005B3C',
+  red: '#FF6868',
+  orange: '#FF8300',
+  green: '#00d816',
+  green0a: '#0abb87',
+  greenE0: '#e0f7f0',
+  lightGray: '#E5E5E5',
+  grey: '#CACACA',
+  royal_blue: '#057DCD',
+  grayC4: '#C4C4C4',
+  white: '#fff',
+  blue1: '#edf8fe',
+  blue5c: '#5c65dc',
+  gray59: '#595959',
+  grayE9: '#e9eaf9',
+  textColor: '#202121',
+};
+export default colors;