TODO: Thêm modal báo cáo công việc và chỉnh sửa báo cáo

Triển khai WorkReportModal để thêm báo cáo công việc với phần nhập nội dung và tuỳ chọn đính kèm.

Tạo EditReportModal để chỉnh sửa báo cáo hiện có với nội dung được điền sẵn và quản lý tệp đính kèm.

Tích hợp cả hai modal vào DetailListWorkDeliverToMeView để người dùng thao tác mượt mà.

Thêm quản lý state cho dữ liệu báo cáo và trạng thái hiển thị modal.

Cải thiện giao diện với các style phù hợp và yếu tố thiết kế responsive.

TODO: Phát triển màn hình chi tiết cho giám sát công việc

Tạo component DetailListWorkMonitoring để hiển thị chi tiết giám sát công việc.

Thiết lập cấu trúc ban đầu và style cho màn hình giám sát.

Chuẩn bị component cho các nâng cấp và tích hợp dữ liệu trong tương lai.

src/routers/ScreenNames.js

@@ -40,7 +40,8 @@ export const INCOMINGDOCUMENT = 'INCOMINGDOCUMENT' ;
 export const DETAILINCOMINGDOCUMENT = 'DETAILINCOMINGDOCUMENT';
 
 export const LISTWORK = 'LISTWORK';
-export const DETAILWORK = 'DETAILWORK';
+export const DETAILWORKDELIVERTOME = 'DETAILWORKDELIVERTOME';
+export const DETAILWORKMONITORING = 'DETAILWORKMONITORING';
 
 export const LISTSENDDOCUMENT = 'LISTSENDDOCUMENT';
 export const ADDSENDOCUMENT = 'ADDSENDDOCUMENT';

src/routers/StackNavigation.js

@@ -28,7 +28,8 @@ import AddSendDocument from '../screens/list_send_document/add';
 import DetailSendDocument from '../screens/list_send_document/detail';
 import StatusSendDocument from '../screens/list_send_document/status';
 import ListWork from '../screens/list_work';
-import DetailListWork from '../screens/list_work/detail';
+import DetailListWorkDeliverToMe from '../screens/list_work/deliver_to_me';
+import DetailListWorkMonitoring from '../screens/list_work/monitoring';
 import DrawerEmailView from '../routers/drawer_email/drawerView';
 import SendEmail from '../screens/email/send';
 import DetailEmail from '../screens/email/detail';
@@ -72,7 +73,8 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.DETAILSENDDOCUMENT} component={DetailSendDocument}/>
       <Stack.Screen name={ScreenName.STATUSSENDDOCUMENT} component={StatusSendDocument}/>
       <Stack.Screen name={ScreenName.LISTWORK} component={ListWork}/>
-      <Stack.Screen name={ScreenName.DETAILWORK} component={DetailListWork}/>
+      <Stack.Screen name={ScreenName.DETAILWORKDELIVERTOME} component={DetailListWorkDeliverToMe}/>
+      <Stack.Screen name={ScreenName.DETAILWORKMONITORING} component={DetailListWorkMonitoring}/>
       <Stack.Screen name={ScreenName.EMAIL} component={DrawerEmailView}/>
       <Stack.Screen name={ScreenName.SENDEMAIL} component={SendEmail}/>
       <Stack.Screen name={ScreenName.DETAILEMAIL} component={DetailEmail}/>

src/screens/list_work/detail/modal_add_report/index.js → src/screens/list_work/deliver_to_me/detail/modal_add_report/index.js

-import WorkReportModal from './view';
+import WorkReportModal from '../../detail/modal_add_report/view';
 
 export default WorkReportModal;

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

 import { StyleSheet } from "react-native";
