TODO: Đã hoàn thiện giao diện lịch báo nghỉ theo học phần

src/assets/colors.js

@@ -22,6 +22,7 @@ const colors = {
   brown: 'rgba(254, 184, 91, 0.55)',
 
   green: 'rgba(0, 255, 21, 1)',
+  green1: 'rgb(9, 193, 25)',
 
   red: 'rgba(255, 47, 48, 1)',
 

src/routers/StackNavigation.js

@@ -24,7 +24,7 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.REGISTERABSENCE}>
+      initialRouteName={ScreenName.ABSENCELISTBYCOURSE}>
       <Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />

src/screens/list_rest_report/detail/index.js

-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import AbsenceListByCourseView from './view';
 
 const AbsenceListByCourse = (props) => {
+  const [item, setItem] = 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:'',
+    },
+
+  ])
   return (
-    <AbsenceListByCourseView />
+    <AbsenceListByCourseView 
+      item={item} 
+    listData={listData}
+    />
   );
 };
 

src/screens/list_rest_report/detail/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/list_rest_report/detail/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+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 AbsenceListByCourseView = props => {
+  const {item, listData} = props;
+
+  const getColor = status => {
+    switch (status) {
+      case 'Đã xác nhận':
+        return R.colors.green1;
+      case 'Chờ phê duyệt':
+        return R.colors.blue;
+    }
+  };
+  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 === 'Đã xác nhận' && (
+              <View style={{alignItems:'flex-end'}}>
+              <Button
+              title='Báo bù'
+              onPress={()=>{}}
+              backgroundColor={R.colors.blue}
+              textColor={R.colors.white}
+              height={25}
+              width={90}
+              borderRadius={15}
+              fontSize={11}
+              fontWeight={'600'}
+              fontFamily={R.fonts.fontMedium}
+              paddingHorizontal={15}
+              />
+              </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>
+    );
+  };
 
-const AbsenceListByCourseView = (props) => {
-  const {  } = props;
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <TouchableOpacity>
-        <Text>AbsenceListByCourse</Text>
-      </TouchableOpacity>
+    <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]}>
+            {item.rest} / {item.compensate} / {item.total}
+          </Text>
+        </View>
+        <FlatList
+          data={listData || []}
+          renderItem={renderItem}
+          showsVerticalScrollIndicator={false}
+          vertical
+          keyExtractor={(item, index) => `${index}`}
+        />
+      </View>
     </View>
   );
 };
 
 export default AbsenceListByCourseView;
-
-const styles = StyleSheet.create({})
\ No newline at end of file