TODO: Đã hoàn thiện được header lịch học

src/screens/compensate/register/index.js

@@ -5,7 +5,128 @@ import CompensateRegisterView from './view';
 const CompensateRegister = (props) => {
   const [isShow, setShowSchedule] = useState(false);
 
- 
+  const scheduleData = [
+    { 
+      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)' }
+      ]
+    },
+    { 
+      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 }
+      ]
+    },
+    { 
+      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)' }
+      ]
+    },
+    { 
+      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 }
+      ]
+    },
+    { 
+      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)' }
+      ]
+    },
+    { 
+      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)' }
+      ]
+    }
+  ];
 
 
 
@@ -14,6 +135,7 @@ const CompensateRegister = (props) => {
     <CompensateRegisterView 
       isShow={isShow}
       setShowSchedule={setShowSchedule}
+      scheduleData={scheduleData}
     />
   );
 };

src/screens/compensate/register/style.js

@@ -26,6 +26,39 @@ container:{
     },
     btnRegister:{
         alignItems:'flex-end',
-    }
+    },
+
+    //Header bảng lịch
+    headerRow: {
+        flexDirection: 'row',
+        backgroundColor: R.colors.white,
+        borderBottomWidth: 1,
+        borderBottomColor: R.colors.gray,
+      },
+    
+    headerText: {
+        fontSize: R.sizes.sm,
+        fontWeight: '500',
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.black,
+      },
+    dateColumn: {
+        minHeight: 40,
+        paddingHorizontal: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: R.colors.blue2,
+        borderRightWidth:1,
+        borderRightColor:R.colors.gray,
+      },
+    periodColumn: {
+        minHeight: 40,
+        paddingHorizontal: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: R.colors.blue2,
+        borderRightWidth:1,
+        borderRightColor:R.colors.gray,
+      },
 })
 export default styles
\ No newline at end of file

src/screens/compensate/register/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} 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';
@@ -11,22 +11,42 @@ const CompensateRegisterView = props => {
   const {
     isShow,
     setShowSchedule,
+    scheduleData,
   } = props;
   const handleToggleSchedule = () => {
     setShowSchedule(prevState => !prevState);
   };
+  //Header Lịch học 
+  const renderHeaderSchedule = () =>{
+    return(
+      <View style= {styles.headerRow}>
+
+        <View style={styles.dateColumn}>
+          <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>
+          ))}
+
+        </View>
+    )
+  }
 
   const renderSchedule = (item) =>{
     if (!isShow) return null;
     return(
-      <View>
-        <Text> hi</Text>
-      </View>
+      <ScrollView horizontal  style={{marginTop:15}}>
+        {renderHeaderSchedule()}
+      </ScrollView>
     )
   }
   return (
     <View style={styles.container}>
       <Header title={'Đăng kí báo bù'} isBack />
+      <ScrollView>
         <View style={styles.body}>
         <View style={styles.containerInput}>
           <TextField
@@ -123,6 +143,7 @@ const CompensateRegisterView = props => {
         {renderSchedule()}
 
       </View>
+      </ScrollView>
     </View>
   );
 };