From 545e7016f9ca97088d81280b6de0ea576ebda0a1 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 5 May 2025 12:53:19 +0700
Subject: [PATCH] fixing styling clear filter

---
 .../transfertype/blocks/ListToolBar.tsx       | 115 ++++++++++--------
 .../wallet-history/blocks/ListToolbar.tsx     |  12 +-
 2 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
index d49caa7..308c074 100644
--- a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
+++ b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
@@ -111,24 +111,71 @@ const ListToolbar = () => {
 
   return (
     <div className="card-header flex-wrap border-b-0 px-5">
-      <div className="flex flex-wrap gap-1  w-full">
+      <div className="flex flex-wrap gap-1 w-full">
         <div className="flex justify-between w-full items-center mb-3">
-          <div className="flex w-[34%] gap-1 items-center">
-            <label className="input input-sm w-full text-sm">
-              <KeenIcon icon="magnifier" />
-              <input
-                type="text"
-                placeholder="Search Transaction Type Name"
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-              />
-            </label>
+          <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">
+                <KeenIcon icon="magnifier" />
+                <input
+                  type="text"
+                  placeholder="Search Name"
+                  value={searchValue}
+                  onChange={(e) => setSearchValue(e.target.value)}
+                />
+              </label>
+            </div>
+
+            <div className="min-w-[220px] shrink-0">
+              <Select
+                key={`type-filter-${statusTypes}`}
+                value={statusTypes}
+                onValueChange={setStatusTypes}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Select Status Transaction Type" />
+                </SelectTrigger>
+                <SelectContent className="max-h-64 overflow-y-auto">
+                  {types.map((opt) => (
+                    <SelectItem key={opt} value={opt} className="truncate">
+                      {typeLabelMap[opt] ?? opt}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="min-w-[220px] shrink-0">
+              <Select
+                key={`approval-filter-${approval}`}
+                value={approval}
+                onValueChange={setApproval}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Select Status Approval" />
+                </SelectTrigger>
+                <SelectContent className="max-h-64 overflow-y-auto">
+                  <SelectItem value="Y" className="truncate">
+                    Yes
+                  </SelectItem>
+                  <SelectItem value="N" className="truncate">
+                    No
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <DefaultTooltip title={'Reset Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                onClick={handleClearFilter}
+              >
+                <KeenIcon icon="arrow-circle-left" />
+              </Button>
+            </DefaultTooltip>
           </div>
 
           <div className="flex gap-2 items-center">
-            <Button variant="outline" className="h-8 px-3 text-xs" onClick={handleClearFilter}>
-              Clear
-            </Button>
             <Button
               variant="outline"
               className="h-8 px-3 text-xs"
@@ -144,46 +191,6 @@ const ListToolbar = () => {
           </div>
         </div>
 
-        <div className="flex flex-wrap gap-2 w-full">
-          <div className="min-w-[220px]">
-            <Select
-              key={`type-filter-${statusTypes}`}
-              value={statusTypes}
-              onValueChange={setStatusTypes}
-            >
-              <SelectTrigger className="h-8 text-sm">
-                <SelectValue placeholder="Select Status Transaction Type" />
-              </SelectTrigger>
-              <SelectContent className="w-[var(--radix-select-trigger-width)] max-h-64 overflow-y-auto">
-                {types.map((opt) => (
-                  <SelectItem key={opt} value={opt} className="truncate">
-                    {typeLabelMap[opt] ?? opt}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="min-w-[220px]">
-            <Select
-              key={`approval-filter-${approval}`}
-              value={approval}
-              onValueChange={setApproval}
-            >
-              <SelectTrigger className="h-8 text-sm">
-                <SelectValue placeholder="Select Status Approval" />
-              </SelectTrigger>
-              <SelectContent className="w-[var(--radix-select-trigger-width)] max-h-64 overflow-y-auto">
-                <SelectItem value="Y" className="truncate">
-                  Yes
-                </SelectItem>
-                <SelectItem value="N" className="truncate">
-                  No
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
       </div>
     </div>
   );
diff --git a/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx b/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
index ff21a0a..6e2c9a2 100644
--- a/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
+++ b/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
@@ -182,9 +182,15 @@ const ListToolbar = () => {
           </div>
 
           <div className="flex gap-3 items-center">
-            <Button variant="outline" size="sm" onClick={handleClearAllFilters}>
-              Clear
-            </Button>
+          <DefaultTooltip title={'Reset Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                onClick={handleClearAllFilters}
+              >
+                <KeenIcon icon="arrow-circle-left" />
+              </Button>
+            </DefaultTooltip>
             <DefaultTooltip title={'Refresh'} placement={'top'}>
               <Button variant="outline" className="h-7.5" onClick={handleRefresh}>
                 <KeenIcon icon="arrows-circle" />