TODO: Tối ưu hóa màu sắc cho các trạng thái trong các component: cập nhật mã màu…

TODO: Tối ưu hóa màu sắc cho các trạng thái trong các component: cập nhật mã màu cho 'Đã phê duyệt', 'Hạn chế' và 'Chờ xác nhận'

src/screens/list_send_document/detail/index.js

@@ -8,7 +8,7 @@ const DetailSendDocument = props => {
     title: 'Văn bản thông báo lịch nộp thời khoá biểu của học kỳ 2 năm 2025',
     status: 'Hạn chế',
     symbol_number: '2038475',
-    regime: 'Đã phê duyệt    ',
+    regime: 'Đã phê duyệt',
     number_entry_book: '12493-fh544',
     term: '29/07/2025',
     term_display: '09/07/2025',

src/screens/list_send_document/detail/view.js

@@ -33,25 +33,28 @@ const DetailSendDocumentView = props => {
   const getColor = status => {
     switch (status) {
       case 'Hạn chế':
-        return R.colors.brown;
+        return R.colors.orange;
       case 'Công khai':
         return R.colors.blue;
     }
   };
   const getColorRegime = regime => {
+    console.log("Checking regime:", regime); 
     switch (regime) {
       case 'Đã phê duyệt':
-        return R.colors.green;
+        return R.colors.green1;
       case 'Chờ xét duyệt':
         return R.colors.blue;
       case 'Cần chỉnh sửa':
         return R.colors.orange;
       case 'Dự thảo':
         return R.colors.orange;
+         default:
+      console.log("No match, returning R.colors.black (default)"); // Log khi không khớp
+      return R.colors.black; // Màu mặc định nếu không khớp
     }
   };
   const renderItem = ({item}) => {
-    console.log(item);
     return (
       <View style={{marginVertical: 7.5}}>
         <View style={{flexDirection: 'row', marginBottom: 5}}>
@@ -67,6 +70,8 @@ const DetailSendDocumentView = props => {
     );
   };
   const body = () => {
+    console.log('regime',icomingDocument.regime);
+    
     return (
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={styles.body}>
@@ -94,7 +99,7 @@ const DetailSendDocumentView = props => {
 
             <Text style={styles.text}>
               Trạng thái:{' '}
-              <Text style={[styles.text_2, {color: R.colors.green}]}>
+              <Text style={[styles.text_2, {color: getColorRegime(icomingDocument.regime)}]}>
                 {icomingDocument.regime}
               </Text>
             </Text>

src/screens/list_send_document/index.js

 import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import ListSendDocumentView from './view';
+import R from '../../assets/R';
 
 const ListSendDocument = props => {
   const [activeTab, setActiveTab] = useState('all');
@@ -93,6 +94,27 @@ const ListSendDocument = props => {
     return matchTab && matchSearch;
   });
 
+  const getColorStatus = status => {
+      switch (status) {
+        case 'Chờ xét duyệt':
+          return R.colors.blue;
+        case 'Cần chỉnh sửa':
+          return R.colors.orange;
+        case 'Đã phê duyệt':
+          return R.colors.green1;
+        case 'Dự thảo':
+          return R.colors.orange;
+      }
+    };
+    const getColorRegime = regime => {
+      switch (regime) {
+        case 'Hạn chế':
+          return R.colors.orange;
+        case 'Công khai':
+          return R.colors.blue;
+      }
+    };
+
   return (
     <ListSendDocumentView
       activeTab={activeTab}
@@ -101,6 +123,9 @@ const ListSendDocument = props => {
       searchQuery={searchQuery}
       setSearchQuery={setSearchQuery}
       handleTabKey={handleTabKey}
+      getColorStatus={getColorStatus}
+      getColorRegime={getColorRegime}
+
     />
   );
 };

src/screens/list_send_document/view.js

@@ -25,29 +25,11 @@ const ListSendView = props => {
     searchQuery,
     setSearchQuery,
     handleTabKey,
+    getColorStatus,
+    getColorRegime
   } = props;
   const navigation = useNavigation();
   LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
-  const getColorStatus = status => {
-    switch (status) {
-      case 'Chờ xét duyệt':
-        return R.colors.blue;
-      case 'Cần chỉnh sửa':
-        return R.colors.orange;
-      case 'Đã phê duyệt':
-        return R.colors.green;
-      case 'Dự thảo':
-        return R.colors.orange;
-    }
-  };
-  const getColorRegime = regime => {
-    switch (regime) {
-      case 'Hạn chế':
-        return R.colors.brown;
-      case 'Công khai':
-        return R.colors.blue;
-    }
-  };
 
   const hasRelatedWork = n => Number(n) > 0;
   const getHiddenButton = n => (hasRelatedWork(n) ? true : false);

src/screens/list_work/index.js

@@ -466,7 +466,7 @@ const ListWork = props => {
           },
           {
             title: 'Phê duyệt',
-            backgroundColor: R.colors.green,
+            backgroundColor: R.colors.orange,
             action: 'approve',
           },
           {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},

src/screens/list_work/monitoring/view.js

@@ -7,7 +7,6 @@ import {
   FlatList,
   ScrollView,
   LogBox,
-  ActivityIndicator,
 } from 'react-native';
 import styles from './style';
 import FAB from '../../../components/FAB/fab';

src/screens/notification/detail/style.js

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 10,
     marginVertical: 10,
-    backgroundColor: R.colors.brown,
+    backgroundColor: R.colors.orange,
   },
   txtInput: {
     color: R.colors.white,

src/screens/notification/index.js

 import React, {useState, useMemo} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import NotificationView from './view';
+import R from '../../assets/R';
 
 const Notification = props => {
   //Xử lý tabView
@@ -179,6 +180,17 @@ const Notification = props => {
     setSearchText(text);
   };
 
+   const getStatusColor = status => {
+    switch (status) {
+      case 'Đã gửi':
+        return R.colors.green1 ;
+      case 'Chưa gửi':
+        return R.colors.orange;
+      default:
+        return R.colors.gray ;
+    }
+  };
+
   const fitlerSearch = useMemo(() => {
     const list = dataNotifi[activeTab] || [];
     if (!searchText.trim()) return list;
@@ -198,6 +210,7 @@ const Notification = props => {
 
   return (
     <NotificationView
+      getStatusColor={getStatusColor}
       dataTitleListTabView={dataListTabView}
       activeTab={activeTab}
       onTabChange={handleTabChange}

src/screens/notification/view.js

@@ -22,6 +22,7 @@ const NotificationView = props => {
     getEmptyMessage,
     searchText,
     onSearchChange,
+    getStatusColor
   } = props;
   const navigate = useNavigation();
   const getRenderItemFunction = () => {
@@ -32,16 +33,7 @@ const NotificationView = props => {
         return renderNotificationItemView;
     }
   };
-  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';
-    }
-  };
+ 
   const renderTabViewItem = ({item}) => {
     const isActivity = activeTab === item.key;
     return (

src/screens/roll_call/detail/style.js

@@ -108,6 +108,12 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     color: R.colors.black,
   },
+  txtView:{
+    fontSize: R.fontsize.fontSizeContent,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
+    color: R.colors.black,
+  }
 });
 
 export default styles;

src/screens/roll_call/detail/view.js

@@ -2,10 +2,7 @@ import React, {useState} from 'react';
 import {
   Text,
   View,
-  TouchableOpacity,
-  StyleSheet,
   ScrollView,
-  FlatList,
 } from 'react-native';
 import Header from '../../../components/Header/Header';
 import styles from './style';
@@ -15,11 +12,8 @@ import R from '../../../assets/R';
 const DetailRollCallView = props => {
   const {sessionDates, studentsData} = props;
 
+  const renderGroupButton = () => {
     return (
-    <View style={styles.container}>
-      <Header title={'Thống kê: ATTT2024.P1'} isBack />
-      <View style={styles.body}>
-        <ScrollView vertical showsVerticalScrollIndicator={false}>
       <View style={styles.btnGroup}>
         <Button
           title="Tạo QR điểm danh"
@@ -53,16 +47,21 @@ const DetailRollCallView = props => {
         />
         <Button />
       </View>
+    );
+  };
 
+  const renderView = () => {
+    return (
+      <View>
         <View>
-            <Text style={styles.txt}>
-              SL sinh viên nghỉ quá số lượng cho phép: <Text>3</Text>
+          <Text style={[styles.txt, styles.txtView ]}>
+            SL sinh viên nghỉ quá số lượng cho phép: <Text style={[styles.txt]}>3</Text>
           </Text>
-            <Text style={styles.txt}>
-              SL sinh viên đang bị cảnh báo: <Text>1</Text>
+          <Text style={[styles.txt, styles.txtView]}>
+            SL sinh viên đang bị cảnh báo: <Text style={[styles.txt]}>1</Text>
           </Text>
-            <Text style={styles.txt}>
-              SL sinh viên đủ điều kiện: <Text>3</Text>
+          <Text style={[styles.txt, styles.txtView]}>
+            SL sinh viên đủ điều kiện: <Text style={[styles.txt]}>3</Text>
           </Text>
         </View>
 
@@ -79,8 +78,7 @@ const DetailRollCallView = props => {
             ]}>
             Kí hiệu
           </Text>
-            <View
-              style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
             <View>
               <Text style={[styles.txt, {color: R.colors.blue}]}>
                 (1){' '}
@@ -131,14 +129,18 @@ const DetailRollCallView = props => {
             </View>
           </View>
         </View>
+      </View>
+    );
+  };
 
+  const renderList = () => {
+    return (
       <View>
         <Text style={styles.sectionTitle}>Danh sách</Text>
 
         <View style={styles.attendanceTableContainer}>
           <ScrollView horizontal showsHorizontalScrollIndicator={false}>
             <View style={styles.attendanceTable}>
-                  {/* Header Row */}
               <View style={styles.attendanceHeaderRow}>
                 <View
                   style={[
@@ -152,16 +154,12 @@ const DetailRollCallView = props => {
                 {sessionDates.map((date, index) => (
                   <View
                     key={index}
-                        style={[
-                          styles.attendanceHeaderCell,
-                          styles.dateColumn,
-                        ]}>
+                    style={[styles.attendanceHeaderCell, styles.dateColumn]}>
                     <Text style={styles.attendanceHeaderText}>{date}</Text>
                   </View>
                 ))}
               </View>
 
-                  {/* Student Rows */}
               {studentsData.map((student, studentIndex) => (
                 <View key={student.id} style={styles.attendanceDataRow}>
                   <View
@@ -172,16 +170,14 @@ const DetailRollCallView = props => {
                     <Text style={styles.studentCodeText}>
                       {student.studentCode}
                     </Text>
-                        <Text style={styles.studentNameText}>
-                          {student.name}
-                        </Text>
+                    <Text style={styles.studentNameText}>{student.name}</Text>
                     <Text
                       style={[
                         styles.percentageText,
                         {
                           color: student.percentage.includes('50%')
                             ? R.colors.red
-                                : R.colors.green,
+                            : R.colors.green1,
                         },
                       ]}>
                       {student.percentage}
@@ -190,10 +186,7 @@ const DetailRollCallView = props => {
                   {student.attendance.map((status, dateIndex) => (
                     <View
                       key={dateIndex}
-                          style={[
-                            styles.attendanceDataCell,
-                            styles.dateColumn,
-                          ]}>
+                      style={[styles.attendanceDataCell, styles.dateColumn]}>
                       <Text
                         style={[
                           styles.attendanceStatusText,
@@ -203,7 +196,7 @@ const DetailRollCallView = props => {
                                 ? R.colors.blue
                                 : status === 0
                                 ? R.colors.red
-                                    : R.colors.gray2,
+                                : R.colors.gray,
                           },
                         ]}>
                         {status}
@@ -216,8 +209,25 @@ const DetailRollCallView = props => {
           </ScrollView>
         </View>
       </View>
+    );
+  };
+
+  const renderBody = () => {
+    return (
+      <View style={styles.body}>
+        <ScrollView vertical showsVerticalScrollIndicator={false}>
+          {renderGroupButton()}
+          {renderView()}
+          {renderList()}
         </ScrollView>
       </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Header title={'Thống kê: ATTT2024.P1'} isBack />
+      {renderBody()}
     </View>
   );
 };

src/screens/sub_teacher/view.js

@@ -174,7 +174,7 @@ const SubTeacherView = props => {
       case 'Chờ xác nhận':
         return R.colors.blue;
       case 'Đã xác nhận':
-        return R.colors.green;
+        return R.colors.green1;
       case 'Từ chối':
         return R.colors.orange;
     }