refactor(FE): Remove unused search params and yup import

src/components/pages/finance/FinanceTable.tsx

@@ -3,7 +3,6 @@ import { CellContext } from '@tanstack/react-table';
 import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { useFormik } from 'formik';
-import * as yup from 'yup';
 
 import Button from '@/components/Button';
 import Card from '@/components/Card';
@@ -174,7 +173,6 @@ const FinanceTable = () => {
   });
 
   // ===== State =====
-  const [searchParams, setSearchParams] = useSearchParams();
   const deleteModal = useModal();
   const [selectedTransactionType, setSelectedTransactionType] = useState<
     OptionType | OptionType[] | null
@@ -254,6 +252,20 @@ const FinanceTable = () => {
     loadMore: bankLoadMore,
   } = useSelect<Bank>(BankApi.basePath, 'id', 'alias');
 
+  const bankSelectOptions = useMemo(() => {
+    if (!isResponseSuccess(bankRawData)) return [];
+
+    return bankOptions.map((bank) => {
+      const bankData = bankRawData.data.find((data) => data.id === bank?.value);
+      return {
+        label: bankData
+          ? `${bankData.alias} - ${bankData.account_number} - ${bankData.owner}`
+          : '',
+        value: bank?.value,
+      };
+    });
+  }, [bankOptions, bankRawData]);
+
   // ===== Handler =====
   const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     filterFormik.setFieldValue('search', e.target.value);
@@ -311,10 +323,6 @@ const FinanceTable = () => {
       val ? ((val as OptionType).value as string) : ''
     );
   };
-  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const newVal = val as OptionType;
-    setPageSize(newVal.value as number);
-  };
   const resetFilterHandler = () => {
     setSelectedTransactionType(null);
     setSelectedBank(null);
@@ -454,18 +462,15 @@ const FinanceTable = () => {
   }, []);
 
   useEffect(() => {
-    // Store current path on mount
     previousPathRef.current = window.location.pathname;
 
     return () => {
       const currentPath = window.location.pathname;
 
-      // if both paths are within /finance module
       const isCurrentPathFinance = currentPath.includes('/finance');
       const isPreviousPathFinance =
         previousPathRef.current?.includes('/finance');
 
-      // reset if we outside finance module entirely
       if (isPreviousPathFinance && !isCurrentPathFinance) {
         resetSearchValue();
       }
@@ -558,22 +563,7 @@ const FinanceTable = () => {
             isMulti
           />
           <SelectInput
-            options={
+            options={bankSelectOptions}
-              isResponseSuccess(bankRawData)
-                ? bankOptions.map((bank) => ({
-                    label:
-                      bankRawData.data.find((data) => data.id === bank?.value)
-                        ?.alias +
-                      ' - ' +
-                      bankRawData.data.find((data) => data.id === bank?.value)
-                        ?.account_number +
-                      ' - ' +
-                      bankRawData.data.find((data) => data.id === bank?.value)
-                        ?.owner,
-                    value: bank?.value,
-                  }))
-                : []
-            }
             label='Bank'
             value={selectedBank}
             onChange={bankChangeHandler}

src/components/pages/finance/FinanceTableFilter.schema.ts

@@ -1,4 +1,3 @@
-import { OptionType } from '@/components/input/SelectInput';
 import * as yup from 'yup';
 
 export type FinanceTableFilterType = {