react-native-timacare 3.1.65 → 3.1.67

package/src/assets/v3/step5.svg

@@ -0,0 +1,45 @@
+<svg width="40" height="45" viewBox="0 0 40 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="6.75" y="0.25" width="26.5" height="8.5" rx="4.25"
+        fill="url(#paint0_linear_9853_42226)" />
+    <rect x="6.75" y="0.25" width="26.5" height="8.5" rx="4.25" stroke="white" stroke-width="0.5" />
+    <path
+        d="M9.96716 6.5V2.06H11.9052C12.1892 2.06 12.4312 2.11 12.6312 2.21C12.8312 2.31 12.9832 2.444 13.0872 2.612C13.1952 2.78 13.2492 2.964 13.2492 3.164C13.2492 3.368 13.2112 3.536 13.1352 3.668C13.0632 3.8 12.9752 3.904 12.8712 3.98C12.7712 4.052 12.6792 4.102 12.5952 4.13V4.172C12.6992 4.2 12.8152 4.254 12.9432 4.334C13.0752 4.414 13.1892 4.528 13.2852 4.676C13.3812 4.82 13.4292 5.008 13.4292 5.24C13.4292 5.448 13.3792 5.65 13.2792 5.846C13.1792 6.038 13.0212 6.196 12.8052 6.32C12.5892 6.44 12.3032 6.5 11.9472 6.5H9.96716ZM11.7972 2.75H10.7832V3.908H11.7972C12.0292 3.908 12.1972 3.85 12.3012 3.734C12.4052 3.618 12.4572 3.482 12.4572 3.326C12.4572 3.174 12.4052 3.04 12.3012 2.924C12.1972 2.808 12.0292 2.75 11.7972 2.75ZM11.8572 4.532H10.7832V5.81H11.8572C12.1212 5.81 12.3132 5.746 12.4332 5.618C12.5532 5.49 12.6132 5.34 12.6132 5.168C12.6132 5 12.5532 4.852 12.4332 4.724C12.3132 4.596 12.1212 4.532 11.8572 4.532ZM15.1046 6.56C14.7726 6.56 14.5206 6.458 14.3486 6.254C14.1806 6.05 14.0966 5.788 14.0966 5.468V3.32H14.8886V5.336C14.8886 5.508 14.9346 5.646 15.0266 5.75C15.1186 5.85 15.2486 5.9 15.4166 5.9C15.5646 5.9 15.6846 5.862 15.7766 5.786C15.8686 5.71 15.9346 5.612 15.9746 5.492C16.0186 5.372 16.0406 5.248 16.0406 5.12V3.32H16.6226C16.7786 3.32 16.8566 3.238 16.8566 3.074V2.672H17.5106V3.098C17.5106 3.302 17.4566 3.462 17.3486 3.578C17.2446 3.694 17.0886 3.752 16.8806 3.752H16.8386V6.5H16.0406V6.044H16.0046C15.9646 6.116 15.9066 6.192 15.8306 6.272C15.7586 6.352 15.6626 6.42 15.5426 6.476C15.4266 6.532 15.2806 6.56 15.1046 6.56ZM19.6314 2.864L19.0194 2.858L19.5174 1.784H20.2794L19.6314 2.864ZM19.3254 6.56C18.9734 6.56 18.6754 6.482 18.4314 6.326C18.1914 6.17 18.0074 5.968 17.8794 5.72C17.7554 5.468 17.6934 5.198 17.6934 4.91C17.6934 4.622 17.7554 4.354 17.8794 4.106C18.0074 3.854 18.1914 3.65 18.4314 3.494C18.6754 3.338 18.9734 3.26 19.3254 3.26H20.1054C20.2614 3.26 20.3394 3.178 20.3394 3.014V2.612H20.9994V3.038C20.9994 3.226 20.9534 3.376 20.8614 3.488C20.7734 3.6 20.6394 3.666 20.4594 3.686C20.6234 3.842 20.7474 4.026 20.8314 4.238C20.9154 4.45 20.9574 4.674 20.9574 4.91C20.9574 5.198 20.8934 5.468 20.7654 5.72C20.6414 5.968 20.4574 6.17 20.2134 6.326C19.9734 6.482 19.6774 6.56 19.3254 6.56ZM19.3254 5.894C19.5014 5.894 19.6514 5.848 19.7754 5.756C19.8994 5.664 19.9934 5.544 20.0574 5.396C20.1214 5.244 20.1534 5.082 20.1534 4.91C20.1534 4.734 20.1214 4.572 20.0574 4.424C19.9934 4.276 19.8994 4.156 19.7754 4.064C19.6514 3.972 19.5014 3.926 19.3254 3.926C19.1494 3.926 18.9994 3.972 18.8754 4.064C18.7514 4.156 18.6574 4.276 18.5934 4.424C18.5294 4.572 18.4974 4.734 18.4974 4.91C18.4974 5.082 18.5294 5.244 18.5934 5.396C18.6574 5.544 18.7514 5.664 18.8754 5.756C18.9994 5.848 19.1494 5.894 19.3254 5.894ZM23.2449 6.56C22.9729 6.56 22.7349 6.514 22.5309 6.422C22.3269 6.326 22.1569 6.2 22.0209 6.044C21.8849 5.884 21.7829 5.706 21.7149 5.51C21.6509 5.314 21.6189 5.114 21.6189 4.91C21.6189 4.706 21.6509 4.506 21.7149 4.31C21.7829 4.114 21.8829 3.938 22.0149 3.782C22.1509 3.622 22.3209 3.496 22.5249 3.404C22.7289 3.308 22.9689 3.26 23.2449 3.26C23.5169 3.26 23.7429 3.3 23.9229 3.38C24.1029 3.46 24.2449 3.56 24.3489 3.68C24.4569 3.8 24.5369 3.92 24.5889 4.04C24.6409 4.156 24.6749 4.254 24.6909 4.334C24.7069 4.414 24.7149 4.454 24.7149 4.454H23.9649C23.9649 4.454 23.9569 4.428 23.9409 4.376C23.9249 4.32 23.8929 4.256 23.8449 4.184C23.7969 4.112 23.7249 4.048 23.6289 3.992C23.5369 3.936 23.4129 3.908 23.2569 3.908C23.0729 3.908 22.9169 3.956 22.7889 4.052C22.6649 4.144 22.5709 4.266 22.5069 4.418C22.4429 4.57 22.4109 4.734 22.4109 4.91C22.4109 5.086 22.4429 5.25 22.5069 5.402C22.5709 5.554 22.6649 5.678 22.7889 5.774C22.9169 5.866 23.0729 5.912 23.2569 5.912C23.4129 5.912 23.5369 5.884 23.6289 5.828C23.7249 5.772 23.7969 5.708 23.8449 5.636C23.8929 5.564 23.9249 5.502 23.9409 5.45C23.9569 5.394 23.9649 5.366 23.9649 5.366H24.7149C24.7149 5.366 24.7069 5.406 24.6909 5.486C24.6749 5.566 24.6409 5.666 24.5889 5.786C24.5369 5.902 24.4569 6.02 24.3489 6.14C24.2449 6.26 24.1029 6.36 23.9229 6.44C23.7429 6.52 23.5169 6.56 23.2449 6.56ZM28.4379 6.56C28.1739 6.56 27.9479 6.524 27.7599 6.452C27.5719 6.38 27.4159 6.286 27.2919 6.17C27.1679 6.054 27.0699 5.932 26.9979 5.804C26.9259 5.676 26.8739 5.554 26.8419 5.438C26.8139 5.322 26.7979 5.228 26.7939 5.156H27.5559C27.5559 5.156 27.5599 5.182 27.5679 5.234C27.5759 5.282 27.5939 5.342 27.6219 5.414C27.6539 5.486 27.6999 5.56 27.7599 5.636C27.8239 5.708 27.9099 5.768 28.0179 5.816C28.1259 5.864 28.2619 5.888 28.4259 5.888C28.6259 5.888 28.7899 5.846 28.9179 5.762C29.0499 5.678 29.1479 5.57 29.2119 5.438C29.2759 5.306 29.3079 5.166 29.3079 5.018C29.3079 4.87 29.2759 4.73 29.2119 4.598C29.1479 4.462 29.0519 4.35 28.9239 4.262C28.7959 4.174 28.6359 4.13 28.4439 4.13C28.2959 4.13 28.1719 4.154 28.0719 4.202C27.9759 4.25 27.8999 4.304 27.8439 4.364C27.7879 4.424 27.7479 4.478 27.7239 4.526C27.6999 4.574 27.6879 4.598 27.6879 4.598H26.8839L27.2619 2.06H29.7999V2.774H27.8259L27.6639 3.872H27.6879C27.7159 3.84 27.7639 3.794 27.8319 3.734C27.8999 3.674 27.9959 3.62 28.1199 3.572C28.2439 3.524 28.4059 3.5 28.6059 3.5C28.9299 3.5 29.2019 3.572 29.4219 3.716C29.6459 3.86 29.8159 4.048 29.9319 4.28C30.0479 4.508 30.1059 4.75 30.1059 5.006C30.1059 5.198 30.0699 5.386 29.9979 5.57C29.9299 5.754 29.8259 5.922 29.6859 6.074C29.5499 6.222 29.3779 6.34 29.1699 6.428C28.9619 6.516 28.7179 6.56 28.4379 6.56Z"
+        fill="white" />
+    <rect opacity="0.1" y="4.5" width="40" height="40" rx="8" fill="url(#paint1_linear_9853_42226)" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M14 16.5C13.4477 16.5 13 16.9477 13 17.5V31.5C13 32.0523 13.4477 32.5 14 32.5H26C26.5523 32.5 27 32.0523 27 31.5V24.5C27 23.9477 27.4477 23.5 28 23.5C28.5523 23.5 29 23.9477 29 24.5V31.5C29 33.1569 27.6569 34.5 26 34.5H14C12.3431 34.5 11 33.1569 11 31.5V17.5C11 15.8431 12.3431 14.5 14 14.5H20C20.5523 14.5 21 14.9477 21 15.5C21 16.0523 20.5523 16.5 20 16.5H14Z"
+        fill="url(#paint2_linear_9853_42226)" />
+    <path
+        d="M27.495 16.2679C26.5187 15.2916 24.9358 15.2916 23.9595 16.2679L23.2523 16.975C23.0571 17.1702 23.0571 17.4868 23.2523 17.6821L26.7879 21.2176C26.9831 21.4129 27.2997 21.4129 27.495 21.2176L28.2021 20.5105C29.1784 19.5342 29.1784 17.9513 28.2021 16.975L27.495 16.2679Z"
+        fill="url(#paint3_linear_9853_42226)" />
+    <path
+        d="M21.8381 19.0963C21.6428 18.901 21.3263 18.901 21.131 19.0963L16.0634 24.1639C15.9104 24.3169 15.8111 24.5154 15.7806 24.7296L15.3091 28.0294C15.2149 28.6894 15.7806 29.2551 16.4405 29.1608L19.7403 28.6894C19.9545 28.6588 20.153 28.5595 20.306 28.4065L25.3736 23.3389C25.5689 23.1437 25.5689 22.8271 25.3736 22.6318L21.8381 19.0963Z"
+        fill="url(#paint4_linear_9853_42226)" />
+    <defs>
+        <linearGradient id="paint0_linear_9853_42226" x1="33" y1="8.5" x2="9.62948" y2="-4.3007"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FF8E4F" />
+            <stop offset="1" stop-color="#EF592E" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_9853_42226" x1="40" y1="44.5" x2="-5.45035" y2="36.8402"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FF8E4F" />
+            <stop offset="1" stop-color="#EF592E" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_9853_42226" x1="29" y1="34.5" x2="8.43945" y2="31.3814"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FF8E4F" />
+            <stop offset="1" stop-color="#EF592E" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_9853_42226" x1="28.9343" y1="29.1711" x2="13.4409"
+            y2="26.56" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FF8E4F" />
+            <stop offset="1" stop-color="#EF592E" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_9853_42226" x1="28.9343" y1="29.1711" x2="13.4409"
+            y2="26.56" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FF8E4F" />
+            <stop offset="1" stop-color="#EF592E" />
+        </linearGradient>
+    </defs>
+</svg>

