filtering projects according to logged user at data layer

src/components/Activities/InfraPlanning.jsx

@@ -47,8 +47,7 @@ const InfraPlanning = () =>
                    >
                                  {(project_listLoader || projects.length < 0) && <option value="Loading..." disabled>Loading...</option>  }
                   
-                                  {!project_listLoader && projects?.filter(project =>
+                                 {!project_listLoader && projects?.map((project)=>(
-                                    LoggedUser?.projects?.map(String).includes(project.id)).map((project)=>(
                                      <option key={project.id} value={project.id}>{project.name}</option>
                                   ))} 
                       </select>

src/components/Activities/ReportTaskComments.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useRef } from "react";
-import { useProfile } from "../../hooks/useProfile";
 import moment from "moment";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -16,7 +15,6 @@ const schema = z.object({
 
 const ReportTaskComments = ({ commentsData, closeModal }) => {
   const [loading, setloading] = useState(false);
-  const { profile } = useProfile();
   const [comments, setComment] = useState([]);
   const [bgClass, setBgClass] = useState("");
   const {
@@ -38,7 +36,6 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [comments]);
-  const isLoggedUser = (usrId) => profile?.employeeInfo.id === usrId;
 
   const onSubmit = async (data) => {
     let sendComment = {

src/components/Project/Infrastructure/WorkItem.jsx

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from "react";
 import { useModal } from "../../../ModalContext";
 import AssignRoleModel from "../AssignRole";
 import { useParams } from "react-router-dom";
+import EditActivityModal from "./EditActivityModal";
+import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
+import { MANAGE_TASK } from "../../../utils/constants";
 
 const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const { projectId } = useParams();
@@ -9,7 +12,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const [NewWorkItem, setNewWorkItem] = useState();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [showModal, setShowModal] = useState(false);
-
+  const ManageTasks = useHasUserPermission(MANAGE_TASK);
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
   const getProgress = (planned, completed) => {
@@ -60,24 +63,11 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         style={{ display: showModal ? "block" : "none" }}
         aria-hidden={!showModal}
       >
-        <div
+        <EditActivityModal workItem={workItem}
-          className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
+          workArea={forWorkArea}
-          role="document"
+          building={forBuilding}
-        >
+          floor={forFloor}
-          <div className="modal-content">
+          onClose={ closeModal1} />
-            <div className="modal-body p-sm-4 p-0">
-              <button
-                type="button"
-                className="btn-close"
-                onClick={closeModal1}
-                aria-label="Close"
-              ></button>
-              <div className="container my-1"></div>
-
-              <h6>Comming Soon</h6>
-            </div>
-          </div>
-        </div>
       </div>
 
       <tr>
@@ -131,7 +121,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         </td>
         <td className="d-none d-md-table-cell">
           <div className="dropdown">
-            {!projectId && (
+          {!projectId && ManageTasks && (
               <button
                 aria-label="Modify"
                 type="button"

src/hooks/useProjects.js

@@ -14,54 +14,46 @@ export const useProjects = () =>
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    const projects_cache = getCachedData("projectslist");
+    const projectIds = profile?.projects || []; 
+  
+    const filterProjects = (projectsList) => {
+      return projectsList
+        .filter((proj) => projectIds.includes(String(proj.id)))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    };
+  
 
     if (!projects_cache) {
       setLoading(true);
-      ProjectRepository.getProjectList()
+      try {
-        .then((response) => {
+        const response = await ProjectRepository.getProjectList();
-          let projects = response.data;
+        const allProjects = response.data;
-          const sortedProject = [...projects].sort((a, b) =>
+        const filtered = filterProjects(allProjects);
-            a.name.localeCompare(b.name)
+        setProjects(filtered);
-          );
+        cacheData("projectslist", allProjects); 
-
+      } catch (err) {
-          setProjects(sortedProject);
-          cacheData( "projectslist", sortedProject );
-          setLoading(false);
-        })
-        .catch((error) => {
-          setLoading(false);
         setError("Failed to fetch data.");
-        });
+      } finally {
+        setLoading(false);
+      }
     } else {
       if (!projects.length) {
-        let projects = projects_cache;
+        const filtered = filterProjects(projects_cache);
-        const sortedProject = [...projects].sort((a, b) =>
+        setProjects(filtered);
-          a.name.localeCompare(b.name)
-        );
-        setProjects( sortedProject );
 
       }
     }
   };
 
-  useEffect(() => {
+  useEffect( () =>
+    {
+    if ( profile )
+    {
       fetchData();
+    }
   }, []);
 
-  // useEffect( () =>
+
-  // {
-  //   if (projects )
-  //   {
-  //     if ( profile?.projects && profile?.projects?.length > 0 )
-  //     {
-  //       dispatch(setProjectId(profile?.projects[0]))
-  //     } else
-  //     {
-  //       dispatch(setProjectId(1))
-  //     }
-  //   }
-  // }, [profile]);
 
   return { projects, loading, error, refetch: fetchData };
 };

src/pages/Activities/DailyTask.jsx

@@ -16,7 +16,6 @@ import DatePicker from "../../components/common/DatePicker";
 import { useSearchParams } from "react-router-dom";
 
 const DailyTask = () => {
-  const { profile: LoggedUser } = useProfile();
   const [searchParams] = useSearchParams();
   const projectId = searchParams.get("project");
   const selectedProject = useSelector(
@@ -35,17 +34,15 @@ const DailyTask = () => {
   // Sync projectId (either from URL or pick first accessible one)
   useEffect(() => {
     if (!project_lodaing && projects.length > 0 && !initialized) {
-      const userProjects = projects.filter((p) =>
+ 
-        LoggedUser?.projects?.map(String).includes(p.id)
-      );
   
       if (projectId) {
         dispatch(setProjectId(projectId));
-      } else if (!selectedProject && userProjects.length > 0) {
+      } else if (!selectedProject) {
-        dispatch(setProjectId(userProjects[0].id));
+        dispatch(setProjectId(projects[0].id)); 
       }
   
-      setInitialized(true); // <-- This blocks re-running this effect again
+      setInitialized(true);
     }
   }, [project_lodaing, projects, projectId, selectedProject, initialized]);
   
@@ -136,12 +133,12 @@ const DailyTask = () => {
                   onChange={(e) => dispatch(setProjectId(e.target.value))}
                   aria-label=""
                 >
-                  {(project_lodaing || projects.length < 0) && (
+                   {(project_lodaing )  && (
                     <option value="Loading..." disabled>
                       Loading...
                     </option>
                   )}
-                  {!project_lodaing &&
+                   {(!project_lodaing && projects) &&
                     projects
                       ?.filter((project) =>
                         LoggedUser?.projects?.map(String).includes(project.id)
@@ -171,7 +168,7 @@ const DailyTask = () => {
                   {TaskLists?.length === 0 && !task_loading && (
                     <tr>
                       <td colSpan={7} className="text-center">
-                        No Data Found
+                      No Task Found
                       </td>
                     </tr>
                   )}
@@ -183,11 +180,7 @@ const DailyTask = () => {
                       </td>
                     </tr>
                   )}
-                  {(!initialized || !selectedProject) && ( <tr>
+             
-                      <td colSpan={7} className="text-center">
-                        <p>Loading..</p>
-                      </td>
-                    </tr>)}
 
                   {TaskLists.map((task, index) => {
                     return (

src/pages/Activities/TaskPlannng.jsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from "react";
 import "../../components/Project/ProjectInfra.css";
 
@@ -11,14 +10,17 @@ import { useDispatch, useSelector } from "react-redux";
 import { useProjectDetails, useProjects } from "../../hooks/useProjects";
 import { setProjectId } from "../../slices/localVariablesSlice";
 
-
 const TaskPlannng = () => {
-
   const { profile } = useProfile();
-  const {projects,loading:project_listLoader,error:projects_error} = useProjects();
+  const {
+    projects,
+    loading: project_listLoader,
+    error: projects_error,
+  } = useProjects();
   const dispatch = useDispatch();
-  const selectedProject = useSelector((store)=>store.localVariables.projectId);
+  const selectedProject = useSelector(
-
+    (store) => store.localVariables.projectId
+  );
 
   const [project, setProject] = useState(null);
   const [projectDetails, setProjectDetails] = useState(null);
@@ -58,7 +60,10 @@ const TaskPlannng = () => {
           .then((response) => {
             setProjectDetails(response);
             setProject(response);
-            cacheData("projectInfo",{data:response.data,projectId:selectedProject})
+            cacheData("projectInfo", {
+              data: response.data,
+              projectId: selectedProject,
+            });
           })
           .catch((error) => {
             console.error(error);
@@ -81,18 +86,16 @@ const TaskPlannng = () => {
   };
 
   const handleDataChange = (data) => {
-
     fetchData();
   };
 
   useEffect(() => {
-      if((projects.length != 0)){
+    if (projects.length != 0 && selectedProject) {
       fetchData();
       fetchActivities();
     }
   }, [selectedProject]);
 
-
   return (
     <>
       <div className="container-xxl flex-grow-1 container-p-y">
@@ -100,14 +103,19 @@ const TaskPlannng = () => {
           data={[
             { label: "Home", link: "/dashboard" },
             { label: "Daily Task Planning", link: "/task" },
-    
           ]}
         ></Breadcrumb>
+        {project_listLoader && <p>Loading..</p>}
+        {!project_listLoader && projects.length === 0 && (
+          <p>No Project Found.</p>
+        )}
+        {!project_listLoader && projects.length > 0 && (
           <InfraPlanning
             data={projectDetails}
             activityMaster={activities}
             onDataChange={handleDataChange}
           />
+        )}
       </div>
     </>
   );

src/utils/constants.jsx

@@ -20,5 +20,5 @@ export const ASSIGN_TO_PROJECT = "fbd213e0-0250-46f1-9f5f-4b2a1e6e76a3";
 
 export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
 
-
+export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"