TODO: Đã kiểm tra giao diện lịch học và refactor code

src/routers/drawer_schedule/drawerView.js

@@ -18,7 +18,6 @@ import FilterWeekView from "../../screens/class_schedule/filterWeek";
 import Filter3Date from "../../screens/class_schedule/filter3day";
 
 const Drawer = createDrawerNavigator();
-const ArrowLeft = R.images.icBack;
 const IconMenu = R.images.icMenu;
 const IconSearch = R.images.icSearch;
 
@@ -58,7 +57,7 @@ const DrawerNavigatorView = (props) => {
 
   const MenuButton = ({ onPress }) => (
     <TouchableOpacity style={styles.menuButton} onPress={onPress}>
-      <Image source={IconMenu} style={{width: 25, height: 20}} tintColor={R.colors.white}/>
+      <Image source={IconMenu} style={styles.icon} tintColor={R.colors.white}/>
     </TouchableOpacity>
   );
 
@@ -126,7 +125,7 @@ const DrawerNavigatorView = (props) => {
         headerRight: () => (
           <View style={styles.headerRightContainer}>
             <TouchableOpacity style={styles.searchButton}>
-              <Image source={IconSearch} style={{width: 25, height: 25}} tintColor={R.colors.white}/>
+              <Image source={IconSearch} style={styles.iconSearch} tintColor={R.colors.white}/>
             </TouchableOpacity>
             <View style={styles.avatarButton} />
           </View>
@@ -198,8 +197,8 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   avatarButton: {
-    width: 30,
-    height: 30,
+    width: 25,
+    height: 25,
     borderRadius: 30,
     backgroundColor: R.colors.white,
   },
@@ -212,10 +211,19 @@ const styles = StyleSheet.create({
     fontSize: R.sizes.lg,
     color: R.colors.white,
     fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
   },
   headerTitleContainer: {
     flexDirection: 'row',
   },
+  icon: {
+    width: 25,
+    height: 20,
+  },
+  iconSearch: {
+    width: 25,
+    height: 25,
+  },
 });
 
 export default connect(mapStateToProps, {})(DrawerNavigatorView);
\ No newline at end of file

src/routers/drawer_schedule/itemDrawer.js

@@ -201,7 +201,7 @@ const styles = StyleSheet.create({
     color: R.colors.black,
     flex: 1, 
     fontFamily: R.fonts.fontMedium,
-    fontWeight: '400',
+    fontWeight: '600',
   },
   filterLabelSelected: {
     color: R.colors.white,
@@ -218,7 +218,7 @@ const styles = StyleSheet.create({
     marginTop: 24,
   },
   sectionTitle: {
-    fontWeight: "400",
+    fontWeight: "600",
     fontFamily: R.fonts.fontMedium,
     marginBottom: 10,
     fontSize: R.sizes.lg,

src/screens/class_schedule/detail/style.js

@@ -4,6 +4,7 @@ import R from '../../../assets/R'
 const styles = StyleSheet.create({
     container: {
         flex: 1,
+        backgroundColor: R.colors.white,
       },
       back_button: {
         position: 'absolute',
@@ -16,8 +17,8 @@ const styles = StyleSheet.create({
       },
       text_title: {
         fontSize: R.fontsize.fontSizeSubTitle,
-        fontWeight: '500',
-        fontFamily: R.fonts.InterRegular,
+        fontWeight: '600',
+        fontFamily: R.fonts.fontMedium,
         color: R.colors.blue,
       },
       container_content: {
@@ -25,9 +26,16 @@ const styles = StyleSheet.create({
       },
       text_content: {
         fontSize: R.fontsize.fontSizeLabel,
-        fontWeight: '500',
-        fontFamily: R.fonts.fontMedium,
+        fontWeight: '400',
+        fontFamily: R.fonts.fontRegular,
         color: R.colors.black,
       },
+      icon:{
+        width:20,
+        height:15,
+      },
+      info:{
+        paddingHorizontal: 15, paddingVertical: 5
+      }
 })
 export default styles
\ No newline at end of file

src/screens/class_schedule/detail/view.js

@@ -16,13 +16,13 @@ const DetailClassScheduleView = (props) => {
         style={styles.background_header}
       >
         <TouchableOpacity style={styles.back_button} onPress={() => navigate.goBack()}>
-          <Image source={ArrowLeftIcon} style= {{width:20, height:15}}/>
+          <Image source={ArrowLeftIcon} style= {styles.icon}/>
         </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 }]}>
+        <View style={[styles.container_content, styles.info]}>
           <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>

src/screens/class_schedule/filter3day/style.js

@@ -56,12 +56,14 @@ const styles = StyleSheet.create({
   },
   dayHeaderText: {
     fontSize: R.fontsize.fontSizeLabel,
-    fontFamily: R.fonts.fontRegular,
+    fontFamily: R.fonts.fontMedium,
     color: R.colors.black,
+    fontWeight: '600',
   },
   todayHeaderText: {
     color: R.colors.black,
-    fontFamily: R.fonts.fontRegular,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
   },
   dayNumberContainer: {
     minWidth: 28,
@@ -78,6 +80,7 @@ const styles = StyleSheet.create({
     fontSize: R.fontsize.fontSizeLabel,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.black,
+    fontWeight: '400',
   },
   todayHeaderNumber: {
     color: R.colors.white,
@@ -125,6 +128,7 @@ const styles = StyleSheet.create({
     fontSize: R.fontsize.fontSizeLabel,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.black,
+    fontWeight: '400',
   },
   eventCard: {
     borderRadius: 8,
@@ -141,11 +145,13 @@ const styles = StyleSheet.create({
     fontSize: R.fontsize.fontSizeLabel,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.white,
+    fontWeight: '400',
   },
   eventTime: {
     fontSize: R.fontsize.fontSizeLabel,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.white,
+    fontWeight: '400',
   },
 });
 

src/screens/class_schedule/filter3day/view.js

@@ -11,9 +11,7 @@ import styles from './style';
 
 const Filter3DayView = (props) => {
   const {
-    navigation,
     currentDate,
-    selectedDate,
     showMonthPicker,
     scrollViewRef,
     panResponder,
@@ -23,7 +21,6 @@ const Filter3DayView = (props) => {
     get3DaysDates,
     isToday,
     handleMonthSelect,
-    toggleMonthPicker,
     calculateEventPosition
   } = props;
 

src/screens/class_schedule/filterWeek/style.js

@@ -46,14 +46,15 @@ const styles = StyleSheet.create({
   },
   dayHeaderText: {
     fontSize: R.fontsize.fontSizeLabel,
-    fontFamily: R.fonts.fontRegular,
-    fontWeight: '400',
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
     color: R.colors.black,
   },
   dayHeaderNumber: {
     fontSize: R.fontsize.fontSizeContent,
     fontFamily: R.fonts.fontMedium,
     color: R.colors.black,
+    fontWeight: '600',
   },
    
   dayHeaderNumberContainerToday: {
@@ -65,6 +66,7 @@ const styles = StyleSheet.create({
     color: R.colors.blue, 
     fontFamily: R.fonts.fontMedium,
     fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '600',
   },
   timeSlotsContainer: {
     flex: 1,
@@ -130,17 +132,20 @@ const styles = StyleSheet.create({
     fontSize: R.fontsize.fontSizeBtn,
     fontFamily: R.fonts.fontMedium,
     color: R.colors.white,
+    fontWeight: '600',
     marginBottom: 1,
   },
   eventSubtitle: {
     fontSize: R.fontsize.fontSizeContent,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.white,
+    fontWeight: '400',
   },
   eventTime: {
     fontSize: R.fontsize.fontSizeContent,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.white,
+    fontWeight: '400',
   },
 });
 

src/screens/class_schedule/filterWeek/view.js

@@ -10,9 +10,7 @@ import R from '../../../assets/R';
 import styles from './style';
 
 const FilterWeekView = ({
-  navigation,
   currentDate,
-  selectedDate,
   showMonthPicker,
   scrollViewRef,
   panResponder,
@@ -23,9 +21,6 @@ const FilterWeekView = ({
   getEventsForDate,
   calculateEventPosition,
   handleMonthSelect,
-  toggleMonthPicker,
-  HOUR_HEIGHT,
-  DAY_COLUMN_WIDTH,
 }) => {
 
   const renderMonthPicker = () => {
@@ -66,7 +61,7 @@ const FilterWeekView = ({
       <View style={styles.weekHeaderContainer}>
         <View style={styles.timeColumnHeader} />
         {weekDates.map((date, index) => {
-          const isCurrentDay = isToday(date); // Gọi hàm kiểm tra
+          const isCurrentDay = isToday(date);
 
           return (
             <View key={index} style={styles.dayHeaderCell}>

src/screens/class_schedule/filterday/index.js

@@ -59,7 +59,7 @@ const FilterDay = ({navigation}) => {
   };
 
   const getDayName = (date) => {
-    const days = ['CN', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7'];
+    const days = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
     return days[date.getDay()];
   };
 

src/screens/class_schedule/filterday/style.js

@@ -35,15 +35,17 @@ const styles = StyleSheet.create({
     borderRightColor:R.colors.gray,
   },
   dayName: {
-    fontSize: R.sizes.xs,
-    fontFamily: R.fonts.fontRegular,
+    fontSize: R.fontsize.fontSizeLabel,
+    fontFamily: R.fonts.fontMedium,
     color: R.colors.black,
+    fontWeight: '600',
     marginBottom: 2,
   },
   dayNumber: {
     fontSize: R.fontsize.fontSizeContent,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.black,
+    fontWeight: '400',
   },
   timeSlotsContainer: {
     flex: 1,
@@ -83,6 +85,7 @@ const styles = StyleSheet.create({
     fontSize: R.fontsize.fontSizeContent,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.black,
+    fontWeight: '400',
   },
   eventCard: {
     borderRadius: 15,

src/screens/class_schedule/filterday/view.js

@@ -9,17 +9,13 @@ import R from '../../../assets/R';
 import styles from './style';
 
 const FilterDayView = (props) => {
-  const {   navigation,
-    currentDate,
+  const {   
     selectedDate,
     showMonthPicker,
     scrollViewRef,
     panResponder,
     getEventsForDate,
     getDayName,
-    getMonthName,
-    handleMonthSelect,
-    toggleMonthPicker,
     calculateEventPosition,  } = props;
 
     const isToday = (date) => {

src/screens/class_schedule/style.js

@@ -47,13 +47,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   weekDayText: {
-      fontFamily: R.fonts.fontRegular,
+    fontFamily: R.fonts.fontMedium,
     fontSize: R.fontsize.fontSizeLabel,
-      fontWeight: '400',
+    fontWeight: '600',
     color: R.colors.black,
   },
-    calendarGrid: {
-    },
+  calendarGrid: {},
   weekRow: {
     flexDirection: 'row',
   },
@@ -72,8 +71,8 @@ const styles = StyleSheet.create({
   },
   dayText: {
     fontSize: R.fontsize.fontSizeLabel,
-      fontWeight: '500',
-      fontFamily:R.fonts.fontSemiBold,
+    fontWeight: '400',
+    fontFamily: R.fonts.fontRegular,
     color: R.colors.black,
     marginBottom: 2,
   },
@@ -91,7 +90,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     fontFamily: R.fonts.fontSemiBold,
     backgroundColor: R.colors.blue,
-      borderRadius:15,
+    borderRadius: 15,
     paddingHorizontal: 4,
     paddingVertical: 3,
   },
@@ -105,19 +104,25 @@ const styles = StyleSheet.create({
     paddingHorizontal: 5,
     borderRadius: 10,
     marginBottom: 2,
-      backgroundColor:R.colors.blue
+    backgroundColor: R.colors.blue,
   },
   eventBarText: {
     fontSize: R.fontsize.fontSizeLabel,
     color: R.colors.white,
-      fontWeight: '500',
-      fontFamily: R.fonts.fontRegular
+    fontWeight: '400',
+    fontFamily: R.fonts.fontRegular,
   },
   moreEventsText: {
-      fontSize: R.sizes.xs,
+    fontSize: R.fontsize.fontSizeLabel,
     color: R.colors.gray,
+    fontWeight: '400',
+    fontFamily: R.fonts.fontRegular,
     textAlign: 'center',
   },
+  containerBottomSheet:{
+    flex:1,
+    marginBottom:10,
+  },
 
   modalBackdrop: {
     flex: 1,
@@ -129,16 +134,16 @@ const styles = StyleSheet.create({
     backgroundColor: R.colors.white,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
-     
   },
   bottomSheetContent: {
-      paddingHorizontal: 15,
+    height: BOTTOM_SHEET_HEIGHT,
+
   },
   dragHandle: {
     width: 40,
     height: 4,
     backgroundColor: R.colors.gray,
-      borderRadius: 2,
+    borderRadius: 5,
     alignSelf: 'center',
     marginTop: 10,
     marginBottom: 15,
@@ -147,12 +152,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-      marginBottom: 20,
+    paddingHorizontal: 15,
   },
   bottomSheetTitle: {
     fontSize: R.fontsize.fontSizeContent,
     fontFamily: R.fonts.fontMedium,
     color: R.colors.black,
+    fontWeight: '600',
     flex: 1,
   },
   closeButton: {
@@ -164,11 +170,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   closeButtonText: {
-      fontSize: R.fontsize.fontsSize12,
+    fontSize: R.fontsize.fontSizeContent,
     color: R.colors.black,
     fontFamily: R.fonts.fontRegular,
+    fontWeight: '400',
+  },
+  eventsScrollView: {
+    paddingTop:10,
   },
-  
   noEventsContainer: {
     flex: 1,
     alignItems: 'center',
@@ -179,14 +188,15 @@ const styles = StyleSheet.create({
     fontSize: R.fontsize.fontSizeContent,
     fontFamily: R.fonts.fontRegular,
     color: R.colors.gray,
-      fontWeight: '400'
+    fontWeight: '400',
   },
   eventCard: {
     flexDirection: 'row',
     backgroundColor: R.colors.white,
     borderRadius: 12,
     padding: 15,
-      marginBottom: 12,
+    marginBottom: 10,
+    marginHorizontal:15,
     borderLeftWidth: 4,
     borderLeftColor: R.colors.blue500,
     shadowColor: R.colors.black,
@@ -223,7 +233,8 @@ const styles = StyleSheet.create({
   eventDescription: {
     fontSize: R.fontsize.fontSizeContent,
     fontFamily: R.fonts.fontRegular,
-      color: R.colors.gray,
+    color: R.colors.gray2,
+    fontWeight: '400',
   },
 });
 

src/screens/class_schedule/view.js

@@ -127,8 +127,6 @@ const ClassScheduleView = ({
     );
   };
 
-
-
   const renderCalendarGrid = () => {
     const weeks = [];
     for (let i = 0; i < 6; i++) {
@@ -152,7 +150,9 @@ const ClassScheduleView = ({
 
     return (
       <View style={styles.bottomSheetContent}>
-        <View style={styles.dragHandle} />
+        <View style={styles.dragHandle} >
+          
+        </View>
 
         <View style={styles.bottomSheetHeader}>
           <Text style={styles.bottomSheetTitle}>
@@ -164,7 +164,6 @@ const ClassScheduleView = ({
             <Text style={styles.closeButtonText}>✕</Text>
           </TouchableOpacity>
         </View>
-
         <ScrollView
           style={styles.eventsScrollView}
           showsVerticalScrollIndicator={false}>
@@ -172,8 +171,9 @@ const ClassScheduleView = ({
             <View style={styles.noEventsContainer}>
               <Text style={styles.noEventsText}>Không có sự kiện nào</Text>
             </View>
-          ) : (
-            selectedEvents.map((event, index) => (
+          ) : 
+          (selectedEvents.map((event, index) => (
+            <View style={styles.containerBottomSheet}>
               <TouchableOpacity
                 key={event.id}
                 style={styles.eventCard}
@@ -198,6 +198,7 @@ const ClassScheduleView = ({
                   )}
                 </View>
               </TouchableOpacity>
+            </View>
             ))
           )}
         </ScrollView>
@@ -226,7 +227,7 @@ const ClassScheduleView = ({
               },
             ]}
             {...panResponder.panHandlers}>
-            <TouchableOpacity activeOpacity={1}>
+            <TouchableOpacity activeOpacity={1} >
               {renderBottomSheetContent()}
             </TouchableOpacity>
           </Animated.View>