TODO: Đã fix thành công giao diện tab view

src/screens/notification/index.js

@@ -74,39 +74,19 @@ const Notification = (props) => {
     Tuition: [
       {
         title_notifi_tuition: 'Thông báo nghỉ học',
-        date_create: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
-        time_send: '14/4/2024',
+        date_create: '16:00 23/07/2025 ',
+        time_send: '09:00 30/07/2025 ',
         style: 'Thông báo cá nhân',
         status: 'Chưa gửi',
       },
       {
         title_notifi_tuition: 'Thông báo nghỉ học',
-        date_create: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
-        time_send: '14/4/2024',
+        date_create: '16:00 23/07/2025 ',
+        time_send: '09:00 30/07/2025 ',
         style: 'Thông báo cá nhân',
-        status: 'Chưa gửi',
-      },
-      {
-        title_notifi_tuition: 'Thông báo nghỉ học',
-        date_create: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
-        time_send: '14/4/2024',
-        style: 'Thông báo cá nhân',
-        status: 'Chưa gửi',
-      },
-      {
-        title_notifi_tuition: 'Thông báo nghỉ học',
-        date_create: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
-        time_send: '14/4/2024',
-        style: 'Thông báo cá nhân',
-        status: 'Chưa gửi',
-      },
-      {
-        title_notifi_tuition: 'Thông báo nghỉ học',
-        date_create: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
-        time_send: '14/4/2024',
-        style: 'Thông báo cá nhân',
-        status: 'Chưa gửi',
+        status: 'Đã gửi',
       },
+     
     ],
   });
   const handleTabChange = (tabKey) => {

src/screens/notification/style.js

@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
         minWidth:Platform.OS === 'ios' ? 70 : 80,
         backgroundColor:R.colors.grayButton,
         borderRadius:10,
-        marginHorizontal:5,
+        marginHorizontal:Platform.OS === 'ios' ? 10 : 5,
         alignItems:'center',
         justifyContent:'center',
     },
@@ -69,7 +69,6 @@ const styles = StyleSheet.create({
     cardItem:{
         paddingVertical:10,
         paddingHorizontal:15,
-        borderWidth:1,
         borderColor:R.colors.grayBorderInputTextHeader,
         borderRadius:10,
         marginVertical:10,
@@ -81,6 +80,16 @@ const styles = StyleSheet.create({
         shadowRadius:5,
         elevation:1,
     },
+    cardItemTution:{
+        flexDirection:'row',
+        justifyContent:'space-between',
+    },
+    boxLeft:{
+    },
+    boxRight:{
+        justifyContent:'center',
+        alignItems:'center',
+    },
     containerEmpty:{
         alignItems:'center',
         justifyContent:'center',
@@ -97,9 +106,17 @@ const styles = StyleSheet.create({
         fontWeight:'500',
         fontFamily:R.fonts.fontMedium,
     },
-    boxTime:{
+    boxTimeTution:{
+        flexDirection:'row',
+        justifyContent:'space-between',
+        flex:1
+    },
+    sizedBox:{
+        width:"10%",
+    },
+    boxTimeView:{
         alignItems:'flex-end',
-    }
+    },
     
 })
 export default styles;
\ No newline at end of file

src/screens/notification/view.js

@@ -21,6 +21,7 @@ const NotificationView = props => {
     searchText,
     onSearchChange,
   } = props;
+  //Xử lý render item cho tab view
   const getRenderItemFunction = () => {
     switch (activeTab) {
       case 'Tuition':
@@ -29,6 +30,17 @@ const NotificationView = props => {
         return renderNotificationItemView;
     }
   };
+  //Xử lý màu trạng thái khi ở tab view
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'Đã gửi':
+        return R.colors.green || '#4CAF50'; 
+      case 'Chưa gửi':
+        return R.colors.brown || '#8D6E63'; 
+      default:
+        return R.colors.gray || '#9E9E9E'; 
+    }
+  };
   //TabView
   const renderTabViewItem = ({item}) => {
     const isActivity = activeTab === item.key;
@@ -83,7 +95,7 @@ const NotificationView = props => {
       <View style={styles.cardItem}>
         <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.title_notifi}</Text>
         <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">{item.message}</Text>
-        <View style={styles.boxTime}>
+        <View style={styles.boxTimeView}>
         <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.time}</Text>
         </View>
      
@@ -93,14 +105,38 @@ const NotificationView = props => {
   };
   //List Notification Tution
   const renderNotificationItemTution = ({item}) => {
+    const statusColor = getStatusColor(item.status);
     return (
-      <View style={styles.cardItem}>
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.title_notifi_tuition}</Text>
-        <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">{item.date_create}</Text>
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.time_send}</Text>
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.style}</Text>
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.status}</Text>
+      <View style={[styles.cardItem, styles.cardItemTution]}>
+        <View style={styles.boxLeft}>
+        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
+          <Text style={styles.text}>Tiêu đề: </Text>
+          {item.title_notifi_tuition}
+        </Text>
+
+        <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">
+          <Text style={styles.text}>Ngày tạo: </Text>
+          {item.date_create}
+        </Text>
+
+        <View style={styles.boxTimeTution}>
+        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
+          <Text style={styles.text}>Thời gian gửi: </Text>
+          {item.time_send}
+        </Text>
+        <View style={styles.sizedBox}></View>
+        <Text style={[styles.text, {color: statusColor}]} numberOfLines={1} ellipsizeMode="tail">
+           {item.status}
+          </Text>
+        </View>
+
+        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
+          <Text style={styles.text}>Loại thông báo: </Text>
+          {item.style}</Text>
      
+        </View>
+          <Image source={R.images.icNext} resizeMode="contain" style={{width: 10, height: 15, alignSelf:'center'}} />
+    
       </View>
     );
   };