fix filter

src/Components/DataTable/SearchField.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useFilterStateState } from "../../zustand/Filter";
 import { useDebounce } from "../../utils/useDebounce";
+import { PaginationParams } from "../../api/utils/PaginationParams";
 
 interface Props {
   placeholder: string;
@@ -14,12 +15,16 @@ const SearchField: React.FC<Props> = ({ placeholder, searchBy }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { setFilter,Filter } = useFilterStateState();
+  const { page } = PaginationParams(location);
 
   const handleInputChange = (value: string) => {
     setSearchQuery(value);
   };
   
   const handleInputChangeWithDebounce = useDebounce((value: string) => {
+    if(Number(page) > 1){
+        
+    }
     setFilter({
       [searchBy]: value,
     });

src/Components/Filter/PaginationColumn.tsx

@@ -3,13 +3,20 @@ import { useTranslation } from "react-i18next";
 import { Divider, Select } from "antd";
 import usePagination from "../../Layout/Dashboard/usePagination";
 import { useNavigate } from "react-router-dom";
+import { useFilterStateState } from "../../zustand/Filter";
 
 const PaginationColumn = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { Filter ,setFilter } = useFilterStateState();
+
 
   const handleChange = (value: string) => {
     navigate(`?per_page=${value}`);
+
+    setFilter({
+      per_page:value
+    })
   };
 
   return (

src/Layout/Dashboard/PageTitle.tsx

@@ -22,9 +22,10 @@ const PageTitleComponent = () => {
   return (
     <div className='PageTitle'>
         {(Array.isArray(PageTitle) ? PageTitle : [])?.map((item,index)=>{
+            const lastItem = PageTitle?.length - 1 === index
             return (
-                <div key={index} className='PageTitleItems' onClick={()=>handleNavigate(item?.path)}>
-                        {item?.name}  /
+                <div key={index} className={`PageTitleItems ${lastItem ? "PageTitleLastItem" : ""} `} onClick={()=>handleNavigate(item?.path)}>
+                        {item?.name}  {lastItem ? "" : "/"}
                 </div>
             )
         })}

src/Layout/Dashboard/usePagination.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { PaginationAntd, PaginationMeta } from "../../types/Table";
+import { useFilterStateState } from "../../zustand/Filter";
 
 interface Data {
   meta: PaginationMeta;
@@ -9,6 +10,7 @@ interface Data {
 const usePagination = (data: Data) => {
   const navigate = useNavigate();
   const location = useLocation();
+  const { Filter ,setFilter } = useFilterStateState();
 
   const [pagination, setPagination] = useState<PaginationAntd>({
     current: data?.meta?.current_page || 1,
@@ -27,7 +29,11 @@ const usePagination = (data: Data) => {
   }, [data]);
 
   const handlePageChange = (page: number) => {
-    navigate(`?page=${page}`);
+    // navigate(`?page=${page}`);
+    setFilter({
+      ...Filter,
+      page:page
+    })
   };
 
   return { pagination, handlePageChange };

src/Pages/Admin/QuestionBank/Table.tsx

@@ -14,6 +14,7 @@ const App: React.FC = () => {
   console.log(filterState,"filterState");
   
   const response = useGetAllQuestion({
+    nullable_parent:"null",
     pagination: true,
     ...filterState,
     content:Filter?.content,

src/Pages/Admin/question/Table.tsx

@@ -15,6 +15,7 @@ const App: React.FC = () => {
   const content = Filter?.content ; 
 
   const response = useGetAllQuestion({
+    nullable_parent:"null",
     lessonsIds: [lesson_id],
     pagination: true,
     ...filterState,

src/Styles/DataTable/FillterNav.scss

@@ -48,16 +48,18 @@
   outline: none;
   border: none;
   min-width: 120px;
-  border-radius: 10px;
-  padding: 10px;
+  border-radius: 6px;
+  padding: 6px 10px;
   font-weight: bold;
   background: var(--primary);
   color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 5px;
+  gap: 7px;
+  font-size: 14px;
   svg {
     font-size: 16px;
+    
   }
 }

src/Styles/Layout/PageHeader.scss

@@ -24,7 +24,13 @@
 .PageTitle{
   display: flex;
     gap: 10px;
+    margin-block: 10px;
     .PageTitleItems{
       cursor: pointer;
+      color: #6A7287;
     }
+}
+
+.PageTitleLastItem{
+  color: #202C4B !important;
 }

src/api/helper/useGetQuery.ts

@@ -3,6 +3,7 @@ import useAxios from "./useAxios";
 import { useLocation } from "react-router-dom";
 import { PaginationParams } from "../utils/PaginationParams";
 import { filterParams } from "../utils/filterParams";
+import { useFilterStateState } from "../../zustand/Filter";
 function useGetQuery(
   KEY: string | string[],
   url: string,
@@ -13,10 +14,11 @@ function useGetQuery(
   const { show, pagination, ...remainingParams } = params;
 
   const location = useLocation();
-  
-  const { page, per_page } = PaginationParams(location);
+  const { Filter ,setFilter } = useFilterStateState();
+  const page = Filter?.page ;
+  const per_page = Filter?.per_page ;
+  // const {  per_page } = PaginationParams(location);
 
-  console.log(remainingParams)
   const paramToSend = pagination