TODO: Đã hoàn thiện danh sách lớp sinh hoạt

src/components/Button.js

@@ -29,6 +29,8 @@ const Button = props => {
     marginVerticalText,
     icon,
     iconStyle,
+    paddingHorizontal,
+    paddingVertical,
   } = props;
 
   return (
@@ -37,7 +39,8 @@ const Button = props => {
         {
           width: width,
           height: height,
-          
+          paddingHorizontal:paddingHorizontal,
+          paddingVertical:paddingVertical,
           backgroundColor: backgroundColor,
           borderRadius: borderRadius,
         },

src/routers/StackNavigation.js

@@ -6,6 +6,7 @@ import NotificationDetail from '../screens/notification/detail';
 import TabNavigator from './TabNavigation';
 import * as ScreenName from './ScreenNames';
 import NotificationAdd from '../screens/notification/add';
+import ClassActivity from '../screens/academic_advisor';
 
 const Stack = createStackNavigator();
 
@@ -16,11 +17,12 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.TABNAVIGATOR}>
+      initialRouteName={ScreenName.LISTACADEMICADVISOR}>
       <Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
       <Stack.Screen name={ScreenName.ADDNOTIFICATION} component={NotificationAdd} />
+      <Stack.Screen name={ScreenName.LISTACADEMICADVISOR} component={ClassActivity} />
     </Stack.Navigator>
   );
 }

src/screens/academic_advisor/index.js

+import React, { useState } from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import ClassActivityView from './view';
+
+const ClassActivity = (props) => {
+  const [dataList , setDataList] = useState([
+    {
+      id:'1',
+      class_activity:'ATTT2024.1',
+      course:'2024',
+      training_system:'CQUI',
+      class_by_course:'ATTT2024.1',
+      science:'MMT&TT',
+      class_leader:'Nguyễn Minh Đức',
+    },
+   
+    
+  ])
+  return (
+    <ClassActivityView dataList={dataList}
+      setDataList={setDataList}
+    />
+  );
+};
+
+export default ClassActivity;

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

+import React from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import DetailStudentView from './view';
+
+const DetailStudent = (props) => {
+  return (
+    <DetailStudentView />
+  );
+};
+
+export default DetailStudent;

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;
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <TouchableOpacity>
+        <Text>DetailStudent</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default DetailStudentView;
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/academic_advisor/list_student/index.js

+import React from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import ListStudentView from './view';
+
+const ListStudent = (props) => {
+  return (
+    <ListStudentView />
+  );
+};
+
+export default ListStudent;

src/screens/academic_advisor/list_student/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+
+const ListStudentView = (props) => {
+  const {  } = props;
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <TouchableOpacity>
+        <Text>ListStudent</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default ListStudentView;
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/academic_advisor/style.js

+import { StyleSheet , Platform} from 'react-native'
+import R from '../../assets/R';
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: R.colors.white,
+    },
+    body:{
+    },
+    card:{
+        borderWidth:1,
+        borderColor:R.colors.grayBorderInputTextHeader,
+        borderRadius:10,
+        padding:5,
+        marginTop:15,
+        marginHorizontal: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',
+    },
+    containerCard:{
+        padding:10,
+        marginBottom:15,
+        borderRadius:10,
+        backgroundColor:R.colors.white,
+        shadowColor:R.colors.black,
+        shadowOffset:{width:0,height:2},
+        shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
+        shadowRadius:1,
+        elevation:Platform.OS === 'ios' ?  1 : 2,
+        marginHorizontal:15,
+        marginVertical:15,
+    },
+    containerText:{
+        flexDirection:'row',
+    },
+    sizedBox:{
+        width:'35%',
+    },
+    containerButton:{
+        alignItems:'flex-end',
+    }
+
+})
+
+export default styles
\ No newline at end of file

src/screens/academic_advisor/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet, SafeAreaView, FlatList} from 'react-native';
+import styles from './style';
+import Header from '../../components/Header/Header';
+import Button from '../../components/Button';
+import R from '../../assets/R';
+const ClassActivityView = (props) => {
+  const {dataList,setDataList} = props;
+  const renderItem =({
+    item,
+  }) => {
+    return (
+      <View style={styles.containerCard}>
+      <Text style={styles.text}>Lớp sinh hoạt: {item.class_activity}</Text>
+      <View style={styles.containerText}>
+        <Text style={styles.text}>Khoá: {item.course}</Text>
+        <View style={styles.sizedBox}></View>
+        <Text style={styles.text}>Hệ ĐT: {item.training_system}</Text>
+      </View>
+        <Text style={styles.text}>Lớp theo khoa: {item.class_by_course}</Text>
+        <Text style={styles.text}>Khoa: {item.science}</Text>
+        <Text style={styles.text}>Lớp trưởng: {item.class_leader}</Text>
+        <View style={styles.containerButton}>
+          <Button 
+          title='Chi tiết'
+          onPress={()=>{}}
+          backgroundColor={R.colors.blue}
+          textColor={R.colors.white}
+          height={30}
+          borderRadius={15}
+          fontSize={R.sizes.sm}
+          fontWeight={'600'}
+          fontFamily={R.fonts.fontMedium}
+          paddingHorizontal={15}
+          paddingVertical={3}
+        
+          />
+        </View>
+    </View>
+    )
+  }
+  return (
+    <SafeAreaView style={styles.container}>
+      <Header title={'Danh sách lớp sinh hoạt'} isBack/>
+      <View style={styles.body}>
+        <View style={styles.card}>
+          <TouchableOpacity style={styles.btnCard}>
+            <Text style={styles.text}>Khoá 2024</Text>
+          </TouchableOpacity>
+        </View>
+        <FlatList
+          data={dataList || []}
+          renderItem={renderItem} 
+          showsVerticalScrollIndicator={false}
+          vertical
+          keyExtractor={(item, index) => `${index}`}
+        />
+      
+      </View>
+   
+    </SafeAreaView>
+  );
+};
+
+export default ClassActivityView;