TODO: Đã hoàn thiện giao diện chi tiết công việc

src/routers/StackNavigation.js

@@ -28,7 +28,7 @@ import AddSendDocument from '../screens/list_send_document/add';
 import DetailSendDocument from '../screens/list_send_document/detail';
 import StatusSendDocument from '../screens/list_send_document/status';
 import ListWork from '../screens/list_work';
-ListWork
+import DetailListWork from '../screens/list_work/detail';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -65,6 +65,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.DETAILSENDDOCUMENT} component={DetailSendDocument}/>
       <Stack.Screen name={ScreenName.STATUSSENDDOCUMENT} component={StatusSendDocument}/>
       <Stack.Screen name={ScreenName.LISTWORK} component={ListWork}/>
+      <Stack.Screen name={ScreenName.DETAILWORK} component={DetailListWork}/>
     </Stack.Navigator>
   );
 }

src/screens/feedback/index.js

-import React from 'react';
+import React, {useState}   from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import FeedBackView from './view';
 
 const FeedBack = (props) => {
-  const [dataList, setDataList] = React.useState([
+  const [dataList, setDataList] = useState([
     { "classCode": "ATTT2024.1", "evaluationOpenDate": "15/07/2025", "gpa": 4.0 },
     { "classCode": "IS2024.IP57.1", "evaluationOpenDate": "15/07/2025", "gpa": 3.0 },
     { "classCode": "BGF197.47.1", "evaluationOpenDate": "15/07/2025", "gpa": 3.5 },

src/screens/list_work/detail/index.js

-import React 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(
+    {
+      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',
+        },
+      ],
+      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' }
+              ]);
+  
   return (
-    <DetailListWorkView />
+    <DetailListWorkView data={data} dataList={dataList} />
   );
 };
 

src/screens/list_work/detail/style.js

-import { StyleSheet, Text, View } from 'react-native'
+import {StyleSheet, Text, View} from 'react-native';
+import R from '../../../assets/R';
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+  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,
+  },
+  containerContent:{
+    borderWidth:1,
+    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',
+      },
+  
+});
 
-export default styles
+export default styles;

src/screens/list_work/detail/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import {Text, View, TouchableOpacity, StyleSheet, Image, FlatList} from 'react-native';
+import styles from './style';
+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 DetailListWorkView = props => {
+  const { data , dataList } = props;
+  const getColor = (status) => {
+    switch (status) {
+      case 'Đang xử lý':
+        return R.colors.blue;
+      case 'Đã hoàn thành':
+        return R.colors.green;
+      case 'Đã hủy':
+        return R.colors.red;
+      case 'Đang thực hiện':
+        return R.colors.orange;
+      default:
+        return R.colors.gray;
+    }
+  }
+
+  const renderView = () => {
+    return (
+      <View style={styles.body}>
+        <Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle}]}>{data.title}</Text>
+        <View style={{flexDirection:'row', justifyContent:'space-between'}}>
+          <Text style={styles.text}>Thời hạn:{' '}
+            <Text style={styles.sub_text}>{data.deadline}</Text>
+          </Text>
+          <Text style={styles.text}>Trạng thái:{' '}
+            <Text style={{color:getColor(data.status)}}>{data.status}</Text>
+          </Text>
+        </View>
+        <Text style={styles.text}>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}>
+          Người giám sát: 
+          <Text style={styles.sub_text}>{data.supervisor.map(item => item.name).join(', ')}</Text>
+        </Text>
+        <Text style={styles.text}>
+          Người thực hiện: 
+          <Text style={styles.sub_text}>{data.implementer.map(item => item.name).join(', ')}</Text>
+        </Text>
+        <Text style={styles.text}>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}>Tài liệu đính kèm</Text>
+        <TouchableOpacity style={styles.containerFile}>
+          <Text style={styles.text}>Quyết định thông báo đào tạo - QD347583</Text>
+          <Image source={R.images.icDownload} style={styles.image}/>
+        </TouchableOpacity>
+
+        <View style={styles.containerDropdown}>
+          <Text
+            style={[
+              styles.text,
+              {
+                marginBottom: 3,
+                fontSize: R.fontsize.fontSizeLabel,
+                fontFamily: R.fonts.fontMedium,
+                fontWeight: '600',
+                color: R.colors.black,
+              },
+            ]}>
+            Thẻ
+          </Text>
+          <Dropdown
+            height={35}
+            // items={items}
+            placeholder="Chọn tùy chọn"
+            onSelect={item => console.log('Bạn đã chọn:', item)}
+          />
+        </View>
+        <Text style={[styles.text, {marginBottom: 3}]}>
+          Danh sách thẻ đã 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, marginBottom: 10}}
+          showsVerticalScrollIndicator={true}
+          columnWrapperStyle={styles.flatListSelect}
+          nestedScrollEnabled={true}
+          scrollEnabled={true}
+        />
+      </View>
+    );
+  };
+
+  const renderItem_1 = ({item, onPress}) => {
+    return (
+      <View style={styles.chip}>
+        <TouchableOpacity style={styles.containerIcon} onPress={onPress}>
+          <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>
+    );
+  };
 
-const DetailListWorkView = (props) => {
-  const {  } = props;
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <TouchableOpacity>
-        <Text>DetailListWork</Text>
-      </TouchableOpacity>
+    <View style={styles.container}>
+      <Header title={'Chi tiết công việc'} isBack />
+      {renderView(data)}
+      <FAB>
+        <SubButton
+          onPress={() => {}}
+          label="Báo cáo"
+          images={R.images.icEdit}
+          backgroundColor={R.colors.orange}
+        />
+      </FAB>
     </View>
   );
 };
 
 export default DetailListWorkView;
-
-const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/list_work/view.js

@@ -17,9 +17,13 @@ import R from '../../assets/R';
 import TabViewComponent from '../../components/TabView';
 import AddWorkModal from '../list_work/modal_add/index';
 import Button from '../../components/Button';
+import * as ScreenName from '../../routers/ScreenNames';
+import {useNavigation} from '@react-navigation/native';
 
 const ListWorkView = props => {
   const {searchQuery, setSearchQuery, dataList} = props;
+  
+  const navigation = useNavigation();
 
   const [modalVisible, setModalVisible] = useState(false);
 
@@ -131,7 +135,7 @@ const ListWorkView = props => {
           />
           <Button
             title="Chi tiết"
-            onPress={() => {}}  
+            onPress={() => navigation.navigate(ScreenName.DETAILWORK)}  
             backgroundColor={R.colors.blue}
             textColor={R.colors.white}
             fontSize={R.fontsize.fontSizeContent}