TODO: Đã hoàn thiện giao diện cơ bản của bảng lịch học đang bổ sung check box

src/screens/compensate/register/index.js

@@ -9,123 +9,117 @@ const CompensateRegister = (props) => {
     { 
       date: 'Thứ 2\n28/07/2025', 
       periods: [
-        { period: 1, percent: '100%', code: '(24/24)' },
-        { period: 2, percent: '100%', code: '(24/24)' },
-        { period: 3, percent: '100%', code: '(24/24)' },
-        { period: 4, percent: '100%', code: '(24/24)' },
-        { period: 5, percent: '100%', code: '(24/24)' },
-        { period: 6, percent: '100%', code: '(24/24)' },
-        { period: 7, percent: '100%', code: '(24/24)' },
-        { period: 8, percent: '100%', code: '(24/24)' },
-        { period: 9, percent: '100%', code: '(24/24)' },
-        { period: 10, percent: '100%', code: '(24/24)' },
-        { period: 11, percent: '100%', code: '(24/24)' },
-        { period: 12, percent: '100%', code: '(24/24)' },
-        { period: 13, percent: '100%', code: '(24/24)' },
-        { period: 14, percent: '100%', code: '(24/24)' },
-        { period: 15, percent: '100%', code: '(24/24)' }
-      ]
-    },
+        { period: 1, percent: '3%', totalSession: '24' , breakTime:'1'},
+        { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
+      ]    },
     { 
       date: 'Thứ 3\n29/07/2025', 
       periods: [
-        { period: 1, percent: '100%', code: '(24/24)', available: true },
-        { period: 2, percent: '100%', code: '(24/24)', available: true },
-        { period: 3, percent: '100%', code: '(24/24)', available: true },
-        { period: 4, percent: '100%', code: '(24/24)', available: true },
-        { period: 5, percent: '100%', code: '(24/24)', available: true },
-        { period: 6, percent: '100%', code: '(24/24)', available: true },
-        { period: 7, percent: '100%', code: '(24/24)', available: true },
-        { period: 8, percent: '100%', code: '(24/24)', available: true },
-        { period: 9, percent: '100%', code: '(24/24)', available: true },
-        { period: 10, percent: '100%', code: '(24/24)', available: true },
-        { period: 11, percent: '100%', code: '(24/24)', available: true },
-        { period: 12, percent: '100%', code: '(24/24)', available: true },
-        { period: 13, percent: '100%', code: '(24/24)', available: true },
-        { period: 14, percent: '100%', code: '(24/24)', available: true },
-        { period: 15, percent: '100%', code: '(24/24)', available: true }
-      ]
-    },
+        { period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 8, percent: '3%', totalSession: '24' , breakTime:'1'},
+        { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 12, percent: '3%', totalSession: '24' , breakTime:'1'},
+        { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
+      ]    },
     { 
       date: 'Thứ 4\n30/07/2025', 
       periods: [
-        { period: 1, percent: '100%', code: '(24/24)' },
-        { period: 2, percent: '100%', code: '(24/24)' },
-        { period: 3, percent: '100%', code: '(24/24)' },
-        { period: 4, percent: '100%', code: '(24/24)' },
-        { period: 5, percent: '100%', code: '(24/24)' },
-        { period: 6, percent: '100%', code: '(24/24)' },
-        { period: 7, percent: '100%', code: '(24/24)' },
-        { period: 8, percent: '100%', code: '(24/24)' },
-        { period: 9, percent: '100%', code: '(24/24)' },
-        { period: 10, percent: '100%', code: '(24/24)' },
-        { period: 11, percent: '100%', code: '(24/24)' },
-        { period: 12, percent: '100%', code: '(24/24)' },
-        { period: 13, percent: '100%', code: '(24/24)' },
-        { period: 14, percent: '100%', code: '(24/24)' },
-        { period: 15, percent: '100%', code: '(24/24)' }
-      ]
-    },
+        { period: 1, percent: '3%', totalSession: '24' , breakTime:'1'},
+        { period: 2, percent: '3%', totalSession: '24' , breakTime:'1'},
+        { period: 3, percent: '3%', totalSession: '24' , breakTime:'1'},
+        { period: 4, percent: '3%', totalSession: '24' , breakTime:'1'},
+        { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
+      ]  },
     { 
       date: 'Thứ 5\n31/07/2025', 
       periods: [
-        { period: 1, percent: '100%', code: '(24/24)', available: true },
-        { period: 2, percent: '100%', code: '(24/24)', available: true },
-        { period: 3, percent: '100%', code: '(24/24)', available: true },
-        { period: 4, percent: '0%', code: '(0/24)', available: true },
-        { period: 5, percent: '0%', code: '(0/24)', available: true },
-        { period: 6, percent: '0%', code: '(0/24)', available: true },
-        { period: 7, percent: '100%', code: '(24/24)', available: true },
-        { period: 8, percent: '100%', code: '(24/24)', available: true },
-        { period: 9, percent: '100%', code: '(24/24)', available: true },
-        { period: 10, percent: '100%', code: '(24/24)', available: true },
-        { period: 11, percent: '100%', code: '(24/24)', available: true },
-        { period: 12, percent: '100%', code: '(24/24)', available: true },
-        { period: 13, percent: '100%', code: '(24/24)', available: true },
-        { period: 14, percent: '100%', code: '(24/24)', available: true },
-        { period: 15, percent: '100%', code: '(24/24)', available: true }
-      ]
-    },
+        { period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
+      ]    },
     { 
       date: 'Thứ 6\n01/08/2025', 
       periods: [
-        { period: 1, percent: '100%', code: '(24/24)' },
-        { period: 2, percent: '100%', code: '(24/24)' },
-        { period: 3, percent: '100%', code: '(24/24)' },
-        { period: 4, percent: '100%', code: '(24/24)' },
-        { period: 5, percent: '100%', code: '(24/24)' },
-        { period: 6, percent: '100%', code: '(24/24)' },
-        { period: 7, percent: '100%', code: '(24/24)' },
-        { period: 8, percent: '100%', code: '(24/24)' },
-        { period: 9, percent: '100%', code: '(24/24)' },
-        { period: 10, percent: '100%', code: '(24/24)' },
-        { period: 11, percent: '100%', code: '(24/24)' },
-        { period: 12, percent: '100%', code: '(24/24)' },
-        { period: 13, percent: '100%', code: '(24/24)' },
-        { period: 14, percent: '100%', code: '(24/24)' },
-        { period: 15, percent: '100%', code: '(24/24)' }
-      ]
-    },
+        { period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
+      ]    },
     { 
       date: 'Thứ 7\n02/08/2025', 
       periods: [
-        { period: 1, percent: '100%', code: '(24/24)' },
-        { period: 2, percent: '100%', code: '(24/24)' },
-        { period: 3, percent: '100%', code: '(24/24)' },
-        { period: 4, percent: '100%', code: '(24/24)' },
-        { period: 5, percent: '100%', code: '(24/24)' },
-        { period: 6, percent: '100%', code: '(24/24)' },
-        { period: 7, percent: '100%', code: '(24/24)' },
-        { period: 8, percent: '100%', code: '(24/24)' },
-        { period: 9, percent: '100%', code: '(24/24)' },
-        { period: 10, percent: '100%', code: '(24/24)' },
-        { period: 11, percent: '100%', code: '(24/24)' },
-        { period: 12, percent: '100%', code: '(24/24)' },
-        { period: 13, percent: '100%', code: '(24/24)' },
-        { period: 14, percent: '100%', code: '(24/24)' },
-        { period: 15, percent: '100%', code: '(24/24)' }
-      ]
-    }
+        { period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
+        { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
+      ]    }
   ];
 
 

