TODO: Đã điều chỉnh đường dẫn khi bấm chi tiết thì sẽ điều vào màn hình của…

TODO: Đã điều chỉnh đường dẫn khi bấm chi tiết thì sẽ điều vào màn hình của người giám sát còn nếu bấm chi tiết nhưng ở tab view giao cho tôi thì điều hướng vào giao cho tôi

src/screens/list_work/index.js

@@ -377,9 +377,21 @@ const ListWork = props => {
 
   // ==================== NAVIGATION HANDLERS ====================
 
-  // Điều hướng đến màn hình chi tiết công việc
+  // Điều hướng đến màn hình chi tiết công việc - conditional navigation
+  const handleViewDetailWork = item => {
+    // Nếu công việc được giao cho tôi (assignedToMe: true) -> đi vào màn hình detail như cũ
+    if (item.assignedToMe) {
+      navigation.navigate(ScreenName.DETAILWORKDELIVERTOME, {workItem: item});
+    }
+    // Nếu tôi đang giám sát công việc này (supervisedByMe: true) -> đi vào màn hình monitoring
+    else if (item.supervisedByMe) {
+      navigation.navigate(ScreenName.DETAILWORKMONITORING, {workItem: item});
+    }
+  };
+
+  // Giữ lại function cũ để tương thích
   const handleViewDetailDeliverToMe = item => {
-    navigation.navigate(ScreenName.DETAILWORKDELIVERTOME, {workItem: item});
+    handleViewDetailWork(item);
   };
 
   // ==================== ACTION HANDLERS ====================

src/screens/list_work/monitoring/index.js

-import React from 'react';
+import React, {useState} from 'react';
 import DetailListWorkMonitoringView from './view';
 
 const DetailListWorkMonitoring = (props) => {
+  const {route} = props;
+  const workItem = route?.params?.workItem || {};
+
+  const [data, setData] = useState({
+    id: workItem.id || 1,
+    title: workItem.title || 'Công việc giám sát',
+    status: workItem.status || 'Đang thực hiện',
+    deadline: workItem.deadline || '2025-09-04',
+    assignee: workItem.assignee || [
+      {
+        id: 1,
+        name: 'Nguyễn Văn A',
+      },
+      {
+        id: 2,
+        name: 'Trần Thị B',
+      },
+    ],
+    implementer: workItem.implementer || [
+      {
+        id: 1,
+        name: 'Nguyễn Văn A',
+      },
+      {
+        id: 2,
+        name: 'Trần Thị B',
+      },
+    ],
+    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',
+  });
+
+  const [dataList, setDataList] = useState([
+    {id: 1, name: 'Nguyễn Minh Đức'},
+    {id: 2, name: 'Trần Văn Hùng'},
+    {id: 3, name: 'Lê Thị Mai'},
+    {id: 4, name: 'Phạm Quốc Khánh'},
+    {id: 5, name: 'Hoàng Anh Tuấn'},
+  ]);
+
+  const [dataReport, setDataReport] = useState([
+    {
+      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,
+          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.',
+        },
+      ],
+    },
+    {
+      id: 2,
+      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.',
+        },
+      ],
+    },
+  ]);
+
   return (
-    <DetailListWorkMonitoringView />
+    <DetailListWorkMonitoringView
+      data={data}
+      dataList={dataList}
+      dataReport={dataReport}
+    />
   );
 };
 

src/screens/list_work/monitoring/style.js

-import { StyleSheet, Text, View } from 'react-native'
-import R from '../../../assets/R'
+import { StyleSheet } from 'react-native';
+import R from '../../../assets/R';
 
 const styles = StyleSheet.create({
-    container: {
-        flex:1,
-        backgroundColor:R.colors.white
-    },
-    body:{
-        flex:1,
-        marginHorizontal:15
+  container: {
+    flex: 1,
+    backgroundColor: R.colors.white,
+  },
+  body: {
+    flex: 1,
+    backgroundColor: R.colors.white,
+    marginHorizontal: 15,
+  },
+  text: {
+    fontSize: R.fontsize.fontSizeContent,
+    color: R.colors.black,
+    fontWeight: '600',
+    fontFamily: R.fonts.fontMedium,
+  },
+  sub_text: {
+    fontSize: R.fontsize.fontSizeContent,
+    color: R.colors.black,
+    fontWeight: '400',
+    fontFamily: R.fonts.fontRegular,
+  },
+  containerCard: {
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 10,
+    marginBottom: 10,
+    borderColor: R.colors.grayBorderInputTextHeader,
+    backgroundColor: R.colors.white,
+  },
+  containerText: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+  },
+  sizedBox: {
+    height: 10,
+  },
+  fab: {
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+  },
+  containerFile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 10,
+    backgroundColor: R.colors.blue1,
+    marginBottom: 5,
+    height: 30,
+    paddingHorizontal: 10,
+  },
+  image: {
+    width: 20,
+    height: 20,
+  },
+});
 
