From 49f32883f72799d083a2ca7ed28a86006160d352 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Tue, 6 May 2025 10:33:56 +0700
Subject: [PATCH] fix toolbar on transfer type + wallet history

---
 .../transferfee/blocks/ListToolBar.tsx        |  4 +-
 .../transfertype/blocks/ListToolBar.tsx       | 48 +++++++++++--------
 .../hooks/ManageTransferTypeContext.tsx       |  4 +-
 .../wallet-history/blocks/ListToolbar.tsx     |  5 +-
 4 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/ListToolBar.tsx b/src/pages/transfer/transferfee/blocks/ListToolBar.tsx
index 9acdc39..c0a52c5 100644
--- a/src/pages/transfer/transferfee/blocks/ListToolBar.tsx
+++ b/src/pages/transfer/transferfee/blocks/ListToolBar.tsx
@@ -11,7 +11,7 @@
         <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
           <div className="flex justify-between w-full items-center">
             <div className="flex w-[50%] gap-3 items-center">
-              <label className="input input-sm w-1/3">
+              {/* <label className="input input-sm w-1/3">
                 <KeenIcon icon="magnifier" />
                 <input
                   type="text"
@@ -19,7 +19,7 @@
                   value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                   onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
                 />
-              </label>
+              </label> */}
             </div>
             <div className="flex gap-3 items-center">
               <Button
diff --git a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
index 308c074..3580abb 100644
--- a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
+++ b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
@@ -59,21 +59,28 @@ const ListToolbar = () => {
   const unique = (arr: string[]) => Array.from(new Set(arr));
   const types = unique(transferTypes.map((t) => t.type));
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }
+  };
+  
   useEffect(() => {
     const timer = setTimeout(() => {
       table.getColumn('name')?.setFilterValue(searchValue);
       table.setPageIndex(0);
     }, 200);
     return () => clearTimeout(timer);
-  }, [searchValue]);
+  }, [searchValue, table]);
 
   useEffect(() => {
     table.getColumn('type')?.setFilterValue(statusTypes);
-  }, [statusTypes]);
+  }, [statusTypes, table]);
 
   useEffect(() => {
     table.getColumn('status_approval')?.setFilterValue(approval);
-  }, [approval]);
+  }, [approval, table]);
 
   const fetchTransferTypes = async () => {
     try {
@@ -114,16 +121,19 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-1 w-full">
         <div className="flex justify-between w-full items-center mb-3">
           <div className="flex flex-nowrap items-end gap-3 w-full overflow-x-auto">
-            <div className="w-48 shrink-0">
-              <label className="input input-sm w-full text-sm">
+            {/* Fixed Search Input dengan icon yang selalu terlihat */}
+            <div className="relative w-48 shrink-0">
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none ">
                 <KeenIcon icon="magnifier" />
-                <input
-                  type="text"
-                  placeholder="Search Name"
-                  value={searchValue}
-                  onChange={(e) => setSearchValue(e.target.value)}
-                />
-              </label>
+              </div>
+              <input
+                type="text"
+                placeholder="Search Name"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="input input-sm  w-full pl-9 text-ellipsis overflow-hidden"
+                onKeyDown={handleKeyDown}
+              />
             </div>
 
             <div className="min-w-[220px] shrink-0">
@@ -132,8 +142,8 @@ const ListToolbar = () => {
                 value={statusTypes}
                 onValueChange={setStatusTypes}
               >
-                <SelectTrigger className="h-8 text-sm">
-                  <SelectValue placeholder="Select Status Transaction Type" />
+                <SelectTrigger className="h-8">
+                  <SelectValue placeholder="Select Status Transaction Type" className="text-ellipsis overflow-hidden" />
                 </SelectTrigger>
                 <SelectContent className="max-h-64 overflow-y-auto">
                   {types.map((opt) => (
@@ -151,8 +161,8 @@ const ListToolbar = () => {
                 value={approval}
                 onValueChange={setApproval}
               >
-                <SelectTrigger className="h-8 text-sm">
-                  <SelectValue placeholder="Select Status Approval" />
+                <SelectTrigger className="h-8">
+                  <SelectValue placeholder="Select Status Approval" className="text-ellipsis overflow-hidden" />
                 </SelectTrigger>
                 <SelectContent className="max-h-64 overflow-y-auto">
                   <SelectItem value="Y" className="truncate">
@@ -167,7 +177,7 @@ const ListToolbar = () => {
             <DefaultTooltip title={'Reset Filter'} placement={'top'}>
               <Button
                 variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
+                className="h-7.5 disabled:bg-gray-400 shrink-0"
                 onClick={handleClearFilter}
               >
                 <KeenIcon icon="arrow-circle-left" />
@@ -175,7 +185,7 @@ const ListToolbar = () => {
             </DefaultTooltip>
           </div>
 
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2 items-center ml-2 shrink-0">
             <Button
               variant="outline"
               className="h-8 px-3 text-xs"
@@ -196,4 +206,4 @@ const ListToolbar = () => {
   );
 };
 
-export default ListToolbar;
+export default ListToolbar;
\ No newline at end of file
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index 8ae1aed..55fa2a6 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -212,7 +212,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         header: ({ column }) => (
           <DataGridColumnHeader title="Status Transaction Type" column={column} />
         ),
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
@@ -241,7 +241,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         header: ({ column }) => (
           <DataGridColumnHeader title="Status Kind" column={column} />
         ),
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
diff --git a/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx b/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
index e173f59..b5775c1 100644
--- a/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
+++ b/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
@@ -162,6 +162,7 @@ const ListToolbar = () => {
                 placeholder="Search MSISDN"
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
+                className="overflow-hidden text-ellipsis w-full"
               />
             </label>
 
@@ -182,7 +183,7 @@ const ListToolbar = () => {
             <DefaultTooltip title={'Reset Filter'} placement={'top'}>
               <Button
                 variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
+                className="h-8 disabled:bg-gray-400"
                 onClick={handleClearAllFilters}
               >
                 <KeenIcon icon="arrow-circle-left" />
@@ -203,4 +204,4 @@ const ListToolbar = () => {
   );
 };
 
-export default ListToolbar;
+export default ListToolbar;
\ No newline at end of file