From 71e6ac9c63bb56db92d8979cab8cbd0b8b3a1143 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 20 Jan 2026 15:34:33 +0700
Subject: [PATCH] fix(FE): fixing url encode for filters

---
 src/components/pages/finance/FinanceTable.tsx | 55 ++++++++++++++-----
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/finance/FinanceTable.tsx b/src/components/pages/finance/FinanceTable.tsx
index 686a6d4e..505e411f 100644
--- a/src/components/pages/finance/FinanceTable.tsx
+++ b/src/components/pages/finance/FinanceTable.tsx
@@ -176,13 +176,18 @@ const FinanceTable = () => {
     startDate: '',
     endDate: '',
   });
-  const [selectedTransactionType, setSelectedTransactionType] =
-    useState<OptionType | null>(null);
-  const [selectedBank, setSelectedBank] = useState<OptionType | null>(null);
-  const [selectedCustomerId, setSelectedCustomerId] =
-    useState<OptionType | null>(null);
-  const [selectedSupplierId, setSelectedSupplierId] =
-    useState<OptionType | null>(null);
+  const [selectedTransactionType, setSelectedTransactionType] = useState<
+    OptionType | OptionType[] | null
+  >(null);
+  const [selectedBank, setSelectedBank] = useState<
+    OptionType | OptionType[] | null
+  >(null);
+  const [selectedCustomerId, setSelectedCustomerId] = useState<
+    OptionType | OptionType[] | null
+  >(null);
+  const [selectedSupplierId, setSelectedSupplierId] = useState<
+    OptionType | OptionType[] | null
+  >(null);
   const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
   const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -229,31 +234,47 @@ const FinanceTable = () => {
   const transactionTypeChangeHandler = (
     val: OptionType | OptionType[] | null
   ) => {
-    setSelectedTransactionType(val as OptionType);
+    setSelectedTransactionType(val);
     setPendingFilters((prev) => ({
       ...prev,
-      transactionType: val ? ((val as OptionType).value as string) : '',
+      transactionType: val
+        ? Array.isArray(val)
+          ? val.map((item) => item.value).join(',')
+          : (val.value as string)
+        : '',
     }));
   };
   const bankChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedBank(val as OptionType);
+    setSelectedBank(val);
     setPendingFilters((prev) => ({
       ...prev,
-      bankId: val ? ((val as OptionType).value as string) : '',
+      bankId: val
+        ? Array.isArray(val)
+          ? val.map((item) => item.value).join(',')
+          : (val.value as string)
+        : '',
     }));
   };
   const customerIdChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedCustomerId(val as OptionType);
+    setSelectedCustomerId(val);
     setPendingFilters((prev) => ({
       ...prev,
-      customerId: val ? ((val as OptionType).value as string) : '',
+      customerId: val
+        ? Array.isArray(val)
+          ? val.map((item) => item.value).join(',')
+          : (val.value as string)
+        : '',
     }));
   };
   const supplierIdChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedSupplierId(val as OptionType);
+    setSelectedSupplierId(val);
     setPendingFilters((prev) => ({
       ...prev,
-      supplierId: val ? ((val as OptionType).value as string) : '',
+      supplierId: val
+        ? Array.isArray(val)
+          ? val.map((item) => item.value).join(',')
+          : (val.value as string)
+        : '',
     }));
   };
   const sortByChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -484,6 +505,7 @@ const FinanceTable = () => {
             value={selectedTransactionType}
             onChange={transactionTypeChangeHandler}
             isClearable
+            isMulti
           />
           <SelectInput
             options={customerOptions}
@@ -494,6 +516,7 @@ const FinanceTable = () => {
             onMenuScrollToBottom={customerLoadMore}
             isLoading={customerIsLoadingOptions}
             isClearable
+            isMulti
           />
           <SelectInput
             options={supplierOptions}
@@ -504,6 +527,7 @@ const FinanceTable = () => {
             onMenuScrollToBottom={supplierLoadMore}
             isLoading={supplierIsLoadingOptions}
             isClearable
+            isMulti
           />
           <SelectInput
             options={
@@ -528,6 +552,7 @@ const FinanceTable = () => {
             onInputChange={bankInputValue}
             onMenuScrollToBottom={bankLoadMore}
             isClearable
+            isMulti
           />
           <SelectInput
             options={sortByOptions}