TODO: Tái cấu trúc component Dropdown để chấp nhận margin động và cải thiện…

TODO: Tái cấu trúc component Dropdown để chấp nhận margin động và cải thiện DetailListWorkMonitoring với xử lý báo cáo và nâng cấp các thành phần giao diện người dùng.

src/components/DropdownAlert/Dropdown.js

@@ -15,7 +15,7 @@ const Dropdown = ({
   onSelect,
   height,
   backgroundColor,
-
+  containerMarginBottom = 5,
   // mới thêm
   editable = true,
   disabledBackgroundColor = R.colors.blue1,
@@ -49,7 +49,7 @@ const Dropdown = ({
   const resolvedBorderColor = editable ? R.colors?.grayBorderInputTextHeader || '#ccc' : '#ddd';
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container , {marginBottom:containerMarginBottom}]}>
       {/* Header */}
       <TouchableOpacity
         activeOpacity={editable ? 0.7 : 1}

src/screens/list_work/index.js

@@ -344,7 +344,6 @@ const ListWork = props => {
   // Hiển thị dữ liệu sau khi chọn
   const filterList = useMemo(() => {
     let base = dataList;
-    console.log('Dữ liệu danh sách đầu vào', base);
 
     // Lọc theo tab role
     if (currentTabKey === ROLE.ASSIGNEE) {

src/screens/list_work/monitoring/index.js

 import React, {useState} from 'react';
 import DetailListWorkMonitoringView from './view';
 
-const DetailListWorkMonitoring = (props) => {
+const DetailListWorkMonitoring = props => {
   const {route} = props;
   const workItem = route?.params?.workItem || {};
-
+  const [showRequestReport, setShowRequyestReport] = useState(false);
+ 
   const [data, setData] = useState({
     id: workItem.id || 1,
     title: workItem.title || 'Công việc giám sát',
@@ -31,8 +32,19 @@ const DetailListWorkMonitoring = (props) => {
       },
     ],
     document: workItem.document || 'Văn bản công việc giám sát',
-    content: workItem.content || 'Nội dung công việc đang được giám sát và theo dõi tiến độ thực hiện',
+    content:
+      workItem.content ||
+      'Nội dung công việc đang được giám sát và theo dõi tiến độ thực hiện',
   });
+   const handleReportPress = () => {
+    if (data.status === 'Đang thực hiện') {
+      setShowRequyestReport(true);
+    }else{
+      setShowRequyestReport(false);
+    }
+  };
+
+ 
 
   const [dataList, setDataList] = useState([
     {id: 1, name: 'Nguyễn Minh Đức'},
@@ -48,7 +60,8 @@ const DetailListWorkMonitoring = (props) => {
       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.',
+      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: [
         {
@@ -57,7 +70,8 @@ const DetailListWorkMonitoring = (props) => {
           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.',
+          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.',
         },
       ],
     },
@@ -66,7 +80,8 @@ const DetailListWorkMonitoring = (props) => {
       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.',
+      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: [
         {
@@ -75,7 +90,8 @@ const DetailListWorkMonitoring = (props) => {
           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.',
+          content:
+            'Đã hoàn thành phần thiết kế và đang trong giai đoạn kiểm thử hệ thống.',
         },
       ],
     },
@@ -86,6 +102,8 @@ const DetailListWorkMonitoring = (props) => {
       data={data}
       dataList={dataList}
       dataReport={dataReport}
+      onHandleReportPress={handleReportPress}
+      setShowRequyestReport={setShowRequyestReport}
     />
   );
 };

src/screens/list_work/monitoring/style.js

-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 import R from '../../../assets/R';
 
 const styles = StyleSheet.create({
@@ -38,6 +38,62 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     borderRadius: 5,
   },
+  textChip: {
+    fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '400',
+    fontFamily: R.fonts.fontRegular,
+    color: R.colors.blueTextChip,
+  },
+  containerContent: {
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 10,
+    marginVertical: 3,
+    borderColor: R.colors.grayBorderInputTextHeader,
+  },
+  flatListSelect: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 10,
+    paddingRight: 10,
+    height: 25,
+    borderRadius: 10,
+    marginBottom: 10,
+    marginRight: 5,
+    backgroundColor: R.colors.blue2,
+    alignSelf: 'flex-start',
+  },
+  imageIcon: {
+    width: 15,
+    height: 15,
+  },
+  containerIcon: {
+    marginRight: 2,
+  },
+   attachmentContainer: {
+    borderWidth: 1,
+    borderColor: R.colors.blue,
+    borderRadius: 10,
+    padding: 20,
+    alignItems: 'center',
+    marginTop:3,
+    marginBottom: 50,
+  },
+  uploadIcon: {
+    width: 23,
+    height: 28,
+    tintColor: R.colors.blue,
+    marginBottom: 5,
+  },
+  attachmentText: {
+    fontSize: R.fontsize.fontSizeContent,
+    color: R.colors.blue,
+    fontWeight: '500',
+  },
   sizedBox: {
     height: 10,
   },
@@ -62,4 +118,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default styles;
\ No newline at end of file
+export default styles;