TODO: Bổ sung thêm màn screen chi tiết danh sách lịch học

src/routers/StackNavigation.js

@@ -19,6 +19,7 @@ import CompensateView from '../screens/compensate';
 import DetailCompensateView from '../screens/compensate/list'; 
 import CompensateRegisterView from '../screens/compensate/register';
 import DrawerNavigationView from '../routers/drawer_schedule';
+import DetailClassSchedule from '../screens/class_schedule/detail';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -46,6 +47,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.MAKEUPSCHEDULELISTBYCOURSE} component={DetailCompensateView}/>
       <Stack.Screen name={ScreenName.REGISTERMAKEUP} component={CompensateRegisterView}/>
       <Stack.Screen name={ScreenName.FILTERMONTH} component={DrawerNavigationView}/>
+      <Stack.Screen name={ScreenName.DETAILSCHEDULE} component={DetailClassSchedule}/>
     </Stack.Navigator>
   );
 }

src/screens/class_schedule/detail/style.js

 import { StyleSheet, Text, View } from 'react-native'
+import R from '../../../assets/R'
 
 const styles = StyleSheet.create({
-    
+    container: {
+        flex: 1,
+      },
+      back_button: {
+        position: 'absolute',
+        top: 20,
+        left: 15,
+      },
+      background_header: {
+        width: '100%',
+        height: 178,
+      },
+      text_title: {
+        fontSize: R.fontsize.fontSizeSubTitle,
+        fontWeight: '500',
+        fontFamily: R.fonts.InterRegular,
+        color: R.colors.blue,
+      },
+      container_content: {
+        padding: 15,
+      },
+      text_content: {
+        fontSize: R.fontsize.fontSizeLabel,
+        fontWeight: '500',
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.black,
+      },
 })
 export default styles
\ No newline at end of file

src/screens/class_schedule/detail/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
-
+import { Text, View, TouchableOpacity, StyleSheet, ImageBackground, Image } from 'react-native';
+import R from '../../../assets/R';
+import styles from './style';
+import { useNavigation } from '@react-navigation/native';
 const DetailClassScheduleView = (props) => {
   const {  } = props;
+  const navigate = useNavigation();
+  const ArrowLeftIcon = R.images.icBack;
   return (
     <View
-      style={{
-        
-      }}>
-      <TouchableOpacity>
-        <Text>DetailClassSchedule</Text>
+    style={styles.container}
+    >
+     <ImageBackground
+        source={R.images.igBackground}
+        style={styles.background_header}
+      >
+        <TouchableOpacity style={styles.back_button} onPress={() => navigate.goBack()}>
+          <Image source={ArrowLeftIcon} style= {{width:20, height:15}}/>
         </TouchableOpacity>
+      </ImageBackground>
+      <View style={styles.container_content}>
+        <Text style={styles.text_title}>Lịch dạy lớp IT0032.47.T1</Text>
+        <Text style={styles.text_content}>Thứ 6: 25/07/2025, 07:00 - 09:00</Text>
+        <View style={[styles.container_content, { paddingHorizontal: 15, paddingVertical: 5 }]}>
+          <Text style={styles.text_content}>Vị trí: Phòng B205</Text>
+          <Text style={styles.text_content}>Sĩ số: 40</Text>
+          <Text style={styles.text_content}>Lớp học: Thực hành</Text>
+          <Text style={styles.text_content}>Hình thức học: Trực tiếp</Text>
+        </View>
+      </View>
     </View>
   );
 };

src/screens/class_schedule/view.js

@@ -177,7 +177,7 @@ const ClassScheduleView = ({
               <TouchableOpacity
                 key={event.id}
                 style={styles.eventCard}
-                onPress={() => navigation.navigate(SCREENNAME.DETAILCLASSSCHEDULE, { event })}
+                onPress={() => navigation.navigate(SCREENNAME.DETAILSCHEDULE, { event })}
                 activeOpacity={0.7}>
 
                 <View style={styles.eventTimeContainer}>