@tima2025/react-native-timalender 1.0.0

package/src/screens/PendingLoan/index.tsx

@@ -0,0 +1,339 @@
+//@ts-nocheck
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react-native/no-inline-styles */
+import moment from 'moment';
+import React, { useEffect, useRef, useState } from 'react';
+import { FlatList, ScrollView, TouchableOpacity, View } from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import { useDispatch, useSelector } from 'react-redux';
+import AppHeader from '../../common/AppHeader';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import Loading from '../../common/Loading';
+import { actuatedNormalize, Shadow } from '../../common/Metrics';
+import RText from '../../common/RText';
+import { IoIconApp } from '../../common/VectorIcon/Icon';
+import ModalCalendarPicker from '../../components/CalenderPicker/ModalCalendarPicker';
+import {
+  getAppWithdraw,
+  getCustomerPayment,
+  getDebtPending,
+  getInsurancePending,
+} from '../../components/Features/Loans/loanSlice';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+import ModalFilterTime from './Components/ModalFilterTime';
+import styles from './styles';
+import Tab1 from './Tabs/Tab1';
+import Tab1DT from './Tabs/Tab1DT';
+import Tab2 from './Tabs/Tab2';
+import Tab3 from './Tabs/Tab3';
+
+export const PendingLoan = ({ route, _navigation }: any) => {
+  const isLoading = useSelector(selectLoading);
+  const typeLender = route?.params?.typeLender;
+  const dispatch = useDispatch<AppDispatch>();
+  const getLast90Days = moment().subtract('89', 'days').format('DD/MM/YYYY');
+  const currentDay = moment(new Date()).format('DD/MM/YYYY');
+  const [data, setData] = useState<any>(null);
+  const scrollRef = useRef<any>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [fromDate, setFromDate] = useState('');
+  const [toDate, setToDate] = useState('');
+  const [fromDatePicker, setFromDatePicker] = useState(getLast90Days);
+  const [toDatePicker, setToDatePicker] = useState(currentDay);
+  const [openFilterTime, setOpenFilterTime] = useState(false);
+  const [openCalendar, setOpenCalendar] = useState(false);
+
+  useEffect(() => {
+    scrollRef?.current?.scrollToIndex({
+      index: currentIndex,
+      animated: true,
+      viewPosition: 0.5,
+      viewOffset: 20,
+    });
+  }, [currentIndex]);
+
+  const tabs = [
+    {
+      id: 0,
+      title: 'KH thanh toán',
+    },
+    {
+      id: 1,
+      title: 'Chờ mua nợ',
+    },
+    {
+      id: 2,
+      title: 'Chờ bảo hiểm',
+    },
+  ];
+
+  useEffect(() => {
+    if (currentIndex === 0 && typeLender === 'DT') {
+      getDataTab1DT();
+    } else if (currentIndex === 1) {
+      getDataTab2();
+    } else if (currentIndex === 2) {
+      getDataTab3();
+    }
+  }, [fromDatePicker, toDatePicker, currentIndex]);
+
+  useEffect(() => {
+    if (currentIndex === 0 && typeLender === 'NA') {
+      getDataTab1();
+    }
+  }, [fromDate, toDate, currentIndex]);
+
+  const getDataTab1 = async () => {
+    const resp: any = await dispatch(
+      getCustomerPayment({
+        fromDate,
+        toDate,
+      })
+    );
+    console.log('resp data tab1::---', resp);
+    if (resp.payload.meta.errCode === 200) {
+      setData(resp.payload.data);
+    }
+  };
+
+  const getDataTab1DT = async () => {
+    const resp: any = await dispatch(
+      getAppWithdraw({
+        fromDate: fromDatePicker,
+        toDate: toDatePicker,
+      })
+    );
+    console.log('resp data tab1::---', resp);
+    if (resp.payload.meta.errCode === 200) {
+      setData(resp.payload.data);
+    }
+  };
+
+  const getDataTab2 = async () => {
+    const resp: any = await dispatch(
+      getDebtPending({
+        fromDate: fromDatePicker,
+        toDate: toDatePicker,
+      })
+    );
+    if (resp.payload.meta.errCode === 200) {
+      if (!resp?.data?.lstLoanBuyDebtPending?.length) {
+        // WToastShowError('Không tìm thấy thông tin dữ liệu');
+        showMessage({
+          message: 'Thông báo',
+          description: 'Không tìm thấy thông tin dữ liệu',
+          type: 'danger',
+          icon: 'warning',
+          backgroundColor: Colors.DANGER,
+        });
+      }
+      setData(resp.payload.data);
+    } else if (resp?.payload?.meta?.errCode === 201) {
+      // WToastShowError(resp?.payload?.meta?.errMessage);
+      showMessage({
+        message: 'Thông báo',
+        description: resp?.payload?.meta?.errMessage,
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+      setData([]);
+    } else {
+      setData([]);
+    }
+    console.log('resp data tab2::---', resp);
+  };
+
+  const getDataTab3 = async () => {
+    const resp: any = await dispatch(
+      getInsurancePending({
+        fromDate: fromDatePicker,
+        toDate: toDatePicker,
+      })
+    );
+    if (resp.payload.meta.errCode === 200) {
+      setData(resp.payload.data);
+    } else if (resp?.payload?.meta?.errCode === 201) {
+      // WToastShowError(resp?.payload?.meta?.errMessage);
+      showMessage({
+        message: 'Thông báo',
+        description: resp?.payload?.meta?.errMessage,
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+      setData([]);
+    }
+    console.log('resp data: tab3:---', resp);
+  };
+
+  return (
+    <Container>
+      <AppHeader
+        title={'Số tiền chờ nhận'}
+        backColor={Colors.WHITE}
+        iconColor={Colors.BLACK}
+        titleStyle={{ color: Colors.BLACK }}
+        // renderRight={() => <ButtonIcon iconName="information-circle-outline" />}
+      />
+      <ScrollView>
+        <View>
+          <FlatList
+            data={tabs}
+            horizontal
+            ref={scrollRef}
+            style={{
+              paddingTop: actuatedNormalize(16),
+              paddingLeft: actuatedNormalize(12),
+            }}
+            showsHorizontalScrollIndicator={false}
+            keyExtractor={(item) => item?.id?.toString()}
+            renderItem={({ item, index }) => {
+              let checked = false;
+              if (currentIndex === index) {
+                checked = true;
+              }
+              return (
+                <TouchableOpacity
+                  onPress={() => {
+                    if (index === 0) {
+                      setCurrentIndex(index);
+                    } else {
+                      setCurrentIndex(index);
+                      setFromDatePicker(getLast90Days);
+                      setToDate(currentDay);
+                    }
+                  }}
+                  disabled={checked}
+                  style={[
+                    styles.item,
+                    {
+                      borderBottomWidth: checked ? 2 : 0,
+                      borderColor: checked ? Colors.ORANGE : Colors.WHITE,
+                    },
+                  ]}
+                  key={item.id}
+                >
+                  <RText
+                    textStyle={{
+                      color: checked ? '#333333' : Colors.GREY,
+                      fontWeight: '600',
+                    }}
+                  >
+                    {typeLender === 'DT' && item?.id === 0
+                      ? 'Chờ rút tiền'
+                      : item.title}
+                  </RText>
+                </TouchableOpacity>
+              );
+            }}
+          />
+        </View>
+        <View
+          style={{
+            paddingHorizontal: actuatedNormalize(16),
+          }}
+        >
+          {currentIndex === 0 && typeLender === 'NA' ? (
+            <FlexRow
+              style={{
+                marginTop: actuatedNormalize(16),
+                marginBottom: actuatedNormalize(8),
+              }}
+            >
+              <RText textStyle={{ color: Colors.GRAY_3 }}>Lọc theo</RText>
+              <TouchableOpacity
+                onPress={() => setOpenFilterTime(true)}
+                style={{
+                  backgroundColor: Colors.WHITE,
+                  borderRadius: 100,
+                  paddingVertical: actuatedNormalize(8),
+                  paddingHorizontal: actuatedNormalize(12),
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  marginLeft: actuatedNormalize(16),
+                  height: actuatedNormalize(36),
+                  ...Shadow,
+                }}
+              >
+                <IoIconApp name="calendar-outline" size={16} />
+                <RText
+                  textStyle={{
+                    paddingLeft: actuatedNormalize(8),
+                    fontSize: actuatedNormalize(14),
+                  }}
+                >
+                  Từ {fromDate} - {toDate}
+                </RText>
+              </TouchableOpacity>
+            </FlexRow>
+          ) : (
+            <FlexRow
+              style={{
+                marginTop: actuatedNormalize(16),
+                marginBottom: actuatedNormalize(8),
+              }}
+            >
+              <RText textStyle={{ color: Colors.GRAY_3 }}>Lọc theo</RText>
+              <TouchableOpacity
+                onPress={() => setOpenCalendar(true)}
+                style={{
+                  backgroundColor: Colors.WHITE,
+                  borderRadius: 100,
+                  paddingVertical: actuatedNormalize(8),
+                  paddingHorizontal: actuatedNormalize(12),
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  marginLeft: actuatedNormalize(16),
+                  height: actuatedNormalize(36),
+                  ...Shadow,
+                }}
+              >
+                <IoIconApp name="calendar-outline" size={16} />
+                <RText
+                  textStyle={{
+                    paddingLeft: actuatedNormalize(8),
+                    fontSize: actuatedNormalize(14),
+                  }}
+                >
+                  Từ {fromDatePicker} - {toDatePicker}
+                </RText>
+              </TouchableOpacity>
+            </FlexRow>
+          )}
+        </View>
+        {currentIndex === 0 && typeLender === 'NA' ? (
+          <Tab1 data={data} />
+        ) : currentIndex === 0 && typeLender === 'DT' ? (
+          <Tab1DT data={data} />
+        ) : currentIndex === 1 ? (
+          <Tab2 data={data} />
+        ) : (
+          <Tab3 data={data} />
+        )}
+      </ScrollView>
+
+      <ModalFilterTime
+        isVisible={openFilterTime}
+        fromDate={(val: string) => setFromDate(val)}
+        toDate={(val: string) => setToDate(val)}
+        onBackdropPress={() => setOpenFilterTime(false)}
+        tabIndex={currentIndex}
+        typeLender={typeLender}
+        size={9}
+        status={0}
+      />
+
+      <ModalCalendarPicker
+        isVisible={openCalendar}
+        onBackdropPress={() => setOpenCalendar(false)}
+        selectedStartDate={(val: string) => setFromDatePicker(val)}
+        selectedEndDate={(val: string) => setToDatePicker(val)}
+      />
+      {isLoading && <Loading />}
+    </Container>
+  );
+};

package/src/screens/PendingLoan/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { actuatedNormalize } from '../../common/Metrics';
+
+const styles = StyleSheet.create({
+  wrap: {
+    paddingHorizontal: actuatedNormalize(16),
+  },
+
+  item: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: actuatedNormalize(8),
+    paddingBottom: actuatedNormalize(6),
+  },
+});
+
+export default styles;

package/src/screens/PendingMoney/index.tsx

@@ -0,0 +1,307 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import { FlatList, TouchableOpacity, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import AppHeader from '../../common/AppHeader';
+import constant from '../../common/constants/index';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import { numberWithCommas } from '../../common/Metrics';
+import RText from '../../common/RText';
+import { statisticsPending } from '../../components/Features/Loans/loanSlice';
+import Screens from '../../components/Navigation/Screens';
+import { userInfor } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+
+export const PendingMoney = ({ navigation }: any) => {
+  const dispatch = useDispatch<AppDispatch>();
+  const userDataInfor = useSelector(userInfor);
+  const [dataPending, setDataPending] = useState<any>(null);
+
+  useEffect(() => {
+    getDataPending();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getDataPending = async () => {
+    const resp: any = await dispatch(statisticsPending(userDataInfor.id));
+    console.log('resp', resp);
+
+    if (resp.payload.meta.errCode === 200) {
+      setDataPending(resp.payload.data);
+    }
+  };
+
+  function _renderItem(item: any, index: number) {
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={() => navigation.navigate(Screens.DetailHistory, { item })}
+      >
+        <FlexRow
+          style={{
+            paddingVertical: 12,
+          }}
+        >
+          <View
+            style={{
+              flex: (44 * constant.widthDevice) / 320,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <RText style={{ fontSize: 14, color: '#444444' }}>
+              {index + 1}
+            </RText>
+          </View>
+          <View
+            style={{
+              flex: (88 * constant.widthDevice) / 320,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <RText style={{ fontSize: 14, color: '#444444' }}>
+              {item?.code}
+            </RText>
+          </View>
+          <View
+            style={{
+              flex: (188 * constant.widthDevice) / 320,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <RText style={{ fontSize: 14, color: '#444444' }}>
+              {numberWithCommas(
+                item?.interestMoney + item?.fineMoney + item?.originalMoney
+              )}{' '}
+              VNĐ
+            </RText>
+          </View>
+        </FlexRow>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <Container isStatusBar>
+      <AppHeader title={'Số tiền Nhà đầu tư chờ nhận'.toUpperCase()} />
+      <View style={{ flex: 1 }}>
+        {userDataInfor.regFromApp ? (
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: 'white',
+              padding: 12,
+              marginVertical: 8,
+            }}
+          >
+            <RText style={{ fontSize: 14, color: '#666666' }}>
+              {'Tổng tiền'.toUpperCase()}
+            </RText>
+            <RText
+              style={{
+                fontSize: 24,
+                color: constant.primaryColor,
+                paddingTop: 4,
+              }}
+            >
+              {numberWithCommas(dataPending?.totalMoney)} VNĐ
+            </RText>
+          </View>
+        ) : (
+          <View
+            style={{
+              paddingVertical: 8,
+              paddingHorizontal: 24,
+              marginTop: 8,
+              backgroundColor: 'white',
+            }}
+          >
+            <View
+              style={{
+                justifyContent: 'center',
+                alignItems: 'center',
+                paddingVertical: 8,
+              }}
+            >
+              <RText style={{ fontSize: 14, color: '#444444' }}>
+                {'Tổng tiền'.toUpperCase()}
+              </RText>
+              <RText
+                style={{
+                  fontSize: 24,
+                  color: constant.primaryColor,
+                  paddingTop: 4,
+                }}
+              >
+                {numberWithCommas(dataPending?.currentMoney)} VNĐ
+              </RText>
+            </View>
+            <View style={{ paddingVertical: 8 }}>
+              <FlexRow style={{ alignItems: 'center', paddingVertical: 2 }}>
+                <RText
+                  style={{
+                    fontSize: 14,
+                    color: '#444444',
+                  }}
+                >
+                  {'Tổng gốc & lãi thu: '}
+                </RText>
+                <RText
+                  style={{
+                    fontSize: 16,
+                    color: '#444444',
+                    flex: 1,
+                    textAlign: 'right',
+                  }}
+                >
+                  {numberWithCommas(dataPending?.totalMoney)} VNĐ
+                </RText>
+              </FlexRow>
+              <FlexRow style={{ alignItems: 'center', paddingVertical: 2 }}>
+                <RText
+                  style={{
+                    fontSize: 14,
+                    color: '#444444',
+                  }}
+                >
+                  {'Tái đầu tư: '}
+                </RText>
+                <RText
+                  style={{
+                    fontSize: 16,
+                    color: '#444444',
+                    flex: 1,
+                    textAlign: 'right',
+                  }}
+                >
+                  {numberWithCommas(dataPending?.reinvestMoney)} VNĐ
+                </RText>
+              </FlexRow>
+              <FlexRow style={{ alignItems: 'center', paddingVertical: 2 }}>
+                <RText
+                  style={{
+                    fontSize: 14,
+                    color: '#444444',
+                  }}
+                >
+                  {'Nhà đầu tư rút: '}
+                </RText>
+                <RText
+                  style={{
+                    fontSize: 16,
+                    color: '#444444',
+                    flex: 1,
+                    textAlign: 'right',
+                  }}
+                >
+                  {numberWithCommas(dataPending?.withdrawMoney)} VNĐ
+                </RText>
+              </FlexRow>
+              <FlexRow style={{ alignItems: 'center', paddingVertical: 2 }}>
+                <RText
+                  style={{
+                    fontSize: 14,
+                    color: '#444444',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {'Khả dụng: '}
+                </RText>
+                <RText
+                  style={{
+                    fontSize: 16,
+                    color: '#444444',
+                    flex: 1,
+                    textAlign: 'right',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {numberWithCommas(dataPending?.currentMoney)} VNĐ
+                </RText>
+              </FlexRow>
+            </View>
+          </View>
+        )}
+        <RText
+          style={{
+            fontSize: 14,
+            color: '#444444',
+            textAlign: 'center',
+            fontWeight: 'bold',
+            backgroundColor: 'white',
+            marginTop: 8,
+            paddingVertical: 4,
+          }}
+        >
+          Lịch sử thanh toán các HĐ
+        </RText>
+        <View style={{ backgroundColor: 'white' }}>
+          <FlexRow
+            style={{
+              paddingVertical: 12,
+            }}
+          >
+            <View
+              style={{
+                flex: (44 * constant.widthDevice) / 320,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <RText
+                style={{
+                  fontSize: 14,
+                  color: '#444444',
+                  textAlign: 'center',
+                  fontWeight: 'bold',
+                }}
+              >
+                STT
+              </RText>
+            </View>
+            <View
+              style={{
+                flex: (88 * constant.widthDevice) / 320,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <RText
+                style={{
+                  fontSize: 14,
+                  color: '#444444',
+                  fontWeight: 'bold',
+                }}
+              >
+                {'Mã hợp đồng'}
+              </RText>
+            </View>
+            <View
+              style={{
+                flex: (188 * constant.widthDevice) / 320,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <RText
+                style={{ fontSize: 14, color: '#444444', fontWeight: 'bold' }}
+              >
+                Số tiền
+              </RText>
+            </View>
+          </FlexRow>
+        </View>
+        <FlatList
+          data={dataPending}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item, index }) => _renderItem(item, index)}
+        />
+      </View>
+    </Container>
+  );
+};