TODO: Đã hoàn thiện giao diện chi tiết điểm danh theo từng lớp

src/screens/roll_call/detail/index.js

-import React from 'react';
+import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import DetailRollCallView from './view';
 
 const DetailRollCall = (props) => {
+  // Mock data - in real app this would come from API
+  const [sessionDates] = useState([
+    '30/06/2025', '06/07/2025', '13/07/2025', '20/07/2025', '27/07/2025',
+    '04/08/2025', '11/08/2025', '18/08/2025', '25/08/2025', '04/09/2025'
+  ]);
+  
+  const [studentsData] = useState([
+    {
+      id: 1,
+      studentCode: '85964',
+      name: 'Hoàng Lâm Anh',
+      attendance: [1, 1, 1, 1, 1, 1, 1, 1, 1, '*'],
+      percentage: '0%(0/18)'
+    },
+    {
+      id: 2,
+      studentCode: '85964',
+      name: 'Vũ Tuấn Khải',
+      attendance: [1, 1, 1, 1, 1, 1, 1, 1, 1, '*'],
+      percentage: '0%(0/18)'
+    },
+    {
+      id: 3,
+      studentCode: '85964',
+      name: 'Huỳnh Ngọc Lâm',
+      attendance: [1, 1, 0, 1, 0, 1, 1, 1, 1, '*'],
+      percentage: '22%(2/18)'
+    },
+    {
+      id: 4,
+      studentCode: '85964',
+      name: 'Nguyễn Đức Mạnh',
+      attendance: [1, 0, 0, 0, 0, 0, 1, 1, 1, '*'],
+      percentage: '50%(9/18)'
+    },
+    {
+      id: 5,
+      studentCode: '85964',
+      name: 'Vũ Thúy Linh',
+      attendance: [1, 1, 1, 1, 1, 0, 0, 0, 0, '*'],
+      percentage: '50%(9/18)'
+    },
+    {
+      id: 6,
+      studentCode: '85964',
+      name: 'Vũ Hồng Nhung',
+      attendance: [1, 1, 0, 0, 1, 1, 0, 1, 0, '*'],
+      percentage: '50%(9/18)'
+    }
+  ]);
   return (
-    <DetailRollCallView />
+    <DetailRollCallView sessionDates={sessionDates} studentsData={studentsData} />
   );
 };
 

src/screens/roll_call/detail/style.js

