fixed : project updation issue

src/components/Project/AboutProject.jsx

@@ -1,14 +1,47 @@
 import React, { useEffect, useState } from "react";
 import moment from "moment";
 import { getProjectStatusName } from "../../utils/projectStatus";
-import {useProjectDetails} from "../../hooks/useProjects";
+import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
 import {useParams} from "react-router-dom";
-const AboutProject = () => {
+import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import {MANAGE_PROJECT} from "../../utils/constants";
+import GlobalModel from "../common/GlobalModel";
+import ManageProjectInfo from "./ManageProjectInfo";
+const AboutProject = () =>
+{
+  const [ IsOpenModal, setIsOpenModal ] = useState( false )
+  const {mutate: UpdateProjectDetails, isPending} = useUpdateProject( {
+    onSuccessCallback: () =>
+    {
+      setIsOpenModal(false)
+    }
+  })
   const {projectId} = useParams();
-  const {projects_Details,isLoading,error} = useProjectDetails(projectId)
+  const manageProject = useHasUserPermission(MANAGE_PROJECT);
+  const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId )
+  const handleFormSubmit = ( updatedProject ) =>
+  {
+    if ( projects_Details?.id )
+    {
+    UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject,
+    } );
+      refetch()
+  }
+};
   return (
     <>
+      {IsOpenModal && (
+         <GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
+          <ManageProjectInfo
+            project={projects_Details}
+            handleSubmitForm={handleFormSubmit}
+            onClose={() => setIsOpenModal( false )}
+            isPending={isPending}
+          />
+      </GlobalModel>
+     )}
       {projects_Details && (
+       <>
         <div className="card mb-6">
           <div className="card-header text-start">
             <h6 className="card-action-title mb-0">
@@ -50,8 +83,7 @@ const AboutProject = () => {
               <li className="d-flex align-items-center mb-3">
                 <i className="bx bx-trophy"></i>
                 <span className="fw-medium mx-2">Status:</span>{" "}
-                <span>{projects_Details?.projectStatus?.status
+                <span>{getProjectStatusName(projects_Details.projectStatusId)}</span>
-}</span>
               </li>
               <li className="d-flex align-items-center mb-3">
                 <i className="bx bx-user"></i>
@@ -70,11 +102,29 @@ const AboutProject = () => {
                   <div className="ms-4 text-start">{projects_Details.projectAddress}</div>
                 )}
               </li>
+
+              <li className="d-flex justify-content-center mb-3">
+                {manageProject && (
+                  <button
+                    type="button"
+                    className={`btn btn-sm btn-primary ${
+                      !manageProject && "d-none"
+                    }`}
+                    data-bs-toggle="modal"
+                    data-bs-target="#edit-project-modal"
+                    onClick={()=>setIsOpenModal(true)}
+                  >
+                    Modify Details
+                  </button>
+                )}
+              </li>
             </ul>
           </div>
           </div>
+          </>
         )}
     
+
       {isLoading && <span>loading...</span>}
     </>
   );

src/components/Project/ManageProjectInfo.jsx

@@ -14,9 +14,8 @@ const formatDate = (date) => {
   }
   return d.toLocaleDateString('en-CA');
 };
-const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
+const ManageProjectInfo = ({ project, handleSubmitForm, onClose,isPending }) => {
   const [CurrentProject, setCurrentProject] = useState();
-  const [isloading, setLoading] = useState(false);
   const [addressLength, setAddressLength] = useState(0);
   const maxAddressLength = 500;
 
@@ -116,9 +115,10 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
 
  */
 
-  const onSubmitForm = (updatedProject) => {
+  const onSubmitForm = ( updatedProject ) =>
-    setLoading(true);
+  {
-    handleSubmitForm(updatedProject, setLoading, reset);
+    
+    handleSubmitForm(updatedProject);
   };
 
   const handleCancel = () => {
@@ -313,14 +313,15 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
               )}
             </div>
             <div className="col-12 text-center">
-              <button type="submit" className="btn btn-sm btn-primary me-3" disabled={isloading}>
+              <button type="submit" className="btn btn-sm btn-primary me-3" disabled={isPending}>
-                {isloading ? "Please Wait..." : project?.id ? "Update" : "Submit"}
+                {isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
               </button>
               <button
                 type="button"
                 className="btn btn-sm btn-label-secondary"
                 onClick={handleCancel}
                 aria-label="Close"
+                disabled={isPending}
               >
                 Cancel
               </button>

src/components/Project/ProjectCard.jsx

@@ -78,6 +78,7 @@ const ProjectCard = ({ projectData, recall }) => {
             project={projects_Details}
             handleSubmitForm={handleFormSubmit}
             onClose={handleClose}
+            isPending={isPending}
           />
         </GlobalModel>
       )}

src/hooks/useProjects.js

@@ -390,7 +390,8 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
     isSuccess,
     isError,
   } = useMutation({
-    mutationFn: async ({ projectId, updatedData }) => {
+    mutationFn: async ( {projectId, updatedData} ) =>
+    {
       return await ProjectRepository.updateProject(projectId, updatedData);
     },
 
@@ -414,7 +415,9 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
       }
     },
 
-    onError: (error) => {
+    onError: ( error ) =>
+    {
+      console.log(error)
       showToast(error?.message || "Error while updating project", "error");
     },
   });

src/pages/project/ProjectDetails.jsx

@@ -141,11 +141,11 @@ const ProjectDetails = () => {
 
   const handler = useCallback(
     (msg) => {
-      if (msg.keyword === "Update_Project" && project.id === msg.response.id) {
+      if (msg.keyword === "Update_Project" && projects_Details.id === msg.response.id) {
          refetch()
       }
     },
-    [project, handleDataChange]
+    [projects_Details, handleDataChange]
   );
   useEffect(() => {
     eventBus.on("project", handler);

src/pages/project/ProjectListView.jsx

@@ -81,6 +81,7 @@ const ProjectListView = ({ projectData, recall }) => {
               project={projects_Details}
               handleSubmitForm={handleFormSubmit}
              onClose={handleClose}
+             isPending={isPending}
             /></GlobalModel>
       )}