TODO: Đã hoàn thiện list giao diện công việc

src/screens/list_work/index.js

-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import ListWorkView from './view';
 
 const ListWork = props => {
-  return <ListWorkView />;
+  const {searchQuery, setSearchQuery} = props;
+  const [dataList, setDataList] = 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: 'Đang thực hiện',
+      deadline: '2025-09-04',
+      supervisor: [
+        {
+          id: 1,
+          name: 'Trần Văn Hùng',
+        },
+        {
+          id: 2,
+          name: 'Nguyễn Văn A',
+        },
+      ],
+      document: 'BM255, Nguyễn Minh Đức',
+    },
+    {
+      id: 2,
+      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: 'Cần chỉnh sửa',
+      deadline: '2025-09-04',
+      supervisor: [
+        {
+          id: 1,
+          name: 'Trần Văn Hùng',
+        },
+        {
+          id: 2,
+          name: 'Nguyễn Văn A',
+        },
+      ],
+      document: 'BM255, Nguyễn Minh Đức',
+    },
+    {
+      id: 3,
+      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',
+        },
+      ],
+      document: 'BM255, Nguyễn Minh Đức',
+    },
+    {
+      id: 4,
+      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: 'Đợi báo cáo',
+      deadline: '2025-09-04',
+      supervisor: [
+        {
+          id: 1,
+          name: 'Trần Văn Hùng',
+        },
+        {
+          id: 2,
+          name: 'Nguyễn Văn A',
+        },
+      ],
+      document: 'BM255, Nguyễn Minh Đức',
+    },
+    {
+      id: 5,
+      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: 'Đã hoàn thành',
+      deadline: '2025-09-04',
+      supervisor: [
+        {
+          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 ',
+    },
+  ]);
+  return <ListWorkView searchQuery={searchQuery} setSearchQuery={setSearchQuery} dataList={dataList} />;
 };
 
 export default ListWork;

src/screens/list_work/style.js

@@ -59,6 +59,29 @@ const styles = StyleSheet.create({
     marginHorizontal: 15,
     alignItems: 'center',
   },
+  containerCard:{
+    backgroundColor: R.colors.white,
+    padding: 10,
+    borderBottomLeftRadius:15,
+    borderBottomRightRadius:15,
+    shadowColor: R.colors.black,
+    shadowOffset: {width: 0.5, height: 2},
+    shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
+    shadowRadius: 5,
+    elevation: Platform.OS === 'ios' ? 1 : 2,
+  },
+  text:{
+    fontSize: R.fontsize.fontSizeContent,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
+    color: R.colors.black,
+  },
+  subText:{
+    fontSize: R.fontsize.fontSizeContent,
+    fontFamily: R.fonts.fontRegular,
+    fontWeight: '400',
+    color: R.colors.black,
+  }
 });
 
 export default styles;

src/screens/list_work/view.js

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Image,
   TextInput,
+  FlatList,
 } from 'react-native';
 import styles from './style';
 import FAB from '../../components/FAB/fab';
@@ -15,9 +16,10 @@ import Dropdown from '../../components/DropdownAlert/Dropdown';
 import R from '../../assets/R';
 import TabViewComponent from '../../components/TabView';
 import AddWorkModal from '../list_work/modal_add/index';
+import Button from '../../components/Button';
 
 const ListWorkView = props => {
-  const {searchQuery, setSearchQuery} = props;
+  const {searchQuery, setSearchQuery, dataList} = props;
 
   const [modalVisible, setModalVisible] = useState(false);
 
@@ -36,8 +38,24 @@ const ListWorkView = props => {
   const handleCloseModal = () => {
     setModalVisible(false);
   };
+  const getColor = (status) => {
+    switch (status) {
+      case 'Đang thực hiện':
+        return R.colors.orange;
+      case 'Chờ duyệt':
+        return R.colors.blue;
+      case 'Cần chỉnh sửa':
+        return R.colors.orange;
+      case 'Đã hoàn thành':
+        return R.colors.green;
+      case 'Đợi báo cáo':
+        return R.colors.blue;
+      default:
+        return R.colors.gray;
+    }
+  };
 
-  const renderTabView = () => {
+  const renderTabView = ( ) => {
     return (
       <TabViewComponent
         data={[
@@ -76,13 +94,64 @@ const ListWorkView = props => {
     );
   };
 
+  const renderListView = ( {item} ) =>{
+    return(
+      <View style={{ marginHorizontal:15, marginVertical:10}}>
+      <View style ={{backgroundColor: getColor(item.status),borderTopLeftRadius:15, borderTopRightRadius:15}}>
+       <Text style={[styles.subText , {marginHorizontal:15}]}>{item.status}</Text>
+   </View>
+      <View style={styles.containerCard}>
+       
+        <Text style={styles.text}>{item.title}</Text>
+        <View style={{flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Text style={styles.text}>Ngày đến hạn:
+            <Text style={styles.subText}>{item.deadline}</Text>
+          </Text>
+         
+        </View>
+        <Text style={styles.text}>
+          Người giám sát:
+          <Text style={styles.subText}>{item.supervisor.map((item) => item.name).join(', ')}</Text>
+        </Text>
+        <Text style={styles.text}>
+          Thuộc văn bản:
+          <Text style={styles.subText}>{item.document}</Text>
+        </Text>
+        <View style={{flexDirection: 'row', justifyContent: 'flex-end', marginTop:10}}>
+          <Button
+            title="Báo cáo"
+            onPress={() => {}}
+            backgroundColor={R.colors.orange}
+            textColor={R.colors.white}
+            fontSize={R.fontsize.fontSizeContent}
+
+            height={35}
+            width={100} 
+            containerStyle={{marginRight: 10, borderRadius: 20}}
+          />
+          <Button
+            title="Chi tiết"
+            onPress={() => {}}  
+            backgroundColor={R.colors.blue}
+            textColor={R.colors.white}
+            fontSize={R.fontsize.fontSizeContent}
+            height={35}
+            width={100} 
+            containerStyle={{borderRadius: 20}}
+          />
+        </View>
+      </View>
+      </View>
+    )
+  };
+
   return (
     <View style={styles.container}>
       <Header title={'Danh sách công việc'} isBack />
       <View style={styles.body}>
         {renderTabView()}
 
-        <View style={{marginBottom: 15}}>
+        <View style={{marginBottom: 15, flex:1}}>
           <View style={styles.card}>
             <TouchableOpacity style={styles.btnCard}>
               <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
@@ -110,6 +179,12 @@ const ListWorkView = props => {
               <Dropdown title={'Tìm kiếm'} height={40} />
             </View>
           </View>
+          <FlatList
+            data={dataList}
+            renderItem={renderListView}
+            
+            keyExtractor={item => item.id.toString()}
+          />
         </View>
       </View>
       <FAB>