From 4f620f781d350cc6d435c3d7b246469873962e9d Mon Sep 17 00:00:00 2001
From: unknown <benhurchrinstoper@gmail.com>
Date: Wed, 21 May 2025 16:13:42 +0700
Subject: [PATCH] fix member

---
 .../manage-members/blocks/ListToolBar.tsx     | 86 ++++++++++---------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/pages/members/manage-members/blocks/ListToolBar.tsx b/src/pages/members/manage-members/blocks/ListToolBar.tsx
index 265d15e..951cfd7 100644
--- a/src/pages/members/manage-members/blocks/ListToolBar.tsx
+++ b/src/pages/members/manage-members/blocks/ListToolBar.tsx
@@ -29,25 +29,26 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
   const [typeSearchValue, setSearchTypeValue] = useState<string>();
   
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(e.target.value)
+    e.preventDefault()
+    // setSearchValue(e.target.value)
     if (typeSearchValue === 'username') {
-      table.getColumn('username')?.setFilterValue(e.target.value);
+      table.getColumn('username')?.setFilterValue(searchValue);
       table.getColumn('msisdn')?.setFilterValue('');
     }
     if (typeSearchValue === 'msisdn') {
-      table.getColumn('msisdn')?.setFilterValue(e.target.value);
+      table.getColumn('msisdn')?.setFilterValue(searchValue);
       table.getColumn('username')?.setFilterValue('');
     }
-    if (groupFilter) table.getColumn('group_name')?.setFilterValue(groupFilter);
+    table.getColumn('group_name')?.setFilterValue(groupFilter);
   };
 
   const handleGroupChange = (e: any) => {
     let value = e.target.value;
     if (value === '__all__') value = '';
     setGroupFilter(value);
-    if (typeSearchValue === 'username') table.getColumn('username')?.setFilterValue(searchValue);
-    if (typeSearchValue === 'msisdn') table.getColumn('msisdn')?.setFilterValue(searchValue);
-    table.getColumn('group_name')?.setFilterValue(value);
+    // if (typeSearchValue === 'username') table.getColumn('username')?.setFilterValue(searchValue);
+    // if (typeSearchValue === 'msisdn') table.getColumn('msisdn')?.setFilterValue(searchValue);
+    // table.getColumn('group_name')?.setFilterValue(value);
   };
 
   const generateExportFilters = (groupFilter: string, typeSearchValue: any, searchValue: any): { id: string; value: string }[] => {
@@ -83,43 +84,48 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
-          <div className="flex gap-3 items-center">
 
-            <Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
-              <SelectTrigger className="input input-sm w-[250px] h-[31px]">
-                <SelectValue placeholder="Select Group" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={"__all__"}>All Group</SelectItem>
-                {groups.map((el: any, idx: any) => (
-                  <SelectItem key={idx} value={el.name}>
-                    {el.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+          <form onSubmit={(e:any) => handleSearch(e)}>
+            <div className="flex gap-3 items-center">
+              <Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
+                <SelectTrigger className="input input-sm w-[250px] h-[31px]">
+                  <SelectValue placeholder="Select Group" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={"__all__"}>All Group</SelectItem>
+                  {groups.map((el: any, idx: any) => (
+                    <SelectItem key={idx} value={el.name}>
+                      {el.name}
+                    </SelectItem>
+                  ))}
+                </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="username">Username</SelectItem>
-                <SelectItem value="msisdn">Phone Number</SelectItem>
-              </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="username">Username</SelectItem>
+                  <SelectItem value="msisdn">Phone Number</SelectItem>
+                </SelectContent>
+              </Select>
 
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input
-                type="text"
-                placeholder={`Search ${typeSearchValue || ''}`}  // Use typeSearchValue if it's set, else fallback to an empty string
-                value={searchValue}
-                onChange={(e:any) => handleSearch(e)}
-              />
-            </label>
+              <label className="input input-sm w-1/3">
+                {/* <KeenIcon icon="magnifier" /> */}
+                <input
+                  type="text"
+                  placeholder={`Search ${typeSearchValue || ''}`}  // Use typeSearchValue if it's set, else fallback to an empty string
+                  value={searchValue}
+                  onChange={(e:any) => setSearchValue(e.target.value)}
+                />
+              </label>
+              <Button variant="outline" className="h-7.5">
+                <KeenIcon icon="magnifier" />
+              </Button>
+            </div>
+          </form>
 
-          </div>
           <div className="flex gap-3 items-center">
             <Button
               variant="outline"