@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
         marginBottom:15,
     },
     sectionTitle: {
-        fontSize: R.fontsize.fontsSizeTitle,
+        fontSize: R.fontsize.fontSizeSubTitle,
         fontWeight: '600',
         fontFamily: R.fonts.fontMedium,
         color: R.colors.blue,
@@ -28,11 +28,10 @@ const styles = StyleSheet.create({
     attendanceTableContainer: {
         borderWidth: 1,
         borderColor: R.colors.gray3,
-        borderRadius: 8,
         marginBottom: 20,
     },
     attendanceTable: {
-        minWidth: 800, // Minimum width to accommodate all columns
+        minWidth: 800, 
     },
     attendanceHeaderRow: {
         flexDirection: 'row',
@@ -103,6 +102,12 @@ const styles = StyleSheet.create({
         fontWeight: '700',
         textAlign: 'center',
     },
+    txt:{
+        fontSize: R.fontsize.fontSizeContent,
+        fontFamily: R.fonts.fontRegular,
+        fontWeight: '400',
+        color: R.colors.black,
+    }
 })
 
 export default styles
\ No newline at end of file

src/screens/roll_call/detail/view.js

@@ -6,63 +6,15 @@ import Button from '../../../components/Button';
 import R from '../../../assets/R';
 
 const DetailRollCallView = props => {
-  const {} = props;
+  const { sessionDates, studentsData } = props;
   
-  // Mock data - in real app this would come from API
-  const [sessionDates] = useState([
-    '30/06/2025', '06/07/2025', '13/07/2025', '20/07/2025', '27/07/2025',
-    '04/08/2025', '11/08/2025', '18/08/2025', '25/08/2025', '04/09/2025'
-  ]);
   
-  const [studentsData] = useState([
-    {
-      id: 1,
-      studentCode: '85964',
-      name: 'Hoàng Lâm Anh',
-      attendance: [1, 1, 1, 1, 1, 1, 1, 1, 1, '*'],
-      percentage: '0%(0/18)'
-    },
-    {
-      id: 2,
-      studentCode: '85964',
-      name: 'Vũ Tuấn Khải',
-      attendance: [1, 1, 1, 1, 1, 1, 1, 1, 1, '*'],
-      percentage: '0%(0/18)'
-    },
-    {
-      id: 3,
-      studentCode: '85964',
-      name: 'Huỳnh Ngọc Lâm',
-      attendance: [1, 1, 0, 1, 0, 1, 1, 1, 1, '*'],
-      percentage: '22%(2/18)'
-    },
-    {
-      id: 4,
-      studentCode: '85964',
-      name: 'Nguyễn Đức Mạnh',
-      attendance: [1, 0, 0, 0, 0, 0, 1, 1, 1, '*'],
-      percentage: '50%(9/18)'
-    },
-    {
-      id: 5,
-      studentCode: '85964',
-      name: 'Vũ Thúy Linh',
-      attendance: [1, 1, 1, 1, 1, 0, 0, 0, 0, '*'],
-      percentage: '50%(9/18)'
-    },
-    {
-      id: 6,
-      studentCode: '85964',
-      name: 'Vũ Hồng Nhung',
-      attendance: [1, 1, 0, 0, 1, 1, 0, 1, 0, '*'],
-      percentage: '50%(9/18)'
-    }
-  ]);
   return (
     <View style={styles.container}>
       <Header title={'Thống kê: ATTT2024.P1'} isBack />
-      <View style={styles.body}>
-        <View style={styles.btnGroup}>
+      <View style={styles.body}> 
+        <ScrollView vertical showsVerticalScrollIndicator={false}>
+          <View style={styles.btnGroup}>
           <Button
             title="Tạo QR điểm danh"
             onPress={() => {}}
@@ -74,7 +26,7 @@ const DetailRollCallView = props => {
             backgroundColor={R.colors.orange}
             textColor={R.colors.white}
             fontSize={12}
-            height={40}
+            height={35}
             width={150}
           />
           <Button />
@@ -90,26 +42,26 @@ const DetailRollCallView = props => {
             backgroundColor={R.colors.blue}
             textColor={R.colors.white}
             fontSize={12}
-            height={40}
+            height={35}
             width={150}
           />
           <Button />
         </View>
 
         <View>
-            <Text>
+            <Text style={styles.txt}>
               SL sinh viên nghỉ quá số lượng cho phép: {' '}
               <Text>
                 3
               </Text>
             </Text>
-            <Text>
+            <Text style={styles.txt}>
               SL sinh viên đang bị cảnh báo: {' '}
               <Text>
                 1
               </Text>
             </Text>
-            <Text>
+            <Text style={styles.txt}>
               SL sinh viên đủ điều kiện: {' '}
               <Text>
                 3
@@ -118,30 +70,30 @@ const DetailRollCallView = props => {
         </View>
 
         <View>
-            <Text>
+            <Text style={[styles.txt, {fontSize: R.fontsize.fontSizeSubTitle, fontFamily: R.fonts.fontMedium, fontWeight:'600' , color: R.colors.blue}]}>
               Kí hiệu
             </Text>
             <View style={{flexDirection:'row', justifyContent:'space-between'}}>
                 <View>
-                    <Text>
-                        (1)
-                        <Text>
+                    <Text style={[styles.txt, {color: R.colors.blue}]}>
+                        (1) {' '}
+                        <Text style={[styles.txt, {color: R.colors.black, fontFamily: R.fonts.fontMedium, fontWeight:'600'}]}>
                             Có mặt
                         </Text>
                     </Text>
                 </View>
                 <View>
-                    <Text>
-                        (0)
-                        <Text>
+                    <Text style={[styles.txt, {color: R.colors.red}]}>
+                        (0) {' '}
+                        <Text style={[styles.txt, {color: R.colors.black, fontFamily: R.fonts.fontMedium, fontWeight:'600'}]}>
                             Vắng mặt
                         </Text>
                     </Text>
                 </View>
                 <View>
-                    <Text>
-                        (*)
-                        <Text>
+                    <Text style={[styles.txt, {color: R.colors.blue}]}>
+                        (*) {' '}
+                        <Text style={[styles.txt, {color: R.colors.black, fontFamily: R.fonts.fontMedium, fontWeight:'600'}]}>
                             Chưa đến ngày
                         </Text>
                     </Text>
@@ -203,6 +155,8 @@ const DetailRollCallView = props => {
             </ScrollView>
           </View>
         </View>
+      </ScrollView>
+
       </View>
     </View>
   );