TODO: Đã hoàn thiện màn hình lịch báo bù theo từng học phần

src/routers/StackNavigation.js

@@ -15,6 +15,8 @@ import DetailFeedBack from '../screens/feedback/detail';
 import ListRestReport from '../screens/list_rest_report';
 import AbsenceListByCourse from '../screens/list_rest_report/detail';
 import RegisterAbsence from '../screens/list_rest_report/add';
+import CompensateView from '../screens/compensate';
+import DetailCompensateView from '../screens/compensate/list'; 
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -38,6 +40,8 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.LISTRESTREPORT} component={ListRestReport}/>
       <Stack.Screen name={ScreenName.ABSENCELISTBYCOURSE} component={AbsenceListByCourse}/>
       <Stack.Screen name={ScreenName.REGISTERABSENCE} component={RegisterAbsence}/>
+      <Stack.Screen name={ScreenName.LISTMAKEUPCLASSES} component={CompensateView}/>
+      <Stack.Screen name={ScreenName.MAKEUPSCHEDULELISTBYCOURSE} component={DetailCompensateView}/>
     </Stack.Navigator>
   );
 }

src/screens/compensate/index.js

+import React, { useState } from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import CompensateView from './view';
+
+const Compensate = (props) => {
+   const [dataList, setDataList] = useState([
+      {id: 1, classCode: 'ATTT2024.1', rest: 5, compensate: 0, total: 25},
+      {id: 2, classCode: 'ATTT2024.2', rest: 4, compensate: 1, total: 25},
+      {id: 3, classCode: 'ATTT2024.3', rest: 6, compensate: 0, total: 25},
+      {id: 4, classCode: 'ATTT2024.4', rest: 3, compensate: 2, total: 25},
+      {id: 5, classCode: 'ATTT2024.5', rest: 5, compensate: 0, total: 25},
+  
+      {id: 6, classCode: 'CNTT2024.1', rest: 2, compensate: 1, total: 25},
+      {id: 7, classCode: 'CNTT2024.2', rest: 4, compensate: 0, total: 25},
+      {id: 8, classCode: 'CNTT2024.3', rest: 5, compensate: 0, total: 25},
+      {id: 9, classCode: 'CNTT2024.4', rest: 3, compensate: 1, total: 25},
+      {id: 10, classCode: 'CNTT2024.5', rest: 6, compensate: 0, total: 25},
+  
+      {id: 11, classCode: 'KTPM2024.1', rest: 4, compensate: 1, total: 25},
+      {id: 12, classCode: 'KTPM2024.2', rest: 2, compensate: 2, total: 25},
+      {id: 13, classCode: 'KTPM2024.3', rest: 5, compensate: 0, total: 25},
+      {id: 14, classCode: 'KTPM2024.4', rest: 4, compensate: 0, total: 25},
+      {id: 15, classCode: 'KTPM2024.5', rest: 3, compensate: 1, total: 25},
+  
+      {id: 16, classCode: 'HTTT2024.1', rest: 5, compensate: 0, total: 25},
+      {id: 17, classCode: 'HTTT2024.2', rest: 6, compensate: 0, total: 25},
+      {id: 18, classCode: 'HTTT2024.3', rest: 3, compensate: 2, total: 25},
+      {id: 19, classCode: 'HTTT2024.4', rest: 4, compensate: 1, total: 25},
+      {id: 20, classCode: 'HTTT2024.5', rest: 5, compensate: 0, total: 25},
+  
+      {id: 21, classCode: 'KHMT2024.1', rest: 4, compensate: 0, total: 25},
+      {id: 22, classCode: 'KHMT2024.2', rest: 5, compensate: 1, total: 25},
+      {id: 23, classCode: 'KHMT2024.3', rest: 6, compensate: 0, total: 25},
+      {id: 24, classCode: 'KHMT2024.4', rest: 3, compensate: 1, total: 25},
+      {id: 25, classCode: 'KHMT2024.5', rest: 5, compensate: 0, total: 25},
+  
+      {id: 26, classCode: 'MMT2024.1', rest: 4, compensate: 1, total: 25},
+      {id: 27, classCode: 'MMT2024.2', rest: 2, compensate: 0, total: 25},
+      {id: 28, classCode: 'MMT2024.3', rest: 5, compensate: 0, total: 25},
+      {id: 29, classCode: 'MMT2024.4', rest: 3, compensate: 2, total: 25},
+      {id: 30, classCode: 'MMT2024.5', rest: 6, compensate: 0, total: 25},
+    ]);
+  return (
+    <CompensateView dataList={dataList} />
+  );
+};
+
+export default Compensate;

