react-native-timacare 3.3.45 → 3.3.47

package/src/screens/detail-loan-tima/InforLoan.tsx

@@ -0,0 +1,199 @@
+//@ts-nocheck
+import React, { useEffect, useState } from 'react';
+import { Alert, ScrollView, TouchableOpacity, View } from 'react-native';
+import { MText } from '../../components/MText';
+import { IconArrowDown } from '../../assets/icons';
+import { formatDDMMYYY, formatMoney } from '../../utils';
+import { Api } from '../../services/api';
+import { color } from '../../theme';
+import { SkeletonDisbursedList } from '../../components/SkeletonLoanCard';
+
+const cardStyle = {
+  backgroundColor: '#FFFFFF',
+  borderRadius: 12,
+  borderWidth: 1,
+  borderColor: '#E0E0E0',
+  marginHorizontal: 16,
+  paddingHorizontal: 16,
+  paddingVertical: 8,
+};
+
+// Một dòng "Nhãn ... Giá trị" trong thẻ thông tin
+const InfoRow = ({ label, value, valueColor = '#1A1A1A' }) => (
+  <View
+    style={{
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+    }}
+  >
+    <MText style={{ fontSize: 14, color: '#4F4F4F' }}>{label}</MText>
+    <MText
+      style={{
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: 'BeVietnamPro-SemiBold',
+        color: valueColor,
+      }}
+    >
+      {value}
+    </MText>
+  </View>
+);
+
+export default function InforLoan({ id }: { id: number }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<any>();
+  const [expanded, setExpanded] = useState(false);
+
+  const getData = async () => {
+    try {
+      setIsLoading(true);
+      const response = await Api.getInstance().get_detail_loan_tima(id);
+      if (response.kind === 'ok') {
+        if (response.data?.meta?.errorCode === 200) {
+          setData(response.data?.data);
+        } else {
+          Alert.alert('Thông báo', response?.data?.meta?.errorMessage);
+        }
+      } else {
+        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+      }
+    } catch (error) {
+      Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  if (isLoading && !data) {
+    return (
+      <ScrollView style={{ flex: 1, paddingTop: 16 }}>
+        <SkeletonDisbursedList count={2} />
+      </ScrollView>
+    );
+  }
+
+  return (
+    <ScrollView
+      style={{ flex: 1 }}
+      contentContainerStyle={{ paddingVertical: 16 }}
+    >
+      {/* Thẻ thông tin hợp đồng giải ngân */}
+      <View style={cardStyle}>
+        <InfoRow label="Mã HĐ giải ngân" value={data?.contractCode || ''} />
+        <InfoRow
+          label="Số tiền giải ngân"
+          value={`${formatMoney(data?.totalMoneyDisbursement || 0)} đ`}
+        />
+        <InfoRow
+          label="Thời hạn"
+          value={data?.loanTime ? `${data?.loanTime} tháng` : ''}
+        />
+        <InfoRow
+          label="Ngày giải ngân"
+          value={data?.fromDate ? formatDDMMYYY(data?.fromDate) : ''}
+        />
+        <InfoRow
+          label="Ngày đến hạn tiếp theo"
+          value={data?.nextDate ? formatDDMMYYY(data?.nextDate) : ''}
+        />
+        <InfoRow label="Trạng thái Hợp đồng" value={data?.statusName || ''} />
+      </View>
+
+      {/* Thẻ tổng phải trả + trạng thái thanh toán */}
+      <View
+        style={[
+          {
+            marginTop: 16,
+            marginHorizontal: 16,
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: '#E0E0E0',
+          },
+        ]}
+      >
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={() => setExpanded((prev) => !prev)}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingVertical: 12,
+          }}
+        >
+          <MText style={{ fontSize: 14, color: '#4F4F4F' }}>
+            Tổng phải trả
+          </MText>
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <MText
+              style={{
+                fontSize: 14,
+                fontWeight: '600',
+                fontFamily: 'BeVietnamPro-SemiBold',
+                color: color.primary,
+                marginRight: 8,
+              }}
+            >
+              {formatMoney(data?.totalMoneyNeedPay || 0)} đ
+            </MText>
+            <View
+              style={{
+                transform: [{ rotate: expanded ? '180deg' : '0deg' }],
+              }}
+            >
+              <IconArrowDown width={14} height={14} fill="#828282" />
+            </View>
+          </View>
+        </TouchableOpacity>
+        {/* Chi tiết kỳ thanh toán khi mở rộng */}
+        {expanded &&
+          data?.schedules?.map((item, index) => (
+            <View
+              key={item?.paymentScheduleID || index}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingVertical: 8,
+                paddingHorizontal: 24,
+              }}
+            >
+              <MText style={{ fontSize: 13, color: '#828282' }}>
+                {formatDDMMYYY(item?.payDate)}
+              </MText>
+              <MText
+                style={{
+                  fontSize: 13,
+                  color: '#828282',
+                }}
+              >
+                {formatMoney(item?.moneyNeedPay || 0)} đ
+              </MText>
+            </View>
+          ))}
+        {expanded && (
+          <View
+            style={{
+              height: 1,
+              backgroundColor: '#E0E0E0',
+            }}
+          />
+        )}
+        <InfoRow
+          label="Trạng thái"
+          value={data?.paymentStatusName || ''}
+          valueColor={data?.isPaid ? '#27AE60' : color.primary}
+        />
+      </View>
+    </ScrollView>
+  );
+}