src/screens/compensate/register/style.js

-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View, Dimensions } from 'react-native'
 import R from '../../../assets/R';
+//B1: Xác định chiều rộng cột đầu tiên
+ const width_first = 100;
+ //B2: Xác định chiều rộng của 15 cột tiếp theo
+ const width_second = 110;
+//B3: Xác định số tiết diễn ra trong 1 ngày -> để có kích thước bảng
+const period_count = 15;
+//B4: Xác định chiều rộng của bảng 
+const total_width_table = width_first + (width_second * period_count);
 const styles = StyleSheet.create({
 container:{
         flex:1,
@@ -29,6 +37,13 @@ container:{
     },
 
     //Header bảng lịch
+    tableContainer:{
+        marginTop:15,
+        borderWidth:1,
+        borderColor:R.colors.gray,
+        width:total_width_table,
+    },
+
     headerRow: {
         flexDirection: 'row',
         backgroundColor: R.colors.white,
@@ -43,7 +58,8 @@ container:{
         color: R.colors.black,
       },
     dateColumn: {
-        minHeight: 40,
+        height: 40,
+        width:width_first,
         paddingHorizontal: 10,
         justifyContent: 'center',
         alignItems: 'center',
@@ -52,13 +68,65 @@ container:{
         borderRightColor:R.colors.gray,
       },
     periodColumn: {
-        minHeight: 40,
-        paddingHorizontal: 10,
+        height: 40,
+        width:width_second,
+        paddingHorizontal: 5,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: R.colors.blue2,
         borderRightWidth:1,
         borderRightColor:R.colors.gray,
       },
+      dateBody:{
+        width: width_first,
+        minHeight: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: R.colors.white,
+        borderRightWidth:1,
+        borderRightColor:R.colors.gray,
+      },
+    periodBody:{
+        width: width_second,
+        padding:5,        
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: R.colors.white,
+        borderRightWidth:1,
+        borderRightColor:R.colors.gray,
+    },
+      dataRow: {
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+        borderBottomColor: R.colors.gray,
+        minHeight: 50,
+      },
+      periodCell: {
+        padding: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 50,
+        width: '100%',
+      },
+      dateText:{
+        fontSize: R.sizes.sm,
+        fontWeight: '500',
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.black,
+      },
+      percentText:{
+        fontSize: R.sizes.sm,
+        fontWeight: '500',
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.black,
+      },
+      codeText:{
+        fontSize: R.sizes.sm,
+        fontWeight: '500',
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.black,
+      },
+      
+        
 })
 export default styles
\ No newline at end of file

src/screens/compensate/register/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet, ScrollView} from 'react-native';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
 import styles from './style';
 import Header from '../../../components/Header/Header';
 import TextField from '../../../components/Input/TextField';
@@ -7,142 +13,201 @@ import R from '../../../assets/R';
 import Dropdown from '../../../components/DropdownAlert/Dropdown';
 import TextMulti from '../../../components/Input/TextMulti';
 import Button from '../../../components/Button';
+import CheckBox from '../../../components/CheckBox';
 const CompensateRegisterView = props => {
-  const {
-    isShow,
-    setShowSchedule,
-    scheduleData,
-  } = props;
+  const {isShow, setShowSchedule, scheduleData} = props;
+
+  const getCheckColor = (item) => {
+    console.log(item?.totalSession);
+    if ( item?.breakTime=== item?.totalSession && item?.percent === '100%') {
+      return R.colors.blue;
+    }
+    return R.colors.red;
+  };
+
   const handleToggleSchedule = () => {
     setShowSchedule(prevState => !prevState);
   };
-  //Header Lịch học 
-  const renderHeaderSchedule = () =>{
-    return(
-      <View style= {styles.headerRow}>
-
-        <View style={styles.dateColumn}>
+  //Header Lịch học
+  const renderHeaderSchedule = () => {
+    return (
+      <View style={styles.headerRow}>
+        <View style={[styles.dateColumn, {minWidth: 80}]}>
           <Text style={styles.headerText}>Thứ / Tiết</Text>
         </View>
 
-            {Array.from({length: 15}, (_, i) => (
-            <View key={i} style={styles.periodColumn}>
-              <Text style={styles.headerText}>Tiết {i + 1} </Text>
-            </View>
-          ))}
+        {Array.from({length: 15}, (_, i) => (
+          <View key={i} style={[styles.periodColumn, {backgroundColor: R.colors.blue3}]}>
+            <Text style={styles.headerText}>Tiết {i + 1} </Text>
+          </View>
+        ))}
+      </View>
+    );
+  };
 
+  //Render một dòng của bảng lịch
+  const renderRow = (dayData, index) => {
+    return (
+      <View key={index} style={styles.dataRow}>
+        <View style={styles.dateBody}>
+          <Text
+            style={[
+              styles.dateText,
+              {textAlign: 'center', paddingHorizontal: 2},
+            ]}>
+            {dayData.date}
+          </Text>
         </View>
-    )
-  }
 
-  const renderSchedule = (item) =>{
+        {dayData.periods.map((period, periodIndex) => (
+          <View key={periodIndex} style={styles.periodBody}>
+            <View
+              style={[
+                styles.periodCell,
+                period.available && styles.availableCell,
+              ]}>
+              <CheckBox 
+                size={20}
+                checked={period.available}
+              />
+              <View style={{flexDirection:'row'}}>
+              <Text
+                style={[
+                  styles.percentText,
+                  period.available && styles.availableText,
+                  {color:getCheckColor(period)}
+                ]}>
+                {period.percent}
+              </Text>
+              <Text
+                style={[
+                  styles.codeText,
+                  {color:getCheckColor(period), marginLeft:3},
+                  period.available && styles.availableText,
+                ]}>
+                ({period.breakTime}/{period.totalSession})
+              </Text>
+              </View>
+          
+            </View>
+          </View>
+        ))}
+      </View>
+    );
+  };
+
+  const renderSchedule = item => {
     if (!isShow) return null;
-    return(
-      <ScrollView horizontal  style={{marginTop:15}}>
+    return (
+      <View style={styles.tableContainer}>
         {renderHeaderSchedule()}
-      </ScrollView>
-    )
-  }
+        {scheduleData.map((dayData, index) => renderRow(dayData, index))}
+      </View>
+    );
+  };
   return (
     <View style={styles.container}>
       <Header title={'Đăng kí báo bù'} isBack />
       <ScrollView>
         <View style={styles.body}>
-        <View style={styles.containerInput}>
-          <TextField
-            title={'Học kì'}
-            color={R.colors.black}
-            fontSize={R.sizes.sm}
-            backgroundColor={R.colors.gray}
-            required
-            fontSizeTitle={R.sizes.sm}
-            containerBackgroundColor={R.colors.white}
-            width={'48%'}
-          />
-          <View style={styles.sizedBox}></View>
-          <TextField
-            title={'Năm học'}
-            color={R.colors.black}
-            fontSize={R.sizes.sm}
-            backgroundColor={R.colors.gray}
-            required
-            fontSizeTitle={R.sizes.sm}
-            containerBackgroundColor={R.colors.white}
-            width={'48%'}
-          />
-        </View>
-        <View style={styles.containerInput}>
-          <TextField
-            title={'Mã CBGV'}
-            color={R.colors.black}
-            fontSize={R.sizes.sm}
-            required
-            backgroundColor={R.colors.gray}
-            fontSizeTitle={R.sizes.sm}
-            width={'100%'}
-            containerBackgroundColor={R.colors.white}
-          />
-        </View>
-        <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 style={styles.containerInput}>
+            <TextField
+              title={'Học kì'}
+              color={R.colors.black}
+              fontSize={R.sizes.sm}
+              backgroundColor={R.colors.gray}
+              required
+              fontSizeTitle={R.sizes.sm}
+              containerBackgroundColor={R.colors.white}
+              width={'48%'}
+            />
+            <View style={styles.sizedBox}></View>
+            <TextField
+              title={'Năm học'}
+              color={R.colors.black}
+              fontSize={R.sizes.sm}
+              backgroundColor={R.colors.gray}
+              required
+              fontSizeTitle={R.sizes.sm}
+              containerBackgroundColor={R.colors.white}
+              width={'48%'}
+            />
           </View>
-          <Dropdown title={'Giảng viên thay thế'} />
-        </View>
-        <View style={styles.containerDropDown}>
-          <View style={{flexDirection: 'row'}}>
-            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Lịch báo cần bù </Text>
-            <Text style={{color: R.colors.red}}>*</Text>
+          <View style={styles.containerInput}>
+            <TextField
+              title={'Mã CBGV'}
+              color={R.colors.black}
+              fontSize={R.sizes.sm}
+              required
+              backgroundColor={R.colors.gray}
+              fontSizeTitle={R.sizes.sm}
+              width={'100%'}
+              containerBackgroundColor={R.colors.white}
+            />
           </View>
-          <Dropdown title={'Lịch báo cần bù'} />
-        </View>
-        <View style={styles.containerInput}>
-          <TextField
-            title={'Số tiết đã nghỉ'}
-            color={R.colors.black}
-            fontSize={R.sizes.sm}
-            backgroundColor={R.colors.white}
-            fontSizeTitle={R.sizes.sm}
-            containerBackgroundColor={R.colors.white}
-            width={'38%'}
-          />
-          <View style={styles.sizedBox}></View>
-          <TextField
-            title={'Ngày học bù'}
+          <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={'Giảng viên thay thế'} />
+          </View>
+          <View style={styles.containerDropDown}>
+            <View style={{flexDirection: 'row'}}>
+              <Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
+                Lịch báo cần bù{' '}
+              </Text>
+              <Text style={{color: R.colors.red}}>*</Text>
+            </View>
+            <Dropdown title={'Lịch báo cần bù'} />
+          </View>
+          <View style={styles.containerInput}>
+            <TextField
+              title={'Số tiết đã nghỉ'}
+              color={R.colors.black}
+              fontSize={R.sizes.sm}
+              backgroundColor={R.colors.white}
+              fontSizeTitle={R.sizes.sm}
+              containerBackgroundColor={R.colors.white}
+              width={'38%'}
+            />
+            <View style={styles.sizedBox}></View>
+            <TextField
+              title={'Ngày học bù'}
+              color={R.colors.black}
+              fontSize={R.sizes.sm}
+              backgroundColor={R.colors.white}
+              required
+              fontSizeTitle={R.sizes.sm}
+              containerBackgroundColor={R.colors.white}
+              width={'58%'}
+            />
+          </View>
+          <TextMulti
+            title={'Ghi chú'}
             color={R.colors.black}
             fontSize={R.sizes.sm}
-            backgroundColor={R.colors.white}
-            required
-            fontSizeTitle={R.sizes.sm}
+            titleFontSize={R.sizes.sm}
+            containerMarginBottom={15}
             containerBackgroundColor={R.colors.white}
-            width={'58%'}
-          />
-        </View>
-        <TextMulti
-          title={'Ghi chú'}
-          color={R.colors.black}
-          fontSize={R.sizes.sm}
-          titleFontSize={R.sizes.sm}
-          containerMarginBottom={15}
-          containerBackgroundColor={R.colors.white}
-        />
-        <View style={styles.btnRegister}>
-          <Button
-            title={isShow ? 'Đóng' : 'Xem lịch rảnh SV'}
-            textColor={R.colors.white}
-            onPress={handleToggleSchedule}
-            backgroundColor={R.colors.blue}
-            fontSize={R.sizes.sm}
-            fontFamily={R.fonts.fontMedium}
-            height={35}
-            containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
           />
-        </View>
-
-        {renderSchedule()}
+          <View style={styles.btnRegister}>
+            <Button
+              title={isShow ? 'Đóng' : 'Xem lịch rảnh SV'}
+              textColor={R.colors.white}
+              onPress={handleToggleSchedule}
+              backgroundColor={R.colors.blue}
+              fontSize={R.sizes.sm}
+              fontFamily={R.fonts.fontMedium}
+              height={35}
+              containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
+            />
+          </View>
 
-      </View>
+          <ScrollView horizontal>{renderSchedule()}</ScrollView>
+        </View>
       </ScrollView>
     </View>
   );