src/components/Project/ProjectNav.jsx

@@ -1,84 +1,57 @@
 import React from "react";
 import { hasUserPermission } from "../../utils/authUtils";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { DIRECTORY_ADMIN, DIRECTORY_MANAGER, DIRECTORY_USER, VIEW_PROJECT_INFRA } from "../../utils/constants";
+import {
+  DIRECTORY_ADMIN,
+  DIRECTORY_MANAGER,
+  DIRECTORY_USER,
+  VIEW_PROJECT_INFRA,
+} from "../../utils/constants";
 
 const ProjectNav = ({ onPillClick, activePill }) => {
-  const HasViewInfraStructure = useHasUserPermission( VIEW_PROJECT_INFRA );
+  const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
   const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN);
-  const DireManager = useHasUserPermission(DIRECTORY_MANAGER)
+  const DireManager = useHasUserPermission(DIRECTORY_MANAGER);
-  const DirUser = useHasUserPermission(DIRECTORY_USER)
+  const DirUser = useHasUserPermission(DIRECTORY_USER);
 
+  const ProjectTab = [
+    { key: "profile", icon: "bx bx-user", label: "Profile" },
+    { key: "teams", icon: "bx bx-group", label: "Teams" },
+    {
+      key: "infra",
+      icon: "bx bx-grid-alt",
+      label: "Infrastructure",
+      hidden: !HasViewInfraStructure,
+    },
+    {
+      key: "directory",
+      icon: "bx bxs-contact",
+      label: "Directory",
+      hidden: !(DirAdmin || DireManager || DirUser),
+    },
+    { key: "documents", icon: "bx bx-folder-open", label: "Documents" },
+    { key: "setting", icon: "bx bxs-cog", label: "Setting" },
+  ];
   return (
     <div className="nav-align-top">
-      <ul className="nav nav-tabs ">
+      <ul className="nav nav-tabs">
-        <li className="nav-item">
+        {ProjectTab?.filter((tab) => !tab.hidden)?.map((tab) => (
+          <li key={tab.key} className="nav-item cursor-pointer">
             <a
-            className={`nav-link ${activePill === "profile" ? "active" : ""} fs-6`}
-            href="#"
-            onClick={(e) => {
-              e.preventDefault(); 
-              onPillClick("profile");
-            }}
-          >
-            <i className="bx bx-user bx-sm me-1_5"></i> <span className="d-none d-md-inline">Profile</span>
-          </a>
-        </li>
-        <li className="nav-item">
-          <a
-            className={`nav-link ${activePill === "teams" ? "active" : ""} fs-6`}
-            href="#"
-            onClick={(e) => {
-              e.preventDefault(); 
-              onPillClick("teams");
-            }}
-          >
-            <i className="bx bx-group bx-sm me-1_5"></i><span className="d-none d-md-inline" > Teams</span>
-          </a>
-        </li>
-        <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
-          <a
-            className={`nav-link ${activePill === "infra" ? "active" : ""} fs-6`}
-            href="#"
-            onClick={(e) => {
-              e.preventDefault(); 
-              onPillClick("infra");
-            }}
-          >
-            <i className="bx bx-grid-alt bx-sm me-1_5"></i> <span className="d-none d-md-inline">Infrastructure</span>
-          </a>
-        </li>
              
-        
-        {(DirAdmin || DireManager || DirUser) && (
-            <li className="nav-item">
-          <a
-            className={`nav-link ${activePill === "directory" ? "active" : ""} fs-6`}
-            href="#"
-            onClick={(e) => {
-              e.preventDefault(); // Prevent page reload
-              onPillClick("directory");
-            }}
-          >
-           <i className='bx bxs-contact bx-sm me-1_5'></i> <span className="d-none d-md-inline">Directory</span>
-          </a>
-        </li>
-        )}
-        <li className="nav-item">
-          <a
               className={`nav-link ${
-              activePill === "documents" ? "active" : ""
+                activePill === tab.key ? "active cursor-pointer" : ""
               } fs-6`}
-            href="#"
               onClick={(e) => {
-              e.preventDefault(); // Prevent page reload
+                e.preventDefault();
-              onPillClick("documents");
+                onPillClick(tab.key);
               }}
             >
-           <i className='bx bxs-cog bx-sm me-1_5'></i> <span className="d-none d-md-inline">Documents</span>
+              <i className={`${tab.icon} bx-sm me-1_5`}></i>
+              <span className="d-none d-md-inline  ">{tab.label}</span>
             </a>
           </li>
-      
+        ))}
       </ul>
     </div>
   );

