TODO: Bổ sung chức năng văn bản đi

src/screens/incoming_document/detail/index.js

 import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
+import {Text, View, StyleSheet, Alert} from 'react-native';
 import DetailIncomingDocumentView from './view';
 
 const DetailIncomingDocument = props => {
+  // Document data
   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',
@@ -67,11 +68,14 @@ const DetailIncomingDocument = props => {
       create_task_label: 'Tạo công việc',
     },
   });
+
+  // Dropdown data
   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'},
@@ -94,11 +98,177 @@ const DetailIncomingDocument = props => {
     {id: 19, name: 'Nguyễn Hữu Tài'},
     {id: 20, name: 'Phạm Thị Kim'},
   ]);
+
+  // Modal states
+  const [showModal, setShowModal] = useState(false);
+  const [showTaskModal, setShowTaskModal] = useState(false);
+  
+  // Annotation form states
+  const [annotationContent, setAnnotationContent] = useState('');
+  
+  // Task form states
+  const [taskTitle, setTaskTitle] = useState('');
+  const [taskDescription, setTaskDescription] = useState('');
+  const [taskCategory, setTaskCategory] = useState('Công việc theo văn bản');
+  const [taskDeadline, setTaskDeadline] = useState('');
+  const [taskFollower, setTaskFollower] = useState('859256, Nguyễn Minh Đức');
+  const [taskExecutor, setTaskExecutor] = useState('859256, Nguyễn Minh Đức');
+  const [selectedTags, setSelectedTags] = useState([]);
+  const [selectedFollowers, setSelectedFollowers] = useState([]);
+  const [selectedExecutors, setSelectedExecutors] = useState([]);
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Form validation function
+  const validateForm = () => {
+    const newErrors = {};
+    if (!taskTitle.trim()) {
+      newErrors.taskTitle = 'Tiêu đề không được để trống';
+    }
+    if (!taskDescription.trim()) {
+      newErrors.taskDescription = 'Mô tả không được để trống';
+    }
+    if (!taskDeadline.trim()) {
+      newErrors.taskDeadline = 'Ngày đến hạn không được để trống';
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  // Annotation handlers
+  const handleAddAnnotation = () => {
+    if (annotationContent.trim()) {
+      Alert.alert('Thành công', 'Đã thêm bút phê thành công!');
+      setAnnotationContent('');
+      setShowModal(false);
+    } else {
+      Alert.alert('Lỗi', 'Vui lòng nhập nội dung bút phê!');
+    }
+  };
+
+  // Task handlers
+  const handleCreateTask = () => {
+    if (!validateForm()) {
+      Alert.alert('Lỗi', 'Vui lòng nhập đầy đủ thông tin!');
+      return;
+    }
+    
+    setIsSubmitting(true);
+    
+    try {
+      const taskData = {
+        title: taskTitle,
+        description: taskDescription,
+        category: taskCategory,
+        deadline: taskDeadline,
+        tags: selectedTags,
+        followers: selectedFollowers,
+        executors: selectedExecutors,
+      };
+      
+      console.log('Creating task:', taskData);
+      
+      Alert.alert('Thành công', 'Đã tạo công việc thành công!');
+      
+      // Reset form after successful creation
+      setTaskTitle('');
+      setTaskDescription('');
+      setTaskDeadline('');
+      setSelectedTags([]);
+      setSelectedFollowers([]);
+      setSelectedExecutors([]);
+      setErrors({});
+      setShowTaskModal(false);
+    } catch (error) {
+      Alert.alert('Lỗi', 'Có lỗi xảy ra khi tạo công việc!');
+      console.error('Error creating task:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Tag selection handlers
+  const handleAddTag = item => {
+    if (!selectedTags.find(t => t.id === item.id)) {
+      setSelectedTags([...selectedTags, item]);
+    }
+  };
+
+  const handleRemoveTag = id => {
+    setSelectedTags(selectedTags.filter(item => item.id !== id));
+  };
+
+  // Follower selection handlers
+  const handleAddFollower = item => {
+    if (!selectedFollowers.find(f => f.id === item.id)) {
+      setSelectedFollowers([...selectedFollowers, item]);
+    }
+  };
+
+  const handleRemoveFollower = id => {
+    setSelectedFollowers(selectedFollowers.filter(item => item.id !== id));
+  };
+
+  // Executor selection handlers
+  const handleAddExecutor = item => {
+    if (!selectedExecutors.find(e => e.id === item.id)) {
+      setSelectedExecutors([...selectedExecutors, item]);
+    }
+  };
+
+  const handleRemoveExecutor = id => {
+    setSelectedExecutors(selectedExecutors.filter(item => item.id !== id));
+  };
+
   return (
     <DetailIncomingDocumentView
+      // Data props
       items={items}
       icomingDocument={icomingDocument}
       dataList={dataList}
+      
+      // Modal states
+      showModal={showModal}
+      setShowModal={setShowModal}
+      showTaskModal={showTaskModal}
+      setShowTaskModal={setShowTaskModal}
+      
+      // Annotation states
+      annotationContent={annotationContent}
+      setAnnotationContent={setAnnotationContent}
+      
+      // Task form states
+      taskTitle={taskTitle}
+      setTaskTitle={setTaskTitle}
+      taskDescription={taskDescription}
+      setTaskDescription={setTaskDescription}
+      taskCategory={taskCategory}
+      setTaskCategory={setTaskCategory}
+      taskDeadline={taskDeadline}
+      setTaskDeadline={setTaskDeadline}
+      taskFollower={taskFollower}
+      setTaskFollower={setTaskFollower}
+      taskExecutor={taskExecutor}
+      setTaskExecutor={setTaskExecutor}
+      
+      // Selection states
+      selectedTags={selectedTags}
+      selectedFollowers={selectedFollowers}
+      selectedExecutors={selectedExecutors}
+      
+      // Form validation
+      errors={errors}
+      isSubmitting={isSubmitting}
+      
+      // Handlers
+      handleAddAnnotation={handleAddAnnotation}
+      handleCreateTask={handleCreateTask}
+      handleAddTag={handleAddTag}
+      handleRemoveTag={handleRemoveTag}
+      handleAddFollower={handleAddFollower}
+      handleRemoveFollower={handleRemoveFollower}
+      handleAddExecutor={handleAddExecutor}
+      handleRemoveExecutor={handleRemoveExecutor}
     />
   );
 };

src/screens/incoming_document/detail/style.js

@@ -60,8 +60,10 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: R.colors.grayBorderInputTextHeader,
     borderRadius: 100,
-    padding: 10,
+    height: 30,
+    justifyContent: 'center',
     alignSelf: 'flex-start',
+    paddingHorizontal: 10,
     backgroundColor: R.colors.orange,
     marginHorizontal: 5,
   },
@@ -75,6 +77,77 @@ const styles = StyleSheet.create({
     padding: 10,
     width: 300,
   },
+  // New styles for inline replacements
+  marginTop5: {
+    marginTop: 5,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  statusText: {
+    fontWeight: '600',
+    fontFamily: R.fonts.fontMedium,
+    fontSize: R.fontsize.fontSizeContent,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 5,
+  },
+  textWithMargin: {
+    marginBottom: 5,
+  },
+  signerContainer: {
+    justifyContent: 'space-between',
+    marginBottom: 5,
+  },
+  departmentRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  cardText: {
+    color: R.colors.white,
+    fontSize: R.fontsize.fontSizeContent,
+  },
+  downloadIcon: {
+    width: 20,
+    height: 20,
+  },
+  flex1: {
+    flex: 1,
+  },
+  marginHorizontal15: {
+    marginHorizontal: 15,
+  },
+  renderItemContainer: {
+    marginVertical: 7.5,
+  },
+  renderItemHeader: {
+    flexDirection: 'row',
+    marginBottom: 5,
+  },
+  modalContainerLarge: {
+    maxHeight: '90%',
+  },
+  dropdownLabel: {
+    marginBottom: 3,
+    fontSize: R.fontsize.fontSizeLabel,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
+    color: R.colors.black,
+  },
+  flatListContainer: {
+    maxHeight: 150,
+    marginBottom: 10,
+  },
+  redText: {
+    color: R.colors.red,
+  },
   //MODAL Thêm Bút Phê
   modalOverlay: {
     flex: 1,