package/src/screens/{detail-loan/DetailLoanTima.tsx → detail-loan-tima/PaymentSchedule.tsx}

@@ -15,11 +15,15 @@ import { formatDDMMYYY, formatMoney } from '../../utils';
 import { Api } from '../../services/api';
 import { color } from '../../theme';
 import { commonStyles } from '../CommonStyles';
-import Loading from '../../components/Loading';
+import { SkeletonPaymentScheduleList } from '../../components/SkeletonLoanCard';
 import MHeader from '../../components/MHeader';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
+export const PaymentSchedule = observer(function PaymentSchedule({
+  id,
+}: {
+  id: number;
+}) {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
   const [isLoading, setIsLoading] = useState(false);
@@ -29,7 +33,7 @@ export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
   const getData = async () => {
     setIsLoading(true);
     Api.getInstance()
-      .getPaymentScheduleTima(props.route?.params?.loan?.id)
+      .getPaymentScheduleTima(id)
       .then((response) => {
         setIsLoading(false);
         if (response.kind === 'ok') {
@@ -51,9 +55,7 @@ export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
   const getMoneyCloseLoan = async () => {
     try {
       setIsLoading(true);
-      const response = await Api.getInstance().getMoneyCloseLoan(
-        props.route?.params?.loan?.id
-      );
+      const response = await Api.getInstance().getMoneyCloseLoan(id);
       if (response.kind === 'ok' && response.data.meta.errorCode === 200) {
         setMoneyCloseLoan(response.data?.data?.totalMoneyCloseLoan);
       } else {
@@ -71,25 +73,7 @@ export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
 
   return (
     <View style={{ flex: 1, backgroundColor: '#FDFDFD' }}>
-      <MHeader title={`Vay trực tuyến 24/7`} />
       <View style={{ flex: 1 }}>
-        <View style={$header}>
-          <TouchableOpacity
-            style={$backButton}
-            onPress={() => navigation.goBack()}
-          >
-            <IconBack />
-          </TouchableOpacity>
-          <MText
-            style={{
-              fontSize: 16,
-              fontWeight: '600',
-              fontFamily: 'BeVietnamPro-SemiBold',
-            }}
-          >
-            HD-{props.route?.params?.loan?.id}
-          </MText>
-        </View>
         <View
           style={{
             backgroundColor: '#ECFFE8',
@@ -98,6 +82,7 @@ export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
             paddingHorizontal: 16,
             paddingVertical: 8,
             justifyContent: 'space-between',
+            marginTop: 16,
           }}
         >
           <MText
@@ -122,7 +107,8 @@ export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
             flexDirection: 'row',
             alignItems: 'center',
             paddingHorizontal: 16,
-            marginTop: 16,
+            backgroundColor: '#FFF3E9',
+            paddingVertical: 16,
           }}
         >
           <MText
@@ -147,118 +133,121 @@ export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
             Số tiền thanh toán
           </MText>
         </View>
-        <ScrollView style={{ flex: 1, paddingHorizontal: 16, marginTop: 16 }}>
-          {data?.paymentSchedule?.map((item, index) => (
-            <View
-              key={index}
-              style={{
-                flexDirection: 'row',
-                paddingVertical: 16,
-                borderBottomWidth: 1,
-                borderColor: color.border,
-              }}
-            >
-              <MText
-                style={[
-                  {
-                    width: '35%',
-                  },
-                ]}
-              >
-                {item?.daysPayable ? formatDDMMYYY(item?.daysPayable) : ''}
-              </MText>
+        {isLoading && !data ? (
+          <SkeletonPaymentScheduleList />
+        ) : (
+          <ScrollView style={{ flex: 1, paddingHorizontal: 16 }}>
+            {data?.paymentSchedule?.map((item, index) => (
               <View
+                key={index}
                 style={{
-                  width: '40%',
-                  alignItems: 'center',
+                  flexDirection: 'row',
+                  paddingVertical: 16,
+                  borderBottomWidth: 1,
+                  borderColor: color.border,
                 }}
               >
-                <MText>{formatMoney(item?.payMoney)} VNĐ</MText>
                 <MText
                   style={[
                     {
-                      color: !item?.done ? '#F05123' : '#27AE60',
-                      marginTop: 4,
-                      fontSize: 12,
+                      width: '35%',
                     },
                   ]}
                 >
-                  {!item?.done ? 'Chưa thanh toán' : 'Đã thanh toán'}
+                  {item?.daysPayable ? formatDDMMYYY(item?.daysPayable) : ''}
                 </MText>
-              </View>
-
-              <View
-                style={{
-                  flexDirection: 'row',
-                  justifyContent: 'flex-end',
-                }}
-              >
-                {!item?.done && (
-                  <TouchableOpacity
-                    disabled={item?.done}
-                    style={{
-                      borderRadius: 8,
-                      height: 30,
-                      paddingHorizontal: 8,
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderWidth: 1,
-                      borderColor: !item?.done ? color.primary : '#333333',
-                    }}
-                    onPress={() =>
-                      navigation.navigate('ShowQrCode', {
-                        item,
-                        data,
-                        id: props.route?.params?.loan?.id,
-                      })
-                    }
+                <View
+                  style={{
+                    width: '40%',
+                    alignItems: 'center',
+                  }}
+                >
+                  <MText>{formatMoney(item?.payMoney)} đ</MText>
+                  <MText
+                    style={[
+                      {
+                        color: !item?.done ? '#EB5757' : '#27AE60',
+                        marginTop: 4,
+                        fontSize: 12,
+                      },
+                    ]}
                   >
-                    <MText
+                    {!item?.done ? 'Chưa thanh toán' : 'Đã thanh toán'}
+                  </MText>
+                </View>
+
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  {!item?.done && (
+                    <TouchableOpacity
+                      disabled={item?.done}
                       style={{
-                        color: !item?.done ? color.primary : '#333333',
-                        fontSize: 12,
+                        borderRadius: 24,
+                        height: 30,
+                        paddingHorizontal: 8,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderWidth: 1,
+                        borderColor: !item?.done ? color.primary : '#333333',
                       }}
+                      onPress={() =>
+                        navigation.navigate('ShowQrCode', {
+                          item,
+                          data,
+                          id: id,
+                        })
+                      }
                     >
-                      Thanh toán
-                    </MText>
-                  </TouchableOpacity>
-                )}
+                      <MText
+                        style={{
+                          color: !item?.done ? color.primary : '#333333',
+                          fontSize: 12,
+                        }}
+                      >
+                        Thanh toán
+                      </MText>
+                    </TouchableOpacity>
+                  )}
+                </View>
               </View>
-            </View>
-          ))}
-          <TouchableOpacity
-            onPress={() =>
-              navigation.navigate('ShowQrCode', {
-                data,
-                id: props.route?.params?.loan?.id,
-                isFullPayment: true,
-                totalMoney: moneyCloseLoan,
-              })
-            }
-            style={{
-              backgroundColor: '#FFEAD8',
-              marginTop: 24,
-              borderRadius: 24,
-              height: 40,
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderWidth: 1,
-              borderColor: '#F05123',
-              marginBottom: insets.bottom + 24,
-            }}
-          >
-            <MText
+            ))}
+            <TouchableOpacity
+              onPress={() =>
+                navigation.navigate('ShowQrCode', {
+                  data,
+                  id: id,
+                  isFullPayment: true,
+                  totalMoney: moneyCloseLoan,
+                })
+              }
               style={{
-                color: '#F05123',
-                fontWeight: '500',
-                fontFamily: 'BeVietnamPro-Medium',
+                backgroundColor: '#FFEAD8',
+                marginTop: 24,
+                borderRadius: 24,
+                height: 40,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 1,
+                borderColor: '#F05123',
+                marginBottom: insets.bottom + 24,
               }}
             >
-              Xem thông tin tất toán
-            </MText>
-          </TouchableOpacity>
-        </ScrollView>
-        <Loading isLoading={isLoading} />
+              <MText
+                style={{
+                  color: '#F05123',
+                  fontWeight: '500',
+                  fontFamily: 'BeVietnamPro-Medium',
+                }}
+              >
+                Xem thông tin tất toán
+              </MText>
+            </TouchableOpacity>
+          </ScrollView>
+        )}
       </View>
     </View>
   );

package/src/screens/detail-loan-tima/index.tsx

@@ -0,0 +1,109 @@
+//@ts-nocheck
+import React, { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { TouchableOpacity, View, ViewStyle } from 'react-native';
+import MHeader from '../../components/MHeader';
+import { IconBack } from '../../assets/icons';
+import { MText } from '../../components/MText';
+import InforLoan from './InforLoan';
+import { PaymentSchedule } from './PaymentSchedule';
+import { useNavigation } from '@react-navigation/native';
+
+export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
+  const navigation = useNavigation();
+  const [tab, setTab] = useState(1);
+  return (
+    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
+      <MHeader title={`Vay Online 24/7`} />
+      <View style={$header}>
+        <TouchableOpacity
+          style={$backButton}
+          onPress={() => navigation.goBack()}
+        >
+          <IconBack />
+        </TouchableOpacity>
+        <MText
+          style={{
+            fontSize: 16,
+            fontWeight: '600',
+            fontFamily: 'BeVietnamPro-SemiBold',
+          }}
+        >
+          HD-{props.route?.params?.loan?.id}
+        </MText>
+      </View>
+      <View
+        style={{
+          flexDirection: 'row',
+          backgroundColor: '#F2F2F2',
+          borderRadius: 30,
+          marginHorizontal: 16,
+        }}
+      >
+        <TouchableOpacity onPress={() => setTab(1)} style={{ flex: 1 }}>
+          <View
+            style={{
+              alignItems: 'center',
+              borderRadius: 30,
+              paddingVertical: 10,
+              borderWidth: 1,
+              borderColor: tab === 1 ? '#EF4123' : '#F2F2F2',
+              backgroundColor: tab === 1 ? '#FFFFFF' : '#F2F2F2',
+            }}
+          >
+            <MText
+              style={{
+                color: tab === 1 ? '#EF4123' : '#333333',
+                fontWeight: tab === 1 ? 'bold' : '400',
+              }}
+            >
+              Thông tin đơn
+            </MText>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => setTab(2)}
+          style={{
+            flex: 1,
+          }}
+        >
+          <View
+            style={{
+              alignItems: 'center',
+              borderRadius: 30,
+              paddingVertical: 10,
+              borderWidth: 1,
+              borderColor: tab === 2 ? '#EF4123' : '#F2F2F2',
+              backgroundColor: tab === 2 ? '#FFFFFF' : '#F2F2F2',
+            }}
+          >
+            <MText
+              style={{
+                color: tab === 2 ? '#EF4123' : '#333333',
+                fontWeight: tab === 2 ? 'bold' : '400',
+              }}
+            >
+              Lịch thanh toán
+            </MText>
+          </View>
+        </TouchableOpacity>
+      </View>
+      {tab === 1 ? (
+        <InforLoan id={props.route?.params?.loan?.id} />
+      ) : (
+        <PaymentSchedule id={props.route?.params?.loan?.id} />
+      )}
+    </View>
+  );
+});
+const $backButton: ViewStyle = {
+  position: 'absolute',
+  left: 16,
+};
+
+const $header: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingVertical: 16,
+  justifyContent: 'center',
+};

package/src/screens/home/DigitalTopupItem.tsx

@@ -305,7 +305,7 @@ export default function DigitalTopupItem({
         {item?.step !== 11 ? (
           <View
             style={{
-              backgroundColor: '#FFF3E9',
+              backgroundColor: '#EEF7FF',
               flexDirection: 'row',
               alignItems: 'center',
               gap: 4,
@@ -328,7 +328,7 @@ export default function DigitalTopupItem({
               <MText
                 style={{
                   fontSize: 10,
-                  color: color.primary,
+                  color: '#2F80ED',
                   textDecorationLine: 'underline',
                 }}
               >

package/src/screens/home/ItemMotoBikeLoan.tsx

@@ -292,7 +292,7 @@ export default function ItemMotoBikeLoan({
 
         <View
           style={{
-            backgroundColor: '#FFF3E9',
+            backgroundColor: '#EEF7FF',
             flexDirection: 'row',
             alignItems: 'center',
             gap: 4,
@@ -314,7 +314,7 @@ export default function ItemMotoBikeLoan({
             <MText
               style={{
                 fontSize: 10,
-                color: '#EF592E',
+                color: '#2F80ED',
                 textDecorationLine: 'underline',
               }}
             >