src/ModalContext.jsx

@@ -1,81 +0,0 @@
-import React, { createContext, useContext, useState, useEffect, useRef } from "react";
-
-const ModalContext = createContext();
-
-export const useModal = () => useContext(ModalContext);
-
-// ModalProvider to manage modal state and expose functionality to the rest of the app
-export const ModalProvider = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [modalContent, setModalContent] = useState(null);
-  const [onSubmit, setOnSubmit] = useState(null);
-  const [modalSize, setModalSize] = useState('lg');
-
-  // Ref to track the modal content element
-  const modalRef = useRef(null);
-
-  const openModal = (content, onSubmitCallback, size = 'lg') => {
-    setModalContent(content); // Set modal content dynamically
-    setOnSubmit(() => onSubmitCallback); // Set the submit handler dynamically
-    setIsOpen(true); // Open the modal
-    setModalSize(size); // Set the modal size
-  };
-
-  // Function to close the modal
-  const closeModal = () => {
-    setIsOpen(false); // Close the modal
-    setModalContent(null); // Clear modal content
-    setOnSubmit(null); // Clear the submit callback
-    setModalSize('lg'); // Reset modal size
-  };
-
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (modalRef.current && !modalRef.current.contains(event.target)) {
-        closeModal();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <ModalContext.Provider value={{ isOpen, openModal, closeModal, modalContent,  modalSize, onSubmit }}>
-      {children}
-
-      {isOpen && (
-        <div style={overlayStyles}>
-          <div ref={modalRef} style={{ ...modalStyles, maxWidth: modalSize === 'sm' ? '400px' : '800px' }}>
-            <div>{modalContent}</div>
-           
-          </div>
-        </div>
-      )}
-    </ModalContext.Provider>
-  );
-};
-
-const overlayStyles = {
-  position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  zIndex: 1050,
-};
-
-const modalStyles = {
-  backgroundColor: "white",
-  padding: "20px",
-  borderRadius: "5px",
-  boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-  width: "90%",
-  maxWidth: "800px", 
-};

src/components/Activities/Attendance.jsx

@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
 
 const Attendance = ( {attendance, getRole, handleModalData} ) =>
 {
-console.log(attendance)
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(attendance, 5);
   const [loading,setLoading] = useState(false);
   const navigate = useNavigate()
@@ -38,7 +38,7 @@ console.log(attendance)
                   return checkInB - checkInA; // Sort in descending order of checkInTime
                 })
                   .map( ( item ) => (
-                        <tr key={item.employeeId}>
+                        <tr key={item.id}>
                           <td colSpan={2}>
                             <div className="d-flex justify-content-start align-items-center">
                               <Avatar
@@ -60,10 +60,9 @@ console.log(attendance)
                           </td>
                          
                           <td>
-                            {/* <span className="badge  bg-label-primary me-1">
+                            <span className="badge  bg-label-primary me-1">
                               {getRole(item.roleID)}
-                            </span> */}
+                            </span>
-                        ---
                           </td>
                          <td>{item.checkInTime ? convertShortTime(item.checkInTime):"--"}</td>
                          <td>{item.checkOutTime ? convertShortTime(item.checkOutTime):"--"}</td>

src/components/Activities/InfraPlanning.jsx

@@ -1,105 +1,567 @@
 
 import React, { useState, useEffect } from "react";
 import "../../components/Project/ProjectInfra.css";
-import BuildingModel from "../Project/Infrastructure/BuildingModel";
+import BuildingModel from "../../components/Project/BuildingModel";
-import FloorModel from "../Project/Infrastructure/FloorModel";
+import FloorModel from "../../components/Project/FloorModel";
 import showToast from "../../services/toastService";
-import WorkAreaModel from "../Project/Infrastructure/WorkAreaModel";
+import WorkAreaModel from "../../components/Project/WorkAreaModel";
-import TaskModel from "../Project/Infrastructure/TaskModel";
+import TaskModel from "../../components/Project/TaskModel";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import Breadcrumb from "../../components/common/Breadcrumb";
-import {useProjectDetails, useProjects} from "../../hooks/useProjects";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
-import {MANAGE_PROJECT_INFRA} from "../../utils/constants";
-import {useDispatch, useSelector} from "react-redux";
-import {useProfile} from "../../hooks/useProfile";
-import {setProjectId} from "../../slices/localVariablesSlice";
-import InfraTable from "../Project/Infrastructure/InfraTable";
 
 
-const InfraPlanning = () =>
+const InfraPlanning = ({ data, activityMaster, onDataChange }) => {
-{
+  const [expandedBuildings, setExpandedBuildings] = useState([]);
-  const {profile: LoggedUser} = useProfile()
+  const [project, setProject] = useState(data);
-  const dispatch = useDispatch()
+  const [buildings, setBuildings] = useState(data?.buildings);
-  const selectedProject = useSelector((store)=>store.localVariables.projectId)
+
-  const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA )
+  const [isBuildingModalOpen, setIsBuildingModalOpen] = useState(false);
-  const {projects,loading:project_listLoader,error:projects_error} = useProjects()
+  const [isFloorModalOpen, setIsFloorModalOpen] = useState(false);
-  const {projects_Details, loading: project_deatilsLoader, error: project_error} = useProjectDetails(selectedProject)
+  const [isWorkAreaModelOpen, setIsWorkAreaModalOpen] = useState(false);
+  const [isTaskModelOpen, setIsTaskModalOpen] = useState(false);
+
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [clearFormTrigger, setClearFormTrigger] = useState(false);
+
+  useEffect(() => {
+    setProject(data);
+    setBuildings(data?.buildings);
+  }, [data]);
+
+  const openModal = (projectData) => {
+    setIsCreateModalOpen(true);
+  };
+
+  const openFloorModel = (projectData) => {
+    setIsFloorModalOpen(true);
+  };
+  const closeFloorModel = () => {
+    setIsFloorModalOpen(false);
+    // const modalBackdrop = document.querySelector(".modal-backdrop");
+    // if (modalBackdrop) modalBackdrop.remove();
+  };
+
+  const handleFloorModelFormSubmit = (updatedFloor) => {
+    if (updatedFloor.id == "") delete updatedFloor.id;
+
+    submitData([
+      {
+        building: null,
+        floor: updatedFloor,
+        workArea: null,
+      },
+    ]);
+  };
+
+  const submitData = (infraObject) => {
+   
+    ProjectRepository.manageProjectInfra(infraObject)
+      .then((response) => {
+        fetchData();
+        onDataChange("building-change");
+        showToast("Details updated successfully.", "success");
+        setClearFormTrigger(true); // Set trigger to true
+      })
+      .catch((error) => {
+        showToast(error.message, "error");
+      });
+
+    // api
+    //   .post("/api/project/manage-infra", infraObject)
+    //   .then((data) => {
+    //     fetchData();
+    //     onDataChange("building-change");
+    //     showToast("Details updated successfully.", "success");
+    //     setClearFormTrigger(true); // Set trigger to true
+    //   })
+    //   .catch((error) => {
+    //     showToast(error.message, "error");
+    //   });
+  };
+
+  const openBuildingModel = (projectData) => {
+    setIsBuildingModalOpen(true);
+  };
+
+  const closeBuildingModel = () => {
+    setIsBuildingModalOpen(false);
+    
+  };
+  const handleBuildingModelFormSubmit = (buildingmodel) => {
+    if (buildingmodel.id == "" || buildingmodel.id == 0)
+      delete buildingmodel.id;
+
+    let data = [
+      {
+        building: buildingmodel,
+        floor: null,
+        workArea: null,
+      },
+    ];
+
+    submitData(data);
+  };
+
+  const openWorkAreaModel = (projectData) => {
+    setIsWorkAreaModalOpen(true);
+  };
+
+  const closeWorkAreaModel = () => {
+    setIsWorkAreaModalOpen(false);
   
+  };
+  const handleWorkAreaModelFormSubmit = (updatedModel) => {
+    if (updatedModel.id == "") delete updatedModel.id;
+
+    submitData([
+      {
+        building: null,
+        floor: null,
+        workArea: updatedModel,
+      },
+    ]);
+  };
+
+  const openTaskModel = (projectData) => {
+    setIsTaskModalOpen(true);
+  };
+
+  const closeTaskModel = () => {
+    setIsTaskModalOpen(false);
+    // const modalBackdrop = document.querySelector(".modal-backdrop");
+    // if (modalBackdrop) modalBackdrop.remove();
+  };
+  const handleTaskModelFormSubmit = (updatedModel) => {
+    if (updatedModel.id == "") updatedModel.id = 0;
+
+    //console.log("Form submitted:", updatedModel); // Replace this with an API call or state update
+    ProjectRepository.manageProjectTasks([updatedModel])
+      .then((response) => {
+        onDataChange("task-change");
+        showToast("Details updated successfully.", "success");
+        setClearFormTrigger(true); // Set trigger to true
+      })
+      .catch((error) => {
+        showToast(error.message, "error");
+      });
+
+    // api
+    //   .post("/api/project/task", [updatedModel])
+    //   .then((data) => {
+    //     onDataChange("task-change");
+    //     showToast("Details updated successfully.", "success");
+    //     setClearFormTrigger(true); // Set trigger to true
+    //   })
+    //   .catch((error) => {
+    //     showToast(error.message, "error");
+    //   });
+  };
+
+  const toggleBuilding = (id) => {
+    setExpandedBuildings((prev) =>
+      prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
+    );
+  };
+
+  const getContent = (building) => {
+    let hasFloors =
+      building.floors && building.floors.length > 0 ? true : false;
+    return (
+      <>
+        {(() => {
+          if (hasFloors) {
+            return building.floors.map((floor) => (
+              <React.Fragment key={floor.id}>
+                {floor.workAreas.length > 0 ? (
+                  floor.workAreas.map((workArea) => (
+                    <React.Fragment key={workArea.id}>
+                      <tr>
+                        <td colSpan="4" className="text-start table-cell">
+                          <div className="row ps-2">
+                            <div className="col-6">
+                              {" "}
+                              <h6>
+                                <span>
+                                  {" "}
+                                  {floor.floorName} - {workArea.areaName} &nbsp;{" "}
+                                </span>
+                              </h6>
+                            </div>
+                            <div className="col-6 text-end">
+                              {/* <a
+                                type="button"
+                                className="text-end me-2"
+                                data-bs-toggle="modal"
+                                data-bs-target="#floor-model"
+                                onClick={() => openFloorModel()}
+                              >
+                                <i className="bx bx-edit-alt me-2"></i>
+                                Edit Floor
+                              </a> */}
+
+                              {/* <a
+                                type="button"
+                                className="text-end"
+                                data-bs-toggle="modal"
+                                data-bs-target="#editproject"
+                                onClick={() => openModal()}
+                              >
+                                <i className="bx bx-plus-circle me-2"></i>
+                                Add Activities
+                              </a> */}
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      {workArea.workItems.length > 0 ? (
+                        <tr>
+                          {" "}
+                          <td colSpan={4}>
+                            <table
+                              className="table ms-4"
+                              style={{ width: "100%" }}
+                            >
+                              <thead>
+                                <tr>
+                                  <th>Activity</th>
+                                  <th>Planned</th>
+                                  <th>Complated</th>
+                                  <th>Progress</th>
+                                  <th>Actions</th>
+                                </tr>
+                              </thead>
+                              <tbody className="table-border-bottom-0">
+                                {workArea.workItems.map((workItem) => (
+                                  <React.Fragment key={workItem.workItemId}>
+                                    <tr>
+                                      <td className="text-start table-cell-small">
+                                        <i className="bx bx-right-arrow-alt"></i>
+                                        <span className="fw-medium">
+                                          {workItem.workItem.activityMaster
+                                            ? workItem.workItem.activityMaster
+                                                .activityName
+                                            : "NA"}
+                                        </span>
+                                      </td>
+                                      <td className="text-center">
+                                        {workItem.workItem
+                                          ? workItem.workItem.plannedWork
+                                          : "NA"}
+                                      </td>
+                                      <td className="text-center">
+                                        {workItem.workItem
+                                          ? workItem.workItem.completedWork
+                                          : "NA"}
+                                      </td>
+
+                                      <td
+                                        className="text-center"
+                                        style={{ width: "15%" }}
+                                      >
+                                        <div className="progress p-0">
+                                          <div
+                                            className="progress-bar"
+                                            role="progressbar"
+                                            style={{
+                                              width: getProgress(
+                                                workItem.workItem.plannedWork,
+                                                workItem.workItem.completedWork
+                                              ),
+                                              height: "10px",
+                                            }}
+                                            aria-valuenow={
+                                              workItem.workItem
+                                                ? workItem.workItem
+                                                    .completedWork
+                                                : 0
+                                            }
+                                            aria-valuemin="0"
+                                            aria-valuemax={
+                                              workItem.workItem
+                                                ? workItem.workItem.plannedWork
+                                                : 0
+                                            }
+                                          ></div>
+                                        </div>
+                                        {/* <input type="range" id="customRange1" max="@workItem.PlannedWork" min="0" value="@workItem.CompletedWork"> */}
+                                      </td>
+                                      <td>
+                                        <div className="dropdown">
+                                          <button
+                                            aria-label="Modify"
+                                            type="button"
+                                            className="btn p-0 dropdown-toggle hide-arrow"
+                                          >
+                                            <i class="bx bxs-edit me-2 text-primary"></i>
+                                          </button>
+                                          <button
+                                            aria-label="Delete"
+                                            type="button"
+                                            className="btn p-0 dropdown-toggle hide-arrow"
+                                          >
+                                            <i className="bx bx-trash me-1 text-danger"></i>{" "}
+                                          </button>
+                                        </div>
+                                      </td>
+                                    </tr>{" "}
+                                  </React.Fragment>
+                                ))}
+                              </tbody>
+                            </table>{" "}
+                          </td>
+                        </tr>
+                      ) : (
+                        <span></span>
+                      )}
+                    </React.Fragment>
+                  ))
+                ) : (
+                  <React.Fragment key={building.id + floor.id}>
+                    <tr>
+                      <td colSpan="4" className="text-start table-cell">
+                        <div className="row ps-2">
+                          <div className="col-6">
+                            {" "}
+                            <h6>
+                              <span> {floor.floorName} &nbsp; </span>
+                            </h6>
+                          </div>
+                          <div className="col-6 text-end">
+                            {/* <a
+                              type="button"
+                              className="text-end me-2"
+                              data-bs-toggle="modal"
+                              data-bs-target="#floor-model"
+                              onClick={() => openFloorModel()}
+                            >
+                              <i className="bx bx-edit-alt me-2"></i>
+                              Edit Floor
+                            </a> */}
+
+                            {/* <a
+                              type="button"
+                              className="text-end"
+                              data-bs-toggle="modal"
+                              data-bs-target="#editproject"
+                              onClick={() => openModal()}
+                            >
+                              <i className="bx bx-plus-circle me-2"></i>
+                              Add Work Area
+                            </a> */}
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </React.Fragment>
+                )}
+              </React.Fragment>
+            ));
+          } else {
+            return (
+              <>
+                <tr>
+                  <td>
+                    <p>No Floors Added, Please add them</p>
+                    {/* <p>
+                      <button
+                        type="button"
+                        data-bs-toggle="modal"
+                        className="btn btn-sm btn-danger m-1"
+                        data-bs-target="#editproject"
+                        onClick={() => openModal()}
+                      >
+                        <i className="bx bx-plus-circle me-2"></i>
+                        Add Floors
+                      </button>
+                    </p> */}
+                  </td>
+                </tr>
+              </>
+            );
+          }
+        })()}
+      </>
+    );
+  };
+
+  const getProgress = (planned, completed) => {
+    return (completed * 100) / planned + "%";
+  };
 
   return (
-    <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
+    <>
-    <div className="card">
+      {isBuildingModalOpen && (
-      <div className="card-body" style={{ padding: "0.5rem" }}>
+        <div
-        <div className="align-items-center">
+          className={`modal fade `}
-            <div className="row ">
+          id="building-model"
-              <div className="col-sm-3 col-8 text-start mb-1">
+          tabIndex="-1"
-                   <select name="DataTables_Table_0_length"
+          aria-hidden="true"
-                                aria-controls="DataTables_Table_0"
+        >
-                                className="form-select form-select-sm"
+          <BuildingModel
-                                value={selectedProject}
+            project={data}
-                                onChange={(e)=>dispatch(setProjectId(e.target.value))}
+            onClose={closeBuildingModel}
-                                aria-label=""
+            onSubmit={handleBuildingModelFormSubmit}
-                   >
+            clearTrigger={clearFormTrigger}
-                                 {(project_listLoader || projects.length < 0) && <option value="Loading..." disabled>Loading...</option>  }
+            onClearComplete={() => setClearFormTrigger(false)}
-                  
+          ></BuildingModel>
-                                  {!project_listLoader && projects?.filter(project =>
+        </div>
-                                    LoggedUser?.projects?.map(Number).includes(project.id)).map((project)=>(
+      )}
-                                     <option value={project.id}>{project.name}</option>
-                                  ))} 
-                      </select>
-              </div>
-            {/* <div className={`col-12 text-end mb-1 ${!ManageInfra && 'd-none'} `} >
-              <button
-                type="button"
-                className="link-button link-button-sm m-1 "
-                data-bs-toggle="modal"
-                data-bs-target="#building-model"
-                // onClick={() => openBuildingModel()}
-              >
-                <i className="bx bx-plus-circle me-2"></i>
-                Manage Building
-              </button>
-              <button
-                type="button"
-                data-bs-toggle="modal"
-                className="link-button m-1"
-                data-bs-target="#floor-model"
-                // onClick={() => openFloorModel()}
-              >
-                <i className="bx bx-plus-circle me-2"></i>
-                Manage Floors
-              </button>
 
-              <button
+      {isFloorModalOpen && (
-                type="button"
+        <div
-                data-bs-toggle="modal"
+          className={`modal fade `}
-                className="link-button m-1"
+          id="floor-model"
-                data-bs-target="#work-area-model"
+          tabIndex="-1"
-                // onClick={() => openWorkAreaModel()}
+          aria-hidden="true"
-              >
+        >
-                <i className="bx bx-plus-circle me-2"></i>
+          <FloorModel
-                Manage Work Areas
+            project={data}
-              </button>
+            // building={null}
-              <button
+            onClose={closeFloorModel}
-                type="button"
+            onSubmit={handleFloorModelFormSubmit}
-                data-bs-toggle="modal"
+            clearTrigger={clearFormTrigger}
-                className="link-button m-1"
+            onClearComplete={() => setClearFormTrigger(false)}
-                data-bs-target="#task-model"
+          ></FloorModel>
-                // onClick={() => openTaskModel()}
+        </div>
-              >
+      )}
-                <i className="bx bx-plus-circle me-2"></i>
+
-                Manage Tasks
+      {isWorkAreaModelOpen && (
-              </button>
+        <div
-            </div> */}
+          className={`modal fade `}
-          </div>
+          id="work-area-model"
-          <div className="row ">
+          tabIndex="-1"
-          <InfraTable buildings={projects_Details?.buildings}/>
+          aria-hidden="true"
+        >
+          <WorkAreaModel
+            project={data}
+            // building={null}
+            onClose={closeWorkAreaModel}
+            onSubmit={handleWorkAreaModelFormSubmit}
+            clearTrigger={clearFormTrigger}
+            onClearComplete={() => setClearFormTrigger(false)}
+          ></WorkAreaModel>
+        </div>
+      )}
+
+      {isTaskModelOpen && (
+        <div
+          className={`modal fade `}
+          id="task-model"
+          tabIndex="-1"
+          aria-hidden="true"
+        >
+          <TaskModel
+            project={data}
+            activities={activityMaster}
+            onClose={closeTaskModel}
+            onSubmit={handleTaskModelFormSubmit}
+            clearTrigger={clearFormTrigger}
+            onClearComplete={() => setClearFormTrigger(false)}
+          ></TaskModel>
+        </div>
+      )}
+          
+    
+     <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
+        <div className="card">
+          {/* <div className="card-header pb-4"></div> */}
+
+          <div className="card-body" style={{ padding: "0.5rem" }}>
+            <div className="align-items-center">
+              <div className="row">
+                <div className="col-12 text-end mb-1">
+                  <button
+                    type="button"
+                    className="link-button link-button-sm m-1"
+                    data-bs-toggle="modal"
+                    data-bs-target="#building-model"
+                    onClick={() => openBuildingModel()}
+                  >
+                    <i className="bx bx-plus-circle me-2"></i>
+                    Manage Building
+                  </button>
+
+                  <button
+                    type="button"
+                    data-bs-toggle="modal"
+                    className="link-button m-1"
+                    data-bs-target="#floor-model"
+                    onClick={() => openFloorModel()}
+                  >
+                    <i className="bx bx-plus-circle me-2"></i>
+                    Manage Floors
+                  </button>
+
+                  <button
+                    type="button"
+                    data-bs-toggle="modal"
+                    className="link-button m-1"
+                    data-bs-target="#work-area-model"
+                    onClick={() => openWorkAreaModel()}
+                  >
+                    <i className="bx bx-plus-circle me-2"></i>
+                    Manage Work Areas
+                  </button>
+                  <button
+                    type="button"
+                    data-bs-toggle="modal"
+                    className="link-button m-1"
+                    data-bs-target="#task-model"
+                    onClick={() => openTaskModel()}
+                  >
+                    <i className="bx bx-plus-circle me-2"></i>
+                    Manage Tasks
+                  </button>
+                </div>
+              </div>
+              <div className="row">
+                <div className="col-12">
+                  {buildings && buildings.length > 0 && (
+                    <table className="table table-bordered">
+                      <tbody>
+                        {buildings.map((building) => (
+                          building.floors && building.floors.length > 0 && (
+                           <React.Fragment key={building.id}>
+                                                   <tr>
+                                                     <td
+                                                       colSpan="4"
+                                                       className="text-start"
+                                                       style={{
+                                                         background: "#f0f0f0",
+                                                         cursor: "pointer",
+                                                       }}
+                                                       onClick={() => toggleBuilding(building.id)}
+                                                     >
+                                                       <div className="row">
+                                                         <h5 style={{ marginBottom: "0px" }}>
+                         
+                                                           { building.name} &nbsp;
+                                                           {expandedBuildings.includes(building.id) ? (
+                                                             <i className="bx bx-chevron-down"></i>
+                                                           ) : (
+                                                             <i className="bx bx-chevron-right"></i>
+                                                           )}
+                                                         </h5>
+                                                       </div>
+                                                     </td>
+                                                   </tr>
+                         
+                                                   {expandedBuildings.includes(building.id)  &&  getContent(building)}
+                                                    
+                            </React.Fragment>
+                          )
+                        ))}
+                      </tbody>
+                    </table>
+                  )}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
     </div>
-  </div>
+      
+    </>
   );
 };
 