-    }
-
+export default styles;
\ No newline at end of file
-})
-
-export default styles
\ No newline at end of file

src/screens/list_work/monitoring/view.js

-import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import React, {useState} from 'react';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  Image,
+  FlatList,
+  ScrollView,
+  LogBox,
+} from 'react-native';
 import styles from './style';
-const DetailListWorkMonitoringView = (props) => {
-  const {  } = props;
+import FAB from '../../../components/FAB/fab';
+import SubButton from '../../../components/FAB/sub_button';
+import R from '../../../assets/R';
+import Header from '../../../components/Header/Header';
+import Dropdown from '../../../components/DropdownAlert/Dropdown';
+
+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 getColor = status => {
+    switch (status) {
+      case 'Chờ duyệt':
+        return R.colors.blue;
+      case 'Hoàn thành':
+        return R.colors.green;
+      case 'Đợi chỉnh sửa':
+        return R.colors.orange;
+      case 'Đang thực hiện':
+        return R.colors.orange;
+      case 'Đợi báo cáo':
+        return R.colors.blue;
+      default:
+        return R.colors.gray;
+    }
+  };
+
+  const renderReportItem = ({item}) => {
+    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>
+        <View style={styles.sizedBox} />
+        <FlatList
+          data={item.responder}
+          renderItem={renderResponderItem}
+          keyExtractor={item => item.id.toString()}
+        />
+      </View>
+    );
+  };
+
+  const renderResponderItem = ({item}) => {
+    return (
+      <View style={styles.containerCard}>
+        <View style={{flexDirection: 'row', marginBottom: 3}}>
+          <Text style={[styles.text, {color: R.colors.blue}]}>
+            {item.name} - {item.code} -{' '}
+          </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>
+    );
+  };
+
+  const renderImplementerItem = ({item}) => {
+    return (
+      <View style={styles.containerText}>
+        <Text style={styles.text}>{item.name}</Text>
+      </View>
+    );
+  };
+
   return (
-    <View
-      style={styles.container}>
-      <TouchableOpacity>
-        <Text>ComponentName</Text>
-      </TouchableOpacity>
+    <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
+            style={[
+              styles.containerText,
+              {backgroundColor: getColor(data.status)},
+            ]}>
+            <Text style={[styles.text, {color: R.colors.white}]}>
+              {data.status}
+            </Text>
+          </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>
+          </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()}
+          />
+          <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}
+            </Text>
+          </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} />
+          <FlatList
+            data={dataReport}
+            renderItem={renderReportItem}
+            keyExtractor={item => item.id.toString()}
+          />
+        </View>
+      </ScrollView>
+
+      <FAB
+        style={styles.fab}
+        onPress={() => console.log('FAB pressed for monitoring actions')}>
+        <SubButton
+          onPress={() => setShowApprovalModal(true)}
+          title={'Phê duyệt'}
+        />
+        <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'}
+        />
+      </FAB>
     </View>
   );
 };

src/screens/list_work/view.js

@@ -67,7 +67,10 @@ const ListWorkView = props => {
         key={index}
         title={button.title}
         onPress={() => {
-          if (button.action === 'approve' || button.action === 'needsEdit') {
+          if (button.action === 'detail') {
+            // Conditional navigation for "Chi tiết" button
+            onViewDetailDeliverToMe(item);
+          } else if (button.action === 'approve' || button.action === 'needsEdit') {
             onApprovalAction(item, button.action);
           } else {
             onReportAction(item, button.action);