From 1d48ea9d5a6310f7a10fe0fd2d0675fb633b5cd8 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Sun, 1 Jun 2025 19:21:41 +0700
Subject: [PATCH] update date clear when search form input type text filled

---
 .../blocks/ListToolbar.tsx                    | 34 ++++++++-----------
 .../blocks/ListToolbar.tsx                    | 26 +++++++-------
 .../hooks/TransactionContext.tsx              | 17 +++++-----
 3 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
index 559857f..37da31e 100644
--- a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
@@ -14,13 +14,11 @@ import {
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
-  // State untuk filter
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
   const [statusApproval, setStatusApproval] = useState<string>('');
   const [searchValue, setSearchValue] = useState<string>('');
   const [typeSearchValue, setSearchTypeValue] = useState<string>('');
 
-  // Set tanggal default saat pertama mount
   useEffect(() => {
     const today = new Date();
     const formatDate = (date: Date) => date.toISOString().split('T')[0];
@@ -30,28 +28,21 @@ const ListToolbar = () => {
     });
   }, []);
 
-  // Fungsi untuk apply semua filter sekaligus saat tombol Filter ditekan
   const handleFilterData = useCallback(() => {
     try {
-      if (!trxDate.from || !trxDate.to) {
-        toast.error('Please select From and To dates');
-        return;
-      }
+      // if (!trxDate.from || !trxDate.to) {
+      //   toast.error('Please select From and To dates');
+      //   return;
+      // }
 
-      // Set filter tanggal
       table.getColumn('transaction_date')?.setFilterValue(trxDate);
-
-      // Set filter status approval
       table.getColumn('status_approve')?.setFilterValue(statusApproval || '');
 
-      // Set filter search type sebagai column filter id 'searchtype'
       table.setColumnFilters((prevFilters) => {
-        // Hapus dulu filter dengan id 'searchtype' dan 'code' agar gak duplikat
         const filtered = prevFilters.filter(
           (f) => f.id !== 'searchtype' && f.id !== 'code'
         );
 
-        // Tambahkan filter baru jika ada
         if (typeSearchValue) {
           filtered.push({ id: 'searchtype', value: typeSearchValue });
         }
@@ -62,7 +53,6 @@ const ListToolbar = () => {
         return filtered;
       });
 
-      // Reset ke halaman pertama
       table.setPageIndex(0);
     } catch (error) {
       toast.error('Error applying filter');
@@ -79,7 +69,9 @@ const ListToolbar = () => {
             <input
               type="date"
               value={trxDate.from}
-              onChange={(e) => settrxDate({ ...trxDate, from: e.target.value })}
+              onChange={(event) =>
+                settrxDate({ ...trxDate, from: event.target.value })
+              }
               name="from"
             />
           </label>
@@ -89,7 +81,9 @@ const ListToolbar = () => {
             <input
               type="date"
               value={trxDate.to}
-              onChange={(e) => settrxDate({ ...trxDate, to: e.target.value })}
+              onChange={(event) =>
+                settrxDate({ ...trxDate, to: event.target.value })
+              }
               name="to"
             />
           </label>
@@ -110,7 +104,10 @@ const ListToolbar = () => {
 
           <Select
             value={typeSearchValue}
-            onValueChange={setSearchTypeValue}
+            onValueChange={(value) => {
+              setSearchTypeValue(value);
+              settrxDate({ from: '', to: '' }); // clear tanggal saat search type dipilih
+            }}
           >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Search Type" />
@@ -132,7 +129,6 @@ const ListToolbar = () => {
             />
           </label>
 
-          {/* Tombol Filter */}
           <Button onClick={handleFilterData}>
             Filter
           </Button>
@@ -147,13 +143,11 @@ const ListToolbar = () => {
                 const today = new Date();
                 const formatDate = (date: Date) => date.toISOString().split('T')[0];
 
-                // Reset semua filter dan tanggal ke hari ini
                 setSearchValue('');
                 setStatusApproval('');
                 settrxDate({ from: formatDate(today), to: formatDate(today) });
                 setSearchTypeValue('');
 
-                // Reset filter di tabel
                 table.getColumn('code')?.setFilterValue('');
                 table.getColumn('status_approve')?.setFilterValue('');
                 table.getColumn('transaction_date')?.setFilterValue('');
diff --git a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
index 72987dc..031d62e 100644
--- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
@@ -28,31 +28,29 @@ const ListToolbar = () => {
 
   const formatDate = (date: Date): string => date.toISOString().split('T')[0];
 
-  // Set tanggal default hari ini saat mount
   useEffect(() => {
     const today = new Date();
     const formatted = formatDate(today);
     settrxDate({ from: formatted, to: formatted });
   }, []);
 
-  // **Hilangkan semua useEffect yang auto apply filter saat input berubah**
-  // Karena kamu mau filter apply hanya lewat tombol Filter
-
-  // Fungsi untuk apply SEMUA filter sekaligus saat tombol Filter diklik
-  const handleFilterData = useCallback(() => {
-    if (!trxDate.from || !trxDate.to) {
-      toast.error('Please select both From and To dates');
-      return;
+  // ✅ Reset tanggal jika typeSearchValue dipilih
+  useEffect(() => {
+    if (typeSearchValue) {
+      settrxDate({ from: '', to: '' });
     }
+  }, [typeSearchValue]);
+
+  const handleFilterData = useCallback(() => {
+    // if (!trxDate.from || !trxDate.to) {
+    //   toast.error('Please select both From and To dates');
+    //   return;
+    // }
 
-    // Terapkan filter tanggal
     table.getColumn('transaction_date')?.setFilterValue(trxDate);
 
-    // Terapkan filter jenis transaksi (kind)
     table.setColumnFilters((prev) => {
-      // Hapus filter 'kind' dan 'searchtype' agar bisa set ulang
       const others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code');
-      // Bangun array baru dengan filter yang diinginkan
       const filters: any[] = [...others];
 
       if (typeValue) filters.push({ id: 'kind', value: typeValue });
@@ -146,6 +144,7 @@ const ListToolbar = () => {
               name="to"
             />
           </label>
+
           <Select value={typeValue} onValueChange={(value) => setTypeValue(value)}>
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Transaction Type" />
@@ -197,7 +196,6 @@ const ListToolbar = () => {
           <Button className="h-7.5" onClick={handleFilterData}>
             Filter
           </Button>
-
         </div>
 
         <div className="ml-auto flex gap-2">
diff --git a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
index 8a3b15b..c6a9da9 100644
--- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
+++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router';
 import DetailTransaction from '../blocks/DetailTransaction';
 import ResendTransaction from '../blocks/ResendTransaction';
 import RollbackTransaction from '../blocks/RollbackTransaction';
+import { start } from 'repl';
 
 interface TransactionProps {
   id: number;
@@ -326,14 +327,14 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
             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 === '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;