src/screens/compensate/list/index.js

+import React, { useState } from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import DetailCompensateView from './view';
+
+const DetailCompensate = (props) => {
+   const [item, setItem] = useState({
+      rest: 5,
+      compensate: 0,
+      total: 25,
+    });
+    
+    const [itemDetail, setItemDetail] = useState({
+      rest: 5,
+      compensate: 0,
+      total: 25,
+    });
+    
+    const [listData, setDataList] = useState([
+      {
+        id:1,
+        date:'2024-01-01',
+        status:'Đã xác nhận',
+        dayOfWeek:'Thứ 2',
+        periods:[
+          {
+           id:1,
+           time:'6',
+          },
+          {
+            id:2,
+            time:'7',
+          },
+          {
+            id:3,
+            time:'8',
+          },
+          {
+            id:4,
+            time:'9',
+          }
+        ],
+        dateStudy:'30/07/2025',
+        location:'Phòng B2.12',
+        teacher:'Nguyễn Minh Đức',
+        note:'',
+      },
+      {
+        id:2,
+        date:'2024-01-01',
+        status:'Chờ phê duyệt',
+        dayOfWeek:'Thứ 2',
+        periods:[
+          {
+           id:1,
+           time:'6',
+          },
+          {
+            id:2,
+            time:'7',
+          },
+          {
+            id:3,
+            time:'8',
+          },
+          {
+            id:4,
+            time:'9',
+          }
+        ],
+        dateStudy:'30/07/2025',
+        location:'Phòng B2.12',
+        teacher:'',
+        note:'',
+      },
+      {
+        id:3,
+        date:'2024-01-01',
+        status:'Từ chối',
+        dayOfWeek:'Thứ 2',
+        periods:[
+          {
+           id:1,
+           time:'6',
+          },
+          {
+            id:2,
+            time:'7',
+          },
+          {
+            id:3,
+            time:'8',
+          },
+          {
+            id:4,
+            time:'9',
+          }
+        ],
+        dateStudy:'30/07/2025',
+        location:'Phòng B2.12',
+        teacher:'',
+        note:'',
+      },
+      {
+        id:4,
+        date:'2024-01-01',
+        status:'Đã xác nhận',
+        dayOfWeek:'Thứ 2',
+        periods:[
+          {
+           id:1,
+           time:'6',
+          },
+          {
+            id:2,
+            time:'7',
+          },
+          {
+            id:3,
+            time:'8',
+          },
+          {
+            id:4,
+            time:'9',
+          }
+        ],
+        dateStudy:'30/07/2025',
+        location:'Phòng B2.12',
+        teacher:'',
+        note:'',
+      },
+      {
+        id:5,
+        date:'2024-01-01',
+        status:'Đã xác nhận',
+        dayOfWeek:'Thứ 2',
+        periods:[
+          {
+           id:1,
+           time:'6',
+          },
+          {
+            id:2,
+            time:'7',
+          },
+          {
+            id:3,
+            time:'8',
+          },
+          {
+            id:4,
+            time:'9',
+          }
+        ],
+        dateStudy:'30/07/2025',
+        location:'Phòng B2.12',
+        teacher:'',
+        note:'',
+      },
+    ])
+  return (
+    <DetailCompensateView item={item} listData={listData} itemDetail={itemDetail}/>
+  );
+};
+
+export default DetailCompensate;

src/screens/compensate/list/style.js

+import { StyleSheet, Text, View } from 'react-native'
+import R from '../../../assets/R';
+
+const styles = StyleSheet.create({
+    container:{
+        flex:1,
+        backgroundColor:R.colors.white
+    },
+    body:{
+        flex:1,
+        backgroundColor:R.colors.white
+    },
+    text:{
+        fontSize:R.fontsize.fontSizeSubTitle,
+        fontFamily:R.fonts.fontRegular,
+        fontWeight:'400',
+        color:R.colors.black,
+    },
+    card:{
+        borderRadius:10,
+        
+        marginVertical:10,
+        backgroundColor:R.colors.white,
+        shadowColor:R.colors.black,
+        shadowOffset:{width:0,height:2},
+        shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
+        shadowRadius:5,
+        elevation:Platform.OS === 'ios' ? 1 : 2,
+        marginHorizontal:15,
+    }
+})
+
+export default styles;
\ No newline at end of file

