TODO: Đã sửa xong giao diện màn công nợ

src/screens/debt/item.js

-import { StyleSheet, Text, View } from "react-native";
-import React from "react";
-import { useNavigation } from "@react-navigation/native";
-import R from "../../assets/R";
-import Button from "../../components/Button";
-const ItemList = ({ item , onPayPress}) => {
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import {useNavigation} from '@react-navigation/native';
+import R from '../../assets/R';
+import Button from '../../components/Button';
+const ItemList = ({item, onPayPress}) => {
   const navigate = useNavigation();
   const QrCodeIconButton = R.images.icQrCodeButton;
-  const { displayConfig } = item;
+  const {displayConfig} = item;
   return (
     <View style={styles.container}>
-      <Text style={[styles.title, { color: displayConfig.titleColor }]}>
+      <Text style={[styles.title, {color: displayConfig.titleColor}]}>
         {item.title_notifi_student_code}
       </Text>
-      <View style={styles.container_content}>
-        <Text style={styles.sub_title}>Số tiền: </Text>
-         <Text style={[styles.price_text, { color: displayConfig.priceColor }]}>
+      <Text
+        style={[
+          styles.sub_title,
+          {fontFamily: R.fonts.InterMedium, fontWeight: '600'},
+        ]}>
+        Số tiền:{' '}
+        <Text style={[styles.price_text, {color: displayConfig.priceColor}]}>
           {item.price}
         </Text>
-      </View>
-      <View style={styles.container_content}>
-        <Text style={styles.sub_title}>Mã công nợ: </Text>
-        <Text style={styles.code}>{item.code_debt}</Text>
-      </View>
-      <View style={styles.container_content}>
-        <Text style={styles.sub_title}>Loại công nợ: </Text>
-        <Text style={[styles.type_of_debt, { color: displayConfig.typeDebtColor }]}>
+      </Text>
+      <Text
+        style={[
+          styles.sub_title,
+          {fontFamily: R.fonts.InterMedium, fontWeight: '600'},
+        ]}>
+        Mã công nợ: <Text style={styles.code}>{item.code_debt}</Text>
+      </Text>
+
+      <Text
+        style={[
+          styles.sub_title,
+          {fontFamily: R.fonts.InterMedium, fontWeight: '600'},
+        ]}>
+        Loại công nợ:{' '}
+        <Text
+          style={[styles.type_of_debt, {color: displayConfig.typeDebtColor}]}>
           {item.type_debt}
         </Text>
-      </View>
-      <View style={styles.container_content}>
-        <Text style={styles.sub_title}>Ghi chú: </Text>
-        <Text style={[{ flex: 1 }, styles.note]}>{item.message_debt}</Text>
-      </View>
+      </Text>
+
+      <Text
+        style={[
+          styles.sub_title,
+          {fontFamily: R.fonts.InterMedium, fontWeight: '600'},
+        ]}>
+        Ghi chú:{' '}
+        <Text style={[{flex: 1}, styles.note]}>{item.message_debt}</Text>
+      </Text>
+
       <View style={styles.container_content}>
-             {displayConfig.showPaymentTerm && (
-          <View style={{flex:1, flexDirection:'row'}}>
-            <Text style={styles.sub_title}>Hạn thanh toán: </Text>
-            <Text style={[styles.time, { color: displayConfig.timeColor }]}>
+        {displayConfig.showPaymentTerm && (
+          <Text
+            style={[
+              styles.sub_title,
+              {fontFamily: R.fonts.InterMedium, fontWeight: '600'},
+            ]}>
+            Hạn thanh toán:{' '}
+            <Text style={[styles.time, {color: displayConfig.timeColor}]}>
               {item.payment_term}
             </Text>
-          </View>
+          </Text>
         )}
-        
-      {displayConfig.showButton && (
+
+        {displayConfig.showButton && (
           <View style={styles.container_button}>
             <Button
-            marginRight={0}
+              marginRight={0}
               title="Thanh toán"
               textStyle={styles.text_button}
-              icon={(props) => <QrCodeIconButton width={16} height={16} />}
+              icon={props => <QrCodeIconButton width={16} height={16} />}
               backgroundColor={R.colors.buttonColorSel}
               textColor={R.colors.white}
               justifyContent="center"
               alignItems="center"
-              height={32}
-              borderRadius={8}
+              height={35}
+              borderRadius={10}
               paddingHorizontal={12}
+              marginVertical={5}
               iconSpacingHorizontal={4}
-                onPress={() => onPayPress?.(item)} 
+              onPress={() => onPayPress?.(item)}
             />
           </View>
         )}
-          
       </View>
     </View>
   );
@@ -82,59 +105,44 @@ const styles = StyleSheet.create({
     color: R.colors.black,
     fontSize: R.fontsize.fontsSize14,
     fontFamily: R.fonts.InterMedium,
-    fontWeight:'500',
-    lineHeight: 24,
+    fontWeight: '500',
   },
   sub_title: {
     color: R.colors.black,
     fontSize: R.fontsize.fontsSize12,
-    fontWeight: "300",
-    lineHeight: 24,
+    fontWeight: '300',
     fontFamily: R.fonts.InterRegular,
   },
   price_text: {
     color: R.colors.blue500,
     fontFamily: R.fonts.InterRegular,
-    fontWeight: "bold",
-    lineHeight: 24,
     fontSize: R.fontsize.fontsSize12,
   },
   code: {
     color: R.colors.black,
     fontFamily: R.fonts.InterRegular,
-    fontWeight: "bold",
-    lineHeight: 24,
     fontSize: R.fontsize.fontsSize12,
   },
   type_of_debt: {
     color: R.colors.black,
     fontFamily: R.fonts.InterRegular,
-    fontWeight: "bold",
-    lineHeight: 24,
     fontSize: R.fontsize.fontsSize12,
   },
   note: {
     color: R.colors.black,
     fontFamily: R.fonts.InterRegular,
-    fontWeight: "400",
-    lineHeight: 24,
     fontSize: R.fontsize.fontsSize12,
   },
   time: {
     color: R.colors.red,
     fontFamily: R.fonts.InterRegular,
-    fontWeight: "400",
-    lineHeight: 24,
     fontSize: R.fontsize.fontsSize12,
   },
-  container_content: {
-    flexDirection: "row", 
-  },
-  container_button:{
-  },
-  text_button:{
+
+  container_button: {},
+  text_button: {
     fontFamily: R.fonts.InterRegular,
-    fontWeight: "400",
+    fontWeight: '400',
     fontSize: R.fontsize.fontsSize12,
   },
 });

src/screens/debt/view.js

-import React, { useState } from "react";
+import React, {useState} from 'react';
 import {
   Text,
   SafeAreaView,
@@ -9,69 +9,82 @@ import {
   View,
   Image,
   TextInput,
-} from "react-native";
-import Header from "../../components/Header/Header";
-import I18n from "../../helper/i18/i18n";
-import R from "../../assets/R";
-import ItemList from "./item";
+} from 'react-native';
+import Header from '../../components/Header/Header';
+import I18n from '../../helper/i18/i18n';
+import R from '../../assets/R';
+import ItemList from './item';
 
-const DebtView = (props) => {
-  const { onTabChange, dataListStatus, dataListDebtItem, activeTab, timeDebt } =
-    props;
-    const IconSearch = R.images.icSearch
-  const renderTabViewItem = ({ item }) => {
+const DebtView = props => {
+  const {onTabChange, dataListStatus, dataListDebtItem, activeTab} = props;
+  const IconSearch = R.images.icSearch;
+  const renderTabViewItem = ({item}) => {
     const isActive = activeTab === item.key;
     return (
       <TouchableOpacity
         style={[styles.tab_button, isActive && styles.tabButtonActive]}
-        onPress={() => onTabChange(item.key)}
-      >
+        onPress={() => onTabChange(item.key)}>
         <Text
-          style={[styles.tabButtonText, isActive && styles.tabButtonTextActive]}
-        >
+          style={[
+            styles.tabButtonText,
+            isActive && styles.tabButtonTextActive,
+          ]}>
           {item.title_status}
         </Text>
       </TouchableOpacity>
     );
   };
-  const renderItem = ({ item }) => {
+  const renderItem = ({item}) => {
     return <ItemList item={item} onPayPress={props.onPayPress} />;
   };
   const filteredDebtItems = dataListDebtItem.filter(
-    (item) => item.status === activeTab
+    item => item.status === activeTab,
   );
 
   return (
     <View style={styles.container}>
-      <Header isBack title={I18n.t("Debt")} />
+      <Header isBack title={I18n.t('Debt')} />
 
       <View style={styles.tab_container}>
         <FlatList
           data={dataListStatus}
           renderItem={renderTabViewItem}
-          keyExtractor={(item) => item.key}
+          keyExtractor={item => item.key}
           horizontal
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.tab_scroll_content}
         />
       </View>
-      <View style={{ marginHorizontal: 15, flexDirection: "row", alignItems: "center", borderWidth: 1, borderColor: R.colors.gray400, borderRadius: 50, padding: 0, maxHeight: 40, paddingHorizontal: 10, marginVertical: 5 }}>
-        <IconSearch width={20} height={20} stroke={R.colors.gray400}/>
-        <TextInput
-          placeholder={"Tìm kiếm"}
-          style={styles.input}
-          placeholderTextColor={R.colors.gray400}
-          
-        />
+      <View
+        style={{
+          marginHorizontal: 15,
+          flexDirection: 'row',
+          alignItems: 'center',
+          borderWidth: 1,
+          borderColor: R.colors.gray400,
+          borderRadius: 50,
+          padding: 0,
+          height: 35,
+          paddingHorizontal: 10,
+          marginVertical: 10,
+        }}>
+        <IconSearch width={20} height={20} stroke={R.colors.gray400} />
+        <View style={{flex: 1}}>
+          <TextInput
+            placeholder={'Tìm kiếm'}
+            style={styles.input}
+            placeholderTextColor={R.colors.gray400}
+          />
+        </View>
       </View>
-    
+
       <Text style={styles.sub_text}>{props.timeDebt}</Text>
 
       <FlatList
         data={filteredDebtItems}
         renderItem={renderItem}
         showsVerticalScrollIndicator={false}
-        keyExtractor={(item) => item.id.toString()}
+        keyExtractor={item => item.id.toString()}
       />
     </View>
   );
@@ -85,50 +98,50 @@ const styles = StyleSheet.create({
     backgroundColor: R.colors.white,
   },
   input: {
-    height: 40,
-    paddingHorizontal: 10,
+    height: 35,
+    paddingHorizontal: 5,
+    paddingVertical: 0,
     fontFamily: R.fonts.InterRegular,
-    fontWeight: "400",
+    fontWeight: '400',
     color: R.colors.gray400,
     fontSize: R.fontsize.fontsSize12,
-    
   },
   tab_container: {
     marginHorizontal: 10,
-    justifyContent: "center",
+    justifyContent: 'center',
+    paddingVertical: 5,
   },
   tab_button: {
     marginHorizontal: 5,
     borderRadius: 15,
-    width:132,
+    width: 132,
     backgroundColor: R.colors.gray400,
-    alignItems: "center",
-    justifyContent:"center"
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   tabButtonActive: {
     backgroundColor: R.colors.blue500,
   },
   tabButtonText: {
     fontFamily: R.fonts.InterSemiBold,
-    fontWeight: "600",
+    fontWeight: '600',
     fontSize: R.fontsize.fontsSize12,
     color: R.colors.white,
   },
   tabButtonTextActive: {
     color: R.colors.white,
-    fontWeight: "600",
+    fontWeight: '600',
     fontFamily: R.fonts.InterSemiBold,
     fontSize: R.fontsize.fontsSize12,
   },
   tab_scroll_content: {
-    height: 28,
-    marginTop:5
+    height: 30,
   },
   sub_text: {
     color: R.colors.black,
     marginLeft: 15,
-    fontFamily: R.fonts.InterRegular,
-    fontWeight: "300",
+    fontFamily: R.fonts.InterMedium,
+    fontWeight: '600',
     fontSize: R.fontsize.fontsSize12,
   },
 });