TODO: Đã hoàn thiện giao diện tab_view

src/screens/incoming_document/index.js

-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import IncomingDocumentView from './view';
 
 const IncomingDocument = (props) => {
+    const [activeTab, setActiveTab] = useState("all")
+    const [dataListTabView, setDataListTabView] = useState([
+        {
+            key:"all",
+            title_status:"Tất cả",
+        },
+        {
+            key:"restrict",
+            title_status:"Đã hạn chế",
+        },
+        {
+            key:"public",
+            title_status:"Công khai"
+        }
+    ])
+
+    const handleTabKey = (tabKey) =>{
+        setActiveTab(tabKey)
+    }
+
+    const [dataList,setDataList] = useState([
+        {
+            id:'1',
+            title:'Văn bản thông báo lịch nộp thời khoá biểu của học kì 2 năm 2025',
+            symbol_number:'123456789',
+            term:'29/07/2025',
+            number_entry_book:'12493-fh544',
+            status:'restrict',
+            total_head_of_work:'12',
+        },
+        {
+            id:'2',
+            title:'Văn bản thông báo lịch nộp thời khoá biểu của học kì 2 năm 2025',
+            symbol_number:'123456789',
+            term:'29/07/2025',
+            number_entry_book:'12493-fh544',
+            status:'public',
+        },
+    ])
+
+    const [searchQuery, setSearchQuery] = useState("")
+
+    const filterData = dataList.filter((item) =>{
+        const matchTab = activeTab == 'all' || item.status == activeTab;
+        const matchSearch = item.title.toLowerCase().includes(searchQuery.toLowerCase());
+        return matchTab && matchSearch;
+    })
+
+    
+
+    
+
+
   return (
-    <IncomingDocumentView />
+    <IncomingDocumentView 
+        activeTab={activeTab}
+        dataListTabView={dataListTabView}
+        dataList={filterData}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        handleTabKey={handleTabKey}
+    />
   );
 };
 

src/screens/incoming_document/style.js

 import { StyleSheet, Text, View } from 'react-native'
 import React from 'react'
+import R from '../../assets/R'
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: R.colors.white,
+      },
+    body:{
+        flex:1,
+        backgroundColor:R.colors.white
+    }, 
+    cardTabView:{
+    },
+    itemTabView:{
+        width:110,
+        height:35,
+        borderRadius:10,
+        marginTop:10,
+        backgroundColor:R.colors.gray,
+        alignItems:'center',
+        justifyContent:'center',
+        marginLeft:15,
+    },
+    textTabView:{
+        fontSize:R.fontsize.fontSizeContent,
+        fontWeight:'400',
+        color:R.colors.black,
+        fontFamily:R.fonts.fontRegular,
+    },
+    activeTab:{
+        backgroundColor:R.colors.blue,
+    },
+    activeTabText:{
+        color:R.colors.white,
+        fontWeight:'500',
+    },
+    contentContainerStyle:{
+
+    },
+    card:{
+        borderWidth:1,
+        borderColor:R.colors.grayBorderInputTextHeader,
+        borderRadius:10,
+        padding:5,
+        marginTop:15,
+        marginBottom:15,
+        marginHorizontal:15,
+        alignItems:'center',
+        justifyContent:'center',
+
+        backgroundColor:R.colors.white,
+        shadowColor:R.colors.black,
+        shadowOffset:{width:0.5,height:2},
+        shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
+        shadowRadius:5,
+        elevation:Platform.OS === 'ios' ?  1 : 2,
+    },
+    btnCard:{
+        borderRadius:10,
+        borderWidth:1,
+        padding:5,
+        width:'100%',
+        alignItems:'center',
+        justifyContent:'center',
+        borderColor:R.colors.grayBorderInputTextHeader,
+    },
+    text:{
+        fontSize:R.sizes.sm,
+        color:R.colors.black,
+        fontFamily:R.fonts.fontRegular,
+        fontWeight:'400',
+    },
+})
 export default styles
\ No newline at end of file

src/screens/incoming_document/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import {Text, View, TouchableOpacity, StyleSheet, FlatList} from 'react-native';
+import styles from './style';
+import Header from '../../components/Header/Header';
+const IncomingDocumentView = props => {
+  const {
+    activeTab,
+    dataListTabView,
+    dataList,
+    searchQuery,
+    setSearchQuery,
+    handleTabKey,
+  } = props;
 
-const IncomingDocumentView = (props) => {
-  const {  } = props;
+  const itemTabView = ({item, index}) => {
+    const isActive = item.key === activeTab;
     return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <TouchableOpacity>
-        <Text>IncomingDocument</Text>
+      <TouchableOpacity
+        style={[styles.itemTabView, isActive ? styles.activeTab : null]}
+        onPress={() => handleTabKey && handleTabKey(item.key)}>
+        <Text
+          style={[styles.textTabView, isActive ? styles.activeTabText : null]}>
+          {item.title_status}
+        </Text>
       </TouchableOpacity>
+    );
+  };
+
+  
+
+  return (
+    <View style={styles.container}>
+      <Header title={'Danh sách văn bản đến'} isBack />
+      <View style={styles.body}>
+        <View style={styles.cardTabView}>
+          <FlatList
+            data={dataListTabView}
+            renderItem={itemTabView}
+            keyExtractor={item => item.key}
+            horizontal
+            contentContainerStyle={styles.contentContainerStyle}
+            showsHorizontalScrollIndicator={false}
+          />
+        </View>
+
+        <View style={styles.card}>
+          <TouchableOpacity style={styles.btnCard}>
+            <Text style={styles.text}>Khoá 2024</Text>
+          </TouchableOpacity>
+        </View>
+
+
+      </View>
     </View>
   );
 };
 
 export default IncomingDocumentView;
-
-const styles = StyleSheet.create({})
\ No newline at end of file