src/hooks/useProjects.js

@@ -4,6 +4,7 @@ import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
 import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
+import EmployeeList from "../components/Directory/EmployeeList";
 
 export const useProjects = () => {
 
@@ -130,3 +131,48 @@ export const useProjectDetails = (projectId) => {
 
   return { projects_Details, loading, error, refetch: fetchData }
 }
+
+
+export const useProjectsByEmployee = ( employeeId ) =>
+{
+  const [projectList, setProjectList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const fetchProjects = async (id) => {
+    try {
+      setLoading(true);
+      setError(''); // clear previous error
+      const res = await ProjectRepository.getProjectsByEmployee(id);
+      setProjectList(res.data);
+      cacheData( 'ProjectsByEmployee', {data: res.data, employeeId: id} );
+      setLoading(false)
+    } catch (err) {
+      setError( err?.message || 'Failed to fetch projects' );
+      setLoading(false)
+    } 
+  };
+
+  useEffect(() => {
+    if (!employeeId) return;
+
+    const cache_project = getCachedData('ProjectsByEmployee');
+
+    if (
+      !cache_project?.data ||
+      cache_project?.employeeId !== employeeId
+    ) {
+      fetchProjects(employeeId);
+    } else {
+      setProjectList(cache_project.data);
+    }
+  }, [employeeId]);
+
+  return {
+    projectList,
+    loading,
+    error,
+    refetch : fetchProjects
+  }
+};
+

src/pages/employee/AssignToProject.jsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from "react";
+import { useProjects, useProjectsByEmployee } from "../../hooks/useProjects";
+import EmployeeList from "./EmployeeList";
+import showToast from "../../services/toastService";
+import ProjectRepository from "../../repositories/ProjectRepository";
+
+const AssignToProject = ({ employee, onClose }) => {
+  const { projects, loading } = useProjects();
+  const { projectList,loading:selectedProjectLoding ,refetch} = useProjectsByEmployee(employee?.id);
+  const [isSubmitting,setSubmitting] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [checkedProjects, setCheckedProjects] = useState({});
+  const [selectedEmployees, setSelectedEmployees] = useState([]);
+
+  useEffect(() => {
+    if (projectList && projectList.length > 0) {
+      const initialChecked = {};
+      const initialSelected = [];
+
+      projectList.forEach((project) => {
+        initialChecked[project.id] = true;
+        initialSelected.push({
+          jobRoleId: employee.jobRoleId,
+          projectId: project.id,
+          status: true,
+        });
+      });
+
+      setCheckedProjects(initialChecked);
+      setSelectedEmployees(initialSelected);
+    } else {
+      setCheckedProjects({});
+      setSelectedEmployees([]);
+    }
+  }, [projectList, employee?.id]);
+
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value.toLowerCase());
+  };
+
+const handleCheckboxChange = (projectId) => {
+  const isChecked = !checkedProjects[projectId];
+
+  setCheckedProjects((prev) => ({
+    ...prev,
+    [projectId]: isChecked,
+  }));
+};
+
+
+const handleSubmit = async () => {
+  const initiallyAssigned = new Set(projectList.map((p) => p.id.toString()));
+  const changes = [];
+
+  Object.entries(checkedProjects).forEach(([projectId, isChecked]) => {
+    const wasAssigned = initiallyAssigned.has(projectId);
+
+    if (wasAssigned && !isChecked) {
+      changes.push({
+        projectId: projectId,
+        jobRoleId: employee.jobRoleId,
+        status: false,
+      });
+    }
+
+    if (!wasAssigned && isChecked) {
+      changes.push({
+        projectId: projectId,
+        jobRoleId: employee.jobRoleId,
+        status: true,
+      });
+    }
+
+  });
+
+  if (changes.length === 0) {
+    showToast("Make change before.", "info");
+    return;
+  }
+
+  try {
+    setSubmitting(true)
+    await ProjectRepository.updateProjectsByEmployee(employee.id, changes)
+    showToast( "Project assignments updated.", "success" );
+    setSubmitting(false)
+    onClose();
+    refetch(employee.id)
+  } catch (error) {
+    const msg = error.response?.data?.message || error.message || "Error during API call.";
+    showToast( msg, "error" );
+    setSubmitting(false)
+  }
+};
+
+
+
+
+  const handleClosedModal = () => {
+    onClose();
+  };
+
+  const filteredProjects = projects.filter((project) =>
+    project.name.toLowerCase().includes(searchTerm)
+  );
+
+  return (
+    <div className="p-2 p-md-0">
+      <p className="fw-semibold fs-6 m-0">Assign to Project</p>
+
+      <div className="row my-1">
+        <div className="col-12 col-sm-6 col-md-6 mt-2">
+          <input
+            type="text"
+            className="form-control form-control-sm"
+            placeholder="Search projects..."
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="text-center py-4">
+          <div className="spinner-border text-primary" role="status" />
+          <p className="mt-2">Loading projects...</p>
+        </div>
+      ) : (
+        <>
+          <table className="table mt-2 mb-2">
+            <thead>
+              <tr className="text-start">
+                <th>Select Project</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredProjects.length > 0 ? (
+                filteredProjects.map((project) => (
+                  <tr key={project.id}>
+                    <td className="d-flex align-items-center">
+                      <div className="form-check d-flex justify-content-start align-items-center">
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`project-${project.id}`}
+                          checked={checkedProjects[project.id] || false}
+                          onChange={() => handleCheckboxChange( project.id )}
+                          disabled={selectedProjectLoding}
+                          
+                        />
+                        <label
+                          className="form-check-label ms-2"
+                          htmlFor={`project-${project.id}`}
+                        >
+                          {project.name}
+                        </label>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td className="text-center text-muted py-3">No projects found.</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+
+          <div className="d-flex justify-content-center gap-2 mt-2">
+            <button onClick={handleSubmit} className="btn btn-primary btn-sm" disabled={selectedProjectLoding || loading || isSubmitting }>
+              {isSubmitting ? "Please Wait...":"Submit"}
+            </button>
+            <button onClick={handleClosedModal} className="btn btn-secondary btn-sm" disabled={isSubmitting}>
+              Cancel
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AssignToProject;

src/pages/employee/EmployeeList.jsx

@@ -22,6 +22,8 @@ import {
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
 import ConfirmModal from "../../components/common/ConfirmModal";
+import GlobalModel from "../../components/common/GlobalModel";
+import AssignToProject from "./AssignToProject";
 
 const EmployeeList = () => {
   const { profile: loginUser } = useProfile();
@@ -47,7 +49,8 @@ const EmployeeList = () => {
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
   const [employeeLodaing, setemployeeLodaing] = useState(false);
-
+  const [ selectedEmployee, setSelectEmployee ] = useState( null )
+  const [IsOpenAsssingModal,setOpenAssignModal] = useState(false)
   const navigate = useNavigate();
 
   const handleSearch = (e) => {
@@ -189,7 +192,11 @@ const EmployeeList = () => {
     setSelectedEmpFordelete(employee);
     setIsDeleteModalOpen(true);
   };
-
+  const handleCloseAssignModal = () =>
+  {
+    setOpenAssignModal( false )
+    setSelectEmployee(null)
+ }
   return (
     <>
       {isCreateModalOpen && (
@@ -213,7 +220,8 @@ const EmployeeList = () => {
             />
           </div>
         </div>
-      </div>)}
+      </div> )}
+    
 
       {IsDeleteModalOpen && (
         <div
@@ -240,6 +248,11 @@ const EmployeeList = () => {
         </div>
       )}
 
+      {IsOpenAsssingModal && ( <GlobalModel isOpen={IsOpenAsssingModal} closeModal={()=>setOpenAssignModal(false)}>
+        <AssignToProject employee={selectedEmployee} onClose={() => setOpenAssignModal( false )} />
+      </GlobalModel>)}
+     
+
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -642,6 +655,19 @@ const EmployeeList = () => {
                                         <i className="bx bx-cog bx-sm"></i>{" "}
                                         Manage Role
                                       </button>
+                                      <button
+                                        className="dropdown-item py-1"
+                                     
+                                        onClick={() =>
+                                        {
+                                          setSelectEmployee( item ),
+                                          setOpenAssignModal(true)
+                                        }
+                                        }
+                                      >
+                                        <i class='bx bx-select-multiple'></i>{" "}
+                                       Assign Project
+                                      </button>
                                     </>
                                   )}
                                 </div>

src/repositories/ProjectRepository.jsx

@@ -20,7 +20,9 @@ const ProjectRepository = {
   deleteProjectTask:(id)=> api.delete(`/api/project/task/${id}`),
 
   updateProject: (id, data) => api.put(`/api/project/update/${id}`, data),
-  deleteProject: (id) => api.delete(`/projects/${id}`),
+  deleteProject: ( id ) => api.delete( `/projects/${ id }` ),
+  getProjectsByEmployee: ( id ) => api.get( `/api/project/assigned-projects/${ id }` ),
+  updateProjectsByEmployee:(id,data)=>api.post(`/api/project/assign-projects/${id}`,data)
 };
 
 export const TasksRepository = {