TODO: Đã dựng xong khung danh sách lớp điểm danh

src/components/Button.js

@@ -32,6 +32,9 @@ const Button = props => {
     paddingHorizontal,
     paddingVertical,
     marginRight,
+    iconLeft,
+    iconStyleLeft,
+    tintColorLeft,
   } = props;
 
   return (
@@ -59,6 +62,7 @@ const Button = props => {
           
 
         }}>
+             {iconLeft && <Image source={iconLeft} tintColor={tintColorLeft} style={iconStyleLeft} />}
         <Text
           style={[
             {

src/routers/StackNavigation.js

@@ -32,6 +32,7 @@ import DetailListWork from '../screens/list_work/detail';
 import DrawerEmailView from '../routers/drawer_email/drawerView';
 import SendEmail from '../screens/email/send';
 import DetailEmail from '../screens/email/detail';
+import ListRollCallView from '../screens/roll_call/';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -72,6 +73,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.EMAIL} component={DrawerEmailView}/>
       <Stack.Screen name={ScreenName.SENDEMAIL} component={SendEmail}/>
       <Stack.Screen name={ScreenName.DETAILEMAIL} component={DetailEmail}/>
+      <Stack.Screen name={ScreenName.LISTROLLCALL} component={ListRollCallView}/>
     </Stack.Navigator>
   );
 }

src/screens/roll_call/index.js

+import React, {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import ListRollCallView from './view';
+
+const ListRollCall = (props) => {
+    const [dataList, setDataList] = useState([
+        {
+            id:1,
+            classCode:'ATTT2024.1',
+            generalDetails:'25',
+            present:'25',
+            lessonLearned:'18',
+            numberOfStudent:'40',
+            totalStudentFailedRollCall:'5',
+            dateStart:'30/06/2025',
+            dateEnd:'05/08/2025',
+            status:'Đang diễn ra'
+        },
+        
+    ]);
+  return (
+    <ListRollCallView dataList={dataList} />
+  );
+};
+
+export default ListRollCall;

src/screens/roll_call/style.js

+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import R from '../../assets/R'
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: R.colors.white,
+    },
+    body: {
+        flex: 1,
+        backgroundColor: R.colors.white,
+        paddingHorizontal:15
+    },
+    card: {
+        borderWidth: 1,
+        borderColor: R.colors.grayBorderInputTextHeader,
+        borderRadius: 10,
+        padding: 5,
+        marginTop: 15,
+        marginBottom: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: R.colors.white,
+        shadowColor: R.colors.black,
+        shadowOffset: {width: 0.5, height: 2},
+        shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
+        shadowRadius: 5,
+        elevation: Platform.OS === 'ios' ? 1 : 2,
+      },
+      btnCard: {
+        borderRadius: 10,
+        borderWidth: 1,
+        padding: 5,
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderColor: R.colors.grayBorderInputTextHeader,
+      },
+      text: {
+        fontSize: R.sizes.sm,
+        color: R.colors.black,
+        fontFamily: R.fonts.fontRegular,
+        fontWeight: '400',
+      },
+      searchContainer:{
+        width:'100%',
+        flexDirection:'row',
+        alignItems:'center',
+        borderColor:R.colors.grayBorderInputTextHeader,
+        borderWidth:1,
+        borderRadius:100,
+        paddingHorizontal:10,
+        paddingVertical:5,
+      },
+      textInput:{
+        fontSize: R.sizes.sm,
+        color: R.colors.black,
+        fontFamily: R.fonts.fontRegular,
+        fontWeight: '400',
+        padding:0,
+        margin:0,
+        flex:1,
+        height:25
+      },
+      iconSearch:{
+        width:24,
+        height:24,
+      },
+      list:{
+        marginVertical:10
+      },
+      item:{
+        paddingVertical:10,
+        paddingHorizontal:15,
+        borderRadius:10,
+        borderWidth:1,
+        borderColor:R.colors.grayBorderInputTextHeader,
+        marginVertical:5,
+      },
+      row:{
+        flexDirection:'row',
+        justifyContent:'space-between',
+      },
+      textTitle:{
+        fontSize: R.sizes.sm,
+        color: R.colors.black,
+        fontFamily: R.fonts.fontRegular,
+        fontWeight: '400',
+      },
+      btnContainer:{
+        flexDirection:'row',
+        justifyContent:'space-between',
+      },
+      iconQR:{
+        width:24,
+        height:24,
+      }
+})
+
+export default styles
\ No newline at end of file

src/screens/roll_call/view.js

+import React from 'react';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  TextInput,
+  FlatList,
+} from 'react-native';
+import R from '../../assets/R';
+import styles from './style';
+import Header from '../../components/Header/Header';
+import {useNavigation} from '@react-navigation/native';
+import * as SCREENNAME from '../../routers/ScreenNames';
+import Button from '../../components/Button';
+
+const ListRollCallView = props => {
+  const {dataList} = props;
+  const navigation = useNavigation();
+  const renderItem = ({item}) => {
+    console.log(item);
+    return (
+      <View style={styles.item}>
+        <View style={styles.row}>
+          <Text style={styles.textTitle}>
+            Mã lớp:
+            <Text style={styles.text}>{item.classCode}</Text>
+          </Text>
+          <Text style={styles.textTitle}>
+            Đã học / Tổng tiết:
+            <Text style={styles.text}>
+              {item.lessonLearned}/{item.generalDetails}
+            </Text>
+          </Text>
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.textTitle}>
+            Sĩ số:
+            <Text style={styles.text}>{item.numberOfStudent}</Text>
+          </Text>
+          <Text style={styles.textTitle}>
+            Tổng số sinh viên trượt điểm danh:
+            <Text style={styles.text}>{item.totalStudentFailedRollCall}</Text>
+          </Text>
+        </View>
+        <Text style={styles.textTitle}>
+          Ngày bắt đầu:
+          <Text style={styles.text}>{item.dateStart}</Text>
+        </Text>
+        <Text style={styles.textTitle}>
+          Ngày kết thúc:
+          <Text style={styles.text}>{item.dateEnd}</Text>
+        </Text>
+        <View style={styles.btnContainer}>
+            <Button
+                title="Tạo QR điểm danh"
+                onPress={()=>{}}
+                backgroundColor={R.colors.brown}
+                textColor={R.colors.white}
+                containerStyle={{paddingHorizontal:5, borderRadius:20}}
+            />
+            <Button
+                title="Điểm danh"
+                onPress={()=>{}}
+                containerStyle={{paddingHorizontal:5, borderRadius:20}}
+                backgroundColor={R.colors.brown}
+                textColor={R.colors.white}
+            />
+            <Button
+                title="Chi tiết"
+                onPress={()=>{}}
+                containerStyle={{paddingHorizontal:5, borderRadius:20}}
+                backgroundColor={R.colors.blue}
+                textColor={R.colors.white}
+            />
+        </View>
+      </View>
+    );
+  };
+  return (
+    <View style={styles.container}>
+      <Header title={'Báo bù lịch dạy'} isBack />
+      <View style={styles.body}>
+        <View style={styles.card}>
+          <TouchableOpacity style={styles.btnCard}>
+            <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.searchContainer}>
+          <Image source={R.images.icSearch} style={styles.iconSearch} />
+          <TextInput
+            placeholder="Tìm kiếm"
+            placeholderTextColor={R.colors.grayText}
+            style={styles.textInput}
+          />
+        </View>
+        <FlatList
+          data={dataList}
+          renderItem={renderItem}
+          keyExtractor={(item, index) => `${index}`}
+          style={styles.list}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ListRollCallView;