src/components/Project/AssignRole.jsx

@@ -1,32 +1,20 @@
 import React, { useState,useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
 import { employee } from "../../data/masters";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { getCachedData } from "../../slices/apiDataManager";
-import {useModal} from "../../ModalContext";
-import {useProjects} from "../../hooks/useProjects";
-import {useEmployeesAllOrByProjectId} from "../../hooks/useEmployees";
-import {TasksRepository} from "../../repositories/ProjectRepository";
-import showToast from "../../services/toastService";
 
 
 const schema = z.object({
-  selectedEmployees: z.array( z.number() ).min( 1, {message: "At least one employee must be selected"} ), 
+  selectedEmployees: z.array(z.number()).min(1, {message:"At least one employee must be selected"}), 
-  description: z.string().min( 1, {message: "description required"} ),
-  pannedTask: z.number()
-  .refine(value => value > 0, { message: "pannedTask should be greater than zero" })
-  .refine(value => value !== undefined, { message: "pannedTask is required" }),
 })
 
 
 const AssignRoleModel = ( {assignData,onClose}) => {
-  const { openModal, closeModal } = useModal()
+const[target,setTraget] = useState("")
-  const selectedProject = useSelector((store)=>store.localVariables.projectId)
-  const {employees} = useEmployeesAllOrByProjectId( selectedProject )
-
 const dispatch = useDispatch()
 const {data,loading} = useMaster()
 const jobRoleData = getCachedData("Job Role")
@@ -38,8 +26,7 @@ const [selectedEmployees, setSelectedEmployees] = useState([]);
 
 const { handleSubmit, control, setValue, watch, formState: { errors } } = useForm({
   defaultValues: {
-    selectedEmployees: [],
+    selectedEmployees: []  
-    description:""
   },
   resolver: (data) => {
     const validation = schema.safeParse(data);
@@ -49,13 +36,13 @@ const { handleSubmit, control, setValue, watch, formState: { errors } } = useFor
 });
 
 const handleRoleChange = (event) => {
-  setSelectedRole(event.plannedTask.value);
+  setSelectedRole(event.target.value);
 };
 
 
 const filteredEmployees = selectedRole === "all"
-  ? employees
+  ? employee
-  : employees.filter((emp) => emp.JobRoleId.toString() === selectedRole);
+  : employee.filter((emp) => emp.JobRoleId.toString() === selectedRole);
 
 
 // not need currently for this fun
@@ -69,7 +56,7 @@ const handleEmployeeSelection = (employeeId,field) => {
     } else {
       updatedSelection = prevSelected.filter((id) => id !== employeeId);
     }
-    field.onChange(updatedSelection); 
+    field.onChange(updatedSelection); // Update form state with new selection
     return updatedSelection;
   });
 };
