TODO: Đã hoàn thiện giao diện điểm danh theo từng lớp học

src/screens/roll_call/list_student_roll_call/style.js

@@ -12,12 +12,13 @@ const styles = StyleSheet.create({
     container:{
         flex:1,
         backgroundColor:R.colors.white,
+        
     },
     body:{
         flex:1,
         backgroundColor:R.colors.white,
         paddingHorizontal:15,
-        paddingVertical:10,
+        marginBottom:15,
     },
     textTitle:{
         fontSize:R.fontsize.fontsSizeTitle,
@@ -26,24 +27,6 @@ const styles = StyleSheet.create({
         color:R.colors.blue,
         marginBottom:10,
     },
-    summaryContainer: {
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-        backgroundColor: R.colors.blue4,
-        padding: 10,
-        borderRadius: 8,
-        marginBottom: 15,
-    },
-    summaryText: {
-        fontSize: 14,
-        fontFamily: R.fonts.fontMedium,
-        color: R.colors.black,
-    },
-    summaryNumber: {
-        fontSize: 16,
-        fontWeight: '700',
-        fontFamily: R.fonts.fontBold,
-    },
     tableContainer: {
         flex: 1,
         borderWidth:1,
@@ -59,8 +42,7 @@ const styles = StyleSheet.create({
     },
     headerCell: {
         height: 50,
-        paddingVertical: 12,
-        paddingHorizontal: 4,
+        paddingVertical: 10,
         borderRightWidth: 1,
         borderRightColor: R.colors.gray3,
         borderBottomWidth: 1,
@@ -70,7 +52,7 @@ const styles = StyleSheet.create({
         backgroundColor: R.colors.blue2,
     },
     headerText: {
-        fontSize: 12,
+        fontSize: R.fontsize.fontSizeContent,
         fontWeight: '600',
         fontFamily: R.fonts.fontMedium,
         color: R.colors.black,
@@ -84,7 +66,6 @@ const styles = StyleSheet.create({
     tableCell: {
         height: 60,
         paddingVertical: 10,
-        paddingHorizontal: 4,
         borderRightWidth: 1,
         borderRightColor: R.colors.gray3,
         borderBottomWidth: 1,
@@ -113,16 +94,15 @@ const styles = StyleSheet.create({
     },
     noteColumn: {
         width: NOTE_COLUMN,
-        fontSize: 10,
+        fontSize: R.fontsize.fontSizeContent,
     },
     statusContainer: {
         alignItems: 'center',
         justifyContent: 'center',
     },
     statusText: {
-        fontSize: 10,
+        fontSize: R.fontsize.fontSizeContent,
         fontFamily: R.fonts.fontMedium,
-        marginTop: 2,
         textAlign: 'center',
     },
     noteInput: {
@@ -135,6 +115,11 @@ const styles = StyleSheet.create({
         paddingHorizontal: 8,
         paddingVertical: 4,
     },
+    textTitleStatus:{
+      fontSize: R.fontsize.fontSizeContent,
+      fontFamily: R.fonts.fontRegular,
+      color: R.colors.black,
+    },
 })
 
 export default styles
\ No newline at end of file

src/screens/roll_call/list_student_roll_call/view.js

 import React, {useState, useEffect} from 'react';
-import {Text, View, TouchableOpacity, StyleSheet, ScrollView, FlatList, RefreshControl, Switch, TextInput} from 'react-native';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  FlatList,
+  RefreshControl,
+  Switch,
+  TextInput,
+} from 'react-native';
 import styles from './style';
 import Header from '../../../components/Header/Header';
 import R from '../../../assets/R';
+import Button from '../../../components/Button';
 
 const ListStudentRollCallView = props => {
   const {refreshing, setRefreshing, studentList, setStudentList} = props;
 
-
   const onRefresh = () => {
     setRefreshing(true);
     setTimeout(() => {
@@ -15,36 +25,41 @@ const ListStudentRollCallView = props => {
     }, 1000);
   };
 
-  const toggleAttendance = (studentId) => {
+  const toggleAttendance = studentId => {
     setStudentList(prevList =>
       prevList.map(student => {
         if (student.id === studentId) {
           const newIsPresent = !student.isPresent;
           // Auto-fill "nghỉ ko phép" when switching to absent if no custom note
-          const newNote = !newIsPresent && (!student.note || student.note === '') 
+          const newNote =
+            !newIsPresent && (!student.note || student.note === '')
               ? 'Nghỉ không phép'
-            : (newIsPresent ? '' : student.note);
+              : newIsPresent
+              ? ''
+              : student.note;
 
           return {...student, isPresent: newIsPresent, note: newNote};
         }
         return student;
-      })
+      }),
     );
   };
 
   const updateStudentNote = (studentId, note) => {
     setStudentList(prevList =>
       prevList.map(student =>
-        student.id === studentId 
-          ? {...student, note: note}
-          : student
-      )
+        student.id === studentId ? {...student, note: note} : student,
+      ),
     );
   };
 
   const countAttendance = () => {
-    const present = studentList.filter(studentList => studentList.isPresent).length;
-    const absent = studentList.filter(studentList => !studentList.isPresent).length;
+    const present = studentList.filter(
+      studentList => studentList.isPresent,
+    ).length;
+    const absent = studentList.filter(
+      studentList => !studentList.isPresent,
+    ).length;
     console.log(`Có mặt: ${present}, Vắng mặt: ${absent}`);
     return {present, absent};
   };
@@ -84,14 +99,19 @@ const ListStudentRollCallView = props => {
       <View style={[styles.tableCell, styles.dateColumn]}>
         <Text style={styles.cellText}>{item.date}</Text>
       </View>
-      <View style={[styles.tableCell, styles.statusColumn, styles.statusContainer]}>
+      <View
+        style={[styles.tableCell, styles.statusColumn, styles.statusContainer]}>
         <Switch
           value={item.isPresent}
           onValueChange={() => toggleAttendance(item.id)}
           trackColor={{false: R.colors.red, true: R.colors.green}}
           thumbColor={item.isPresent ? R.colors.white : R.colors.white}
         />
-        <Text style={[styles.statusText, {color: item.isPresent ? R.colors.green : R.colors.red}]}>
+        <Text
+          style={[
+            styles.statusText,
+            {color: item.isPresent ? R.colors.green : R.colors.red},
+          ]}>
           {item.isPresent ? 'Có mặt' : 'Vắng mặt'}
         </Text>
       </View>
@@ -99,7 +119,7 @@ const ListStudentRollCallView = props => {
         <TextInput
           style={styles.noteInput}
           value={item.note || ''}
-          onChangeText={(text) => updateStudentNote(item.id, text)}
+          onChangeText={text => updateStudentNote(item.id, text)}
           placeholder="Ghi chú..."
           placeholderTextColor={R.colors.gray2}
           multiline={true}
@@ -114,10 +134,8 @@ const ListStudentRollCallView = props => {
   return (
     <View style={styles.container}>
       <Header title={'Điểm danh lớp: ATTT2024.P1'} isBack />
-      <View style={styles.body}>
-        <Text style={styles.textTitle}>
-          Danh sách lớp
-        </Text>
+      <ScrollView showsVerticalScrollIndicator={false} style={styles.body}>
+        <Text style={styles.textTitle}>Danh sách lớp</Text>
 
         <View style={styles.tableContainer}>
           <ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -126,7 +144,7 @@ const ListStudentRollCallView = props => {
               <FlatList
                 data={studentList}
                 renderItem={renderStudentItem}
-                keyExtractor={(item) => item.id.toString()}
+                keyExtractor={item => item.id.toString()}
                 refreshControl={
                   <RefreshControl
                     refreshing={refreshing}
@@ -142,7 +160,46 @@ const ListStudentRollCallView = props => {
             </View>
           </ScrollView>
         </View>
+
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginVertical: 10,
+          }}>
+          <Text style={styles.textTitleStatus}>
+            Có mặt:{' '}
+            <Text style={[styles.statusText, {color: R.colors.green}]}>
+              {present}
+            </Text>
+            , Vắng mặt:{' '}
+            <Text style={[styles.statusText, {color: R.colors.red}]}>
+              {absent}
+            </Text>
+          </Text>
+          <Button
+            title="Đồng bộ kết quả "
+            onPress={() => {}}
+            containerStyle={{
+              paddingHorizontal: 5,
+              paddingVertical: 5,
+              borderRadius: 20,
+            }}
+            backgroundColor={R.colors.blue}
+            textColor={R.colors.white}
+            fontSize={12}
+          />
+        </View>
+        <View>
+          <Text style={[styles.textTitleStatus ,{color:R.colors.blue, fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>Giảng viên lưu ý:</Text>
+            <Text style={styles.textTitleStatus}>
+             Điểm danh chỉ được thực hiện trong 15p trước và
+            15p sau khi đã vào tiếp (trong 30p) sau thời gian điểm danh giảng
+            viên sẽ không được cập nhật kết quả điểm danh đã lưu trước đo
+            </Text>
         </View>
+      </ScrollView>
     </View>
   );
 };