feat(admins): Move filter state to URL query params

Refactors the `useAdminsPresenter` hook to manage the admin table's filter and pagination state through URL search parameters instead of local component state.

This change introduces the `useSearchParams` hook to read the state from the URL and a `useEffect` to synchronize it with the component's state and the filter form. The search function now updates the URL using `router.push`, making the URL the single source of truth.

This enables several key improvements:
- Users can now bookmark and share links to filtered views of the admin table.
- The browser's back and forward buttons will correctly navigate through filter changes.
- The filter form state is preserved on page refresh.

src/components/Tables/admins/useAdminsPresenter.ts

@@ -2,16 +2,16 @@
 
 import { apiDefaultParams } from "@/constants/Api_Params";
 import { AdminStatus } from "@/constants/enums";
-import { deleteEmptyKeys } from "@/utils/shared";
 import {
   useChangeAdminStatus,
   useDeleteAdmin,
   useGetAdminListQuery,
 } from "@/hooks/queries";
-import { API_ENDPOINTS, IUser, TChangeAdminStatusCredentials } from "@/lib/api";
-import { useIsMutating, useQueryClient } from "@tanstack/react-query";
-import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
+import { IUser, TChangeAdminStatusCredentials } from "@/lib/api";
+import { deleteEmptyKeys } from "@/utils/shared";
+import { useIsMutating } from "@tanstack/react-query";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 
 export const useAdminsPresenter = () => {
@@ -24,9 +24,12 @@ export const useAdminsPresenter = () => {
   );
   const isMutating = useIsMutating();
   const router = useRouter();
-  const { register: filterRegister, handleSubmit: handleFilterSubmit } =
-    useForm();
-  const queryClient = useQueryClient();
+  const searchParams = useSearchParams();
+  const {
+    register: filterRegister,
+    handleSubmit: handleFilterSubmit,
+    reset: filterFormReset,
+  } = useForm();
 
   const {
     register,
@@ -38,12 +41,21 @@ export const useAdminsPresenter = () => {
       status: currentUser?.status,
     },
   });
-  const [params, setParams] = useState<Record<string, any>>({
-    ...apiDefaultParams,
-    offset: 0,
-    limit: 10,
-  });
+  const [params, setParams] = useState<Record<string, any>>({});
   const pathName = usePathname();
+
+  useEffect(() => {
+    const newParams: Record<string, any> = {
+      ...apiDefaultParams,
+      offset: 0,
+      limit: 10,
+    };
+    for (const [key, value] of searchParams.entries()) {
+      newParams[key] = value;
+    }
+    setParams(newParams);
+    filterFormReset(newParams);
+  }, [searchParams, filterFormReset]);
   const { data, isPending } = useGetAdminListQuery(params);
   const { mutate: deleteAdmin } = useDeleteAdmin(() => {
     setIsModalOpen(false);
@@ -62,10 +74,10 @@ export const useAdminsPresenter = () => {
   });
 
   const search = (data: any) => {
-    setParams((prevParams) => {
-      const newParams = { ...prevParams, ...data, offset: 0 };
-      return deleteEmptyKeys(newParams);
-    });
+    const newParams = { ...params, ...data, offset: 0 };
+    const cleanedParams = deleteEmptyKeys(newParams);
+    const queryString = new URLSearchParams(cleanedParams).toString();
+    router.push(`${pathName}?${queryString}`);
     setIsFilterModalOpen(false);
   };
   const allUsers = data?.data?.users ?? [];