Add operation types filter to ranges section on account page

components/account/AccountPagination.tsx

 import { config } from "@/Config";
 import Hive from "@/types/Hive";
-import { getOperationButtonTitle } from "@/utils/UI";
-import {
-  convertBooleanArrayToIds,
-  convertIdsToBooleanArray,
-} from "@/lib/utils";
-import useAccountOperationTypes from "@/hooks/api/accountPage/useAccountOperationTypes";
 import JumpToPage from "../JumpToPage";
-import OperationTypesDialog from "../OperationTypesDialog";
+
 import CustomPagination from "../CustomPagination";
 
 interface AccountPaginationProps {
-  accountName: string;
   page: number;
   setPage: (page: number | undefined) => void;
   accountOperations: Hive.OperationsCount;
-  onOperationsSelect: (filters: boolean[]) => void;
-  selectedFilters: boolean[];
 }
 
 const AccountPagination: React.FC<AccountPaginationProps> = ({
-  accountName,
   page,
   setPage,
   accountOperations,
-  onOperationsSelect,
-  selectedFilters,
 }) => {
-  const handleOperationSelect = (filters: number[]) => {
-    onOperationsSelect(convertIdsToBooleanArray(filters));
-  };
-
   const onLatestButtonClick = () => {
     setPage(undefined);
   };
 
-  const { accountOperationTypes } = useAccountOperationTypes(accountName);
-
   return (
     <div className="flex-col w-full">
-      <div className="flex justify-end w-full flex-wrap">
-        <OperationTypesDialog
-          operationTypes={accountOperationTypes}
-          setSelectedOperations={handleOperationSelect}
-          selectedOperations={convertBooleanArrayToIds(selectedFilters)}
-          buttonClassName="bg-theme"
-          triggerTitle={getOperationButtonTitle(
-            convertBooleanArrayToIds(selectedFilters),
-            accountOperationTypes
-          )}
-        />
-      </div>
       <div
         className="flex w-full justify-center flex-wrap my-4"
         data-testid="account-top-bar"

components/account/tabs/operations/OperationsTabContent.tsx

@@ -17,11 +17,15 @@ import { defaultSearchParams } from "@/pages/[accountName]";
 import useOperationsFormatter from "@/hooks/common/useOperationsFormatter";
 import {
   convertBooleanArrayToIds,
+  convertIdsToBooleanArray,
   convertOperationResultsToTableOperations,
 } from "@/lib/utils";
 import Hive from "@/types/Hive";
 import AccountPagination from "../../AccountPagination";
 import useAccountOperations from "@/hooks/api/accountPage/useAccountOperations";
+import useAccountOperationTypes from "@/hooks/api/accountPage/useAccountOperationTypes";
+import OperationTypesDialog from "@/components/OperationTypesDialog";
+import { getOperationButtonTitle } from "@/utils/UI";
 
 interface OpeationTabContentProps {
   liveDataEnabled: boolean;
@@ -90,7 +94,11 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({
     setFilters([]);
   };
 
-  const handleOperationTypeChange = (newFilters: boolean[]) => {
+  const { accountOperationTypes } =
+    useAccountOperationTypes(accountNameFromRoute);
+
+  const handleOperationSelect = (filters: number[]) => {
+    const newFilters = convertIdsToBooleanArray(filters);
     setFilters(newFilters);
     setParams({ ...paramsState, filters: newFilters, page: undefined });
   };
@@ -118,14 +126,11 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({
           >
             {accountOperations && (page || lastPage) && (
               <AccountPagination
-                accountName={accountNameFromRoute}
                 page={page ? page : lastPage || 0}
                 setPage={(page: number | undefined) =>
                   setParams({ ...paramsState, page })
                 }
                 accountOperations={accountOperations}
-                onOperationsSelect={handleOperationTypeChange}
-                selectedFilters={filters}
               />
             )}
           </div>
@@ -240,18 +245,32 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({
         <CardContent>
           <SearchRanges rangesProps={searchRanges} />
           <div className="flex items-center justify-between m-2">
-            <Button
-              onClick={() => handleSearch(true)}
-              data-testid="apply-filters"
-            >
-              <span>Apply filters</span>{" "}
-            </Button>
-            <Button
-              onClick={handleFilterClear}
-              data-testid="clear-filters"
-            >
-              <span>Clear filters</span>{" "}
-            </Button>
+            <div className="flex min-w-[120px] gap-2">
+              <Button
+                onClick={() => handleSearch(true)}
+                data-testid="apply-filters"
+              >
+                <span>Apply filters</span>{" "}
+              </Button>
+            </div>
+            <div className="flex w-full justify-end flex-wrap gap-2">
+              <OperationTypesDialog
+                operationTypes={accountOperationTypes}
+                setSelectedOperations={handleOperationSelect}
+                selectedOperations={convertBooleanArrayToIds(filters)}
+                buttonClassName="bg-theme"
+                triggerTitle={getOperationButtonTitle(
+                  convertBooleanArrayToIds(filters),
+                  accountOperationTypes
+                )}
+              />
+              <Button
+                onClick={handleFilterClear}
+                data-testid="clear-filters"
+              >
+                <span>Clear filters</span>{" "}
+              </Button>
+            </div>
           </div>
         </CardContent>
       </Card>