@tima2025/react-native-timalender 1.1.8 → 1.1.9

package/lib/commonjs/screens/ScheduleMore/index.js

@@ -0,0 +1,2 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _moment=_interopRequireDefault(require("moment"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeLinearGradient=_interopRequireDefault(require("react-native-linear-gradient"));var _Ionicons=_interopRequireDefault(require("react-native-vector-icons/Ionicons"));var _reactRedux=require("react-redux");var _HomePage=_interopRequireDefault(require("../../assets/images/HomePage"));var _Colors=_interopRequireDefault(require("../../common/Colors"));var _index=_interopRequireDefault(require("../../common/constants/index"));var _Container=_interopRequireDefault(require("../../common/Container"));var _FlexRow=_interopRequireDefault(require("../../common/FlexRow"));var _Loading=_interopRequireDefault(require("../../common/Loading"));var _Metrics=require("../../common/Metrics");var _RText=_interopRequireDefault(require("../../common/RText"));var _lenderSlice=require("../../components/Features/Lender/lenderSlice");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/tima/Repository/Tima/dautu/timadautu2025/src/screens/ScheduleMore/index.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var ScheduleMoreScreen=function ScheduleMoreScreen(_ref){var navigation=_ref.navigation,route=_ref.route;var item=route.params.data;var lender=route.params.lender;var dispatch=(0,_reactRedux.useDispatch)();console.log('item: ',item);console.log('lender: ',lender);var _useState=(0,_react.useState)(1),_useState2=(0,_slicedToArray2.default)(_useState,2),tab=_useState2[0],setTab=_useState2[1];var _useState3=(0,_react.useState)(null),_useState4=(0,_slicedToArray2.default)(_useState3,2),data=_useState4[0],setData=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isLoading=_useState6[0],setIsLoading=_useState6[1];var getSchedule=(0,_react.useCallback)(function(){var _ref2=(0,_asyncToGenerator2.default)(function*(params){setIsLoading(true);try{var resp=yield dispatch((0,_lenderSlice.getPaymentSchedule)(params));console.log('--------------');console.log('getPaymentSchedule: ',JSON.stringify(resp));if(resp.payload.meta.errCode===200){var _resp$payload;setData(resp==null?void 0:(_resp$payload=resp.payload)==null?void 0:_resp$payload.data);}setIsLoading(false);}catch(error){console.log('catching error get payment schedule: ',error);setIsLoading(false);}});return function(_x){return _ref2.apply(this,arguments);};}(),[]);var tabs=(0,_react.useMemo)(function(){return[{id:1,name:'Kỳ cần thanh toán'},{id:2,name:'Kỳ đã thanh toán'}];},[]);var handleChangeTab=function handleChangeTab(value){setTab(value);};var getStatus=function getStatus(value){switch(value){case'Chưa thanh toán':return'#FF3B30';case'Đã hoàn tất':return'#27AE60';case'Chưa đến hạn thanh toán':return'#FF9500';case'Chưa hoàn tất':return'#FF3B30';default:return'#FF9500';}};var renderItem=function renderItem(_ref3){var item=_ref3.item,index=_ref3.index;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:Object.assign({paddingVertical:12,paddingHorizontal:15,marginHorizontal:16,backgroundColor:'#ffffff',borderRadius:8},_Metrics.Shadow,{marginTop:8}),children:[(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,borderBottomWidth:1,borderColor:'#ccc',justifyContent:'space-between',marginBottom:4},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'center',width:'33.33%',backgroundColor:'#FFF6E9',borderRadius:4,paddingVertical:4},children:(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333'},children:item==null?void 0:item.period})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'center',width:'33.33%'},children:(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333'},children:"G\u1ED1c"})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'center',width:'33.33%'},children:(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333'},children:"L\xE3i"})})]}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:'33.33%',borderRadius:4,paddingVertical:4},children:(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333'},children:"Ph\u1EA3i thu"})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'flex-end',width:'33.33%'},children:(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#333333',fontWeight:'600',marginRight:20},children:[(0,_Metrics.numberWithCommas)(item==null?void 0:item.moneyOrigial)," \u0111"]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'flex-end',width:'33.33%'},children:(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#333333',fontWeight:'600'},children:[(0,_Metrics.numberWithCommas)(item==null?void 0:item.moneyInterest)," \u0111"]})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{borderColor:'#E5E5EA',borderWidth:1,borderRadius:1,borderStyle:'dashed'}}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:'33.33%',borderRadius:4,paddingVertical:4},children:(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333'},children:"\u0110\xE3 thu"})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'flex-end',width:'33.33%'},children:(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#333333',marginRight:20},children:[(0,_Metrics.numberWithCommas)(item==null?void 0:item.moneyOrigialPaid)," \u0111"]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'flex-end',width:'33.33%'},children:(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#333333'},children:[(0,_Metrics.numberWithCommas)(item==null?void 0:item.moneyInterestPaid)," \u0111"]})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{borderColor:'#E5E5EA',borderWidth:1,borderRadius:1,borderStyle:'dashed'}}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between',borderBottomWidth:1,borderColor:'#ccc'},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:'33.33%',borderRadius:4,paddingVertical:4},children:(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333'},children:"Ch\u01B0a thu"})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'flex-end',width:'33.33%'},children:(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#FF3B30',fontWeight:'600',marginRight:20},children:[(0,_Metrics.numberWithCommas)(item==null?void 0:item.moneyOrigialCurrent)," \u0111"]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{alignItems:'flex-end',width:'33.33%'},children:(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#FF3B30',fontWeight:'600'},children:[(0,_Metrics.numberWithCommas)(item==null?void 0:item.moneyInterestCurrent)," \u0111"]})})]}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{marginTop:12,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsxs)(_FlexRow.default,{children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:_HomePage.default.ic_debt,style:{width:14,height:14,resizeMode:'contain'}}),(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333',marginLeft:8},children:"Ng\xE0y ph\u1EA3i thanh to\xE1n"})]}),(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333',fontWeight:'600'},children:(0,_moment.default)(item==null?void 0:item.payDate).format('DD/MM/YYYY')})]}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{marginTop:12,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsxs)(_FlexRow.default,{children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:_HomePage.default.ic_status,style:{width:14,height:14,resizeMode:'contain'}}),(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#333333',marginLeft:8},children:"Tr\u1EA1ng th\xE1i"})]}),(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:getStatus(item==null?void 0:item.status),fontWeight:'600'},children:item==null?void 0:item.status})]})]});};(0,_react.useEffect)(function(){console.log('id: ',lender==null?void 0:lender.loanID);getSchedule({loanId:item==null?void 0:item.loanId,status:tab});},[tab,getSchedule]);console.log('data: ',data);return(0,_jsxRuntime.jsxs)(_Container.default,{isStatusBar:true,style:{paddingTop:_reactNative.StatusBar.currentHeight||42},children:[(0,_jsxRuntime.jsx)(_reactNativeLinearGradient.default,{colors:['rgba(239, 89, 46, 1)','rgba(255, 142, 79, 1)'],start:{x:0,y:0},end:{x:0,y:1},style:{width:'100%',height:_index.default.widthDevice*732/960,position:'absolute'}}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{height:48,justifyContent:'center',marginTop:4},children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:function onPress(){return navigation.goBack();},style:{width:48,height:48,justifyContent:'center',alignItems:'flex-start',position:'absolute',left:10},children:(0,_jsxRuntime.jsx)(_Ionicons.default,{name:"chevron-back",size:30,color:_Colors.default.WHITE})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{alignSelf:'center'},children:[(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{alignSelf:'center',textAlign:'center',fontSize:16,fontWeight:'600',color:'#ffffff'},children:lender==null?void 0:lender.customerName}),(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{alignSelf:'center',textAlign:'center',fontSize:10,fontWeight:'400',marginTop:4,color:'#ffffff'},children:lender==null?void 0:lender.contactCode})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_jsxRuntime.jsx)(_FlexRow.default,{style:{marginBottom:12,marginHorizontal:16},children:tabs.map(function(item){return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:function onPress(){return handleChangeTab(item.id);},style:{paddingHorizontal:8,borderRadius:20,backgroundColor:tab===item.id?'#ffffff':'rgba(255, 255, 255, 0.2)',justifyContent:'center',alignItems:'center',marginRight:8,height:32,borderWidth:1,borderColor:tab===item.id?'#EF592E':'#ffffff'},children:(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{color:tab===item.id?'#EF592E':'#ffffff'},children:item.name})},item.id);})})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:Object.assign({paddingVertical:12,paddingHorizontal:15,marginHorizontal:16,backgroundColor:'#ffffff',borderRadius:8},_Metrics.Shadow,{marginBottom:12}),children:[(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,fontWeight:'600',color:'#333333'},children:"S\u1ED1 ti\u1EC1n g\u1ED1c c\xF2n l\u1EA1i (1)-(2)"}),(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#EF592E',fontWeight:'600'},children:[(0,_Metrics.numberWithCommas)(data==null?void 0:data.totalMoneyCurrent)," \u0111"]})]}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#828282',marginLeft:20},children:"G\u1ED1c cho vay (1)"}),(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#333333',fontWeight:'600'},children:[(0,_Metrics.numberWithCommas)(data==null?void 0:data.totalMoney)," \u0111"]})]}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#828282',marginLeft:20},children:"G\u1ED1c \u0111\xE3 thu (2)"}),(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#333333',fontWeight:'600'},children:[(0,_Metrics.numberWithCommas)(data==null?void 0:data.totalMoneyPaid)," \u0111"]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{borderColor:'#E5E5EA',borderWidth:1,borderRadius:1,borderStyle:'dashed'}}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,fontWeight:'600',color:'#333333'},children:"L\xE3i d\u1EF1 ki\u1EBFn (3)-(4)"}),(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#EF592E',fontWeight:'600'},children:[(0,_Metrics.numberWithCommas)(data==null?void 0:data.moneyInterestCurrent)," \u0111"]})]}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#828282',marginLeft:20},children:"L\xE3i ph\u1EA3i thu (3)"}),(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#333333',fontWeight:'600'},children:[(0,_Metrics.numberWithCommas)(data==null?void 0:data.moneyInterest)," \u0111"]})]}),(0,_jsxRuntime.jsxs)(_FlexRow.default,{style:{paddingVertical:4,justifyContent:'space-between'},children:[(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{fontSize:12,color:'#828282',marginLeft:20},children:"L\xE3i \u0111\xE3 thu (4)"}),(0,_jsxRuntime.jsxs)(_RText.default,{textStyle:{fontSize:12,color:'#333333',fontWeight:'600'},children:[(0,_Metrics.numberWithCommas)(data==null?void 0:data.moneyInterestPaid)," \u0111"]})]})]}),(0,_jsxRuntime.jsx)(_reactNative.FlatList,{data:data==null?void 0:data.paymentScheduleDetail,renderItem:renderItem,style:{backgroundColor:'#EBEBEB',borderRadius:24,paddingTop:8},keyExtractor:function keyExtractor(item){var _item$id;return item==null?void 0:(_item$id=item.id)==null?void 0:_item$id.toString();},ListEmptyComponent:function ListEmptyComponent(){return(0,_jsxRuntime.jsx)(_RText.default,{textStyle:{textAlign:'center',marginTop:_reactNative.Dimensions.get('screen').height/4,color:'#828282'},children:"Danh s\xE1ch tr\u1ED1ng"});},contentContainerStyle:{paddingBottom:40}}),isLoading?(0,_jsxRuntime.jsx)(_Loading.default,{}):(0,_jsxRuntime.jsx)(_reactNative.View,{})]});};var _default=exports.default=ScheduleMoreScreen;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/screens/ScheduleMore/index.js.flow

@@ -0,0 +1,610 @@
+//@ts-nocheck
+import moment from 'moment';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Dimensions,
+  FlatList,
+  Image,
+  StatusBar,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useDispatch } from 'react-redux';
+import HomeImages from '../../assets/images/HomePage';
+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, Shadow } from '../../common/Metrics';
+import RText from '../../common/RText';
+import { getPaymentSchedule } from '../../components/Features/Lender/lenderSlice';
+import { AppDispatch } from '../../components/Redux/store';
+
+const ScheduleMoreScreen = ({ navigation, route }: any) => {
+  const item = route.params.data;
+  const lender = route.params.lender;
+  const dispatch = useDispatch<AppDispatch>();
+  console.log('item: ', item);
+  console.log('lender: ', lender);
+  const [tab, setTab] = useState<number>(1);
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const getSchedule = useCallback(
+    async (params: { loanId: number; status: number }) => {
+      setIsLoading(true);
+      try {
+        const resp: any = await dispatch(getPaymentSchedule(params));
+        console.log('--------------');
+        console.log('getPaymentSchedule: ', JSON.stringify(resp));
+        if (resp.payload.meta.errCode === 200) {
+          setData(resp?.payload?.data);
+        }
+        setIsLoading(false);
+      } catch (error) {
+        console.log('catching error get payment schedule: ', error);
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  const tabs = useMemo(
+    () => [
+      {
+        id: 1,
+        name: 'Kỳ cần thanh toán',
+      },
+      {
+        id: 2,
+        name: 'Kỳ đã thanh toán',
+      },
+    ],
+    []
+  );
+
+  const handleChangeTab = (value: number) => {
+    setTab(value);
+  };
+
+  const getStatus = (value: string) => {
+    switch (value) {
+      case 'Chưa thanh toán':
+        return '#FF3B30';
+      case 'Đã hoàn tất':
+        return '#27AE60';
+      case 'Chưa đến hạn thanh toán':
+        return '#FF9500';
+      case 'Chưa hoàn tất':
+        return '#FF3B30';
+      default:
+        return '#FF9500';
+    }
+  };
+
+  const renderItem = ({ item, index }: any) => {
+    return (
+      <View
+        style={{
+          paddingVertical: 12,
+          paddingHorizontal: 15,
+          marginHorizontal: 16,
+          backgroundColor: '#ffffff',
+          // backgroundColor: 'green',
+          borderRadius: 8,
+          ...Shadow,
+          // marginTop: 12,
+          // marginBottom: 4,
+          marginTop: 8,
+        }}
+      >
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            borderBottomWidth: 1,
+            borderColor: '#ccc',
+            justifyContent: 'space-between',
+            marginBottom: 4,
+          }}
+        >
+          <View
+            style={{
+              alignItems: 'center',
+              width: '33.33%',
+              backgroundColor: '#FFF6E9',
+              borderRadius: 4,
+              paddingVertical: 4,
+            }}
+          >
+            <RText textStyle={{ fontSize: 12, color: '#333333' }}>
+              {item?.period}
+            </RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'center',
+              width: '33.33%',
+            }}
+          >
+            <RText textStyle={{ fontSize: 12, color: '#333333' }}>Gốc</RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'center',
+              width: '33.33%',
+            }}
+          >
+            <RText textStyle={{ fontSize: 12, color: '#333333' }}>Lãi</RText>
+          </View>
+        </FlexRow>
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+          }}
+        >
+          <View
+            style={{
+              // alignItems: 'center',
+              width: '33.33%',
+              borderRadius: 4,
+              paddingVertical: 4,
+            }}
+          >
+            <RText textStyle={{ fontSize: 12, color: '#333333' }}>
+              Phải thu
+            </RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'flex-end',
+              width: '33.33%',
+            }}
+          >
+            <RText
+              textStyle={{
+                fontSize: 12,
+                color: '#333333',
+                fontWeight: '600',
+                marginRight: 20,
+              }}
+            >
+              {numberWithCommas(item?.moneyOrigial)} đ
+            </RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'flex-end',
+              width: '33.33%',
+            }}
+          >
+            <RText
+              textStyle={{ fontSize: 12, color: '#333333', fontWeight: '600' }}
+            >
+              {numberWithCommas(item?.moneyInterest)} đ
+            </RText>
+          </View>
+        </FlexRow>
+        <View
+          style={{
+            borderColor: '#E5E5EA',
+            borderWidth: 1,
+            borderRadius: 1,
+            borderStyle: 'dashed',
+          }}
+        />
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+          }}
+        >
+          <View
+            style={{
+              // alignItems: 'center',
+              width: '33.33%',
+              borderRadius: 4,
+              paddingVertical: 4,
+            }}
+          >
+            <RText textStyle={{ fontSize: 12, color: '#333333' }}>Đã thu</RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'flex-end',
+              width: '33.33%',
+            }}
+          >
+            <RText
+              textStyle={{ fontSize: 12, color: '#333333', marginRight: 20 }}
+            >
+              {numberWithCommas(item?.moneyOrigialPaid)} đ
+            </RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'flex-end',
+              width: '33.33%',
+            }}
+          >
+            <RText textStyle={{ fontSize: 12, color: '#333333' }}>
+              {numberWithCommas(item?.moneyInterestPaid)} đ
+            </RText>
+          </View>
+        </FlexRow>
+        <View
+          style={{
+            borderColor: '#E5E5EA',
+            borderWidth: 1,
+            borderRadius: 1,
+            borderStyle: 'dashed',
+          }}
+        />
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+            borderBottomWidth: 1,
+            borderColor: '#ccc',
+          }}
+        >
+          <View
+            style={{
+              // alignItems: 'center',
+              width: '33.33%',
+              borderRadius: 4,
+              paddingVertical: 4,
+            }}
+          >
+            <RText textStyle={{ fontSize: 12, color: '#333333' }}>
+              Chưa thu
+            </RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'flex-end',
+              width: '33.33%',
+            }}
+          >
+            <RText
+              textStyle={{
+                fontSize: 12,
+                color: '#FF3B30',
+                fontWeight: '600',
+                marginRight: 20,
+              }}
+            >
+              {numberWithCommas(item?.moneyOrigialCurrent)} đ
+            </RText>
+          </View>
+          <View
+            style={{
+              alignItems: 'flex-end',
+              width: '33.33%',
+            }}
+          >
+            <RText
+              textStyle={{ fontSize: 12, color: '#FF3B30', fontWeight: '600' }}
+            >
+              {numberWithCommas(item?.moneyInterestCurrent)} đ
+            </RText>
+          </View>
+        </FlexRow>
+        <FlexRow
+          style={{
+            marginTop: 12,
+            justifyContent: 'space-between',
+          }}
+        >
+          <FlexRow>
+            <Image
+              source={HomeImages.ic_debt}
+              style={{ width: 14, height: 14, resizeMode: 'contain' }}
+            />
+            <RText
+              textStyle={{ fontSize: 12, color: '#333333', marginLeft: 8 }}
+            >
+              Ngày phải thanh toán
+            </RText>
+          </FlexRow>
+          <RText
+            textStyle={{ fontSize: 12, color: '#333333', fontWeight: '600' }}
+          >
+            {moment(item?.payDate).format('DD/MM/YYYY')}
+          </RText>
+        </FlexRow>
+        <FlexRow
+          style={{
+            marginTop: 12,
+            justifyContent: 'space-between',
+          }}
+        >
+          <FlexRow>
+            <Image
+              source={HomeImages.ic_status}
+              style={{ width: 14, height: 14, resizeMode: 'contain' }}
+            />
+            <RText
+              textStyle={{ fontSize: 12, color: '#333333', marginLeft: 8 }}
+            >
+              Trạng thái
+            </RText>
+          </FlexRow>
+          <RText
+            textStyle={{
+              fontSize: 12,
+              color: getStatus(item?.status),
+              fontWeight: '600',
+            }}
+          >
+            {item?.status}
+          </RText>
+        </FlexRow>
+      </View>
+    );
+  };
+
+  useEffect(() => {
+    console.log('id: ', lender?.loanID);
+    getSchedule({ loanId: item?.loanId, status: tab });
+  }, [tab, getSchedule]);
+
+  console.log('data: ', data);
+
+  return (
+    <Container
+      isStatusBar
+      style={{ paddingTop: StatusBar.currentHeight || 42 }}
+    >
+      {/* <Image
+        source={HomeImages.bg_detail}
+        style={{
+          width: '100%',
+          height: (constant.widthDevice * 732) / 960,
+          resizeMode: 'contain',
+          position: 'absolute',
+        }}
+      /> */}
+      <LinearGradient
+        colors={['rgba(239, 89, 46, 1)', 'rgba(255, 142, 79, 1)']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        style={{
+          width: '100%',
+          height: (constant.widthDevice * 732) / 960,
+          position: 'absolute',
+        }}
+      />
+      <FlexRow
+        style={{
+          height: 48,
+          justifyContent: 'center',
+          marginTop: 4,
+        }}
+      >
+        <TouchableOpacity
+          onPress={() => navigation.goBack()}
+          style={{
+            width: 48,
+            height: 48,
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+            position: 'absolute',
+            left: 10,
+          }}
+        >
+          <Icon name="chevron-back" size={30} color={Colors.WHITE} />
+        </TouchableOpacity>
+        <View
+          style={{
+            alignSelf: 'center',
+            // position: 'absolute',
+          }}
+        >
+          <RText
+            textStyle={{
+              // position: 'absolute',
+              alignSelf: 'center',
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: '600',
+              color: '#ffffff',
+            }}
+          >
+            {lender?.customerName}
+          </RText>
+          <RText
+            textStyle={{
+              // position: 'absolute',
+              alignSelf: 'center',
+              textAlign: 'center',
+              fontSize: 10,
+              fontWeight: '400',
+              marginTop: 4,
+              color: '#ffffff',
+            }}
+          >
+            {lender?.contactCode}
+          </RText>
+        </View>
+      </FlexRow>
+      {/* tab */}
+      <View>
+        <FlexRow style={{ marginBottom: 12, marginHorizontal: 16 }}>
+          {tabs.map((item) => (
+            <TouchableOpacity
+              onPress={() => handleChangeTab(item.id)}
+              key={item.id}
+              style={{
+                //   paddingVertical: 4,
+                paddingHorizontal: 8,
+                borderRadius: 20,
+                backgroundColor:
+                  tab === item.id ? '#ffffff' : 'rgba(255, 255, 255, 0.2)',
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginRight: 8,
+                height: 32,
+                borderWidth: 1,
+                borderColor: tab === item.id ? '#EF592E' : '#ffffff',
+              }}
+            >
+              <RText
+                textStyle={{ color: tab === item.id ? '#EF592E' : '#ffffff' }}
+              >
+                {item.name}
+              </RText>
+            </TouchableOpacity>
+          ))}
+        </FlexRow>
+      </View>
+      <View
+        style={{
+          paddingVertical: 12,
+          paddingHorizontal: 15,
+          marginHorizontal: 16,
+          backgroundColor: '#ffffff',
+          // backgroundColor: 'green',
+          borderRadius: 8,
+          ...Shadow,
+          marginBottom: 12,
+        }}
+      >
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+          }}
+        >
+          <RText
+            textStyle={{ fontSize: 12, fontWeight: '600', color: '#333333' }}
+          >
+            Số tiền gốc còn lại (1)-(2)
+          </RText>
+
+          <RText
+            textStyle={{ fontSize: 12, color: '#EF592E', fontWeight: '600' }}
+          >
+            {numberWithCommas(data?.totalMoneyCurrent)} đ
+          </RText>
+        </FlexRow>
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+          }}
+        >
+          <RText textStyle={{ fontSize: 12, color: '#828282', marginLeft: 20 }}>
+            Gốc cho vay (1)
+          </RText>
+
+          <RText
+            textStyle={{ fontSize: 12, color: '#333333', fontWeight: '600' }}
+          >
+            {numberWithCommas(data?.totalMoney)} đ
+          </RText>
+        </FlexRow>
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+          }}
+        >
+          <RText textStyle={{ fontSize: 12, color: '#828282', marginLeft: 20 }}>
+            Gốc đã thu (2)
+          </RText>
+
+          <RText
+            textStyle={{ fontSize: 12, color: '#333333', fontWeight: '600' }}
+          >
+            {numberWithCommas(data?.totalMoneyPaid)} đ
+          </RText>
+        </FlexRow>
+
+        <View
+          style={{
+            borderColor: '#E5E5EA',
+            borderWidth: 1,
+            borderRadius: 1,
+            borderStyle: 'dashed',
+          }}
+        />
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+          }}
+        >
+          <RText
+            textStyle={{ fontSize: 12, fontWeight: '600', color: '#333333' }}
+          >
+            Lãi dự kiến (3)-(4)
+          </RText>
+
+          <RText
+            textStyle={{ fontSize: 12, color: '#EF592E', fontWeight: '600' }}
+          >
+            {numberWithCommas(data?.moneyInterestCurrent)} đ
+          </RText>
+        </FlexRow>
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+          }}
+        >
+          <RText textStyle={{ fontSize: 12, color: '#828282', marginLeft: 20 }}>
+            Lãi phải thu (3)
+          </RText>
+
+          <RText
+            textStyle={{ fontSize: 12, color: '#333333', fontWeight: '600' }}
+          >
+            {numberWithCommas(data?.moneyInterest)} đ
+          </RText>
+        </FlexRow>
+        <FlexRow
+          style={{
+            paddingVertical: 4,
+            justifyContent: 'space-between',
+          }}
+        >
+          <RText textStyle={{ fontSize: 12, color: '#828282', marginLeft: 20 }}>
+            Lãi đã thu (4)
+          </RText>
+
+          <RText
+            textStyle={{ fontSize: 12, color: '#333333', fontWeight: '600' }}
+          >
+            {numberWithCommas(data?.moneyInterestPaid)} đ
+          </RText>
+        </FlexRow>
+      </View>
+
+      <FlatList
+        data={data?.paymentScheduleDetail}
+        renderItem={renderItem}
+        style={{ backgroundColor: '#EBEBEB', borderRadius: 24, paddingTop: 8 }}
+        keyExtractor={(item) => item?.id?.toString()}
+        ListEmptyComponent={() => (
+          <RText
+            textStyle={{
+              textAlign: 'center',
+              marginTop: Dimensions.get('screen').height / 4,
+              color: '#828282',
+            }}
+          >
+            Danh sách trống
+          </RText>
+        )}
+        contentContainerStyle={{ paddingBottom: 40 }}
+      />
+      {isLoading ? <Loading /> : <View />}
+    </Container>
+  );
+};
+
+export default ScheduleMoreScreen;