From f0ed1cebe6f5813b2c10fdaea773b876477f2d44 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Tue, 6 May 2025 17:45:25 +0700
Subject: [PATCH] update method search

---
 .../blocks/ListToolbar.tsx                    | 40 +++++++++-
 .../hooks/ApprovalTransactionContext.tsx      | 44 +++++++++--
 .../blocks/ListToolbar.tsx                    | 61 +++++++++++----
 .../hooks/TransactionContext.tsx              | 78 ++++++++++---------
 4 files changed, 162 insertions(+), 61 deletions(-)

diff --git a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
index e5f74f2..a81aea3 100644
--- a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
@@ -33,9 +33,10 @@ const ListToolbar = () => {
     return date.toISOString().split('T')[0];
   };
 
-  const [searchValue, setSearchValue] = useState<string>(
-    (table.getColumn('code')?.getFilterValue() as string) ?? ''
-  );
+  const [searchValue, setSearchValue] = useState<string>();
+  const [typeSearchValue, setSearchTypeValue] = useState<string>();
+
+
 
   // useEffect to set the default date values
   useEffect(() => {
@@ -56,6 +57,19 @@ const ListToolbar = () => {
     }
   }, [trxDate, table]);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // Add search type filter to column filters
+      table.setColumnFilters((prev) => [
+        ...prev.filter((f) => f.id !== 'searchtype'),
+        { id: 'searchtype', value: typeSearchValue },
+      ]);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [typeSearchValue, table]);
+
+
   useEffect(() => {
     const timer = setTimeout(() => {
       table.getColumn('code')?.setFilterValue(searchValue);
@@ -117,11 +131,27 @@ const ListToolbar = () => {
             </SelectContent>
           </Select>
 
+          <Select
+            value={typeSearchValue}
+            onValueChange={(value) => {
+              setSearchTypeValue(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[250px] h-[31px]">
+              <SelectValue placeholder="Select Search Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="msisdn">MSISDN</SelectItem>
+              <SelectItem value="fullname">FULLNAME</SelectItem>
+              <SelectItem value="trxid">TRANSACTION ID</SelectItem>
+            </SelectContent>
+          </Select>
+
           <label className="input input-sm w-1/3">
             <KeenIcon icon="magnifier" />
             <input
               type="text"
-              placeholder="Search Transaction ID, MSISDN, Or Full Name Customer"
+              placeholder={`Search ${typeSearchValue || ''}`}  // Use typeSearchValue if it's set, else fallback to an empty string
               value={searchValue}
               onChange={(event) => setSearchValue(event.target.value)}
             />
@@ -146,6 +176,8 @@ const ListToolbar = () => {
                   to: formatDate(today),
                 });
 
+                setSearchTypeValue('');
+
                 table.getColumn('code')?.setFilterValue('');
                 table.getColumn('status_approve')?.setFilterValue('');
                 table.setPageIndex(0);
diff --git a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx b/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
index f1cfb9f..3022287 100644
--- a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
+++ b/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
@@ -270,19 +270,49 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         });
       }
 
+      
+      // ✅ Declare formattedFilter early
       const formattedFilter: any = {
         "Transactions.transaction_date": {
           from: `${startdate} 00:00:00`,
           to: `${enddate} 23:59:59`
         }
       };
-      
-      if (transactioncode) {
-        formattedFilter["$or"] = [
-          { "Transactions.code": { like: `%${transactioncode}%` } },
-          { "Transactions.msisdn": { like: `${transactioncode}` } },
-          { "origin_customer.fullname": { like: `${transactioncode}` } }
-        ];
+
+      if (Array.isArray(filter)) {
+        let searchType = '';
+        let codeValue = '';
+
+        // Ambil code dan searchtype dulu
+        filter.forEach((f: any) => {
+          if (f.id === 'code' && f.value) {
+            codeValue = f.value;
+          }
+
+          if (f.id === 'searchtype' && f.value) {
+            searchType = f.value;
+          }
+
+          if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
+            startdate = f.value.from;
+            enddate = f.value.to;
+            formattedFilter["Transactions.transaction_date"] = {
+              from: `${startdate} 00:00:00`,
+              to: `${enddate} 23:59:59`
+            };
+          }
+        });
+
+        // Terapkan berdasarkan searchtype + code
+        if (searchType && codeValue) {
+          if (searchType === "msisdn") {
+            formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
+          } else if (searchType === "fullname") {
+            formattedFilter["origin_customer.fullname"] = { like: `%${codeValue}%` };
+          } else if (searchType === "trxid") {
+            formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
+          }
+        }
       }
 
       // Handle approval status filter
diff --git a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
index a37670b..9829ff1 100644
--- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
@@ -15,9 +15,7 @@ const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [searchValue, setSearchValue] = useState<string>(
-    (table.getColumn('code')?.getFilterValue() as string) ?? ''
-  );
+  const [searchValue, setSearchValue] = useState<string>();
 
   // const [statusValue, setStatusValue] = useState<string>(
   //   (table.getColumn('status')?.getFilterValue() as string) ?? ''
@@ -27,18 +25,12 @@ const ListToolbar = () => {
     (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
   );
 
+  const [typeSearchValue, setSearchTypeValue] = useState<string>();
+
   const formatDate = (date: Date): string => {
     return date.toISOString().split('T')[0];
   };
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('code')?.setFilterValue(searchValue);
-      table.setPageIndex(0);
-    }, 200);
-
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
 
   // useEffect(() => {
   //   const timer = setTimeout(() => {
@@ -59,6 +51,30 @@ const ListToolbar = () => {
     return () => clearTimeout(timer);
   }, [typeValue, table]);
 
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // Add search type filter to column filters
+      table.setColumnFilters((prev) => [
+        ...prev.filter((f) => f.id !== 'searchtype'),
+        { id: 'searchtype', value: typeSearchValue },
+      ]);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [typeSearchValue, table]);
+
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('code')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
+
   useEffect(() => {
     const today = new Date();
     // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
@@ -135,8 +151,8 @@ const ListToolbar = () => {
               setTypeValue(value);
             }}
           >
-            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
-              <SelectValue placeholder="Select Type" />
+            <SelectTrigger className="input input-sm w-[250px] h-[31px]">
+              <SelectValue placeholder="Select Transaction Type" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="T">TRANSFER</SelectItem>
@@ -148,11 +164,27 @@ const ListToolbar = () => {
             </SelectContent>
           </Select>
 
+          <Select
+            value={typeSearchValue}
+            onValueChange={(value) => {
+              setSearchTypeValue(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[250px] h-[31px]">
+              <SelectValue placeholder="Select Search Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="msisdn">MSISDN</SelectItem>
+              <SelectItem value="fullname">FULLNAME</SelectItem>
+              <SelectItem value="trxid">TRANSACTION ID</SelectItem>
+            </SelectContent>
+          </Select>
+
           <label className="input input-sm w-1/3">
             <KeenIcon icon="magnifier" />
             <input
               type="text"
-              placeholder="Search Transaction ID, MSISDN, Or Full Name Customer"
+              placeholder={`Search ${typeSearchValue || ''}`}  // Use typeSearchValue if it's set, else fallback to an empty string
               value={searchValue}
               onChange={(event) => setSearchValue(event.target.value)}
             />
@@ -171,6 +203,7 @@ const ListToolbar = () => {
 
                 // Only reset filters excluding from and to
                 setSearchValue('');
+                setSearchTypeValue('');
                 // setStatusValue('');
                 setTypeValue('');
                 settrxDate({
diff --git a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
index f0063e2..8e78c1c 100644
--- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
+++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
@@ -236,58 +236,64 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
       const today = new Date();
       const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
 
-      // Default values
       let startdate = firstDayOfMonth.toISOString().split('T')[0];
       let enddate = today.toISOString().split('T')[0];
       let transactioncode = '';
-      // let transactionstatus = '';
-      let type = ''
-
-      if (Array.isArray(filter)) {
-        // console.log(filter);
-        filter.forEach((f: any) => {
-          if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
-            startdate = f.value.from;
-            enddate = f.value.to;
-          }
-
-          if (f.id === 'code' && f.value) {
-            transactioncode = f.value;
-          }
-
-          // if (f.id === 'status' && f.value) {
-          //   transactionstatus = f.value;
-          // }
-
-          if (f.id === 'kind' && f.value) {
-            type = f.value;
-          }
-        });
-      }
+      let type = '';
 
+      // ✅ Declare formattedFilter early
       const formattedFilter: any = {
         "Transactions.transaction_date": {
           from: `${startdate} 00:00:00`,
           to: `${enddate} 23:59:59`
         }
       };
-      
-      if (transactioncode) {
-        formattedFilter["$or"] = [
-          { "Transactions.code": { like: `%${transactioncode}%` } },
-          { "Transactions.msisdn": { like: `${transactioncode}` } },
-          { "origin_customer.fullname": { like: `${transactioncode}` } }
-        ];
+
+      if (Array.isArray(filter)) {
+        let searchType = '';
+        let codeValue = '';
+
+        // Ambil code dan searchtype dulu
+        filter.forEach((f: any) => {
+          if (f.id === 'code' && f.value) {
+            codeValue = f.value;
+          }
+
+          if (f.id === 'searchtype' && f.value) {
+            searchType = f.value;
+          }
+
+          if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
+            startdate = f.value.from;
+            enddate = f.value.to;
+            formattedFilter["Transactions.transaction_date"] = {
+              from: `${startdate} 00:00:00`,
+              to: `${enddate} 23:59:59`
+            };
+          }
+
+          if (f.id === 'kind' && f.value) {
+            type = f.value;
+          }
+        });
+
+        // Terapkan berdasarkan searchtype + code
+        if (searchType && codeValue) {
+          if (searchType === "msisdn") {
+            formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
+          } else if (searchType === "fullname") {
+            formattedFilter["origin_customer.fullname"] = { like: `%${codeValue}%` };
+          } else if (searchType === "trxid") {
+            formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
+          }
+        }
       }
 
-      // if (transactionstatus) {
-      //   formattedFilter["Transactions.status"] = transactionstatus;
-      // }
 
       if (type) {
         formattedFilter["Transactions.kind"] = type;
       }
-      
+
       const response = await GetData(`${API_URL}/transaction/history`, {
         limit,
         page: page + 1,