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,

src/screens/incoming_document/detail/view.js

-import React, {useState} from 'react';
+import React from 'react';
 import {
   Text,
   View,
@@ -6,8 +6,8 @@ import {
   Image,
   ScrollView,
   FlatList,
-  Alert,
   Modal,
+  LogBox,
   TextInput,
 } from 'react-native';
 import R from '../../../assets/R';
@@ -20,17 +20,45 @@ 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);
-  const [showTaskModal, setShowTaskModal] = useState(false);
-  const [annotationContent, setAnnotationContent] = useState('');
-  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');
-  console.log(props);
+  const {
+    icomingDocument,
+    items,
+    dataList,
+    showModal,
+    setShowModal,
+    showTaskModal,
+    setShowTaskModal,
+    annotationContent,
+    setAnnotationContent,
+    taskTitle,
+    setTaskTitle,
+    taskDescription,
+    setTaskDescription,
+    taskCategory,
+    setTaskCategory,
+    taskDeadline,
+    setTaskDeadline,
+    taskFollower,
+    setTaskFollower,
+    taskExecutor,
+    setTaskExecutor,
+    selectedTags,
+    selectedFollowers,
+    selectedExecutors,
+    errors,
+    isSubmitting,
+    handleAddAnnotation,
+    handleCreateTask,
+    handleAddTag,
+    handleRemoveTag,
+    handleAddFollower,
+    handleRemoveFollower,
+    handleAddExecutor,
+    handleRemoveExecutor,
+  } = props;
+
+  LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
+
   const getColor = status => {
     switch (status) {
       case 'Hạn chế':
@@ -39,21 +67,12 @@ const DetailIncomingDocumentView = props => {
         return R.colors.blue;
     }
   };
-  const handleAddAnnotation = () => {
-    if (annotationContent.trim()) {
-      // Here you would typically call an API to save the annotation
-      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ê!');
-    }
-  };
+
   const renderItem = ({item}) => {
     console.log(item);
     return (
-      <View style={{marginVertical: 7.5}}>
-        <View style={{flexDirection: 'row', marginBottom: 5}}>
+      <View style={styles.renderItemContainer}>
+        <View style={styles.renderItemHeader}>
           <Text style={styles.text}>{item.author} - </Text>
           <Text style={styles.text}>{item.code} </Text>
           <Text style={styles.text}>{item.time} </Text>
@@ -65,19 +84,14 @@ const DetailIncomingDocumentView = props => {
       </View>
     );
   };
+
   const body = () => {
     return (
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={styles.body}>
           <Text style={styles.textSubTitle}>{icomingDocument.title}</Text>
-          <View style={{marginTop: 5}}></View>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              marginBottom: 5,
-            }}>
+          <View style={styles.marginTop5}></View>
+          <View style={styles.headerRow}>
             <Text style={styles.text_1}>
               Văn bản hiện có {icomingDocument.total_head_of_work} công việc
               liên {'\n'}quan
@@ -85,123 +99,84 @@ const DetailIncomingDocumentView = props => {
             <Text style={styles.text}>
               Chế độ:
               <Text
-                style={{
-                  fontWeight: '600',
-                  fontFamily: R.fonts.fontMedium,
-                  fontSize: R.fontsize.fontSizeContent,
-                  color: getColor(icomingDocument.status),
-                }}>
+                style={[
+                  styles.statusText,
+                  {color: getColor(icomingDocument.status)},
+                ]}>
                 {icomingDocument.status}
               </Text>
             </Text>
           </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              marginBottom: 5,
-            }}>
+          <View style={styles.infoRow}>
             <Text style={styles.text}>
-              Số ký hiệu:
+              Số ký hiệu:{' '}
               <Text style={styles.text_2}>{icomingDocument.symbol_number}</Text>
             </Text>
             <Text style={styles.text}>
-              Số vào sổ:
+              Số vào sổ:{' '}
               <Text style={styles.text_2}>
                 {icomingDocument.number_entry_book}
               </Text>
             </Text>
           </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              marginBottom: 5,
-            }}>
+          <View style={styles.infoRow}>
             <Text style={styles.text}>
-              Ngày đến:
+              Ngày đến:{' '}
               <Text style={styles.text_2}>{icomingDocument.term}</Text>
             </Text>
             <Text style={styles.text}>
-              Ngày văn bản:
+              Ngày văn bản:{' '}
               <Text style={styles.text_2}>{icomingDocument.term_display}</Text>
             </Text>
           </View>
-          <Text style={[styles.text, {marginBottom: 5}]}>
+          <Text style={[styles.text, styles.textWithMargin]}>
             Loại văn bản:
             <Text style={styles.text_2}>{icomingDocument.document_type}</Text>
           </Text>
