TODO: Đã hoàn thiện phần khung giao diện cơ bản của chi tiết sinh viên

src/routers/StackNavigation.js

@@ -8,6 +8,7 @@ import * as ScreenName from './ScreenNames';
 import NotificationAdd from '../screens/notification/add';
 import ClassActivity from '../screens/academic_advisor';
 import ListStudentClass from '../screens/academic_advisor/list_student';
+import DetailStudent from '../screens/academic_advisor/list_student/detail';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -24,6 +25,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.ADDNOTIFICATION} component={NotificationAdd} />
       <Stack.Screen name={ScreenName.LISTACADEMICADVISOR} component={ClassActivity} />
       <Stack.Screen name={ScreenName.LISTSTUDENTCLASS} component={ListStudentClass} />
+      <Stack.Screen name={ScreenName.DETAILSTUDENT} component={DetailStudent} />
     </Stack.Navigator>
   );
 }

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

-import React from 'react';
+import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import DetailStudentView from './view';
 
 const DetailStudent = (props) => {
+  const [student, setStudent] = useState({
+    name: 'Nguyễn Minh Đức',
+    code_student: '2598671',
+    status: 'Đang học',
+    date_student: '01/01/2000',
+    tele_phone: '0123456789',
+    gender: 'Nam',
+    average_score: '8.5',
+    latest_semester_average_score:'8.5',
+    training_average_score:'100',
+    type:[
+      {
+       id:1,
+       name:'Chuẩn đầu ra NN',
+       status:true,
+      },
+      {
+        id:2,
+        name:'Chuẩn trình NN',
+        status:true,
+       },
+       {
+        id:3,
+        name:'Quá tiến độ học tập',
+        status:false,
+       },
+       {
+        id:4,
+        name:'Nợ học phí',
+        status:false,
+       },
+    ]
+  });
   return (
-    <DetailStudentView />
+    <DetailStudentView 
+      student={student}
+    />
   );
 };
 

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

