TODO: Đã xử lý logic hiển thị button chi tiết theo status

src/screens/roll_call/index.js

@@ -16,7 +16,43 @@ const ListRollCall = (props) => {
             dateEnd:'05/08/2025',
             status:'Đang diễn ra'
         },
-        
+        {
+            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 kết thúc'
+        },
+        {
+            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 kết thúc'
+        },
+        {
+            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 kết thúc'
+        },
+
     ]);
   return (
     <ListRollCallView dataList={dataList} />

src/screens/roll_call/view.js

@@ -25,11 +25,21 @@ const ListRollCallView = props => {
         <View style={styles.row}>
           <Text style={styles.textTitle}>
             Mã lớp:
-            <Text style={[styles.text ,{color:R.colors.blue , fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>{item.classCode}</Text>
+            <Text
+              style={[
+                styles.text,
+                {
+                  color: R.colors.blue,
+                  fontWeight: '600',
+                  fontFamily: R.fonts.fontMedium,
+                },
+              ]}>
+              {item.classCode}
+            </Text>
           </Text>
           <Text style={styles.textTitle}>
             Đã học / Tổng tiết:
-            <Text style={[styles.text ,{color:R.colors.blue }]}>
+            <Text style={[styles.text, {color: R.colors.blue}]}>
               {item.lessonLearned}/{item.generalDetails}
             </Text>
           </Text>
@@ -37,48 +47,72 @@ const ListRollCallView = props => {
         <View style={styles.row}>
           <Text style={styles.textTitle}>
             Sĩ số:{' '}
-            <Text style={[styles.text ,{color:R.colors.blue }]}>{item.numberOfStudent}</Text>
+            <Text style={[styles.text, {color: R.colors.blue}]}>
+              {item.numberOfStudent}
+            </Text>
           </Text>
           <Text style={styles.textTitle}>
             Tổng số sv trượt điểm danh:{' '}
-            <Text style={[styles.text, {color:R.colors.red }]}>{item.totalStudentFailedRollCall}</Text>
+            <Text style={[styles.text, {color: R.colors.red}]}>
+              {item.totalStudentFailedRollCall}
+            </Text>
           </Text>
         </View>
         <Text style={styles.textTitle}>
           Ngày bắt đầu:{' '}
-          <Text style={[styles.text ,{color:R.colors.blue }]}>{item.dateStart}</Text>
+          <Text style={[styles.text, {color: R.colors.blue}]}>
+            {item.dateStart}
+          </Text>
         </Text>
         <Text style={styles.textTitle}>
           Ngày kết thúc:{' '}
-          <Text style={[styles.text ,{color:R.colors.blue }]}>{item.dateEnd}</Text>
+          <Text style={[styles.text, {color: R.colors.blue}]}>
+            {item.dateEnd}
+          </Text>
         </Text>
         <View style={styles.btnContainer}>
+          {item.status === 'Đang diễn ra' && (
             <Button
-                title="Tạo QR điểm danh"
-                onPress={()=>{}}
-                backgroundColor={R.colors.brown}
-                textColor={R.colors.white}
-                fontSize={12}
-                containerStyle={{paddingHorizontal:5,paddingVertical:5, borderRadius:20}}
+              title="Tạo QR điểm danh"
+              onPress={() => {}}
+              backgroundColor={R.colors.brown}
+              textColor={R.colors.white}
+              fontSize={12}
+              containerStyle={{
+                paddingHorizontal: 5,
+                paddingVertical: 5,
+                borderRadius: 20,
+              }}
             />
-            <Button
+          )}
+          {item.status === 'Đang diễn ra' && (
+            <View style={{alignItems: 'flex-end', flex: 1}}>
+              <Button
                 title="Điểm danh"
-                onPress={()=>{}}
-                containerStyle={{paddingHorizontal:5, borderRadius:20}}
+                onPress={() => {}}
+                containerStyle={{paddingHorizontal: 5,paddingVertical:5,  borderRadius: 20}}
                 backgroundColor={R.colors.brown}
                 textColor={R.colors.white}
                 fontSize={12}
                 width={85}
-            />
+              />
+            </View>
+          )}
+          <View style={{alignItems: 'flex-end', flex: 1}}>
             <Button
-                title="Chi tiết"
-                onPress={()=>{}}
-                containerStyle={{paddingHorizontal:5, borderRadius:20}}
-                backgroundColor={R.colors.blue}
-                textColor={R.colors.white}
-                fontSize={12}
-                width={85}
+              title="Chi tiết"
+              onPress={() => {}}
+              containerStyle={{
+                paddingHorizontal: 5,
+                borderRadius: 20,
+                paddingVertical: 5,
+              }}
+              backgroundColor={R.colors.blue}
+              textColor={R.colors.white}
+              fontSize={12}
+              width={85}
             />
+          </View>
         </View>
       </View>
     );
@@ -104,9 +138,9 @@ const ListRollCallView = props => {
           data={dataList}
           renderItem={renderItem}
           keyExtractor={(item, index) => `${index}`}
+          showsVerticalScrollIndicator={false}
           style={styles.list}
         />
- 
       </View>
     </View>
   );