@@ -78,34 +65,17 @@ const handleEmployeeSelection = (employeeId,field) => {
 const removeEmployee = (employeeId) => {
   setSelectedEmployees((prevSelected) => {
     const updatedSelection = prevSelected.filter((id) => id !== employeeId);
-    setValue("selectedEmployees", updatedSelection); 
+    setValue("selectedEmployees", updatedSelection); // Ensure form state is updated
     return updatedSelection;
   });
 };
 
 
-const onSubmit = async(data) => {
+const onSubmit = (data) => {
-  const formattedData = {
+  console.log( {...data.selectedEmployees,target});
-    taskTeam: data.selectedEmployees, 
+  onClose()
-    plannedTask: parseInt( plannedTask, 10 ),
-    description: data.description,
-    assignmentDate: new Date().toISOString(),
-    workItemId:assignData?.workItem?.workItem.id
-  };
-  try
-  {
-    let response = await TasksRepository.assignTask( formattedData );
-    console.log( response )
-    showToast( "Task Successfully Assigend", "success" )
-    closeModal()
-  } catch ( error )
-  {
-    showToast("something wrong","error")
-    
-  }
-
 };
-console.log(assignData?.workItem?.workItem)
+
 useEffect(()=>{
   dispatch(changeMaster("Job Role"))
   return ()=> setSelectedRole("all")
@@ -114,7 +84,8 @@ useEffect(()=>{
 
   return (<>
  
-    <div className="container my-1">
+
+    <div className="container-fluid my-1">
     <div className="mb-2">
     <div className="bs-stepper wizard-numbered d-flex justify-content-center align-items-center flex-wrap">
   {[
@@ -172,7 +143,7 @@ useEffect(()=>{
             <div className="col-sm-12">
               <div className="row">
                 {filteredEmployees.map((emp) => {
-                  const jobRole = jobRoleData?.find((role) => role.id === emp.jobRoleId);
+                  const jobRole = jobRoleData?.find((role) => role.id === emp.JobRoleId);
 
                   return (
                     <div key={emp.id} className="col-6 col-sm-4 col-md-4 col-lg-3 mb-1">
@@ -190,14 +161,18 @@ useEffect(()=>{
                                 value={emp.id}
                                 checked={field.value.includes(emp.id)}  // Ensure the checkbox reflects the current form state
                                 onChange={() => {
-                                  handleEmployeeSelection( emp.id, field )
+                                  // Directly update the form value
+                                  handleEmployeeSelection(emp.id,field)
+                                  // const updatedSelection = field.value.includes(emp.id)
+                                  //   ? field.value.filter((id) => id !== emp.id)
+                                  //   : [...field.value, emp.id];
+                                  // field.onChange(updatedSelection);  // Directly update form value
                                 }}
                               />
                             )}
                           />
                           <div className="list-content">
-                            <h6 className="mb-0">{emp.firstName
+                            <h6 className="mb-0">{emp.FirtsName} {emp.LastName}</h6>
-                            } {emp.lastName}</h6>
                             <small className="text-muted">
                               {loading && (<p className="skeleton para" style={{height:"7px"}}></p>)}
                               {data && !loading && (jobRole ? jobRole.name : 'Unknown Role')}
@@ -212,15 +187,16 @@ useEffect(()=>{
             </div>
           </div>
         )}
+
+
         {selectedEmployees.length > 0 && (
           <div className="mt-1">
             <div className="text-start px-2">
               {selectedEmployees.map((empId) => {
-                const emp = employees.find((emp) => emp.id === empId);
+                const emp = employee.find((emp) => emp.id === empId);
                 return (
                   <span key={empId} className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-2 mb-2">
-                    {emp.firstName
+                    {emp.FirtsName} {emp.LastName}
-                    } {emp.lastName}
                     <p
                       type="button"
                       className=" btn-close-white p-0 m-0"
@@ -236,47 +212,30 @@ useEffect(()=>{
             </div>
           </div>
         )}
- {errors.selectedEmployees && (
+
-          <div className="danger-text mt-1">
-            <p>{errors.selectedEmployees[0]}</p>
-          </div>
-        )}
       <div class="col-md text-start mx-0 px-0">
          <div class="form-check form-check-inline mt-4 px-1">
            <label className="form-text fs-6" for="inlineCheckbox1">Pending Work</label>
            <label className="form-check-label ms-2" for="inlineCheckbox1">{ assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}</label>
          </div>
          <div className="form-check form-check-inline col-sm-2 col">
-              <label for="defaultFormControlInput" className="form-label">Target</label>
+            <label for="defaultFormControlInput" className="form-label">Target</label>
-              <Controller name="pannedTask" control={control} render={( {field} ) => (
+           <input type="text" className="form-control form-control-sm " value={target} onChange={(e)=>setTraget(e.target.value)} id="defaultFormControlInput" aria-describedby="defaultFormControlHelp" />
-                   <input type="text" className="form-control form-control-sm " {...field}  />   
+         </div>
-              )} />
+      </div>
-              {errors.pannedTask && (
+      
-          <div className="danger-text">
+
-            <p>{errors.pannedTask.message}</p>
+       
+        {errors.selectedEmployees && (
+          <div className="danger-text mt-2">
+            <p>{errors.selectedEmployees[0]}</p>
           </div>
         )}
-         </div>
+    
-      </div>       
+
-       
+       <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center">
-         <label for="exampleFormControlTextarea1" className="form-label">Description</label>
-            <Controller
-              name="description"
-              control={control}
-              render={({ field }) => (
-                <textarea
-                  {...field}
-                  className="form-control"
-                  id="exampleFormControlTextarea1"
-                  rows="3"
-                />
-              )}
-          />
-          {errors.description && ( <div>{errors.description.message }</div>)}
-      
-       <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
         <button type="submit" className="btn btn-sm btn-primary ">Submit</button>
-        <button type="reset" className="btn btn-sm btn-label-secondary" data-bs-dismiss="modal" aria-label="Close" onClick={closeModal}>
+        <button type="reset" className="btn btn-sm btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">
           Cancel
         </button>
         </div>

src/components/Project/BuildingModel.jsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from "react";
+
+const defaultModel = {
+  id: "",
+  name: "",
+  description: "",
+  projectId: "",
+};
+const BuildingModel = ({
+  project,
+  onClose,
+  onSubmit,
+  clearTrigger,
+  onClearComplete,
+}) => {
+  const [formData, setFormData] = useState(defaultModel);
+
+  useEffect(() => {
+    if (clearTrigger) {
+      setFormData(defaultModel); // Clear form
+      onClearComplete(); // Notify parent that clearing is done
+    }
+  }, [clearTrigger, onClearComplete]);
+
+  // Handle input change
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleBuildigChange = (e) => {
+    const { name, value } = e.target;
+    const building = project.buildings.find((b) => b.id === Number(value));
+    if (building) {
+      delete building.floors;
+      building.projectId = project.id;
+      setFormData(building);
+    } else
+      setFormData({
+        id: "",
+        name: "",
+        description: "",
+        projectId: project.id,
+      });
+    //setFormData({ ...formData, [name]: value });
+  };
+
+  // Handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    formData.projectId = project.id;
+
+    onSubmit(formData); // Pass the updated data to the parent
+  };
+
+  return (
+    <div className="modal-dialog modal-lg modal-simple modal-edit-user">
+      <div className="modal-content">
+        <div className="modal-body">
+          <button
+            type="button"
+            className="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+          <div className="text-center mb-2">
+            <h5 className="mb-2">Manage Buildings - {project.name}</h5>
+          </div>
+          <form className="row g-2" onSubmit={handleSubmit}>
+            <div className="col-12 col-md-12">
+              <label className="form-label" htmlFor="name">
+                Select Building
+              </label>
+              <select
+                id="buildingId"
+                name="buildingId"
+                className="select2 form-select form-select-sm"
+                aria-label="Default select example"
+                onChange={handleBuildigChange}
+                value={formData.buildingId}
+              >
+                <option value="0">Add New Building</option>
+                {project.buildings.map((building) => (
+                  <option key={building.id} value={building.id}>
+                    {building.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="col-12 col-md-12">
+              <label className="form-label" htmlFor="name">
+                Building Name
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                className="form-control form-control-sm"
+                placeholder="Building Name"
+                onChange={handleChange}
+                value={formData.name}
+              />
+            </div>
+            <div className="col-12 col-md-12">
+              <label className="form-label" htmlFor="description">
+                Description
+              </label>
+              <textarea
+                type="text"
+                id="description"
+                rows="5"
+                name="description"
+                className="form-control form-control-sm"
+                placeholder="Description"
+                onChange={handleChange}
+                value={formData.description}
+              />
+            </div>
+
+            <div className="col-12 text-center">
+              <button type="submit" className="btn btn-primary me-3">
+                {formData.id ? "Edit Building" : "Add Building"}
+              </button>
+              <button
+                type="reset"
+                className="btn btn-label-secondary"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BuildingModel;

src/components/Project/FloorModel.jsx

@@ -1,20 +1,10 @@
 import React, { useState, useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
 
-// Zod validation schema
-const floorSchema = z.object({
-  buildingId: z.string().min(1, "Building is required"),
-  id: z.string().min(1, "Floor is required").optional(),
-  floorName: z.string().min(1, "Floor Name is required"),
-});
-
-// Default model
 const defaultModel = {
   id: "0",
   floorName: "",
   buildingId: "0",
+  projectId: "",
 };
 
 const FloorModel = ({
@@ -25,80 +15,67 @@ const FloorModel = ({
   onClearComplete,
 }) => {
   const [formData, setFormData] = useState(defaultModel);
+
   const [selectedBuilding, setSelectedBuilding] = useState({});
-  
+
-  // Initialize the form with React Hook Form
+  //if (floor && floor.id) setFormData(floor);
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    reset,
-    formState: { errors },
-  } = useForm({
-    resolver: zodResolver(floorSchema),
-    defaultValues: defaultModel,
-  });
 
   useEffect(() => {
     if (clearTrigger) {
-      reset(defaultModel);
+      setFormData(defaultModel); // Clear form
-      onClearComplete();
+      onClearComplete(); // Notify parent that clearing is done
     }
-  }, [clearTrigger, onClearComplete, reset]);
+  }, [clearTrigger, onClearComplete]);
 
-  // Handle building selection change
+  // Handle input change
-  const handleBuildigChange = (e) => {
+  const handleChange = (e) => {
-    const buildingId = e.target.value;
+    const { name, value } = e.target;
-    const building = project.buildings.find((b) => b.id === Number(buildingId));
+    setFormData({ ...formData, [name]: value });
-    if (building) {
-      setSelectedBuilding(building);
-      setFormData({
-        id: "",
-        floorName: "",
-        buildingId: building.id,
- 
-      });
-      setValue("buildingId", building.id); // Set value for validation
-      setValue("id", "0"); // Reset floorId when changing building
-    } else {
-      setSelectedBuilding({});
-      setFormData({
-        id: "",
-        floorName: "",
-        buildingId: "0",
-
-      });
-      setValue("buildingId", "0");
-    }
   };
-
-  // Handle floor selection change
   const handleFloorChange = (e) => {
-    const id = e.target.value;
+    const { name, value } = e.target;
-    const floor = selectedBuilding.floors.find((b) => b.id === Number(id));
+    const floor = selectedBuilding.floors.find((b) => b.id === Number(value));
     if (floor) {
       setFormData({
         id: floor.id,
         floorName: floor.floorName,
         buildingId: selectedBuilding.id,
-      
+        projectId: project.id,
       });
-      setValue("floorName", floor.floorName); // Set floor name for form
+    } else
-    } else {
       setFormData({
         id: "0",
         floorName: "",
         buildingId: selectedBuilding.id,
-    
+        projectId: project.id,
       });
-      setValue("floorName", "");
+  };
-    }
+  const handleBuildigChange = (e) => {
+    const { name, value } = e.target;
+    const building = project.buildings.find((b) => b.id === Number(value));
+    if (building) {
+      setFormData({
+        id: "",
+        floorName: "",
+        buildingId: building.id,
+        projectId: project.id,
+      });
+    } else
+      setFormData({
+        id: "",
+        floorName: "",
+        buildingId: "0",
+        projectId: project.id,
+      });
+    setSelectedBuilding(building);
   };
 
   // Handle form submission
-  const onFormSubmit = (data) => {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    formData.projectId = project.id;
 
-    onSubmit(data);
+    onSubmit(formData); // Pass the updated data to the parent
   };
 
   return (
@@ -115,20 +92,18 @@ const FloorModel = ({
             <div className="text-center mb-1">
               <h5 className="mb-1">Manage Floors - {project.name}</h5>
             </div>
-            <form
+            <form className="row g-2" onSubmit={handleSubmit}>
-              className="row g-2"
-              onSubmit={handleSubmit(onFormSubmit)}
-            >
               <div className="col-12 col-md-12">
-                <label className="form-label" htmlFor="buildingId">
+                <label className="form-label" htmlFor="name">
                   Select Building
                 </label>
                 <select
                   id="buildingId"
+                  name="buildingId"
                   className="select2 form-select form-select-sm"
-                  aria-label="Select Building"
+                  aria-label="Default select example"
-                  {...register("buildingId")}
                   onChange={handleBuildigChange}
+                  value={formData.buildingId}
                 >
                   <option value="0">Select Building</option>
                   {project.buildings.map((building) => (
@@ -137,22 +112,20 @@ const FloorModel = ({
                     </option>
                   ))}
                 </select>
-                {errors.buildingId && (
-                  <p className="text-danger">{errors.buildingId.message}</p>
-                )}
               </div>
 
-              {formData.buildingId !== "0" && (
+              {formData.buildingId != "0" && (
                 <div className="col-12 col-md-12">
-                  <label className="form-label" >
+                  <label className="form-label" htmlFor="floorId">
                     Select Floor
                   </label>
                   <select
-                    id="id"
+                    id="floorId"
+                    name="floorId"
                     className="select2 form-select form-select-sm"
-                    aria-label="Select Floor"
+                    aria-label="Default select example"
-                    {...register("id")}
                     onChange={handleFloorChange}
+                    value={formData.floorId}
                   >
                     <option value="0">Add New Floor</option>
                     {selectedBuilding.floors.map((floor) => (
@@ -161,33 +134,30 @@ const FloorModel = ({
                       </option>
                     ))}
                   </select>
-                  {errors.id && (
-                    <p className="text-danger">{errors.id.message}</p>
-                  )}
                 </div>
               )}
-
+              {formData.buildingId != "0" && (
-              {formData.buildingId !== "0" && (
                 <div className="col-12 col-md-12">
-                  <label className="form-label" htmlFor="floorName">
+                  {" "}
-                    {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
+                  <label className="form-label" htmlFor="name">
+                    {formData.id != "0" ? "Modify " : "Enter "} Floor Name
                   </label>
-                  <input
+                  <div className="input-group">
-                    type="text"
+                    <input
-                    id="floorName"
+                      type="text"
-                    className="form-control form-control-sm me-2"
+                      id="floorName"
-                    placeholder="Floor Name"
+                      name="floorName"
-                    {...register("floorName")}
+                      className="form-control form-control-sm me-2"
-                  />
+                      placeholder="Floor Name"
-                  {errors.floorName && (
+                      onChange={handleChange}
-                    <p className="text-danger">{errors.floorName.message}</p>
+                      value={formData.floorName}
-                  )}
+                    />
+                  </div>
                 </div>
               )}
-
               <div className="col-12 text-center">
                 <button type="submit" className="btn btn-primary me-3">
-                  {formData.id !== "0" && formData.id !== ""
+                  {formData.id != "0" && formData.id != ""
                     ? "Edit Floor"
                     : "Add Floor"}
                 </button>

src/components/Project/Infrastructure/Building.jsx

@@ -1,31 +0,0 @@
-import React from "react";
-const Building = ( {building, toggleBuilding, expandedBuildings, getContent} ) =>
-{
-
-    return (
-      <React.Fragment key={building.id}>
-        <tr className="overflow-auto">
-          <td
-            colSpan="4"
-            className="text-start"
-            style={{ background: "#f0f0f0", cursor: "pointer" }}
-            onClick={() => toggleBuilding(building.id)}
-          >
-            <div className="row table-responsive">
-              <h5 style={{ marginBottom: "0px" }}>
-                {building.name} &nbsp;
-                {expandedBuildings.includes(building.id) ? (
-                  <i className="bx bx-chevron-down"></i>
-                ) : (
-                  <i className="bx bx-chevron-right"></i>
-                )}
-              </h5>
-            </div>
-          </td>
-        </tr>
-  
-        {expandedBuildings.includes(building.id) && getContent(building)}
-      </React.Fragment>
-    );
-  };
-  export default Building

src/components/Project/Infrastructure/BuildingModel.jsx

@@ -1,129 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import ProjectRepository from "../../../repositories/ProjectRepository";
-
-// Zod validation schema
-const buildingSchema = z.object({
-  Id: z.string().optional(),
-  name: z.string().min(1, "Building name is required"),
-  description: z
-    .string()
-    .min(1, "Description is required")
-    .max(160, "Description cannot exceed 160 characters"),
-});
-
-const BuildingModel = ({
-  project,
-  onSubmit,
-  clearTrigger,
-  onClearComplete,
-  editingBuilding = null,
-}) => {
-  const [formData, setFormData] = useState({
-    id: "",
-    name: "",
-    description: "",
-    projectId: project.id,
-  });
-
-  // Reset form data if clearTrigger is true, or if editing a building
-  useEffect(() => {
-    if (clearTrigger) {
-      setFormData({ id: "", name: "", description: "", projectId: project.id });
-      onClearComplete();
-    } else if (editingBuilding) {
-      setFormData({ ...editingBuilding, projectId: project.id });
-    }
-  }, [clearTrigger, onClearComplete, editingBuilding, project.id]);
-
-  const { register, handleSubmit, formState: { errors }, setValue } = useForm({
-    resolver: zodResolver(buildingSchema),
-    defaultValues: formData, // Set default values from formData state
-  });
-
-  const handleBuildingChange = (e) => {
-    const selectedBuilding = project.buildings.find(b => b.id === +e.target.value);
-    if (selectedBuilding) {
-      setFormData({ ...selectedBuilding, projectId: project.id });
-      setValue("name", selectedBuilding.name); // Update name field
-      setValue("description", selectedBuilding.description); // Update description field
-    } else {
-      setFormData({ id: "", name: "", description: "", projectId: project.id });
-      setValue("name", ""); 
-      setValue("description", ""); 
-    }
-  };
-
-  const onSubmitHandler = async( data ) =>
-  {
-    onSubmit({ ...data, projectId: project.id });
-  };
-
-  return (
-    <div className="modal-dialog modal-lg modal-simple modal-edit-user">
-      <div className="modal-content">
-        <div className="modal-body">
-          <button
-            type="button"
-            className="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
-          <h5 className="text-center mb-2">Manage Buildings - {project.name}</h5>
-          <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
-            <div className="col-12">
-              <label className="form-label">Select Building</label>
-              <select
-                {...register("Id")}
-                className="select2 form-select form-select-sm"
-                onChange={(e) => { handleBuildingChange(e); }}
-              >
-                <option value="0">Add New Building</option>
-                {project.buildings.map((building) => (
-                  <option key={building.id} value={building.id}>{building.name}</option>
-                ))}
-              </select>
-              {errors.Id && <span className="danger-text">{errors.Id.message}</span>}
-            </div>
-
-            <div className="col-12">
-              <label className="form-label">
-                {formData.id ? "Rename Building Name" : "New Building Name"}
-              </label>
-              <input
-                {...register("name")}
-                type="text"
-                className="form-control form-control-sm"
-              />
-              {errors.name && <span className="danger-text">{errors.name.message}</span>}
-            </div>
-
-            <div className="col-12">
-              <label className="form-label">Description</label>
-              <textarea
-                {...register("description")}
-                maxLength="160"
-                rows="5"
-                className="form-control form-control-sm"
-              />
-              {errors.description && <span className="danger-text">{errors.description.message}</span>}
-            </div>
-
-            <div className="col-12 text-center">
-              <button type="submit" className="btn btn-primary me-3">
-                {formData.id ? "Edit Building" : "Add Building"}
-              </button>
-              <button type="reset" className="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">
-                Cancel
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default BuildingModel;

src/components/Project/Infrastructure/Floor.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-import WorkArea from "./WorkArea";
-const Floor = ( {floor, workAreas,forBuilding} ) =>
-{
-
-    return (
-      <React.Fragment key={floor.id}>
-        {workAreas && workAreas.length > 0 ? (
-          workAreas.map((workArea) => (
-            <WorkArea forBuilding={forBuilding} key={workArea.id} workArea={workArea} floor={floor} />
-          ))
-        ) : (
-          <tr>
-            <td colSpan="4" className="text-start">
-              <div className="row ps-2">
-                <div className="col-6">
-                  <h6>
-                    <span>{floor.floorName} &nbsp;</span>
-                  </h6>
-                </div>
-              </div>
-            </td>
-          </tr>
-        )}
-        
-      </React.Fragment>
-    );
-  };
-  export default Floor

src/components/Project/Infrastructure/InfraTable.jsx

@@ -1,69 +0,0 @@
-import {useEffect, useState} from "react";
-import Building from "./Building";
-import Floor from "./Floor";
-
-const InfraTable = ( {buildings,assign} ) =>
-{
-  const [projectBuiling,setProjectBuilding] = useState([])
-    const [expandedBuildings, setExpandedBuildings] = useState([]);
-  
-    const toggleBuilding = (buildingId) => {
-      setExpandedBuildings((prevExpanded) =>
-        prevExpanded.includes(buildingId)
-          ? prevExpanded.filter((id) => id !== buildingId)
-          : [...prevExpanded, buildingId]
-      );
-    };
-  
-
-    const getContent = (building) => {
-      return building.floors.length > 0 ? (
-        building.floors.map((floor) => <Floor  forBuilding={building}   key={floor.id} floor={floor} workAreas={floor.workAreas} />)
-      ) : (
-        <tr>
-          <td colSpan="4">
-            <div className="alert alert-warning text-center mb-0" role="alert">
-              <p>No floors have been added yet. Please add floors to start managing your building.</p>
-              <button
-                type="button"
-                className="btn btn-xs btn-primary"
-                data-bs-toggle="modal"
-                data-bs-target="#addFloorModal"
-                onClick={() => openModal('addFloor')}
-              >
-                <i className="bx bx-plus-circle me-2"></i>
-                Add Floors
-              </button>
-            </div>
-          </td>
-        </tr>
-      );
-  };
-  
-
-  useEffect( () =>
-  {
-    setProjectBuilding(buildings)
-  },[buildings])
-  
-    return (
-      <div className="col-12 overflow-auto">
-        {projectBuiling && projectBuiling.length > 0 && (
-          <table className="table table-bordered">
-            <tbody>
-              {projectBuiling.map((building) => (
-                <Building
-                  key={building.id}
-                  building={building}
-                  toggleBuilding={toggleBuilding}
-                  expandedBuildings={expandedBuildings}
-                  getContent={getContent}
-                />
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-    );
-  };
-  export default InfraTable

src/components/Project/Infrastructure/WorkArea.jsx

@@ -1,46 +0,0 @@
-import React from "react";
-import WorkItem from "./WorkItem";
-
-const WorkArea = ({ workArea, floor,forBuilding }) => {
-    return (
-      <React.Fragment key={workArea.id}>
-        <tr>
-          <td colSpan="4" className="text-start table-cell">
-            <div className="row ps-2">
-              <div className="col-6">
-                <h6>
-                  <span>
-                    {floor.floorName} - {workArea.areaName} &nbsp;
-                  </span>
-                </h6>
-              </div>
-            </div>
-          </td>
-        </tr>
-  
-        {workArea?.workItems && workArea.workItems.length > 0 ? (
-          <tr className="overflow-auto">
-            <td colSpan={4}>
-              <table className="table mx-1">
-                <thead>
-                  <tr>
-                    <th>Activity</th>
-                    <th>Planned</th>
-                    <th>Completed</th>
-                    <th>Progress</th>
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="table-border-bottom-0">
-                  {workArea.workItems.map((workItem) => (
-                    <WorkItem key={workItem.workItemId} workItem={workItem} forBuilding={forBuilding} forFloor={floor} forWorkArea={workArea} />
-                  ))}
-                </tbody>
-              </table>
-            </td>
-          </tr>
-        ) : null}
-      </React.Fragment>
-    );
-  };
-export default WorkArea;

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -1,218 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { set, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-// Zod schema for form validation
-const workAreaSchema = z.object( {
-  id:z.string().nonempty("Floor is required"),
-  
-  buildingId: z.string().nonempty("Building is required"),
-  floorId: z.string().nonempty("Floor is required"),
-  areaName: z.string().nonempty( "Work Area Name is required" ).min( 3, "Name must be at least 3 characters long" ),
-});
-
-// Default form data
-const defaultModel = {
-  id: "0",
-  areaName: "",
-  floorId: "0",
-};
-
-const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete }) => {
-  const [selectedBuilding, setSelectedBuilding] = useState(null);
-  const [ selectedFloor, setSelectedFloor ] = useState( null );
-  const [selectdWorkArea,setWorkArea] = useState()
-
-  const { register, handleSubmit, formState: { errors }, setValue, reset, watch } = useForm({
-    resolver: zodResolver(workAreaSchema), // Use Zod resolver for validation
-    defaultValues: defaultModel,
-  });
-
-  const floorId = watch( "floorId" );  // Watch the floorId for conditional rendering
-
-  useEffect(() => {
-    if (clearTrigger) {
-      reset(defaultModel); // Reset form to initial state
-      setSelectedBuilding(null);
-      setSelectedFloor(null);
-      onClearComplete();
-    }
-  }, [clearTrigger, onClearComplete, reset]);
-
-  const handleWorkAreaChange = ( e ) =>
-  {
-    
-    
-    const { value } = e.target;
-
-    if (value === "0") {
-      setValue("id", "0");  // Create New Work Area
-      setValue( "areaName", "" );
- 
-      setWorkArea(String(0))
-    } else {
-      const workArea = selectedFloor?.workAreas.find((b) => b.id === Number(value));
-      if ( workArea )
-      {
-        setValue("id", String(workArea.id));  // Set id as a string
-        setValue("areaName", workArea.areaName);
-        setWorkArea(String(workArea.id))
-
-      }
-    }
-  };
-
-  const handleFloorChange = (e) => {
-    const { value } = e.target;
-    const floor = selectedBuilding?.floors.find((b) => b.id === Number(value));
-
-    if (floor) {
-      setSelectedFloor(floor);
-      setValue("floorId", floor.id);  // Update floorId
-      setValue("id", "0");  // Reset Work Area ID for new area creation
-      setValue("areaName", ""); // Reset Work Area Name when changing floor
-    } else {
-      setSelectedFloor(null);
-      setValue("floorId", "0");
-      setValue("id", "0"); // Reset Work Area ID
-      setValue("areaName", ""); // Reset Work Area Name
-    }
-  };
-
-  const handleBuildingChange = (e) => {
-    const { value } = e.target;
-    const building = project.buildings.find((b) => b.id === Number(value));
-    setSelectedBuilding(building);
-    setSelectedFloor(null); // Reset selected floor on building change
-    reset(defaultModel); // Reset the form when a new building is selected
-  };
-
-  const onSubmitForm = ( data ) =>
-  {
-    console.log(data)
-    let WorkArea = {
-      id: data.id,
-      areaName: data.areaName,
-      floorId: data.floorId,
-      buildingId:data.buildingId
-    }
-    onSubmit(WorkArea);  // Send the final data to the parent
-  };
-
-  const handleCancel = () => {
-    reset(defaultModel); // Reset the form to initial state
-    setSelectedFloor(null);
-    setSelectedBuilding(null);
-  };
-
-  return (
-    <div className="modal-dialog modal-lg modal-simple modal-edit-user">
-      <div className="modal-content">
-        <div className="modal-body">
-          <div className="row">
-            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            <div className="text-center mb-1">
-              <h5 className="mb-1">Manage Work Area</h5>
-            </div>
-            <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
-              {/* Building Selection */}
-              <div className="col-6 col-md-6">
-                <label className="form-label" htmlFor="buildingId">Select Building</label>
-                <select
-                  id="buildingId"
-                  name="buildingId"
-                  className="select2 form-select form-select-sm"
-                  {...register("buildingId")}
-                  onChange={handleBuildingChange}
-                >
-                  <option value="0">Select Building</option>
-                  {project.buildings.map((building) => (
-                    <option key={building.id} value={building.id}>
-                      {building.name}
-                    </option>
-                  ))}
-                </select>
-                {errors.buildingId && <span>{errors.buildingId.message}</span>}
-              </div>
-
-              {/* Floor Selection */}
-              {selectedBuilding && selectedBuilding.buildingId !== "0" && (
-                <div className="col-6 col-md-6">
-                  <label className="form-label" htmlFor="floorId">Select Floor</label>
-                  <select
-                    id="floorId"
-                    name="floorId"
-                    className="select2 form-select form-select-sm"
-                    {...register("floorId")}
-                    onChange={handleFloorChange}
-                  >
-                    <option value="0">Select Floor</option>
-                    {selectedBuilding.floors.map((floor) => (
-                      <option key={floor.id} value={floor.id}>
-                        {floor.floorName}
-                      </option>
-                    ))}
-                  </select>
-                  {errors.floorId && <span>{errors.floorId.message}</span>}
-                </div>
-              )}
-
-              {/* Work Area Selection or Creation */}
-              {floorId !== "0" && (
-                <>
-                  <div className="col-12 col-md-12">
-                    <label className="form-label" >Select Work Area</label>
-                    <select
-                      id="workAreaId"
-                      name="workAreaId"
-                      className="select2 form-select form-select-sm"
-                      {...register("id")}
-                      onChange={handleWorkAreaChange}
-                    >
-                      <option value="0">Create New Work Area</option>
-                      {selectedFloor?.workAreas.map((workArea) => (
-                        <option key={workArea.id} value={workArea.id}>
-                          {workArea.areaName}
-                        </option>
-                      ))}
-                    </select>
-                    {errors.id && <span>{errors.id.message}</span>}
-                  </div>
-
-                  {/* Work Area Name Input */}
-                  <div className="col-12 col-md-12">
-                    <label className="form-label" htmlFor="areaName">
-                      {watch("id") === "0" ? "Enter Work Area Name" : "Modify Work Area Name"}
-                    </label>
-                    <input
-                      type="text"
-                      id="areaName"
-                      name="areaName"
-                      className="form-control form-control-sm"
-                      placeholder="Work Area"
-                      {...register("areaName")}
-                    />
-                    {errors.areaName && <span className="danger-text">{errors.areaName.message}</span>}
-                  </div>
-
-                  {/* Submit and Cancel Buttons */}
-                  <div className="col-12 text-center">
-                    <button type="submit" className="btn btn-primary me-3">
-                      {watch("id") === "0" ? "Add Work Area" : "Edit Work Area"}
-                    </button>
-                    <button type="button" className="btn btn-label-secondary" onClick={handleCancel} data-bs-dismiss="modal" aria-label="Close">
-                      Cancel
-                    </button>
-                  </div>
-                </>
-              )}
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default WorkAreaModel;

src/components/Project/Infrastructure/WorkItem.jsx

@@ -1,98 +0,0 @@
-import React, { useState } from "react";
-import { useModal } from "../../../ModalContext";
-import AssignRoleModel from "../AssignRole";
-import {useParams} from "react-router-dom";
-
-const WorkItem = ( {workItem, forBuilding, forFloor, forWorkArea} ) =>{
-  const {projectId} = useParams()
-  const { openModal ,closedModal} = useModal(); 
-  const [itemName, setItemName] = useState(''); 
-  const getProgress = (planned, completed) => {
-    return (completed * 100) / planned + "%";
-  };
-
-  const handleAssignTask = () => {
-    console.log("Item Created:", itemName);
-    setItemName(''); 
-  };
-
-  const showCreateItemModal = (modalData) => {
-    openModal(
-      <AssignRoleModel assignData={modalData} onClose={closedModal} />,
-      handleAssignTask ,"lg"
-    );
-  };
-  
-  let assigndata = {
-    building: forBuilding,
-    floor: forFloor,
-    workArea: forWorkArea,
-    workItem
-  }
-  return (
-    <tr>
-      <td className="text-start table-cell-small">
-        <i className="bx bx-right-arrow-alt"></i>
-        <span className="fw-medium">
-          {workItem.workItem.activityMaster
-            ? workItem.workItem.activityMaster.activityName
-            : "NA"}
-        </span>
-      </td>
-      <td className="text-center">
-        {workItem.workItem ? workItem.workItem.plannedWork : "NA"}
-      </td>
-      <td className="text-center">
-        {workItem.workItem ? workItem.workItem.completedWork : "NA"}
-      </td>
-      <td className="text-center" style={{ width: "15%" }}>
-        <div className="progress p-0">
-          <div
-            className="progress-bar"
-            role="progressbar"
-            style={{
-              width: getProgress(workItem.workItem.plannedWork, workItem.workItem.completedWork),
-              height: "10px",
-            }}
-            aria-valuenow={workItem.workItem ? workItem.workItem.completedWork : 0}
-            aria-valuemin="0"
-            aria-valuemax={workItem.workItem ? workItem.workItem.plannedWork : 0}
-          ></div>
-        </div>
-      </td>
-      <td>
-        <div className="dropdown">
-          {!projectId && (  <button
-            aria-label="Modify"
-            type="button"
-            className="btn p-0"
-            data-bs-toggle="modal"
-            data-bs-target="#project-modal"
-            onClick={() =>
-            {
-              showCreateItemModal(assigndata)
-            }}
-          >
-            <span className="badge bg-label-primary me-1">Assign</span>
-          </button>)}
-          <button
-            aria-label="Modify"
-            type="button"
-            className="btn p-0 dropdown-toggle hide-arrow"
-          >
-            <i className="bx bxs-edit me-2 text-primary"></i>
-          </button>
-          <button
-            aria-label="Delete"
-            type="button"
-            className="btn p-0 dropdown-toggle hide-arrow"
-          >
-            <i className="bx bx-trash me-1 text-danger"></i>
-          </button>
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-export default WorkItem;

src/components/Project/ProjectInfra.jsx

@@ -1,20 +1,18 @@
 import React, { useState, useEffect } from "react";
 import "./ProjectInfra.css";
-import BuildingModel from "./Infrastructure/BuildingModel";
+import BuildingModel from "./BuildingModel";
-import FloorModel from "./Infrastructure/FloorModel";
+import FloorModel from "./FloorModel";
 import showToast from "../../services/toastService";
-import WorkAreaModel from "./Infrastructure/WorkAreaModel";
+import WorkAreaModel from "./WorkAreaModel";
-import TaskModel from "./Infrastructure/TaskModel";
+import TaskModel from "./TaskModel";
-import ProjectRepository, {TasksRepository} from "../../repositories/ProjectRepository";
+import ProjectRepository from "../../repositories/ProjectRepository";
 import ProjectModal from "./ProjectModal";
 import {useHasUserPermission} from "../../hooks/useHasUserPermission";
 import {MANAGE_PROJECT_INFRA} from "../../utils/constants";
-import InfraTable from "./Infrastructure/InfraTable";
+// import AssignRoleModel from "./AssignRoleModel";
-import {cacheData} from "../../slices/apiDataManager";
-
-
 
 const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) => {
+  
   const [expandedBuildings, setExpandedBuildings] = useState([]);
   const [project, setProject] = useState(data);
   const[modalConfig,setModalConfig] = useState({type:null,data:null});
@@ -29,8 +27,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
   const [isAssignRoleModal,setIsAssingRoleModal] = useState(false)
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [clearFormTrigger, setClearFormTrigger] = useState(false);
-  const [ CurrentBuilding, setCurrentBuilding ] = useState( "" )
+  const [CurrentBuilding,setCurrentBuilding] = useState("")
-  const [showModal, setShowModal] = useState(false);
 
   useEffect(() => {
     setProject(data);
@@ -53,188 +50,6 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
       setIsAssingRoleModal(true)
      
   }
-
-
-
-
-  const openBuildingModel = (projectData) => {
-    setIsBuildingModalOpen(true);
-  };
- 
-
- 
-  const submitData = async (infraObject) => {
-  
-    try
-    {
-      console.log(infraObject)
-      let response = await ProjectRepository.manageProjectInfra( infraObject );      
-      const entity = response.data;
-
-     const updatedProject = { ...project };
-     // Handle the building data
-    if (entity.building) {
-      const { id, name, description } = entity.building;
-      const updatedBuildings = updatedProject.buildings.map((building) =>
-        building.id === id
-          ? { ...building, name, description }
-          : building
-      );
-  
-      // Add building if it doesn't exist
-      if (!updatedProject.buildings.some((building) => building.id === id)) {
-        updatedBuildings.push({
-          id: id,
-          name,
-          description,
-          floor: [],
-        });
-      }
-  
-      updatedProject.buildings = updatedBuildings;
-  
-      // Update the cache for buildings
-      cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
-      setProject(updatedProject)
-    }
-    // Handle the floor data
-    else if ( entity.floor )
-    {
-      const { buildingId, id, floorName } = entity.floor;
-      const updatedBuildings = updatedProject.buildings.map((building) =>
-        building.id == buildingId
-          ? {
-              ...building,
-            floors: building.floors.map( ( floor ) =>
-               
-                floor.id === id
-                  ? {
-                      ...floor,
-                      floorName, // Update the floor name only
-                      // Keep other properties as they are (including workArea)
-                    }
-                  : floor
-              )
-              // Add the new floor if it doesn't already exist
-              .concat(
-                !building.floors.some((floor) => floor.id === id)
-                  ? [{ id: id, floorName, workArea: null }] // New floor added with workArea set to null
-                  : []
-              ),
-            }
-          : building
-      );
-    
-      updatedProject.buildings = updatedBuildings;
-    
-      // Cache the updated project
-      cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
-      setProject(updatedProject)
-    }
-    // Handle the work area data
-    else if ( entity.workArea )
-    {  
-      debugger
-
-      let buildingId = infraObject[0].workArea.buildingId
-
-      const { floorId, areaName, id } = entity.workArea;
-         // Check if the workArea exists, otherwise create a new one
-          const updatedBuildings = updatedProject.buildings.map((building) =>
-          building.id == buildingId
-             ? {
-                 ...building,
-                 floors: building.floors.map((floor) =>
-                  floor.id == floorId
-                    ? {
-                      ...floor,
-                       workAreas: floor.workAreas.some((workArea) => workArea.id === id)
-                      ? floor.workAreas.map((workArea) =>
-                        workArea.id === id
-                        ? { ...workArea, areaName }
-                        : workArea
-                     )
-                    : [
-                      ...floor.workAreas,
-                      { id, areaName, workItems: null },
-                    ],
-                  }
-            : floor
-         ),
-       }
-     : building
-    );
-
-    updatedProject.buildings = updatedBuildings;
-
- // Update the cache for work areas
-      cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
-      setProject(updatedProject)
-    }
-    // Handle the task (workItem) data
-    else if (entity.workItem) {
-      const { buildingId, floorId, workAreaId, name, description } = entity.workItem;
-      const updatedBuildings = updatedProject.buildings.map((building) =>
-        building.id === buildingId
-          ? {
-              ...building,
-              floors: building.floors.map((floor) =>
-                floor.id === floorId
-                  ? {
-                      ...floor,
-                      workAreas: floor.workAreas.map((workArea) =>
-                        workArea.id === workAreaId
-                          ? {
-                              ...workArea,
-                              tasks: workArea.tasks.map((task) =>
-                                task.id === entity.workItem.id ? { ...task, name, description } : task
-                              ),
-                            }
-                          : workArea
-                      ),
-                    }
-                  : floor
-              ),
-            }
-          : building
-      );
-  
-      updatedProject.buildings = updatedBuildings;
-  
-    
-      cacheData("projectInfo", { projectId: updatedProject.id, data: updatedProject });
-    }
-
-    else {
-      console.error("Unsupported data type for submitData", entity);
-    }
-    } catch ( Err )
-    {
-      showToast("Somthing wrong","error")
-    }
-  
-
-   
-    
-    handleClose()
-  };
-  
-  
-  const closeBuildingModel = () => {
-    setIsBuildingModalOpen(false);
-  };
-  const handleBuildingModelFormSubmit = (buildingmodel) => {
-    if (buildingmodel.id == "" || buildingmodel.id == 0)
-      delete buildingmodel.id;
-    let data = [
-      {
-        building: buildingmodel,
-        floor: null,
-        workArea: null,
-      },
-    ];
-    submitData(data);
-  };
   const handleFloorModelFormSubmit = (updatedFloor) => {
     if (updatedFloor.id == "") delete updatedFloor.id;
 
@@ -247,13 +62,49 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
     ]);
   };
 
+  const submitData = (infraObject) => {
+    ProjectRepository.manageProjectInfra(infraObject)
+      .then((response) => {
+        fetchData();
+        onDataChange("building-change");
+        showToast("Details updated successfully.", "success");
+        setClearFormTrigger(true); // Set trigger to true
+      })
+      .catch((error) => {
+        showToast(error.message, "error");
+      });
+  };
+
+  const openBuildingModel = (projectData) => {
+    setIsBuildingModalOpen(true);
+  };
+
+  const closeBuildingModel = () => {
+    setIsBuildingModalOpen(false);
+  };
+  const handleBuildingModelFormSubmit = (buildingmodel) => {
+    if (buildingmodel.id == "" || buildingmodel.id == 0)
+      delete buildingmodel.id;
+
+    let data = [
+      {
+        building: buildingmodel,
+        floor: null,
+        workArea: null,
+      },
+    ];
+
+    submitData(data);
+  };
+
   const openWorkAreaModel = (projectData) => {
     setIsWorkAreaModalOpen(true);
   };
 
   const closeWorkAreaModel = () => {
     setIsWorkAreaModalOpen(false);
-
+    // const modalBackdrop = document.querySelector(".modal-backdrop");
+    // if (modalBackdrop) modalBackdrop.remove();
   };
   const handleWorkAreaModelFormSubmit = (updatedModel) => {
     if (updatedModel.id == "") delete updatedModel.id;
@@ -273,18 +124,19 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
 
   const closeTaskModel = () => {
     setIsTaskModalOpen(false);
-
+    // const modalBackdrop = document.querySelector(".modal-backdrop");
+    // if (modalBackdrop) modalBackdrop.remove();
   };
 
   const handleTaskModelFormSubmit = (updatedModel) => {
     if (updatedModel.id == "") updatedModel.id = 0;
 
-
+    //console.log("Form submitted:", updatedModel); // Replace this with an API call or state update
     ProjectRepository.manageProjectTasks([updatedModel])
       .then((response) => {
         onDataChange("task-change");
         showToast("Details updated successfully.", "success");
-        setClearFormTrigger(true); 
+        setClearFormTrigger(true); // Set trigger to true
       })
       .catch((error) => {
         showToast(error.message, "error");
@@ -297,54 +149,297 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
     );
   };
 
+  const getContent = (building) => {
+    let hasFloors =
+      building.floors && building.floors.length > 0 ? true : false;
+    
+    return (
+      <>
+        {(() => {
+          if (hasFloors) {
+            return building.floors.map((floor) => (
+              <React.Fragment key={floor.id}>
+
+                {floor.workAreas.length > 0 ? (
+                  floor.workAreas.map((workArea) => (
+                    <React.Fragment key={workArea.id}>
+                      <tr>
+                        <td colSpan="4" className="text-start table-cell">
+                          <div className="row ps-2">
+                            <div className="col-6">
+                              {" "}
+                              <h6>
+                                <span>
+                                  {" "}
+                                  {floor.floorName} - {workArea.areaName} &nbsp;{" "}
+                                </span>
+                              </h6>
+                            </div>
+                            <div className="col-6 text-end">
+                              {/* <a
+                                type="button"
+                                className="text-end me-2"
+                                data-bs-toggle="modal"
+                                data-bs-target="#floor-model"
+                                onClick={() => openFloorModel()}
+                              >
+                                <i className="bx bx-edit-alt me-2"></i>
+                                Edit Floor
+                              </a> */}
+
+                              {/* <a
+                                type="button"
+                                className="text-end"
+                                data-bs-toggle="modal"
+                                data-bs-target="#editproject"
+                                onClick={() => openModal()}
+                              >
+                                <i className="bx bx-plus-circle me-2"></i>
+                                Add Activities
+                              </a> */}
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      {workArea.workItems.length > 0 ? (
+                        <tr className="overflow-auto" >
+                          {" "}
+                          <td colSpan={4} >
+                            <table
+                              className="table mx-1"
+                              
+                            >
+                              <thead>
+                                <tr>
+                                  <th>Activity</th>
+                                  <th>Planned</th>
+                                  <th>Complated</th>
+                                  <th>Progress</th>
+                                  <th>Actions</th>
+                                </tr>
+                              </thead>
+                              <tbody className="table-border-bottom-0">
+                                {workArea.workItems.map((workItem) => (
+                                  <React.Fragment key={workItem.workItemId}>
+                                    <tr>
+                                      <td className="text-start table-cell-small">
+                                        <i className="bx bx-right-arrow-alt"></i>
+                                        <span className="fw-medium">
+                                          {workItem.workItem.activityMaster
+                                            ? workItem.workItem.activityMaster
+                                                .activityName
+                                            : "NA"}
+                                        </span>
+                                      </td>
+                                      <td className="text-center">
+                                        {workItem.workItem
+                                          ? workItem.workItem.plannedWork
+                                          : "NA"}
+                                      </td>
+                                      <td className="text-center">
+                                        {workItem.workItem
+                                          ? workItem.workItem.completedWork
+                                          : "NA"}
+                                      </td>
+
+                                      <td
+                                        className="text-center"
+                                        style={{ width: "15%" }}
+                                      >
+                                        <div className="progress p-0">
+                                          <div
+                                            className="progress-bar"
+                                            role="progressbar"
+                                            style={{
+                                              width: getProgress(
+                                                workItem.workItem.plannedWork,
+                                                workItem.workItem.completedWork
+                                              ),
+                                              height: "10px",
+                                            }}
+                                            aria-valuenow={
+                                              workItem.workItem
+                                                ? workItem.workItem
+                                                    .completedWork
+                                                : 0
+                                            }
+                                            aria-valuemin="0"
+                                            aria-valuemax={
+                                              workItem.workItem
+                                                ? workItem.workItem.plannedWork
+                                                : 0
+                                            }
+                                          ></div>
+                                        </div>
+                                      </td>
+                                      <td>
+                                        <div className="dropdown">
+                                        <button
+                                            aria-label="Modify"
+                                            type="button"
+                                            className="btn p-0 "
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#project-modal"
+                                            onClick={()=>{
+                                              // setModalConfig({type:"assignRole",data:{building,floor,workArea,workItem}})
+                                              handleModalData("assignRole",{building,floor,workArea,workItem})
+                                              // openAssignModel({building,floor,workArea,workItem})
+                                            }}
+                                          >
+                                           <span className="badge bg-label-primary me-1">Assign</span>
+                                          </button>
+                                          <button
+                                            aria-label="Modify"
+                                            type="button"
+                                            className="btn p-0 dropdown-toggle hide-arrow"
+                                          >
+                                            <i class="bx bxs-edit me-2 text-primary"></i>
+                                          </button>
+                                          <button
+                                            aria-label="Delete"
+                                            type="button"
+                                            className="btn p-0 dropdown-toggle hide-arrow"
+                                          >
+                                            <i className="bx bx-trash me-1 text-danger"></i>{" "}
+                                          </button>
+                                        </div>
+                                      </td>
+                                    </tr>{" "}
+                                  </React.Fragment>
+                                ))}
+                              </tbody>
+                            </table>{" "}
+                          </td>
+                        </tr>
+                      ) : (
+                        <span></span>
+                      )}
+                    </React.Fragment>
+                  ))
+                ) : (
+                  <React.Fragment key={building.id + floor.id}>
+                    <tr>
+                      <td colSpan="4" className="text-start table-cell">
+                        <div className="row ps-2">
+                          <div className="col-6">
+                            {" "}
+                            <h6>
+                              <span> {floor.floorName} &nbsp; </span>
+                            </h6>
+                          </div>
+                          <div className="col-6 text-end">
+                            {/* <a
+                              type="button"
+                              className="text-end me-2"
+                              data-bs-toggle="modal"
+                              data-bs-target="#floor-model"
+                              onClick={() => openFloorModel()}
+                            >
+                              <i className="bx bx-edit-alt me-2"></i>
+                              Edit Floor
+                            </a> */}
+
+                            {/* <a
+                              type="button"
+                              className="text-end"
+                              data-bs-toggle="modal"
+                              data-bs-target="#editproject"
+                              onClick={() => openModal()}
+                            >
+                              <i className="bx bx-plus-circle me-2"></i>
+                              Add Work Area
+                            </a> */}
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </React.Fragment>
+                )}
+              </React.Fragment>
+            ));
+          } else {
+            return (
+              <>
+                <tr>
+                  <td>
+                    <p>No Floors Added, Please add them</p>
+                    {/* <p>
+                      <button
+                        type="button"
+                        data-bs-toggle="modal"
+                        className="btn btn-sm btn-danger m-1"
+                        data-bs-target="#editproject"
+                        onClick={() => openModal()}
+                      >
+                        <i className="bx bx-plus-circle me-2"></i>
+                        Add Floors
+                      </button>
+                    </p> */}
+                  </td>
+                </tr>
+              </>
+            );
+          }
+        })()}
+      </>
+    );
+  };
+
+  const getProgress = (planned, completed) => {
+    return (completed * 100) / planned + "%";
+  };
+
+
+  //  common modal
+
   const handleModalData = (type,modaldata)=>{
     setModalConfig({type:type,data:modaldata})
   }
   const openModal = () => {
-    const modalElement = document.getElementById('building-model');
+    setIsModalOpen(true);
-  const modal = new Modal(modalElement, {
-    backdrop: false,
-    keyboard: true,
-    focus: true
-  });
-  modal.show()
   };
   const closeModal = () => {
     setIsModalOpen(false); 
     setModalConfig(null)
   
     
-    const modalElement = document.getElementById('building-model');
+    const modalElement = document.getElementById('project-modal');
     if (modalElement) {
-      modalElement.classList.remove('show'); // Remove modal visibility class
+      modalElement.classList.remove('show'); 
-      modalElement.style.display = 'none'; // Hide the modal element
+      modalElement.style.display = 'none'; // Hide modal visually
+      document.body.classList.remove('modal-open'); // Unlock body scroll
+  
+    
+      const backdropElement = document.querySelector('.modal-backdrop');
+      if (backdropElement) {
+        backdropElement.classList.remove('modal-backdrop'); // Remove backdrop class
+        backdropElement.style.display = 'none'; // Hide the backdrop element
+      }
     }
-  
+    const modalBackdropElement = document.querySelector('.modal-backdrop');
-    document.body.classList.remove('modal-open'); // Remove modal-open class from body
+    if (modalBackdropElement) {
-  
+      modalBackdropElement.remove(); 
-    // Remove the modal backdrop
-    const backdropElement = document.querySelector('.modal-backdrop');
-    if (backdropElement) {
-      backdropElement.classList.remove('modal-backdrop'); // Remove backdrop class
-      backdropElement.style.display = 'none'; // Hide the backdrop element
     }
     document.body.style.overflow = 'auto';
    
   };
+  useEffect(() => {
+      if (modalConfig !== null) {
+        openModal();
+      }
+    
+    }, [modalConfig,isModalOpen]);
 
-  const handleShow = () => setShowModal(true);
-  const handleClose = () => setShowModal( false );
 
   return (
     <>
-
+      {isBuildingModalOpen && (
         <div
-        className={`modal fade ${showModal ? 'show' : ''}`}
+          className={`modal fade `}
-        tabIndex="-1"
+          id="building-model"
-        role="dialog"
+          tabIndex="-1"
-        style={{ display: showModal ? 'block' : 'none' }}
+          aria-hidden="true"
-        aria-hidden={!showModal}
+        >
-      >
           <BuildingModel
             project={data}
             onClose={closeBuildingModel}
@@ -353,7 +448,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
             onClearComplete={() => setClearFormTrigger(false)}
           ></BuildingModel>
         </div>
-     
+      )}
 
       {isFloorModalOpen && (
         <div
@@ -364,6 +459,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
         >
           <FloorModel
             project={data}
+            // building={null}
             onClose={closeFloorModel}
             onSubmit={handleFloorModelFormSubmit}
             clearTrigger={clearFormTrigger}
@@ -408,13 +504,16 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
         </div>
       )}
 
-         
+      
+
+       {/* common Modal  */}
       {isModalOpen && (
         <ProjectModal modalConfig={modalConfig} closeModal={closeModal}  />
       )}
 
       <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
         <div className="card">
+          {/* <div className="card-header pb-4"></div> */}
 
           <div className="card-body" style={{ padding: "0.5rem" }}>
             <div className="align-items-center">
@@ -423,12 +522,14 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
                   <button
                     type="button"
                     className="link-button link-button-sm m-1 "
-               
+                    data-bs-toggle="modal"
-                    onClick={handleShow}
+                    data-bs-target="#building-model"
+                    onClick={() => openBuildingModel()}
                   >
                     <i className="bx bx-plus-circle me-2"></i>
                     Manage Building
                   </button>
+
                   <button
                     type="button"
                     data-bs-toggle="modal"
@@ -463,7 +564,48 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
                 </div>
               </div>
               <div className="row ">
-                <InfraTable buildings={project.buildings}/>
+                <div className="col-12  overflow-auto">
+                  {buildings && buildings.length > 0 && (
+                    <table className="table table-bordered ">
+                      <tbody>
+                        {buildings.map((building) => (
+                          
+                         building.floors && building.floors.length > 0 && (
+                          <React.Fragment key={building.id}>
+                          <tr className="overflow-auto">
+                            <td
+                              colSpan="4"
+                              className="text-start "
+                              style={{
+                                background: "#f0f0f0",
+                                cursor: "pointer",
+                              }}
+                              onClick={() => toggleBuilding(building.id)}
+                            >
+                              <div className="row table-responsive">
+                                <h5 style={{ marginBottom: "0px" }}>
+
+                                  { building.name} &nbsp;
+                                  {expandedBuildings.includes(building.id) ? (
+                                    <i className="bx bx-chevron-down"></i>
+                                  ) : (
+                                    <i className="bx bx-chevron-right"></i>
+                                  )}
+                                </h5>
+                              </div>
+                            </td>
+                          </tr>
+
+                          {expandedBuildings.includes(building.id)  &&  getContent(building)}
+                           
+                        </React.Fragment>
+                         )
+                        
+                        ))}
+                      </tbody>
+                    </table>
+                  )}
+                </div>
               </div>
             </div>
           </div>

src/components/Project/ProjectModal.jsx

@@ -25,8 +25,7 @@ const ProjectModal = ({modalConfig,closeModal}) => {
      
      {/* Modal Component */}
      
-            {modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
+     {modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
-            
    </div>
 </div>
 </div>

src/components/Project/ProjectNav.jsx

@@ -35,7 +35,7 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
               <i className="bx bx-group bx-sm me-1_5"></i> Teams
             </a>
           </li>
-          <li className={`nav-item ${!HasViewInfraStructure && 'd-none'} `}>
+          <li className={`nav-item ${HasViewInfraStructure ? "":"d-none"} `}>
             <a
               className={`nav-link ${activePill === "infra" ? "active" : ""}`}
               href="#"

src/components/Project/ProjectOverview.jsx

@@ -3,7 +3,7 @@ import {useEmployeesByProjectAllocated} from "../../hooks/useProjects";
 
 const ProjectOverview = ({project}) =>
 {
-  const {projectEmployees} = useEmployeesByProjectAllocated( project?.id );
+  const {projectEmployees} = useEmployeesByProjectAllocated( project.id );
   let teamSize = projectEmployees.filter( ( emp ) => emp.isActive )
 
   return (

src/components/Project/TaskModel.jsx

@@ -14,10 +14,9 @@ const TaskModel = ({
   onSubmit,
   clearTrigger,
   onClearComplete,
-} ) =>
+}) => {
-{
-  
   const [formData, setFormData] = useState(defaultModel);
+
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [selectedFloor, setSelectedFloor] = useState(null);
   const [selectedWorkArea, setSelectedWorkArea] = useState(null);
@@ -48,8 +47,8 @@ const TaskModel = ({
     if (clearTrigger) {
       let model = defaultModel;
       model.floorId = selectedFloor.id;
-      setFormData(defaultModel); 
+      setFormData(defaultModel); // Clear form
-      onClearComplete();
+      onClearComplete(); // Notify parent that clearing is done
     }
   }, [clearTrigger, onClearComplete]);
 
@@ -111,8 +110,7 @@ const TaskModel = ({
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    // onSubmit( formData ); // Pass the updated data to the parent
+    onSubmit(formData); // Pass the updated data to the parent
-    console.log(formData)
   };
 
   return (

src/components/Project/WorkAreaModel.jsx

@@ -0,0 +1,230 @@
+import React, { useState, useEffect } from "react";
+
+const defaultModel = {
+  id: "0",
+  areaName: "",
+  floorId: "0",
+};
+
+const WorkAreaModel = ({
+  project,
+  onSubmit,
+  clearTrigger,
+  onClearComplete,
+}) => {
+  const [formData, setFormData] = useState(defaultModel);
+
+  const [selectedBuilding, setSelectedBuilding] = useState(null);
+  const [selectedFloor, setSelectedFloor] = useState(null);
+
+  //if (floor && floor.id) setFormData(floor);
+
+  useEffect(() => {
+    if (selectedBuilding) {
+      let building = project.buildings.find(
+        (b) => b.id === selectedBuilding.id
+      );
+      setSelectedBuilding(building);
+    }
+
+    if (selectedFloor) {
+      let floor = selectedBuilding.floors.find(
+        (b) => b.id === Number(selectedFloor.id)
+      );
+      setSelectedFloor(floor);
+    }
+  }, [project]);
+
+  useEffect(() => {
+    if (clearTrigger) {
+      let model = defaultModel;
+      model.floorId = selectedFloor.id;
+      setFormData(defaultModel); // Clear form
+      onClearComplete(); // Notify parent that clearing is done
+    }
+  }, [clearTrigger, onClearComplete]);
+
+  // Handle input change
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleWorkAreaChange = (e) => {
+    const { name, value } = e.target;
+    const workArea = selectedFloor.workAreas.find(
+      (b) => b.id === Number(value)
+    );
+    if (workArea) {
+      setFormData({
+        id: workArea.id,
+        floorId: workArea.floorId,
+        areaName: workArea.areaName,
+      });
+    } else
+      setFormData({
+        id: "0",
+        floorId: selectedFloor.id,
+        areaName: "",
+      });
+  };
+
+  const handleFloorChange = (e) => {
+    const { name, value } = e.target;
+    const floor = selectedBuilding.floors.find((b) => b.id === Number(value));
+    setSelectedFloor(floor);
+    if (floor) {
+      setFormData({
+        id: "0",
+        floorId: floor.id,
+        areaName: "",
+      });
+    } else {
+      setSelectedFloor(null);
+      setFormData({
+        id: "0",
+        floorId: "0",
+        areaName: "",
+      });
+    }
+  };
+  const handleBuildigChange = (e) => {
+    const { name, value } = e.target;
+    const building = project.buildings.find((b) => b.id === Number(value));
+    setSelectedBuilding(building);
+  };
+
+  // Handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    formData.projectId = project.id;
+
+    onSubmit(formData); // Pass the updated data to the parent
+  };
+
+  return (
+    <div className="modal-dialog modal-lg modal-simple modal-edit-user">
+      <div className="modal-content">
+        <div className="modal-body">
+          <div className="row">
+            <button
+              type="button"
+              className="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+            <div className="text-center mb-1">
+              <h5 className="mb-1">Manage Work Area</h5>
+            </div>
+            <form className="row g-2" onSubmit={handleSubmit}>
+              <div className="col-6 col-md-6">
+                <label className="form-label" htmlFor="name">
+                  Select Building
+                </label>
+                <select
+                  id="buildingId"
+                  name="buildingId"
+                  className="select2 form-select form-select-sm"
+                  aria-label="Default select example"
+                  onChange={handleBuildigChange}
+                  value={formData.buildingId}
+                >
+                  <option value="0">Select Building</option>
+                  {project.buildings.map((building) => (
+                    <option key={building.id} value={building.id}>
+                      {building.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {selectedBuilding && selectedBuilding.buildingId != "0" && (
+                <div className="col-6 col-md-6">
+                  <label className="form-label" htmlFor="floorId">
+                    Select Floor
+                  </label>
+                  <select
+                    id="floorId"
+                    name="floorId"
+                    className="select2 form-select form-select-sm"
+                    aria-label="Default select example"
+                    onChange={handleFloorChange}
+                    value={formData.floorId}
+                  >
+                    <option value="0">Select Floor</option>
+                    {selectedBuilding.floors.map((floor) => (
+                      <option key={floor.id} value={floor.id}>
+                        {floor.floorName}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+              {formData.floorId != "0" && (
+                <div className="col-12 col-md-12">
+                  <label className="form-label" htmlFor="floorId">
+                    Select Work Area
+                  </label>
+                  <select
+                    id="floorId"
+                    name="floorId"
+                    className="select2 form-select form-select-sm"
+                    aria-label="Default select example"
+                    onChange={handleWorkAreaChange}
+                    value={formData.floorId}
+                  >
+                    <option value="0">Create New Work Area</option>
+                    {selectedFloor.workAreas.map((workArea) => (
+                      <option key={workArea.id} value={workArea.id}>
+                        {workArea.areaName}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+              {formData.floorId != "0" && (
+                <div className="col-12 col-md-12">
+                  {" "}
+                  <label className="form-label" htmlFor="areaName">
+                    {formData.id != "0" ? "Modify " : "Enter "} Work Area Name
+                  </label>
+                  <div className="input-group">
+                    <input
+                      type="text"
+                      id="areaName"
+                      name="areaName"
+                      className="form-control form-control-sm me-2"
+                      placeholder="Work Area"
+                      onChange={handleChange}
+                      value={formData.areaName}
+                    />
+                  </div>
+                </div>
+              )}
+
+              <div className="col-12 text-center">
+                {formData.floorId != "0" && (
+                  <button type="submit" className="btn btn-primary me-3">
+                    {formData.id != "0" && formData.id != ""
+                      ? "Edit Work Area"
+                      : "Add Work Area"}
+                  </button>
+                )}
+                <button
+                  type="reset"
+                  className="btn btn-label-secondary"
+                  data-bs-dismiss="modal"
+                  aria-label="Close"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WorkAreaModel;

src/hooks/masterHook/useMaster.js

@@ -41,7 +41,6 @@ const useMaster = () => {
               break;
             case "Job Role":
               response = await MasterRespository.getJobRole();
-              response = response.data
                 break;
             case "Module":
               response = [{description: null,module:"Module 1",featurePermission: null,id: "08dd4761-363c-49ed-8851-3d2489a3e98d"},{description: null,module:"Module 2",featurePermission: null,id: "08dy9761-363c-49ed-8851-3d2489a3e98d"},{description: null,module:"Module 3",featurePermission: null,id: "08dy7761-263c-49ed-8851-3d2489a3e98d"}];

src/hooks/useMasterRole.js

@@ -16,9 +16,9 @@ export const useMasterRole =()=>{
         if (!features_cache) {
          MasterRespository.getRoles()
            .then((response) => {
-            setMasterRole(response.data);
+            setMasterRole(response);
      
-             cacheData("masterRole", response.data);
+             cacheData("masterRole", response);
              setLoading(false)
            })
            .catch((error) => {
@@ -55,9 +55,9 @@ export const useFeatures =()=> {
         if (!features_cache) {
          MasterRespository.getFeatures()
            .then((response) => {
-            setMasterFeatures(response.data);
+            setMasterFeatures(response);
      
-             cacheData("features", response.data);
+             cacheData("features", response);
              setLoading(false)
            })
            .catch((error) => {

src/hooks/useProfile.js

@@ -18,8 +18,8 @@ export const useProfile = () =>
     {
       setLoading( true )
       let response = await AuthRepository.profile();
-      setProfile( response.data )
+      setProfile( response )
-      cacheProfileData( response.data )
+      cacheProfileData( response )
       setLoading( false );
         
     } catch ( error )

src/hooks/useProjects.js

@@ -5,10 +5,9 @@ import {
   } from "../slices/apiDataManager"
 import ProjectRepository from "../repositories/ProjectRepository";
 
-
   
 export const useProjects =()=>{
-
+  
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
@@ -20,9 +19,9 @@ export const useProjects =()=>{
         setLoading(true)   
         ProjectRepository.getProjectList()
         .then((response) => {
-          setProjects(response.data);
+          setProjects(response);
          
-          cacheData("projectslist", response.data);
+          cacheData("projectslist", response);
           setLoading(false);
         })
         .catch((error) => {
@@ -37,8 +36,7 @@ export const useProjects =()=>{
   };
  
   useEffect(()=>{
-    fetchData()
+       fetchData()
-
    },[])
 
   return  { projects,loading,error,refetch:fetchData}
@@ -86,18 +84,18 @@ export const useEmployeesByProjectAllocated = ( selectedProject ) =>
 export const useProjectDetails =(projectId)=>{
   
   const [projects_Details, setProject_Details] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    setLoading(true)  
+    setLoading(true)
-    const project_cache = getCachedData("projectInfo");
+    const project_cache = getCachedData(`projectinfo-${projectId}`);
-    if (!project_cache || project_cache?.projectId !== projectId) {
+    if (!project_cache) {
       ProjectRepository.getProjectByprojectId(projectId)
         .then( ( response ) =>
         {
-          setProject_Details( response.data );
+          setProject_Details(response);
-          cacheData("projectInfo", {projectId,data: response.data} );
+          cacheData( `projectinfo-${ projectId }`, response );
           setLoading(false)
         })
         .catch((error) => {
@@ -106,17 +104,15 @@ export const useProjectDetails =(projectId)=>{
           setLoading(false)
         });
     } else {
-      setProject_Details( project_cache.data );
+      setProject_Details( project_cache );
+   
       setLoading(false)
     } 
   
-};
+};;
  
   useEffect(()=>{
-    if ( projectId )
+       fetchData()
-    {
-      fetchData()
-   }
    },[projectId])
 
   return  { projects_Details,loading,error,refetch:fetchData}

src/main.tsx

@@ -6,17 +6,14 @@ import App from './App.tsx'
 
 import { Provider } from 'react-redux';
 import { store } from './store/store';
-import { ModalProvider } from './ModalContext.jsx';
 
 
 
 createRoot(document.getElementById('root')!).render(
   // <StrictMode>
     // <MasterDataProvider>
-  <Provider store={ store }>
+<Provider store={store}>
-    <ModalProvider>
+    <App />
-     <App />
-    </ModalProvider>
     </Provider>
     // </MasterDataProvider>
 

src/pages/Activities/AttendancePage.jsx

@@ -91,11 +91,8 @@ const AttendancePage = () =>
   useEffect(()=>{
     setAttendances(attendance)
   },[attendance])
-  useEffect( () =>
+
-  {
+
-    dispatch(setProjectId(projects[0]?.id))
-  },[projects])
- 
   return (
     <>
     {isCreateModalOpen && modelConfig && (

src/pages/Activities/DailyTask.jsx

@@ -14,6 +14,18 @@ const DailyTask =()=>{
         <div className="card card-action mb-6">
           <div className="card-body">
             <div className="row">
+              {/* <div className="col-12 text-end mb-1">
+                <button
+                  type="button"
+                  className="link-button link-button-sm m-1"
+                  data-bs-toggle="modal"
+                  data-bs-target="#user-model"
+                 
+                >
+                  <i className="bx bx-plus-circle me-2"></i>
+                  Assign Employee
+                </button>
+              </div> */}
             </div>
             <div className="table-responsive text-nowrap">
               {/* {employees && employees.length > 0 ? ( */}

src/pages/Activities/TaskPlannng.jsx

@@ -25,12 +25,22 @@ const TaskPlannng = () => {
       if (!activities_cache) {
         ActivityeRepository.getActivities()
           .then((response) => {
-            setActivities(response.data);
+            setActivities(response);
-            cacheData("activitiesMaster", response.data);
+            cacheData("activitiesMaster", response);
           })
           .catch((error) => {
             setError("Failed to fetch data.");
           });
+        // api
+        //   .get("/api/task/activities")
+        //   .then((data) => {
+        //     setActivities(data);
+        //     dispatch(cacheApiResponse({ key: "activitiesMaster", data: data }));
+        //   })
+        //   .catch((error) => {
+        //     console.error(error);
+        //     setError("Failed to fetch data.");
+        //   });
       } else {
         setActivities(activities_cache);
       }
@@ -58,6 +68,21 @@ const TaskPlannng = () => {
       } else {
         setProjectDetails(project_cache);
       }
+
+      // api
+      //   .get(`/api/project/details/${projectId}`)
+      //   .then((data) => {
+      //     setProjectDetails(data);
+      //     setProject(data);
+      //     dispatch(
+      //       cacheApiResponse({ key: `projectinfo-${projectId}`, data: data })
+      //     );
+      //     setLoading(false);
+      //   })
+      //   .catch((error) => {
+      //     console.error(error);
+      //     setError("Failed to fetch data.");
+      //   });
     } catch (err) {
       console.log(err)
       setError("Failed to fetch data.");
@@ -96,7 +121,7 @@ const TaskPlannng = () => {
              <InfraPlanning 
                data={projectDetails}
                activityMaster={activities}
-               onDataChange={handleDataChange} 
+              onDataChange={handleDataChange} 
             /> 
       </div>
     </>

src/pages/authentication/ForgotPasswordPage.jsx

@@ -4,55 +4,45 @@ import { AuthWrapper } from "./AuthWrapper"
 import "./page-auth.css";
 import AuthRepository from "../../repositories/AuthRepository";
 import showToast from "../../services/toastService";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {z} from "zod";
 
 
-const forgotPassSceham = z.object( {
-  email: z.string().email(),
-} )
-
 const ForgotPasswordPage = () => {
-
+  const [ email, setEmail ] = useState( "" );
   const[loding,setLoading] = useState(false)
 
-  const {register,
+  const handleChange = (e) => {
-    handleSubmit,
+    setEmail(e.target.value);
-    formState: { errors },
+  };
-    reset,
-    getValues } = useForm( {
-    resolver: zodResolver( forgotPassSceham ),
-    defaultValues: {
-      email:""
-    }
-  })
 
-  const onSubmit = async (data) =>
+  const handleSubmit = async ( e ) =>
   {
+    setLoading(true)
+    e.preventDefault();
     try
     {
-      setLoading(true)
+     const response = await  AuthRepository.forgotPassword({email})
-      const response = await  AuthRepository.forgotPassword(data)
       if ( response.data && response.success )
+      {
       showToast( response.message, "success" )    
+      } else
+      {   
+        showToast( response.message, "warning" )
+      }
       setLoading( false )
-      setEmail( "" )
+      setEmail("")
-      console.log(response)
+    } catch ( error )
-    } catch ( err )
     {
-      
+      showToast( "User Not Found", "error" )
-      showToast( err.message, "error" )
       setLoading(false)
     }
-  }
+  };
   return (
     <AuthWrapper>
       <h4 className="mb-2">Forgot Password? 🔒</h4>
       <p className="mb-4">
         Enter your email and we'll send you instructions to reset your password
       </p>
-      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}>
+      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit}>
         <div className="mb-3">
           <label htmlFor="email" className="form-label">
             Email
@@ -62,18 +52,11 @@ const ForgotPasswordPage = () => {
             className="form-control"
             id="email"
             name="email"
-            {...register("email")}
+            value={email}
+            onChange={handleChange}
             placeholder="Enter your email"
             autoFocus
           />
-           {errors.email && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
-                        {errors.email.message}
-                      </div>
-                    )}
         </div>
         <button aria-label="Click me" className="btn btn-primary d-grid w-100">
           {loding ? "Please Wait...":"Send Reset Link"}

src/pages/authentication/LoginPage.jsx

@@ -5,40 +5,39 @@ import { useNavigate } from "react-router-dom";
 import "./page-auth.css";
 import AuthRepository from "../../repositories/AuthRepository";
 import showToast from "../../services/toastService";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {z} from "zod"
-
-const loginScheam = z.object( {
-  username: z.string().email(),
-  password: z.string().min( 1, {message: "Password required"} ),
-  rememberMe: z.boolean(),
-} )
 
 const LoginPage = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
 
-   const {register,
+  const [formData, setFormData] = useState({
-      handleSubmit,
+    password: "",
-      formState: { errors },
+    username: "",
-      reset,
+    rememberMe: false,
-      getValues } = useForm( {
+  });
-      resolver: zodResolver( loginScheam ),
-      
-    })
 
-  const onSubmit = async ( data ) =>
+  const handleChange = (e) => {
-  { 
+    const { name, value, type, checked } = e.target;
+
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: type === "checkbox" ? checked : value,
+    }));
+  };
+
+  const handleSubmit = async ( e ) =>
+  {
+    
+    e.preventDefault();
     setLoading(true);
 
     try {
-      
+      let data = {
-      let userCredential = {
+        username: formData.username,
-        username: data.username,
+        password: formData.password,
-        password:data.password
+      };
-      }
+
-      const response = await AuthRepository.login(userCredential);
+      const response = await AuthRepository.login(data);
       localStorage.setItem("jwtToken", response.data.token);
       localStorage.setItem( "refreshToken", response.data.refreshToken );
       setLoading(false);
@@ -46,9 +45,9 @@ const LoginPage = () => {
     } catch (err) {
       console.log("Unable to proceed. Please try again.");
       setLoading(false);
+
     }
   };
-
   return (
     <AuthWrapper>
       <h4 className="mb-2">Welcome to PMS!</h4>
@@ -56,7 +55,7 @@ const LoginPage = () => {
         Please sign-in to your account and start the adventure
       </p>
 
-      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}>
+      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit}>
         <div className="mb-3">
           <label htmlFor="username" className="form-label">
             Email or Username
@@ -65,19 +64,12 @@ const LoginPage = () => {
             type="text"
             className="form-control"
             id="username"
-            {...register("username")}
+            value={formData.name}
+            onChange={handleChange}
             name="username"
             placeholder="Enter your email or username"
             autoFocus
           />
-           {errors.username && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
-                        {errors.username.message}
-                      </div>
-                    )}
         </div>
         <div className="mb-3 form-password-toggle">
           <div className="d-flex justify-content-between">
@@ -96,7 +88,8 @@ const LoginPage = () => {
               type="password"
               autoComplete="true"
               id="password"
-              {...register("password")}
+              value={formData.password}
+              onChange={handleChange}
               className="form-control"
               name="password"
               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
@@ -104,14 +97,6 @@ const LoginPage = () => {
             />
             <span className="input-group-text cursor-pointer"></span>
           </div>
-          {errors.password && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
-                        {errors.password.message}
-                      </div>
-                    )}
         </div>
         <div className="mb-3">
           <div className="form-check">
@@ -120,7 +105,8 @@ const LoginPage = () => {
               type="checkbox"
               id="remember-me"
               name="rememberMe"
-              {...register("rememberMe")}
+              checked={formData.rememberMe}
+              onChange={handleChange}
             />
             <label className="form-check-label" htmlFor="remember-me">
               {" "}

src/pages/project/ProjectDetails.jsx

@@ -16,19 +16,18 @@ import ProjectRepository from "../../repositories/ProjectRepository";
 import { ActivityeRepository } from "../../repositories/MastersRepository";
 
 import "./ProjectDetails.css";
-import {useEmployeesByProjectAllocated, useProjectDetails} from "../../hooks/useProjects";
+import {useEmployeesByProjectAllocated} from "../../hooks/useProjects";
 
 
 const ProjectDetails = () => {
-  let {projectId} = useParams();
+  let { projectId } = useParams();
-  const {projects_Details,loading:projectLoading,error:ProjectError} = useProjectDetails(projectId)
  
   const [project, setProject] = useState(null);
   const [ projectDetails, setProjectDetails ] = useState( null );
   const [activities, setActivities] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [ error, setError ] = useState( "" );
+  const [error, setError] = useState("");
-  
+
   const fetchActivities = async () => {
   
       const activities_cache = getCachedData("activitiesMaster");
@@ -36,8 +35,8 @@ const ProjectDetails = () => {
       if (!activities_cache) {
         ActivityeRepository.getActivities()
           .then((response) => {
-            setActivities(response.data);
+            setActivities(response);
-            cacheData("activitiesMaster", response.data);
+            cacheData("activitiesMaster", response);
           })
           .catch((error) => {
             setError("Failed to fetch data.");
@@ -51,14 +50,14 @@ const ProjectDetails = () => {
 
   const fetchData = async () => {
     
-      const project_cache = getCachedData("projectInfo");
+      const project_cache = getCachedData(`projectinfo-${projectId}`);
-      if (!project_cache || project_cache?.projectId !== projectId) {
+      if (!project_cache) {
         ProjectRepository.getProjectByprojectId(projectId)
           .then( ( response ) =>
           {
-            setProjectDetails( response.data );
+            setProjectDetails(response);
-            setProject( response.data );
+            setProject(response);
-            cacheData("projectInfo", {projectId,data: response.data} );
+            cacheData( `projectinfo-${ projectId }`, response );
             setLoading(false)
           })
           .catch((error) => {
@@ -67,14 +66,13 @@ const ProjectDetails = () => {
             setLoading(false)
           });
       } else {
-        setProjectDetails( project_cache.data );
+        setProjectDetails( project_cache );
-        setProject( project_cache.data );
+        setProject( project_cache );
         setLoading(false)
       } 
     
   };
 
-
   const [activePill, setActivePill] = useState("profile");
 
  
@@ -88,7 +86,7 @@ const ProjectDetails = () => {
 
  
   const renderContent = () => {
-    if (projectLoading) return <Loader></Loader>;
+    if (loading) return <Loader></Loader>;
     switch (activePill) {
       case "profile": {
         return (
@@ -154,16 +152,13 @@ const ProjectDetails = () => {
   };
 
   useEffect(() => {
-    // fetchData();
+    fetchData();
-    setProject( projects_Details )
-    setProjectDetails(projects_Details)
     fetchActivities();
-  }, [projects_Details]);
+  }, []);
 
   return (
 
     <>
-      {}
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -174,8 +169,8 @@ const ProjectDetails = () => {
         ></Breadcrumb>
 
         <div className="row">
-          {projectLoading && <p>Loading....</p>}
+          {loading && <p>Loading....</p>}
-          {(!projectLoading && project) && <ProjectBanner project_data={project}  ></ProjectBanner>}
+          {!loading && <ProjectBanner project_data={project}  ></ProjectBanner>}
         </div>
       
         <div className="row">

src/pages/project/ProjectList.jsx

@@ -118,7 +118,11 @@ const ProjectList = () =>
             {" "}
             <button
               type="button"
-              className={`btn btn-sm btn-primary ${!HasManageProject && 'd-none' }`}
+              className={`btn btn-sm btn-primary ${
+                HasManageProject
+                  ? ""
+                  : "d-none"
+              }`}
               data-bs-toggle="modal"
               data-bs-target="#create-project-model"
               onClick={handleShow}

src/repositories/ProjectRepository.jsx

@@ -13,8 +13,7 @@ const ProjectRepository = {
   manageProject: (data) => api.post("/api/project", data),
   // updateProject: (data) => api.post("/api/project/update", data),
 
-  manageProjectAllocation: ( data ) => api.post( "/api/project/allocation", data ),
+  manageProjectAllocation: (data) => api.post("/api/project/allocation", data),
-  
   manageProjectInfra: (data) => api.post("/api/project/manage-infra", data),
   manageProjectTasks: (data) => api.post("/api/project/manage-infra", data),
 
@@ -22,8 +21,4 @@ const ProjectRepository = {
   deleteProject: (id) => api.delete(`/projects/${id}`),
 };
 
-export const TasksRepository = {
-  assignTask: ( data ) => api.post( "/api/task/assign", data ),
-  reportTak:(data)=>api.post("/api/task/report",data)
-}
 export default ProjectRepository;

src/slices/localVariablesSlice.jsx

@@ -5,7 +5,7 @@ const localVariablesSlice = createSlice({
   initialState: {
     selectedMaster:"Role",
     regularizationCount:0,
-    projectId:1,
+    projectId:5,
   
   },
   reducers: {

src/utils/axiosClient.jsx

@@ -54,8 +54,8 @@ axiosClient.interceptors.response.use(
         console.error("Request timed out.");
         showToast("The request took too long. Please try again later.", "error");
       } else if (error.response) {
-        showToast(error.response.data.message,"error")
+        console.error("Error response:", error.response.status, error.response.data);
-         
+
         if (error.response.status === 401 && !originalRequest._retry) {
           originalRequest._retry = true;
 
@@ -89,9 +89,7 @@ axiosClient.interceptors.response.use(
             redirectToLogin();
             return Promise.reject(err);
           }
-        } else
+        } else {
-        {
-         
           showToast(error.response.data?.message || "An error occurred. Please try again.", "error");
         }
       } else {

src/utils/constants.jsx

@@ -5,8 +5,6 @@ export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
 
 export const MANAGE_PROJECT = "172fc9b6-755b-4f62-ab26-55c34a330614"
 
-export const VIEW_PROJECTS = "6ea44136-987e-44ba-9e5d-1cf8f5837ebc"
-
 export const MANAGE_EMPLOYEES = "a97d366a-c2bb-448d-be93-402bd2324566"
 
 export const MANAGE_PROJECT_INFRA = "f2aee20a-b754-4537-8166-f9507b44585b"