src/components/Project/ProjectBanner.jsx

@@ -76,59 +76,33 @@ const ProjectBanner = ( {project_data} ) =>
             onClose={handleClose}
           ></ManageProjectInfo>
       </div>
-      {/* -------------------- */}
+      {/* Project Banner */}
       <div className="col-12">
         <div className="card mb-6 pb-0">
-          <div className="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-2 ">
+          <div className="d-flex align-items-center justify-content-between p-4 flex-wrap">
-            <div className="flex-shrink-0 mt-1 mx-sm-0 px-2  mx-auto">
+            {/* Left: Icon + Name */}
-            
+            <div className="d-flex align-items-center gap-3">
               <img
                 src="../../assets/icons/civil-engineering.svg"
                 alt="user image"
-                className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img project-banner-icon"
+                className="rounded-3"
-              ></img>
+                style={{ width: "60px", height: "60px" }}
+              />
+              <h4 className="mb-0">
+                {CurrentProject.name ? CurrentProject.name : "N/A"}
+              </h4>
             </div>
-            <div className="flex-grow-1 mt-1 mt-lg-1">
+            {manageProject && (
-              <div className="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
+              <button
-                <div className="user-profile-info">
-                  <h4 className="mb-2 mt-lg-1">
-                    {CurrentProject.name ? CurrentProject.name : "N/A"}
-                  </h4>
-                  <h6 className="mb-1 mt-lg-1">
-                    Address:{" "}
-                    {CurrentProject.projectAddress ? CurrentProject.projectAddress : "N/A"}
-                  </h6>
-                  <h6 className="mb-1 mt-lg-1">
-                    Contact:{" "}
-                    {CurrentProject.contactPerson ? CurrentProject.contactPerson : "N/A"}
-                  </h6>
-                  <h6 className="mb-1 mt-lg-1">
-                    <span>
-                      {" "}
-                      Start Date:{" "}
-                      {CurrentProject.startDate
-                                         ? moment(CurrentProject.startDate).format("DD-MMM-YYYY")
-                                         : "N/A"}
-                    </span>
-                    <span className="ms-5">
-                      End Date:{" "}
-                      {CurrentProject.endDate
-                                         ? moment(CurrentProject.endDate).format("DD-MMM-YYYY")
-                                         : "N/A"}
-                    </span>
-                  </h6>
-                </div>
-                <button
                   type="button"
                   className={`btn btn-sm btn-primary ${!manageProject && 'd-none'}`}
                   data-bs-toggle="modal"
                   data-bs-target="#edit-project-modal"
                   onClick={handleShow}
                 >
-                  Modify
+                Modify
-                </button>
+              </button>
-              </div>
+            )}
-            </div>
           </div>
         </div>
       </div>

src/components/Project/ProjectNav.jsx

@@ -47,7 +47,7 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
               <i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
             </a>
           </li>
-          <li className="nav-item">
+          {/* <li className="nav-item">
             <a
               className={`nav-link ${
                 activePill === "workplan" ? "active" : ""
@@ -60,7 +60,7 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
             >
               <i className="bx bx-link bx-sm me-1_5"></i> Work Plan
             </a>
-          </li>
+          </li> */}
           <li className="nav-item">
             <a
               className={`nav-link ${
@@ -78,15 +78,15 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
           <li className="nav-item">
             <a
               className={`nav-link ${
-                activePill === "activities" ? "active" : ""
+                activePill === "directory" ? "active" : ""
               }`}
               href="#"
               onClick={(e) => {
                 e.preventDefault(); // Prevent page reload
-                onPillClick("activities");
+                onPillClick("directory");
               }}
             >
-              <i className="bx bx-link bx-sm me-1_5"></i> Activities
+              <i className="bx bx-link bx-sm me-1_5"></i> Directory
             </a>
           </li>
         </ul>