+import { StyleSheet, Text, View } from 'react-native'
+import R from '../../../../assets/R'
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: R.colors.white,
+    },
+    card:{
+        borderRadius:10,
+        padding:15,
+        marginVertical:15,
+        marginHorizontal:15,
+
+        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,
+    },
+
+    containerText:{
+        flexDirection:'row',
+        alignItems:'center',
+        justifyContent:'center',
+        marginBottom:15,
+    },
+    containerTextItemLeft:{
+        flex:3,
+        alignItems:'center',
+        justifyContent:'center',
+    },
+    containerTextItemRight:{
+        flex:3,
+    },
+    sizedBox:{
+        flex:1
+    },
+  
+    text:{
+        fontSize:R.sizes.sm,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'600',
+        color:R.colors.black,
+        textAlign:'center',
+    },
+    containerSubText:{
+        flexDirection:'row',
+        marginBottom:5
+    },
+    containerSubTextItemLeft:{
+    },
+    containerSubTextItemRight:{
+    },
+    textTitle:{
+        fontSize:R.sizes.md,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'600',
+        color:R.colors.blue,
+        marginHorizontal:15,
+    },
+})
+
+export default styles

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

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
-
-const DetailStudentView = (props) => {
-  const {  } = props;
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+import Header from '../../../../components/Header/Header';
+import R from '../../../../assets/R';
+import styles from './style';
+import * as SCREENNAME from '../../../../routers/ScreenNames';
+import {useNavigation} from '@react-navigation/native';
+import VersionCheck from '../../../../components/VersionCheck';
+const DetailStudentView = props => {
+  const {student} = props;
+  const navigate = useNavigation();
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <TouchableOpacity>
-        <Text>DetailStudent</Text>
-      </TouchableOpacity>
-    </View>
+    <SafeAreaView style={styles.container}>
+      <Header title={'Nguyễn Minh Đức - 2598671'} isBack />
+      <View style={styles.body}>
+        <View style={styles.card}>
+          <View style={styles.containerText}>
+            <View style={styles.containerTextItemLeft}>
+              <Text style={styles.text}>STC TL / STC CTDT 23 / 102</Text>
+            </View>
+            <View style={styles.sizedBox}></View>
+            <View style={styles.containerTextItemRight}>
+              <Text style={styles.text}>Tình trạng: Đang học</Text>
+            </View>
+          </View>
+          {/*Row 2*/}
+          <View style={styles.containerSubText}>
+            <View style={styles.containerSubTextItemLeft}>
+              <Text style={[styles.text]}>
+                Ngày sinh:
+                <Text
+                  style={[
+                    styles.text,
+                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
+                  ]}>
+                  {student.date_student}
+                </Text>
+              </Text>
+            </View>
+            <View style={styles.sizedBox}></View>
+            <View style={styles.containerSubTextItemRight}>
+              <Text style={[styles.text]}>
+                SDT:
+                <Text
+                  style={[
+                    styles.text,
+                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
+                  ]}>
+                  {student.tele_phone}
+                </Text>
+              </Text>
+            </View>
+          </View>
+          {/*Row 3*/}
+          <View style={styles.containerSubText}>
+            <View style={styles.containerSubTextItemLeft}>
+              <Text style={[styles.text]}>
+                Giới tính:
+                <Text
+                  style={[
+                    styles.text,
+                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
+                  ]}>
+                  {student.gender}
+                </Text>
+              </Text>
+            </View>
+            <View style={styles.sizedBox}></View>
+            <View style={styles.containerSubTextItemRight}>
+              <Text style={[styles.text]}>
+                Điểm trung bình:
+                <Text
+                  style={[
+                    styles.text,
+                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
+                  ]}>
+                  {student.average_score}
+                </Text>
+              </Text>
+            </View>
+          </View>
+
+          {/*Row 4*/}
+          <View style={styles.containerSubText}>
+            <View style={styles.containerSubTextItemLeft}>
+              <Text style={[styles.text]}>
+                Điểm TB học kì gần nhất:
+                <Text
+                  style={[
+                    styles.text,
+                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
+                  ]}>
+                  {student.average_score}
+                </Text>
+              </Text>
+            </View>
+          </View>
+          {/*Row 5*/}
+          <View style={styles.containerSubText}>
+            <View style={styles.containerSubTextItemLeft}>
+              <Text style={[styles.text]}>
+                Điểm rèn luyện TB:
+                <Text
+                  style={[
+                    styles.text,
+                    {fontFamily: R.fonts.fontRegular, fontWeight: '400'},
+                  ]}>
+                  {student.training_average_score}
+                </Text>
+              </Text>
+            </View>
+          </View>
+        </View>
+        <Text style={styles.textTitle}>Lịch sử tình trạng của sinh viên</Text>
+
+        <View style={styles.card}>
+          <View style={styles.containerText}>
+            <View style={{flex: 4}}>
+              <Text
+                style={[
+                  {
+                    fontSize: R.sizes.sm,
+                    fontFamily: R.fonts.fontRegular,
+                    fontWeight: '400',
+                    color:R.colors.black,
+                  },
+                ]}>
+                Học kỳ 2, Năm học 2024
+              </Text>
+            </View>
+
+            <View style={{flex: 3}}>
+              <Text
+                style={[
+                  {
+                    fontSize: R.sizes.sm,
+                    fontFamily: R.fonts.fontRegular,
+                    fontWeight: '400',
+                    color: R.colors.black,
+                  },
+                ]}>
+                Tình trạng: Đang học
+              </Text>
+            </View>
+          </View>
+
+          <View style={styles.containerText}>
+            <View style={{flex: 4}}>
+              <Text
+                style={[
+                  {
+                    fontSize: R.sizes.sm,
+                    fontFamily: R.fonts.fontRegular,
+                    fontWeight: '400',
+                    color:R.colors.black,
+                  },
+                ]}>
+                  Ngày quyết định: {student.date_student}
+              </Text>
+            </View>
+           
+            
+
+          </View>
+
+          
+          <View style={styles.containerText}>
+            <View style={{flex: 4}}>
+              <Text
+                style={[
+                  {
+                    fontSize: R.sizes.sm,
+                    fontFamily: R.fonts.fontRegular,
+                    fontWeight: '400',
+                    color:R.colors.black,
+                  },
+                ]}>
+                  Lý do: {student.date_student}
+              </Text>
+            </View>
+           
+            
+
+          </View>
+
+          <View style={styles.containerText}>
+            <View style={{flex: 4}}>
+              <Text
+                style={[
+                  {
+                    fontSize: R.sizes.sm,
+                    fontFamily: R.fonts.fontRegular,
+                    fontWeight: '400',
+                    color:R.colors.black,
+                  },
+                ]}>
+                  Ghi chú: {student.date_student}
+              </Text>
+            </View>
+           
+            
+
+          </View>
+        </View>
+      </View>
+    </SafeAreaView>
   );
 };
 
 export default DetailStudentView;
-
-const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/academic_advisor/list_student/view.js

@@ -3,20 +3,21 @@ import {
   Text,
   View,
   TouchableOpacity,
-  StyleSheet,
   SafeAreaView,
   TextInput,
   Image,
   Platform,
-  ScrollView,
   FlatList,
 } from 'react-native';
 import Header from '../../../components/Header/Header';
 import styles from './style';
 import R from '../../../assets/R';
+import * as SCREENNAME from '../../../routers/ScreenNames';
+import { useNavigation } from '@react-navigation/native';
 const ListStudentView = props => {
   const {searchText, onSearchChange, filter, statusStats} = props;
   console.log(props);
+  const navigate = useNavigation();
   //Search
   const renderSearchBox = () => {
     return (
@@ -65,7 +66,7 @@ const ListStudentView = props => {
   };
 
   //List student
-  const renderStudentItem = ({item}) => {
+  const renderStudentItem = ({item , onPress}) => {
     const isLeftIcon = item.gender === 'Nam';
     const genderIcon =
       item.gender === 'Nam' ? R.images.icMale : R.images.icFemale;
@@ -73,7 +74,7 @@ const ListStudentView = props => {
     const statusColor = getStatusColor(item.status);
 
     return (
-      <TouchableOpacity style={styles.studentCard}>
+      <TouchableOpacity style={styles.studentCard} onPress={()=>{navigate.navigate(SCREENNAME.DETAILSTUDENT)}}>
         <View style={styles.studentCardContent}>
           <View style={styles.studentInfo}>
             {/*Tên sinh viên*/}