TODO: Đã hoàn thiện giao diện màn hình dạy thay

src/components/Button.js

@@ -31,6 +31,7 @@ const Button = props => {
     iconStyle,
     paddingHorizontal,
     paddingVertical,
+    marginRight,
   } = props;
 
   return (
@@ -43,6 +44,7 @@ const Button = props => {
           paddingVertical:paddingVertical,
           backgroundColor: backgroundColor,
           borderRadius: borderRadius,
+          marginRight: marginRight
         },
         {...containerStyle},
       ]}

src/routers/StackNavigation.js

@@ -9,6 +9,7 @@ import NotificationAdd from '../screens/notification/add';
 import ClassActivity from '../screens/academic_advisor';
 import ListStudentClass from '../screens/academic_advisor/list_student';
 import DetailStudent from '../screens/academic_advisor/list_student/detail';
+import SubTeacherView from '../screens/sub_teacher';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -18,7 +19,7 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.LISTACADEMICADVISOR}>
+      initialRouteName={ScreenName.TABNAVIGATOR}>
       <Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
@@ -26,6 +27,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.LISTACADEMICADVISOR} component={ClassActivity} />
       <Stack.Screen name={ScreenName.LISTSTUDENTCLASS} component={ListStudentClass} />
       <Stack.Screen name={ScreenName.DETAILSTUDENT} component={DetailStudent} />
+      <Stack.Screen name={ScreenName.SUBTEACHER} component={SubTeacherView} />
     </Stack.Navigator>
   );
 }

src/screens/sub_teacher/index.js

+import React, { useState } from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import SubTeacherView from './view';
+
+const SubTeacher = (props) => {
+  const [dataList,setDataList] = useState([
+      {
+        "classCode": "IS252.P12.1",
+        "status": "Chờ xác nhận",
+        "time": "Thứ 6 - Tiết 6, 7, 8, 9 - Ngày 30/07/2025",
+        "location": "Room B2.12",
+        "requestedLecturer": "Hoàng Thanh Tùng - 08596",
+        "note": ""
+      },
+      {
+        "classCode": "IS301.A22.3",
+        "status": "Đã xác nhận",
+        "time": "Thứ 2 - Tiết 1, 2, 3 - Ngày 15/08/2025",
+        "location": "Room A1.05",
+        "requestedLecturer": "Nguyễn Thị Mai - 02468",
+        "note": "Bring personal laptop"
+      },
+      {
+        "classCode": "CS101.B11.2",
+        "status": "Từ chối",
+        "time": "Thứ 4 - Tiết 4, 5, 6 - Ngày 05/09/2025",
+        "location": "Room C3.20",
+        "requestedLecturer": "Trần Văn Hùng - 09123",
+        "note": "Midterm exam"
+      },
+      {
+        "classCode": "MA205.C33.4",
+        "status": "Từ chối",
+        "time": "Thứ 4 - Tiết 7, 8, 9 - Ngày 20/09/2025",
+        "location": "Room D1.02",
+        "requestedLecturer": "Lê Quang Minh - 07854",
+        "note": "Class cancelled due to lecturer’s business trip"
+      }
+    
+  ]);
+  
+  return (
+    <SubTeacherView 
+      dataList={dataList}
+      setDataList={setDataList}
+    />
+  );
+};
+
+export default SubTeacher;

src/screens/sub_teacher/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,
+    },
+    card:{
+        borderRadius:10,
+        padding:5,
+        marginTop: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,
+        marginBottom:15,
+        borderRadius:10,
+        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,
+        marginVertical:15,
+    },
+    containerText:{
+        flexDirection:'row',
+        justifyContent:'space-between',
+    },
+    containerButton:{
+        flexDirection:'row',
+        justifyContent:'flex-end',
+    }
+})
+export default styles
\ No newline at end of file

src/screens/sub_teacher/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 Button from '../../components/Button';
+const SubTeacherView = props => {
+  const {dataList, setDataList} = props;
+
+  const renderItem = ({item}) => {
+    return (
+      <View style={styles.containerCard}>
+        <View style={styles.containerText}>
+          <View style={{flexDirection:'row'}}>
+            <Text style={styles.text}>Mã lớp: </Text>
+            <Text style={[styles.text,{color:R.colors.blue, fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>{item.classCode} </Text>
+          </View>
+          <View style={{flexDirection:'row'}}>
+            <Text style={styles.text}>Trạng thái: </Text>
+            <Text style={[styles.text,{color: getStatusColor(item.status), fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>{item.status}</Text>
+          </View>
+        </View>
+        <Text style={styles.text}>Thời gian: {item.time}</Text>
+        <Text style={styles.text}>Địa điểm: {item.location}</Text>
+        <Text style={styles.text}>Giảng viên yêu cầu: {item.requestedLecturer}</Text>
+        <Text style={styles.text}>Ghi chú: {item.note}</Text>
+        {item.status === 'Chờ xác nhận' && (
+          <View style={styles.containerButton}>
+            <Button
+              title="Xác nhận"
+              onPress={() => {
+              }}
+              backgroundColor={R.colors.blue}
+              textColor={R.colors.white}
+              height={30}
+              borderRadius={15}
+              fontSize={R.sizes.sm}
+              fontWeight={'600'}
+              fontFamily={R.fonts.fontMedium}
+              paddingHorizontal={15}
+              paddingVertical={3}
+              marginRight={10}
+            />
+            <Button
+              title="Từ chối"
+              onPress={() => {
+                // Xử lý từ chối
+              }}
+              backgroundColor={R.colors.brown}
+              textColor={R.colors.white}
+              height={30}
+              borderRadius={15}
+              fontSize={R.sizes.sm}
+              fontWeight={'600'}
+              fontFamily={R.fonts.fontMedium}
+              paddingHorizontal={15}
+              paddingVertical={3}
+            />
+          </View>
+        )}
+      </View>
+    );
+  };
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'Chờ xác nhận':
+        return R.colors.blue;
+      case 'Đã xác nhận':
+        return R.colors.green;
+      case 'Từ chối':
+        return R.colors.brown;
+    }
+  };
+  return (
+    <View style={styles.container}>
+      <Header title={'Xác nhận dạy thay'} 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 SubTeacherView;