fix search group

src/pages/members/manage-members/blocks/ListToolBar.tsx

@@ -3,14 +3,22 @@ import { UserPlus } from 'lucide-react';
 import { KeenIcon, useDataGrid } from '@/components';
 import { DefaultTooltip } from '@/components';
 import { useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
 
 interface ListToolbarProps {
   createMember: () => void;
   onReload: () => void;
   isReloading: boolean;
+  groups: any;
 }
 
-const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
+const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolbarProps) => {
 
   const [groupFilter, setGroupFilter] = useState('');
   const [usernameFilter, setUsernameFilter] = useState('');
@@ -20,9 +28,11 @@ const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps)
     table.getColumn('username')?.setFilterValue(e.target.value);
   };
 
-  const handleGroupChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setGroupFilter(e.target.value);
-    table.getColumn('group_name')?.setFilterValue(e.target.value);
+  const handleGroupChange = (e: any) => {
+    let value = e.target.value;
+    if (value === '__all__') value = '';
+    setGroupFilter(value);
+    table.getColumn('group_name')?.setFilterValue(value);
   };
 
   return (
@@ -35,15 +45,21 @@ const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps)
               placeholder="Search Username"
               value={usernameFilter}
               onChange={handleUsernameChange}
-              className="input input-sm w-40"
-            />
-            <input
-              type="text"
-              placeholder="Search Group"
-              value={groupFilter}
-              onChange={handleGroupChange}
-              className="input input-sm w-40"
+              className="input w-40"
             />
+            <Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
+              <SelectTrigger className="input input-sm w-40 text-gray-500">
+                <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>
           </div>
           <div className="flex gap-3 items-center">
             <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>