Filtering according to Dropdown filter.

src/pages/project/ProjectPage.jsx

@@ -49,6 +49,13 @@ const ProjectPage = () => {
   const [selectedStatuses, setSelectedStatuses] = useState(
     PROJECT_STATUS.map((s) => s.id)
   );
+  const handleStatusChange = (statusId) => {
+    setSelectedStatuses((prev) =>
+      prev.includes(statusId)
+        ? prev.filter((id) => id !== statusId)
+        : [...prev, statusId]
+    );
+  };
 
   const contextDispatcher = {
     setMangeProject,
@@ -75,7 +82,7 @@ const ProjectPage = () => {
         />
 
         <div className="card cursor-pointer mb-5">
-          <div className="card-body py-3 px-6 pb-1">           
+          <div className="card-body py-3 px-6 pb-1">
             <div className="d-flex flex-wrap justify-content-between align-items-start">
               {/* LEFT SIDE — DATE TOGGLE BUTTONS */}
               <div className="mb-2">
@@ -192,7 +199,10 @@ const ProjectPage = () => {
           </div>
         </div>
 
-        {coreProjects ? <ProjectsDisplay /> : <ServiceProjectDisplay />}
+        {coreProjects ? <ProjectsDisplay listView={listView}
+          searchTerm={searchTerm}
+          selectedStatuses={selectedStatuses}
+          handleStatusChange={handleStatusChange} /> : <ServiceProjectDisplay />}
       </div>
     </ProjectContext.Provider>
   );

src/pages/project/ProjectsDisplay.jsx

@@ -11,7 +11,7 @@ import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
 import usePagination from "../../hooks/usePagination";
 import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
 
-const ProjectsDisplay = ({ listView, searchTerm }) => {
+const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusChange }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const {
     manageProject,
@@ -21,35 +21,34 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
   } = useProjectContext();
 
   const [projectList, setProjectList] = useState([]);
-  const [selectedStatuses, setSelectedStatuses] = useState(
+
-    PROJECT_STATUS.map((s) => s.id)
-  );
 
   const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
 
   const filteredProjects =
     data?.data?.filter((project) => {
-      const matchesStatus = selectedStatuses.includes(project.projectStatusId);
+      const statusId =
+        project.projectStatusId ??
+        project?.status?.id ??
+        project?.statusId;
+
+      const matchesStatus = selectedStatuses.includes(statusId);
+
       const matchesSearch = project?.name
         ?.toLowerCase()
         ?.includes(searchTerm?.toLowerCase());
+
       return matchesStatus && matchesSearch;
     }) ?? [];
 
+
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
     }
   };
 
-  const handleStatusChange = (statusId) => {
+
-    setCurrentPage(1);
-    setSelectedStatuses((prev) =>
-      prev.includes(statusId)
-        ? prev.filter((id) => id !== statusId)
-        : [...prev, statusId]
-    );
-  };
 
   const sortingProject = (projects) => {
     if (!isLoading && Array.isArray(projects)) {
@@ -98,6 +97,7 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
         <p>{error.message}</p>
       </div>
     );
+    
   return (
     <div className="row">
       {listView ? (
@@ -111,7 +111,7 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
         />
       ) : (
         <ProjectCardView
-          data={data?.data}
+          data={projectList}
           currentPage={currentPage}
           totalPages={data?.totalPages}
           paginate={paginate}