added status and search filter filter

src/pages/project/ProjectList.jsx

@@ -110,12 +110,14 @@ const ProjectList = () => {
     indexOfFirstItem,
     indexOfLastItem
   );
-  const totalPages = Math.ceil( filteredProjects.length / itemsPerPage );
+  const totalPages = Math.ceil(filteredProjects.length / itemsPerPage);
-  
+
-    useEffect(() => {
+  useEffect(() => {
-      const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    const tooltipTriggerList = Array.from(
-      tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+      document.querySelectorAll('[data-bs-toggle="tooltip"]')
-    }, []);
+    );
+    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+  }, []);
 
   return (
     <>
@@ -162,8 +164,12 @@ const ProjectList = () => {
                 className={`btn btn-sm ${
                   listView ? "btn-primary" : "btn-outline-primary"
                 }`}
-                onClick={() => setListView( true )}
+                onClick={() => setListView(true)}
-                data-bs-toggle="tooltip" data-bs-offset="0,8" data-bs-placement="top" data-bs-custom-class="tooltip" title="List View"
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,8"
+                data-bs-placement="top"
+                data-bs-custom-class="tooltip"
+                title="List View"
               >
                 <i className="bx bx-list-ul"></i>
               </button>
@@ -173,8 +179,12 @@ const ProjectList = () => {
                 className={`btn btn-sm ${
                   !listView ? "btn-primary" : "btn-outline-primary"
                 }`}
-                onClick={() => setListView( false )}
+                onClick={() => setListView(false)}
-                data-bs-toggle="tooltip" data-bs-offset="0,8" data-bs-placement="top" data-bs-custom-class="tooltip" title="Card View"
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,8"
+                data-bs-placement="top"
+                data-bs-custom-class="tooltip"
+                title="Card View"
               >
                 <i className="bx bx-grid-alt"></i>
               </button>
@@ -202,10 +212,75 @@ const ProjectList = () => {
 
         <div className="row">
           {listView ? (
-            <ProjectListView
+            <div className="table-responsive text-nowrap py-2 ">
-              projectsData={currentItems}
+              <table className="table px-2">
-              onStatusFilterChange={handleStatusFilterFromChild}
+                <thead>
-            />
+                  <tr>
+                    <th className="text-start" colSpan={5}>
+                      Project Name
+                    </th>
+                    <th className="mx-2">Project Manger</th>
+                    <th className="mx-2">START DATE</th>
+                    <th className="mx-2">DEADLINE</th>
+                    <th className="mx-2">Task</th>
+                    <th className="mx-2">Progress</th>
+                    <th className="mx-2">
+                      <div className="dropdown">
+                        <a
+                          className="dropdown-toggle hide-arrow cursor-pointer"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false"
+                        >
+                          Status <i className="bx bx-filter"></i>
+                        </a>
+                        <ul className="dropdown-menu p-2 text-capitalize">
+                          {[
+                            { id: 1, label: "Active" },
+                            { id: 2, label: "On Hold" },
+                            { id: 3, label: "Inactive" },
+                            { id: 4, label: "Completed" },
+                          ].map(({ id, label }) => (
+                            <li key={id}>
+                              <div className="form-check">
+                                <input
+                                  className="form-check-input  "
+                                  type="checkbox"
+                                  checked={selectedStatuses.includes(id)}
+                                  onChange={() => handleStatusChange(id)}
+                                />
+                                <label className="form-check-label">
+                                  {label}
+                                </label>
+                              </div>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </th>
+                    <th
+                      className={`mx-2 ${
+                        HasManageProject ? "d-sm-table-cell" : "d-none"
+                      }`}
+                    >
+                      Action
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="table-border-bottom-0 overflow-auto ">
+                  {currentItems.length === 0 ? (
+                    <tr>
+                      <td colSpan="12" className="text-center py-4">
+                        No projects found
+                      </td>
+                    </tr>
+                  ) : (
+                    currentItems.map((project) => (
+                      <ProjectListView key={project.id} projectData={project} />
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
           ) : (
             currentItems.map((project) => (
               <ProjectCard key={project.id} projectData={project} />

src/pages/project/ProjectListView.jsx

@@ -1,55 +1,31 @@
 import React, { useState, useEffect } from "react";
 import moment from "moment";
-import {useProjects} from "../../hooks/useProjects";
+import { useProjects } from "../../hooks/useProjects";
-import { getProjectStatusName,getProjectStatusColor } from "../../utils/projectStatus";
+import {
+  getProjectStatusName,
+  getProjectStatusColor,
+} from "../../utils/projectStatus";
 import ProgressBar from "../../components/common/ProgressBar";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import ManageProject from "../../components/Project/ManageProject";
 import ProjectRepository from "../../repositories/ProjectRepository";
-import {MANAGE_PROJECT} from "../../utils/constants";
+import { MANAGE_PROJECT } from "../../utils/constants";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
 import showToast from "../../services/toastService";
-import { getCachedData,cacheData } from "../../slices/apiDataManager";
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
 
-const ProjectListView = ( {projectsData, onStatusFilterChange} ) =>{
+const ProjectListView = ({ projectData }) => {
-  const [ projectDetails, setProjectDetails ] = useState( null );
+  const [projectInfo, setProjectInfo] = useState(projectData);
-  const[projectInfo,setProjectInfo] = useState(null)
+  const [projectDetails, setProjectDetails] = useState(null);
   const [showModal, setShowModal] = useState(false);
-  const projects = Array.isArray(projectsData) ? projectsData : [];
+  const navigate = useNavigate();
+  const ManageProject = useHasUserPermission(MANAGE_PROJECT);
 
-  const [ selectedStatuses, setSelectedStatuses ] = useState( [ 1, 2, 3, 4 ] );
+  const handleShow = async () => {
-  const navigate = useNavigate()
-
-  const handleStatusChange = (statusId) => {
-    const updated = selectedStatuses.includes(statusId)
-      ? selectedStatuses.filter((id) => id !== statusId)
-      : [...selectedStatuses, statusId];
-
-    setSelectedStatuses(updated);
-    onStatusFilterChange(updated); 
-  };
-
-  useEffect(() => {
-    onStatusFilterChange(selectedStatuses);
-  }, []);
-
-  const getProgress = (planned, completed) => {
-    return (completed * 100) / planned + "%";
-  };
-  const getProgressInNumber = (planned, completed) => {
-    return (completed * 100) / planned;
-  };
-  const filteredProjects = projects.filter((project) =>
-    selectedStatuses.includes(project.projectStatusId)
-  );
-
-  const handleShow = async ( project) =>
-  {
-    setProjectInfo(project)
     try {
       const response = await ProjectRepository.getProjectByprojectId(
-        project.id
+        projectInfo.id
       );
       setProjectDetails(response.data);
       setShowModal(true);
@@ -57,8 +33,22 @@ const ProjectListView = ( {projectsData, onStatusFilterChange} ) =>{
       showToast("Failed to load project details", "error");
     }
   };
+
+  const getProgress = (planned, completed) => {
+    return (completed * 100) / planned + "%";
+  };
+  const getProgressInNumber = (planned, completed) => {
+    return (completed * 100) / planned;
+  };
+
   const handleClose = () => setShowModal(false);
-  const handleFormSubmit = (updatedProject,projectInfo) => {
+
+
+  const handleViewProject = () => {
+    navigate(`/projects/${projectData.id}`);
+  };
+
+  const handleFormSubmit = (updatedProject) => {
     if (projectInfo?.id) {
       ProjectRepository.updateProject(projectInfo.id, updatedProject)
         .then((response) => {
@@ -68,7 +58,7 @@ const ProjectListView = ( {projectsData, onStatusFilterChange} ) =>{
             building: projectDetails?.building,
           };
 
-          setProjectInfo(updatedProject);
+          setProjectInfo( updatedProjectData );
 
           if (getCachedData(`projectinfo-${projectInfo.id}`)) {
             cacheData(`projectinfo-${projectInfo.id}`, updatedProjectData);
@@ -84,7 +74,6 @@ const ProjectListView = ( {projectsData, onStatusFilterChange} ) =>{
             cacheData("projectslist", updatedProjectsList);
           }
           showToast("Project updated successfully.", "success");
-
           setShowModal(false);
         })
         .catch((error) => {
@@ -92,10 +81,9 @@ const ProjectListView = ( {projectsData, onStatusFilterChange} ) =>{
         });
     }
   };
-
+  return (
-  return (<>
+    <>
-  
+      {showModal && projectDetails && (
-  {showModal && projectDetails && (
         <div
           className="modal fade show"
           tabIndex="-1"
@@ -110,157 +98,101 @@ const ProjectListView = ( {projectsData, onStatusFilterChange} ) =>{
           />
         </div>
       )}
-    <div className="table-responsive text-nowrap py-2 ">
+
-      <table className="table px-2">
+      <tr className="py-8">
-        <thead>
+        <td className="text-start" colSpan={5}>
-          <tr>
+          <strong
-            <th className="text-start" colSpan={5}>
+            className="text-primary cursor-pointer"
-              Project Name
+            onClick={() => navigate(`/projects/${projectInfo.id}`)}
-            </th>
+          >
-            <th className="mx-2">Project Manger</th>
+            {projectInfo.name}
-            <th className="mx-2">START DATE</th>
+          </strong>
-            <th className="mx-2">DEADLINE</th>
+        </td>
-            <th className="mx-2">Task</th>
+        <td className="text-start small">{projectInfo.contactPerson}</td>
-            <th className="mx-2">Progress</th>
+        <td className="small text-start">
-            <th className="mx-2">
+          <small>
-              <div className="dropdown">
+            {projectInfo.startDate
+              ? moment(projectInfo.startDate).format("DD-MMM-YYYY")
+              : "NA"}
+          </small>
+        </td>
+        <td className="mx-2 text-start small">
+          {projectInfo.endDate
+            ? moment(projectInfo.endDate).format("DD-MMM-YYYY")
+            : "NA"}
+        </td>
+        <td className="mx-2 text-start small">{projectInfo.plannedWork}</td>
+        <td className="py-6 mx-2 text-start small align-items-center">
+          <ProgressBar
+            plannedWork={projectInfo.plannedWork}
+            completedWork={projectInfo.completedWork}
+            className="mb-0"
+            height="4px"
+          />
+        </td>
+
+        <td className="mx-6">
+          <p className="mb-0">
+            <span
+              className={`badge ${getProjectStatusColor(
+                projectInfo.projectStatusId
+              )}`}
+            >
+              {getProjectStatusName(projectInfo.projectStatusId)}
+            </span>
+          </p>
+        </td>
+
+        <td className={`mx-2 ${ManageProject ? "d-sm-table-cell":"d-none"}`}>
+          <div className="dropdown z-2">
+            <button
+              type="button"
+              className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <i
+                className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,8"
+                data-bs-placement="top"
+                data-bs-custom-class="tooltip-dark"
+                title="More Action"
+              ></i>
+            </button>
+            <ul className="dropdown-menu dropdown-menu-end">
+              <li>
                 <a
-                  className="dropdown-toggle hide-arrow cursor-pointer"
+                  aria-label="click to  View details"
-                  data-bs-toggle="dropdown"
+                  className="dropdown-item"
-                  aria-expanded="false"
+                  onClick={() => navigate(`/projects/${projectInfo.id}`)}
                 >
-                  Status <i className="bx bx-filter"></i>
+                  <i className="bx bx-detail me-2"></i>
+                  <span className="align-left">View details</span>
                 </a>
-                <ul className="dropdown-menu p-2 text-capitalize">
+              </li>
-                  {[
-                    { id: 1, label: "Active" },
-                    { id: 2, label: "On Hold" },
-                    { id: 3, label: "Inactive" },
-                    { id: 4, label: "Completed" },
-                  ].map(({ id, label }) => (
-                    <li key={id}>
-                      <div className="form-check">
-                        <input
-                          className="form-check-input  "
-                          type="checkbox"
-                          checked={selectedStatuses.includes(id)}
-                          onChange={() => handleStatusChange( id )}
-                          
-                        />
-                        <label className="form-check-label">{label}</label>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </th>
-            <th className="mx-2">Action</th>
-          </tr>
-        </thead>
-        <tbody
-          className="table-border-bottom-0 overflow-auto "
-          style={{ maxHeight: "50%", minHeight: "40%" }}
-        >
-          {filteredProjects.length === 0 ? (
-            <tr>
-              <td colSpan="12" className="text-center py-4">
-                No projects found 
-              </td>
-            </tr>
-          ) : (
-            filteredProjects.map((project) => (
-              <tr key={project.id} className="py-8">
-                <td className="text-start" colSpan={5}>
-                  <strong className="text-primary cursor-pointer" onClick={()=>navigate(`/projects/${project.id}`)}>{project.name}</strong>
-                </td>
-                <td className="text-start small">{project.contactPerson}</td>
-                <td className="small text-start">
-                  <small>
-                    {project.startDate
-                      ? moment(project.startDate).format("DD-MMM-YYYY")
-                      : "NA"}
-                  </small>
-                </td>
-                <td className="mx-2 text-start small">
-                  {project.endDate
-                    ? moment(project.endDate).format("DD-MMM-YYYY")
-                    : "NA"}
-                </td>
-                <td className="mx-2 text-start small">{project.plannedWork}</td>
-                <td className="py-6 mx-2 text-start small align-items-center">
-                  <ProgressBar plannedWork={project.plannedWork} completedWork={project.completedWork} className="mb-0" height="4px"/>
-                </td>
-
-                <td className="mx-6">
-                  <p className="mb-0">
-                    <span
-                      className={`badge ${getProjectStatusColor(
-                        project.projectStatusId
-                      )}`}
-                    >
-                      {getProjectStatusName(project.projectStatusId)}
-                    </span>
-                  </p>
-                </td>
-
-                <td className="mx-2">
-                <div className="dropdown z-2">
-                  <button
-                    type="button"
-                    className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    <i
-                      className="bx bx-dots-vertical-rounded bx-sm text-muted"
-                      data-bs-toggle="tooltip"
-                      data-bs-offset="0,8"
-                      data-bs-placement="top"
-                      data-bs-custom-class="tooltip-dark"
-                      title="More Action"
-                    ></i>
-                  </button>
-                  <ul className="dropdown-menu dropdown-menu-end">
-                    <li>
-                      <a
-                        aria-label="click to  View details"
-                        className="dropdown-item"
-                        onClick={()=> navigate(`/projects/${project.id}`)}
-                      >
-                        <i className="bx bx-detail me-2"></i>
-                        <span className="align-left">View details</span>
-                      </a>
-                    </li>
-
-                    <li  onClick={()=>handleShow(project)}>
-                      <a className="dropdown-item">
-                        <i className="bx bx-pencil me-2"></i>
-                        <span className="align-left">Modify</span>
-                      </a>
-                    </li>
-                    <li
-                      onClick={() =>
-                        navigate(
-                          `/activities/records?project=${project.id}`
-                        )
-                      }
-                    >
-                      <a className="dropdown-item">
-                        <i className="bx bx-task me-2"></i>
-                        <span className="align-left">Activities</span>
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                </td>
-              </tr>
-            ))
-          )}
-        </tbody>
-      </table>
-    </div>
-  </>
 
+              <li onClick={handleShow}>
+                <a className="dropdown-item">
+                  <i className="bx bx-pencil me-2"></i>
+                  <span className="align-left">Modify</span>
+                </a>
+              </li>
+              <li
+                onClick={() =>
+                  navigate(`/activities/records?project=${projectInfo.id}`)
+                }
+              >
+                <a className="dropdown-item">
+                  <i className="bx bx-task me-2"></i>
+                  <span className="align-left">Activities</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </td>
+      </tr>
+    </>
   );
 };