package/src/components/ItemTimaOneV2.tsx

@@ -0,0 +1,617 @@
+//@ts-nocheck
+import React from 'react';
+import { TouchableOpacity, View, ViewStyle } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  IconEdit,
+  IconEditDisable,
+  IconEditSuccess,
+  IconEkyc,
+  IconEkycDisable,
+  IconEkycSuccess,
+  IconMoney2,
+  IconOcr,
+  IconOCRSuccess,
+  IconSignDisable,
+  IconSignSuccess,
+  IconTick,
+} from '../assets/svgs';
+import { MText } from './MText';
+import { formatMoney } from '../utils';
+import { ScreenNames } from '../navigation';
+import { IconSign2, Info } from '../assets/icons';
+
+const $action: ViewStyle = {
+  flexDirection: 'column',
+  alignItems: 'center',
+};
+
+interface ItemTimaOneV2 {
+  item: any;
+  navigation: any;
+}
+export default function ItemTimaOneV2({ item, navigation }: ItemTimaOneV2) {
+  return (
+    <View
+      style={{
+        backgroundColor: '#FFFFFF',
+        paddingHorizontal: 16,
+        marginBottom: 16,
+        borderRadius: 8,
+        borderWidth: 0.5,
+        borderColor: '#E0E0E0',
+      }}
+    >
+      <LinearGradient
+        colors={
+          item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
+            ? ['#4CBA3D', '#98D788']
+            : ['#FF8E4F', '#EF592E']
+        }
+        style={{
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+          marginHorizontal: -16,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <IconMoney2 />
+            <MText
+              style={{
+                fontSize: 12,
+                color: 'white',
+              }}
+            >
+              Số tiền đăng ký vay
+            </MText>
+          </View>
+          <MText
+            style={{
+              fontSize: 12,
+              color: 'white',
+              fontWeight: 'bold',
+            }}
+          >
+            {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
+              ? formatMoney(
+                  item?.listLoanAllAutoDE.reduce(
+                    (sum, item) => sum + item.totalMoney,
+                    0
+                  )
+                )
+              : formatMoney(item?.loanAmount)}
+            đ
+          </MText>
+        </View>
+      </LinearGradient>
+      {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
+        <View
+          style={{
+            marginHorizontal: -16,
+            backgroundColor: '#ECFFE8',
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+          >
+            <MText
+              style={{
+                fontSize: 10,
+                color: '#878787',
+                marginLeft: 24,
+              }}
+            >
+              Số tiền giải ngân
+            </MText>
+            <MText
+              style={{
+                fontSize: 10,
+                color: '#333333',
+              }}
+            >
+              {formatMoney(
+                item?.listLoanAllAutoDE.reduce(
+                  (sum, item) => sum + item.loanAmount,
+                  0
+                )
+              )}{' '}
+              đ
+            </MText>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginTop: 6,
+            }}
+          >
+            <MText
+              style={{
+                fontSize: 10,
+                color: '#878787',
+                marginLeft: 24,
+              }}
+            >
+              Số tiền bảo hiểm
+            </MText>
+            <MText
+              style={{
+                fontSize: 10,
+                color: '#333333',
+              }}
+            >
+              {formatMoney(
+                item?.listLoanAllAutoDE.reduce(
+                  (sum, item) => sum + item.insurenceMoney,
+                  0
+                )
+              )}{' '}
+              đ
+            </MText>
+          </View>
+        </View>
+      )}
+
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          marginTop:
+            item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
+              ? 16
+              : 32,
+          paddingHorizontal: 24,
+        }}
+      >
+        <TouchableOpacity
+          disabled={item?.step >= 3 ? true : false}
+          style={$action}
+          onPress={() => {
+            if (item?.step === 0) {
+              navigation.push(ScreenNames.OCR, {
+                loan: item,
+                front: true,
+              });
+            } else if (item?.step === 1) {
+              navigation.push(ScreenNames.VehicleCamera, {
+                loan: item,
+                front: true,
+              });
+            } else if (item?.step === 2) {
+              navigation.push(ScreenNames.RegisterCamera, {
+                loan: item,
+              });
+            }
+          }}
+        >
+          {item?.step >= 3 ? <IconOCRSuccess /> : <IconOcr />}
+          <MText
+            style={{
+              textAlign: 'center',
+              fontSize: 10,
+              marginTop: 5,
+              color: '#333333',
+            }}
+          >
+            OCR{'\n'}chứng từ
+          </MText>
+        </TouchableOpacity>
+        <TouchableOpacity
+          disabled={item?.step !== 3 ? true : false}
+          style={$action}
+          onPress={() => {
+            if (item?.step === 3) {
+              if (item?.typeLoan === 5) {
+                navigation.push(ScreenNames.ReviewInformation, {
+                  loan: item,
+                });
+              } else if (item?.typeLoan === 6) {
+                navigation.push(ScreenNames.TopupLoanInfo, {
+                  loan: item,
+                });
+              }
+            }
+          }}
+        >
+          {item.step > 3 ? (
+            <IconEditSuccess />
+          ) : item.step === 3 ? (
+            <IconEdit />
+          ) : (
+            <IconEditDisable />
+          )}
+          <MText
+            style={{
+              textAlign: 'center',
+              fontSize: 10,
+              marginTop: 5,
+              color: '#333333',
+            }}
+          >
+            Cập nhật{'\n'}thông tin
+          </MText>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.push(ScreenNames.LivenessV2, {
+              loan: item,
+            });
+          }}
+          style={$action}
+          disabled={item?.step === 6 ? false : true}
+        >
+          {item?.step >= 7 ? (
+            <IconEkycSuccess />
+          ) : item?.step <= 5 ? (
+            <IconEkycDisable />
+          ) : (
+            <IconEkyc />
+          )}
+
+          <MText
+            style={{
+              textAlign: 'center',
+              fontSize: 10,
+              marginTop: 5,
+              color: '#333333',
+            }}
+          >
+            EKYC
+          </MText>
+        </TouchableOpacity>
+        <TouchableOpacity
+          disabled={item?.step === 7 ? false : true}
+          style={$action}
+          onPress={() => {
+            navigation.push(ScreenNames.TTSSignLoan, {
+              loan: item,
+            });
+          }}
+        >
+          {item?.step <= 6 ? (
+            <IconSignDisable />
+          ) : item?.step === 8 ? (
+            <IconSignSuccess />
+          ) : (
+            <IconSign2 />
+          )}
+          <MText
+            style={{
+              textAlign: 'center',
+              fontSize: 10,
+              marginTop: 5,
+              color: '#333333',
+            }}
+          >
+            Ký HĐ
+          </MText>
+        </TouchableOpacity>
+      </View>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          marginTop: 16,
+          backgroundColor: item?.step === 8 ? '#E8FFE9' : '#FFF2F2',
+          paddingHorizontal: 10,
+          paddingVertical: 10,
+          borderRadius: 4,
+          justifyContent: 'space-between',
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            flex: 1,
+            paddingRight: 24,
+          }}
+        >
+          {item?.step === 8 ? <IconTick /> : <Info />}
+          <MText
+            style={{
+              color: item?.step === 8 ? '#28A745' : '#E40010',
+              fontSize: 10,
+            }}
+          >
+            {item?.step < 3
+              ? 'OCR chứng từ để được giải ngân'
+              : item?.step === 3
+              ? `Tiếp tục Cập nhật thông tin để${'\n'}giải ngân nhanh nhất`
+              : item?.step === 6 || item?.step === 7
+              ? `Tiếp tục eKYC và Ký hợp đồng để${'\n'}giải ngân nhanh nhất`
+              : item?.step === 8
+              ? `Hợp đồng đã ký thành công. Vui lòng chờ chuyên viên tư vấn liên hệ`
+              : 'Đơn vay đang trong quá trình xử lý'}
+          </MText>
+        </View>
+        {item?.step < 3 ? (
+          <TouchableOpacity
+            onPress={() => {
+              if (item?.step === 0) {
+                navigation.push(ScreenNames.OCR, {
+                  loan: item,
+                  front: true,
+                });
+              } else if (item?.step === 1) {
+                navigation.push(ScreenNames.VehicleCamera, {
+                  loan: item,
+                  front: true,
+                });
+              } else if (item?.step === 2) {
+                navigation.push(ScreenNames.RegisterCamera, {
+                  loan: item,
+                });
+              }
+            }}
+          >
+            <LinearGradient
+              colors={['#FF8E4F', '#EF592E']}
+              style={{
+                height: 24,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 24,
+                paddingHorizontal: 10,
+              }}
+            >
+              <MText
+                style={{
+                  color: 'white',
+                  fontSize: 10,
+                }}
+              >
+                Đi tới OCR
+              </MText>
+            </LinearGradient>
+          </TouchableOpacity>
+        ) : item?.step === 3 ? (
+          <TouchableOpacity
+            onPress={() => {
+              if (item?.step === 3) {
+                if (item?.typeLoan === 5) {
+                  navigation.push(ScreenNames.ReviewInformation, {
+                    loan: item,
+                  });
+                } else if (item?.typeLoan === 6) {
+                  navigation.push(ScreenNames.TopupLoanInfo, {
+                    loan: item,
+                  });
+                }
+              }
+            }}
+          >
+            <LinearGradient
+              colors={['#FF8E4F', '#EF592E']}
+              style={{
+                height: 24,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 24,
+                paddingHorizontal: 10,
+              }}
+            >
+              <MText
+                style={{
+                  color: 'white',
+                  fontSize: 10,
+                }}
+              >
+                Cập nhật thông tin
+              </MText>
+            </LinearGradient>
+          </TouchableOpacity>
+        ) : item?.step === 6 ? (
+          <TouchableOpacity
+            onPress={() => {
+              navigation.push(ScreenNames.LivenessV2, {
+                loan: item,
+              });
+            }}
+          >
+            <LinearGradient
+              colors={['#FF8E4F', '#EF592E']}
+              style={{
+                height: 24,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 24,
+                paddingHorizontal: 10,
+              }}
+            >
+              <MText
+                style={{
+                  color: 'white',
+                  fontSize: 10,
+                }}
+              >
+                Đi tới EKYC
+              </MText>
+            </LinearGradient>
+          </TouchableOpacity>
+        ) : item?.step === 7 ? (
+          <TouchableOpacity
+            onPress={() => {
+              navigation.push(ScreenNames.TTSSignLoan, {
+                loan: item,
+              });
+            }}
+          >
+            <LinearGradient
+              colors={['#FF8E4F', '#EF592E']}
+              style={{
+                height: 24,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 24,
+                paddingHorizontal: 10,
+              }}
+            >
+              <MText
+                style={{
+                  color: 'white',
+                  fontSize: 10,
+                }}
+              >
+                Ký hợp đồng
+              </MText>
+            </LinearGradient>
+          </TouchableOpacity>
+        ) : (
+          <></>
+        )}
+      </View>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          marginTop: 16,
+        }}
+      >
+        <MText
+          style={{
+            color: '#878787',
+            fontSize: 12,
+          }}
+        >
+          Trạng thái
+        </MText>
+        <MText
+          style={[
+            commonStyles.textNormalBold,
+            { color: '#333333', fontSize: 12 },
+          ]}
+        >
+          {item?.loanStatus}
+        </MText>
+      </View>
+      <View
+        style={{
+          height: 1,
+          backgroundColor: '#E0E0E0',
+          marginTop: 16,
+        }}
+      />
+      {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
+        <View>
+          <MText
+            style={{
+              fontSize: 12,
+              fontWeight: 'bold',
+              marginTop: 16,
+              color: '#333333',
+            }}
+          >
+            Danh sách đơn chia nhỏ
+          </MText>
+          {item?.listLoanAllAutoDE.map((x, index) => (
+            <View
+              key={index}
+              style={{
+                marginTop: 8,
+                borderBottomWidth:
+                  index + 1 === item?.listLoanAllAutoDE.length ? 0 : 1,
+                borderColor: '#E0E0E0',
+                paddingBottom: 8,
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                  }}
+                >
+                  <IconTima16 />
+                  <MText
+                    style={[
+                      commonStyles.textNormal,
+                      {
+                        color: '#333333',
+                        fontSize: 12,
+                      },
+                    ]}
+                  >
+                    HD-{x?.loanBriefId} ({index + 1})
+                  </MText>
+                </View>
+                <MText
+                  style={[
+                    commonStyles.textNormalBold,
+                    {
+                      color: '#333333',
+                      fontSize: 12,
+                    },
+                  ]}
+                >
+                  {formatMoney(x?.totalMoney)} đ
+                </MText>
+              </View>
+            </View>
+          ))}
+        </View>
+      )}
+
+      {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
+        <TouchableOpacity
+          onPress={() => {
+            navigation.push(ScreenNames.LoanInterestRate, {
+              loan: item,
+            });
+          }}
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            backgroundColor: '#EDF6FF',
+            marginHorizontal: -16,
+            paddingVertical: 10,
+            borderBottomRightRadius: 8,
+            borderBottomLeftRadius: 8,
+            marginTop: 10,
+          }}
+        >
+          <MText
+            style={[
+              {
+                fontSize: 12,
+                color: '#2F80ED',
+              },
+            ]}
+          >
+            Bảng biểu lãi phí đơn vay {`->`}
+          </MText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}