feat(admins): add filter functionality to admins list

This commit introduces filtering capabilities to the administrators table, allowing users to refine the list based on specific criteria.

A new `ListHeader` component has been implemented, which now contains the "Create Admin" button and a new "Filter" button. Clicking the filter button opens a modal containing the `AdminListFilters` form. The state for managing the filter modal's visibility is handled within the `useAdminsPresenter` hook. A new `FilterIcon` has also been added to support this feature.

src/components/Tables/admins/AdminListFilters.tsx

@@ -0,0 +1,59 @@
+import InputGroup from "@/components/FormElements/InputGroup";
+import { Select } from "@/components/FormElements/select";
+import { AdminRoles, NotificationChannels } from "@/constants/enums";
+import { getEnumAsArray } from "@/utils/shared";
+import useAdminListFilterPresenter from "./useAdminListFilterPresenter";
+
+interface IProps {}
+
+const AdminListFilters = ({}: IProps) => {
+  const { register } = useAdminListFilterPresenter();
+  return (
+    <form className="grid !min-w-full grid-cols-3 gap-4">
+      <Select
+        {...register("method")}
+        items={getEnumAsArray(NotificationChannels)}
+        label="Method"
+        name="method"
+        placeholder="Method"
+      />
+      <Select
+        {...register("status")}
+        items={getEnumAsArray(NotificationChannels)}
+        label="status"
+        name="status"
+        placeholder="Status"
+      />
+      <InputGroup
+        {...register("email")}
+        name="email"
+        label="email"
+        placeholder="email"
+        type="email"
+      />
+      <Select
+        {...register("role")}
+        name="role"
+        items={getEnumAsArray(AdminRoles)}
+        label="Role"
+        placeholder="Role"
+      />
+      <InputGroup
+        {...register("username")}
+        label="username"
+        name="username"
+        placeholder="username"
+        type="text"
+      />
+      <InputGroup
+        {...register("full_name")}
+        label="full name"
+        name="full_name"
+        placeholder="full name"
+        type="text"
+      />
+    </form>
+  );
+};
+
+export default AdminListFilters;

src/components/Tables/admins/index.tsx

@@ -2,8 +2,8 @@
 
 import { PencilSquareIcon, TrashIcon, UserSettingIcon } from "@/assets/icons";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import ListHeader from "@/components/ui/ListHeader";
 import Modal from "@/components/ui/modal";
-import { _TooltipDefaultParams } from "@/constants/tooltip";
 import Status from "@/components/ui/Status";
 import {
   Table,
@@ -15,8 +15,9 @@ import {
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { AdminStatus } from "@/constants/enums";
-import Link from "next/link";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { Tooltip } from "react-tooltip";
+import AdminListFilters from "./AdminListFilters";
 import ChangeStatusModalContent from "./ChangeStatusModalContent";
 import { useAdminsPresenter } from "./useAdminsPresenter";
 
@@ -32,7 +33,8 @@ const AdminsTable = () => {
     setIsChangeStatusModalOpen,
     columns,
     setCurrentUser,
-    pathName,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
     changeStatus,
     currentUser,
     setStatus,
@@ -41,9 +43,10 @@ const AdminsTable = () => {
 
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
-      <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
-        <Link href={`${pathName}/create`}>Create Admin</Link>
-      </button>
+      <ListHeader
+        onFilter={() => setIsFilterModalOpen(true)}
+        createButtonText="Create Admin"
+      />
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
@@ -143,6 +146,14 @@ const AdminsTable = () => {
           setStatus={setStatus}
         />
       </Modal>
+
+      <Modal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        classNames="w-full"
+      >
+        <AdminListFilters />
+      </Modal>
       {isModalOpen && (
         <ConfirmationModal
           isOpen={isModalOpen}

src/components/Tables/admins/useAdminListFilterPresenter.ts

@@ -0,0 +1,10 @@
+import { useForm } from "react-hook-form";
+
+const useAdminListFilterPresenter = () => {
+  const { register } = useForm();
+  return {
+    register,
+  };
+};
+
+export default useAdminListFilterPresenter;

src/components/Tables/admins/useAdminsPresenter.ts

@@ -14,6 +14,7 @@ import { useForm } from "react-hook-form";
 
 export const useAdminsPresenter = () => {
   const [isChangeStatusModalOpen, setIsChangeStatusModalOpen] = useState(false);
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [currentUser, setCurrentUser] = useState<IUser | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [status, setStatus] = useState<string>(
@@ -79,5 +80,7 @@ export const useAdminsPresenter = () => {
     register,
     errors,
     handleSubmit,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
   };
 };