TODO: Tối ưu hóa và cải thiện hiển thị trong component DetailListWorkMonitoring:…

TODO: Tối ưu hóa và cải thiện hiển thị trong component DetailListWorkMonitoring: thêm màu sắc mới, điều chỉnh giao diện và xử lý trạng thái báo cáo.

src/assets/colors.js

@@ -27,6 +27,7 @@ const colors = {
 
   green: 'rgba(0, 255, 21, 1)',
   green1: 'rgb(9, 193, 25)',
+  green2:'rgb(0, 128, 0)',
 
   red: 'rgba(255, 47, 48, 1)',
 

src/screens/list_work/monitoring/index.js

@@ -54,9 +54,7 @@ const DetailListWorkMonitoring = props => {
           title: 'Báo cáo tiến độ lần 1',
           time: '14:30',
           date: '2025-09-10',
-          content:
-            'Báo cáo tiến độ thực hiện công việc được giao. Hiện tại đã hoàn thành 60% công việc theo kế hoạch.',
-          fileTitle: 'Báo cáo tiến độ - BC001',
+          statusDocument: 'Đã phê duyệt',
           responder: [
             {
               id: 1,

src/screens/list_work/monitoring/modal_request_edit_report/view.js

@@ -33,6 +33,7 @@ const ModalRequestEditReportView = props => {
             required={true}
             value={reportDeadline}
             onChangeText={setReportDeadline}
+            containerMarginBottom={10}
           />
           <TextField
             title={'Hạn sửa báo cáo'}

src/screens/list_work/monitoring/style.js

@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
   cardContent: {
     borderWidth: 1,
     borderRadius: 10,
-    padding: 10,
+   
     marginVertical: 3,
     borderColor: R.colors.grayBorderInputTextHeader,
     backgroundColor: R.colors.white,

src/screens/list_work/monitoring/view.js

@@ -7,6 +7,7 @@ import {
   FlatList,
   ScrollView,
   LogBox,
+  ActivityIndicator,
 } from 'react-native';
 import styles from './style';
 import FAB from '../../../components/FAB/fab';
@@ -53,9 +54,34 @@ const DetailListWorkMonitoringView = props => {
     }
   };
 
-  const shouldShowFilterStatus = () => {
-    return data.status === 'Đang thực hiện';
+  const getColorCard = statusDocument => {
+    switch (statusDocument) {
+      case 'Đã phê duyệt':
+        return R.colors.green;
+      case 'Chỉnh sửa':
+        return R.colors.orange;
+      default:
+        return R.colors.gray;
+    }
+  };
+
+  const getViewMode = () => {
+    switch (data?.status) {
+      case 'Đang thực hiện':
+        return 'editing';
+      case 'Đợi báo cáo':
+        return 'review';
+      case 'Chờ duyệt':
+        return 'waiting';
+      case 'Đợi chỉnh sửa':
+        return 'waitingEdit';
+      case 'Hoàn thành':
+        return 'completed';
+      default:
+        return 'none';
+    }
   };
+  const mode = getViewMode();
 
   const renderItem_1 = ({item, onPress}) => {
     return (
@@ -75,20 +101,20 @@ const DetailListWorkMonitoringView = props => {
     );
   };
 
+
+
   const renderButton = () => {
     return (
-      <View style={styles.btnRegister2}>
         <Button
-          title={'Cập nhật thông tin công việc'}
+          title={ mode === 'editing' ? 'Cập nhật thông tin công việc' : 'Phê duyệt' }
           backgroundColor={R.colors.blue}
           textColor={R.colors.white}
           onPress={() => ({})}
           fontSize={R.sizes.sm}
           fontFamily={R.fonts.fontMedium}
-          height={35}
-          containerStyle={{paddingHorizontal: 15, borderRadius: 25}}
+          height={30}
+          containerStyle={{paddingHorizontal: 15, borderRadius: 25, marginTop:30}}
         />
-      </View>
     );
   };
 
@@ -106,6 +132,7 @@ const DetailListWorkMonitoringView = props => {
     const responders = reports.flatMap(r => r?.responder ?? []);
     return (
       <View>
+        <View>
           <Text
             style={[
               styles.text,
@@ -122,11 +149,33 @@ const DetailListWorkMonitoringView = props => {
             {reports.map(item => item.time).join(', ')}{' '}
             {reports.map(item => item.date).join(', ')}
           </Text>
+
           <View style={styles.cardContent}>
+            <View
+              style={{
+                borderTopLeftRadius: 10,
+                borderTopRightRadius: 10,
+                paddingLeft: 10,
+                backgroundColor: getColorCard(
+                  reports.map(item => item.statusDocument).join(', '),
+                ),
+              }}>
+              <Text
+                style={[
+                  styles.text,
+                  {
+                    color: R.colors.white,
+                  },
+                ]}>
+                {reports.map(item => item.statusDocument).join(', ')}
+              </Text>
+            </View>
+            
+            <View style ={{ padding: 10,}} >
               <Text style={[styles.text]}>
                 {responders.map(item => item.name).join(', ')} -{' '}
                 {responders.map(item => item.time).join(', ')}{' '}
-            {responders.map(item => item.date).join(', ')}
+                {responders.map(item => item.date).join(', ')}{' '}
               </Text>
               <View style={styles.containerContent}>
                 <Text style={[styles.text, {color: R.colors.gray4}]}>
@@ -139,20 +188,22 @@ const DetailListWorkMonitoringView = props => {
                 </Text>
                 <Image source={R.images.icDownload} style={styles.image} />
               </TouchableOpacity>
-          <View style={{flexDirection: 'row', justifyContent:'flex-end'}}>
+              <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
                 <Button
                   title="Yêu cầu chỉnh sửa"
                   backgroundColor={R.colors.orange}
                   textColor={R.colors.white}
-              onPress={()=>{
-                console.log('Yêu cầu chỉnh sửa');
+                  onPress={() => {
                     onOpenModalRequestEditReport();
-                
                   }}
                   fontSize={R.sizes.sm}
                   fontFamily={R.fonts.fontMedium}
                   height={30}
-              containerStyle={{paddingHorizontal: 15, borderRadius: 25, marginRight: 5}}
+                  containerStyle={{
+                    paddingHorizontal: 15,
+                    borderRadius: 25,
+                    marginRight: 5,
+                  }}
                 />
                 <Button
                   title="Phê duyệt"
@@ -167,6 +218,18 @@ const DetailListWorkMonitoringView = props => {
               </View>
             </View>
           </View>
+        </View>
+      </View>
+    );
+  };
+
+  const renderLoading = () => {
+    return (
+      <View style={styles.body}>
+        <Text style={[styles.text, {textAlign: 'center'}]}>
+          Xin hãy đợi thông tin phản hồi từ người thực hiện công việc ...
+        </Text>
+      </View>
     );
   };
 
@@ -302,9 +365,13 @@ const DetailListWorkMonitoringView = props => {
           </Text>
           <Image source={R.images.icDownload} style={styles.image} />
         </TouchableOpacity>
-        {shouldShowFilterStatus() && renderButtonDownloadDoc()}
-        {shouldShowFilterStatus() && renderButton()}
-        {!shouldShowFilterStatus() && renderListReport()}
+        <>
+          {mode === 'editing' && renderButtonDownloadDoc()}
+          {mode === 'editing' && renderButton()}
+          {mode === 'review' && renderLoading()}
+          {(mode === 'waiting' || mode === 'waitingEdit' || mode === 'completed') && renderListReport()}
+          {mode === 'waiting' && renderButton()}
+        </>
       </View>
     );
   };
@@ -315,8 +382,8 @@ const DetailListWorkMonitoringView = props => {
       <ScrollView showsVerticalScrollIndicator={false}>
         {renderBody()}
       </ScrollView>
-
-      {shouldShowFilterStatus() && (
+      <>
+        {mode === 'editing' && (
           <FAB>
             <SubButton
               onPress={onOpenModalRequestReport}
@@ -326,6 +393,7 @@ const DetailListWorkMonitoringView = props => {
             />
           </FAB>
         )}
+      </>
 
       <ModalRequestReport
         visible={showModalRequestReport}