TODO: Đã hoàn thiện xong giao diện modal

src/screens/incoming_document/detail/style.js

@@ -74,7 +74,95 @@ const styles = StyleSheet.create({
       backgroundColor:R.colors.blue1,
       padding:10,
       width:300
-    }
+    },
+    //MODAL
+    modalOverlay: {
+        flex: 1,
+        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',
+      },
     
 })
 

src/screens/incoming_document/detail/view.js

-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   Text,
   View,
@@ -8,6 +8,8 @@ import {
   ScrollView,
   FlatList,
   Alert,
+  Modal,
+  TextInput,
 } from 'react-native';
 import R from '../../../assets/R';
 import styles from './style';
@@ -17,6 +19,8 @@ import FAB from '../../../components/FAB/fab';
 import SubButton from '../../../components/FAB/sub_button';
 const DetailIncomingDocumentView = props => {
   const {icomingDocument} = props;
+  const [showModal, setShowModal] = useState(false);
+  const [annotationContent, setAnnotationContent] = useState('');
   console.log(props);
   const getColor = status => {
     switch (status) {
@@ -26,6 +30,60 @@ 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 openModal = () => {
+    return (
+       <Modal
+       animationType="slide"
+       transparent={true}
+       visible={showModal}
+       onRequestClose={() => setShowModal(false)}>
+       <View style={styles.modalOverlay}>
+         <View style={styles.modalContainer}>
+           <View style={styles.modalHeader}>
+             <Text style={styles.modalTitle}>Thêm bút phê</Text>
+           </View>
+           <View style={styles.modalBody}>
+             <Text style={styles.inputLabel}>Bút phê</Text>
+             <TextInput
+               style={styles.textInput}
+               placeholder="Nhập nội dung bút phê..."
+               placeholderTextColor={R.colors.gray}
+               multiline={true}
+               numberOfLines={3}
+               textAlignVertical="top"
+               value={annotationContent}
+               onChangeText={setAnnotationContent}
+             />
+           </View>
+           
+           <View style={styles.modalFooter}>
+             <TouchableOpacity
+               style={[styles.button, styles.cancelButton]}
+               onPress={() => setShowModal(false)}>
+               <Text style={styles.cancelButtonText}>Hủy</Text>
+             </TouchableOpacity>
+             <TouchableOpacity
+               style={[styles.button, styles.submitButton]}
+               onPress={handleAddAnnotation}>
+               <Text style={styles.submitButtonText}>Thêm mới</Text>
+             </TouchableOpacity>
+           </View>
+         </View>
+       </View>
+     </Modal>
+    )
+  }
+
   const renderItem = ({item}) => {
     console.log(item);
     return (
@@ -232,7 +290,7 @@ const DetailIncomingDocumentView = props => {
         <View style={{marginHorizontal: 15}}>
           <FAB>
             <SubButton
-              onPress={() => Alert.alert('Pressed 1!')}
+              onPress={() => setShowModal(true)}
               label="Thêm bút phê"
               images={R.images.icEdit}
               backgroundColor={R.colors.orange}
@@ -246,8 +304,11 @@ const DetailIncomingDocumentView = props => {
           </FAB>
         </View>
       </View>
+{openModal()}
+     
     </View>
   );
 };
 
+
 export default DetailIncomingDocumentView;