@tima2025/react-native-timalender 1.0.0

package/src/screens/ListLoan/index.tsx

@@ -0,0 +1,572 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import moment from 'moment';
+import React, { useEffect, useRef, useState } from 'react';
+import { FlatList, TouchableOpacity, View } from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import LinearGradient from 'react-native-linear-gradient';
+import { useDispatch, useSelector } from 'react-redux';
+import AppHeader from '../../common/AppHeader';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import EmptyView from '../../common/EmptyView';
+import FlexRow from '../../common/FlexRow';
+import formatNumber from '../../common/FormatNumber';
+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 {
+  getLoans,
+  getStatsLoanClosed,
+} from '../../components/Features/Loans/loanSlice';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+import RenderListLoan from './Components/ListLoan';
+import ListLoanClosed from './Components/ListLoanClosed';
+import PopoverChooseStatus from './Components/PopoverChooseStatus';
+import ModalFilter from './ModalFilter';
+import styles from './styles';
+
+const TopSlice: any = [
+  {
+    id: 0,
+    title: 'Đơn của bạn',
+  },
+  {
+    id: 1,
+    title: 'Đã kết thúc',
+  },
+];
+
+const dateTypes = [
+  {
+    label: 'Ngày giải ngân',
+    value: 1,
+  },
+  {
+    label: 'Ngày tất toán',
+    value: 2,
+  },
+];
+
+export const ListLoan = ({ _navigation, route }: any) => {
+  const typeName = route?.params?.typeName;
+  const scrollRef = useRef<any>(null);
+  const touchRef = useRef<any>(null);
+  const isLoading = useSelector(selectLoading);
+  const dispatch = useDispatch<AppDispatch>();
+  const [dataLoan, setDataLoan] = useState<any>([]);
+  const [dataMoneyLoan, setDataMoneyLoan] = useState<any>(null);
+  const [openFilter, setOpenFilter] = useState(false);
+  const [currentStatus, setCurrentStatus] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [openCalendar, setOpenCalendar] = useState(false);
+  const [openChooseStatus, setOpenChooseStatus] = useState(false);
+  const [statusLoan, setStatusLoan] = useState('');
+
+  const [params, setParams] = useState({
+    fromDate: moment().add(-5, 'years').format('DD/MM/YYYY'),
+    toDate: moment().format('DD/MM/YYYY'),
+    status: currentStatus,
+    dateType: dateTypes[0].value,
+    page: 1,
+    pageSize: 15,
+  });
+
+  console.log('dataMoneyLoandataMoneyLoan: ', dataMoneyLoan);
+
+  useEffect(() => {
+    if (currentIndex === 0) {
+      getListLoans();
+    } else {
+      getStatsClosedLoan();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params]);
+
+  const getStatsClosedLoan = async () => {
+    // const _params = {
+    //   page: 1,
+    //   pageSize: 15,
+    // };
+    const resp: any = await dispatch(getStatsLoanClosed(params));
+    console.log('resp close-----', resp);
+    if (
+      resp.payload.meta.errCode === 200 &&
+      resp.payload.data?.lstLoan?.length
+    ) {
+      const data = resp?.payload?.data?.lstLoan || [];
+      // const filterByTotalPit = data
+      //   .map((i: any) => i?.pitMoney)
+      //   .reduce((a: number, c: number) => a + c);
+      // setTotalPit(filterByTotalPit);
+      setDataLoan(data);
+      setDataMoneyLoan(resp?.payload?.data);
+    } else if (resp.payload.meta.errCode === 201) {
+      // WToastShowError('Không có dữ liệu !');
+      showMessage({
+        message: 'Thông báo',
+        description: 'Không có dữ liệu !',
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+      setDataLoan([]);
+      setDataMoneyLoan(null);
+    } else {
+      // WToastShowError('Không có dữ liệu !');
+      showMessage({
+        message: 'Thông báo',
+        description: 'Không có dữ liệu !',
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+      setDataLoan([]);
+      setDataMoneyLoan(null);
+    }
+  };
+
+  const getListLoans = async () => {
+    const resp: any = await dispatch(getLoans(params));
+    console.log('data1-----', JSON.stringify(resp));
+    if (
+      resp.payload.meta.errCode === 200 &&
+      resp?.payload?.data?.lstLoan?.length
+    ) {
+      const data = resp?.payload?.data?.lstLoan;
+      // const filterByTotalPit = data
+      //   .map((i: any) => i?.pitMoney)
+      //   .reduce((a: number, c: number) => a + c);
+      // setTotalPit(filterByTotalPit);
+      setDataMoneyLoan(resp?.payload?.data);
+      const groupedData = Object.values(
+        data?.reduce((spd, item) => {
+          if (!spd[moment(item.dateDisbursement).format('DD-MM-YYYY')]) {
+            spd[moment(item.dateDisbursement).format('DD-MM-YYYY')] = {
+              name: moment(item.dateDisbursement).format('DD-MM-YYYY'),
+              items: [],
+            };
+          }
+          spd[moment(item.dateDisbursement).format('DD-MM-YYYY')].items.push(
+            item
+          );
+          return spd;
+        }, {})
+      );
+      // const rs = sortBy(groupedData, function (o) {
+      //   return moment(o?.name);
+      // });
+      const rs = groupedData.sort(
+        (a, b) =>
+          moment(b.name, 'DD-MM-YYYY').valueOf() -
+          moment(a.name, 'DD-MM-YYYY').valueOf()
+      );
+      console.log('-----------------');
+      console.log('rs:rs: ', JSON.stringify(rs));
+      setDataLoan(rs);
+    } else {
+      // WToastShowError('Không có dữ liệu !');
+      showMessage({
+        message: 'Thông báo',
+        description: 'Không có dữ liệu !',
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+      setDataLoan([]);
+      setDataMoneyLoan(null);
+    }
+  };
+
+  // const rightItem = () => {
+  //   return (
+  //     <TouchableOpacity
+  //       onPress={() => setOpenFilter(true)}
+  //       style={{
+  //         borderRadius: 8,
+  //         backgroundColor: openFilter ? Colors.WHITE : undefined,
+  //         width: actuatedNormalize(32),
+  //         height: actuatedNormalize(32),
+  //         alignItems: 'center',
+  //         justifyContent: 'center',
+  //       }}
+  //     >
+  //       <Icon
+  //         name="funnel-outline"
+  //         size={actuatedNormalize(24)}
+  //         color={Colors.GRAY_2}
+  //       />
+  //     </TouchableOpacity>
+  //   );
+  // };
+
+  const _renderListLoan = ({ item, _index }: any) => {
+    console.log('item: ', item);
+    return (
+      <View>
+        <View
+          style={{
+            backgroundColor: '#FFF3E8',
+            paddingVertical: actuatedNormalize(4),
+            paddingHorizontal: actuatedNormalize(16),
+          }}
+        >
+          <RText
+            textStyle={{ fontWeight: '400', fontSize: actuatedNormalize(10) }}
+          >
+            Ngày {item?.name}
+          </RText>
+        </View>
+        <FlatList
+          data={item?.items}
+          keyExtractor={(i, d) => d?.toString()}
+          renderItem={({ item, index }) => (
+            <RenderListLoan
+              item={item}
+              index={index}
+              currentStatus={currentStatus}
+              typeName={typeName}
+            />
+          )}
+        />
+      </View>
+    );
+  };
+
+  const _renderItems = ({ item, index }: any) => {
+    return (
+      <ListLoanClosed item={item} index={index} currentStatus={currentStatus} />
+    );
+  };
+
+  return (
+    <Container isStatusBar>
+      <AppHeader
+        title="Số tiền đang cho vay"
+        backColor={Colors.WHITE}
+        iconColor={Colors.BLACK}
+        titleStyle={{ color: Colors.BLACK }}
+        // renderRight={() => rightItem()}
+      />
+      <View
+        style={{
+          backgroundColor: '#BDBDBD',
+          height: 1,
+          marginHorizontal: 16,
+        }}
+      />
+
+      <View
+        style={{
+          paddingLeft: 16,
+        }}
+      >
+        <FlatList
+          data={TopSlice}
+          horizontal
+          ref={scrollRef}
+          style={{ paddingTop: actuatedNormalize(16) }}
+          showsHorizontalScrollIndicator={false}
+          keyExtractor={(item) => item?.id?.toString()}
+          renderItem={({ item, index }) => {
+            let checked = false;
+            if (currentIndex === index) {
+              checked = true;
+            }
+            return (
+              <TouchableOpacity
+                onPress={() => {
+                  setCurrentIndex(index);
+                  if (index === 1) {
+                    getStatsClosedLoan();
+                  } else {
+                    getListLoans();
+                  }
+                }}
+                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',
+                  }}
+                >
+                  {item.title}
+                </RText>
+              </TouchableOpacity>
+            );
+          }}
+        />
+      </View>
+      {currentIndex === 0 && (
+        <FlexRow>
+          <FlexRow
+            style={{
+              marginBottom: actuatedNormalize(8),
+              marginLeft: actuatedNormalize(16),
+              marginTop: actuatedNormalize(12),
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setOpenCalendar(true)}
+              style={{
+                backgroundColor: Colors.WHITE,
+                borderRadius: 100,
+                paddingVertical: actuatedNormalize(8),
+                paddingHorizontal: actuatedNormalize(12),
+                flexDirection: 'row',
+                alignItems: 'center',
+                height: actuatedNormalize(36),
+                ...Shadow,
+              }}
+            >
+              <IoIconApp name="calendar-outline" size={16} />
+              <RText
+                textStyle={{
+                  paddingLeft: actuatedNormalize(8),
+                  fontSize: actuatedNormalize(14),
+                  color: Colors.GRAY_3,
+                }}
+              >
+                Từ {params.fromDate} - {params.toDate}
+              </RText>
+            </TouchableOpacity>
+          </FlexRow>
+          <TouchableOpacity
+            ref={touchRef}
+            onPress={() => setOpenChooseStatus(true)}
+            style={{
+              backgroundColor: Colors.WHITE,
+              borderRadius: 100,
+              paddingVertical: actuatedNormalize(8),
+              paddingHorizontal: actuatedNormalize(12),
+              flexDirection: 'row',
+              alignItems: 'center',
+              height: actuatedNormalize(36),
+              marginLeft: actuatedNormalize(8),
+              ...Shadow,
+            }}
+          >
+            <IoIconApp name="reader-outline" size={16} color={Colors.GRAY} />
+            <RText
+              textStyle={{
+                marginLeft: actuatedNormalize(8),
+                color: Colors.GRAY,
+              }}
+            >
+              {statusLoan || 'Trạng thái'}
+            </RText>
+          </TouchableOpacity>
+        </FlexRow>
+      )}
+
+      <View>
+        <FlexRow
+          style={{
+            padding: 12,
+            marginVertical: 8,
+            borderWidth: 1,
+            borderRadius: 8,
+            borderColor: 'rgba(255, 142, 79, 1) rgba(239, 89, 46, 1)',
+            marginHorizontal: actuatedNormalize(16),
+          }}
+        >
+          <View
+            style={{
+              flex: 1,
+            }}
+          >
+            <RText
+              style={{
+                fontSize: 10,
+                color: '#777777',
+                textAlign: 'center',
+              }}
+            >
+              {currentIndex === 0 ? 'Tổng số tiền' : 'Tổng tiền cho vay'}
+            </RText>
+            <RText
+              style={{
+                fontSize: 12,
+                color: '#EE4223',
+                paddingTop: 4,
+                fontWeight: 'bold',
+                textAlign: 'center',
+              }}
+            >{`${formatNumber(dataMoneyLoan?.sumTotalMoney)}đ`}</RText>
+          </View>
+          <View
+            style={{ width: 1, height: '100%', backgroundColor: '#E6E6E6' }}
+          />
+          <View
+            style={{
+              flex: 1,
+            }}
+          >
+            <RText
+              style={{ fontSize: 10, color: '#777777', textAlign: 'center' }}
+            >
+              {'Số lượng đơn'}
+            </RText>
+            <RText
+              style={{
+                fontSize: 12,
+                color: '#EE4223',
+                paddingTop: 4,
+                fontWeight: 'bold',
+                textAlign: 'center',
+              }}
+            >{`${formatNumber(dataMoneyLoan?.totalLoan)}`}</RText>
+          </View>
+          <View
+            style={{ width: 1, height: '100%', backgroundColor: '#E6E6E6' }}
+          />
+
+          <View
+            style={{
+              flex: 1,
+            }}
+          >
+            <RText
+              style={{
+                fontSize: 10,
+                color: '#777777',
+                textAlign: 'center',
+              }}
+            >
+              {currentIndex === 0 ? 'Lãi dự kiến' : 'Tổng lãi đã nhận'}
+            </RText>
+            <RText
+              style={{
+                fontSize: 12,
+                color: '#EE4223',
+                paddingTop: 4,
+                fontWeight: 'bold',
+                textAlign: 'center',
+              }}
+            >{`${formatNumber(
+              currentIndex === 0
+                ? dataMoneyLoan?.sumMoneyInterestExpected * 0.98
+                : dataMoneyLoan?.sumTotalInterestMoney * 0.98
+            )}đ`}</RText>
+          </View>
+        </FlexRow>
+        <LinearGradient
+          colors={['#FF8E4F', '#EF592E']}
+          style={{ paddingVertical: 8 }}
+        >
+          <FlexRow style={{ paddingHorizontal: actuatedNormalize(16) }}>
+            <View style={{ width: 30 }}>
+              <RText
+                style={{ fontSize: 10, color: 'white', fontWeight: 'bold' }}
+              >
+                STT
+              </RText>
+            </View>
+            <View style={{ flex: 1, justifyContent: 'center' }}>
+              <RText
+                style={{
+                  fontSize: 10,
+                  color: 'white',
+                  fontWeight: 'bold',
+                }}
+              >
+                Khách hàng
+              </RText>
+            </View>
+            <View style={{ flex: 1, justifyContent: 'center' }}>
+              <RText
+                style={{
+                  fontSize: 10,
+                  color: 'white',
+                  fontWeight: 'bold',
+                  textAlign: 'center',
+                }}
+              >
+                Số tiền cho vay
+              </RText>
+            </View>
+            <View style={{ flex: 1, justifyContent: 'center' }}>
+              <RText
+                style={{
+                  fontSize: 10,
+                  color: 'white',
+                  fontWeight: 'bold',
+                  textAlign: 'center',
+                }}
+              >
+                Số tiền lãi
+              </RText>
+            </View>
+            <View style={{ flex: 1, alignItems: 'flex-end' }}>
+              <RText
+                style={{
+                  fontSize: 10,
+                  color: 'white',
+                  fontWeight: 'bold',
+                }}
+              >
+                {'Trạng thái'}
+              </RText>
+            </View>
+          </FlexRow>
+        </LinearGradient>
+
+        <FlatList
+          style={{ height: '64.5%' }}
+          data={dataLoan}
+          showsVerticalScrollIndicator={false}
+          keyExtractor={(item, index) => index.toString()}
+          onEndReachedThreshold={0.8}
+          renderItem={currentIndex === 0 ? _renderListLoan : _renderItems}
+          onEndReached={() => {
+            setParams((prev) => ({ ...prev, pageSize: params.pageSize + 10 }));
+          }}
+          ListEmptyComponent={<EmptyView text="" />}
+        />
+      </View>
+      <ModalFilter
+        isVisible={openFilter}
+        onCheck={(val: number) => setCurrentStatus(val)}
+        onBackdropPress={() => setOpenFilter(false)}
+      />
+
+      <ModalCalendarPicker
+        isVisible={openCalendar}
+        onBackdropPress={() => setOpenCalendar(false)}
+        selectedStartDate={(val: string) =>
+          setParams((prev) => ({ ...prev, fromDate: val }))
+        }
+        selectedEndDate={(val: string) =>
+          setParams((prev) => ({
+            ...prev,
+            toDate: val,
+          }))
+        }
+      />
+
+      <PopoverChooseStatus
+        typeName={typeName}
+        isVisible={openChooseStatus}
+        from={touchRef}
+        onRequestClose={() => setOpenChooseStatus(false)}
+        onPress={(val) => {
+          setStatusLoan(val?.text);
+          setParams((prev) => ({ ...prev, status: val?.id }));
+        }}
+      />
+      {isLoading && <Loading />}
+    </Container>
+  );
+};

package/src/screens/ListLoan/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;