TODO: Đã sửa giao diện báo cáo công việc pop up

src/components/WorkReportModal/view.js → src/screens/list_work/detail/modal_add_report/view.js

@@ -8,7 +8,9 @@ import {
   StyleSheet,
   Image,
 } from 'react-native';
-import R from '../../assets/R';
+import TextMulti from '../../../../components/Input/TextMulti';
+import R from '../../../../assets/R';
+import Button from '../../../../components/Button';
 
 const WorkReportModal = ({visible, onClose, onSubmit}) => {
   const [reportContent, setReportContent] = useState('');
@@ -35,34 +37,49 @@ 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>
-          
-          <Text style={styles.label}>Nội dung báo cáo *</Text>
-          <TextInput
-            style={styles.textInput}
-            multiline={true}
-            numberOfLines={6}
+         <TextMulti 
             placeholder="Nhập nội dung báo cáo..."
-            value={reportContent}
-            onChangeText={setReportContent}
-            textAlignVertical="top"
+            title="Nội dung báo cáo"
+            required={true}
+            containerMarginBottom={10}
           />
 
           <Text style={styles.label}>Tài liệu đính kèm</Text>
           <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, !reportContent.trim() && styles.disabledButton]} 
+           <Button 
+              title= 'Huỷ'
+              height={35}
+              width={100}
+              backgroundColor={R.colors.orange}
+              borderRadius={100}
+              fontSize={R.fontsize.fontSizeContent}
+              onPress={handleCancel}
+              txtStyle={{
+                color: R.colors.white,
+                fontWeight: '600',
+                fontFamily: R.fonts.fontMedium,
+              }}
+              marginRight={10}
+           />
+           <Button 
+              title= 'Báo cáo'
+              height={35}
+              width={100}
+              backgroundColor={R.colors.blue}
+              borderRadius={100}
+              fontSize={R.fontsize.fontSizeContent}
               onPress={handleSubmit}
-              disabled={!reportContent.trim()}>
-              <Text style={styles.submitButtonText}>Báo cáo</Text>
-            </TouchableOpacity>
+              txtStyle={{
+                color: R.colors.white,
+                fontWeight: '600',
+                fontFamily: R.fonts.fontMedium,
+              }}
+           />
           </View>
         </View>
       </View>
@@ -85,17 +102,21 @@ const styles = StyleSheet.create({
     maxWidth: 400,
   },
   title: {
-    fontSize: 18,
+    fontSize: R.fontsize.fontsSizeTitle,
     fontWeight: '600',
     color: R.colors.blue,
     textAlign: 'center',
-    marginBottom: 20,
-  },
-  label: {
+  },  
+  required: {
+    color: R.colors.red,
     fontSize: 14,
     fontWeight: '500',
+  },
+  label: {
+    fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '600',
+    fontFamily: R.fonts.fontMedium,
     color: R.colors.black,
-    marginBottom: 8,
   },
   textInput: {
     borderWidth: 1,
@@ -109,18 +130,17 @@ const styles = StyleSheet.create({
   },
   attachmentContainer: {
     borderWidth: 1,
-    borderColor: R.colors.gray,
+    borderColor: R.colors.blue,
     borderRadius: 8,
-    borderStyle: 'dashed',
     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,
@@ -129,8 +149,7 @@ const styles = StyleSheet.create({
   },
   buttonContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    gap: 12,
+    justifyContent: 'flex-end',
   },
   cancelButton: {
     flex: 1,

src/components/EditReportModal/view.js → src/screens/list_work/detail/modal_edit_report/view.js

@@ -8,7 +8,7 @@ import {
   StyleSheet,
   Image,
 } from 'react-native';
-import R from '../../assets/R';
+import R from '../../../../assets/R';
 
 const EditReportModal = ({visible, onClose, onSubmit, initialContent = ''}) => {
   const [reportContent, setReportContent] = useState(initialContent);

src/screens/list_work/detail/view.js

@@ -13,8 +13,8 @@ import SubButton from '../../../components/FAB/sub_button';
 import R from '../../../assets/R';
 import Header from '../../../components/Header/Header';
 import Dropdown from '../../../components/DropdownAlert/Dropdown';
-import WorkReportModal from '../../../components/WorkReportModal';
-import EditReportModal from '../../../components/EditReportModal';
+import WorkReportModal from '../detail/modal_add_report';
+import EditReportModal from '../detail/modal_edit_report';
 const DetailListWorkView = props => {
   const {data, dataList} = props;
   const [showWorkReportModal, setShowWorkReportModal] = useState(false);