TODO: Đã hoàn thiện chi tiết văn bản đi

src/routers/StackNavigation.js

@@ -25,6 +25,7 @@ import DetailIncomingDocument from '../screens/incoming_document/detail';
 import ListSendDocument from '../screens/list_send_document';
 import EditSendDocument from '../screens/list_send_document/edit';
 import AddSendDocument from '../screens/list_send_document/add';
+import DetailSendDocument from '../screens/list_send_document/detail';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -58,6 +59,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.LISTSENDDOCUMENT} component={ListSendDocument}/>
       <Stack.Screen name={ScreenName.EDITSENDDOCUMENT} component={EditSendDocument}/>
       <Stack.Screen name={ScreenName.ADDSENDOCUMENT} component={AddSendDocument}/>
+      <Stack.Screen name={ScreenName.DETAILSENDDOCUMENT} component={DetailSendDocument}/>
     </Stack.Navigator>
   );
 }

src/screens/incoming_document/detail/view.js

-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import {
   Text,
   View,
   TouchableOpacity,
-  StyleSheet,
   Image,
   ScrollView,
   FlatList,
@@ -19,6 +18,7 @@ import FAB from '../../../components/FAB/fab';
 import SubButton from '../../../components/FAB/sub_button';
 import TextField from '../../../components/Input/TextField';
 import Dropdown from '../../../components/DropdownAlert/Dropdown';
+
 const DetailIncomingDocumentView = props => {
   const {icomingDocument, items, dataList} = props;
   const [showModal, setShowModal] = useState(false);
@@ -38,7 +38,7 @@ const DetailIncomingDocumentView = props => {
       case 'Công khai':
         return R.colors.blue;
     }
-  };
+  };  
   const handleAddAnnotation = () => {
     if (annotationContent.trim()) {
       // Here you would typically call an API to save the annotation

src/screens/list_send_document/detail/index.js

-import React from 'react';
+import React , { useState } from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import DetailSendDocumentView from './view';
 
-const DetailSendDocument = (props) => {
-  return (
-    <DetailSendDocumentView />
-  );
+const DetailSendDocument = props => {
+  const [icomingDocument, setIncomingDocument] = useState({
+    id: 102934,
+    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',
+    status: 'Hạn chế',
+    symbol_number: '2038475',
+    regime:'Đã phê duyệt    ',
+    number_entry_book: '12493-fh544',
+    term: '29/07/2025',
+    term_display: '09/07/2025',
+    document_date: '2025-07-08',
+    document_date_display: '08/07/2025',
+    document_type: 'Hành chính',
+    field: 'Thời khoá biểu',
+    signer_name: 'Nguyễn Minh Đức',
+    sender_partner: 'Võ Công Bình',
+    note: '',
+    content:
+      'Ban lãnh đạo yêu cầu hoàn thành thời khoá biểu trong tháng cho các đơn vị chuyên môn, nộp đầy đủ công việc theo đúng kế hoạch.',
+    opinion_bgh: 'Thực hiện nhanh công tác thời khoá biểu',
+    received_departments: [
+      {id: 1, name: 'Phòng đào tạo'},
+      {id: 2, name: 'Phòng đào tạo'},
+    ],
+    received_group: [{id: 12, name: 'Nhóm chuyên môn đào tạo'}],
+    receiver: [{id: 55, name: 'Nguyễn Minh Đức'}],
+    attachments: [
+      {
+        id: '001247363',
+        filename: 'Quyết định thông báo đào tạo - 001247363',
+        file_ext: 'pdf',
+        file_size: 0,
+        download_url: '#',
+        preview_url: '#',
+      },
+    ],
+    total_head_of_work: 7,
+    approvals: [
+      {
+        author: 'Bút Tiến Công',
+        code: '08569',
+        date: '29/07/2025',
+        time: '16:00',
+        content:
+          'Ban lãnh đạo yêu cầu hoàn thành thời khoá biểu trong tháng cho các đơn vị chuyên môn, nộp đầy đủ công việc theo đúng kế hoạch.',
+      },
+      {
+        author: 'Nguyễn Thị Kim Phụng',
+        code: '08569',
+        date: '29/07/2025',
+        time: '16:00',
+        content: 'Trưởng phòng xác nhận hợp bộ hồ sơ.',
+      },
+      {
+        author: 'Đặng Duy Minh',
+        code: '08569',
+        date: '29/07/2025',
+        time: '16:00',
+        content: 'Trưởng phòng nhập công bố quyết định nội bộ.',
+      },
+    ],
+    actions: {
+      can_create_task: true,
+      create_task_label: 'Tạo công việc',
+    },
+  });
+  const items = [
+    {id: 1, label: 'Option 1'},
+    {id: 2, label: 'Option 2'},
+    {id: 3, label: 'Option 3'},
+  ];
+  const [dataList, setDataList] = useState([
+    {id: 1, name: 'Nguyễn Minh Đức'},
+    {id: 2, name: 'Trần Văn Hùng'},
+    {id: 3, name: 'Lê Thị Mai'},
+    {id: 4, name: 'Phạm Quốc Khánh'},
+    {id: 5, name: 'Hoàng Anh Tuấn'},
+    {id: 6, name: 'Vũ Thị Hằng'},
+    {id: 7, name: 'Ngô Văn Nam'},
+    {id: 8, name: 'Đinh Thị Lan'},
+    {id: 9, name: 'Bùi Văn Phúc'},
+    {id: 10, name: 'Lý Thị Hoa'},
+    {id: 11, name: 'Phan Minh Hoàng'},
+    {id: 12, name: 'Tạ Thị Hương'},
+    {id: 13, name: 'Đoàn Văn Dũng'},
+    {id: 14, name: 'Nguyễn Thị Vân'},
+    {id: 15, name: 'Trương Văn Long'},
+    {id: 16, name: 'Mai Thị Ngọc'},
+    {id: 17, name: 'Huỳnh Quốc Việt'},
+    {id: 18, name: 'Lâm Thị Thu'},
+    {id: 19, name: 'Nguyễn Hữu Tài'},
+    {id: 20, name: 'Phạm Thị Kim'},
+  ]);
+  return <DetailSendDocumentView 
+    items={items}
+    icomingDocument={icomingDocument}
+    dataList={dataList}
+  />;
 };
 
 export default DetailSendDocument;

src/screens/list_send_document/detail/style.js

 import { StyleSheet, Text, View } from 'react-native'
 import React from 'react'
+import R from '../../../assets/R'
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: R.colors.white
     },
-    body: {
+   body:{
+        flex:1,
+        backgroundColor:R.colors.white,
+        marginHorizontal:15,
+        marginVertical:10
+    },
+    textSubTitle:{
+        fontSize:R.fontsize.fontSizeSubTitle,
+        fontWeight:'600',
+        fontFamily:R.fonts.fontMedium,
+        color:R.colors.black,
+    },
+    text_1:{
+        fontSize:R.fontsize.fontSizeContent,
+        fontWeight:'400',
+        fontFamily:R.fonts.fontRegular,
+        color:R.colors.blue,
+    },
+    text:{
+        fontSize:R.fontsize.fontSizeContent,
+        fontWeight:'600',
+        fontFamily:R.fonts.fontMedium,
+        color:R.colors.black,
+    },
+    text_2:{
+        fontSize:R.fontsize.fontSizeContent,
+        fontWeight:'400',
+        fontFamily:R.fonts.fontRegular,
+        color:R.colors.black,
+    },
+    textBtn:{
+      color:R.colors.black,
+      fontSize:R.sizes.xs,
+      fontWeight:'400',
+      fontFamily:R.fonts.fontRegular,
+    },
+    containerContent:{
+        padding:10,
+        borderRadius:10,
+        borderWidth:1,
+        borderColor:R.colors.grayBorderInputTextHeader,
+    },
+    cardContainerContent:{
+        backgroundColor:R.colors.white,
+        padding:10,
+        borderRadius:10,
+        borderWidth:1,
+        borderColor:R.colors.grayBorderInputTextHeader,
+    },
+    card:{
+        borderWidth:1,
+        borderColor:R.colors.grayBorderInputTextHeader,
+        borderRadius:100,
+        padding:10,
+        alignSelf:'flex-start',
+        backgroundColor:R.colors.orange,
+        marginHorizontal:5,
+    },
+    containerBtn:{
+      flexDirection:'row',
+      alignItems:'center',
+      justifyContent:'space-around',
+      marginVertical:10,
+      borderRadius:10,
+      backgroundColor:R.colors.blue1,
+      padding:10,
+      width:300
+    },
+    //MODAL Thêm Bút Phê
+    modalOverlay: {
         flex: 1,
-        backgroundColor: R.colors.white
-    }
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      modalContainer: {
+        backgroundColor: 'white',
+        borderRadius: 10,
+        width: '90%',
+        maxHeight: '80%',
+      },
+      modalHeader: {
+        flexDirection: 'row',
+        justifyContent:'center',
+        alignItems:'center',
+        padding: 10,
+      },
+      modalTitle: {
+        fontSize: R.fontsize.fontsSizeTitle,
+        fontWeight: '600',
+        fontFamily:R.fonts.fontMedium,
+        color: R.colors.blue,
+      },
+      closeButton: {
+        width: 30,
+        height: 30,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      closeButtonText: {
+        fontSize: R.fontsize.fontSizeContent,
+        color: R.colors.gray,
+        fontWeight: 'bold',
+      },
+      modalBody: {
+         paddingHorizontal:15
+      },
+      inputLabel: {
+        fontSize: R.fontsize.fontSizeSubTitle,
+        color: R.colors.black,
+        marginBottom: 3,
+        fontWeight: '400',
+        fontFamily:R.fonts.fontRegular,
+      },
+      textInput: {
+        borderWidth: 1,
+        borderColor: R.colors.grayBorderInputTextHeader,
+        borderRadius: 8,
+        padding: 12,
+        fontSize: R.fontsize.fontSizeContent,
+        color: R.colors.black,
+        minHeight: 120,
+        textAlignVertical: 'top',
+      },
+      modalFooter: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        padding:15,
+      },
+      button: {
+        paddingHorizontal: 20,
+        paddingVertical: 3,
+        borderRadius: 30,
+        width: 110,
+        alignItems: 'center',
+        justifyContent:'center',
+      },
+      cancelButton: {
+        backgroundColor: R.colors.orange,
+        marginRight:10,
+      },
+      cancelButtonText: {
+        color: R.colors.white,
+        fontSize: R.fontsize.fontSizeContent,
+        fontFamily:R.fonts.fontRegular,
+        fontWeight: '400',
+      },
+      submitButton: {
+        backgroundColor: R.colors.blue,
+      },
+      submitButtonText: {
+        color: 'white',
+        fontSize: R.fontsize.fontSizeContent,
+        fontFamily:R.fonts.fontRegular,
+        fontWeight: '400',
+      },
+      //MODAL Thêm công việc
+      containerDropdown:{
+        marginBottom:10,
+        marginTop:10,
+        position: 'relative', 
+        zIndex: 1000
+      },
+      chip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        // position: 'relative',
+        paddingLeft: 10,
+        paddingRight:10,
+        height: 25,
+        borderRadius: 10,
+        marginBottom:10,
+        marginRight:5,
+        backgroundColor: R.colors.blue2,
+        alignSelf:'flex-start'
+      },
+      imageIcon: {
+        width: 15,
+        height: 15,
+      },
+      containerIcon: {
+        marginRight: 2,
+      },
+     
+      flatListSelect:{
+        flexDirection:'row',
+        flexWrap:'wrap',
+      },
+      textChip:{
+        fontSize: R.fontsize.fontSizeContent,
+        fontWeight: '400',
+        fontFamily:R.fonts.fontRegular,
+        color:R.colors.blueTextChip,
+      }
 })
 
 export default styles
\ No newline at end of file

src/screens/list_send_document/view.js

@@ -135,7 +135,7 @@ const ListSendView = (props) => {
           <View style={{flex: 0.1}}></View>
           <Button
             title="Chi tiết"
-            onPress={() => navigation.navigate(ScreenName.DETAILINCOMINGDOCUMENT)}
+            onPress={() => navigation.navigate(ScreenName.DETAILSENDDOCUMENT)}
             backgroundColor={R.colors.blue}
             textColor={R.colors.white}
             height={25}