TODO: Đã hoàn thiện màn hình giao diện học sinh chi tiết với checkbox theo dõi trạng thái

src/assets/images.js

-
-
 const images = {
   iconWarn: require('./images/iconWarn.png'),
   iconSuccess: require('./images/iconSuccess.png'),
@@ -60,7 +58,8 @@ const images = {
   icSearchHeader:require('./icon/icon_png/icon_search_header.png'),
   icSearch: require('./icon/icon_png/icon_search.png'),
   icDocument: require('./icon/icon_png/ic_document.png'),
-  
+  icTick: require('./icon/icon_png/ic_tick.png'),
+
   //Image Logo
   igLogo: require('./images/logo.png'),
   igBackground: require('./images/background_slider_home.jpg')

src/screens/academic_advisor/list_student/detail/index.js

@@ -36,9 +36,35 @@ const DetailStudent = (props) => {
        },
     ]
   });
+
+  const handleCheckboxChange = (itemId, newValue) => {
+    setStudent(prevStudent => {
+      // Sao chép danh sách type cũ
+      const updatedTypes = prevStudent.type.map(item => {
+        if (item.id === itemId) {
+          // Nếu id trùng -> tạo object mới với status cập nhật
+          return {
+            ...item,
+            status: newValue,
+          };
+        } else {
+          // Nếu không trùng -> giữ nguyên item
+          return item;
+        }
+      });
+  
+      // Trả về student mới với type đã cập nhật
+      return {
+        ...prevStudent,
+        type: updatedTypes,
+      };
+    });
+  };
+  
   return (
     <DetailStudentView 
       student={student}
+      onCheckboxChange={handleCheckboxChange}
     />
   );
 };

src/screens/academic_advisor/list_student/detail/style.js

@@ -59,6 +59,22 @@ const styles = StyleSheet.create({
         color:R.colors.blue,
         marginHorizontal:15,
     },
+    label:{
+        fontSize:R.sizes.sm,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'600',
+        color:R.colors.black,
+    },
+    checkboxContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    checkboxItem: {
+        width: '50%',
+        marginBottom: 15,
+    },
+   
 })
 
 export default styles

src/screens/academic_advisor/list_student/detail/view.js

@@ -12,8 +12,9 @@ import styles from './style';
 import * as SCREENNAME from '../../../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 import VersionCheck from '../../../../components/VersionCheck';
+import CheckBox from '../../../../components/CheckBox';
 const DetailStudentView = props => {
-  const {student} = props;
+  const {student, onCheckboxChange} = props;
   const navigate = useNavigation();
   return (
     <SafeAreaView style={styles.container}>
@@ -116,6 +117,26 @@ const DetailStudentView = props => {
               </Text>
             </View>
           </View>
+
+          {/*Row 6*/}
+          <View style={styles.checkboxContainer}>
+            {student.type.map((item, index) => (
+              <View key={item.id} style={styles.checkboxItem}>
+                <CheckBox
+                  value={item.status}
+                  onValueChange={value => onCheckboxChange(item.id, value)}
+                  size={20}
+                  labelStyle={styles.label}
+                  checkedColor={R.colors.main}
+                  tickColor={R.colors.white}
+                  label={item.name}
+                  imageStyle={styles.imageStyle}
+                />
+              </View>
+            ))}
+          </View>
+
+          
         </View>
         <Text style={styles.textTitle}>Lịch sử tình trạng của sinh viên</Text>