TODO: Tái cấu trúc (refactor) các component để sử dụng destructured props và…

TODO: Tái cấu trúc (refactor) các component để sử dụng destructured props và triển khai modal cho các yêu cầu báo cáo trong DetailListWorkMonitoring.

src/components/Button.js

@@ -7,8 +7,7 @@ import {
   Text,
   Image,
 } from 'react-native';
-const Button = props => {
-  const {
+const Button = ({
   title,
   onPress,
   containerStyle,
@@ -32,7 +31,7 @@ const Button = props => {
   iconLeft,
   iconStyleLeft,
   tintColorLeft,
-  } = props;
+}) => {
 
   return (
     <TouchableOpacity

src/components/Input/TextField.js

@@ -3,8 +3,7 @@ import {View, Text, TextInput} from 'react-native';
 import {WIDTHXD, getFontXD, WIDTH, HEIGHT} from '../../config/Functions';
 import R from '../../assets/R';
 import {RFValue} from 'react-native-responsive-fontsize';
-const TextField = props => {
-  const {
+const TextField = ({
   title,
   onChangeText,
   isPassword,
@@ -27,7 +26,8 @@ const TextField = props => {
   containerBackgroundColor,
   width,
   fontFamily = R.fonts.fontMedium,
-  } = props;
+}) => {
+  
   const renderMess = () => {
     if (value && value.trim().length > 0) return `${title} không hợp lệ`;
     return `Vui lòng nhập ${title ? title.toLowerCase() : messageError} `;

src/screens/email/view.js

@@ -10,6 +10,7 @@ import {
   Animated,
   PanResponder,
   Dimensions,
+  LogBox,
 } from 'react-native';
 import styles from './style';
 import FAB from '../../components/FAB/fab';
@@ -19,6 +20,7 @@ import * as SCREENNAME from '../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 
 const EmailHomeView = props => {
+  LogBox.ignoreAllLogs('Found screens with the same name nested inside one another')
   const {groupedEmails, loading, onEmailPress, onRefresh, formatEmailDate} =
     props;
 

src/screens/list_work/monitoring/index.js

@@ -5,6 +5,7 @@ const DetailListWorkMonitoring = props => {
   const {route} = props;
   const workItem = route?.params?.workItem || {};
   const [showRequestReport, setShowRequyestReport] = useState(false);
+  const [showModal, setShowModal] = useState(false);
  
   const [data, setData] = useState({
     id: workItem.id || 1,
@@ -38,12 +39,21 @@ const DetailListWorkMonitoring = props => {
   });
   const handleReportPress = () => {
     if (data.status === 'Đang thực hiện') {
-      setShowRequyestReport(true);
-    }else{
-      setShowRequyestReport(false);
+      setShowModal(true);
     }
   };
 
+  const handleCloseModal = () => {
+    setShowModal(false);
+  };
+
+  const handleSubmitReport = (reportData) => {
+    // Xử lý submit yêu cầu báo cáo
+    console.log('Report data:', reportData);
+    setShowModal(false);
+    // TODO: Gọi API để gửi yêu cầu báo cáo
+  };
+
  
 
   const [dataList, setDataList] = useState([
@@ -104,6 +114,9 @@ const DetailListWorkMonitoring = props => {
       dataReport={dataReport}
       onHandleReportPress={handleReportPress}
       setShowRequyestReport={setShowRequyestReport}
+      showModal={showModal}
+      onCloseModal={handleCloseModal}
+      onSubmitReport={handleSubmitReport}
     />
   );
 };

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

+import React, {useState} from 'react';
+import ModalRequestReportView from './view';
+
+const ModalRequestReport = props => {
+  const {visible, onClose, onSubmitReport, workData} = props;
+
+  // State cho form trong modal
+  const [reportTitle, setReportTitle] = useState('');
+  const [reportContent, setReportContent] = useState('');
+  const [reportDeadline, setReportDeadline] = useState('');
+
+  const handleSubmit = () => {
+    // Validation
+    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;
+    }
+
+    // Tạo data để submit
+    const reportData = {
+      title: reportTitle.trim(),
+      content: reportContent.trim(),
+      deadline: reportDeadline.trim(),
+      workId: workData?.id,
+      implementers: workData?.implementer || [],
+    };
+
+    // Gọi callback để submit
+    onSubmitReport(reportData);
+
+    // Reset form
+    resetForm();
+  };
+
+  const resetForm = () => {
+    setReportTitle('');
+    setReportContent('');
+    setReportDeadline('');
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  return (
+    <ModalRequestReportView
+      visible={visible}
+      onClose={handleClose}
+      onSubmit={handleSubmit}
+      reportTitle={reportTitle}
+      setReportTitle={setReportTitle}
+      reportContent={reportContent}
+      setReportContent={setReportContent}
+      reportDeadline={reportDeadline}
+      setReportDeadline={setReportDeadline}
+      implementers={workData?.implementer}
+    />
+  );
+};
+
+export default ModalRequestReport;

src/screens/list_work/monitoring/modal_request_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_report/view.js

+import React from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  TextInput,
+  ScrollView,
+} from 'react-native';
+import styles from './style';
+import R from '../../../../assets/R';
+import TextField from '../../../../components/Input/TextField';
+import Button from '../../../../components/Button';
+
+const ModalRequestReportView = props => {
+  const {
+    visible,
+    onClose,
+    onSubmit,
+    reportTitle,
+    setReportTitle,
+    reportContent,
+    setReportContent,
+    reportDeadline,
+    setReportDeadline,
+    implementers,
+  } = 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 báo cáo
+            </Text>
+            <TextField
+                title={'Hạn nộp 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 ModalRequestReportView;

src/screens/list_work/monitoring/view.js

@@ -15,11 +15,11 @@ import R from '../../../assets/R';
 import Header from '../../../components/Header/Header';
 import Dropdown from '../../../components/DropdownAlert/Dropdown';
 import Button from '../../../components/Button';
+import ModalRequestReport from './modal_request_report';
 
 const DetailListWorkMonitoringView = props => {
   LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
-  const {data, dataList, dataReport, onHandleReportPress, setShowRequestReport} = props;
-
+  const {data, dataList, dataReport, onHandleReportPress, setShowRequestReport, showModal, onCloseModal, onSubmitReport} = props;
 
   const getColor = status => {
     switch (status) {
@@ -218,6 +218,7 @@ const DetailListWorkMonitoringView = props => {
     );
   };
 
+
   return (
     <View style={styles.container}>
       <Header title={'Chi tiết công việc giám sát'} />
@@ -236,6 +237,12 @@ const DetailListWorkMonitoringView = props => {
         </FAB>
       )}
 
+      <ModalRequestReport
+        visible={showModal}
+        onClose={onCloseModal}
+        onSubmitReport={onSubmitReport}
+        workData={data}
+      />
     </View>
   );
 };