TODO: Đã hoàn thiện giao diện danh sách văn bản đến

src/components/DropdownAlert/Dropdown.js

@@ -9,7 +9,7 @@ import {
   ScrollView,
 } from 'react-native';
 import R from '../../assets/R';
-const Dropdown = ({items, placeholder = 'Chọn...', onSelect}) => {
+const Dropdown = ({items, placeholder = 'Chọn...', onSelect, height}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState(null);
 
@@ -20,10 +20,10 @@ const Dropdown = ({items, placeholder = 'Chọn...', onSelect}) => {
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container]}>
       {/* Nút hiển thị */}
       <TouchableOpacity
-        style={styles.dropdownHeader}
+        style={[styles.dropdownHeader,{height:height}]}
         onPress={() => setIsOpen(!isOpen)}>
         <Text style={styles.dropdownHeaderText}>
           {selected ? selected.label : placeholder}

src/screens/incoming_document/index.js

@@ -30,7 +30,7 @@ const IncomingDocument = (props) => {
             symbol_number:'123456789',
             term:'29/07/2025',
             number_entry_book:'12493-fh544',
-            status:'restrict',
+            status:'Hạn chế',
             total_head_of_work:'12',
         },
         {
@@ -39,7 +39,7 @@ const IncomingDocument = (props) => {
             symbol_number:'123456789',
             term:'29/07/2025',
             number_entry_book:'12493-fh544',
-            status:'public',
+            status:'Công khai',
         },
     ])
 

src/screens/incoming_document/style.js

@@ -72,5 +72,46 @@ const styles = StyleSheet.create({
         fontFamily:R.fonts.fontRegular,
         fontWeight:'400',
     },
+    box_3:{
+        flexDirection:'row',
+        marginHorizontal:15,
+        alignItems:'center',
+    },
+    searchBox:{
+        flex:1,
+        borderWidth:1,
+        borderColor:R.colors.grayBorderInputTextHeader,
+        borderRadius:20,
+        alignItems:'center',
+        justifyContent:'flex-start',
+        paddingLeft:15,
+        flexDirection:'row',
+        height:42
+    },
+    boxFilter:{
+        flex:1,
+    },
+    cardIncomingDocument:{
+        borderRadius:10,
+        padding:10,
+        marginHorizontal:15,
+        marginVertical:7.5,
+        backgroundColor:R.colors.white,
+        shadowColor:R.colors.black,
+        shadowOffset:{width:0.5,height:2},
+        shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
+        elevation:Platform.OS === 'ios' ?  1 : 2,
+    },
+    textSubTitle:{
+        fontSize:R.fontsize.fontSizeContent,
+        fontWeight:'500',
+        fontFamily:R.fonts.fontSemiBold,
+        color:R.colors.black,
+    },
+    text:{
+        fontSize:R.fontsize.fontSizeContent,
+        fontWeight:'400',
+        fontFamily:R.fonts.fontRegular,
+    }
 })
 export default styles
\ No newline at end of file

src/screens/incoming_document/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet, FlatList} from 'react-native';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  FlatList,
+  Image,
+  TextInput,
+} from 'react-native';
 import styles from './style';
 import Header from '../../components/Header/Header';
+import Dropdown from '../../components/DropdownAlert/Dropdown';
+import TextField from '../../components/Input/TextField';
+import R from '../../assets/R';
+import Button from '../../components/Button';
 const IncomingDocumentView = props => {
   const {
     activeTab,
@@ -11,6 +23,17 @@ const IncomingDocumentView = props => {
     setSearchQuery,
     handleTabKey,
   } = props;
+  const getColor = status => {
+    switch (status) {
+      case 'Hạn chế':
+        return R.colors.brown;
+      case 'Công khai':
+        return R.colors.blue;
+    }
+  };
+
+  const hasRelatedWork = n => Number(n) > 0;
+  const getHiddenButton = n => (hasRelatedWork(n) ? true : false);
 
   const itemTabView = ({item, index}) => {
     const isActive = item.key === activeTab;
@@ -26,7 +49,81 @@ const IncomingDocumentView = props => {
     );
   };
 
+  const renderItemIncomingDocument = ({item}) => {
+    const showRelatedWork = getHiddenButton(item?.total_head_of_work);
+    return (
+      <View style={styles.cardIncomingDocument}>
+        <Text style={styles.textSubTitle}>{item.title}</Text>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Text style={styles.textSubTitle}>Số ký hiệu:{" "}
+            <Text style={styles.text}>{item.symbol_number}</Text>
+            </Text>
+          <Text style={styles.textSubTitle}>Số vào sổ:{" "}
+            <Text style={styles.text}>{item.number_entry_book}</Text>
+            </Text>
+        </View>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Text style={styles.textSubTitle}>Ngày đến:{" "}
+            <Text style={styles.text}>{item.term}</Text>
+            </Text>
+          <Text style={styles.textSubTitle}>
+            Chế độ:{" "}
+            <Text style={[{color: getColor(item.status)}]}>{item.status}</Text>
+          </Text>
+        </View>
+        <Text style={{alignSelf: 'flex-start', color: R.colors.blue}}>
+          Văn bản hiện có {item.total_head_of_work || 0} công việc liên quan
+        </Text>
+
+        <View
+          style={{
+            flexDirection: 'row',
+            alignSelf: 'flex-end',
+            marginVertical: 5,
+          }}>
+          {showRelatedWork && (
+            <Button
+              title="Công việc"
+              onPress={() => {}}
+              backgroundColor={R.colors.brown}
+              textColor={R.colors.white}
+              height={25}
+              borderRadius={15}
+              fontSize={11}
+              fontWeight={'600'}
+              fontFamily={R.fonts.fontMedium}
+              paddingHorizontal={15}
+            />
+          )}
+          <View style={{flex: 0.1}}></View>
+          <Button
+            title="Chi tiết"
+            onPress={() => {}}
+            backgroundColor={R.colors.blue}
+            textColor={R.colors.white}
+            height={25}
+            width={90}
+            borderRadius={15}
+            fontSize={11}
+            fontWeight={'600'}
+            fontFamily={R.fonts.fontMedium}
+            paddingHorizontal={15}
+          />
+        </View>
+      </View>
+    );
+  };
 
+  const renderListIncomingDocument = () => {
+    return (
+      <FlatList
+        data={dataList}
+        renderItem={renderItemIncomingDocument}
+        keyExtractor={item => item.id.toString()}
+        showsVerticalScrollIndicator={false}
+      />
+    );
+  };
 
   return (
     <View style={styles.container}>
@@ -43,13 +140,39 @@ const IncomingDocumentView = props => {
           />
         </View>
 
+        <View style={{marginBottom: 15}}>
           <View style={styles.card}>
             <TouchableOpacity style={styles.btnCard}>
-            <Text style={styles.text}>Khoá 2024</Text>
+              <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
             </TouchableOpacity>
           </View>
 
+          <View style={styles.box_3}>
+            <View style={styles.searchBox}>
+              <Image
+                source={R.images.icSearch}
+                style={{width: 20, height: 20}}
+              />
+              <View style={{flex:1}}>
+              <TextInput
+                placeholder="Tìm kiếm"
+                style={styles.text}
+                value={searchQuery}
+                onChangeText={setSearchQuery}
+              />
+              </View>
+             
+         
+            </View>
+            <View style={{flex: 0.1}}></View>
+
+            <View style={styles.boxFilter}>
+              <Dropdown title={'Tìm kiếm'} height={40}/>
+            </View>
+          </View>
+        </View>
 
+        {renderListIncomingDocument()}
       </View>
     </View>
   );