@tima2025/react-native-timalender 1.0.0

package/src/screens/Statistical/index.tsx

@@ -0,0 +1,851 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { FlatList, Image, ScrollView, View } from 'react-native';
+import DropDownPicker from 'react-native-dropdown-picker';
+import { showMessage } from 'react-native-flash-message';
+import { useDispatch, useSelector } from 'react-redux';
+import HomeImages from '../../assets/images/HomePage';
+import AppHeader from '../../common/AppHeader';
+import Colors from '../../common/Colors';
+import constant from '../../common/constants/index';
+import Container from '../../common/Container';
+import FlexRow from '../../common/FlexRow';
+import Loading from '../../common/Loading';
+import { numberWithCommas } from '../../common/Metrics';
+import RText from '../../common/RText';
+import { getReports } from '../../components/Features/Loans/loanSlice';
+import HighChart from '../../components/hightchart';
+import NotifyIcon from '../../components/IconNotification';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+
+export const Statistical = ({ navigation }: any) => {
+  const isLoading = useSelector(selectLoading);
+  const months: any[] | (() => any[]) = [];
+  let currentMonth = moment();
+  for (let i = 0; i < 24; i++) {
+    months.push({
+      label: 'Tháng ' + currentMonth.format('MM/YYYY'),
+      value: currentMonth.format('MM/YYYY'),
+    });
+    currentMonth = currentMonth.subtract(1, 'month');
+  }
+  const dispatch = useDispatch<AppDispatch>();
+  const [month, setMonth] = useState(months);
+  const [data, setData] = useState<any>([]);
+  const monthSelected = {
+    label: `Tháng ${moment().format('MM/YYYY')}`,
+    value: moment().format('MM/YYYY'),
+  };
+  const [selectMonth, setSelectMonth] = useState<any>(monthSelected);
+  const [open, setOpen] = useState(false);
+
+  // useEffect(() => {
+  //   getData(null);
+  // }, []);
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      getData(null);
+    });
+    return unsubscribe;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation]);
+
+  const getData = async (item: string | null) => {
+    const resp: any = await dispatch(
+      getReports(item ? item : monthSelected?.value)
+    );
+    console.log('res', resp);
+    if (resp.payload.meta.errCode === 200) {
+      const data = resp.payload.data || [];
+      setData(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,
+      });
+    }
+  };
+
+  function myChart() {
+    const salesChart = {
+      chart: {
+        type: 'spline',
+      },
+      title: {
+        text: '',
+      },
+      legend: {
+        enabled: false,
+      },
+      yAxis: {
+        title: {
+          text: 'vnd',
+        },
+        accessibility: {
+          description: '',
+        },
+      },
+      plotOptions: {
+        spline: {
+          marker: {
+            radius: 4,
+            lineColor: '#666666',
+            lineWidth: 1,
+          },
+        },
+      },
+      xAxis: {
+        categories: data
+          .reverse()
+          .map(
+            (item: { month: any; year: any }) =>
+              `Tháng ${item?.month}/${item?.year}`
+          ),
+      },
+
+      series: [
+        {
+          name: 'Lãi đã thu',
+          type: 'column',
+          color: '#38B000',
+          width: 20,
+          data: data
+            .reverse()
+            .map((item: { interestMoney: any }) => item?.interestMoney),
+        },
+        {
+          type: 'area',
+          name: 'Dư nợ cho vay',
+          data: data
+            .reverse()
+            .map((item: { beginMoneyLoan: any }) => item?.beginMoneyLoan),
+          color: '#F37721',
+          fillColor: {
+            linearGradient: {
+              x1: 0,
+              y1: 0,
+              x2: 0,
+              y2: 1,
+            },
+            stops: [
+              [0, '#EE42231F'],
+              [1, '#77211200'],
+            ],
+          },
+        },
+        {
+          type: 'area',
+          name: 'Số tiền giải ngân',
+          data: data
+            .reverse()
+            .map((item: { moneyDisbusement: any }) => item?.moneyDisbusement),
+          color: '#F3B421',
+          fillColor: {
+            linearGradient: {
+              x1: 0,
+              y1: 0,
+              x2: 0,
+              y2: 1,
+            },
+            stops: [
+              [0, '#F3B4211F'],
+              [1, '#F3B42100'],
+            ],
+          },
+        },
+      ],
+    };
+
+    return (
+      <View style={{ height: 350, marginTop: 16 }}>
+        <HighChart chartConfiguration={salesChart} />
+      </View>
+    );
+  }
+
+  const renderRight = () => {
+    return <NotifyIcon />;
+  };
+
+  function _renderItem(item: any, index: number) {
+    if (index === 0) {
+      return (
+        <View>
+          <RText
+            style={{
+              fontSize: 13,
+              fontWeight: 'bold',
+              marginTop: 13,
+              paddingLeft: 16,
+              marginBottom: 6,
+            }}
+          >
+            {'tháng hiện tại'.toUpperCase()}
+          </RText>
+          <View
+            style={{
+              marginHorizontal: 6,
+            }}
+          >
+            <View
+              style={{
+                borderRadius: 10,
+                shadowColor: '#0000001A',
+                shadowOffset: {
+                  width: 0,
+                  height: 2,
+                },
+                shadowRadius: 4,
+                shadowOpacity: 1,
+              }}
+            >
+              <View
+                style={{
+                  borderRadius: 10,
+                  backgroundColor: 'white',
+                }}
+              >
+                <View style={{}}>
+                  <View
+                    style={{
+                      padding: 10,
+                    }}
+                  >
+                    <FlexRow
+                      style={{ alignItems: 'flex-end', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          fontWeight: 'bold',
+                          color: '#3A3434',
+                        }}
+                      >{`Dư nợ tháng ${item?.month}/${item?.year}`}</RText>
+                      <View
+                        style={{
+                          borderBottomWidth: 1,
+                          borderColor: '#E6E6E6',
+                          height: 1,
+                          flex: 1,
+                          marginBottom: 4,
+                        }}
+                      />
+                    </FlexRow>
+                    <FlexRow
+                      style={{ alignItems: 'center', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          color: '#777777',
+                        }}
+                      >
+                        {'Số tiền đang cho vay đầu kỳ'}
+                      </RText>
+                      <RText
+                        style={{
+                          flex: 1,
+                          textAlign: 'right',
+                          paddingHorizontal: 8,
+                          fontSize: 14,
+                          fontWeight: 'bold',
+                          color: '#F37721',
+                        }}
+                      >
+                        {numberWithCommas(item?.beginMoneyLoan)} VNĐ
+                      </RText>
+                    </FlexRow>
+
+                    <FlexRow
+                      style={{ alignItems: 'center', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          color: '#777777',
+                        }}
+                      >
+                        {'Số tiền GN trong tháng'}
+                      </RText>
+                      <RText
+                        style={{
+                          flex: 1,
+                          textAlign: 'right',
+                          paddingHorizontal: 8,
+                          fontSize: 14,
+                          fontWeight: 'bold',
+                          color: '#000000',
+                        }}
+                      >
+                        {numberWithCommas(item?.moneyDisbusement)} VNĐ
+                      </RText>
+                    </FlexRow>
+
+                    <FlexRow
+                      style={{ alignItems: 'center', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          color: '#777777',
+                        }}
+                      >
+                        {'Số tiền gốc đã thu'}
+                      </RText>
+                      <RText
+                        style={{
+                          flex: 1,
+                          textAlign: 'right',
+                          paddingHorizontal: 8,
+                          fontSize: 14,
+                          fontWeight: 'bold',
+                          color: '#000000',
+                        }}
+                      >
+                        {numberWithCommas(item?.originalMoney)} VNĐ
+                      </RText>
+                    </FlexRow>
+
+                    <FlexRow
+                      style={{ alignItems: 'center', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          color: '#777777',
+                        }}
+                      >
+                        {'Số tiền đang cho vay cuối kỳ'}
+                      </RText>
+                      <RText
+                        style={{
+                          flex: 1,
+                          textAlign: 'right',
+                          paddingHorizontal: 8,
+                          fontSize: 14,
+                          fontWeight: 'bold',
+                          color: '#000000',
+                        }}
+                      >
+                        {numberWithCommas(item?.endMoneyLoan)} VNĐ
+                      </RText>
+                    </FlexRow>
+                    <FlexRow
+                      style={{ alignItems: 'flex-end', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          fontWeight: 'bold',
+                          color: '#3A3434',
+                        }}
+                      >{`Lãi tháng ${item?.month}/${item?.year}`}</RText>
+                      <View
+                        style={{
+                          borderBottomWidth: 1,
+                          borderColor: '#E6E6E6',
+                          height: 1,
+                          flex: 1,
+                          marginBottom: 4,
+                        }}
+                      />
+                    </FlexRow>
+                    <FlexRow
+                      style={{ alignItems: 'center', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          color: '#777777',
+                        }}
+                      >
+                        {'Lãi đã thu trong tháng'}
+                      </RText>
+                      <RText
+                        style={{
+                          flex: 1,
+                          textAlign: 'right',
+                          paddingHorizontal: 8,
+                          fontSize: 14,
+                          fontWeight: 'bold',
+                          color: '#38B000',
+                        }}
+                      >
+                        {numberWithCommas(item?.interestMoney)} VNĐ
+                      </RText>
+                    </FlexRow>
+                    <FlexRow
+                      style={{ alignItems: 'center', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          color: '#777777',
+                        }}
+                      >
+                        {'Tỉ suất lợi nhuận/ tháng'}
+                      </RText>
+                      <RText
+                        style={{
+                          flex: 1,
+                          textAlign: 'right',
+                          paddingHorizontal: 8,
+                          fontSize: 14,
+                          fontWeight: 'bold',
+                          color: '#000000',
+                        }}
+                      >
+                        {item?.percentInterest} %
+                      </RText>
+                    </FlexRow>
+                    <FlexRow
+                      style={{ alignItems: 'center', paddingVertical: 8 }}
+                    >
+                      <RText
+                        style={{
+                          paddingHorizontal: 8,
+                          fontSize: 13,
+                          color: '#777777',
+                        }}
+                      >
+                        {'Tỉ suất lợi nhuận thực tế/ tháng'}
+                      </RText>
+                      <RText
+                        style={{
+                          flex: 1,
+                          textAlign: 'right',
+                          paddingHorizontal: 8,
+                          fontSize: 14,
+                          fontWeight: 'bold',
+                          color: '#000000',
+                        }}
+                      >
+                        {item?.actualPercentInterest} %
+                      </RText>
+                    </FlexRow>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+          <RText
+            style={{
+              fontSize: 13,
+              fontWeight: 'bold',
+              marginTop: 13,
+              paddingLeft: 16,
+              marginBottom: 6,
+            }}
+          >
+            {'2 tháng gần nhất'.toUpperCase()}
+          </RText>
+        </View>
+      );
+    } else {
+      return (
+        <View
+          style={{
+            marginHorizontal: 6,
+            marginBottom: 16,
+          }}
+        >
+          <View
+            style={{
+              borderRadius: 10,
+              shadowColor: '#0000001A',
+              shadowOffset: {
+                width: 0,
+                height: 2,
+              },
+              shadowRadius: 4,
+              shadowOpacity: 1,
+            }}
+          >
+            <View
+              style={{
+                borderRadius: 10,
+                backgroundColor: 'white',
+              }}
+            >
+              <View style={{}}>
+                <View
+                  style={{
+                    padding: 10,
+                  }}
+                >
+                  <FlexRow
+                    style={{ alignItems: 'flex-end', paddingVertical: 8 }}
+                  >
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        fontWeight: 'bold',
+                        color: '#3A3434',
+                      }}
+                    >{`Dư nợ tháng ${item?.month}/${item?.year}`}</RText>
+                    <View
+                      style={{
+                        borderBottomWidth: 1,
+                        borderColor: '#E6E6E6',
+                        height: 1,
+                        flex: 1,
+                        marginBottom: 4,
+                      }}
+                    />
+                  </FlexRow>
+                  <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        color: '#777777',
+                      }}
+                    >
+                      {'Số tiền đang cho vay đầu kỳ'}
+                    </RText>
+                    <RText
+                      style={{
+                        flex: 1,
+                        textAlign: 'right',
+                        paddingHorizontal: 8,
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#F37721',
+                      }}
+                    >
+                      {numberWithCommas(item?.beginMoneyLoan)} VNĐ
+                    </RText>
+                  </FlexRow>
+
+                  <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        color: '#777777',
+                      }}
+                    >
+                      {'Số tiền GN trong tháng'}
+                    </RText>
+                    <RText
+                      style={{
+                        flex: 1,
+                        textAlign: 'right',
+                        paddingHorizontal: 8,
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#000000',
+                      }}
+                    >
+                      {numberWithCommas(item?.moneyDisbusement)} VNĐ
+                    </RText>
+                  </FlexRow>
+
+                  <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        color: '#777777',
+                      }}
+                    >
+                      {'Số tiền gốc đã thu'}
+                    </RText>
+                    <RText
+                      style={{
+                        flex: 1,
+                        textAlign: 'right',
+                        paddingHorizontal: 8,
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#000000',
+                      }}
+                    >
+                      {numberWithCommas(item?.originalMoney)} VNĐ
+                    </RText>
+                  </FlexRow>
+
+                  <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        color: '#777777',
+                      }}
+                    >
+                      {'Số tiền đang cho vay cuối kỳ'}
+                    </RText>
+                    <RText
+                      style={{
+                        flex: 1,
+                        textAlign: 'right',
+                        paddingHorizontal: 8,
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#000000',
+                      }}
+                    >
+                      {numberWithCommas(item?.endMoneyLoan)} VNĐ
+                    </RText>
+                  </FlexRow>
+                  <FlexRow
+                    style={{ alignItems: 'flex-end', paddingVertical: 8 }}
+                  >
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        fontWeight: 'bold',
+                        color: '#3A3434',
+                      }}
+                    >{`Lãi tháng ${item?.month}/${item?.year}`}</RText>
+                    <View
+                      style={{
+                        borderBottomWidth: 1,
+                        borderColor: '#E6E6E6',
+                        height: 1,
+                        flex: 1,
+                        marginBottom: 4,
+                      }}
+                    />
+                  </FlexRow>
+                  <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        color: '#777777',
+                      }}
+                    >
+                      {'Lãi đã thu trong tháng'}
+                    </RText>
+                    <RText
+                      style={{
+                        flex: 1,
+                        textAlign: 'right',
+                        paddingHorizontal: 8,
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#38B000',
+                      }}
+                    >
+                      {numberWithCommas(item?.interestMoney)} VNĐ
+                    </RText>
+                  </FlexRow>
+                  <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        color: '#777777',
+                      }}
+                    >
+                      {'Tỉ suất lợi nhuận/ tháng'}
+                    </RText>
+                    <RText
+                      style={{
+                        flex: 1,
+                        textAlign: 'right',
+                        paddingHorizontal: 8,
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#000000',
+                      }}
+                    >
+                      {item?.percentInterest} %
+                    </RText>
+                  </FlexRow>
+                  <FlexRow style={{ alignItems: 'center', paddingVertical: 8 }}>
+                    <RText
+                      style={{
+                        paddingHorizontal: 8,
+                        fontSize: 13,
+                        color: '#777777',
+                      }}
+                    >
+                      {'Tỉ suất lợi nhuận thực tế/ tháng'}
+                    </RText>
+                    <RText
+                      style={{
+                        flex: 1,
+                        textAlign: 'right',
+                        paddingHorizontal: 8,
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#000000',
+                      }}
+                    >
+                      {item?.actualPercentInterest} %
+                    </RText>
+                  </FlexRow>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      );
+    }
+  }
+
+  return (
+    <Container isStatusBar>
+      <AppHeader title="THỐNG KÊ" renderRight={renderRight} />
+      <ScrollView>
+        <DropDownPicker
+          open={open}
+          setOpen={setOpen}
+          items={month}
+          setItems={setMonth}
+          placeholder="Chọn theo tháng"
+          value={selectMonth}
+          setValue={setSelectMonth}
+          containerStyle={{
+            width: constant.widthDevice - 32,
+            height: 40,
+            marginTop: 16,
+            marginLeft: 16,
+          }}
+          //@ts-ignore
+          dropDownMaxHeight={250}
+          style={{
+            backgroundColor: '#fafafa',
+            zIndex: 2000,
+            borderColor: '#999999',
+          }}
+          itemStyle={{
+            justifyContent: 'flex-start',
+            borderBottomWidth: 1,
+            borderColor: '#E6E6E6',
+            paddingVertical: 10,
+            marginLeft: 16,
+          }}
+          dropDownStyle={{
+            backgroundColor: 'white',
+            shadowColor: '#00000033',
+            marginLeft: 16,
+            shadowOffset: {
+              width: 2,
+              height: 2,
+            },
+            shadowRadius: 6,
+            shadowOpacity: 1,
+          }}
+          onChangeValue={(item) => {
+            setSelectMonth(item);
+            getData(item);
+          }}
+        />
+        {myChart()}
+        <View
+          style={{
+            paddingHorizontal: 16,
+            paddingVertical: 16,
+            backgroundColor: 'white',
+          }}
+        >
+          <View
+            style={{
+              marginHorizontal: 16,
+              borderRadius: 5,
+              borderWidth: 1,
+              borderColor: '#E6E6E6',
+            }}
+          >
+            <FlexRow style={{ alignItems: 'center', paddingTop: 16 }}>
+              <FlexRow
+                style={{ flex: 1, paddingLeft: 16, alignItems: 'center' }}
+              >
+                <Image
+                  source={HomeImages.ic_chart_1}
+                  style={{ width: 16, height: 9, resizeMode: 'contain' }}
+                />
+                <RText
+                  style={{
+                    fontSize: 12,
+                    color: '#3A3434',
+                    paddingLeft: 8,
+                  }}
+                >
+                  {'Dư nợ cho vay'}
+                </RText>
+              </FlexRow>
+              <FlexRow
+                style={{ flex: 1, paddingLeft: 16, alignItems: 'center' }}
+              >
+                <Image
+                  source={HomeImages.ic_chart_3}
+                  style={{ width: 16, height: 9, resizeMode: 'contain' }}
+                />
+                <RText
+                  style={{
+                    fontSize: 12,
+                    color: '#3A3434',
+                    paddingLeft: 8,
+                  }}
+                >
+                  {'Lãi đã thu'}
+                </RText>
+              </FlexRow>
+            </FlexRow>
+            <FlexRow
+              style={{
+                alignItems: 'center',
+                paddingTop: 16,
+                paddingBottom: 16,
+              }}
+            >
+              <FlexRow
+                style={{ flex: 1, paddingLeft: 16, alignItems: 'center' }}
+              >
+                <Image
+                  source={HomeImages.ic_chart_2}
+                  style={{ width: 16, height: 9, resizeMode: 'contain' }}
+                />
+                <RText
+                  style={{
+                    fontSize: 12,
+                    color: '#3A3434',
+                    paddingLeft: 8,
+                  }}
+                >
+                  {'Số tiền giải ngân'}
+                </RText>
+              </FlexRow>
+              <FlexRow
+                style={{
+                  flex: 1,
+                  paddingLeft: 16,
+                  alignItems: 'center',
+                }}
+              />
+            </FlexRow>
+          </View>
+        </View>
+        <FlatList
+          data={data}
+          scrollEnabled={false}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item, index }) => _renderItem(item, index)}
+        />
+      </ScrollView>
+      {isLoading && <Loading />}
+    </Container>
+  );
+};