TODO : Đã hoàn thiện list danh sách công việc

src/screens/list_work/detail/index.js

-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import DetailListWorkView from './view';
 
-const DetailListWork = (props) => {
-  const [data, setData] = useState(
+const DetailListWork = props => {
+  const [data, setData] = useState({
+    id: 1,
+    title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025',
+    status: 'Chờ duyệt',
+    deadline: '2025-09-04',
+    supervisor: [
+      {
+        id: 1,
+        name: 'Trần Văn Hùng',
+      },
+      {
+        id: 2,
+        name: 'Nguyễn Văn A',
+      },
+    ],
+    implementer: [
+      {
+        id: 1,
+        name: 'Trần Văn Hùng',
+      },
+      {
+        id: 2,
+        name: 'Nguyễn Văn A',
+      },
+    ],
+    document: 'Văn bản thông báo lịch nộp thời khóa biểu của học kỳ 2 năm 2025',
+    content:
+      'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
+  });
+
+  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'},
+    {id: 6, name: 'Vũ Thị Hằng'},
+    {id: 7, name: 'Ngô Văn Nam'},
+    {id: 8, name: 'Đinh Thị Lan'},
+    {id: 9, name: 'Bùi Văn Phúc'},
+    {id: 10, name: 'Lý Thị Hoa'},
+    {id: 11, name: 'Phan Minh Hoàng'},
+    {id: 12, name: 'Tạ Thị Hương'},
+    {id: 13, name: 'Đoàn Văn Dũng'},
+    {id: 14, name: 'Nguyễn Thị Vân'},
+    {id: 15, name: 'Trương Văn Long'},
+    {id: 16, name: 'Mai Thị Ngọc'},
+    {id: 17, name: 'Huỳnh Quốc Việt'},
+    {id: 18, name: 'Lâm Thị Thu'},
+    {id: 19, name: 'Nguyễn Hữu Tài'},
+    {id: 20, name: 'Phạm Thị Kim'},
+  ]);
+
+  const [dataReport, setDataReport] = useState([
     {
-      id: 1,
-      title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025',
-      status: 'Chờ duyệt',
-      deadline: '2025-09-04',
-      supervisor: [
+      id:1,
+      title:'Báo cáo lần 1',
+      time:'16:00',
+      date:'2025-07-24',
+      content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
+      fileTitle:'Quyết định thông báo đào tạo - QD347583',
+      responder:[
         {
-          id: 1,
-          name: 'Trần Văn Hùng',
+          id:1,
+          name:'Bùi tiến dũng',
+          code:'08569',
+          time:'16:00',
+          date:'2025-07-24',
+          content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
         },
         {
-          id: 2,
-          name: 'Nguyễn Văn A',
+          id:2,
+          name:'Bùi tiến dũng',
+          code:'08569',
+          time:'16:00',
+          date:'2025-07-24',
+          content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
         },
-      ],
-      implementer: [
         {
-          id: 1,
-          name: 'Trần Văn Hùng',
+          id:3,
+          name:'Bùi tiến dũng',
+          code:'08569',
+          time:'16:00',
+          date:'2025-07-24',
+          content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
         },
+      ]
+    },
+    {
+      id:2,
+      title:'Báo cáo lần 2',
+      time:'16:00',
+      date:'2025-07-24',
+      content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
+      fileTitle:'Quyết định thông báo đào tạo - QD347583',
+      responder:[
         {
-          id: 2,
-          name: 'Nguyễn Văn A',
+          id:1,
+          name:'Bùi tiến dũng',
+          code:'08569',
+          time:'16:00',
+          date:'2025-07-24',
+          content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
         },
-      ],
-      document: 'Văn bản thông báo lịch nộp thời khóa biểu của học kỳ 2 năm 2025',
-      content: 'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
-    },
-  );
+        {
+          id:2,
+          name:'Bùi tiến dũng',
+          code:'08569',
+          time:'16:00',
+          date:'2025-07-24',
+          content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
+        },
+        {
+          id:3,
+          name:'Bùi tiến dũng',
+          code:'08569',
+          time:'16:00',
+          date:'2025-07-24',
+          content:'Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan',
+        },
+      ]
+    }
+  ])
 
-  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' },
-                { id: 6, name: 'Vũ Thị Hằng' },
-                { id: 7, name: 'Ngô Văn Nam' },
-                { id: 8, name: 'Đinh Thị Lan' },
-                { id: 9, name: 'Bùi Văn Phúc' },
-                { id: 10, name: 'Lý Thị Hoa' },
-                { id: 11, name: 'Phan Minh Hoàng' },
-                { id: 12, name: 'Tạ Thị Hương' },
-                { id: 13, name: 'Đoàn Văn Dũng' },
-                { id: 14, name: 'Nguyễn Thị Vân' },
-                { id: 15, name: 'Trương Văn Long' },
-                { id: 16, name: 'Mai Thị Ngọc' },
-                { id: 17, name: 'Huỳnh Quốc Việt' },
-                { id: 18, name: 'Lâm Thị Thu' },
-                { id: 19, name: 'Nguyễn Hữu Tài' },
-                { id: 20, name: 'Phạm Thị Kim' }
-              ]);
-  
-  return (
-    <DetailListWorkView data={data} dataList={dataList} />
-  );
+  return <DetailListWorkView data={data} dataList={dataList} dataReport={dataReport} />;
 };
 
 export default DetailListWork;

