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,
@@ -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,
   },

src/screens/list_work/monitoring/view.js

@@ -14,12 +14,12 @@ 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 Button from '../../../components/Button';
 
 const DetailListWorkMonitoringView = props => {
   LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
-  const {data, dataList, dataReport} = props;
-  const [showApprovalModal, setShowApprovalModal] = useState(false);
-  const [showRequestEditModal, setShowRequestEditModal] = useState(false);
+  const {data, dataList, dataReport, onHandleReportPress, setShowRequestReport} = props;
+
 
   const getColor = status => {
     switch (status) {
@@ -37,136 +37,205 @@ const DetailListWorkMonitoringView = props => {
         return R.colors.gray;
     }
   };
+  const shouldShowFAB = () => {
+    return data.status === 'Đang thực hiện';
+  };
 
-  const renderReportItem = ({item}) => {
+  const renderItem_1 = ({item, onPress}) => {
     return (
-      <View style={styles.containerCard}>
-        <View style={{flexDirection: 'row', marginBottom: 3}}>
-          <Text style={[styles.text, {color: R.colors.blue}]}>
-            {item.title} -{' '}
-          </Text>
-          <Text style={[styles.text, {color: R.colors.blue}]}>
-            {item.time}{' '}
-          </Text>
-          <Text style={[styles.text, {color: R.colors.blue}]}>
-            {item.date}
-          </Text>
-        </View>
-        <Text style={styles.text}>{item.content}</Text>
-        <View style={styles.sizedBox} />
-        <View style={styles.containerText}>
-          <Text style={styles.text}>Tệp đính kèm: </Text>
-          <Text style={[styles.text, {color: R.colors.blue}]}>
-            {item.fileTitle}
-          </Text>
+      <View style={styles.chip}>
+        <TouchableOpacity
+          style={styles.containerIcon}
+          onPress={() => handleItemPress(item)}>
+          <Image
+            resizeMode="cover"
+            source={R.images.icCancel}
+            style={styles.imageIcon}
+            tintColor={R.colors.blue}
+          />
+        </TouchableOpacity>
+        <Text style={styles.textChip}> {`${item.id}, ${item.name}`}</Text>
       </View>
-        <View style={styles.sizedBox} />
-        <FlatList
-          data={item.responder}
-          renderItem={renderResponderItem}
-          keyExtractor={item => item.id.toString()}
+    );
+  };
+
+  const renderButton = () => {
+    return (
+      <View style={styles.btnRegister2}>
+        <Button
+          title={'Cập nhật thông tin công việc'}
+          backgroundColor={R.colors.blue}
+          textColor={R.colors.white}
+          onPress={() => handleReportPress()}
+          fontSize={R.sizes.sm}
+          fontFamily={R.fonts.fontMedium}
+          height={35}
+          containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
         />
       </View>
     );
   };
 
-  const renderResponderItem = ({item}) => {
+  const renderBody = item => {
     return (
-      <View style={styles.containerCard}>
-        <View style={{flexDirection: 'row', marginBottom: 3}}>
-          <Text style={[styles.text, {color: R.colors.blue}]}>
-            {item.name} - {item.code} -{' '}
+      <View style={styles.body}>
+        <Text
+          style={[
+            styles.text,
+            {fontSize: R.fontsize.fontSizeSubTitle, marginBottom: 3},
+          ]}>
+          {data.title}
         </Text>
-          <Text style={[styles.text, {color: R.colors.blue}]}>
-            {item.time}{' '}
+
+        <Text style={[styles.text, {marginBottom: 3, textAlign: 'right'}]}>
+          Trạng thái:{' '}
+          <Text style={{color: getColor(data.status)}}>{data.status}</Text>
+        </Text>
+        <Text style={[styles.text, {marginBottom: 3}]}>
+          Công việc thuộc văn bản:{' '}
+          <Text style={[styles.sub_text, {color: R.colors.blue}]}>
+            {data.document}
           </Text>
-          <Text style={[styles.text, {color: R.colors.blue}]}>
-            {item.date}
+        </Text>
+        <Text style={[styles.text, {marginBottom: 3}]}>Nội dung công việc</Text>
+        <View style={styles.containerContent}>
+          <Text style={[styles.text, {color: R.colors.gray}]}>
+            {data.content}
           </Text>
         </View>
-        <Text style={styles.text}>{item.content}</Text>
+        <Text style={styles.text}>
+          Ngày đến hạn <Text style={{color: R.colors.red}}>*</Text>
+        </Text>
+        <View style={styles.containerContent}>
+          <Text style={styles.text}>{data.deadline}</Text>
         </View>
-    );
-  };
 
-  const renderImplementerItem = ({item}) => {
-    return (
-      <View style={styles.containerText}>
-        <Text style={styles.text}>{item.name}</Text>
+        <View style={styles.containerDropDown}>
+          <Text
+            style={[
+              styles.text,
+              {
+                marginBottom: 3,
+              },
+            ]}>
+            Người theo dõi
+          </Text>
+          <Dropdown
+            height={35}
+            items={item}
+            placeholder="Công việc theo văn bản"
+          />
         </View>
-    );
-  };
+        <Text style={[styles.text, {marginBottom: 3}]}>
+          Danh sách người theo dõi đã chọn
+        </Text>
+        <FlatList
+          data={dataList}
+          renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+          keyExtractor={(item, index) =>
+            item.id?.toString() || index.toString()
+          }
+          numColumns={2}
+          style={{maxHeight: 150}}
+          showsVerticalScrollIndicator={true}
+          columnWrapperStyle={styles.flatListSelect}
+          nestedScrollEnabled={true}
+          scrollEnabled={true}
+        />
 
-  return (
-    <View style={styles.container}>
-      <Header title={'Chi tiết công việc giám sát'} />
-      <ScrollView style={styles.body}>
-        <View style={styles.containerCard}>
-          <View
+        <View style={styles.containerDropDown}>
+          <Text
             style={[
-              styles.containerText,
-              {backgroundColor: getColor(data.status)},
+              styles.text,
+              {
+                marginBottom: 3,
+              },
             ]}>
-            <Text style={[styles.text, {color: R.colors.white}]}>
-              {data.status}
+            Người thực hiện công việc
           </Text>
+          <Dropdown height={35} items={item} />
         </View>
-          <View style={styles.sizedBox} />
-          <Text style={styles.text}>{data.title}</Text>
-          <View style={styles.sizedBox} />
-          <View style={styles.containerText}>
-            <Text style={styles.text}>Ngày đến hạn: </Text>
-            <Text style={[styles.text, {color: R.colors.blue}]}>
-              {data.deadline}
+        <Text style={[styles.text, {marginBottom: 3}]}>
+          Danh sách người thực hiện công việc đã chọn
         </Text>
-          </View>
-          <View style={styles.sizedBox} />
-          <View style={styles.containerText}>
-            <Text style={styles.text}>Người thực hiện: </Text>
-          </View>
         <FlatList
-            data={data.implementer}
-            renderItem={renderImplementerItem}
-            keyExtractor={item => item.id.toString()}
+          data={dataList}
+          renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+          keyExtractor={(item, index) =>
+            item.id?.toString() || index.toString()
+          }
+          numColumns={2}
+          style={{maxHeight: 150}}
+          showsVerticalScrollIndicator={true}
+          columnWrapperStyle={styles.flatListSelect}
+          nestedScrollEnabled={true}
+          scrollEnabled={true}
         />
-          <View style={styles.sizedBox} />
-          <View style={styles.containerText}>
-            <Text style={styles.text}>Thuộc văn bản: </Text>
-            <Text style={[styles.text, {color: R.colors.blue}]}>
-              {data.document}
+
+        <View style={styles.containerDropDown}>
+          <Text
+            style={[
+              styles.text,
+              {
+                marginBottom: 3,
+              },
+            ]}>
+            Thẻ
           </Text>
+          <Dropdown height={35} items={item} />
         </View>
-          <View style={styles.sizedBox} />
-          <Text style={styles.text}>{data.content}</Text>
-        </View>
-
-        <View style={styles.containerCard}>
-          <Text style={styles.text}>Lịch sử báo cáo</Text>
-          <View style={styles.sizedBox} />
+        <Text style={[styles.text, {marginBottom: 3}]}>
+          Danh sách thẻ đã chọn
+        </Text>
         <FlatList
-            data={dataReport}
-            renderItem={renderReportItem}
-            keyExtractor={item => item.id.toString()}
+          data={dataList}
+          renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+          keyExtractor={(item, index) =>
+            item.id?.toString() || index.toString()
+          }
+          numColumns={2}
+          style={{maxHeight: 150}}
+          showsVerticalScrollIndicator={true}
+          columnWrapperStyle={styles.flatListSelect}
+          nestedScrollEnabled={true}
+          scrollEnabled={true}
         />
+
+        <Text style={[styles.text, {marginBottom: 3}]}>Tài liệu đính kèm</Text>
+        <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>
+
+        <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()}
       </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Header title={'Chi tiết công việc giám sát'} />
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {renderBody()}
       </ScrollView>
 
-      <FAB
-        style={styles.fab}
-        onPress={() => console.log('FAB pressed for monitoring actions')}>
-        <SubButton
-          onPress={() => setShowApprovalModal(true)}
-          title={'Phê duyệt'}
-        />
+      {shouldShowFAB() && (
+        <FAB>
           <SubButton
-          onPress={() => setShowRequestEditModal(true)}
-          title={'Yêu cầu chỉnh sửa'}
-        />
-        <SubButton
-          onPress={() => console.log('Request report')}
-          title={'Yêu cầu báo cáo'}
+            onPress={onHandleReportPress}
+            label={'Yêu cầu báo cáo'}
+            images={R.images.icEdit}
+            backgroundColor={R.colors.orange}
           />
         </FAB>
+      )}
+ 
     </View>
   );
 };