import React from 'react'; import { Image, SafeAreaView, ScrollView, TouchableOpacity, View, } from 'react-native'; import Moment from 'moment'; import Alert from 'react-native-awesome-alerts'; import {BarChart} from 'react-native-chart-kit'; import SelectDropdown from 'react-native-select-dropdown'; import {GifType, IMAGES} from '../../values/images'; import FastImage from 'react-native-fast-image'; import AppText from '../../components/AppText'; import ButtonComponent from '../../components/ButtonComponent'; import styles from './style'; import Utils from '../../utils'; const OvertimeScreen = ({ userDetails, otVoucherList, otApproveReqVoucherList, navigateToConfirmDate, navigateToOnLeave, chartConfig, chartData, showAlert, setShowAlert, setMonth, isDisableLoadMore, onLoadMoreOtList, onLoadMoreOtApproveReqList, onRefreshOtList, onRefreshApproveList, modalContent, onOpenAddModal, onOpenDetailModal, payloadOtApproveList, onChangeSelectFilter, }) => { //console.log('Moment().month()', Moment().month()); return ( <SafeAreaView> <ScrollView nestedScrollEnabled={true} showsVerticalScrollIndicator={false}> <View style={styles.barChartContainer}> {chartData && ( <View style={{ ...styles.ChartView, overflow: 'scroll', }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }}> <View> <AppText style={styles.boldTitle}>Thống kê tăng ca</AppText> </View> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', marginBottom: 16, }}> <AppText style={{marginRight: 8}}>Tháng</AppText> <SelectDropdown data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]} defaultValue={Moment().month() + 1} dropdownIconPosition={'right'} buttonStyle={{ ...styles.dropdown1BtnStyle, width: '40%', backgroundColor: 'white', }} onSelect={selectedItem => setMonth(selectedItem)} dropdownStyle={{ ...styles.dropdown1DropdownStyle, }} rowStyle={styles.dropdown1RowStyle} rowTextStyle={{color: '#444', textAlign: 'center'}} buttonTextStyle={{color: '#444', textAlign: 'center'}} /> </View> </View> <AppText style={{fontWeight: 'bold'}}>Tần suất</AppText> <ScrollView horizontal={true} style={{marginTop: 8}}> <BarChart data={chartData} width={3000} height={220} chartConfig={chartConfig} withInnerLines={false} /> </ScrollView> <AppText style={{fontWeight: 'bold', textAlign: 'right'}}> Ngày </AppText> </View> )} </View> <View style={styles.view}> <AppText style={{fontWeight: '500', marginBottom: 10}}> Tăng ca của bạn:{' '} </AppText> <View style={{alignItems: 'center', justifyContent: 'center'}}> <TouchableOpacity style={styles.btnConfirm} onPress={() => { onOpenAddModal(); }}> <Image source={IMAGES.IcBtnAdd} style={styles.iconPlus} /> <AppText style={styles.whiteTxt}>YÊU CẦU TĂNG CA</AppText> </TouchableOpacity> </View> <AppText style={{fontWeight: '500', marginBottom: 10, marginTop: 10}}> Liên kết nhanh:{' '} </AppText> <TouchableOpacity style={{flexDirection: 'row'}} onPress={navigateToConfirmDate}> <Image source={IMAGES.IcTask} style={styles.iconPlus} /> <AppText style={styles.primary_blue}>Xác nhận ngày công</AppText> </TouchableOpacity> <TouchableOpacity onPress={navigateToOnLeave} style={{flexDirection: 'row', marginTop: 5}}> <Image source={IMAGES.IcBackTime} style={styles.iconPlus} /> <AppText style={styles.primary_blue}>Nghỉ phép của tôi</AppText> </TouchableOpacity> </View> {/**Approve Request */} {otApproveReqVoucherList && ( <View style={[styles.view, {marginBottom: 10}]}> <View style={{marginBottom: 10, flexDirection: 'row'}}> <AppText style={{ fontWeight: 'bold', marginBottom: 10, flex: 2, fontSize: 17, }}> Duyệt yêu cầu tăng ca{' '} </AppText> <View style={{alignItems: 'flex-end', flex: 1, paddingRight: 20}}> <SelectDropdown data={['Tất cả', 'Chưa duyệt', 'Đã duyệt', 'Đã từ chối']} dropdownIconPosition={'right'} defaultButtonText={payloadOtApproveList?.type} buttonStyle={styles.dropdown1BtnStyle} onSelect={selectedItem => onChangeSelectFilter(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> </View> {otApproveReqVoucherList?.length > 0 && //otApproveReqVoucherList[0]?.approver_id == userDetails.id && otApproveReqVoucherList.map((item, index) => ( <TouchableOpacity key={index} style={[ styles.item, { borderLeftColor: item?.extend_approved_status_color, }, ]} onPress={() => { onOpenDetailModal(item?.id); }}> <View style={{ flexDirection: 'row', flex: 2, alignItems: 'center', }}> <Image source={{ uri: 'https://meu.anawork.com' + item.extend_creator_avatar, }} style={{ width: 40, height: 40, marginRight: 10, borderRadius: 8, }} /> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }}> <View> <AppText style={{...styles.title, marginBottom: 4}}> {item.extend_creator_full_name} </AppText> <AppText> {Moment(item.start).format('DD/MM/YYYY')} -{' '} {Moment(item.finish).format('DD/MM/YYYY')} </AppText> </View> </View> </View> <View style={{ flex: 1, alignItems: 'flex-end', marginLeft: 10, }}> <AppText style={{textAlign: 'right'}}> {item.reason} </AppText> <AppText style={{textAlign: 'right'}}>{`${Moment( item.finish, ).diff(Moment(item.start), 'hours')} giờ`}</AppText> </View> </TouchableOpacity> ))} {!isDisableLoadMore.approveRequestBtn && otApproveReqVoucherList?.length > 0 && ( <ButtonComponent style={{ justifyContent: 'center', alignItems: 'center', padding: 10, }} text={'Xem thêm'} textStyle={{color: '#5d78ff'}} onPress={onLoadMoreOtApproveReqList} /> )} </View> )} {/* My OT*/} <View style={[styles.view, {marginBottom: 30}]}> <View style={{flexDirection: 'row', marginBottom: 10}}> <AppText style={{ fontWeight: 'bold', marginBottom: 10, flex: 1, fontSize: 17, alignSelf: 'center', }}> Tăng ca của tôi </AppText> <View style={{alignItems: 'flex-end', flex: 1, paddingRight: 20}}> <ButtonComponent text={'Tải lại'} textStyle={{color: '#5d78ff'}} style={{ justifyContent: 'center', alignItems: 'center', padding: 10, flexDirection: 'row', }} onPress={onRefreshOtList} leftIcon={IMAGES.IcRefresh} styleIcon={{width: 20, height: 20}} /> </View> </View> {/**Gif */} {otVoucherList.length === 0 && ( <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', marginTop: 10, padding: 20, }}> <AppText style={{textAlign: 'center'}}> Chưa có tăng ca nào 🧐 Bạn vui lòng thêm “yêu cầu tăng ca” ngay bên trên nhé! </AppText> <FastImage source={GifType.gifOt} style={{width: '90%', height: 250}} /> </View> )} {otVoucherList.map((item, index) => ( <TouchableOpacity key={index} style={{ ...styles.item, borderLeftColor: item.extend_approved_status_color, }} onPress={() => { onOpenDetailModal(item?.id); }}> <View style={{flex: 3, alignItems: 'flex-start'}}> <AppText style={{...styles.title, marginBottom: 6}} numberOfLines={1}> {item.reason} </AppText> <AppText>{`${Moment(item.start).format( 'DD/MM/YYYY', )} - ${Moment(item.finish).format('DD/MM/YYYY')}`}</AppText> </View> <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'flex-end', }}> <AppText>{''}</AppText> <AppText style={{textAlign: 'right'}}> {Utils.minutesToHours(item.start, item.finish)} </AppText> </View> </TouchableOpacity> ))} {otVoucherList?.length > 0 && !isDisableLoadMore.overtimeBtn && ( <ButtonComponent style={{ justifyContent: 'center', alignItems: 'center', padding: 10, }} text={'Xem thêm'} textStyle={{color: '#5d78ff'}} onPress={onLoadMoreOtList} /> )} </View> {/* Alert */} <Alert show={showAlert.isShow} showProgress={false} title={showAlert.title} message={showAlert.message} closeOnTouchOutside={true} closeOnHardwareBackPress={false} showConfirmButton={true} confirmText="Đóng" confirmButtonColor="#DD6B55" onConfirmPressed={() => setShowAlert({ ...showAlert, isShow: false, }) } /> {modalContent} </ScrollView> </SafeAreaView> ); }; export default OvertimeScreen;