-          <Text style={[styles.text, {marginBottom: 5}]}>
+          <Text style={[styles.text, styles.textWithMargin]}>
             Lĩnh vực văn bản:
             <Text style={styles.text_2}>{icomingDocument.field}</Text>
           </Text>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              marginBottom: 5,
-            }}>
+          <View style={styles.signerContainer}>
             <Text style={styles.text}>
-              Người ký:
+              Người ký:{' '}
               <Text style={styles.text_2}>{icomingDocument.signer_name}</Text>
             </Text>
             <Text style={styles.text}>
-              Đối tác gửi:
+              Đối tác gửi:{' '}
               <Text style={styles.text_2}>
                 {icomingDocument.sender_partner}
               </Text>
             </Text>
           </View>
           <TextMulti title="Ghi chú" />
-          <View style={{marginTop: 5}}></View>
-          <Text style={[styles.text, {marginBottom: 3}]}>Nội dung</Text>
-          <View style={[styles.containerContent, {marginBottom: 5}]}>
+          <View style={styles.marginTop5}></View>
+          <Text style={[styles.text, styles.textWithMargin]}>Nội dung</Text>
+          <View style={[styles.containerContent, styles.textWithMargin]}>
             <Text style={styles.text_2}>{icomingDocument.content}</Text>
           </View>
-          <Text style={[styles.text, {marginBottom: 5}]}>
+          <Text style={[styles.text, styles.textWithMargin]}>
             Ý kiến của BGH:
             <Text style={styles.text_2}>{icomingDocument.opinion_bgh}</Text>
           </Text>
-          <View
-            style={{
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              marginBottom: 5,
-            }}>
+          <View style={styles.departmentRow}>
             <Text style={styles.text}>Phòng ban nhận :</Text>
             {icomingDocument.received_departments.map((item, index) => {
               return (
                 <View style={styles.card}>
-                  <Text
-                    style={{
-                      color: R.colors.white,
-                      fontSize: R.fontsize.fontSizeContent,
-                    }}
-                    key={index}>
+                  <Text style={styles.cardText} key={index}>
                     {item.name}
                   </Text>
                 </View>
               );
             })}
           </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              marginBottom: 5,
