TODO: Tái cấu trúc và bổ sung modal yêu cầu chỉnh sửa báo cáo trong component…

TODO: Tái cấu trúc và bổ sung modal yêu cầu chỉnh sửa báo cáo trong component DetailListWorkMonitoring

src/screens/list_work/monitoring/index.js

@@ -5,6 +5,7 @@ const DetailListWorkMonitoring = props => {
   const {route} = props;
   const workItem = route?.params?.workItem || {};
   const [showRequestReport, setShowRequestReport] = useState(false);
+  const [showRequestEditReport, setShowRequestEditReport] = useState(false);
 
   const [data, setData] = useState({
     id: workItem.id || 1,
@@ -48,12 +49,17 @@ const DetailListWorkMonitoring = props => {
   const [dataReport, setDataReport] = useState([
     {
       id: 1,
+      userSend: [
+        {
           title: 'Báo cáo tiến độ lần 1',
           time: '14:30',
           date: '2025-09-10',
           content:
             'Báo cáo tiến độ thực hiện công việc được giao. Hiện tại đã hoàn thành 60% công việc theo kế hoạch.',
           fileTitle: 'Báo cáo tiến độ - BC001',
+        },
+      ],
+
       responder: [
         {
           id: 1,
@@ -68,12 +74,16 @@ const DetailListWorkMonitoring = props => {
     },
     {
       id: 2,
+      userSend: [
+        {
           title: 'Báo cáo tiến độ lần 2',
           time: '16:00',
           date: '2025-09-12',
           content:
             'Cập nhật tiến độ thực hiện. Đã hoàn thành 80% công việc, dự kiến hoàn thành đúng hạn.',
           fileTitle: 'Báo cáo tiến độ - BC002',
+        },
+      ],
       responder: [
         {
           id: 1,
@@ -102,6 +112,20 @@ const DetailListWorkMonitoring = props => {
     setShowRequestReport(false);
   };
 
+  const handleOpenRequestEditReport = () => {
+    if (data.status === 'Chờ duyệt' && dataReport.userSend.length > 0) {
+      setShowRequestEditReport(true);
+    }
+  };
+
+  const handleCloseModalRequestEditReport = () => {
+    setShowRequestEditReport(false);
+  };
+
+  const handleSubmitRequestEditReport = reportData => {
+    setShowRequestEditReport(false);
+  };
+
   return (
     <DetailListWorkMonitoringView
       data={data}
@@ -111,6 +135,10 @@ const DetailListWorkMonitoring = props => {
       showModalRequestReport={showRequestReport}
       onCloseModalRequestReport={handleCloseModalRequestReport}
       onSubmitRequestReport={handleSubmitRequestReport}
+      onOpenModalRequestEditReport={handleOpenRequestEditReport}
+      showModalRequestEditReport={showRequestEditReport}
+      onCloseModalRequestEditReport={handleCloseModalRequestEditReport}
+      onSubmitRequestEditReport={handleSubmitRequestEditReport}
     />
   );
 };

src/screens/list_work/monitoring/modal_request_edit_report/index.js

+import React, {useState} from 'react';
+import ModalRequestReportView from './view';
+import ModalRequestEditReportView from './view';
+
+const ModalRequestEditReport = props => {
+  const {visible, onClose, onSubmitReport, workData} = props;
+
+  const [reportTitle, setReportTitle] = useState('');
+  const [reportContent, setReportContent] = useState('');
+  const [reportDeadline, setReportDeadline] = useState('');
+
+  const handleSubmit = () => {
+    if (!reportTitle.trim()) {
+      alert('Vui lòng nhập tiêu đề báo cáo');
+      return;
+    }
+    if (!reportContent.trim()) {
+      alert('Vui lòng nhập nội dung yêu cầu');
+      return;
+    }
+    if (!reportDeadline.trim()) {
+      alert('Vui lòng nhập hạn báo cáo');
+      return;
+    }
+
+    const reportData = {
+      title: reportTitle.trim(),
+      content: reportContent.trim(),
+      deadline: reportDeadline.trim(),
+      workId: workData?.id,
+      implementers: workData?.implementer || [],
+    };
+
+    onSubmitReport(reportData);
+
+    resetForm();
+  };
+
+  const resetForm = () => {
+    setReportTitle('');
+    setReportContent('');
+    setReportDeadline('');
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  return (
+    <ModalRequestEditReportView
+      visible={visible}
+      onClose={handleClose}
+      onSubmit={handleSubmit}
+      reportTitle={reportTitle}
+      setReportTitle={setReportTitle}
+      reportContent={reportContent}
+      setReportContent={setReportContent}
+      reportDeadline={reportDeadline}
+      setReportDeadline={setReportDeadline}
+      implementers={workData?.implementer}
+    />
+  );
+};
+
+export default ModalRequestEditReport;

src/screens/list_work/monitoring/modal_request_edit_report/style.js

+import {StyleSheet} from 'react-native';
+import R from '../../../../assets/R';
+
+const styles = StyleSheet.create({
+  // Modal styles
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    backgroundColor: R.colors.white,
+    borderRadius: 15,
+    width: '90%',
+    maxHeight: '80%',
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    padding: 10,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: R.colors.grayBorderInputTextHeader,
+  },
+  modalTitle: {
+    fontSize: R.fontsize.fontSizeTitle,
+    fontWeight: '600',
+    fontFamily: R.fonts.fontMedium,
+    color: R.colors.blue,
+    textAlign: 'center',
+  },
+  closeButton: {
+    padding: 5,
+  },
+  closeIcon: {
+    width: 20,
+    height: 20,
+    tintColor: R.colors.gray,
+  },
+  modalContent: {
+    padding: 20,
+    maxHeight: 400,
+  },
+  inputLabel: {
+    fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '600',
+    fontFamily: R.fonts.fontMedium,
+    color: R.colors.black,
+    marginBottom: 8,
+    marginTop: 15,
+  },
+  required: {
+    color: R.colors.red,
+  },
+  textInput: {
+    borderWidth: 1,
+    borderColor: R.colors.grayBorderInputTextHeader,
+    borderRadius: 10,
+    padding: 12,
+    fontSize: R.fontsize.fontSizeContent,
+    fontFamily: R.fonts.fontRegular,
+    color: R.colors.black,
+    backgroundColor: R.colors.white,
+  },
+  textArea: {
+    height: 100,
+    textAlignVertical: 'top',
+  },
+  dateInput: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: R.colors.grayBorderInputTextHeader,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    backgroundColor: R.colors.white,
+  },
+  dateText: {
+    flex: 1,
+    fontSize: R.fontsize.fontSizeContent,
+    fontFamily: R.fonts.fontRegular,
+    color: R.colors.black,
+    paddingVertical: 12,
+  },
+  calendarIcon: {
+    width: 20,
+    height: 20,
+    tintColor: R.colors.blue,
+  },
+  assigneeContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginTop: 8,
+  },
+  assigneeChip: {
+    backgroundColor: R.colors.blue2,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 15,
+    marginRight: 8,
+    marginBottom: 8,
+  },
+  assigneeText: {
+    fontSize: R.fontsize.fontSizeSmall,
+    fontFamily: R.fonts.fontRegular,
+    color: R.colors.blueTextChip,
+  },
+  modalFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 20,
+    borderTopWidth: 1,
+    borderTopColor: R.colors.grayBorderInputTextHeader,
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: R.colors.white,
+    borderWidth: 1,
+    borderColor: R.colors.gray,
+    borderRadius: 10,
+    paddingVertical: 12,
+    marginRight: 10,
+    alignItems: 'center',
+  },
+  cancelButtonText: {
+    fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '500',
+    fontFamily: R.fonts.fontMedium,
+    color: R.colors.gray,
+  },
+  submitButton: {
+    flex: 1,
+    backgroundColor: R.colors.blue,
+    borderRadius: 10,
+    paddingVertical: 12,
+    marginLeft: 10,
+    alignItems: 'center',
+  },
+  submitButtonText: {
+    fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '500',
+    fontFamily: R.fonts.fontMedium,
+    color: R.colors.white,
+  },
+  buttonContainerStyle: {
+    borderRadius: 15,
+    color: R.colors.white,
+  },
+  containerButton: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+});
+
+export default styles;

src/screens/list_work/monitoring/modal_request_edit_report/view.js

+import React from 'react';
+import {
+  Modal,
+  View,
+  Text,
+} from 'react-native';
+import styles from './style';
+import R from '../../../../assets/R';
+import TextField from '../../../../components/Input/TextField';
+import Button from '../../../../components/Button';
+import TextMulti from '../../../../components/Input/TextMulti';
+
+const ModalRequestEditReportView = props => {
+  const {
+    visible,
+    onClose,
+    onSubmit,
+    reportDeadline,
+    setReportDeadline,
+  } = props;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType="slide"
+      onRequestClose={onClose}>
+      <View style={styles.modalOverlay}>
+        <View style={styles.modalContainer}>
+          <Text style={styles.modalTitle}>Yêu cầu chỉnh sửa báo cáo</Text>
+          <TextMulti
+            title={'Góp ý báo cáo'}
+            required={true}
+            value={reportDeadline}
+            onChangeText={setReportDeadline}
+          />
+          <TextField
+            title={'Hạn sửa báo cáo'}
+            required={true}
+            value={reportDeadline}
+            onChangeText={setReportDeadline}
+          />
+          <View style={styles.containerButton}>
+            <Button
+              title={'Huỷ'}
+              onPress={onClose}
+              backgroundColor={R.colors.orange}
+              textColor={R.colors.white}
+              fontSize={R.fontsize.fontSizeContent}
+              height={30}
+              width={100}
+              marginRight={10}
+              containerStyle={styles.buttonContainerStyle}
+            />
+            <Button
+              title={'Yêu cầu báo cáo'}
+              onPress={onSubmit}
+              backgroundColor={R.colors.blue}
+              textColor={R.colors.white}
+              fontSize={R.fontsize.fontSizeContent}
+              height={30}
+              width={130}
+              containerStyle={styles.buttonContainerStyle}
+            />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalRequestEditReportView;

src/screens/list_work/monitoring/view.js

@@ -16,6 +16,7 @@ import Header from '../../../components/Header/Header';
 import Dropdown from '../../../components/DropdownAlert/Dropdown';
 import Button from '../../../components/Button';
 import ModalRequestReport from './modal_request_report';
+import ModalRequestEditReport from './modal_request_edit_report';
 
 const DetailListWorkMonitoringView = props => {
   LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
@@ -28,6 +29,11 @@ const DetailListWorkMonitoringView = props => {
     showModalRequestReport,
     onCloseModalRequestReport,
     onSubmitRequestReport,
+
+    onOpenModalRequestEditReport,
+    showModalRequestEditReport,
+    onCloseModalRequestEditReport,
+    onSubmitRequestEditReport,
   } = props;
 
   const getColor = status => {
@@ -50,6 +56,9 @@ const DetailListWorkMonitoringView = props => {
   const shouldShowFAB = () => {
     return data.status === 'Đang thực hiện';
   };
+  const shouldShowButtonDowloadDocument = () => {
+    return data.status === 'Đang thực hiện';
+  };
 
   const renderItem_1 = ({item, onPress}) => {
     return (
@@ -218,12 +227,17 @@ const DetailListWorkMonitoringView = props => {
           </Text>
           <Image source={R.images.icDownload} style={styles.image} />
         </TouchableOpacity>
-
+        {
+          shouldShowButtonDowloadDocument() && (
             <TouchableOpacity style={styles.attachmentContainer}>
               <Image source={R.images.icDocument} style={styles.uploadIcon} />
               <Text style={styles.attachmentText}>Thêm tài liệu</Text>
             </TouchableOpacity>
-        {renderButton()}
+          )
+        }
+        {
+          shouldShowButtonDowloadDocument() && renderButton()
+        }
       </View>
     );
   };
@@ -252,6 +266,13 @@ const DetailListWorkMonitoringView = props => {
         onSubmitReport={onSubmitRequestReport}
         workData={data}
       />
+
+      <ModalRequestEditReport
+        visible={showModalRequestEditReport}
+        onClose={onCloseModalRequestEditReport}
+        onSubmitReport={onSubmitRequestEditReport}
+        workData={data}
+      />
     </View>
   );
 };