src/components/Project/ProjectPermission.jsx

@@ -0,0 +1,180 @@
+import React, { useEffect } from "react";
+import {
+  useProjectLevelEmployeePermission,
+  useProjectLevelModules,
+  useUpdateProjectLevelEmployeePermission,
+} from "../../hooks/useProjects";
+import { useSelectedproject } from "../../slices/apiDataManager";
+import { useEmployeesByProject } from "../../hooks/useEmployees";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import showToast from "../../services/toastService";
+
+export const ProjectPermissionSchema = z.object({
+  employeeId: z.string(),
+  selectedPermissions: z.array(z.string()).optional(),
+});
+
+const ProjectPermission = () => {
+  const selectedProject = useSelectedproject();
+
+  const { data: ProjectModules } = useProjectLevelModules();
+  const { employees = [], isLoading: isEmployeeLoading } =
+    useEmployeesByProject(selectedProject);
+
+  const {
+    register,
+    watch,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(ProjectPermissionSchema),
+    defaultValues: {
+      employeeId: "",
+      selectedPermissions: [],
+    },
+  });
+
+  const selectedEmployee = watch("employeeId");
+
+  // Fetch permissions for the selected employee
+  const { data: selectedEmpPermissions } = useProjectLevelEmployeePermission(
+    selectedEmployee || "",
+    selectedProject
+  );
+
+  // Update form state when employee permissions change
+  useEffect(() => {
+    const enabledPerms =
+      selectedEmpPermissions?.permissions
+        ?.filter((perm) => perm.isEnabled)
+        ?.map((perm) => perm.id) || [];
+
+    reset({
+      employeeId: selectedEmployee || employees[0]?.id || "",
+      selectedPermissions: enabledPerms,
+    });
+  }, [selectedEmpPermissions, reset, selectedEmployee, employees]);
+
+  const { mutate: UpdatePermission, isPending } =
+    useUpdateProjectLevelEmployeePermission();
+  const onSubmit = (formData) => {
+    // Guard 1: Ensure employee selected
+    if (!formData.employeeId) {
+      console.warn("No employee selected");
+      return;
+    }
+
+    const existingPermissions = selectedEmpPermissions?.permissions || [];
+
+    // Build payload
+    const payloadPermissions =
+      existingPermissions.length > 0
+        ? existingPermissions.map((perm) => ({
+            id: perm.id,
+            isEnabled: formData.selectedPermissions?.includes(perm.id) || false,
+          }))
+        : (formData.selectedPermissions || []).map((id) => ({
+            id,
+            isEnabled: true,
+          }));
+
+    // Guard 2: Prevent API call if no permissions at all
+    if (payloadPermissions.length === 0) {
+      showToast("No permissions selected", "warn");
+      return;
+    }
+
+    // Guard 3 (optional): Prevent API call if nothing changed
+    const hasChanges = existingPermissions.some(
+      (perm) =>
+        perm.isEnabled !==
+        (formData.selectedPermissions?.includes(perm.id) || false)
+    );
+    if (!hasChanges && existingPermissions.length > 0) {
+      showToast("No changes detected", "warn");
+      return;
+    }
+
+    const payload = {
+      employeeId: formData.employeeId,
+      projectId: selectedProject,
+      permission: payloadPermissions,
+    };
+
+    UpdatePermission(payload);
+  };
+
+  return (
+    <div className="row">
+      {isEmployeeLoading ? (
+        <>Loading...</>
+      ) : (
+        <form className="row" onSubmit={handleSubmit(onSubmit)}>
+          <div className="d-flex align-items-end gap-2">
+            <div className="text-start">
+              <label className="form-label">Select Employee</label>
+              <select
+                className="form-select form-select-sm"
+                {...register("employeeId")}
+                disabled={isPending}
+              >
+                <option value="">-- Select --</option>
+                {employees.map((emp) => (
+                  <option key={emp.id} value={emp.id}>
+                    {emp.firstName} {emp.lastName}
+                  </option>
+                ))}
+              </select>
+              {errors.employeeId && (
+                <div className="text-danger small">
+                  {errors.employeeId.message}
+                </div>
+              )}
+            </div>
+            <button className="btn btn-sm btn-primary">
+              {isPending ? "Please Wait..." : "Update Permission"}
+            </button>
+          </div>
+
+          {ProjectModules?.map((feature) => (
+            <div key={feature.id} className="row my-1">
+              <div className="col-12 text-start fw-semibold mb-2">
+                {feature.name}
+              </div>
+              <div className="col-12">
+                <div className="row">
+                  {feature.featurePermissions?.map((perm) => (
+                    <div
+                      className="col-12 col-sm-6 col-md-4 mb-3"
+                      key={perm.id}
+                    >
+                      <label
+                        className="form-check-label d-flex align-items-center"
+                        htmlFor={perm.id}
+                      >
+                        <input
+                          type="checkbox"
+                          className="form-check-input me-2"
+                          id={perm.id}
+                          value={perm.id}
+                          {...register("selectedPermissions")}
+                        />
+                        {perm.name}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <hr className="my-2" />
+            </div>
+          ))}
+        </form>
+      )}
+    </div>
+  );
+};
+
+export default ProjectPermission;

src/components/Project/ProjectSetting.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { ComingSoonPage } from "../../pages/Misc/ComingSoonPage";
+import ProjectPermission from "./ProjectPermission";
+
+const ProjectSetting = () => {
+  const [activePill, setActivePill] = useState(() => {
+    return localStorage.getItem("lastActiveProjectSettingTab") || "Permissions";
+  });
+  const projectSettingTab = [
+    { key: "Permissions", label: "Permissions" },
+    { key: "Notification", label: "Notification" },
+    { key: "SeparatedLink", label: "Separated link", isButton: true },
+  ];
+  const handlePillClick = (pillKey) => {
+    setActivePill(pillKey);
+    localStorage.setItem("lastActiveProjectSettingTab", pillKey);
+  };
+
+  const renderContent = () => {
+    switch (activePill) {
+      case "Permissions":
+        return <ProjectPermission />;
+
+      case "Notification":
+        return <ComingSoonPage />;
+
+      default:
+        return <ComingSoonPage />;
+    }
+  };
+
+  return (
+    <div className="w-100">
+      <div className="card p-3">
+        <div className="col-4">
+          <div className="dropdown text-start">
+            <button
+              className="btn btn-sm btn-outline-primary dropdown-toggle"
+              type="button"
+              id="dropdownMenuButton"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              {activePill || "Select Option"}
+            </button>
+
+            <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+              {projectSettingTab.map((item) =>
+                item.isButton ? (
+                  <li key={item.key}>
+                    <button className="dropdown-item">{item.label}</button>
+                  </li>
+                ) : (
+                  <li key={item.key}>
+                    <button
+                      className="dropdown-item"
+                      onClick={() => handlePillClick(item.key)}
+                    >
+                      {item.label}
+                    </button>
+                  </li>
+                )
+              )}
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-3">{renderContent()}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectSetting;

src/hooks/useProjects.js

@@ -14,7 +14,6 @@ import {
 } from "@tanstack/react-query";
 import showToast from "../services/toastService";
 
-
 // ------------------------------Query-------------------
 
 export const useProjects = () => {
@@ -153,7 +152,7 @@ export const useProjectName = () => {
     isLoading,
     error,
     refetch,
-    isError
+    isError,
   } = useQuery({
     queryKey: ["basicProjectNameList"],
     queryFn: async () => {
@@ -164,7 +163,13 @@ export const useProjectName = () => {
       showToast(error.message || "Error while Fetching project Name", "error");
     },
   });
-  return { projectNames: data, loading: isLoading, Error: error, refetch,isError };
+  return {
+    projectNames: data,
+    loading: isLoading,
+    Error: error,
+    refetch,
+    isError,
+  };
 };
 
 export const useProjectInfra = (projectId) => {
@@ -175,7 +180,7 @@ export const useProjectInfra = (projectId) => {
   } = useQuery({
     queryKey: ["ProjectInfra", projectId],
     queryFn: async () => {
-      if(!projectId) return null;
+      if (!projectId) return null;
       const res = await ProjectRepository.getProjectInfraByproject(projectId);
       return res.data;
     },
@@ -207,12 +212,7 @@ export const useProjectTasks = (workAreaId, IsExpandedArea = false) => {
   return { ProjectTaskList, isLoading, error };
 };
 
-export const useProjectTasksByEmployee = (
+export const useProjectTasksByEmployee = (employeeId, fromDate, toDate) => {
-  employeeId,
-  fromDate,
-  toDate,
-) => {
-
   return useQuery({
     queryKey: ["TasksByEmployee", employeeId],
     queryFn: async () => {
@@ -230,6 +230,43 @@ export const useProjectTasksByEmployee = (
   });
 };
 
+export const useProjectLevelEmployeeList = (ProjectId) => {
+  return useQuery({
+    queryKey: ["ProjectLevelEmployeeList", ProjectId],
+    queryFn: async () => {
+      const resp = await ProjectRepository.getProjectLevelEmployeeList(
+        ProjectId
+      );
+      return resp.data;
+    },
+    enabled: !!ProjectId,
+  });
+};
+
+export const useProjectLevelModules = () => {
+  return useQuery({
+    queryKey: ["ProjectLevelModules"],
+    queryFn: async () => {
+      const resp = await ProjectRepository.getProjectLevelModules();
+      return resp.data;
+    },
+  });
+};
+
+export const useProjectLevelEmployeePermission = (employeeId, projectId) => {
+  return useQuery({
+    queryKey: ["ProjectLevelEmployeePermission", employeeId, projectId],
+    queryFn: async () => {
+      const resp = await ProjectRepository.getProjectLevelEmployeePermissions(
+        employeeId,
+        projectId
+      );
+      return resp.data;
+    },
+    enabled: !!employeeId && !!projectId,
+  });
+};
+
 // -- -------------Mutation-------------------------------
 
 export const useCreateProject = ({ onSuccessCallback }) => {
@@ -558,3 +595,26 @@ export const useDeleteProjectTask = (onSuccessCallback) => {
     },
   });
 };
+
+export const useUpdateProjectLevelEmployeePermission = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) =>
+      await ProjectRepository.updateProjectLevelEmployeePermission(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: ["ProjectLevelEmployeePermission"],
+      });
+      showToast("Permission Updated successfully", "success");
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to delete task",
+        "error"
+      );
+      if (onSuccessCallback) onSuccessCallback();
+    },
+  });
+};

src/pages/project/ProjectDetails.jsx

@@ -26,6 +26,7 @@ import AttendanceOverview from "../../components/Dashboard/AttendanceChart";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import ProjectDocument from "../../components/Project/ProjectDocuments";
 import ProjectDocuments from "../../components/Project/ProjectDocuments";
+import ProjectSetting from "../../components/Project/ProjectSetting";
 
 const ProjectDetails = () => {
   const projectId = useSelectedproject();
@@ -126,6 +127,12 @@ const ProjectDetails = () => {
             <ProjectDocuments />
           </div>
         );
+        case "setting":
+        return (
+          <div className="row">
+            <ProjectSetting />
+          </div>
+        );
 
       default:
         return <ComingSoonPage />;

src/repositories/ProjectRepository.jsx

@@ -37,6 +37,14 @@ const ProjectRepository = {
     api.get(
       `/api/project/tasks-employee/${id}?fromDate=${fromDate}&toDate=${toDate}`
     ),
+
+
+    // Permission Managment for Employee at Project Level
+
+    getProjectLevelEmployeeList:(projectId)=>api.get(`/api/Project/get/proejct-level/employees/${projectId}`),
+    getProjectLevelModules:()=>api.get(`/api/Project/get/proejct-level/modules`),
+    getProjectLevelEmployeePermissions:(employeeId,projectId)=>api.get(`/api/Project/get/project-level-permission/employee/${employeeId}/project/${projectId}`),
+    updateProjectLevelEmployeePermission:(data)=>api.post(`/api/Project/assign/project-level-permission`,data)
 };
 
 export const TasksRepository = {