-            }}>
+          <View style={styles.departmentRow}>
             <Text style={styles.text}>Nhóm nhận :</Text>
             {icomingDocument.received_group.map((item, index) => {
               return (
                 <View style={[styles.card, {backgroundColor: R.colors.blue}]}>
-                  <Text
-                    style={{
-                      color: R.colors.white,
-                      fontSize: R.fontsize.fontSizeContent,
-                    }}
-                    key={index}>
+                  <Text style={styles.cardText} key={index}>
                     {item.name}
                   </Text>
                 </View>
@@ -209,23 +184,12 @@ const DetailIncomingDocumentView = props => {
             })}
           </View>
 
-          <View
-            style={{
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-              marginBottom: 5,
-            }}>
+          <View style={styles.departmentRow}>
             <Text style={styles.text}>Người nhận :</Text>
             {icomingDocument.receiver.map((item, index) => {
               return (
                 <View style={[styles.card, {backgroundColor: R.colors.blue}]}>
-                  <Text
-                    style={{
-                      color: R.colors.white,
-                      fontSize: R.fontsize.fontSizeContent,
-                    }}
-                    key={index}>
+                  <Text style={styles.cardText} key={index}>
                     {item.name}
                   </Text>
                 </View>
@@ -243,7 +207,7 @@ const DetailIncomingDocumentView = props => {
             </Text>
             <Image
               source={R.images.icDownload}
-              style={{width: 20, height: 20}}
+              style={styles.downloadIcon}
               resizeMode="contain"
               tintColor={R.colors.blue}
             />
@@ -262,17 +226,7 @@ const DetailIncomingDocumentView = props => {
       </ScrollView>
     );
   };
-  const handleCreateTask = () => {
-    if (taskTitle.trim() && taskDescription.trim()) {
-      Alert.alert('Thành công', 'Đã tạo công việc thành công!');
-      setTaskTitle('');
-      setTaskDescription('');
-      setTaskDeadline('');
-      setShowTaskModal(false);
-    } else {
-      Alert.alert('Lỗi', 'Vui lòng nhập đầy đủ thông tin!');
-    }
-  };
+
   const renderItem_1 = ({item, onPress}) => {
     return (
       <View style={styles.chip}>
@@ -288,6 +242,7 @@ const DetailIncomingDocumentView = props => {
       </View>
     );
   };
+
   const openModal = () => {
     return (
       <Modal
@@ -331,6 +286,7 @@ const DetailIncomingDocumentView = props => {
       </Modal>
     );
   };
+
   const openTaskModal = () => {
     return (
       <Modal
@@ -339,7 +295,7 @@ const DetailIncomingDocumentView = props => {
         visible={showTaskModal}
         onRequestClose={() => setShowTaskModal(false)}>
         <View style={styles.modalOverlay}>
-          <View style={[styles.modalContainer, {maxHeight: '90%'}]}>
+          <View style={[styles.modalContainer, styles.modalContainerLarge]}>
             <View style={styles.modalHeader}>
               <Text style={styles.modalTitle}>Thêm công việc</Text>
             </View>
@@ -350,66 +306,48 @@ const DetailIncomingDocumentView = props => {
                 title="Tiêu đề"
                 fontSizeTitle={R.fontsize.fontSizeLabel}
                 required
-                placeholder="HS"
+                placeholder="Nhập tiêu đề công việc"
                 placeholderTextColor={R.colors.gray}
                 value={taskTitle}
                 onChangeText={setTaskTitle}
                 containerMarginBottom={10}
+                error={errors.taskTitle}
               />
 
               <TextMulti
                 title="Mô tả"
                 titleFontSize={R.fontsize.fontSizeLabel}
-                placeholder="Nhập mô tả..."
+                placeholder="Nhập mô tả công việc..."
                 placeholderTextColor={R.colors.gray}
                 multiline={true}
                 numberOfLines={3}
                 required
                 value={taskDescription}
                 onChangeText={setTaskDescription}
+                error={errors.taskDescription}
               />
               <View style={styles.containerDropdown}>
-                <Text
-                  style={[
-                    styles.text,
-                    {
-                      marginBottom: 3,
-                      fontSize: R.fontsize.fontSizeLabel,
-                      fontFamily: R.fonts.fontMedium,
-                      fontWeight: '600',
-                      color: R.colors.black,
-                    },
-                  ]}>
-                  Thẻ
-                </Text>
+                <Text style={[styles.text, styles.dropdownLabel]}>Thẻ</Text>
                 <Dropdown
                   height={35}
                   items={items}
-                  placeholder="Chọn tùy chọn"
-                  onSelect={item => console.log('Bạn đã chọn:', item)}
+                  placeholder="Chọn thẻ"
+                  onSelect={handleAddTag}
                 />
               </View>
-              <Text
-                style={[
-                  styles.text_2,
-                  {
-                    marginBottom: 3,
-                    fontSize: R.fontsize.fontSizeLabel,
-                    fontFamily: R.fonts.fontMedium,
-                    fontWeight: '600',
-                    color: R.colors.black,
-                  },
-                ]}>
+              <Text style={[styles.text_2, styles.dropdownLabel]}>
                 Danh sách thẻ đã chọn :
               </Text>
               <FlatList
-                data={dataList}
-                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+                data={selectedTags}
+                renderItem={({item}) =>
+                  renderItem_1({item, onPress: () => handleRemoveTag(item.id)})
+                }
                 keyExtractor={(item, index) =>
                   item.id?.toString() || index.toString()
                 }
                 numColumns={2}
-                style={{maxHeight: 150, marginBottom: 10}}
+                style={styles.flatListContainer}
                 showsVerticalScrollIndicator={true}
                 columnWrapperStyle={styles.flatListSelect}
                 nestedScrollEnabled={true}
@@ -419,101 +357,73 @@ const DetailIncomingDocumentView = props => {
                 title="Ngày đến hạn"
                 required
                 fontSizeTitle={R.fontsize.fontSizeLabel}
+                placeholder="DD/MM/YYYY"
                 value={taskDeadline}
                 onChangeText={setTaskDeadline}
+                error={errors.taskDeadline}
               />
 
               <View style={styles.containerDropdown}>
-                <Text
-                  style={[
-                    styles.text,
-                    {
-                      marginBottom: 3,
-                      fontSize: R.fontsize.fontSizeLabel,
-                      fontFamily: R.fonts.fontMedium,
-                      fontWeight: '600',
-                      color: R.colors.black,
-                    },
-                  ]}>
+                <Text style={[styles.text, styles.dropdownLabel]}>
                   Người theo dõi {''}
-                  <Text style={{color: R.colors.red}}>*</Text>
+                  <Text style={styles.redText}>*</Text>
                 </Text>
                 <Dropdown
                   height={35}
                   items={items}
-                  placeholder="Chọn tùy chọn"
-                  onSelect={item => console.log('Bạn đã chọn:', item)}
+                  placeholder="Chọn người theo dõi"
+                  onSelect={handleAddFollower}
                 />
               </View>
-              <Text
-                style={[
-                  styles.text_2,
-                  {
-                    marginBottom: 3,
-                    fontSize: R.fontsize.fontSizeLabel,
-                    fontFamily: R.fonts.fontMedium,
-                    fontWeight: '600',
-                    color: R.colors.black,
-                  },
-                ]}>
+              <Text style={[styles.text_2, styles.dropdownLabel]}>
                 Danh sách người theo dõi đã chọn :
               </Text>
               <FlatList
-                data={dataList}
-                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+                data={selectedFollowers}
+                renderItem={({item}) =>
+                  renderItem_1({
+                    item,
+                    onPress: () => handleRemoveFollower(item.id),
+                  })
+                }
                 keyExtractor={(item, index) =>
                   item.id?.toString() || index.toString()
                 }
                 numColumns={2}
-                style={{maxHeight: 150, marginBottom: 10}}
+                style={styles.flatListContainer}
                 showsVerticalScrollIndicator={true}
                 columnWrapperStyle={styles.flatListSelect}
                 nestedScrollEnabled={true}
                 scrollEnabled={true}
               />
               <View style={styles.containerDropdown}>
-                <Text
-                  style={[
-                    styles.text,
-                    {
-                      marginBottom: 3,
-                      fontSize: R.fontsize.fontSizeLabel,
-                      fontFamily: R.fonts.fontMedium,
-                      fontWeight: '600',
-                      color: R.colors.black,
-                    },
-                  ]}>
+                <Text style={[styles.text, styles.dropdownLabel]}>
                   Người thực hiện công việc{' '}
-                  <Text style={{color: R.colors.red}}>*</Text>
+                  <Text style={styles.redText}>*</Text>
                 </Text>
                 <Dropdown
                   height={35}
                   items={items}
-                  placeholder="Chọn tùy chọn"
-                  onSelect={item => console.log('Bạn đã chọn:', item)}
+                  placeholder="Chọn người thực hiện"
+                  onSelect={handleAddExecutor}
                 />
               </View>
-              <Text
-                style={[
-                  styles.text_2,
-                  {
-                    marginBottom: 3,
-                    fontSize: R.fontsize.fontSizeLabel,
-                    fontFamily: R.fonts.fontMedium,
-                    fontWeight: '600',
-                    color: R.colors.black,
-                  },
-                ]}>
+              <Text style={[styles.text_2, styles.dropdownLabel]}>
                 Danh sách người thực hiện công việc đã chọn :
               </Text>
               <FlatList
-                data={dataList}
-                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+                data={selectedExecutors}
+                renderItem={({item}) =>
+                  renderItem_1({
+                    item,
+                    onPress: () => handleRemoveExecutor(item.id),
+                  })
+                }
                 keyExtractor={(item, index) =>
                   item.id?.toString() || index.toString()
                 }
                 numColumns={2}
-                style={{maxHeight: 150, marginBottom: 10}}
+                style={styles.flatListContainer}
                 showsVerticalScrollIndicator={true}
                 columnWrapperStyle={styles.flatListSelect}
                 nestedScrollEnabled={true}
@@ -524,13 +434,22 @@ const DetailIncomingDocumentView = props => {
             <View style={styles.modalFooter}>
               <TouchableOpacity
                 style={[styles.button, styles.cancelButton]}
-                onPress={() => setShowTaskModal(false)}>
+                onPress={() => {
+                  setShowTaskModal(false);
+                }}>
                 <Text style={styles.cancelButtonText}>Hủy</Text>
               </TouchableOpacity>
               <TouchableOpacity
-                style={[styles.button, styles.submitButton]}
-                onPress={handleCreateTask}>
-                <Text style={styles.submitButtonText}>Thêm mới</Text>
+                style={[
+                  styles.button,
+                  styles.submitButton,
+                  isSubmitting && {opacity: 0.6},
+                ]}
+                onPress={handleCreateTask}
+                disabled={isSubmitting}>
+                <Text style={styles.submitButtonText}>
+                  {isSubmitting ? 'Đang tạo...' : 'Thêm mới'}
+                </Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -542,9 +461,9 @@ const DetailIncomingDocumentView = props => {
   return (
     <View style={styles.container}>
       <Header title={'Văn bản 2038475'} isBack />
-      <View style={{flex: 1}}>
+      <View style={styles.flex1}>
         {body()}
-        <View style={{marginHorizontal: 15}}>
+        <View style={styles.marginHorizontal15}>
           <FAB>
             <SubButton
               onPress={() => setShowModal(true)}