TODO: Bổ sung chức năng hiển thị FAB theo trạng thái

src/components/EditReportModal/index.js

+import EditReportModal from './view';
+
+export default EditReportModal;

src/components/EditReportModal/view.js

+import React, {useState} from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+} from 'react-native';
+import R from '../../assets/R';
+
+const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
+  const [reportContent, setReportContent] = useState(initialContent);
+
+  const handleSubmit = () => {
+    if (reportContent.trim()) {
+      onSubmit(reportContent);
+      onClose();
+    }
+  };
+
+  const handleCancel = () => {
+    setReportContent(initialContent);
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType="slide"
+      onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <View style={styles.modalContainer}>
+          <Text style={styles.title}>Chỉnh sửa báo cáo</Text>
+          
+          <Text style={styles.description}>
+            Bạn đã nộp yêu cầu nhưng thành thời khoa chưa trong
+            thông cho cần đánh giá môn học các công việc và
+            lịch hẹn quan
+          </Text>
+
+          <Text style={styles.label}>Tài liệu đính kèm</Text>
+          <View style={styles.attachedFileContainer}>
+            <Text style={styles.fileName}>
+              Quyết định thông báo đào tạo - QD347583
+            </Text>
+            <TouchableOpacity>
+              <Image source={R.images.icDelete} style={styles.deleteIcon} />
+            </TouchableOpacity>
+          </View>
+
+          <TouchableOpacity style={styles.attachmentContainer}>
+            <Image source={R.images.icUpload} style={styles.uploadIcon} />
+            <Text style={styles.attachmentText}>Thêm tài liệu</Text>
+          </TouchableOpacity>
+
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity style={styles.cancelButton} onPress={handleCancel}>
+              <Text style={styles.cancelButtonText}>Hủy</Text>
+            </TouchableOpacity>
+            <TouchableOpacity 
+              style={styles.submitButton} 
+              onPress={handleSubmit}>
+              <Text style={styles.submitButtonText}>Cập nhật</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 20,
+    width: '90%',
+    maxWidth: 400,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: R.colors.blue,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  description: {
+    fontSize: 14,
+    color: R.colors.black,
+    lineHeight: 20,
+    marginBottom: 20,
+    textAlign: 'left',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: R.colors.black,
+    marginBottom: 8,
+  },
+  attachedFileContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 12,
+  },
+  fileName: {
+    fontSize: 14,
+    color: R.colors.black,
+    flex: 1,
+  },
+  deleteIcon: {
+    width: 20,
+    height: 20,
+    tintColor: R.colors.red,
+  },
+  attachmentContainer: {
+    borderWidth: 1,
+    borderColor: R.colors.gray,
+    borderRadius: 8,
+    borderStyle: 'dashed',
+    padding: 20,
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  uploadIcon: {
+    width: 40,
+    height: 40,
+    tintColor: R.colors.blue,
+    marginBottom: 8,
+  },
+  attachmentText: {
+    fontSize: 14,
+    color: R.colors.blue,
+    fontWeight: '500',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: R.colors.orange,
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  submitButton: {
+    flex: 1,
+    backgroundColor: R.colors.blue,
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  cancelButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  submitButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default EditReportModal;

src/components/WorkReportModal/index.js

+import WorkReportModal from './view';
+
+export default WorkReportModal;

src/components/WorkReportModal/view.js

+import React, {useState} from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+} from 'react-native';
+import R from '../../assets/R';
+
+const WorkReportModal = ({visible, onClose, onSubmit}) => {
+  const [reportContent, setReportContent] = useState('');
+
+  const handleSubmit = () => {
+    if (reportContent.trim()) {
+      onSubmit(reportContent);
+      setReportContent('');
+      onClose();
+    }
+  };
+
+  const handleCancel = () => {
+    setReportContent('');
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType="slide"
+      onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <View style={styles.modalContainer}>
+          <Text style={styles.title}>Báo cáo công việc</Text>
+          
+          <Text style={styles.label}>Nội dung báo cáo *</Text>
+          <TextInput
+            style={styles.textInput}
+            multiline={true}
+            numberOfLines={6}
+            placeholder="Nhập nội dung báo cáo..."
+            value={reportContent}
+            onChangeText={setReportContent}
+            textAlignVertical="top"
+          />
+
+          <Text style={styles.label}>Tài liệu đính kèm</Text>
+          <TouchableOpacity style={styles.attachmentContainer}>
+            <Image source={R.images.icUpload} style={styles.uploadIcon} />
+            <Text style={styles.attachmentText}>Thêm tài liệu</Text>
+          </TouchableOpacity>
+
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity style={styles.cancelButton} onPress={handleCancel}>
+              <Text style={styles.cancelButtonText}>Hủy</Text>
+            </TouchableOpacity>
+            <TouchableOpacity 
+              style={[styles.submitButton, !reportContent.trim() && styles.disabledButton]} 
+              onPress={handleSubmit}
+              disabled={!reportContent.trim()}>
+              <Text style={styles.submitButtonText}>Báo cáo</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 20,
+    width: '90%',
+    maxWidth: 400,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: R.colors.blue,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: R.colors.black,
+    marginBottom: 8,
+  },
+  textInput: {
+    borderWidth: 1,
+    borderColor: R.colors.gray,
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 14,
+    color: R.colors.black,
+    marginBottom: 16,
+    minHeight: 120,
+  },
+  attachmentContainer: {
+    borderWidth: 1,
+    borderColor: R.colors.gray,
+    borderRadius: 8,
+    borderStyle: 'dashed',
+    padding: 20,
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  uploadIcon: {
+    width: 40,
+    height: 40,
+    tintColor: R.colors.blue,
+    marginBottom: 8,
+  },
+  attachmentText: {
+    fontSize: 14,
+    color: R.colors.blue,
+    fontWeight: '500',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: R.colors.orange,
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  submitButton: {
+    flex: 1,
+    backgroundColor: R.colors.blue,
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  disabledButton: {
+    backgroundColor: R.colors.gray,
+  },
+  cancelButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  submitButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default WorkReportModal;

src/screens/list_work/detail/view.js

-import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet, Image, FlatList} from 'react-native';
+import React, {useState} from 'react';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  FlatList,
+} from 'react-native';
 import styles from './style';
 import FAB from '../../../components/FAB/fab';
 import SubButton from '../../../components/FAB/sub_button';
 import R from '../../../assets/R';
 import Header from '../../../components/Header/Header';
 import Dropdown from '../../../components/DropdownAlert/Dropdown';
+import WorkReportModal from '../../../components/WorkReportModal';
+import EditReportModal from '../../../components/EditReportModal';
 const DetailListWorkView = props => {
-  const { data , dataList } = props;
-  const getColor = (status) => {
+  const {data, dataList} = props;
+  const [showWorkReportModal, setShowWorkReportModal] = useState(false);
+  const [showEditReportModal, setShowEditReportModal] = useState(false);
+  const getColor = status => {
     switch (status) {
-      case 'Đang xử lý':
+      case 'Chờ duyệt':
         return R.colors.blue;
-      case 'Đã hoàn thành':
+      case 'Hoàn thành':
         return R.colors.green;
-      case 'Đã hủy':
-        return R.colors.red;
+      case 'Cần chỉnh sửa':
+        return R.colors.orange;
       case 'Đang thực hiện':
         return R.colors.orange;
+      case 'Chờ báo cáo':
+        return R.colors.blue;
       default:
         return R.colors.gray;
     }
-  }
+  };
 
   const renderView = () => {
     return (
       <View style={styles.body}>
-        <Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle}]}>{data.title}</Text>
-        <View style={{flexDirection:'row', justifyContent:'space-between'}}>
-          <Text style={styles.text}>Thời hạn:{' '}
-            <Text style={styles.sub_text}>{data.deadline}</Text>
+        <Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle}]}>
+          {data.title}
         </Text>
-          <Text style={styles.text}>Trạng thái:{' '}
-            <Text style={{color:getColor(data.status)}}>{data.status}</Text>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Text style={styles.text}>
+            Thời hạn: <Text style={styles.sub_text}>{data.deadline}</Text>
+          </Text>
+          <Text style={styles.text}>
+            Trạng thái:{' '}
+            <Text style={{color: getColor(data.status)}}>{data.status}</Text>
           </Text>
         </View>
-        <Text style={styles.text}>Công việc thuộc văn bản: 
-          <Text style={[styles.sub_text, {color:R.colors.blue}]}>{data.document}</Text></Text>
+        <Text style={styles.text}>
+          Công việc thuộc văn bản:
+          <Text style={[styles.sub_text, {color: R.colors.blue}]}>
+            {data.document}
+          </Text>
+        </Text>
         <Text style={styles.text}>
           Người giám sát:
-          <Text style={styles.sub_text}>{data.supervisor.map(item => item.name).join(', ')}</Text>
+          <Text style={styles.sub_text}>
+            {data.supervisor.map(item => item.name).join(', ')}
+          </Text>
         </Text>
         <Text style={styles.text}>
           Người thực hiện:
-          <Text style={styles.sub_text}>{data.implementer.map(item => item.name).join(', ')}</Text>
+          <Text style={styles.sub_text}>
+            {data.implementer.map(item => item.name).join(', ')}
+          </Text>
         </Text>
         <Text style={styles.text}>Nội dung công việc:</Text>
         <View style={styles.containerContent}>
-          <Text style={[styles.text, {color:R.colors.gray}]}>{data.content}</Text>
+          <Text style={[styles.text, {color: R.colors.gray}]}>
+            {data.content}
+          </Text>
         </View>
         <Text style={styles.text}>Tài liệu đính kèm</Text>
         <TouchableOpacity style={styles.containerFile}>
-          <Text style={styles.text}>Quyết định thông báo đào tạo - QD347583</Text>
-          <Image source={R.images.icDownload} style={styles.image}/>
+          <Text style={styles.text}>
+            Quyết định thông báo đào tạo - QD347583
+          </Text>
+          <Image source={R.images.icDownload} style={styles.image} />
         </TouchableOpacity>
 
         <View style={styles.containerDropdown}>
@@ -112,18 +140,59 @@ const DetailListWorkView = props => {
     );
   };
 
