public/assets/vendor/css/core.css

@@ -836,7 +836,7 @@ progress {
 }
 
 .row {
-  --bs-gutter-x: 3.625rem;
+  --bs-gutter-x: 0.500rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
@@ -2553,7 +2553,7 @@ progress {
 }
 
 .table-responsive {
-  /* overflow-x: auto; */
+  overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 

src/components/Activities/InfraPlanning.jsx

@@ -40,48 +40,24 @@ const InfraPlanning = () =>
 
    },[reloadedData])
 
-  // Show only "No Result Found" message if no data is present
-  if (!project_deatilsLoader && projects_Details?.buildings?.length === 0) {
-    return <div className="text-center mt-4 ">No Result Found</div>;
-  }
-
-  // Optionally show loading indicator
-  if (project_deatilsLoader) {
-    return <div className="text-center mt-4 ">Loading...</div>;
-  }
-
   return (
     <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
     <div className="card">
       <div className="card-body" style={{ padding: "0.5rem" }}>
-        <div className="align-items-center">
+          {ManageInfra ? (
-            {/* <div className="row ">
+            <div className="align-items-center">
-              <div className="col-sm-3 col-8 text-start mb-1">
-                   <select name="DataTables_Table_0_length"
-                                aria-controls="DataTables_Table_0"
-                                className="form-select form-select-sm"
-                                value={selectedProject}
-                                onChange={(e)=>dispatch(setProjectId(e.target.value))}
-                                aria-label=""
-                   >
-                                 {(project_listLoader || projects.length < 0) && <option value="Loading..." disabled>Loading...</option>  }
-                  
-                                 {!project_listLoader && projects?.map((project)=>(
-                                     <option key={project.id} value={project.id}>{project.name}</option>
-                                  ))} 
-                      </select>
-              </div>
-
-          </div> */}
             <div className="row ">
-              {project_deatilsLoader && ( <p>Loading...</p> )}
+              {isLoading && ( <p>Loading...</p> )}
-              {( !project_deatilsLoader && projects_Details?.buildings.length === 0 ) && ( <p>No Result Found</p> )}
+              {( !isLoading && projectInfra?.length === 0 ) && ( <p>No Result Found</p> )}
-              
+              {(!isLoading && projectInfra?.length > 0) && (<InfraTable buildings={projectInfra} projectId={selectedProject}/>)}
-
-              
-              {(!project_deatilsLoader && projects_Details?.buildings?.length > 0) && (<InfraTable buildings={projects_Details?.buildings} projectId={projects_Details.id}/>)}
           </div>
         </div>
+          ) : (
+              <div className="text-center">
+                <i className="fa-solid fa-triangle-exclamation fs-5"></i>
+                <p>Access Denied: You don't have permission to perform this action. !</p>
+              </div>
+        )}
       </div>
     </div>
   </div>

src/components/Activities/ReportTask.jsx

@@ -62,7 +62,12 @@ export const ReportTask = ({ report, closeModal }) => {
       checkList: [],
     };
 
-    reportTask({ reportData, workAreaId: report?.workItem?.workArea?.id });
+    reportTask({
+      reportData,
+      workAreaId: report?.workItem?.workArea?.id,
+      buildingId: report?.workItem?.workArea?.floor?.building.id,
+      floorId: report?.workItem?.workArea?.floor?.id,
+    });
   };
   const handleClose = () => {
     closeModal();

src/components/Activities/SubTask.jsx

@@ -9,7 +9,7 @@ import {
 import showToast from "../../services/toastService";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import { useTaskById } from "../../hooks/useTasks";
-import {useManageTask} from "../../hooks/useProjects";
+import { useManageTask } from "../../hooks/useProjects";
 
 const subTaskSchema = z.object({
   activityId: z.string().min(1, "Activity is required"),
@@ -37,14 +37,13 @@ const SubTask = ({ activity, onClose }) => {
   });
   const selectedActivityId = watch("activityId");
   const selectedActivity = activities?.find((a) => a.id === selectedActivityId);
-  const {mutate:createSubTask,isPending } = useManageTask( {
+  const { mutate: createSubTask, isPending } = useManageTask({
-    onSuccessCallback: () =>
+    onSuccessCallback: () => {
-    {
+      showToast("Sub Task Created Successfully", "success");
-      showToast("Sub Task Created Successfully","success")
       reset();
       onClose();
-    }
+    },
-  } )
+  });
 
   useEffect(() => {
     setCategoryData(categories);
@@ -73,7 +72,7 @@ const SubTask = ({ activity, onClose }) => {
   };
 
   const onSubmitForm = async (formData) => {
-    let payload = {
+    let data = {
       workAreaID: Task.workItem.workAreaId,
       workCategoryId: formData.workCategoryId,
       activityID: formData.activityId,
@@ -82,8 +81,19 @@ const SubTask = ({ activity, onClose }) => {
       parentTaskId: activity?.id,
       comment: formData.comment,
     };
-  
+
-    createSubTask([payload])
+    const payload = [data];
+    let buildingId = activity.workItem.workArea.floor.building.id;
+    let floorId = activity.workItem.workArea.floor.id;
+    let workAreaId = activity.workItem.workArea.id;
+    createSubTask({
+      payload: payload,
+      buildingId: buildingId,
+      floorId: floorId,
+      workAreaId: workAreaId,
+      PreviousPlannedWork:0,
+      previousCompletedWork:0
+    });
   };
   return (
     <div className="container-xxl my-1">
@@ -147,15 +157,15 @@ const SubTask = ({ activity, onClose }) => {
             disabled
           >
             <option value="">
-      {loading ? "Loading..." : "-- Select Activity --"}
+              {loading ? "Loading..." : "-- Select Activity --"}
-    </option>
+            </option>
 
-    {!loading &&
+            {!loading &&
-      activities?.map((activity) => (
+              activities?.map((activity) => (
-        <option key={activity.id} value={activity.id}>
+                <option key={activity.id} value={activity.id}>
-          {activity.activityName}
+                  {activity.activityName}
-        </option>
+                </option>
-      ))}
+              ))}
           </select>
           {errors.activityId && (
             <div className="danger-text">{errors.activityId.message}</div>

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -116,7 +116,17 @@ useEffect(() => {
       floorId: floor?.id,
       workAreaId: workArea?.id,
     };
-   UpdateTask([payload])
+    let plannedTask =
+      workItem?.workItem?.plannedWork || workItem?.plannedWork || 0;
+    let completedTask = workItem?.workItem?.completedWork || workItem?.completedWork || 0
+    UpdateTask({
+      payload: [payload],
+      PreviousPlannedWork: plannedTask,
+      buildingId: building?.id,
+      floorId: floor?.id,
+      workAreaId: workArea?.id,
+      previousCompletedWork:completedTask
+    });
  }
   return (
     <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>

src/components/Project/Infrastructure/TaskModel.jsx

@@ -69,10 +69,9 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const selectedCategory = categoryData?.find((c) => c.id === watchCategoryId);
 
   const { mutate: CreateTask, isPending } = useManageTask({
-    onSuccessCallback: ( response ) =>
+    onSuccessCallback: (response) => {
-    {
+      showToast(response?.message, "success");
-      showToast( response?.message, "success" )
+      onClose?.();
-      onClose?.()
     },
   });
   useEffect(() => {
@@ -96,8 +95,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   }, [categories]);
 
   const onSubmitForm = async (data) => {
-    const payload = [data];
+       const payload = [data];
-    CreateTask(payload);
+      CreateTask({payload:payload,buildingId: data.buildingID,
+      floorId: data.floorId,
+      workAreaId: data.workAreaId, PreviousPlannedWork:0,previousCompletedWork:0});
   };
 
   return (

src/components/Project/Infrastructure/WorkItem.jsx

@@ -10,7 +10,10 @@ import {
 } from "../../../utils/constants";
 import ConfirmModal from "../../common/ConfirmModal";
 import ProjectRepository from "../../../repositories/ProjectRepository";
-import { useDeleteProjectTask, useProjectDetails } from "../../../hooks/useProjects";
+import {
+  useDeleteProjectTask,
+  useProjectDetails,
+} from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import {
   cacheData,
@@ -19,7 +22,7 @@ import {
 } from "../../../slices/apiDataManager";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import GlobalModel from "../../common/GlobalModel";
-import {useDeleteMasterItem} from "../../../hooks/masterHook/useMaster";
+import { useDeleteMasterItem } from "../../../hooks/masterHook/useMaster";
 
 const WorkItem = ({
   workItem,
@@ -40,19 +43,18 @@ const WorkItem = ({
   const [loadingDelete, setLoadingDelete] = useState(false);
   const project = getCachedData("projectInfo");
 
-
   const openModal = () => setIsModalOpen(true);
-  const closeModal = () => setIsModalOpen( false );
+  const closeModal = () => setIsModalOpen(false);
-  
+
-   const showModalDelete = () => setShowModal2(true);
+  const showModalDelete = () => setShowModal2(true);
   const closeModalDelete = () => setShowModal2(false);
   const getProgress = (planned, completed) => {
     return (completed * 100) / planned + "%";
   };
-  
+
-    const {mutate:DeleteTask,isPending } = useDeleteProjectTask(() => {
+  const { mutate: DeleteTask, isPending } = useDeleteProjectTask(() => {
-     closeModalDelete?.();
+    closeModalDelete?.();
-    });
+  });
 
   const handleAssignTask = () => {
     setItemName("");
@@ -61,15 +63,15 @@ const WorkItem = ({
     setNewWorkItem(workItem);
   }, [workItem]);
 
-  const refreshWorkItem = (plannedTask) =>{
+  const refreshWorkItem = (plannedTask) => {
     if (workItem) {
-    const updated = {
+      const updated = {
-      ...workItem,
+        ...workItem,
-      todaysAssigned: (workItem.todaysAssigned || 0) + plannedTask,
+        todaysAssigned: (workItem.todaysAssigned || 0) + plannedTask,
-    };
+      };
-    setNewWorkItem(updated);
+      setNewWorkItem(updated);
-  }
+    }
-  }
+  };
   let assigndata = {
     building: forBuilding,
     floor: forFloor,
@@ -85,15 +87,17 @@ const WorkItem = ({
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
 
-
-
-
-
-
   const handleSubmit = async () => {
     let WorkItemId = workItem.workItemId || workItem.id;
-    DeleteTask({workItemId:WorkItemId,workAreaId:forWorkArea?.id})
+    debugger
-    
+    DeleteTask({
+      workItemId: WorkItemId,
+      workAreaId: forWorkArea?.id,
+      completedTask: workItem?.completedWork,
+      plannedTask: workItem?.plannedWork,
+      buildingId: forBuilding?.id,
+      floorId: forFloor?.id,
+    });
   };
 
   const PlannedWork =
@@ -104,18 +108,26 @@ const WorkItem = ({
     <>
       {isModalOpen && (
         <GlobalModel isOpen={isModalOpen} size="lg" closeModal={closeModal}>
-           <AssignTask assignData={assigndata} onClose={closeModal} setAssigned={refreshWorkItem} />
+          <AssignTask
+            assignData={assigndata}
+            onClose={closeModal}
+            setAssigned={refreshWorkItem}
+          />
         </GlobalModel>
       )}
 
       {showModal && (
-       <GlobalModel isOpen={showModal} size="lg" closeModal={()=>setShowModal(false)}>
+        <GlobalModel
+          isOpen={showModal}
+          size="lg"
+          closeModal={() => setShowModal(false)}
+        >
           <EditActivityModal
             workItem={workItem}
             workArea={forWorkArea}
             building={forBuilding}
             floor={forFloor}
-            onClose={()=>setShowModal(false)}
+            onClose={() => setShowModal(false)}
           />
         </GlobalModel>
       )}
@@ -167,7 +179,6 @@ const WorkItem = ({
             : "NA"}
         </td>
 
-        
         <td className="text-center table-cell-small d-none d-md-table-cell">
           <span className="fw-light">
             {hasWorkItem
@@ -195,9 +206,7 @@ const WorkItem = ({
         <td className="text-center d-none d-md-table-cell">
           {hasWorkItem
             ? `${
-                NewWorkItem?.todaysAssigned ??
+                NewWorkItem?.todaysAssigned ?? workItem?.todaysAssigned ?? "0"
-                workItem?.todaysAssigned ??
-                "0"
               }`
             : "NA"}
         </td>
@@ -251,7 +260,7 @@ const WorkItem = ({
                   <i
                     className="bx bxs-edit text-secondary cursor-pointer"
                     title="Edit"
-                    onClick={()=>setShowModal(true)}
+                    onClick={() => setShowModal(true)}
                     role="button"
                   ></i>
                   <i
@@ -293,7 +302,7 @@ const WorkItem = ({
                     <li>
                       <a
                         className="dropdown-item d-flex align-items-center"
-                        onClick={()=>setShowModal(true) }
+                        onClick={() => setShowModal(true)}
                       >
                         <i className="bx bxs-edit text-secondary me-2"></i> Edit
                       </a>

src/components/Project/ProjectCard.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import moment from "moment";
-import { formatNumber, getDateDifferenceInDays } from "../../utils/dateUtils";
+import { formatNumber, getCompletionPercentage, getDateDifferenceInDays } from "../../utils/dateUtils";
 import { useNavigate } from "react-router-dom";
 import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
 import ManageProjectInfo from "./ManageProjectInfo";
@@ -87,17 +87,18 @@ const ProjectCard = ({ projectData, recall }) => {
         <div className={`card cursor-pointer  ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
           <div className="card-header pb-4">
             <div className="d-flex align-items-start">
-              <div className="d-flex align-items-center">
+              <div className="d-flex align-items-center ">
                 <div className="avatar me-4">
                   <i
                     className="rounded-circle bx bx-building-house"
                     style={{ fontSize: "xx-large" }}
                   ></i>
                 </div>
-                <div className="me-2">
+                <div className="me-2 text-wrap ">
                   <h5
-                    className="mb-0 stretched-link text-heading text-start"
+                 className="mb-0 stretched-link text-heading text-start text-truncate"
-                    onClick={handleViewProject}
+  onClick={handleViewProject}
+  style={{ maxWidth: "180px", display: "inline-block" }}
                   >
                     {projectInfo.shortName
                       ? projectInfo.shortName
@@ -227,12 +228,7 @@ const ProjectCard = ({ projectData, recall }) => {
                 Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
               </small>
               <small className="text-body">
-                {Math.floor(
+                {getCompletionPercentage(projectInfo.completedWork, projectInfo.plannedWork)}
-                  getProgressInNumber(
-                    projectInfo.plannedWork,
-                    projectInfo.completedWork
-                  )
-                ) || 0}{" "}
                 % Completed
               </small>
             </div>

src/components/Project/ProjectOverview.jsx

@@ -3,7 +3,7 @@ import {
   useEmployeesByProjectAllocated,
   useProjects,
 } from "../../hooks/useProjects";
-import { formatNumber } from "../../utils/dateUtils";
+import { formatNumber, getCompletionPercentage } from "../../utils/dateUtils";
 import ProgressBar from "../common/ProgressBar";
 
 const ProjectOverview = ({ project }) => {
@@ -49,9 +49,8 @@ const ProjectOverview = ({ project }) => {
                       )
                     ) || 0}{" "} */}
                     {
-                      (formatNumber(project_detail.plannedWork),
+                      getCompletionPercentage( formatNumber(project_detail.completedWork),formatNumber(project_detail.plannedWork))
-                      "/",
+                   
-                      formatNumber(project_detail.completedWork))
                     }
                     % Completed
                   </small>

src/hooks/useProjects.js

@@ -6,7 +6,12 @@ import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
 import EmployeeList from "../components/Directory/EmployeeList";
 import eventBus from "../services/eventBus";
-import {Mutation, useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import {
+  Mutation,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import showToast from "../services/toastService";
 
 // export const useProjects = () => {
@@ -211,7 +216,7 @@ export const useProjects = () => {
     error,
     refetch,
   } = useQuery({
-    queryKey: ['ProjectsList'],
+    queryKey: ["ProjectsList"],
     queryFn: async () => {
       const response = await ProjectRepository.getProjectList();
       return response.data;
@@ -227,97 +232,112 @@ export const useProjects = () => {
   };
 };
 
-export const useEmployeesByProjectAllocated = (selectedProject) =>
+export const useEmployeesByProjectAllocated = (selectedProject) => {
-{
+  const {
-  const {data = [], isLoading, refetch, error} = useQuery( {
+    data = [],
-    queryKey: ["empListByProjectAllocated", selectedProject ],
+    isLoading,
-    queryFn: async () =>
+    refetch,
-    {
+    error,
-      const res = await ProjectRepository.getProjectAllocation( selectedProject );
+  } = useQuery({
-      return res.data || res
+    queryKey: ["empListByProjectAllocated", selectedProject],
+    queryFn: async () => {
+      const res = await ProjectRepository.getProjectAllocation(selectedProject);
+      return res.data || res;
     },
     enabled: !!selectedProject,
-    onError: ( error ) =>
+    onError: (error) => {
-    {
+      showToast(
-       showToast(error.message || "Error while Fetching project Allocated Employees", "error");
+        error.message || "Error while Fetching project Allocated Employees",
-    }
+        "error"
-  } )
+      );
-  
+    },
+  });
+
   return {
     projectEmployees: data,
-    loading:isLoading,
+    loading: isLoading,
     error,
-  refetch
+    refetch,
-  }
+  };
-}
+};
 
-export const useProjectDetails = ( projectId,isAuto = true ) =>
+export const useProjectDetails = (projectId, isAuto = true) => {
-{
+  const {
-  const {data: projects_Details, isLoading, error, refetch} = useQuery( {
+    data: projects_Details,
-    queryKey: [ "projectInfo", projectId ],
+    isLoading,
-    queryFn: async () =>
+    error,
-    {
+    refetch,
-      const res = await ProjectRepository.getProjectByprojectId( projectId );
+  } = useQuery({
+    queryKey: ["projectInfo", projectId],
+    queryFn: async () => {
+      const res = await ProjectRepository.getProjectByprojectId(projectId);
       return res.data || res;
     },
     enabled: !!projectId && isAuto,
-    onError: ( error ) =>
+    onError: (error) => {
-    {
+      showToast(
-       showToast(error.message || "Error while Fetching project Details", "error");
+        error.message || "Error while Fetching project Details",
-    }
+        "error"
-  } )
+      );
- return { projects_Details, loading:isLoading, error, refetch };
+    },
-}
+  });
+  return { projects_Details, loading: isLoading, error, refetch };
+};
 
-export const useProjectsByEmployee = (employeeId) =>
+export const useProjectsByEmployee = (employeeId) => {
-{
+  const {
-  const { data:projectNameList =[],isLoading,error,refetch} = useQuery( {
+    data: projectNameList = [],
-    queryKey: [ "ProjectsByEmployee", employeeId ],
+    isLoading,
-    queryFn: async () =>
+    error,
-    {
+    refetch,
-      const res = await ProjectRepository.getProjectsByEmployee( employeeId );
+  } = useQuery({
+    queryKey: ["ProjectsByEmployee", employeeId],
+    queryFn: async () => {
+      const res = await ProjectRepository.getProjectsByEmployee(employeeId);
       return res.data || res;
     },
     enabled: !!employeeId,
-    onError: ( error ) =>
+    onError: (error) => {
-    {
+      showToast(
-       showToast(error.message || "Error while Fetching project Employee", "error");
+        error.message || "Error while Fetching project Employee",
-    }
+        "error"
-   })
+      );
-  return {projectList, loading:isLoading,error,refetch }
+    },
-}
+  });
+  return { projectList, loading: isLoading, error, refetch };
+};
 
-export const useProjectName = () =>
+export const useProjectName = () => {
-{
+  const {
-  const {data = [],isLoading,error,refetch} = useQuery( {
+    data = [],
-    queryKey: [ "basicProjectNameList" ],
+    isLoading,
-    queryFn: async () =>
+    error,
-    {
+    refetch,
+  } = useQuery({
+    queryKey: ["basicProjectNameList"],
+    queryFn: async () => {
       const res = await ProjectRepository.projectNameList();
       return res.data || res;
     },
-    onError: ( error ) =>
+    onError: (error) => {
-    {
+      showToast(error.message || "Error while Fetching project Name", "error");
-       showToast(error.message || "Error while Fetching project Name", "error");
+    },
-    }
+  });
-  } )
+  return { projectNames: data, loading: isLoading, Error: error, refetch };
-  return {projectNames:data,loading:isLoading,Error:error,refetch}
+};
-}
 
-
-  
 export const useProjectInfra = (projectId) => {
   const {
     data: projectInfra,
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["ProjectInfra", projectId], 
+    queryKey: ["ProjectInfra", projectId],
     queryFn: async () => {
       const res = await ProjectRepository.getProjectInfraByproject(projectId);
       return res.data;
     },
-    enabled: !!projectId , 
+    enabled: !!projectId,
     onError: (error) => {
       showToast(error.message || "Error while fetching project infra", "error");
     },
@@ -326,30 +346,27 @@ export const useProjectInfra = (projectId) => {
   return { projectInfra, isLoading, error };
 };
 
-
+export const useProjectTasks = (workAreaId, IsExpandedArea = false) => {
-export const useProjectTasks = (workAreaId,IsExpandedArea=false) =>
+  const {
-{
+    data: ProjectTaskList,
-  const { data:ProjectTaskList,isLoading,error } = useQuery( {
+    isLoading,
-    queryKey: [ "WorkItems",workAreaId ],
+    error,
-    queryFn: async () =>
+  } = useQuery({
-    {
+    queryKey: ["WorkItems", workAreaId],
+    queryFn: async () => {
       const res = await ProjectRepository.getProjectTasksByWorkArea(workAreaId);
       return res.data;
     },
     enabled: !!workAreaId && !!IsExpandedArea,
-    onError: ( error ) =>
+    onError: (error) => {
-    {
+      showToast(error.message || "Error while Fetching project Tasks", "error");
-       showToast(error.message || "Error while Fetching project Tasks", "error");
+    },
-    }
+  });
-  } )
+  return { ProjectTaskList, isLoading, error };
-  return {ProjectTaskList,isLoading,error}
+};
-}
-
 
 // -- -------------Mutation-------------------------------
 
-
-
 export const useCreateProject = ({ onSuccessCallback }) => {
   const queryClient = useQueryClient();
 
@@ -360,8 +377,8 @@ export const useCreateProject = ({ onSuccessCallback }) => {
     },
     onSuccess: (data) => {
       //  Invalidate the cache
-      queryClient.invalidateQueries( {queryKey: [ 'ProjectsList' ]} );
+      queryClient.invalidateQueries({ queryKey: ["ProjectsList"] });
-      queryClient.invalidateQueries({queryKey:['basicProjectNameList']});
+      queryClient.invalidateQueries({ queryKey: ["basicProjectNameList"] });
 
       //  Emit event for consumers (like useProjects or others)
       eventBus.emit("project", {
@@ -381,27 +398,19 @@ export const useCreateProject = ({ onSuccessCallback }) => {
   });
 };
 
-
 export const useUpdateProject = ({ onSuccessCallback }) => {
   const queryClient = useQueryClient();
-    const {
+  const { mutate, isPending, isSuccess, isError } = useMutation({
-    mutate,
+    mutationFn: async ({ projectId, updatedData }) => {
-    isPending,
-    isSuccess,
-    isError,
-  } = useMutation({
-    mutationFn: async ( {projectId, updatedData} ) =>
-    {
       return await ProjectRepository.updateProject(projectId, updatedData);
     },
 
-    onSuccess: ( data, variables ) =>
+    onSuccess: (data, variables) => {
-    {
       const { projectId } = variables;
-   
+
-      queryClient.invalidateQueries({queryKey:["ProjectsList"]});
+      queryClient.invalidateQueries({ queryKey: ["ProjectsList"] });
-      queryClient.invalidateQueries( {queryKey: [ "projectInfo", projectId ]} );
+      queryClient.invalidateQueries({ queryKey: ["projectInfo", projectId] });
-      queryClient.invalidateQueries({queryKey:['basicProjectNameList']});
+      queryClient.invalidateQueries({ queryKey: ["basicProjectNameList"] });
 
       eventBus.emit("project", {
         keyword: "Update_Project",
@@ -415,9 +424,8 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
       }
     },
 
-    onError: ( error ) =>
+    onError: (error) => {
-    {
+      console.log(error);
-      console.log(error)
       showToast(error?.message || "Error while updating project", "error");
     },
   });
@@ -430,20 +438,16 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
   };
 };
 
-
+export const useManageProjectInfra = ({ onSuccessCallback }) => {
-export const useManageProjectInfra = ( {onSuccessCallback} ) =>
-{
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async ( {infraObject, projectId} ) =>
+    mutationFn: async ({ infraObject, projectId }) => {
-    {
       return await ProjectRepository.manageProjectInfra(infraObject);
     },
-    onSuccess: ( data, variables ) =>
+    onSuccess: (data, variables) => {
-    {
+      const { projectId } = variables;
-      const { projectId } = variables;      
+      queryClient.invalidateQueries({ queryKey: ["ProjectInfra", projectId] });
-      queryClient.invalidateQueries({queryKey:["ProjectInfra", projectId]});
+      if (onSuccessCallback) onSuccessCallback(data, variables);
-       if (onSuccessCallback) onSuccessCallback(data,variables);
     },
     onError: (error) => {
       showToast(error.message || "Failed to update Project Infra", "error");
@@ -451,39 +455,36 @@ export const useManageProjectInfra = ( {onSuccessCallback} ) =>
   });
 };
 
-
 export const useManageProjectAllocation = ({
   onSuccessCallback,
   onErrorCallback,
 }) => {
   const queryClient = useQueryClient();
 
-  const {
+  const { mutate, isPending, isSuccess, isError } = useMutation({
-    mutate,
+    mutationFn: async ({ items }) => {
-    isPending,
-    isSuccess,
-    isError,
-  } = useMutation({
-    mutationFn: async ( {items} ) =>
-    {
       const response = await ProjectRepository.manageProjectAllocation(items);
       return response.data;
     },
     onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({queryKey:['empListByProjectAllocated']});
+      queryClient.invalidateQueries({
-       queryClient.removeQueries({queryKey:["projectEmployees"]})
+        queryKey: ["empListByProjectAllocated"],
+      });
+      queryClient.removeQueries({ queryKey: ["projectEmployees"] });
       if (variables?.added) {
-        showToast('Employee Assigned Successfully', 'success');
+        showToast("Employee Assigned Successfully", "success");
       } else {
-        showToast('Removed Employee Successfully', 'success');
+        showToast("Removed Employee Successfully", "success");
       }
 
       if (onSuccessCallback) onSuccessCallback(data, context);
     },
     onError: (error) => {
       const message =
-        error?.response?.data?.message || error.message || 'Error occurred during API call';
+        error?.response?.data?.message ||
-      showToast(message, 'error');
+        error.message ||
+        "Error occurred during API call";
+      showToast(message, "error");
       if (onErrorCallback) onErrorCallback(error);
     },
   });
@@ -496,48 +497,199 @@ export const useManageProjectAllocation = ({
   };
 };
 
-export const useManageTask = ({onSuccessCallback}) =>
+export const useManageTask = ({ onSuccessCallback }) => {
-{
   const queryClient = useQueryClient();
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
+  return useMutation({
+    mutationFn: async ({
+      payload,
+      PreviousPlannedWork,
+      previousCompletedWork,
+      buildingId,
+      floorId,
+      workAreaId,
+    }) => await ProjectRepository.manageProjectTasks(payload),
+    onSuccess: (data, variables) => {
+      const {
+        workAreaId,
+        buildingId,
+        floorId,
+        PreviousPlannedWork,
+        previousCompletedWork,
+      } = variables;
+      queryClient.invalidateQueries({ queryKey: ["WorkItems"] });
+      const getPlannedDelta = (previous, current) => current - previous;
+      queryClient.setQueryData(["ProjectInfra", selectedProject], (oldData) => {
+        if (!oldData) return oldData;
+        const { workAreaId, floorId, buildingId } = variables;
+        const updatedData = JSON.parse(JSON.stringify(oldData));
+        return updatedData.map((building) => {
+          if (building.id !== buildingId) return building;
+          return {
+            ...building,
+            floors: building.floors.map((floor) => {
+              if (floor.id !== floorId) return floor;
 
-  return useMutation( {
+              return {
-    mutationFn: async ( payload ) => await ProjectRepository.manageProjectTasks( payload ),
+                ...floor,
-    onSuccess: ( data, variables ) =>
+                workAreas: floor.workAreas.map((area) => {
-    {
+                  if (area.id !== workAreaId) return area;
-      queryClient.invalidateQueries({ queryKey: ["WorkItems"] })
+
+                  const previousPlanned = PreviousPlannedWork ?? 0;
+                  const currentPlanned =
+                    data?.data[0]?.workItem.plannedWork ?? 0;
+
+                  const plannedWorkDelta = getPlannedDelta(
+                    previousPlanned,
+                    currentPlanned
+                  );
+                  const updatedPlannedWork =
+                    (area.plannedWork ?? 0) + plannedWorkDelta;
+                  const previousCompleted = previousCompletedWork;
+
+                  const currentCompleted =
+                    data?.data[0]?.workItem.completedWork ?? 0;
+                  const completedWorkDelta = getPlannedDelta(
+                    previousCompleted,
+                    currentCompleted
+                  );
+                  const updatedCompletedWork =
+                    (area.completedWork ?? 0) + completedWorkDelta;
+                  return {
+                    ...area,
+                    plannedWork: updatedPlannedWork,
+                    completedWork: updatedCompletedWork,
+                  };
+                }),
+              };
+            }),
+          };
+        });
+      });
+
+      queryClient.setQueryData(["ProjectsList"], (projects) => {
+        if (!projects) return projects;
+
+        return projects.map((project) => {
+          if (project.id !== selectedProject) return project;
+
+          const previousPlanned = PreviousPlannedWork ?? 0;
+          const currentPlanned = data?.data[0]?.workItem.plannedWork ?? 0;
+
+          const plannedWorkDelta = getPlannedDelta(
+            previousPlanned,
+            currentPlanned
+          );
+          const updatedPlannedWork =
+            (project.plannedWork ?? 0) + plannedWorkDelta;
+          const previousCompleted = previousCompletedWork;
+          const currentCompleted = data?.data[0]?.workItem.completedWork ?? 0;
+          const completedWorkDelta = getPlannedDelta(
+            previousCompleted,
+            currentCompleted
+          );
+          const updatedCompletedWork =
+            (project.completedWork ?? 0) + completedWorkDelta;
+          return {
+            ...project,
+            plannedWork: updatedPlannedWork,
+            completedWork: updatedCompletedWork,
+          };
+        });
+      });
       if (onSuccessCallback) onSuccessCallback(data);
     },
-    onError: (error) =>
-    {
-       const message =
-        error?.response?.data?.message || error.message || 'Error occurred during API call';
-       showToast(message, 'error');
-    }
-   
-  })
-}
-
-export const useDeleteProjectTask = (onSuccessCallback) => {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ( {workItemId, workAreaId} ) =>
-    {
-      return await ProjectRepository.deleteProjectTask(workItemId);
-    },
-    onSuccess: ( _, variables ) =>
-    {
-      showToast("Task deleted successfully", "success");
-      queryClient.invalidateQueries({queryKey:[ "WorkItems",variables.workAreaId]});
-      if (onSuccessCallback) onSuccessCallback();
-    },
     onError: (error) => {
-      showToast(
+      const message =
-        error?.response?.data?.message || error.message || "Failed to delete task",
+        error?.response?.data?.message ||
-        "error"
+        error.message ||
-      );
+        "Error occurred during API call";
-       if (onSuccessCallback) onSuccessCallback();
+      showToast(message, "error");
     },
   });
 };
 
+export const useDeleteProjectTask = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
+  return useMutation({
+    mutationFn: async ({
+      workItemId,
+      workAreaId,
+      completedTask,
+      plannedTask,
+    }) => {
+      return await ProjectRepository.deleteProjectTask(workItemId);
+    },
+    onSuccess: (_, variables) => {
+      const { completedTask, plannedTask, workAreaId, buildingId, floorId } =
+        variables;
+
+      queryClient.invalidateQueries({
+        queryKey: ["WorkItems", variables.workAreaId],
+      });
+
+      queryClient.setQueryData(["ProjectInfra", selectedProject], (oldData) => {
+        if (!oldData) return oldData;
+
+        const { workAreaId, floorId, buildingId, plannedTask, completedTask } =
+          variables;
+
+        const updatedData = JSON.parse(JSON.stringify(oldData));
+
+        return updatedData.map((building) => {
+          if (building.id !== buildingId) return building;
+
+          return {
+            ...building,
+            floors: building.floors.map((floor) => {
+              if (floor.id !== floorId) return floor;
+
+              return {
+                ...floor,
+                workAreas: floor.workAreas.map((area) => {
+                  if (area.id !== workAreaId) return area;
+
+                  return {
+                    ...area,
+                    plannedWork: (area.plannedWork ?? 0) - plannedTask,
+                    completedWork: (area.completedWork ?? 0) - completedTask,
+                  };
+                }),
+              };
+            }),
+          };
+        });
+      });
+
+      queryClient.setQueryData(["ProjectsList"], (projects) => {
+        if (!projects) return projects;
+
+        return projects.map((project) => {
+          if (project.id !== selectedProject) return project;
+
+          return {
+            ...project,
+            plannedWork: (project.plannedWork ?? 0) - plannedTask,
+            completedWork: (project.completedWork ?? 0) - completedTask,
+          };
+        });
+      });
+      showToast("Task deleted successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to delete task",
+        "error"
+      );
+      if (onSuccessCallback) onSuccessCallback();
+    },
+  });
+};

src/hooks/useTasks.js

@@ -1,11 +1,10 @@
 import { useEffect, useState } from "react";
 import { TasksRepository } from "../repositories/TaskRepository";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
-import {MasterRespository} from "../repositories/MastersRepository";
+import { MasterRespository } from "../repositories/MastersRepository";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import showToast from "../services/toastService";
-import {useSelector} from "react-redux";
+import { useSelector } from "react-redux";
-
 
 // ---------Query---------------------------------
 
@@ -28,7 +27,6 @@ export const useTaskList = (projectId, dateFrom, toDate) => {
       return response.data;
     },
     enabled,
- 
   });
 
   return { TaskList, loading, error, refetch };
@@ -46,7 +44,7 @@ export const useTaskById = (TaskId) => {
       const res = await TasksRepository.getTaskById(TaskId);
       return res.data;
     },
-    enabled: !!TaskId, 
+    enabled: !!TaskId,
   });
 
   return { Task, loading, error, refetch };
@@ -75,47 +73,80 @@ export const useAuditStatus = () => {
       const res = await MasterRespository.getAuditStatus();
       return res.data;
     },
-
   });
 
   return { status, loading, error, refetch };
 };
 
-
 // -----------------------Mutation------------------------
-const toDate = new Date().toISOString().split('T')[0];
+const toDate = new Date().toISOString().split("T")[0];
-const dateFrom = new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+const dateFrom = new Date(Date.now() - 6 * 24 * 60 * 60 * 1000)
+  .toISOString()
+  .split("T")[0];
 
-
+export const useReportTask = ({ onSuccessCallback, onErrorCallback } = {}) => {
-
-export const useReportTask = ( {onSuccessCallback, onErrorCallback} = {} ) =>
-{
   const queryClient = useQueryClient();
-  const {
+  const selectedProject = useSelector(
-    mutate,
+    (store) => store.localVariables.projectId
-    isPending,
+  );
-    isSuccess,
+  const { mutate, isPending, isSuccess, isError, error } = useMutation({
-    isError,
+    mutationFn: async ({ reportData, workAreaId }) => {
-    error,
-  } = useMutation({
-    mutationFn: async ( {reportData,workAreaId} ) =>
-    {
-      debugger
       return await TasksRepository.reportTask(reportData);
     },
-    onSuccess: ( data, variables ) =>
+    onSuccess: (data, variables) => {
-    {
+      const { workAreaId, buildingId, floorId } = variables;
-      const {workAreaId} = variables;
+      queryClient.invalidateQueries({ queryKey: ["taskList"] });
-      queryClient.invalidateQueries( {queryKey: [ "taskList" ]} ); 
+      queryClient.invalidateQueries({ queryKey: ["WorkItems", workAreaId] });
-      queryClient.invalidateQueries( {queryKey: [ "WorkItems", workAreaId ]} );
+      queryClient.setQueryData(["ProjectInfra", selectedProject], (oldData) => {
-      queryClient.invalidateQueries( {queryKey: [ 'ProjectsList' ]} );
+        if (!oldData) return oldData;
-      showToast( "Task Reported Successfully.", "success" );
+        const { workAreaId, floorId, buildingId } = variables;
+        const updatedData = JSON.parse(JSON.stringify(oldData));
+
+        return updatedData.map((building) => {
+          if (building.id !== buildingId) return building;
+          return {
+            ...building,
+            floors: building.floors.map((floor) => {
+              if (floor.id !== floorId) return floor;
+
+              return {
+                ...floor,
+                workAreas: floor.workAreas.map((area) => {
+                  if (area.id !== workAreaId) return area;
+                  return {
+                    ...area,
+                    completedWork:
+                      (area.completedWork ?? 0) +
+                      (data?.data?.completedTask ?? 0),
+                  };
+                }),
+              };
+            }),
+          };
+        });
+      });
+      queryClient.setQueryData(["ProjectsList"], (projects) => {
+        if (!projects) return projects;
+        const updatedProject = JSON.parse(JSON.stringify(projects));
+        return updatedProject.map((project) => {
+          if (project.id !== selectedProject) return project;
+
+          return {
+            ...project,
+            completedWork:
+              (project.completedWork ?? 0) + (data?.data?.completedTask ?? 0),
+          };
+        });
+      });
+      showToast("Task Reported Successfully.", "success");
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
       const msg =
-        error?.response?.data?.message || error.message || "Error occurred during API call";
+        error?.response?.data?.message ||
-      showToast( msg, "error" );
+        error.message ||
+        "Error occurred during API call";
+      showToast(msg, "error");
     },
   });
 
@@ -145,16 +176,12 @@ export const useSubmitTaskComment = ({ actionAllow, onSuccessCallback }) => {
       return response.data;
     },
 
-    onSuccess: ( data,variables ) =>
+    onSuccess: (data, variables) => {
-    {
-
       const workAreaId = variables?.commentsData?.workItem?.workArea?.id;
       queryClient.invalidateQueries({ queryKey: ["taskList"] });
       if (actionAllow) {
-        showToast( "Review submitted successfully.", "success" );
+        showToast("Review submitted successfully.", "success");
-        
+      } else {
-      } else
-      {
         showToast("Comment sent successfully.", "success");
       }
 
@@ -162,7 +189,10 @@ export const useSubmitTaskComment = ({ actionAllow, onSuccessCallback }) => {
     },
 
     onError: (error) => {
-      const msg = error?.response?.data?.message || error.message || "Error during API call";
+      const msg =
+        error?.response?.data?.message ||
+        error.message ||
+        "Error during API call";
       showToast(msg, "error");
     },
   });
@@ -170,24 +200,23 @@ export const useSubmitTaskComment = ({ actionAllow, onSuccessCallback }) => {
   return { submitComment: mutate, isPending };
 };
 
-export const useCreateTask = ( {onSuccessCallback, onErrorCallback} = {} ) =>
+export const useCreateTask = ({ onSuccessCallback, onErrorCallback } = {}) => {
-{
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async ({payload,workAreaId}) => {
+    mutationFn: async ({ payload, workAreaId }) => {
       return await TasksRepository.assignTask(payload);
     },
-    onSuccess: ( _, variables ) =>
+    onSuccess: (_, variables) => {
-    {
+      queryClient.invalidateQueries({ queryKey: ["taskList"] });
-      queryClient.invalidateQueries( {queryKey: [ "taskList" ]} );
+      queryClient.invalidateQueries({
-      queryClient.invalidateQueries( {queryKey: [ "WorkItems", variables?.workAreaId ]} );
+        queryKey: ["WorkItems", variables?.workAreaId],
-      showToast( "Task Assigned Successfully.", "success" );
+      });
+      showToast("Task Assigned Successfully.", "success");
       if (onSuccessCallback) onSuccessCallback(variables);
     },
-    onError: ( error ) =>
+    onError: (error) => {
-    {
       showToast("Something went wrong. Please try again.", "error");
       if (onErrorCallback) onErrorCallback(error);
     },
   });
-};
+};

src/pages/Activities/DailyTask.jsx

@@ -14,6 +14,8 @@ import GlobalModel from "../../components/common/GlobalModel";
 import AssignTask from "../../components/Project/AssignTask";
 import SubTask from "../../components/Activities/SubTask";
 import {formatNumber} from "../../utils/dateUtils";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
 
 const DailyTask = () => {
   const [searchParams] = useSearchParams();
@@ -32,6 +34,8 @@ const DailyTask = () => {
 
 
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+  const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK)
+  const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK)
 
   const {
     TaskList,
@@ -386,6 +390,7 @@ const DailyTask = () => {
                                   </td>
                                   <td className="text-center">
                                     <div className="d-flex justify-content-end">
+                                     { ReportTaskRights && 
                                       <button
                                         type="button"
                                         className={`btn btn-xs btn-primary ${
@@ -400,7 +405,8 @@ const DailyTask = () => {
                                       >
                                         Report
                                       </button>
-                                      {task.reportedDate && (
+                          }
+                                      {(ApprovedTaskRights && task.reportedDate ) && (
                                         <button
                                           type="button"
                                           className={`btn btn-xs btn-warning ${

src/pages/Directory/Directory.jsx

@@ -38,7 +38,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   const [IsDeleting, setDeleting] = useState(false);
   const [openBucketModal, setOpenBucketModal] = useState(false);
   const [notes, setNotes] = useState([]);
-  const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
+    const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
   // const [selectedOrgs, setSelectedOrgs] = useState([]);
 
   // ✅ Changed to an array for multiple selections
@@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   }, [prefernceContacts]);
 
   return (
-    <div className="container-fluid">
+    <div className={IsPage ? "container-fluid":""}>
       {IsPage && (
         <Breadcrumb
           data={[
@@ -353,7 +353,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             setOpenBucketModal={setOpenBucketModal}
             contactsToExport={contacts}
             notesToExport={notes}
-            selectedNoteNames={selectedNoteNames}
+            selectedNoteNames={selectedNoteNames}       
             setSelectedNoteNames={setSelectedNoteNames}
             notesForFilter={notes}
             setFilterAppliedNotes={setFilterAppliedNotes}
@@ -361,35 +361,25 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </div>
       </div>
       <div className="card-minHeight mt-0">
-        {/* LIST VIEW */}
+        {(viewType === "card" || viewType === "list" || viewType === "notes") && (
+          <div className="d-flex flex-column justify-content-center align-items-center text-center">
+            {!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
+              <p className="mt-10">No contact found</p>
+            )}
+            {!loading &&
+              (viewType === "card" || viewType === "list") &&
+              contacts?.length > 0 &&
+              currentItems.length === 0 && (
+                <p className="mt-10">No matching contact found</p>
+              )}
+          </div>
+        )}
+
         {viewType === "list" && (
-          <div className="card cursor-pointer mt-3">
+          <div className="card cursor-pointer mt-5">
-            <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
+            <div className="card-body p-2 pb-1">
               <DirectoryListTableHeader>
-                {!loading && contacts?.length === 0 ? (
+                {!loading &&
-                  <tr>
-                    <td colSpan="6">
-                      <div
-                        className="d-flex justify-content-center align-items-center"
-                        style={{ height: "150px",marginLeft: "230px" }}
-                      >
-                        <p className="mb-0 text-muted">No contact found</p>
-                      </div>
-                    </td>
-                  </tr>
-                ) : !loading && contacts?.length > 0 && currentItems.length === 0 ? (
-                  <tr>
-                    <td colSpan="6">
-                      <div
-                        className="d-flex justify-content-center align-items-center"
-                        style={{ height: "150px" }}
-                      >
-                        <p className="mb-0 text-muted">No matching contact found</p>
-                      </div>
-                    </td>
-                  </tr>
-                ) : (
-                  !loading &&
                   currentItems.map((contact) => (
                     <ListViewDirectory
                       key={contact.id}
@@ -402,55 +392,35 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                       IsDeleted={setDeleteContact}
                       restore={handleDeleteContact}
                     />
-                  ))
+                  ))}
-                )}
               </DirectoryListTableHeader>
             </div>
           </div>
         )}
 
-        {/* CARD VIEW */}
         {viewType === "card" && (
-          <>
+          <div className="row mt-4">
-            {contacts?.length === 0 && !loading ? (
+            {!loading &&
-              <div
+              currentItems.map((contact) => (
-                className="d-flex justify-content-center align-items-center text-center"
+                <div
-                style={{ minHeight: "200px" }}
+                  key={contact.id}
-              >
+                  className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
-                <p className="text-muted mb-0">No contact found</p>
+                >
-              </div>
+                  <CardViewDirectory
-            ) : currentItems.length === 0 && !loading ? (
+                    IsActive={IsActive}
-              <div
+                    contact={contact}
-                className="d-flex justify-content-center align-items-center text-center"
+                    setSelectedContact={setSelectedContact}
-                style={{ minHeight: "250px" }}
+                    setIsOpenModal={setIsOpenModal}
-              >
+                    setOpen_contact={setOpen_contact}
-                <p className="text-muted mb-0">No matching contact found</p>
+                    setIsOpenModalNote={setIsOpenModalNote}
-              </div>
+                    IsDeleted={setDeleteContact}
-            ) : (
+                    restore={handleDeleteContact}
-              <div className="row mt-4">
+                  />
-                {currentItems.map((contact) => (
+                </div>
-                  <div
+              ))}
-                    key={contact.id}
+          </div>
-                    className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
-                  >
-                    <CardViewDirectory
-                      IsActive={IsActive}
-                      contact={contact}
-                      setSelectedContact={setSelectedContact}
-                      setIsOpenModal={setIsOpenModal}
-                      setOpen_contact={setOpen_contact}
-                      setIsOpenModalNote={setIsOpenModalNote}
-                      IsDeleted={setDeleteContact}
-                      restore={handleDeleteContact}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-          </>
         )}
 
-        {/* NOTES VIEW */}
         {viewType === "notes" && (
           <div className="mt-0">
             <NotesCardViewDirectory
@@ -458,12 +428,12 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
               setNotesForFilter={setNotes}
               searchText={searchText}
               setIsOpenModalNote={setIsOpenModalNote}
-              filterAppliedNotes={filterAppliedNotes}
+             filterAppliedNotes={filterAppliedNotes}
             />
           </div>
         )}
 
-        {/* PAGINATION */}
+        {/* Pagination */}
         {!loading &&
           viewType !== "notes" &&
           contacts?.length > 0 &&
@@ -494,10 +464,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   </li>
                 ))}
 
-                <li
+                <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
-                  className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                    }`}
-                >
                   <button
                     className="page-link"
                     onClick={() => paginate(currentPage + 1)}
@@ -509,7 +476,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             </nav>
           )}
       </div>
-
     </div>
   );
 };

src/pages/employee/EmployeeList.jsx

@@ -9,7 +9,7 @@ import { useEmployeesAllOrByProjectId, useSuspendEmployee } from "../../hooks/us
 import { useProjects } from "../../hooks/useProjects";
 import { useProfile } from "../../hooks/useProfile";
 import { hasUserPermission } from "../../utils/authUtils";
-import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
+import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES, VIEW_ALL_EMPLOYEES, VIEW_TEAM_MEMBERS } from "../../utils/constants";
 import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
@@ -56,6 +56,8 @@ const EmployeeList = () => {
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
   const [ employeeLodaing, setemployeeLodaing ] = useState( false );
+  const ViewTeamMember = useHasUserPermission(VIEW_TEAM_MEMBERS)
+  const ViewAllEmployee = useHasUserPermission(VIEW_ALL_EMPLOYEES)
   const {
   mutate: suspendEmployee,
   isPending: empLodaing
@@ -120,23 +122,6 @@ useEffect(() => {
     setIsCreateModalOpen(true);
    };
 
-  // const closeModal = () => {
-  //   setIsCreateModalOpen(false);
-
-  //   const modalElement = document.getElementById("managerole-modal");
-  //   if (modalElement && !showModal) {
-  //     modalElement.classList.remove("show");
-  //     modalElement.style.display = "none";
-  //     document.body.classList.remove("modal-open");
-  //     document.querySelector(".modal-backdrop")?.remove();
-  //   }
-  //   setShowModal(false);
-  //   clearCacheKey("employeeProfile");
-  //   recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
-  // };
-  // const handleShow = () => setShowModal(true);
-  // const handleClose = () => setShowModal( false );
-  
 useEffect(() => {
   if (!loading && Array.isArray(employees)) {
     const sorted = [...employees].sort((a, b) => {
@@ -296,7 +281,9 @@ const handleAllEmployeesToggle = (e) => {
             { label: "Employees", link: null },
           ]}
         ></Breadcrumb>
-        <div className="row">
+
+      
+        {ViewTeamMember ? (<div className="row">
           <div className="card ">
             <div className="card-datatable table-responsive pt-2">
 
@@ -309,6 +296,7 @@ const handleAllEmployeesToggle = (e) => {
                   {/* Switches: All Employees + Inactive */}
                   <div className="d-flex flex-wrap align-items-center gap-3">
                     {/* All Employees Switch */}
+                   {ViewAllEmployee && (
                     <div className="form-check form-switch text-start">
                       <input
                         type="checkbox"
@@ -322,6 +310,7 @@ const handleAllEmployeesToggle = (e) => {
                         All Employees
                       </label>
                     </div>
+                   ) } 
 
                     {/* Show Inactive Employees Switch */}
                     {showAllEmployees && (
@@ -702,7 +691,14 @@ const handleAllEmployeesToggle = (e) => {
               </div>
             </div>
           </div>
-        </div>
+        </div>):(
+          <div className="card">
+           <div className="text-center">
+                <i className="fa-solid fa-triangle-exclamation fs-5"></i>
+                <p>Access Denied: You don't have permission to perform this action. !</p>
+              </div>
+          </div>
+        )}
       </div>
     </>
   );

src/pages/project/ProjectDetails.jsx

@@ -81,22 +81,9 @@ const ProjectDetails = () => {
     switch (activePill) {
       case "profile": {
         return (
-          <>
+          <div className="row">
-            <div className="row ">
+            <div className="col-xl-4 col-lg-5 col-md-5 mt-5">
-              <div className="col-lg-4 col-md-5 mt-5">
+              <AboutProject ></AboutProject>
-                {/* About User */}
-                <AboutProject data={projectDetails}></AboutProject>
-                <ProjectOverview project={projectId} />
-                {/* About User */}
-              </div>
-              <div className="col-lg-8 col-md-5  mt-5">
-                {/* Profile Overview */}
-                <ProjectProgressChart
-                  ShowAllProject="false"
-                  DefaultRange="1M"
-                />
-                {/* Profile Overview */}
-              </div>
             </div>
             <div className="col-xl-4 col-lg-5 col-md-5  mt-5">
               <ProjectOverview project={projectId} />
@@ -136,8 +123,8 @@ const ProjectDetails = () => {
       }
       case "directory": {
         return (
-          <div className="row mt-2">
+          <div className="row">
-            <Directory IsPage={false} prefernceContacts={projectDetails.id} />
+            <Directory IsPage={false} prefernceContacts={projects_Details.id} />
           </div>
         );
       }
@@ -177,7 +164,7 @@ const ProjectDetails = () => {
           ]}
         ></Breadcrumb>
 
-        <div className="row ">
+        <div className="row">
           {projectLoading && <p>Loading....</p>}
           {/* {!projectLoading && project && (
             <ProjectBanner project_data={project}></ProjectBanner>

src/pages/project/ProjectList.jsx

@@ -263,155 +263,153 @@ const ProjectList = () => {
           <p className="text-center text-muted">No projects found.</p>
         )}
 
-       {listView ? (
+        {listView ? (
-  <div className="card cursor-pointer">
+          <div className="card cursor-pointer">
-    <div className="card-body p-2" style={{ minHeight: "200px" }}>
+            <div className="card-body p-2">
-      <div className="table-responsive text-nowrap py-2">
+              <div className="table-responsive text-nowrap py-2 " style={{minHeight:"400px"}}>
-        <table className="table m-3">
+                <table className="table m-3">
-          <thead>
+                  <thead>
-            <tr>
+                    <tr>
-              <th className="text-start" colSpan={5}>
+                      <th className="text-start" colSpan={5} >
-                Project Name
+                        Project Name
-              </th>
+                      </th>
-              <th className="mx-2 text-start">Contact Person</th>
+                      <th className="mx-2 text-start">Contact Person</th>
-              <th className="mx-2">START DATE</th>
+                      <th className="mx-2">START DATE</th>
-              <th className="mx-2">DEADLINE</th>
+                      <th className="mx-2">DEADLINE</th>
-              <th className="mx-2">Task</th>
+                      <th className="mx-2">Task</th>
-              <th className="mx-2">Progress</th>
+                      <th className="mx-2">Progress</th>
-              <th className="mx-2">
+                      <th className="mx-2">
-                <div className="dropdown">
+                        <div className="dropdown">
-                  <a
+                          <a
-                    className="dropdown-toggle hide-arrow cursor-pointer"
+                            className="dropdown-toggle hide-arrow cursor-pointer"
-                    data-bs-toggle="dropdown"
+                            data-bs-toggle="dropdown"
-                    aria-expanded="false"
+                            aria-expanded="false"
-                  >
+                          >
-                    Status <i className="bx bx-filter bx-sm"></i>
+                            Status <i className="bx bx-filter bx-sm"></i>
-                  </a>
+                          </a>
-                  <ul className="dropdown-menu p-2 text-capitalize">
+                          <ul className="dropdown-menu p-2 text-capitalize">
-                    {[
+                            {[
-                      {
+                              {
-                        id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
+                                id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
-                        label: "Active",
+                                label: "Active",
-                      },
+                              },
-                      {
+                              {
-                        id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
+                                id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
-                        label: "On Hold",
+                                label:"In Progress"
-                      },
+                               },
-                      {
+                              {
-                        id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
+                                id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-                        label: "Inactive",
+                                label: "On Hold",
-                      },
+                              },
-                      {
+                              {
-                        id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
+                                id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
-                        label: "Completed",
+                                label: "Inactive",
-                      },
+                              },
-                    ].map(({ id, label }) => (
+                              {
-                      <li key={id}>
+                                id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
-                        <div className="form-check">
+                                label: "Completed",
-                          <input
+                              },
-                            className="form-check-input"
+                            ].map(({ id, label }) => (
-                            type="checkbox"
+                              <li key={id}>
-                            checked={selectedStatuses.includes(id)}
+                                <div className="form-check">
-                            onChange={() => handleStatusChange(id)}
+                                  <input
-                          />
+                                    className="form-check-input  "
-                          <label className="form-check-label">{label}</label>
+                                    type="checkbox"
+                                    checked={selectedStatuses.includes(id)}
+                                    onChange={() => handleStatusChange(id)}
+                                  />
+                                  <label className="form-check-label">
+                                    {label}
+                                  </label>
+                                </div>
+                              </li>
+                            ))}
+                          </ul>
                         </div>
-                      </li>
+                      </th>
-                    ))}
+                      <th
-                  </ul>
+                        className={`mx-2 ${
-                </div>
+                          HasManageProject ? "d-sm-table-cell" : "d-none"
-              </th>
+                        }`}
-              <th
+                      >
-                className={`mx-2 ${
+                        Action
-                  HasManageProject ? "d-sm-table-cell" : "d-none"
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="table-border-bottom-0 overflow-auto ">
+                    {currentItems.length === 0 ? (
+                      <tr className="text-center">
+                        <td colSpan="12" rowSpan='12'style={{height:"200px"}} >
+                          No projects found
+                        </td>
+                      </tr>
+                    ) : (
+                      currentItems.map((project) => (
+                        <ProjectListView
+                          key={project.id}
+                          projectData={project}
+                          recall={sortingProject}
+                        />
+                      ))
+                    )}
+                  </tbody>
+                </table>
+              </div>{" "}
+            </div>{" "}
+          </div>
+        ) : (
+          <div className="row">
+            {currentItems.map((project) => (
+              <ProjectCard
+                key={project.id}
+                projectData={project}
+                recall={sortingProject}
+              />
+            ))}
+          </div>
+        )}
+
+        {!loading && totalPages > 1 && (
+          <nav>
+            <ul className="pagination pagination-sm justify-content-end py-2">
+              <li className={`page-item ${currentPage === 1 && "disabled"}`}>
+                <button
+                  className="page-link"
+                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                >
+                  &laquo;
+                </button>
+              </li>
+              {[...Array(totalPages)].map((_, i) => (
+                <li
+                  key={i}
+                  className={`page-item ${currentPage === i + 1 && "active"}`}
+                >
+                  <button
+                    className="page-link"
+                    onClick={() => setCurrentPage(i + 1)}
+                  >
+                    {i + 1}
+                  </button>
+                </li>
+              ))}
+              <li
+                className={`page-item ${
+                  currentPage === totalPages && "disabled"
                 }`}
               >
-                Action
+                <button
-              </th>
+                  className="page-link"
-            </tr>
+                  onClick={() =>
-          </thead>
+                    setCurrentPage((p) => Math.min(totalPages, p + 1))
-          <tbody className="table-border-bottom-0" style={{ height: "200px" }}>
+                  }
-            {currentItems.length === 0 ? (
-              <tr>
-                <td
-                  colSpan="12"
-                  className="text-center"
-                  style={{
-                    verticalAlign: "middle",
-                    height: "200px",
-                    paddingTop: 0,
-                    paddingBottom: 0,
-                  }}
                 >
-                  <div className="d-flex flex-column justify-content-center align-items-center h-100">
+                  &raquo;
-                    <p className="mb-0">No projects found</p>
+                </button>
-                  </div>
+              </li>
-                </td>
+            </ul>
-              </tr>
+          </nav>
-            ) : (
+        )}
-              currentItems.map((project) => (
-                <ProjectListView
-                  key={project.id}
-                  projectData={project}
-                  recall={sortingProject}
-                />
-              ))
-            )}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-) : (
-  <div className="row">
-    {currentItems.map((project) => (
-      <ProjectCard
-        key={project.id}
-        projectData={project}
-        recall={sortingProject}
-      />
-    ))}
-  </div>
-)}
-
-{!loading && totalPages > 1 && (
-  <nav>
-    <ul className="pagination pagination-sm justify-content-end py-2">
-      <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-        <button
-          className="page-link"
-          onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-        >
-          &laquo;
-        </button>
-      </li>
-      {[...Array(totalPages)].map((_, i) => (
-        <li
-          key={i}
-          className={`page-item ${currentPage === i + 1 && "active"}`}
-        >
-          <button
-            className="page-link"
-            onClick={() => setCurrentPage(i + 1)}
-          >
-            {i + 1}
-          </button>
-        </li>
-      ))}
-      <li className={`page-item ${currentPage === totalPages && "disabled"}`}>
-        <button
-          className="page-link"
-          onClick={() =>
-            setCurrentPage((p) => Math.min(totalPages, p + 1))
-          }
-        >
-          &raquo;
-        </button>
-      </li>
-    </ul>
-  </nav>
-)}
-
       </div>
     </>
   );

src/utils/constants.jsx

@@ -11,6 +11,11 @@ export const VIEW_PROJECTS = "6ea44136-987e-44ba-9e5d-1cf8f5837ebc"
 
 export const MANAGE_EMPLOYEES = "a97d366a-c2bb-448d-be93-402bd2324566"
 
+export const VIEW_ALL_EMPLOYEES = "60611762-7f8a-4fb5-b53f-b1139918796b"
+
+export const VIEW_TEAM_MEMBERS = "b82d2b7e-0d52-45f3-997b-c008ea460e7f"
+
+
 export const MANAGE_PROJECT_INFRA = "cf2825ad-453b-46aa-91d9-27c124d63373"
 
 export const VIEW_PROJECT_INFRA = "8d7cc6e3-9147-41f7-aaa7-fa507e450bd4"
@@ -24,6 +29,8 @@ export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
 
 export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
 
+export const APPROVE_TASK = "db4e40c5-2ba9-4b6d-b8a6-a16a250ff99c"
+
 export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
 
 export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"

src/utils/dateUtils.jsx

@@ -69,4 +69,13 @@ export  const formatNumber = (num) => {
 };
 export const formatUTCToLocalTime = (datetime) =>{
   return moment.utc(datetime).local().format("MMMM DD, YYYY [at] hh:mm A");
+}
+
+export  const getCompletionPercentage = (completedWork, plannedWork)=> {
+  if (!plannedWork || plannedWork === 0) return 0;
+
+  const percentage = (completedWork / plannedWork) * 100;
+  const clamped = Math.min(Math.max(percentage, 0), 100);
+
+  return clamped.toFixed(2); 
 }