TODO: Đã hoàn thiện giao diện chỉnh sửa báo cáo pop-up

src/components/FAB/constants.js

@@ -14,7 +14,7 @@ export const FAB_BORDER_RADIUS = FAB_WIDTH / 2;
 export const FAB_BACKGROUND_COLOR = '#2F6BFF';
 
 // Khoảng cách margin của FAB với viền màn hình
-export const FAB_MARGIN = 10;
+export const FAB_MARGIN = -5;
 
 export const LEFT_EDGE_SPACING = 110;
 

src/screens/list_work/detail/index.js

@@ -7,7 +7,7 @@ const DetailListWork = (props) => {
     {
       id: 1,
       title: 'Tạo thời khóa biểu cho sinh viến khai giảng và học kỳ 2 năm 2025',
-      status: 'Đang thực hiện',
+      status: 'Chờ duyệt',
       deadline: '2025-09-04',
       supervisor: [
         {

src/screens/list_work/detail/modal_add_report/style.js

+import { StyleSheet } from "react-native";
+import R from "../../../../assets/R";
+
+const styles = StyleSheet.create({
+    overlay: {
+      flex: 1,
+      backgroundColor: R.colors.blackShadow,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    modalContainer: {
+      backgroundColor: 'white',
+      borderRadius: 12,
+      padding: 20,
+      width: '90%',
+      maxWidth: 400,
+    },
+    title: {
+      fontSize: R.fontsize.fontsSizeTitle,
+      fontWeight: '600',
+      color: R.colors.blue,
+      textAlign: 'center',
+    },
+    required: {
+      color: R.colors.red,
+      fontSize: 14,
+      fontWeight: '500',
+    },
+    label: {
+      fontSize: R.fontsize.fontSizeContent,
+      fontWeight: '600',
+      fontFamily: R.fonts.fontMedium,
+      color: R.colors.black,
+    },
+    textInput: {
+      borderWidth: 1,
+      borderColor: R.colors.gray,
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 14,
+      color: R.colors.black,
+      marginBottom: 16,
+      minHeight: 120,
+    },
+    attachmentContainer: {
+      borderWidth: 1,
+      borderColor: R.colors.blue,
+      borderRadius: 8,
+      padding: 20,
+      alignItems: 'center',
+      marginBottom: 20,
+    },
+    uploadIcon: {
+      width: 23,
+      height: 28,
+      tintColor: R.colors.blue,
+      marginBottom: 5,
+    },
+    attachmentText: {
+      fontSize: R.fontsize.fontSizeContent,
+      color: R.colors.blue,
+      fontWeight: '500',
+    },
+    buttonContainer: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+    },
+    cancelButton: {
+      flex: 1,
+      backgroundColor: R.colors.orange,
+      borderRadius: 8,
+      paddingVertical: 12,
+      alignItems: 'center',
+    },
+    submitButton: {
+      flex: 1,
+      backgroundColor: R.colors.blue,
+      borderRadius: 8,
+      paddingVertical: 12,
+      alignItems: 'center',
+    },
+    disabledButton: {
+      backgroundColor: R.colors.gray,
+    },
+    cancelButtonText: {
+      color: 'white',
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    submitButtonText: {
+      color: 'white',
+      fontSize: 16,
+      fontWeight: '600',
+    },
+  });
+
+export default styles;

src/screens/list_work/detail/modal_add_report/view.js

@@ -11,6 +11,7 @@ import {
 import TextMulti from '../../../../components/Input/TextMulti';
 import R from '../../../../assets/R';
 import Button from '../../../../components/Button';
+import styles from './style';
 
 const WorkReportModal = ({visible, onClose, onSubmit}) => {
   const [reportContent, setReportContent] = useState('');
@@ -37,7 +38,7 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
       <View style={styles.overlay}>
         <View style={styles.modalContainer}>
           <Text style={styles.title}>Báo cáo công việc</Text>
-         <TextMulti 
+          <TextMulti
             placeholder="Nhập nội dung báo cáo..."
             title="Nội dung báo cáo"
             required={true}
@@ -51,8 +52,8 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
           </TouchableOpacity>
 
           <View style={styles.buttonContainer}>
-           <Button 
-              title= 'Huỷ'
+            <Button
+              title="Huỷ"
               height={35}
               width={100}
               backgroundColor={R.colors.orange}
@@ -65,9 +66,9 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
                 fontFamily: R.fonts.fontMedium,
               }}
               marginRight={10}
-           />
-           <Button 
-              title= 'Báo cáo'
+            />
+            <Button
+              title="Báo cáo"
               height={35}
               width={100}
               backgroundColor={R.colors.blue}
@@ -79,7 +80,7 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
                 fontWeight: '600',
                 fontFamily: R.fonts.fontMedium,
               }}
-           />
+            />
           </View>
         </View>
       </View>
@@ -87,97 +88,6 @@ const WorkReportModal = ({visible, onClose, onSubmit}) => {
   );
 };
 
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContainer: {
-    backgroundColor: 'white',
-    borderRadius: 12,
-    padding: 20,
-    width: '90%',
-    maxWidth: 400,
-  },
-  title: {
-    fontSize: R.fontsize.fontsSizeTitle,
-    fontWeight: '600',
-    color: R.colors.blue,
-    textAlign: 'center',
-  },  
-  required: {
-    color: R.colors.red,
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  label: {
-    fontSize: R.fontsize.fontSizeContent,
-    fontWeight: '600',
-    fontFamily: R.fonts.fontMedium,
-    color: R.colors.black,
-  },
-  textInput: {
-    borderWidth: 1,
-    borderColor: R.colors.gray,
-    borderRadius: 8,
-    padding: 12,
-    fontSize: 14,
-    color: R.colors.black,
-    marginBottom: 16,
-    minHeight: 120,
-  },
-  attachmentContainer: {
-    borderWidth: 1,
-    borderColor: R.colors.blue,
-    borderRadius: 8,
-    padding: 20,
-    alignItems: 'center',
-    marginBottom: 20,
-  },
-  uploadIcon: {
-    width: 23,
-    height: 28,
-    tintColor: R.colors.blue,
-    marginBottom: 5,
-  },
-  attachmentText: {
-    fontSize: 14,
-    color: R.colors.blue,
-    fontWeight: '500',
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  cancelButton: {
-    flex: 1,
-    backgroundColor: R.colors.orange,
-    borderRadius: 8,
-    paddingVertical: 12,
-    alignItems: 'center',
-  },
-  submitButton: {
-    flex: 1,
-    backgroundColor: R.colors.blue,
-    borderRadius: 8,
-    paddingVertical: 12,
-    alignItems: 'center',
-  },
-  disabledButton: {
-    backgroundColor: R.colors.gray,
-  },
-  cancelButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  submitButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-});
+
 
 export default WorkReportModal;

src/screens/list_work/detail/modal_edit_report/view.js

@@ -9,6 +9,7 @@ import {
   Image,
 } from 'react-native';
 import R from '../../../../assets/R';
+import Button from '../../../../components/Button';
 
 const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
   const [reportContent, setReportContent] = useState(initialContent);
@@ -34,37 +35,54 @@ const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
       <View style={styles.overlay}>
         <View style={styles.modalContainer}>
           <Text style={styles.title}>Chỉnh sửa báo cáo</Text>
-          
+          <Text style={styles.text}>
+            Nội dung báo cáo 
+            <Text style={styles.required}>*</Text>
+          </Text>
           <Text style={styles.description}>
             Bạn đã nộp yêu cầu nhưng thành thời khoa chưa trong
             thông cho cần đánh giá môn học các công việc và
             lịch hẹn quan
           </Text>
 
-          <Text style={styles.label}>Tài liệu đính kèm</Text>
+          <Text style={styles.text}>Tài liệu đính kèm</Text>
+
           <View style={styles.attachedFileContainer}>
             <Text style={styles.fileName}>
               Quyết định thông báo đào tạo - QD347583
             </Text>
             <TouchableOpacity>
-              <Image source={R.images.icDelete} style={styles.deleteIcon} />
+              <Image source={R.images.icCancel} style={styles.deleteIcon} />
             </TouchableOpacity>
           </View>
 
           <TouchableOpacity style={styles.attachmentContainer}>
-            <Image source={R.images.icUpload} style={styles.uploadIcon} />
+            <Image source={R.images.icDocument} style={styles.uploadIcon} />
             <Text style={styles.attachmentText}>Thêm tài liệu</Text>
           </TouchableOpacity>
 
           <View style={styles.buttonContainer}>
-            <TouchableOpacity style={styles.cancelButton} onPress={handleCancel}>
-              <Text style={styles.cancelButtonText}>Hủy</Text>
-            </TouchableOpacity>
-            <TouchableOpacity 
-              style={styles.submitButton} 
-              onPress={handleSubmit}>
-              <Text style={styles.submitButtonText}>Cập nhật</Text>
-            </TouchableOpacity>
+           <Button 
+            title="Hủy"
+            onPress={handleCancel}
+            backgroundColor={R.colors.orange}
+            width={100}
+            height={35}
+            borderRadius={100}
+            marginRight={10}
+            fontSize={R.fontsize.fontSizeContent}
+            textColor={R.colors.white}
+           />
+           <Button 
+            title="Cập nhật"
+            onPress={handleSubmit}
+            backgroundColor={R.colors.blue}
+            width={100}
+            height={35}
+            borderRadius={100}
+            fontSize={R.fontsize.fontSizeContent}
+            textColor={R.colors.white}
+             />
           </View>
         </View>
       </View>
@@ -87,58 +105,64 @@ const styles = StyleSheet.create({
     maxWidth: 400,
   },
   title: {
-    fontSize: 18,
+    fontSize: R.fontsize.fontsSizeTitle,
     fontWeight: '600',
     color: R.colors.blue,
     textAlign: 'center',
-    marginBottom: 16,
   },
   description: {
-    fontSize: 14,
-    color: R.colors.black,
-    lineHeight: 20,
-    marginBottom: 20,
+    fontSize: R.fontsize.fontSizeContent,
+    color: R.colors.gray1,
+    lineHeight: 18,
+    marginBottom: 10,
     textAlign: 'left',
+    borderWidth: 1,
+    borderColor: R.colors.grayBorderInputTextHeader,
+    borderRadius: 10,
+    padding: 10,
   },
-  label: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: R.colors.black,
-    marginBottom: 8,
+  required: {
+    color: R.colors.red,
   },
+
   attachedFileContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 12,
+    backgroundColor: R.colors.blue1,
+    borderRadius: 10,
+    padding: 10,
+    marginBottom: 10,
+  },
+  text: {
+    fontSize:R.fontsize.fontSizeContent,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
+    color: R.colors.black,
   },
   fileName: {
-    fontSize: 14,
+    fontSize: 10,
     color: R.colors.black,
     flex: 1,
   },
   deleteIcon: {
     width: 20,
     height: 20,
-    tintColor: R.colors.red,
+    tintColor: R.colors.blue,
   },
   attachmentContainer: {
     borderWidth: 1,
-    borderColor: R.colors.gray,
-    borderRadius: 8,
-    borderStyle: 'dashed',
+    borderColor: R.colors.blue,
+    borderRadius: 10,
     padding: 20,
     alignItems: 'center',
     marginBottom: 20,
   },
   uploadIcon: {
-    width: 40,
-    height: 40,
+    width: 23,
+    height: 28,
     tintColor: R.colors.blue,
-    marginBottom: 8,
+    marginBottom: 5,
   },
   attachmentText: {
     fontSize: 14,
@@ -147,8 +171,7 @@ const styles = StyleSheet.create({
   },
   buttonContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    gap: 12,
+    justifyContent: 'flex-end',
   },
   cancelButton: {
     flex: 1,

src/screens/list_work/detail/view.js

@@ -39,7 +39,7 @@ const DetailListWorkView = props => {
   const renderView = () => {
     return (
       <View style={styles.body}>
-        <Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle}]}>
+        <Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle ,}]}>
           {data.title}
         </Text>
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
@@ -115,7 +115,7 @@ const DetailListWorkView = props => {
           }
           numColumns={2}
           style={{maxHeight: 150, marginBottom: 10}}
-          showsVerticalScrollIndicator={true}
+          showsVerticalScrollIndicator={false}
           columnWrapperStyle={styles.flatListSelect}
           nestedScrollEnabled={true}
           scrollEnabled={true}
@@ -154,12 +154,10 @@ const DetailListWorkView = props => {
 
   const handleWorkReportSubmit = (reportContent) => {
     console.log('Work report submitted:', reportContent);
-    // Handle work report submission logic here
   };
 
   const handleEditReportSubmit = (reportContent) => {
     console.log('Edit report submitted:', reportContent);
-    // Handle edit report submission logic here
   };
 
   const shouldShowFAB = () => {

src/screens/list_work/view.js

@@ -102,11 +102,11 @@ const ListWorkView = props => {
     return(
       <View style={{ marginHorizontal:15, marginVertical:10}}>
       <View style ={{backgroundColor: getColor(item.status),borderTopLeftRadius:15, borderTopRightRadius:15}}>
-       <Text style={[styles.subText , {marginHorizontal:15}]}>{item.status}</Text>
+       <Text style={[styles.subText , {marginHorizontal:15, fontFamily: R.fonts.fontMedium, fontWeight: '600', color: R.colors.white,}]}>{item.status}</Text>
    </View>
       <View style={styles.containerCard}>
        
-        <Text style={styles.text}>{item.title}</Text>
+        <Text style={styles.text }>{item.title}</Text>
         <View style={{flexDirection: 'row', justifyContent: 'space-between' }}>
           <Text style={styles.text}>Ngày đến hạn:
             <Text style={styles.subText}>{item.deadline}</Text>