src/screens/list_work/detail/style.js

@@ -9,69 +9,77 @@ const styles = StyleSheet.create({
   body: {
     flex: 1,
     backgroundColor: R.colors.white,
-    marginHorizontal:15
+    marginHorizontal: 15,
   },
-  text:{
-    fontSize:R.fontsize.fontSizeContent,
-    color:R.colors.black,
-    fontWeight:'600',
-    fontFamily:R.fonts.fontMedium,
+  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,
+  sub_text: {
+    fontSize: R.fontsize.fontSizeContent,
+    color: R.colors.black,
+    fontWeight: '400',
+    fontFamily: R.fonts.fontRegular,
   },
-  containerContent:{
-    borderWidth:1,
+  containerContent: {
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 10,
+    marginBottom: 5,
+    borderColor: R.colors.grayBorderInputTextHeader,
+  },
+  containerFile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 10,
+    backgroundColor: R.colors.blue1,
+    padding: 10,
+    marginBottom: 5,
+  },
+  image: {
+    width: 20,
+    height: 20,
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    // position: 'relative',
+    paddingLeft: 10,
+    paddingRight: 10,
+    height: 25,
+    borderRadius: 10,
+    marginBottom: 10,
+    marginRight: 5,
+    backgroundColor: R.colors.blue2,
+    alignSelf: 'flex-start',
+  },
+  containerIcon: {
+    marginRight: 2,
+  },
+  imageIcon: {
+    width: 15,
+    height: 15,
+  },
+  textChip: {
+    fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '400',
+    fontFamily: R.fonts.fontRegular,
+    color: R.colors.blueTextChip,
+  },
+  flatListSelect: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  containerDropdown:{
+    marginBottom:5
+  },
+  containerCard:{
     borderRadius:10,
-    padding:10,
-    borderColor:R.colors.grayBorderInputTextHeader,
-      },
-      containerFile:{
-        flexDirection:'row',
-        alignItems:'center',
-        justifyContent:'space-between',
-        borderRadius:10,
-        backgroundColor:R.colors.blue1,
-        padding:10,
-      },
-      image:{
-        width:20,
-        height:20,
-      },
-      chip:{
-        flexDirection: 'row',
-        alignItems: 'center',
-        // position: 'relative',
-        paddingLeft: 10,
-        paddingRight:10,
-        height: 25,
-        borderRadius: 10,
-        marginBottom:10,
-        marginRight:5,
-        backgroundColor: R.colors.blue2,
-        alignSelf:'flex-start'
-      },
-      containerIcon:{
-        marginRight: 2,
-      },
-      imageIcon:{
-        width: 15,
-        height: 15,
-      },
-      textChip:{
-        fontSize: R.fontsize.fontSizeContent,
-        fontWeight: '400',
-        fontFamily:R.fonts.fontRegular,
-        color:R.colors.blueTextChip,
-      },
-      flatListSelect:{
-        flexDirection:'row',
-        flexWrap:'wrap',
-      },
-  
+    marginBottom:10,
+  }
 });
 
 export default styles;

src/screens/list_work/detail/view.js

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Image,
   FlatList,
+  ScrollView,
 } from 'react-native';
 import styles from './style';
 import FAB from '../../../components/FAB/fab';
