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/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,42 +13,98 @@ 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}>
+  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}>
+          <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>
+
+        {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>
-    )
-  }
           
-  const renderSchedule = (item) =>{
+            </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 />
@@ -85,14 +147,18 @@ const CompensateRegisterView = props => {
           </View>
           <View style={styles.containerDropDown}>
             <View style={{flexDirection: 'row'}}>
-            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Mã lớp </Text> 
+              <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={[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ù'} />
@@ -140,8 +206,7 @@ const CompensateRegisterView = props => {
             />
           </View>
 
-        {renderSchedule()}
-
+          <ScrollView horizontal>{renderSchedule()}</ScrollView>
         </View>
       </ScrollView>
     </View>