IMPORTANT: Đã dựng xong khung cơ bản xem chi tiết điểm danh của lớp

src/screens/roll_call/detail/style.js

@@ -9,7 +9,100 @@ const styles = StyleSheet.create({
     body:{
         flex:1,
         backgroundColor:R.colors.white,
-    }
+        marginHorizontal:15,
+        marginVertical:10,
+    },
+    btnGroup:{
+        flexDirection:'row',
+        justifyContent:'flex-end',
+        marginBottom:15,
+    },
+    sectionTitle: {
+        fontSize: R.fontsize.fontsSizeTitle,
+        fontWeight: '600',
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.blue,
+        marginBottom: 10,
+        marginTop: 15,
+    },
+    attendanceTableContainer: {
+        borderWidth: 1,
+        borderColor: R.colors.gray3,
+        borderRadius: 8,
+        marginBottom: 20,
+    },
+    attendanceTable: {
+        minWidth: 800, // Minimum width to accommodate all columns
+    },
+    attendanceHeaderRow: {
+        flexDirection: 'row',
+        backgroundColor: R.colors.blue2,
+        height: 60,
+    },
+    attendanceHeaderCell: {
+        height: 60,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+        borderRightWidth: 1,
+        borderRightColor: R.colors.gray3,
+        borderBottomWidth: 1,
+        borderBottomColor: R.colors.gray3,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    attendanceHeaderText: {
+        fontSize: R.fontsize.fontSizeContent,
+        fontWeight: '600',
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.black,
+        textAlign: 'center',
+    },
+    attendanceDataRow: {
+        flexDirection: 'row',
+        height: 80,
+    },
+    attendanceDataCell: {
+        height: 80,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+        borderRightWidth: 1,
+        borderRightColor: R.colors.gray3,
+        borderBottomWidth: 1,
+        borderBottomColor: R.colors.gray3,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    studentInfoColumn: {
+        width: 120,
+    },
+    dateColumn: {
+        width: 70,
+    },
+    studentCodeText: {
+        fontSize: R.fontsize.fontSizeContent,
+        fontFamily: R.fonts.fontMedium,
+        color: R.colors.black,
+        textAlign: 'center',
+        marginBottom: 2,
+    },
+    studentNameText: {
+        fontSize: R.fontsize.fontSizeContent,
+        fontFamily: R.fonts.fontRegular,
+        color: R.colors.black,
+        textAlign: 'center',
+        marginBottom: 2,
+    },
+    percentageText: {
+        fontSize: 10,
+        fontFamily: R.fonts.fontMedium,
+        textAlign: 'center',
+    },
+    attendanceStatusText: {
+        fontSize: R.fontsize.fontSizeContent,
+        fontFamily: R.fonts.fontBold,
+        fontWeight: '700',
+        textAlign: 'center',
+    },
 })
 
 export default styles
\ No newline at end of file

src/screens/roll_call/detail/view.js

-import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import React, {useState} from 'react';
+import {Text, View, TouchableOpacity, StyleSheet, ScrollView, FlatList} from 'react-native';
 import Header from '../../../components/Header/Header';
 import styles from './style';
-const DetailRollCallView = (props) => {
-  const {  } = props;
+import Button from '../../../components/Button';
+import R from '../../../assets/R';
+
+const DetailRollCallView = props => {
+  const {} = 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.container}>
+      <Header title={'Thống kê: ATTT2024.P1'} isBack />
+      <View style={styles.body}>
+        <View style={styles.btnGroup}>
+          <Button
+            title="Tạo QR điểm danh"
+            onPress={() => {}}
+            containerStyle={{
+              paddingHorizontal: 5,
+              paddingVertical: 5,
+              borderRadius: 20,
+            }}
+            backgroundColor={R.colors.orange}
+            textColor={R.colors.white}
+            fontSize={12}
+            height={40}
+            width={150}
+          />
+          <Button />
+          <Button
+            title="Điểm danh"
+            onPress={() => {}}
+            containerStyle={{
+              paddingHorizontal: 5,
+              paddingVertical: 5,
+              borderRadius: 20,
+              marginLeft: 5,
+            }}
+            backgroundColor={R.colors.blue}
+            textColor={R.colors.white}
+            fontSize={12}
+            height={40}
+            width={150}
+          />
+          <Button />
+        </View>
+
+        <View>
+            <Text>
+              SL sinh viên nghỉ quá số lượng cho phép: {' '}
+              <Text>
+                3
+              </Text>
+            </Text>
+            <Text>
+              SL sinh viên đang bị cảnh báo: {' '}
+              <Text>
+                1
+              </Text>
+            </Text>
+            <Text>
+              SL sinh viên đủ điều kiện: {' '}
+              <Text>
+                3
+              </Text>
+            </Text>
+        </View>
+
+        <View>
+            <Text>
+              Kí hiệu
+            </Text>
+            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
+                <View>
+                    <Text>
+                        (1)
+                        <Text>
+                            Có mặt
+                        </Text>
+                    </Text>
+                </View>
+                <View>
+                    <Text>
+                        (0)
+                        <Text>
+                            Vắng mặt
+                        </Text>
+                    </Text>
+                </View>
+                <View>
+                    <Text>
+                        (*)
+                        <Text>
+                            Chưa đến ngày
+                        </Text>
+                    </Text>
+                </View>
+            </View>
+
+
+        </View>
 
+        <View>
+          <Text style={styles.sectionTitle}>
+            Danh sách
+          </Text>
+          
+          <View style={styles.attendanceTableContainer}>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              <View style={styles.attendanceTable}>
+                {/* Header Row */}
+                <View style={styles.attendanceHeaderRow}>
+                  <View style={[styles.attendanceHeaderCell, styles.studentInfoColumn]}>
+                    <Text style={styles.attendanceHeaderText}>Mã SV,{'\n'}Họ và tên</Text>
+                  </View>
+                  {sessionDates.map((date, index) => (
+                    <View key={index} style={[styles.attendanceHeaderCell, styles.dateColumn]}>
+                      <Text style={styles.attendanceHeaderText}>{date}</Text>
+                    </View>
+                  ))}
+                </View>
+                
+                {/* Student Rows */}
+                {studentsData.map((student, studentIndex) => (
+                  <View key={student.id} style={styles.attendanceDataRow}>
+                    <View style={[styles.attendanceDataCell, styles.studentInfoColumn]}>
+                      <Text style={styles.studentCodeText}>{student.studentCode}</Text>
+                      <Text style={styles.studentNameText}>{student.name}</Text>
+                      <Text style={[
+                        styles.percentageText,
+                        {color: student.percentage.includes('50%') ? R.colors.red : R.colors.green}
+                      ]}>
+                        {student.percentage}
+                      </Text>
+                    </View>
+                    {student.attendance.map((status, dateIndex) => (
+                      <View key={dateIndex} style={[styles.attendanceDataCell, styles.dateColumn]}>
+                        <Text style={[
+                          styles.attendanceStatusText,
+                          {
+                            color: status === 1 ? R.colors.blue : 
+                                   status === 0 ? R.colors.red : R.colors.gray2
+                          }
+                        ]}>
+                          {status}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                ))}
+              </View>
+            </ScrollView>
+          </View>
         </View>
+      </View>
     </View>
   );
 };