@@ -16,7 +17,7 @@ import Dropdown from '../../../components/DropdownAlert/Dropdown';
 import WorkReportModal from '../detail/modal_add_report';
 import EditReportModal from '../detail/modal_edit_report';
 const DetailListWorkView = props => {
-  const {data, dataList} = props;
+  const {data, dataList, dataReport} = props;
   const [showWorkReportModal, setShowWorkReportModal] = useState(false);
   const [showEditReportModal, setShowEditReportModal] = useState(false);
   const getColor = status => {
@@ -36,34 +37,115 @@ const DetailListWorkView = props => {
     }
   };
 
+  const renderItem = ({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>
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: R.colors.grayBorderInputTextHeader,
+            padding: 10,
+            borderRadius: 10,
+            marginBottom: 5,
+          }}>
+          <Text style={[styles.text, {color: R.colors.gray}]}>
+            {item.content}
+          </Text>
+        </View>
+        <TouchableOpacity
+          style={{
+            flexDirection: 'row',
+            backgroundColor: R.colors.blue1,
+            padding: 5,
+            borderRadius: 5,
+            marginBottom:10,
+            justifyContent: 'space-between',
+          }}>
+          <Text style={[styles.text, {color: R.colors.black, fontSize: 10}]}>
+            {item.fileTitle}
+          </Text>
+          <Image source={R.images.icDownload} style={styles.image} />
+        </TouchableOpacity>
+        <Text style={[styles.text, {color: R.colors.blue}]} >Phản hồi báo cáo</Text>
+        <FlatList
+          data={item.responder || []}
+          renderItem={renderItem_2}
+          showsVerticalScrollIndicator={false}
+          vertical
+          style={{marginLeft:15}}
+          keyExtractor={(item, index) => `${index}`}
+        />
+      </View>
+    );
+  };
+
+  const renderItem_2 = ({item}) => {
+    return (
+      <View style={styles.containerCard}>
+        <View style={{flexDirection: 'row', marginBottom: 3}}>
+          <Text style={[styles.text, {color: R.colors.black,}]}>
+            {item.name} - {item.code} {' '}
+          </Text>
+          <Text style={[styles.text, {color: R.colors.black}]}>
+            {item.time} {item.date}
+          </Text>
+        </View>
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: R.colors.grayBorderInputTextHeader,
+            padding: 10,
+            borderRadius: 10,
+          }}>
+          <Text style={[styles.text, {color: R.colors.gray}]}>
+            {item.content}
+          </Text>
+        </View>
+      </View>
+    );
+  };
+
   const renderView = () => {
     return (
       <View style={styles.body}>
-        <Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle ,}]}>
+        <Text
+          style={[
+            styles.text,
+            {fontSize: R.fontsize.fontSizeSubTitle, marginBottom: 5},
+          ]}>
           {data.title}
         </Text>
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-          <Text style={styles.text}>
+          <Text style={[styles.text, {marginBottom: 5}]}>
             Thời hạn: <Text style={styles.sub_text}>{data.deadline}</Text>
           </Text>
-          <Text style={styles.text}>
+          <Text style={[styles.text, {marginBottom: 5}]}>
             Trạng thái:{' '}
             <Text style={{color: getColor(data.status)}}>{data.status}</Text>
           </Text>
         </View>
-        <Text style={styles.text}>
+        <Text style={[styles.text, {marginBottom: 5}]}>
           Công việc thuộc văn bản:
           <Text style={[styles.sub_text, {color: R.colors.blue}]}>
             {data.document}
           </Text>
         </Text>
-        <Text style={styles.text}>
+        <Text style={[styles.text, {marginBottom: 5}]}>
           Người giám sát:
           <Text style={styles.sub_text}>
             {data.supervisor.map(item => item.name).join(', ')}
           </Text>
         </Text>
-        <Text style={styles.text}>
+        <Text style={[styles.text, {marginBottom: 5}]}>
           Người thực hiện:
           <Text style={styles.sub_text}>
             {data.implementer.map(item => item.name).join(', ')}
@@ -114,12 +196,22 @@ const DetailListWorkView = props => {
             item.id?.toString() || index.toString()
           }
           numColumns={2}
-          style={{maxHeight: 150, marginBottom: 10}}
+          style={{maxHeight: 150, marginBottom: 5}}
           showsVerticalScrollIndicator={false}
           columnWrapperStyle={styles.flatListSelect}
           nestedScrollEnabled={true}
           scrollEnabled={true}
         />
+        <Text style={[styles.text, {marginBottom: 3}]}>
+          Báo cáo công việc :
+        </Text>
+        <FlatList
+          data={dataReport || []}
+          renderItem={renderItem}
+          showsVerticalScrollIndicator={false}
+          vertical
+          keyExtractor={(item, index) => `${index}`}
+        />
       </View>
     );
   };
@@ -152,11 +244,11 @@ const DetailListWorkView = props => {
     }
   };
 
-  const handleWorkReportSubmit = (reportContent) => {
+  const handleWorkReportSubmit = reportContent => {
     console.log('Work report submitted:', reportContent);
   };
 
-  const handleEditReportSubmit = (reportContent) => {
+  const handleEditReportSubmit = reportContent => {
     console.log('Edit report submitted:', reportContent);
   };
 
@@ -167,7 +259,9 @@ const DetailListWorkView = props => {
   return (
     <View style={styles.container}>
       <Header title={'Chi tiết công việc'} isBack />
-      {renderView(data)}
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {renderView(data)}
+      </ScrollView>
       {shouldShowFAB() && (
         <FAB>
           <SubButton
@@ -178,13 +272,13 @@ const DetailListWorkView = props => {
           />
         </FAB>
       )}
-      
+
       <WorkReportModal
         visible={showWorkReportModal}
         onClose={() => setShowWorkReportModal(false)}
         onSubmit={handleWorkReportSubmit}
       />
-      
+
       <EditReportModal
         visible={showEditReportModal}
         onClose={() => setShowEditReportModal(false)}