TODO: Đã hoàn thineje giao diện màn đăng kí báo nghỉ

src/components/Input/TextMulti.js

@@ -18,13 +18,19 @@ const TextField = props => {
     containerMarginVertical,
     containerMarginHorizontal,
     containerMarginBottom,
+    containerMarginTop,
     containerBackgroundColor,
     onFocus,
     fontFamily,
   } = props;
 
   return (
-    <View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor}}>
+    <View style={{
+      marginTop: containerMarginTop,
+      marginVertical: containerMarginVertical, 
+      marginHorizontal: containerMarginHorizontal, 
+      marginBottom: containerMarginBottom , 
+      backgroundColor: containerBackgroundColor}}>
       <Text
         style={{
           fontSize: titleFontSize,

src/routers/StackNavigation.js

@@ -13,6 +13,8 @@ import SubTeacherView from '../screens/sub_teacher';
 import ListFeedBack from '../screens/feedback';
 import DetailFeedBack from '../screens/feedback/detail';
 import ListRestReport from '../screens/list_rest_report';
+import AbsenceListByCourse from '../screens/list_rest_report/detail';
+import RegisterAbsence from '../screens/list_rest_report/add';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -22,7 +24,7 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.TABNAVIGATOR}>
+      initialRouteName={ScreenName.REGISTERABSENCE}>
       <Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
@@ -34,6 +36,8 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.LISTFEEDBACK} component={ListFeedBack}/>
       <Stack.Screen name={ScreenName.DETAILFEEDACK} component={DetailFeedBack}/>
       <Stack.Screen name={ScreenName.LISTRESTREPORT} component={ListRestReport}/>
+      <Stack.Screen name={ScreenName.ABSENCELISTBYCOURSE} component={AbsenceListByCourse}/>
+      <Stack.Screen name={ScreenName.REGISTERABSENCE} component={RegisterAbsence}/>
     </Stack.Navigator>
   );
 }

src/screens/list_rest_report/add/index.js

+import React from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import RegisterAbsenceView from './view';
+
+const RegisterAbsence = (props) => {
+  return (
+    <RegisterAbsenceView />
+  );
+};
+
+export default RegisterAbsence;

src/screens/list_rest_report/add/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,
+        padding:15
+    },
+    containerInput:{
+        flexDirection:'row',
+        marginBottom:15
+    },
+    containerDropDown:{
+        marginTop:15
+    },
+    txtSubtitle:{
+        fontWeight:'400',
+        fontFamily:R.fonts.fontRegular,
+        fontSize:R.fontsize.fontSizeLabel,
+        color:R.colors.black,
+    },
+    btnSubmit:{
+        backgroundColor:R.colors.blue,
+        padding:15,
+        alignItems:'center',
+        borderRadius:7,
+        marginTop:15
+    },
+    txtSubmit:{
+        color:R.colors.white,
+        fontSize:R.fontsize.fontSizeContent,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'600',
+    },
+    cardDocument:{
+        flexDirection:'column',
+        alignItems:'center',
+        backgroundColor:R.colors.white,
+        padding:15,
+        borderRadius:5,
+        borderWidth:1,
+        borderColor:R.colors.blue,
+    }
+})
+export default styles
\ No newline at end of file

src/screens/list_rest_report/add/view.js

