TODO: Đã hoàn thiện giao diện màn hình báo nghỉ lịch dạy

src/routers/StackNavigation.js

@@ -12,6 +12,7 @@ import DetailStudent from '../screens/academic_advisor/list_student/detail';
 import SubTeacherView from '../screens/sub_teacher';
 import ListFeedBack from '../screens/feedback';
 import DetailFeedBack from '../screens/feedback/detail';
+import ListRestReport from '../screens/list_rest_report';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -21,7 +22,7 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.DETAILFEEDACK}>
+      initialRouteName={ScreenName.TABNAVIGATOR}>
       <Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
@@ -32,6 +33,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.SUBTEACHER} component={SubTeacherView} />
       <Stack.Screen name={ScreenName.LISTFEEDBACK} component={ListFeedBack}/>
       <Stack.Screen name={ScreenName.DETAILFEEDACK} component={DetailFeedBack}/>
+      <Stack.Screen name={ScreenName.LISTRESTREPORT} component={ListRestReport}/>
     </Stack.Navigator>
   );
 }

src/screens/feedback/style.js

@@ -30,6 +30,10 @@ const styles = StyleSheet.create({
         justifyContent:'center',
         borderColor:R.colors.grayBorderInputTextHeader,
     },
+    body:{
+        flex:1,
+        backgroundColor:R.colors.white
+    },
     text:{
         fontSize:R.sizes.sm,
         color:R.colors.black,

src/screens/feedback/view.js

@@ -3,11 +3,14 @@ import {Text, View, TouchableOpacity, StyleSheet, FlatList, Image} from 'react-n
 import styles from './style';
 import Header from '../../components/Header/Header';
 import R from '../../assets/R';
+import { useNavigation } from '@react-navigation/native';
+import * as ScreenName from '../../routers/ScreenNames';
 const FeedBackView = props => {
   const {dataList, setDataList} = props;
+  const navigation = useNavigation();
   const renderItem = ({item})=>{
     return(
-        <TouchableOpacity style={styles.containerCard}>
+        <TouchableOpacity onPress={()=>{navigation.navigate(ScreenName.DETAILFEEDACK)}} style={styles.containerCard}>
           <View>
             <View>
               <Text style={[styles.text,{fontWeight:'600', fontFamily:R.fonts.fontMedium, color:R.colors.blue}]}>Lớp: {item.classCode}</Text>

src/screens/list_rest_report/index.js

+import React, {useState} from 'react';
+import ListRestReportView from './view';
+
+const ListRestReport = (props) => {
+  const [dataList, setDataList] = useState([
+    {
+        id:1,
+        classCode:'ATTT2024.1',
+        rest:5,
+        compensate:0,
+        total:25
+    },
+    {
+        id:2,
+        classCode:'ATTT2024.2',
+        rest:5,
+        compensate:0,
+        total:25
+    },
+  ]);
+  return (
+    <ListRestReportView dataList={dataList}/>
+  );
+};
+
+export default ListRestReport;

src/screens/list_rest_report/style.js

+import {StyleSheet, Text, View} from 'react-native';
+import R from '../../assets/R';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: R.colors.white,
+  },
+  body: {
+    flex: 1,
+    backgroundColor:R.colors.white
+  },
+  card: {
+    borderRadius: 10,
+    padding: 5,
+    marginTop: 15,
+    marginBottom: 15,
+    marginHorizontal: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    backgroundColor: R.colors.white,
+    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,
+  },
+  btnCard: {
+    borderRadius: 10,
+    borderWidth: 1,
+    padding: 5,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: R.colors.grayBorderInputTextHeader,
+  },
+  text: {
+    fontSize: R.sizes.sm,
+    color: R.colors.black,
+    fontFamily: R.fonts.fontRegular,
+    fontWeight: '400',
+  },
+  containerCard: {
+    padding: 10,
+    borderRadius: 10,
+    marginBottom: 15,
+    backgroundColor: R.colors.white,
+    shadowColor: R.colors.black,
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
+    shadowRadius: 1,
+    elevation: Platform.OS === 'ios' ? 1 : 2,
+    marginHorizontal: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  containerText: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnRight: {},
+});
+
+export default styles;

src/screens/list_rest_report/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet, FlatList} from 'react-native';
+import styles from './style';
+import Header from '../../components/Header/Header';
+import R from '../../assets/R';
+import {Image} from 'react-native';
+const ListRestReportView = props => {
+  const {dataList} = props;
+  const renderItem = ({item}) => {
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          navigation.navigate(ScreenName.DETAILFEEDACK);
+        }}
+        style={styles.containerCard}>
+        <View>
+          <Text
+            style={[
+              styles.text,
+              {
+                fontWeight: '600',
+                fontFamily: R.fonts.fontMedium,
+                color: R.colors.blue,
+              },
+            ]}>
+            Lớp: {item.classCode}
+          </Text>
+        </View>
+
+        <View style={{alignItems:'center'}}>
+          <Text style={[styles.text]}>Nghỉ / Bù / Tổng</Text>
+          <Text style={[styles.text]}>
+            {item.rest} / {item.compensate} / {item.total}
+          </Text>
+        </View>
+
+        <View style={styles.btnRight}>
+          <Image
+            source={R.images.icNext}
+            style={{width: 20, height: 20}}
+            resizeMode="contain"
+            tintColor={R.colors.black}
+          />
+        </View>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <View style={styles.container}>
+      <Header title={'Báo nghỉ lịch dạy'} isBack />
+      <View style={styles.body}>
+        <View style={styles.card}>
+          <TouchableOpacity style={styles.btnCard}>
+            <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
+          </TouchableOpacity>
+        </View>
+        <FlatList
+          data={dataList || []}
+          renderItem={renderItem}
+          showsVerticalScrollIndicator={false}
+          vertical
+          keyExtractor={(item, index) => `${index}`}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ListRestReportView;