@tima2025/react-native-timalender 1.0.0

package/src/screens/ReceivedLoan/index.tsx

@@ -0,0 +1,399 @@
+//@ts-nocheck
+/* 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 { 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 {
+  getDebtDeposited,
+  getDebtTransfered,
+  getInsurancePaid,
+  getLenderPaid,
+  getWithdrawedTransaction,
+} from '../../components/Features/Loans/loanSlice';
+import { selectLoading } from '../../components/Redux/selector';
+import { useAppDispatch } from '../../components/Redux/store';
+import { TabReceivedLoan } from '../../constant/Array';
+import ModalFilterTime from '../PendingLoan/Components/ModalFilterTime';
+import Tab1 from './Components/Tab1';
+import Tab2 from './Components/Tab2';
+import Tab3 from './Components/Tab3';
+import Tab4 from './Components/Tab4';
+import Tab5 from './Components/Tab5';
+import styles from './styles';
+
+const ReceivedLoan = ({ route, navigation }: any) => {
+  const scrollRef = useRef<any>(null);
+  const typeLender = route?.params?.typeLender;
+  const getLast90Days = moment().subtract('89', 'days').format('DD/MM/YYYY');
+  const currentDay = moment(new Date()).format('DD/MM/YYYY');
+  const isLoading = useSelector(selectLoading);
+  const dispatch = useAppDispatch();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [fromDate, setFromDate] = useState('');
+  const [toDate, setToDate] = useState('');
+  const [fromDatePicker, setFromDatePicker] = useState(getLast90Days);
+  const [toDatePicker, setToDatePicker] = useState(currentDay);
+  const [data, setData] = useState<any>(null);
+  const [openFilterTime, setOpenFilterTime] = useState(false);
+  const [tab, setTab] = useState(TabReceivedLoan);
+  const [openCalendar, setOpenCalendar] = useState(false);
+
+  useEffect(() => {
+    if (typeLender === 'NA') {
+      const filterByTab = tab.filter((i) => i.id !== 1);
+      setTab(filterByTab);
+    } else if (typeLender === 'DT') {
+      const filterByTab = tab.filter((i) => i.id !== 0);
+      setTab(filterByTab);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeLender === 'NA') {
+      if (currentIndex === 1) {
+        getDataTab3();
+      } else if (currentIndex === 2) {
+        getDataTab4();
+      } else if (currentIndex === 3) {
+        getDataTab5();
+      }
+    } else if (typeLender === 'DT') {
+      if (currentIndex === 0) {
+        getDataTab2();
+      } else if (currentIndex === 1) {
+        getDataTab3();
+      } else if (currentIndex === 2) {
+        getDataTab4();
+      } else if (currentIndex === 3) {
+        getDataTab5();
+      }
+    }
+  }, [fromDatePicker, toDatePicker, currentIndex]);
+
+  useEffect(() => {
+    if (currentIndex === 0 && typeLender === 'NA') {
+      getDataTab1();
+    }
+  }, [fromDate, toDate, currentIndex]);
+
+  useEffect(() => {
+    scrollRef?.current?.scrollToIndex({
+      index: currentIndex,
+      animated: true,
+      viewPosition: 0.5,
+      viewOffset: 20,
+    });
+  }, [currentIndex]);
+
+  const getDataTab1 = async () => {
+    const resp: any = await dispatch(
+      getLenderPaid({
+        fromDate,
+        toDate,
+      })
+    );
+    console.log('resp data tab1::---', resp);
+    if (resp.payload.meta.errCode === 200) {
+      setData(resp.payload.data);
+    } else {
+      setData([]);
+    }
+  };
+
+  const getDataTab2 = async () => {
+    const resp: any = await dispatch(
+      getWithdrawedTransaction({
+        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([]);
+    } else {
+      setData([]);
+    }
+    console.log('resp data tab2::---', resp);
+  };
+
+  const getDataTab3 = async () => {
+    const resp: any = await dispatch(
+      getDebtTransfered({
+        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([]);
+    } else {
+      setData([]);
+    }
+    console.log('resp data: tab3:---', resp);
+  };
+
+  const getDataTab4 = async () => {
+    const resp: any = await dispatch(
+      getInsurancePaid({
+        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([]);
+    } else {
+      setData([]);
+    }
+    console.log('resp data: tab4:---', resp);
+  };
+
+  const getDataTab5 = async () => {
+    const resp: any = await dispatch(
+      getDebtDeposited({
+        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([]);
+    } else {
+      setData([]);
+    }
+    console.log('resp data: tab3:---', resp);
+  };
+
+  return (
+    <Container>
+      <AppHeader
+        title={'Số tiền đã thanh toán'}
+        backColor={Colors.WHITE}
+        iconColor={Colors.BLACK}
+        titleStyle={{ color: Colors.BLACK }}
+        // renderRight={() => <ButtonIcon iconName="information-circle-outline" />}
+      />
+      <ScrollView style={{ paddingTop: actuatedNormalize(16) }}>
+        <View>
+          <FlatList
+            data={tab}
+            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',
+                    }}
+                  >
+                    {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),
+                  ...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>
+        {typeLender === 'NA' ? (
+          <>
+            {currentIndex === 0 ? (
+              <Tab1 data={data} />
+            ) : currentIndex === 1 ? (
+              <Tab3 data={data} />
+            ) : currentIndex === 2 ? (
+              <Tab4 data={data} />
+            ) : currentIndex === 3 ? (
+              <Tab5 data={data} />
+            ) : (
+              <Tab5 data={data} />
+            )}
+          </>
+        ) : (
+          <>
+            {currentIndex === 0 ? (
+              <Tab2 data={data} />
+            ) : currentIndex === 1 ? (
+              <Tab3 data={data} />
+            ) : currentIndex === 2 ? (
+              <Tab4 data={data} />
+            ) : currentIndex === 3 ? (
+              <Tab5 data={data} />
+            ) : (
+              <Tab5 data={data} />
+            )}
+          </>
+        )}
+      </ScrollView>
+
+      <ModalFilterTime
+        isVisible={openFilterTime}
+        fromDate={(val: string) => setFromDate(val)}
+        toDate={(val: string) => setToDate(val)}
+        onBackdropPress={() => setOpenFilterTime(false)}
+        typeLender={typeLender}
+        tabIndex={currentIndex}
+        status={1}
+        screen="receivedLoan"
+      />
+
+      <ModalCalendarPicker
+        isVisible={openCalendar}
+        onBackdropPress={() => setOpenCalendar(false)}
+        selectedStartDate={(val: string) => setFromDatePicker(val)}
+        selectedEndDate={(val: string) => setToDatePicker(val)}
+      />
+      {isLoading && <Loading />}
+    </Container>
+  );
+};
+
+export default ReceivedLoan;

package/src/screens/ReceivedLoan/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/SellDebt/Components/DragButton.tsx

@@ -0,0 +1,120 @@
+//@ts-nocheck
+import React, { useRef } from 'react';
+import {
+  Animated,
+  StyleSheet,
+  TouchableOpacity,
+  useWindowDimensions,
+} from 'react-native';
+import {
+  GestureEvent,
+  HandlerStateChangeEvent,
+  PanGestureHandler,
+  PanGestureHandlerEventPayload,
+  State,
+} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import InvestNewImages from '../../../assets/images/InvestNew';
+import Colors from '../../../common/Colors';
+import LazyImage from '../../../common/LazyImage';
+import { actuatedNormalize } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+
+const Test = ({ onPress }: { onPress: () => void }) => {
+  const { width, height } = useWindowDimensions();
+  const translateX = useRef(
+    new Animated.Value(width - actuatedNormalize(160) - actuatedNormalize(32))
+  ).current;
+
+  const translateY = useRef(
+    new Animated.Value(height - actuatedNormalize(36) - actuatedNormalize(80))
+  ).current;
+
+  const onGestureEvent = (
+    event: GestureEvent<PanGestureHandlerEventPayload>
+  ) => {
+    translateX.setValue(event.nativeEvent.absoluteX - actuatedNormalize(80));
+    translateY.setValue(event.nativeEvent.absoluteY - actuatedNormalize(18));
+  };
+
+  const onHandlerStateChange = (
+    event: HandlerStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => {
+    if (event.nativeEvent.state === State.END) {
+      Animated.spring(translateX, {
+        toValue: event.nativeEvent.absoluteX - actuatedNormalize(80),
+        useNativeDriver: false,
+      }).start();
+
+      Animated.spring(translateY, {
+        toValue: event.nativeEvent.absoluteY - actuatedNormalize(18),
+        useNativeDriver: false,
+      }).start();
+    }
+  };
+
+  const handle = () => {
+    onPress();
+  };
+
+  return (
+    <PanGestureHandler
+      onGestureEvent={onGestureEvent}
+      onHandlerStateChange={onHandlerStateChange}
+    >
+      <Animated.View
+        style={[
+          draggableStyles.draggableContainer,
+          { transform: [{ translateX }, { translateY }] },
+        ]}
+      >
+        <TouchableOpacity
+          activeOpacity={0.8}
+          style={draggableStyles.button}
+          onPress={handle}
+        >
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={draggableStyles.gradient}
+          >
+            <LazyImage
+              source={InvestNewImages.ic_store}
+              style={draggableStyles.image}
+            />
+            <RText textStyle={{ color: Colors.WHITE, fontWeight: '600' }}>
+              Thêm đơn để bán
+            </RText>
+          </LinearGradient>
+        </TouchableOpacity>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+};
+
+const draggableStyles = StyleSheet.create({
+  draggableContainer: {
+    position: 'absolute',
+    // right: 16,
+    // bottom: 208,
+  },
+  button: {
+    width: 160,
+    height: 36,
+  },
+  gradient: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: 8,
+    flex: 1,
+  },
+  image: {
+    width: actuatedNormalize(18),
+    height: actuatedNormalize(18),
+    marginRight: actuatedNormalize(8),
+  },
+});
+
+export default Test;

package/src/screens/SellDebt/Components/ModalDelete.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable react-native/no-inline-styles */
+//@ts-nocheck
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Colors from '../../../common/Colors';
+import formatNumber from '../../../common/FormatNumber';
+import { actuatedNormalize } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import SpaceBetween from '../../../common/SpaceBetween';
+import CustomModal, {
+  ModalProps,
+} from '../../../components/CustomModal/CustomModal';
+
+const ModalDelete = (props: ModalProps) => {
+  const { isVisible, onPress, data, onBackdropPress } = props;
+
+  return (
+    <CustomModal
+      isVisible={isVisible}
+      containerStyle={{ margin: actuatedNormalize(16) }}
+      innerStyle={{
+        backgroundColor: Colors.WHITE,
+        borderRadius: 8,
+        padding: actuatedNormalize(16),
+        alignItems: 'center',
+      }}
+    >
+      <RText
+        textStyle={{
+          fontWeight: '600',
+          fontSize: actuatedNormalize(18),
+        }}
+      >
+        Xác nhận xoá
+      </RText>
+      <RText
+        textStyle={{
+          textAlign: 'center',
+          paddingTop: actuatedNormalize(4),
+          color: Colors.GRAY_3,
+          paddingHorizontal: actuatedNormalize(16),
+          lineHeight: 17,
+        }}
+      >
+        Bạn có chắc chắn muốn xoá đơn khỏi danh sách “Đơn đã đẩy bán” không?
+      </RText>
+      <View
+        style={{
+          borderWidth: 1,
+          borderColor: Colors.GRAY_4,
+          borderRadius: 8,
+          padding: actuatedNormalize(8),
+          width: '100%',
+          marginVertical: actuatedNormalize(16),
+        }}
+      >
+        <SpaceBetween
+          style={{
+            borderBottomWidth: 0.5,
+            borderColor: Colors.GRAY_4,
+            paddingVertical: actuatedNormalize(16),
+            marginBottom: actuatedNormalize(16),
+          }}
+        >
+          <RText textStyle={{ color: Colors.GRAY_3 }}>Tên khách hàng</RText>
+          <RText textStyle={{ fontWeight: '600' }}>{data?.customerName}</RText>
+        </SpaceBetween>
+        <SpaceBetween
+          style={{
+            borderBottomWidth: 0.5,
+            borderColor: Colors.GRAY_4,
+            paddingBottom: actuatedNormalize(16),
+            marginBottom: actuatedNormalize(16),
+          }}
+        >
+          <RText textStyle={{ color: Colors.GRAY_3 }}>Mã đơn</RText>
+          <RText textStyle={{ fontWeight: '600' }}>{data?.contactCode}</RText>
+        </SpaceBetween>
+        <SpaceBetween
+          style={{
+            paddingBottom: actuatedNormalize(8),
+          }}
+        >
+          <RText textStyle={{ color: Colors.GRAY_3 }}>Giá chuyển nhượng</RText>
+          <RText textStyle={{ fontWeight: '600' }}>
+            {formatNumber(data?.totalMoney)}
+          </RText>
+        </SpaceBetween>
+      </View>
+      <TouchableOpacity
+        onPress={() => onPress(data?.managerDebtTradingID)}
+        style={{
+          width: '100%',
+          height: actuatedNormalize(40),
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderWidth: 1,
+          borderColor: Colors.ORANGE,
+          borderRadius: 8,
+          marginBottom: actuatedNormalize(8),
+          backgroundColor: '#FFF3E8',
+          marginTop: actuatedNormalize(8),
+        }}
+      >
+        <RText
+          textStyle={{ color: Colors.ORANGE, fontSize: actuatedNormalize(16) }}
+        >
+          Xác nhận
+        </RText>
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={onBackdropPress}
+        style={{
+          width: '100%',
+          height: actuatedNormalize(40),
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <RText
+          textStyle={{
+            color: Colors.GRAY_3,
+            fontSize: actuatedNormalize(16),
+          }}
+        >
+          Huỷ
+        </RText>
+      </TouchableOpacity>
+    </CustomModal>
+  );
+};
+
+export default ModalDelete;