+import React from 'react';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Image,
+} from 'react-native';
+import Header from '../../../components/Header/Header';
+import styles from './style';
+import TextField from '../../../components/Input/TextField';
+import R from '../../../assets/R';
+import Dropdown from '../../../components/DropdownAlert/Dropdown';
+import TextMulti from '../../../components/Input/TextMulti';
+import Button from '../../../components/Button';
+const RegisterAbsenceView = props => {
+  const {} = props;
+  return (
+    <View style={styles.container}>
+      <Header title={'Đăng ký báo nghỉ'} isBack />
+      <ScrollView showsVerticalScrollIndicator={false} style={styles.body}>
+        <View style={{marginBottom:35}}> 
+        <View style={styles.containerInput}>
+          <View style={{flex: 1}}>
+            <TextField
+              title={'Học kỳ'}
+              required
+              backgroundColor={R.colors.gray}
+              color={R.colors.black}
+              fontSize={R.sizes.sm}
+              fontSizeTitle={R.sizes.sm}
+              containerBackgroundColor={R.colors.white}
+            />
+          </View>
+          <View style={{flex: 0.1}}></View>
+          <View style={{flex: 1}}>
+            <TextField
+              title={'Năm học'}
+              required
+              backgroundColor={R.colors.gray}
+              color={R.colors.black}
+              fontSize={R.sizes.sm}
+              fontSizeTitle={R.sizes.sm}
+              containerBackgroundColor={R.colors.white}
+            />
+          </View>
+        </View>
+        <TextField
+          title={'Mã CBGV'}
+          required
+          backgroundColor={R.colors.gray}
+          color={R.colors.black}
+          fontSize={R.sizes.sm}
+          fontSizeTitle={R.sizes.sm}
+          containerBackgroundColor={R.colors.white}
+        />
+        <View style={styles.containerDropDown}>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Mã lớp </Text>
+            <Text style={{color: R.colors.red}}>*</Text>
+          </View>
+          <Dropdown title={'Mã lớp '} />
+        </View>
+        <View style={styles.containerDropDown}>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Lịch báo nghỉ </Text>
+            <Text style={{color: R.colors.red}}>*</Text>
+          </View>
+          <Dropdown title={'Lịch báo nghỉ '} />
+        </View>
+
+        <TextMulti
+          title={'Lý do nghỉ'}
+          required
+          color={R.colors.black}
+          fontSize={R.sizes.sm}
+          titleFontSize={R.sizes.sm}
+          containerBackgroundColor={R.colors.white}
+          containerMarginTop={15}
+        />
+        <View style={styles.containerDropDown}>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Giảng viên thay thế</Text>
+            <Text style={{color: R.colors.red}}>*</Text>
+          </View>
+          <Dropdown title={'Giảng viên thay thế'} />
+        </View>
+
+        <View style={{marginTop: 15}}>
+          <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Minh chứng</Text>
+          <TouchableOpacity style={styles.cardDocument}>
+            <Image
+              source={R.images.icDocument}
+              style={{width: 30, height: 30}}
+              resizeMode="contain"
+            />
+            <Text style={[styles.txtSubtitle, {color: R.colors.blue, fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>
+              Thêm tài liệu
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <Button
+          title={'Đăng kí'}
+          textColor={R.colors.white}
+          onPress={() => {}}
+          backgroundColor={R.colors.blue}
+          fontSize={R.sizes.sm}
+          fontFamily={R.fonts.fontMedium}
+          height={35}
+          containerStyle={{marginTop: 15, borderRadius: 10}}
+        />
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default RegisterAbsenceView;

src/screens/list_rest_report/detail/index.js

+import React from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import AbsenceListByCourseView from './view';
+
+const AbsenceListByCourse = (props) => {
+  return (
+    <AbsenceListByCourseView />
+  );
+};
+
+export default AbsenceListByCourse;

src/screens/list_rest_report/detail/style.js

+import { StyleSheet, Text, View } from 'react-native'
+const styles = StyleSheet.create({
+
+})
+export default styles
\ No newline at end of file

src/screens/list_rest_report/detail/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+
+const AbsenceListByCourseView = (props) => {
+  const {  } = props;
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <TouchableOpacity>
+        <Text>AbsenceListByCourse</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default AbsenceListByCourseView;
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/list_rest_report/view.js

@@ -3,14 +3,17 @@ 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 {useNavigation} from '@react-navigation/native';
 import {Image} from 'react-native';
+import * as ScreenName from '../../routers/ScreenNames';
 const ListRestReportView = props => {
   const {dataList} = props;
+  const navigation = useNavigation();
   const renderItem = ({item}) => {
     return (
       <TouchableOpacity
         onPress={() => {
-          navigation.navigate(ScreenName.DETAILFEEDACK);
+          navigation.navigate(ScreenName.DETAILRESTREPORT);
         }}
         style={styles.containerCard}>
         <View>