src/screens/compensate/list/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet, FlatList} from 'react-native';
+import styles from './style';
+import Header from '../../../components/Header/Header';
+import R from '../../../assets/R';
+import Button from '../../../components/Button';
+const DetailCompensateView = (props) => {
+  const {item, listData, itemDetail} = props;
+  console.log(item);
+  console.log(listData);
+  console.log(itemDetail);
+  
+
+  const getColor = status => {
+    switch (status) {
+      case 'Đã xác nhận':
+        return R.colors.green1;
+      case 'Chờ phê duyệt':
+        return R.colors.blue;
+      case 'Từ chối':
+        return R.colors.red;
+    }
+  };
+  const renderItem = ({item}) => {
+    return (
+      <View style={styles.card}>
+        <View
+          style={{
+            backgroundColor: R.colors.white,
+            borderTopRightRadius: 10,
+            borderTopLeftRadius: 10,
+          }}>
+          <View style={{borderTopRightRadius:10, borderTopLeftRadius:10, backgroundColor:getColor(item.status)}}>
+            <Text style={[styles.text, {fontSize: R.sizes.sm, paddingHorizontal:10, paddingVertical:2, color:R.colors.white , fontWeight:'bold', fontFamily:R.fonts.fontMedium,}]}>
+              <Text style={{fontSize: R.sizes.sm ,color:R.colors.white}}>{item.status}</Text>
+            </Text>
+          </View>
+        </View>
+
+        <View style={{paddingHorizontal:10, paddingTop:3, paddingBottom:10}}>
+          {/* Row 1 */}
+          <View
+            style={{
+              flexDirection: 'row',
+            }}>
+            <View style={{flex: 1}}>
+              <Text style={[styles.text, {fontSize: 11}]}>
+                Ngày báo nghỉ: {item.date}
+              </Text>
+            </View>
+            {/* <View style={{flex: 1}}>
+              <Text style={[styles.text, {fontSize: R.sizes.sm}]}>
+                Tình trạng: <Text style={{color: getColor(item.status)}}>{item.status}</Text>
+              </Text>
+            </View> */}
+          </View>
+          {/* Row 2 */}
+          <View>
+            <Text style={[styles.text, {fontSize:11}]}>
+              Thời gian nghỉ:{item.dayOfWeek} - Tiết:{' '}
+              {item.periods.map((item, index) => {
+                return <Text key={index}>{item.time},</Text>;
+              })}{' '}
+              - Ngày:{item.dateStudy}
+            </Text>
+          </View>
+          {/* Row 3 */}
+          <View style={{}}>
+            <Text style={[styles.text, {fontSize:11}]}>Địa điểm: {item.location}</Text>
+          </View>
+          {/* Row 4 */}
+          <View style={{}}>
+            <Text style={[styles.text, {fontSize:11}]}>Giảng viên thay thế: {item.teacher}
+            </Text>
+          </View>
+          {/* Row 5 */}
+          <View style={{}}>
+            <Text style={[styles.text, {fontSize:11}]}>Ghi chú: {item.note}</Text>
+          </View>
+
+          
+          {
+            item.status === 'Chờ phê duyệt' && (
+              <View style={{alignItems:'flex-end'}}>
+              <Button
+              title='Huỷ'
+              onPress={()=>{}}
+              backgroundColor={R.colors.brown}
+              textColor={R.colors.white}
+              height={25}
+              width={90}
+              borderRadius={15}
+              fontSize={11}
+              fontWeight={'600'}
+              fontFamily={R.fonts.fontMedium}
+              paddingHorizontal={15}
+              />
+              </View>            
+            )
+          }
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Header title={'ATTT2024.1'} isBack />
+      <View style={styles.body}>
+        <View style={{alignItems: 'center', marginTop:10}}>
+          <Text style={[styles.text]}>Nghỉ / Bù / Tổng</Text>
+          <Text style={[styles.text]}>
+            {itemDetail?.rest} / {itemDetail?.compensate} / {itemDetail?.total}
+          </Text>
+        </View>
+        <FlatList
+          data={listData || []}
+          renderItem={renderItem}
+          showsVerticalScrollIndicator={false}
+          vertical
+          keyExtractor={(item, index) => `${index}`}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default DetailCompensateView;

src/screens/compensate/register/index.js

+import React from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import CompensateRegisterView from './view';
+
+const CompensateRegister = (props) => {
+  return (
+    <CompensateRegisterView />
+  );
+};
+
+export default CompensateRegister;

src/screens/compensate/register/style.js

+import { StyleSheet, Text, View } from 'react-native'
+
+const styles = StyleSheet.create({
+container:{
+        flex:1,
+        backgroundColor:R.colors.white,
+    },
+    body:{
+        flex:1,
+        backgroundColor:R.colors.white,
+    },
+})
+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 styles from './style';
+
+const CompensateRegisterView = (props) => {
+  const {  } = props;
+  return (
+    <View
+      style={styles.container}>
+      <TouchableOpacity>
+        <Text>CompensateRegister</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default CompensateRegisterView;

src/screens/compensate/style.js

+import { StyleSheet, Text, View } from 'react-native'
+import R from '../../assets/R'
+
+const styles = StyleSheet.create({
+    container:{
+        flex:1,
+        backgroundColor:R.colors.white,
+    },
+    body:{
+        flex:1,
+        backgroundColor:R.colors.white,
+    },
+    card: {
+        borderRadius: 10,
+        padding: 5,
+        marginTop: 15,
+        marginBottom:5,
+        marginHorizontal: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+    
+        backgroundColor: R.colors.white,
+        shadowColor: R.colors.black,
+        shadowOffset: {width: 0.5, height: 2},
+        shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
+        shadowRadius: 5,
+        elevation: Platform.OS === 'ios' ? 1 : 2,
+      },
+      btnCard: {
+        borderRadius: 10,
+        borderWidth: 1,
+        padding: 5,
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderColor: R.colors.grayBorderInputTextHeader,
+      },
+      text: {
+        fontSize: R.sizes.sm,
+        color: R.colors.black,
+        fontFamily: R.fonts.fontRegular,
+        fontWeight: '400',
+      },
+      containerCard: {
+        padding: 10,
+        borderRadius: 10,
+        marginVertical:10,
+        backgroundColor: R.colors.white,
+        shadowColor: R.colors.black,
+        shadowOffset: {width: 0, height: 2},
+        shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
+        shadowRadius: 1,
+        elevation: Platform.OS === 'ios' ? 1 : 2,
+        marginHorizontal: 15,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      },
+      containerText: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      btnRight: {},
+    
+      btnRegister:{
+        borderRadius:10,
+        alignItems:'center',
+        justifyContent:'center',
+        marginHorizontal:15,
+        marginVertical:10,
+        backgroundColor:R.colors.blue,
+        borderRadius:10,
+        padding:5
+      }
+    
+})
+
+export default styles

src/screens/compensate/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet, FlatList, Image} from 'react-native';
+import styles from './style';
+import Header from '../../components/Header/Header';
+import R from '../../assets/R';
+import*as SCREENNAME from '../../routers/ScreenNames';
+import { useNavigation } from '@react-navigation/native';
+const CompensateView = (props) => {
+  const {dataList} = props;
+  const navigation = useNavigation();
+  const renderItem = ({item}) => {
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          navigation.navigate(SCREENNAME.MAKEUPSCHEDULELISTBYCOURSE);
+        }}
+        style={styles.containerCard}>
+        <View>
+          <Text
+            style={[
+              styles.text,
+              {
+                fontWeight: '600',
+                fontFamily: R.fonts.fontMedium,
+                color: R.colors.blue,
+              },
+            ]}>
+            Lớp: {item.classCode}
+          </Text>
+        </View>
+
+        <View style={{alignItems:'center'}}>
+          <Text style={[styles.text]}>Nghỉ / Bù / Tổng</Text>
+          <Text style={[styles.text]}>
+            {item.rest} / {item.compensate} / {item.total}
+          </Text>
+        </View>
+
+        <View style={styles.btnRight}>
+          <Image
+            source={R.images.icNext}
+            style={{width: 20, height: 20}}
+            resizeMode="contain"
+            tintColor={R.colors.black}
+          />
+        </View>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <View style={styles.container}>
+      <Header title={'Báo bù lịch dạy'} isBack />
+      <View style={styles.body}>
+        <View style={styles.card}>
+          <TouchableOpacity style={styles.btnCard}>
+            <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
+          </TouchableOpacity>
+        </View>
+        <FlatList
+          data={dataList || []}
+          renderItem={renderItem}
+          showsVerticalScrollIndicator={false}
+          vertical
+          keyExtractor={(item, index) => `${index}`}
+        />
+          <TouchableOpacity style={styles.btnRegister} onPress={ () => navigation.navigate(ScreenName.REGISTERABSENCE)}>
+            <Text style={[styles.text, {color:R.colors.white}]}>Đăng kí báo bù</Text>
+          </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default CompensateView;