TODO: Đã hoàn thiện giao diện điểm danh

src/screens/exam_schedule/index.js

-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import ExamScheduleView from './view';
 
-const ExamSchedule = (props) => {
-    const [dataExamSchedule, setDataExamSchedule] = useState([
-        {
-            id: 1,
-            code_exam: 'MD001',
-            code_class:'MD0081',
-            poetry:'123 (7:30 - 10:30)',
-            time_exam:'2025-08-05',
-            class_exam:'A98',
-            day_exam:'Thứ 3',
-            description: 'Bảo vệ/ DA',
-        },
-        {
-            id: 2,
-            code_exam: 'MD001',
-            code_class:'MD0081',
-            poetry:'123 (7:30 - 10:30)',
-            time_exam:'2025-08-05',
-            class_exam:'A98',
-            day_exam:'Thứ 3',
-            description: 'Bảo vệ/ DA',
-        },
-        {
-            id: 3,
-            code_exam: 'MD001',
-            code_class:'MD0081',
-            poetry:'123 (7:30 - 10:30)',
-            time_exam:'2025-08-05',
-            class_exam:'A98',
-            day_exam:'Thứ 3',
-            description: 'Bảo vệ/ DA',
-        },
-        {
-            id: 4,
-            code_exam: 'MD001',
-            code_class:'MD0081',
-            poetry:'123 (7:30 - 10:30)',
-            time_exam:'2025-08-05',
-            class_exam:'A98',
-            day_exam:'Thứ 3',
-            description: 'Bảo vệ/ DA',
-        },
-        {
-            id: 5,
-            code_exam: 'MD001',
-            code_class:'MD0081',
-            poetry:'123 (7:30 - 10:30)',
-            time_exam:'2025-08-05',
-            class_exam:'A98',
-            day_exam:'Thứ 3',
-            description: 'Bảo vệ/ DA',
-        },
-        {
-            id: 6,
-            code_exam: 'MD001',
-            code_class:'MD0081',
-            poetry:'123 (7:30 - 10:30)',
-            time_exam:'2025-08-05',
-            class_exam:'A98',
-            day_exam:'Thứ 3',
-            description: 'Bảo vệ/ DA',
-        },
-    ]);
+const ExamSchedule = props => {
+  const [dataExamSchedule, setDataExamSchedule] = useState([
+    {
+      id: 1,
+      code_exam: 'MD001',
+      code_class: 'MD0081',
+      poetry: '123 (7:30 - 10:30)',
+      time_exam: '2025-08-05',
+      class_exam: 'A98',
+      day_exam: 'Thứ 3',
+      description: 'Bảo vệ/ DA',
+    },
+    {
+      id: 2,
+      code_exam: 'MD001',
+      code_class: 'MD0081',
+      poetry: '123 (7:30 - 10:30)',
+      time_exam: '2025-08-05',
+      class_exam: 'A98',
+      day_exam: 'Thứ 3',
+      description: 'Bảo vệ/ DA',
+    },
+    {
+      id: 3,
+      code_exam: 'MD001',
+      code_class: 'MD0081',
+      poetry: '123 (7:30 - 10:30)',
+      time_exam: '2025-08-05',
+      class_exam: 'A98',
+      day_exam: 'Thứ 3',
+      description: 'Bảo vệ/ DA',
+    },
+    {
+      id: 4,
+      code_exam: 'MD001',
+      code_class: 'MD0081',
+      poetry: '123 (7:30 - 10:30)',
+      time_exam: '2025-08-05',
+      class_exam: 'A98',
+      day_exam: 'Thứ 3',
+      description: 'Bảo vệ/ DA',
+    },
+    {
+      id: 5,
+      code_exam: 'MD001',
+      code_class: 'MD0081',
+      poetry: '123 (7:30 - 10:30)',
+      time_exam: '2025-08-05',
+      class_exam: 'A98',
+      day_exam: 'Thứ 3',
+      description: 'Bảo vệ/ DA',
+    },
+    {
+      id: 6,
+      code_exam: 'MD001',
+      code_class: 'MD0081',
+      poetry: '123 (7:30 - 10:30)',
+      time_exam: '2025-08-05',
+      class_exam: 'A98',
+      day_exam: 'Thứ 3',
+      description: 'Bảo vệ/ DA',
+    },
+  ]);
 
-    
-    
-  return (
-    <ExamScheduleView dataExamSchedule={dataExamSchedule} />
-  );
+  return <ExamScheduleView dataExamSchedule={dataExamSchedule} />;
 };
 
 export default ExamSchedule;

src/screens/exam_schedule/item_view.js

@@ -5,18 +5,32 @@ import { Text, View, TouchableOpacity, StyleSheet, Image } from 'react-native';
 const ItemView = ({item}) => {
   return (
     <TouchableOpacity style={styles.container}>
-        <Text style={styles.text_title}>Mã môn học: {item.code_exam}</Text>
-        <Text style={styles.text_title}>Mã lớp: {item.code_class}</Text>
+        <Text style={styles.text_title}>Mã môn học:
+          <Text style={styles.text_content}> {item.code_exam}</Text>
+        </Text>
+        <Text style={styles.text_title}>Mã lớp:
+          <Text style={styles.text_content}> {item.code_class}</Text>
+        </Text>
 
         <View style={styles.content}>
-            <Text style={styles.text_content}>Ca/Tiết thi: {item.poetry}</Text>
-            <Text style={styles.text_content}>Thứ thi: {item.day_exam}</Text>
+            <Text style={styles.text_title}>Ca/Tiết thi: 
+              <Text style={styles.text_content}> {item.poetry}</Text>
+            </Text>
+            <Text style={styles.text_title}>Thứ thi:
+              <Text style={styles.text_content}> {item.day_exam}</Text>
+            </Text>
         </View>
         <View style={styles.content}>
-            <Text style={styles.text_content}>Ngày thi: {item.time_exam}</Text>
-            <Text style={styles.text_content}>Phòng thi: {item.class_exam}</Text>
+            <Text style={styles.text_title}>Ngày thi:
+              <Text style={styles.text_content}> {item.time_exam}</Text>
+            </Text>
+            <Text style={styles.text_title}>Phòng thi:
+              <Text style={styles.text_content}> {item.class_exam}</Text>
+            </Text>
         </View>
-        <Text style={styles.text_content}>Ghi chú/ hình thức thi: {item.description}</Text>
+        <Text style={styles.text_title}>Ghi chú/ hình thức thi:
+          <Text style={styles.text_content}> {item.description}</Text>
+        </Text>
 
     </TouchableOpacity>
   );
@@ -28,18 +42,14 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     paddingHorizontal: 14,
     paddingVertical: 10,
-    marginBottom: 10,
     shadowColor: R.colors.black,
-    shadowOffset: {
-      width: 0,
-      height:2
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 2,
-    elevation: 1,
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
+    shadowRadius: 1,
+    elevation: Platform.OS === 'ios' ? 1 : 2,
     backgroundColor: R.colors.white,
-    marginVertical: 5,
-    marginHorizontal:10
+    marginHorizontal:10,
+    marginVertical:7.5
   },
   content: {
     flexDirection: 'row',
@@ -48,9 +58,9 @@ const styles = StyleSheet.create({
   },
   text_title: {
     fontSize: R.fontsize.fontsSize12,
-    fontWeight: '500',
-    color: R.colors.blue500,
-    fontFamily: R.fonts.InterSemiBold,
+    fontWeight: '600',
+    color: R.colors.black,
+    fontFamily: R.fonts.InterMedium,
   },
   text_content: {
     fontSize: R.fontsize.fontsSize12,

src/screens/exam_schedule/style.js

@@ -14,6 +14,14 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: R.colors.grey_200,
   },
+  body: {
+    flex: 1,
+    backgroundColor: R.colors.white,
+  },
+  content_container: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
   title: {
     fontSize: R.fontsize.fontsSize16,
     fontWeight: '700',
@@ -22,7 +30,14 @@ const styles = StyleSheet.create({
   },
   flatlist: {
     flex: 1,
-    marginHorizontal: 5,
+  },
+  text_empty: {
+    fontSize: R.fontsize.fontsSize14,
+    fontWeight: '400',
+    fontFamily: R.fonts.InterRegular,
+    color: R.colors.black,
+    textAlign: 'center',
+    marginHorizontal:15
   },
 });
 export default styles;
\ No newline at end of file

src/screens/exam_schedule/view.js

 import React from 'react';
-import {View, FlatList, SafeAreaView } from 'react-native';
-import Header from "../../components/Header/Header";
-import R from "../../assets/R";
-import I18n from "../../helper/i18/i18n";
-import ItemView from "./item_view";
+import {
+  View,
+  FlatList,
+  SafeAreaView,
+  Text,
+  ActivityIndicator,
+} from 'react-native';
+import Header from '../../components/Header/Header';
+import R from '../../assets/R';
+import I18n from '../../helper/i18/i18n';
+import ItemView from './item_view';
 import styles from './style';
 import ItemCalendar from '../roll_call/item_calendar';
-const ExamScheduleView = (props) => {
+const ExamScheduleView = props => {
   const {dataExamSchedule} = props;
-  const renderContent = ({ item }) => {
+  const renderContent = ({item}) => {
+    return <ItemView item={item} />;
+  };
+
+  const renderBody = () => {
     return (
-      <ItemView
-        item={item}
-      />
+      <View style={styles.body}>
+        <ItemCalendar />
+        <View style={styles.flatlist}>
+          <FlatList
+            data={dataExamSchedule}
+            renderItem={renderContent}
+            keyExtractor={item => item.id}
+            contentContainerStyle={styles.content_container}
+            showsVerticalScrollIndicator={false}
+            ListEmptyComponent={() => (
+              <View style={styles.content_container}>
+                <ActivityIndicator
+                  size="large"
+                  color={R.colors.main}
+                  animating
+                />
+                <Text style={styles.text_empty}>Không có dữ liệu</Text>
+              </View>
+            )}
+          />
+        </View>
+      </View>
     );
   };
   return (
     <View style={styles.container}>
-      <Header isBack title={I18n.t("ExamSchedule")} />
-    <View style={styles.container}>
-      
-      <ItemCalendar/>
-      <View style={styles.flatlist}>
-        <FlatList
-          data={dataExamSchedule}
-          renderItem={renderContent}
-          keyExtractor={(item) => item.id}
-          showsVerticalScrollIndicator={false}
-        />
-      </View>
-    </View>
+      <Header isBack title={I18n.t('ExamSchedule')} />
+      {renderBody()}
     </View>
   );
 };
 
 export default ExamScheduleView;
-

src/screens/roll_call/detail/view.js

@@ -3,16 +3,9 @@ import {
   Text,
   View,
   StyleSheet,
-  SafeAreaView,
   ScrollView,
-  Dimensions,
 } from "react-native";
-import {
-  Table,
-  TableWrapper,
-  Row,
-  Cell,
-} from 'react-native-reanimated-table';
+
 import Header from "../../../components/Header/Header";
 import R from "../../../assets/R";
 
@@ -200,9 +193,9 @@ const styles = StyleSheet.create({
   },
 
   headerText: {
-    fontFamily: R.fonts.InterRegular,
+    fontFamily: R.fonts.InterMedium,
     fontSize: R.fontsize.fontsSize12,
-    fontWeight: '400',
+    fontWeight: '600',
     color: R.colors.black,
     textAlign: 'center',
   },

src/screens/roll_call/item.js

@@ -12,11 +12,19 @@ const ItemList = ({ item }) => {
       style={styles.card_item} 
     >
       <View style={styles.content}>
-          <Text style={styles.text}>Mã lớp:{item.class_code}</Text>
-        <Text style={styles.text}>Tên môn: {item.subject_name}</Text>
+          <Text style={styles.text_title}>Mã lớp:{' '}
+            <Text style={styles.text_content}>{item.class_code}</Text>
+          </Text>
+        <Text style={styles.text_title}>Tên môn:{' '}
+          <Text style={styles.text_content}>{item.subject_name}</Text>
+        </Text>
         <View style={styles.footer}>
-            <Text style={styles.text}>Tổng tiết: {item.total_lessons}</Text>
-            <Text style={styles.text}>Số buổi vắng:{item.absent_count}</Text>
+            <Text style={styles.text_title}>Tổng tiết:{' '}
+              <Text style={styles.text_content}>{item.total_lessons}</Text>
+            </Text>
+            <Text style={styles.text_title}>Số buổi vắng:{' '}
+              <Text style={styles.text_content}>{item.absent_count}</Text>
+            </Text>
         </View>
       </View>
         <IconNext width={15} height={15} />
@@ -56,7 +64,13 @@ const styles = StyleSheet.create({
     marginRight:15
   },
   
-  text:{
+  text_title:{
+    fontSize: R.fontsize.fontsSize12,
+    fontWeight: '600',
+    fontFamily: R.fonts.InterMedium,
+    color: R.colors.black,
+  },
+  text_content: {
     fontSize: R.fontsize.fontsSize12,
     fontWeight: '400',
     fontFamily: R.fonts.InterRegular,

src/screens/roll_call/item_calendar.js

@@ -24,9 +24,8 @@ const styles = StyleSheet.create({
         width: 0,
         height: 2,
       },
-    shadowOpacity: 0.22,
-    shadowRadius: 2.22,
-    elevation: 3,
+    shadowOpacity: 0.25,
+    elevation: 5,
     borderRadius: 10,
   },
   container_schedule_item: {

src/screens/roll_call/view.js

@@ -28,6 +28,7 @@ const RollCallView = (props) => {
             keyExtractor={(item) => item.id.toString()}
             scrollEnabled={true}
             showsVerticalScrollIndicator={false}
+            
           />
         </View>