Edit button add in About project for Services.

src/components/ServiceProject/ServiceProjectProfile.jsx

@@ -1,15 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useServiceProject } from "../../hooks/useServiceProject";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import ManageServiceProject from "./ManageServiceProject";
+import GlobalModel from "../common/GlobalModel";
 
 const ServiceProjectProfile = () => {
   const { projectId } = useParams();
+  const [IsOpenModal, setIsOpenModal] = useState(false);
   const { data, isLoading, isError, error } = useServiceProject(projectId);
   if (isLoading) {
     return <div className="">Loadng.</div>;
   }
   return (
+    <>
+      {IsOpenModal && (
+        <GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
+          <ManageServiceProject
+            serviceProjectId={projectId}
+            onClose={() => setIsOpenModal(false)}
+          />
+        </GlobalModel>
+      )}
+
       <div className="row py-2">
         <div className="col-md-6 col-lg-4 order-2 mb-6">
           <div className="card mb-4">
@@ -82,6 +95,19 @@ const ServiceProjectProfile = () => {
 
                 <li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
 
+                  <li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
+
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-primary"
+                      data-bs-toggle="modal"
+                      data-bs-target="#edit-project-modal"
+                      onClick={() => setIsOpenModal(true)}
+                    >
+                      Modify Details
+                    </button>
+
+                  </li>
                 </li>
               </ul>
 
@@ -91,6 +117,7 @@ const ServiceProjectProfile = () => {
 
 
       </div>
+    </>
   );
 };