@tima2025/react-native-timalender 1.0.0

package/src/screens/ReceivedLoan/Components/Tab1.tsx

@@ -0,0 +1,458 @@
+/* eslint-disable react-native/no-inline-styles */
+//@ts-nocheck
+import { useNavigation } from '@react-navigation/native';
+import { sortBy } from 'lodash';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { FlatList, ScrollView, TouchableOpacity, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Colors from '../../../common/Colors';
+import FlexRow from '../../../common/FlexRow';
+import formatNumber from '../../../common/FormatNumber';
+import { actuatedNormalize, numberWithCommas } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+import SpaceBetween from '../../../common/SpaceBetween';
+import Screens from '../../../components/Navigation/Screens';
+
+const Tab1 = (props: { data: any }) => {
+  const navigation = useNavigation();
+  const { data } = props;
+  const [groupData, setGroupData] = useState<any>([]);
+
+  useEffect(() => {
+    if (data?.lstAppLenderPaid) {
+      const groupedData: any = Object.values(
+        data?.lstAppLenderPaid?.reduce((spd, item) => {
+          if (!spd[moment(item.createDate).format('DD-MM-YYYY')]) {
+            spd[moment(item.createDate).format('DD-MM-YYYY')] = {
+              name: item.createDate,
+              items: [],
+            };
+          }
+          spd[moment(item.createDate).format('DD-MM-YYYY')].items.push(item);
+          return spd;
+        }, {})
+      );
+      const rs = sortBy(groupedData, function (o) {
+        return moment(o?.name);
+      }).reverse();
+      setGroupData(rs);
+    } else {
+      setGroupData([]);
+    }
+  }, [data]);
+
+  function _renderItem({ item, _index }: any) {
+    return (
+      <View>
+        <View
+          style={{
+            backgroundColor: '#FFF3E8',
+            paddingVertical: actuatedNormalize(6),
+            paddingHorizontal: actuatedNormalize(16),
+          }}
+        >
+          <RText
+            textStyle={{ fontWeight: '400', fontSize: actuatedNormalize(12) }}
+          >
+            Ngày {moment(item?.name).format('DD-MM-YYYY')}
+          </RText>
+        </View>
+        <FlatList
+          data={item?.items}
+          keyExtractor={(i, d) => d?.toString()}
+          renderItem={_renderList}
+        />
+      </View>
+    );
+  }
+
+  function _renderList({ item, _index }: any) {
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={() => navigation.navigate(Screens.DetailHistory, { item })}
+      >
+        <FlexRow
+          style={{
+            paddingVertical: 12,
+          }}
+        >
+          <View style={{ width: 130, paddingLeft: actuatedNormalize(16) }}>
+            <RText
+              textStyle={{
+                fontSize: actuatedNormalize(12),
+                color: '#000000',
+                fontWeight: 'bold',
+              }}
+            >
+              {item?.customerName}
+            </RText>
+            <RText
+              textStyle={{
+                fontSize: actuatedNormalize(10),
+                color: '#777777',
+                paddingTop: 2,
+              }}
+            >
+              {item?.loanCode}
+            </RText>
+          </View>
+          <View style={{ width: 90, alignItems: 'center' }}>
+            <RText
+              textStyle={{ fontSize: actuatedNormalize(12), color: '#000000' }}
+            >
+              {numberWithCommas(item?.moneyCurrent)} đ
+            </RText>
+          </View>
+          <View style={{ width: 90, alignItems: 'center' }}>
+            <RText
+              textStyle={{ fontSize: actuatedNormalize(12), color: '#000000' }}
+            >
+              {numberWithCommas(item?.moneyInterest)} đ
+            </RText>
+            <RText
+              textStyle={{
+                fontSize: actuatedNormalize(10),
+                color: Colors.GRAY_3,
+                paddingTop: actuatedNormalize(4),
+              }}
+            >
+              PIT: {numberWithCommas(item?.pit)} đ
+            </RText>
+          </View>
+          <View style={{ width: 150, alignItems: 'center' }}>
+            <RText
+              textStyle={{ fontSize: actuatedNormalize(12), color: '#000000' }}
+            >
+              {numberWithCommas(item?.totalMoney)} đ
+            </RText>
+          </View>
+        </FlexRow>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View>
+      <View style={{ paddingHorizontal: actuatedNormalize(16) }}>
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: Colors.ORANGE,
+            borderRadius: 8,
+            marginTop: actuatedNormalize(12),
+          }}
+        >
+          <SpaceBetween
+            style={{
+              padding: actuatedNormalize(12),
+            }}
+          >
+            <View>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  paddingBottom: actuatedNormalize(4),
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                Số dư đầu kỳ (1)
+              </RText>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  paddingBottom: actuatedNormalize(4),
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                Số tiền NĐT thu hộ BH (2)
+              </RText>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  paddingBottom: actuatedNormalize(4),
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                Số tiền Tima đã thu KH (3)
+              </RText>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                Số tiền NĐT đã nhận (4)
+              </RText>
+            </View>
+            <View style={{ alignItems: 'flex-end' }}>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  paddingBottom: actuatedNormalize(4),
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                {formatNumber(data?.beginBalance)} đ
+              </RText>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  paddingBottom: actuatedNormalize(4),
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                {formatNumber(data?.lenderPaid)} đ
+              </RText>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  paddingBottom: actuatedNormalize(4),
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                {formatNumber(data?.timaPaid)} đ
+              </RText>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                {formatNumber(data?.moneyReceived)} đ
+              </RText>
+            </View>
+          </SpaceBetween>
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            start={{ x: 1, y: 0 }}
+            end={{ x: 0, y: 0 }}
+            style={{
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexDirection: 'row',
+              paddingHorizontal: actuatedNormalize(12),
+              paddingVertical: actuatedNormalize(8),
+              borderBottomLeftRadius: 8,
+              borderBottomRightRadius: 8,
+            }}
+          >
+            <RText textStyle={{ color: 'white', fontWeight: '600' }}>
+              Số dư cuối kỳ (1-2+3-4)
+            </RText>
+            <RText textStyle={{ color: 'white', fontWeight: '600' }}>
+              {formatNumber(
+                data?.beginBalance -
+                  data?.lenderPaid +
+                  data?.timaPaid -
+                  data?.moneyReceived
+              )}{' '}
+              đ
+            </RText>
+          </LinearGradient>
+        </View>
+
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: Colors.ORANGE,
+            borderRadius: 8,
+            marginTop: actuatedNormalize(12),
+          }}
+        >
+          <View
+            style={{
+              padding: actuatedNormalize(12),
+            }}
+          >
+            <SpaceBetween>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                Số lượng đơn
+              </RText>
+              <RText
+                textStyle={{
+                  color: Colors.GRAY_3,
+                  fontSize: actuatedNormalize(14),
+                }}
+              >
+                {data?.totalLoan}
+              </RText>
+            </SpaceBetween>
+            <View
+              style={{
+                width: '100%',
+                height: 1,
+                backgroundColor: Colors.ORANGE,
+                marginVertical: actuatedNormalize(12),
+              }}
+            />
+            <SpaceBetween>
+              <View>
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                    paddingBottom: actuatedNormalize(4),
+                    fontSize: actuatedNormalize(14),
+                  }}
+                >
+                  Tổng số tiền gốc (1)
+                </RText>
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                    paddingBottom: actuatedNormalize(4),
+                    fontSize: actuatedNormalize(14),
+                  }}
+                >
+                  Tổng số tiền lãi (2)
+                </RText>
+
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                    fontSize: actuatedNormalize(14),
+                  }}
+                >
+                  Tổng thuế (3)
+                </RText>
+              </View>
+              <View style={{ alignItems: 'flex-end' }}>
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                    paddingBottom: actuatedNormalize(4),
+                    fontSize: actuatedNormalize(14),
+                  }}
+                >
+                  {formatNumber(data?.totalMoney)} đ
+                </RText>
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                    paddingBottom: actuatedNormalize(4),
+                    fontSize: actuatedNormalize(14),
+                  }}
+                >
+                  {formatNumber(data?.totalMoneyInterest)} đ
+                </RText>
+
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                    fontSize: actuatedNormalize(14),
+                  }}
+                >
+                  {formatNumber(data?.totalPit)} đ
+                </RText>
+              </View>
+            </SpaceBetween>
+          </View>
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            start={{ x: 1, y: 0 }}
+            end={{ x: 0, y: 0 }}
+            style={{
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexDirection: 'row',
+              paddingHorizontal: actuatedNormalize(12),
+              paddingVertical: actuatedNormalize(8),
+              borderBottomLeftRadius: 8,
+              borderBottomRightRadius: 8,
+            }}
+          >
+            <RText textStyle={{ color: 'white', fontWeight: '600' }}>
+              Tổng KH thanh toán (1+2-3)
+            </RText>
+            <RText textStyle={{ color: 'white', fontWeight: '600' }}>
+              {formatNumber(
+                data?.totalMoney + data?.totalMoneyInterest - data?.totalPit
+              )}{' '}
+              đ
+            </RText>
+          </LinearGradient>
+        </View>
+      </View>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <FlatList
+          data={groupData}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={_renderItem}
+          scrollEnabled={false}
+          ListHeaderComponent={() => (
+            <FlexRow
+              style={{
+                paddingVertical: 12,
+                // marginHorizontal: 12,
+                backgroundColor: Colors.ORANGE,
+                alignItems: 'center',
+                marginTop: actuatedNormalize(16),
+              }}
+            >
+              <View
+                style={{
+                  width: 130,
+                  alignItems: 'center',
+                }}
+              >
+                <RText
+                  textStyle={{
+                    fontSize: 11,
+                    color: Colors.WHITE,
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {'Tên khách hàng'}
+                </RText>
+              </View>
+              <View style={{ width: 90, alignItems: 'center' }}>
+                <RText
+                  textStyle={{
+                    fontSize: 11,
+                    color: Colors.WHITE,
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {'Gốc'}
+                </RText>
+              </View>
+              <View style={{ width: 90, alignItems: 'center' }}>
+                <RText
+                  textStyle={{
+                    fontSize: 11,
+                    color: Colors.WHITE,
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {'Lãi'}
+                </RText>
+              </View>
+              <View style={{ width: 150, alignItems: 'center' }}>
+                <RText
+                  textStyle={{
+                    fontSize: 11,
+                    color: Colors.WHITE,
+                    fontWeight: 'bold',
+                    paddingRight: 10,
+                  }}
+                >
+                  {'Tổng thanh toán'}
+                </RText>
+              </View>
+            </FlexRow>
+          )}
+        />
+      </ScrollView>
+      <View style={{ marginBottom: 32 }} />
+    </View>
+  );
+};
+
+export default Tab1;

package/src/screens/ReceivedLoan/Components/Tab2.tsx

@@ -0,0 +1,204 @@
+/* eslint-disable react-native/no-inline-styles */
+//@ts-nocheck
+import { sortBy } from 'lodash';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { FlatList, ScrollView, TouchableOpacity, View } from 'react-native';
+import Colors from '../../../common/Colors';
+import FlexRow from '../../../common/FlexRow';
+import formatNumber from '../../../common/FormatNumber';
+import { actuatedNormalize, numberWithCommas } from '../../../common/Metrics';
+import RText from '../../../common/RText';
+
+const Tab2 = (props: { data: any }) => {
+  const { data } = props;
+  const [groupData, setGroupData] = useState<any>([]);
+
+  useEffect(() => {
+    if (data?.lstTransactionPaid) {
+      const rs = sortBy(data?.lstTransactionPaid, function (o) {
+        return moment(o?.createDate);
+      }).reverse();
+      setGroupData(rs);
+    } else {
+      setGroupData([]);
+    }
+  }, [data]);
+
+  const _renderItem = ({ item }: any) => {
+    return (
+      <TouchableOpacity activeOpacity={1}>
+        <FlexRow
+          style={{
+            paddingVertical: 12,
+          }}
+        >
+          <View style={{ width: 130, alignItems: 'center' }}>
+            <RText
+              textStyle={{
+                fontSize: 10,
+                color: '#828282',
+                fontWeight: '600',
+                textAlign: 'center',
+              }}
+            >
+              {moment(item?.createDate).format('DD/MM/YYYY')}
+            </RText>
+          </View>
+          <View style={{ width: 90, alignItems: 'center' }}>
+            <RText
+              textStyle={{ fontSize: 10, color: '#777777', paddingTop: 2 }}
+            >
+              {item?.note ? item?.note : '-'}
+            </RText>
+          </View>
+          {item?.accountID && item?.bank ? (
+            <View style={{ width: 90, alignItems: 'center' }}>
+              <RText textStyle={{ fontSize: 10, color: '#000000' }}>
+                {item?.accountID}
+              </RText>
+              <RText textStyle={{ fontSize: 10, color: '#000000' }}>
+                {item?.bank}
+              </RText>
+            </View>
+          ) : (
+            <View style={{ width: 90, alignItems: 'center' }}>
+              <RText textStyle={{ fontSize: 10, color: '#000000' }}>-</RText>
+            </View>
+          )}
+          <View
+            style={{
+              width: 150,
+              alignItems: 'center',
+            }}
+          >
+            <View
+              style={{
+                paddingVertical: actuatedNormalize(4),
+                paddingHorizontal: actuatedNormalize(6),
+                borderRadius: 12,
+              }}
+            >
+              <RText
+                textStyle={{
+                  fontSize: actuatedNormalize(14),
+                  fontWeight: '600',
+                }}
+              >
+                {numberWithCommas(item?.money)} đ
+              </RText>
+            </View>
+          </View>
+        </FlexRow>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <View>
+      <View style={{ paddingHorizontal: actuatedNormalize(16) }}>
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: Colors.ORANGE,
+            borderRadius: 8,
+            marginTop: actuatedNormalize(12),
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: actuatedNormalize(8),
+          }}
+        >
+          <RText
+            textStyle={{
+              color: Colors.GRAY_3,
+              paddingBottom: actuatedNormalize(4),
+              fontSize: actuatedNormalize(14),
+            }}
+          >
+            Tổng tiền đã rút
+          </RText>
+          <RText
+            textStyle={{
+              fontSize: actuatedNormalize(16),
+              color: Colors.ORANGE_H,
+              fontWeight: '600',
+            }}
+          >
+            {formatNumber(data?.totalMoney)} đ
+          </RText>
+        </View>
+      </View>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <FlatList
+          data={groupData}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={_renderItem}
+          scrollEnabled={false}
+          ListHeaderComponent={() => (
+            <FlexRow
+              style={{
+                paddingVertical: 12,
+                // marginHorizontal: 12,
+                backgroundColor: Colors.ORANGE,
+                alignItems: 'center',
+                marginTop: actuatedNormalize(16),
+              }}
+            >
+              <View
+                style={{
+                  width: 130,
+                  alignItems: 'center',
+                }}
+              >
+                <RText
+                  textStyle={{
+                    fontSize: 11,
+                    color: Colors.WHITE,
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {'Thời gian'}
+                </RText>
+              </View>
+              <View style={{ width: 90, alignItems: 'center' }}>
+                <RText
+                  textStyle={{
+                    fontSize: 11,
+                    color: Colors.WHITE,
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {'Nội dung'}
+                </RText>
+              </View>
+              <View style={{ width: 90, alignItems: 'center' }}>
+                <RText
+                  style={{
+                    fontSize: 11,
+                    color: Colors.WHITE,
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {'Tài khoản nhận'}
+                </RText>
+              </View>
+              <View style={{ width: 150, alignItems: 'center' }}>
+                <RText
+                  textStyle={{
+                    fontSize: 11,
+                    color: Colors.WHITE,
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {'Số tiền'}
+                </RText>
+              </View>
+            </FlexRow>
+          )}
+        />
+      </ScrollView>
+    </View>
+  );
+};
+
+export default Tab2;