@tima2025/react-native-timalender 1.0.0

package/src/screens/DashBoardDetail/index.tsx

@@ -0,0 +1,601 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { Image, ScrollView, TouchableOpacity, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import { showMessage } from 'react-native-flash-message';
+import LinearGradient from 'react-native-linear-gradient';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useDispatch, useSelector } from 'react-redux';
+import HomeImages from '../../assets/images/HomePage';
+import InvestImages from '../../assets/images/Invest';
+import imageOptions from '../../assets/images/Optional';
+import AppHeader from '../../common/AppHeader';
+import ButtonIcon from '../../common/ButtonIcon';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import { Typography } from '../../common/FontStyles';
+import Loading from '../../common/Loading';
+import {
+  actuatedNormalize,
+  formatMoneyText,
+  numberWithCommas,
+} from '../../common/Metrics';
+import RText from '../../common/RText';
+import SpaceBetween from '../../common/SpaceBetween';
+import {
+  getTransferBanks,
+  getTransferContent,
+} from '../../components/Features/Lender/lenderSlice';
+import { getContractInforGold } from '../../components/Features/Loans/loanSlice';
+import Screens from '../../components/Navigation/Screens';
+import { selectLoading, userInfor } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+import ConfirmAddInvestment from '../AdditionalInvestmentCapital/Components/ConfirmAddInvestment';
+import ConfirmRecharge from '../AdditionalInvestmentCapital/Components/ConfirmRecharge';
+import Success from '../AdditionalInvestmentCapital/Components/Success';
+import AddInvestment from './Components/AddInvestment';
+import styles from './styles';
+
+const moneyItems = [
+  {
+    id: 0,
+    title: 'Số tiền chờ nhận',
+    icon: HomeImages.ic_dashboard_3,
+  },
+  {
+    id: 1,
+    title: 'Số tiền đã thanh toán',
+    icon: HomeImages.ic_dashboard_1,
+  },
+];
+
+export const DashBoardDetail = ({ navigation, route }: any) => {
+  const item = route?.params?.item;
+  const na = 'NA';
+  const dt = 'DT';
+  const userDataInfor = useSelector(userInfor);
+  const isLoading = useSelector(selectLoading);
+  const dispatch = useDispatch<AppDispatch>();
+  const [dataDashboard, setDataDashboard] = useState<any>(null);
+  const [openAddInvestment, setOpenAddInvestment] = useState(false);
+  const [openConfirmInvestment, setOpenConfirmInvestment] = useState(false);
+  const [openRecharge, setOpenRecharge] = useState(false);
+  const [openSuccess, setOpenSuccess] = useState(false);
+  const [listBank, setListBank] = useState<any>([]);
+  const [money, setMoney] = useState('');
+  const [chooseBank, setChooseBank] = useState<any>();
+  const [dataConfirm, setDataConfirm] = useState();
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      getDataDashboard();
+    });
+    return unsubscribe;
+  }, [navigation]);
+
+  const getDataDashboard = async () => {
+    const resp: any = await dispatch(getContractInforGold());
+    if (__DEV__) {
+      console.log('resp dashboard---', resp);
+    }
+    if (resp.payload.meta.errCode === 200) {
+      const data = resp?.payload?.data;
+      setDataDashboard(data);
+    } else {
+      // WToastShowError(resp.payload.meta.errMessage);
+      showMessage({
+        message: 'Thông báo',
+        description: resp.payload.meta.errMessage,
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    }
+  };
+
+  const getBankTransfer = async () => {
+    const resp: any = await dispatch(getTransferBanks());
+    console.log('resp', resp);
+    if (resp?.payload?.meta?.errCode === 200) {
+      const _data = resp?.payload?.data || [];
+      setListBank(_data);
+    }
+  };
+  console.log('itenmM: ', item);
+
+  const handleNavigate = (id: string | number) => {
+    switch (id) {
+      case 0:
+        navigation.navigate(Screens.PendingLoan, {
+          typeLender: item?.lenderName?.includes(na) ? na : dt,
+        });
+        break;
+      case 1:
+        navigation.navigate(Screens.ReceivedLoan, {
+          typeLender: item?.lenderName?.includes(na) ? na : dt,
+        });
+        break;
+      case 2:
+        navigation.navigate(Screens.PendingMoney);
+        break;
+      case 3:
+        navigation.navigate(Screens.InterestFine);
+        break;
+      case 4:
+        navigation.navigate(Screens.LockingLoan);
+        break;
+      case 5:
+        navigation.navigate(Screens.CashBook);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const mapMoney: any = {
+    0: numberWithCommas(dataDashboard?.totalMoneyPending),
+    1: numberWithCommas(dataDashboard?.totalMoneyPaid),
+  };
+
+  const mapIconType: any = {
+    Gold: InvestImages.gold,
+    UQDT: InvestImages.money,
+    Titan: InvestImages.titan,
+    Diamonds: InvestImages.diamond,
+    Ruby: InvestImages.ruby,
+    RubyPlus: InvestImages.ruby,
+    GoldPlus: InvestImages.gold,
+  };
+
+  const onRecharge = async () => {
+    const params = {
+      bankId: chooseBank?.bin || listBank[0]?.bin,
+      bankAccount: chooseBank?.account || listBank[0]?.account,
+      money: money.split(',').join(''),
+      lenderId: item?.lenderID,
+    };
+    const resp: any = await dispatch(getTransferContent(params));
+    console.log('resp', resp);
+    if (resp?.payload?.meta?.errCode === 200) {
+      setDataConfirm(resp?.payload?.data);
+      setOpenConfirmInvestment(false);
+      setTimeout(() => {
+        setOpenRecharge(true);
+      }, 800);
+    } else {
+      // WToastShowError(resp?.payload?.meta?.errMessage, WToast.position.TOP);
+      showMessage({
+        message: 'Thông báo',
+        description: resp?.payload?.meta?.errMessage,
+        type: 'danger',
+        icon: 'warning',
+        position: 'top',
+        backgroundColor: Colors.DANGER,
+      });
+    }
+  };
+
+  return (
+    <Container>
+      <AppHeader
+        title={item?.lenderName + ' - ' + `${item?.lenderTypeName} Invest`}
+        backColor={Colors.WHITE}
+        iconColor={Colors.BLACK}
+        titleStyle={{ color: Colors.BLACK }}
+        renderRight={() => <ButtonIcon iconName="information-circle-outline" />}
+      />
+      <View style={{ alignItems: 'center' }}>
+        <View>
+          <Image
+            source={
+              userDataInfor.gender == 1
+                ? HomeImages.avatar_boy
+                : HomeImages.avatar_girl
+            }
+            style={[
+              styles.avatar,
+              {
+                borderRadius: 50,
+                borderWidth: 2,
+                borderColor: '#EF592E',
+              },
+            ]}
+          />
+          <View
+            style={{
+              borderRadius: 50,
+              width: 34,
+              height: 34,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: Colors.WHITE,
+              position: 'absolute',
+              bottom: -4,
+              right: -12,
+            }}
+          >
+            <Image
+              source={mapIconType[item?.lenderTypeName]}
+              style={{
+                width: 32,
+                height: 32,
+                resizeMode: 'contain',
+                marginRight: actuatedNormalize(8),
+              }}
+            />
+          </View>
+        </View>
+      </View>
+      <View style={{ alignItems: 'center' }}>
+        <RText textStyle={{ ...Typography.h1, paddingVertical: 8 }}>
+          {userDataInfor?.fullName}
+        </RText>
+        <RText style={{ color: '#828282' }}>
+          {moment(new Date()).format('DD/MM/YYYY HH:mm')}
+        </RText>
+      </View>
+      <View
+        style={{
+          margin: actuatedNormalize(16),
+          borderRadius: 8,
+          borderWidth: 1,
+          borderColor: '#EF592E',
+        }}
+      >
+        <LinearGradient
+          colors={['#FF8E4F', '#EF592E']}
+          start={{ x: 1, y: 0 }}
+          end={{ x: 0, y: 0 }}
+          style={{
+            borderTopLeftRadius: 8,
+            borderTopRightRadius: 8,
+            paddingVertical: actuatedNormalize(12),
+            paddingHorizontal: actuatedNormalize(16),
+          }}
+        >
+          <View>
+            <RText
+              style={{
+                color: 'white',
+                fontSize: actuatedNormalize(12),
+              }}
+            >
+              Tổng số tiền đầu tư
+            </RText>
+            <RText
+              style={{
+                color: 'white',
+                fontWeight: 'bold',
+                fontSize: actuatedNormalize(16),
+                marginTop: 8,
+              }}
+            >
+              {numberWithCommas(dataDashboard?.totalInvestment)} đ
+            </RText>
+          </View>
+        </LinearGradient>
+        <SpaceBetween
+          style={{
+            paddingHorizontal: actuatedNormalize(16),
+          }}
+        >
+          <TouchableOpacity
+            onPress={() =>
+              navigation.navigate(Screens.ListLoan, {
+                typeLender: item?.lenderName?.includes(na) ? na : dt,
+                typeName: item?.lenderTypeName,
+              })
+            }
+            style={{
+              width: item?.lenderName?.includes(na) ? '100%' : '50%',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              paddingRight: item?.lenderName?.includes(na)
+                ? actuatedNormalize(0)
+                : actuatedNormalize(16),
+              paddingVertical: actuatedNormalize(8),
+            }}
+          >
+            <View>
+              <RText
+                style={{
+                  fontSize: actuatedNormalize(12),
+                  color: '#828282',
+                }}
+              >
+                Đang cho vay
+              </RText>
+              <RText
+                style={{
+                  fontWeight: 'bold',
+                  fontSize: actuatedNormalize(16),
+                  marginTop: 8,
+                  color: Colors.ORANGE_H,
+                }}
+              >
+                {numberWithCommas(dataDashboard?.totalMoney)} đ
+              </RText>
+            </View>
+            <FontAwesome
+              name="angle-double-right"
+              color={Colors.ORANGE_H}
+              size={actuatedNormalize(18)}
+            />
+          </TouchableOpacity>
+
+          {item?.lenderName?.includes(dt) && (
+            <>
+              <View
+                style={{
+                  width: 1,
+                  height: '100%',
+                  backgroundColor: Colors.ORANGE_H,
+                }}
+              />
+              <TouchableOpacity
+                onPress={() =>
+                  navigation.navigate(Screens.AvailableAmount, {
+                    item: item,
+                    totalMoneyAvailable: dataDashboard?.totalMoneyAvailable,
+                  })
+                }
+                style={{
+                  width: '50%',
+                  paddingLeft: actuatedNormalize(16),
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <View style={{ paddingRight: actuatedNormalize(16) }}>
+                  <RText
+                    style={{
+                      fontSize: actuatedNormalize(12),
+                      color: '#828282',
+                    }}
+                  >
+                    Khả dụng
+                  </RText>
+                  <RText
+                    style={{
+                      fontWeight: 'bold',
+                      fontSize: actuatedNormalize(16),
+                      marginTop: 8,
+                      color: Colors.ORANGE_H,
+                    }}
+                  >
+                    {numberWithCommas(dataDashboard?.totalMoneyAvailable)} đ
+                  </RText>
+                </View>
+                <FontAwesome
+                  name="angle-double-right"
+                  color={Colors.ORANGE_H}
+                  size={actuatedNormalize(18)}
+                />
+              </TouchableOpacity>
+            </>
+          )}
+
+          {/* lenderCode?.includes(dt) */}
+        </SpaceBetween>
+      </View>
+      <ScrollView
+        style={{
+          paddingHorizontal: actuatedNormalize(16),
+        }}
+      >
+        <View
+          style={{
+            backgroundColor: 'white',
+            borderRadius: 8,
+            shadowColor: '#000',
+            shadowOffset: {
+              width: 0,
+              height: 1,
+            },
+            shadowOpacity: 0.23,
+            shadowRadius: 1.5,
+            elevation: 2,
+            padding: actuatedNormalize(16),
+          }}
+        >
+          {moneyItems.map((item, _index) => {
+            return (
+              <View
+                key={item.id}
+                style={{
+                  borderColor: '#BDBDBD',
+                  borderBottomWidth: item.id === 0 ? 1 : 0,
+                  paddingBottom: item.id === 0 ? actuatedNormalize(16) : 0,
+                  marginTop: item.id !== 0 ? actuatedNormalize(16) : 0,
+                }}
+              >
+                <TouchableOpacity
+                  onPress={() => {
+                    if (item.id === 5) {
+                      return;
+                    } else {
+                      handleNavigate(item.id);
+                    }
+                  }}
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                  }}
+                  key={item.id}
+                >
+                  <FlexRow>
+                    <Image source={item.icon} style={styles.imageItems} />
+                    <View style={{ paddingLeft: 12 }}>
+                      <RText textStyle={{ color: '#999999', paddingBottom: 4 }}>
+                        {item?.title}
+                      </RText>
+                      <RText
+                        textStyle={{ fontWeight: '700' }}
+                        numberOfLines={1}
+                      >
+                        {mapMoney[item.id]} VNĐ
+                      </RText>
+                    </View>
+                  </FlexRow>
+                  <Icon
+                    name="chevron-forward-outline"
+                    size={24}
+                    color="#999999"
+                  />
+                </TouchableOpacity>
+              </View>
+            );
+          })}
+        </View>
+        <TouchableOpacity
+          onPress={() => navigation.navigate(Screens.Statistical)}
+        >
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              alignItems: 'center',
+              marginVertical: actuatedNormalize(16),
+              paddingVertical: 10,
+              borderRadius: 30,
+            }}
+          >
+            <RText
+              style={{
+                fontSize: 16,
+                color: 'white',
+              }}
+            >
+              Thống kê
+            </RText>
+          </LinearGradient>
+        </TouchableOpacity>
+      </ScrollView>
+      {item?.lenderName?.includes(dt) && (
+        <FlexRow
+          style={{
+            borderWidth: 1,
+            borderRadius: 32,
+            borderColor: Colors.ORANGE,
+            paddingHorizontal: actuatedNormalize(6),
+            width: '60%',
+            alignSelf: 'center',
+            marginBottom: actuatedNormalize(48),
+            justifyContent: 'space-between',
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => {
+              getBankTransfer();
+              setOpenAddInvestment(true);
+            }}
+            style={{
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}
+          >
+            <FastImage
+              source={imageOptions.them_von_dash_board}
+              style={{
+                width: actuatedNormalize(36),
+                height: actuatedNormalize(36),
+              }}
+            />
+            <RText
+              textStyle={{
+                color: Colors.ORANGE,
+                paddingLeft: actuatedNormalize(8),
+              }}
+            >
+              Thêm vốn
+            </RText>
+          </TouchableOpacity>
+          <View
+            style={{
+              height: '70%',
+              width: 1,
+              backgroundColor: Colors.ORANGE,
+            }}
+          />
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate(Screens.WithDraw);
+            }}
+            style={{
+              alignItems: 'center',
+              flexDirection: 'row',
+            }}
+          >
+            <RText
+              textStyle={{
+                color: Colors.ORANGE,
+              }}
+            >
+              Rút tiền
+            </RText>
+            <FastImage
+              source={imageOptions.with_draw_dash_board}
+              style={{
+                width: actuatedNormalize(42),
+                height: actuatedNormalize(42),
+                marginLeft: actuatedNormalize(8),
+              }}
+            />
+          </TouchableOpacity>
+        </FlexRow>
+      )}
+      <AddInvestment
+        isVisible={openAddInvestment}
+        onBackdropPress={() => setOpenAddInvestment(false)}
+        lenderName={item?.lenderName}
+        listBank={listBank}
+        value={money}
+        chooseBank={(val: React.SetStateAction<undefined>) =>
+          setChooseBank(val)
+        }
+        onChangeText={(val: string) => setMoney(formatMoneyText(val))}
+        onPress={() => {
+          setOpenAddInvestment(false);
+          setTimeout(() => {
+            setOpenConfirmInvestment(true);
+          }, 800);
+        }}
+      />
+
+      <ConfirmAddInvestment
+        isVisible={openConfirmInvestment}
+        money={money}
+        lenderCode={item?.lenderName}
+        bank={chooseBank || listBank[0]}
+        onBackdropPress={() => setOpenConfirmInvestment(false)}
+        onPress={() => onRecharge()}
+        isLoading={isLoading}
+      />
+
+      <ConfirmRecharge
+        isVisible={openRecharge}
+        onBackdropPress={() => setOpenRecharge(false)}
+        data={dataConfirm}
+        bank={chooseBank || listBank[0]}
+        onPress={() => {
+          setOpenRecharge(false);
+          setTimeout(() => {
+            setOpenSuccess(true);
+          }, 800);
+        }}
+      />
+
+      <Success
+        isVisible={openSuccess}
+        onBackdropPress={() => setOpenSuccess(false)}
+      />
+      {isLoading && <Loading />}
+    </Container>
+  );
+};

package/src/screens/DashBoardDetail/styles.ts

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+import Colors from '../../common/Colors';
+import { actuatedNormalize, Shadow } from '../../common/Metrics';
+
+const styles = StyleSheet.create({
+  header: {
+    width: '100%',
+    height: actuatedNormalize(190),
+  },
+
+  profileHeader: {
+    borderRadius: 8,
+    backgroundColor: Colors.WHITE,
+    width: '90%',
+    height: 150,
+    marginTop: 120,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: actuatedNormalize(16),
+    ...Shadow,
+  },
+
+  avatar: {
+    width: actuatedNormalize(80),
+    height: actuatedNormalize(80),
+    borderRadius: 80,
+  },
+
+  txtTotalMoney: {
+    fontSize: actuatedNormalize(18),
+    color: '#EE4223',
+    fontWeight: '700',
+  },
+
+  btnItems: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: actuatedNormalize(16),
+    backgroundColor: Colors.WHITE,
+    marginBottom: actuatedNormalize(16),
+    borderRadius: 8,
+    ...Shadow,
+  },
+
+  imageItems: {
+    width: actuatedNormalize(32),
+    height: actuatedNormalize(32),
+    resizeMode: 'contain',
+  },
+});
+
+export default styles;