+  const handleReportPress = () => {
+    if (data.status === 'Chờ báo cáo') {
+      setShowWorkReportModal(true);
+    } else if (data.status === 'Chờ duyệt') {
+      setShowEditReportModal(true);
+    } else if (data.status === 'Cần chỉnh sửa') {
+      setShowWorkReportModal(true);
+    } else if (data.status === 'Đang thực hiện') {
+      setShowWorkReportModal(true);
+    }
+  };
+
+  const handleWorkReportSubmit = (reportContent) => {
+    console.log('Work report submitted:', reportContent);
+    // Handle work report submission logic here
+  };
+
+  const handleEditReportSubmit = (reportContent) => {
+    console.log('Edit report submitted:', reportContent);
+    // Handle edit report submission logic here
+  };
+
+  const shouldShowFAB = () => {
+    return data.status !== 'Hoàn thành';
+  };
+
   return (
     <View style={styles.container}>
       <Header title={'Chi tiết công việc'} isBack />
       {renderView(data)}
+      {shouldShowFAB() && (
         <FAB>
           <SubButton
-          onPress={() => {}}
-          label="Báo cáo"
+            onPress={handleReportPress}
+            label={data.status === 'Chờ duyệt' ? 'Sửa báo cáo' : 'Báo cáo'}
             images={R.images.icEdit}
             backgroundColor={R.colors.orange}
           />
         </FAB>
+      )}
+      
+      <WorkReportModal
+        visible={showWorkReportModal}
+        onClose={() => setShowWorkReportModal(false)}
+        onSubmit={handleWorkReportSubmit}
+      />
+      
+      <EditReportModal
+        visible={showEditReportModal}
+        onClose={() => setShowEditReportModal(false)}
+        onSubmit={handleEditReportSubmit}
+        initialContent=""
+      />
     </View>
   );
 };