TODO: Tái cấu trúc và cải thiện hiển thị báo cáo trong component DetailListWorkMonitoring

src/screens/list_work/monitoring/index.js

@@ -46,20 +46,17 @@ const DetailListWorkMonitoring = props => {
     {id: 5, name: 'Hoàng Anh Tuấn'},
   ]);
 
-  const [dataReport, setDataReport] = useState([
+  const [dataReport, setDataReport] = useState(
     {
-      id: 1,
       userSend: [
         {
+          id: 1,
           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,
@@ -69,34 +66,35 @@ const DetailListWorkMonitoring = props => {
               date: '2025-09-10',
               content:
                 'Đã hoàn thành phần phân tích yêu cầu và đang triển khai thiết kế hệ thống.',
+              fileTitle: 'Báo cáo tiến độ - BC001',
             },
           ],
         },
-    {
-      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,
-          name: 'Nguyễn Văn A',
-          code: '12345',
-          time: '16:00',
-          date: '2025-09-12',
-          content:
-            'Đã hoàn thành phần thiết kế và đang trong giai đoạn kiểm thử hệ thống.',
-        },
+        // {
+        //   id: 2,
+        //   title: 'Báo cáo tiến độ lần 2',
+        //   time: '16:00',
+        //   date: '2025-09-12',
+        //   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,
+        //       name: 'Nguyễn Văn A',
+        //       code: '12345',
+        //       time: '14:30',
+        //       date: '2025-09-10',
+        //       content:
+        //         'Đã hoàn thành phần phân tích yêu cầu và đang triển khai thiết kế hệ thống.',
+        //     },
+        //   ],
+        // },
       ],
     },
-  ]);
+
+ 
+  );
 
   const handleReportPress = () => {
     if (data.status === 'Đang thực hiện') {

src/screens/list_work/monitoring/style.js

@@ -48,7 +48,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 10,
     padding: 10,
-    marginVertical: 3,
+    marginVertical: 5,
     borderColor: R.colors.grayBorderInputTextHeader,
   },
   flatListSelect: {
@@ -116,6 +116,14 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
   },
+  cardContent: {
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 10,
+    marginVertical: 3,
+    borderColor: R.colors.grayBorderInputTextHeader,
+    backgroundColor: R.colors.white,
+  }
 });
 
 export default styles;

src/screens/list_work/monitoring/view.js

@@ -53,10 +53,7 @@ const DetailListWorkMonitoringView = props => {
     }
   };
 
-  const shouldShowFAB = () => {
-    return data.status === 'Đang thực hiện';
-  };
-  const shouldShowButtonDowloadDocument = () => {
+  const shouldShowFilterStatus = () => {
     return data.status === 'Đang thực hiện';
   };
 
@@ -89,12 +86,90 @@ const DetailListWorkMonitoringView = props => {
           fontSize={R.sizes.sm}
           fontFamily={R.fonts.fontMedium}
           height={35}
-          containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
+          containerStyle={{paddingHorizontal: 15, borderRadius: 25}}
         />
       </View>
     );
   };
 
+  const renderButtonDownloadDoc = () => {
+    return (
+      <TouchableOpacity style={styles.attachmentContainer}>
+        <Image source={R.images.icDocument} style={styles.uploadIcon} />
+        <Text style={styles.attachmentText}>Thêm tài liệu</Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderListReport = () => {
+    const reports = dataReport?.userSend ?? [];
+    const responders = reports.flatMap(r => r?.responder ?? []);
+    return (
+      <View>
+        <Text
+          style={[
+            styles.text,
+            {
+              color: R.colors.blue,
+              fontFamily: R.fonts.fontMedium,
+              fontSize: R.fontsize.fontSizeSubTitle,
+            },
+          ]}>
+          Báo cáo công việc
+        </Text>
+        <Text style={[styles.text, {color: R.colors.blue}]}>
+          {reports.map(item => item.title).join(', ')} -{' '}
+          {reports.map(item => item.time).join(', ')}{' '}
+          {reports.map(item => item.date).join(', ')}
+        </Text>
+        <View style={styles.cardContent}>
+          <Text style={[styles.text]}>
+            {responders.map(item => item.name).join(', ')} -{' '}
+            {responders.map(item => item.time).join(', ')}{' '}
+            {responders.map(item => item.date).join(', ')}
+          </Text>
+          <View style={styles.containerContent}>
+            <Text style={[styles.text, {color: R.colors.gray4}]}>
+              {responders.map(item => item.content).join(', ')}
+            </Text>
+          </View>
+          <TouchableOpacity style={styles.containerFile}>
+            <Text style={[styles.text, {fontSize: R.sizes.xs}]}>
+              Quyết định thông báo đào tạo - QD347583
+            </Text>
+            <Image source={R.images.icDownload} style={styles.image} />
+          </TouchableOpacity>
+          <View style={{flexDirection: 'row', justifyContent:'flex-end'}}>
+            <Button
+              title="Yêu cầu chỉnh sửa"
+              backgroundColor={R.colors.orange}
+              textColor={R.colors.white}
+              onPress={()=>{
+                console.log('Yêu cầu chỉnh sửa');
+                onOpenModalRequestEditReport();
+                
+              }}
+              fontSize={R.sizes.sm}
+              fontFamily={R.fonts.fontMedium}
+              height={30}
+              containerStyle={{paddingHorizontal: 15, borderRadius: 25, marginRight: 5}}
+            />
+            <Button
+              title="Phê duyệt"
+              backgroundColor={R.colors.blue}
+              textColor={R.colors.white}
+              onPress={() => ({})}
+              fontSize={R.sizes.sm}
+              fontFamily={R.fonts.fontMedium}
+              height={30}
+              containerStyle={{paddingHorizontal: 15, borderRadius: 25}}
+            />
+          </View>
+        </View>
+      </View>
+    );
+  };
+
   const renderBody = item => {
     return (
       <View style={styles.body}>
@@ -227,29 +302,21 @@ 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>
-          )
-        }
-        {
-          shouldShowButtonDowloadDocument() && renderButton()
-        }
+        {shouldShowFilterStatus() && renderButtonDownloadDoc()}
+        {shouldShowFilterStatus() && renderButton()}
+        {!shouldShowFilterStatus() && renderListReport()}
       </View>
     );
   };
 
   return (
     <View style={styles.container}>
-      <Header title={'Chi tiết công việc giám sát'}  isBack={true}/>
+      <Header title={'Chi tiết công việc giám sát'} isBack={true} />
       <ScrollView showsVerticalScrollIndicator={false}>
         {renderBody()}
       </ScrollView>
 
-      {shouldShowFAB() && (
+      {shouldShowFilterStatus() && (
         <FAB>
           <SubButton
             onPress={onOpenModalRequestReport}
@@ -271,7 +338,6 @@ const DetailListWorkMonitoringView = props => {
         visible={showModalRequestEditReport}
         onClose={onCloseModalRequestEditReport}
         onSubmitReport={onSubmitRequestEditReport}
-        workData={data}
       />
     </View>
   );