-import R from "../../../../assets/R";
+import R from "../../../../../assets/R";
 
 const styles = StyleSheet.create({
     overlay: {

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

@@ -3,14 +3,12 @@ import {
   Modal,
   View,
   Text,
-  TextInput,
   TouchableOpacity,
-  StyleSheet,
   Image,
 } from 'react-native';
-import TextMulti from '../../../../components/Input/TextMulti';
-import R from '../../../../assets/R';
-import Button from '../../../../components/Button';
+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}) => {

src/screens/list_work/detail/modal_edit_report/index.js → src/screens/list_work/deliver_to_me/detail/modal_edit_report/index.js

-import EditReportModal from './view';
+import EditReportModal from '../../detail/modal_edit_report';
 
 export default EditReportModal;

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

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

src/screens/list_work/detail/index.js → src/screens/list_work/deliver_to_me/index.js

 import React, {useState} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import DetailListWorkView from './view';
+import DetailListWorkDeliverToMeView from './view';
 
-const DetailListWork = props => {
+const DetailListWorkDeliverToMe = props => {
   const [data, setData] = useState({
     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',
@@ -136,7 +135,7 @@ const DetailListWork = props => {
   ]);
 
   return (
-    <DetailListWorkView
+    <DetailListWorkDeliverToMeView
       data={data}
       dataList={dataList}
       dataReport={dataReport}
@@ -144,4 +143,4 @@ const DetailListWork = props => {
   );
 };
 
-export default DetailListWork;
+export default DetailListWorkDeliverToMe;

src/screens/list_work/detail/view.js → src/screens/list_work/deliver_to_me/view.js

@@ -14,9 +14,9 @@ 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 '../detail/modal_add_report';
-import EditReportModal from '../detail/modal_edit_report';
-const DetailListWorkView = props => {
+import WorkReportModal from './detail/modal_add_report';
+import EditReportModal from './detail/modal_edit_report';
+const DetailListWorkDeliverToMeView = props => {
   const {data, dataList, dataReport} = props;
   const [showWorkReportModal, setShowWorkReportModal] = useState(false);
   const [showEditReportModal, setShowEditReportModal] = useState(false);
@@ -293,4 +293,4 @@ const DetailListWorkView = props => {
   );
 };
 
-export default DetailListWorkView;
+export default DetailListWorkDeliverToMeView;

src/screens/list_work/index.js

@@ -316,8 +316,8 @@ const ListWork = props => {
   // ==================== NAVIGATION HANDLERS ====================
 
   // Điều hướng đến màn hình chi tiết công việc
-  const handleViewDetail = item => {
-    navigation.navigate(ScreenName.DETAILWORK, {workItem: item});
+  const handleViewDetailDeliverToMe = item => {
+    navigation.navigate(ScreenName.DETAILWORKDELIVERTOME, {workItem: item});
   };
 
   // ==================== ACTION HANDLERS ====================
@@ -484,7 +484,7 @@ const ListWork = props => {
     onAddWork={handleAddWork}
     onSaveWork={handleSaveWork}
     onCloseModal={handleCloseModal}
-    onViewDetail={handleViewDetail}
+    onViewDetailDeliverToMe={handleViewDetailDeliverToMe}
     onReportAction={handleReportAction}
     onApprovalAction={handleApprovalAction}
     // Utils

src/screens/list_work/monitoring/index.js

+import React from 'react';
+import DetailListWorkMonitoringView from './view';
+
+const DetailListWorkMonitoring = (props) => {
+  return (
+    <DetailListWorkMonitoringView />
+  );
+};
+
+export default DetailListWorkMonitoring;

src/screens/list_work/monitoring/style.js

+import { StyleSheet, Text, View } from 'react-native'
+
+const styles = StyleSheet.create({
+    container: {
+
+    },
+    body:{
+        
+    }
+
+})
+
+export default styles
\ No newline at end of file

src/screens/list_work/monitoring/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+style
+const ComponentNameView = (props) => {
+  const {  } = props;
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <TouchableOpacity>
+        <Text>ComponentName</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default ComponentNameView;

src/screens/list_work/view.js

@@ -14,7 +14,7 @@ import Header from '../../components/Header/Header';
 import Dropdown from '../../components/DropdownAlert/Dropdown';
 import R from '../../assets/R';
 import TabViewComponent from '../../components/TabView';
-import AddWorkModal from '../list_work/modal_add/index';
+import AddWorkModal from './modal_add_deliver_to_me/index';
 import Button from '../../components/Button';
 
 const ListWorkView = props => {
@@ -28,7 +28,7 @@ const ListWorkView = props => {
     onAddWork,
     onSaveWork,
     onCloseModal,
-    onViewDetail,
+    onViewDetailDeliverToMe,
     onReportAction,
     onApprovalAction,
     getStatusColor,
@@ -80,7 +80,7 @@ const ListWorkView = props => {
     return (
       <TouchableOpacity
         style={{marginHorizontal: 15, marginVertical: 10}}
-        onPress={() => onViewDetail(item)}
+        onPress={() => onViewDetailDeliverToMe(item)}
         activeOpacity={0.7}>
         <View
           style={{

src/screens/profile/index.js

@@ -60,7 +60,6 @@ const Profile = (props) => {
   const [salaryIncreaseMilestone, setSalaryIncreaseMilestone] = useState('');
   const [lecturerTitle, setLecturerTitle] = useState('');
 
-  // --- radio group ---
   const [selectedValue2, setSelectedValue2] = useState('1');
   const options2 = [
     {label: 'Cơ chế', value: '1'},
@@ -80,7 +79,6 @@ const Profile = (props) => {
   const device = useCameraDevice(useFront ? 'front' : 'back');
   const {hasPermission, requestPermission} = useCameraPermission();
 
-  // Load recent photos for gallery preview
   const loadRecentPhotos = async () => {
     try {
       if (Platform.OS === 'android') {
@@ -108,7 +106,6 @@ const Profile = (props) => {
   }, []);
 
   const openImageSourceModal = async () => {
-    // Go directly to camera instead of showing modal
     if (!hasPermission) {
       const ok = await requestPermission();
       if (!ok) return;
@@ -164,14 +161,12 @@ const Profile = (props) => {
     setPreviewUri(uri);
     setShowCamera(false);
     setShowPreview(true);
-    // Keep tabs hidden for preview
   };
 
   const onToggleCameraPosition = () => setUseFront(v => !v);
 
   const onCloseCamera = () => {
     setShowCamera(false);
-    // Show tab bar when camera closes
     DeviceEventEmitter.emit('hideTabs', false);
   };
 
@@ -194,9 +189,8 @@ const Profile = (props) => {
     DeviceEventEmitter.emit('hideTabs', false);
   };
 
-  // --- save handler ---
   const handleSave = () => {
-    const formData = {
+    const [formData, setFormData] = useState({
       phoneNumber,
       oldTeacherCode,
       workPlace,
@@ -231,8 +225,8 @@ const Profile = (props) => {
       salaryIncreaseMilestone,
       lecturerTitle,
       avatarUri,
-    };
-    console.log('Profile Form Data:', formData);
+    });
+    setFormData(formData);
     // TODO: call API save
   };