add search group in member

src/config/api.config.ts

@@ -22,8 +22,7 @@ const apiConfig: apiConfigProps = {
   transaction: `${API_URL}/x`,
   service_disbursement: `${API_URL}/s`,
   service_notification: `${API_URL}/n`,
-  nationality: `https://tpay.shiblysolution.id/cms/api/mobile/list-country/
-`
+  nationality: `https://tpay.shiblysolution.id/cms/api/mobile/list-country/`
 };
 
 export { apiConfig };

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

@@ -12,7 +12,7 @@ interface ListToolbarProps {
 
 const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
 
-  const [emailFilter, setEmailFilter] = useState('');
+  const [groupFilter, setGroupFilter] = useState('');
   const [usernameFilter, setUsernameFilter] = useState('');
   const {table}=useDataGrid();
   const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -20,9 +20,9 @@ const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps)
     table.getColumn('username')?.setFilterValue(e.target.value);
   };
 
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEmailFilter(e.target.value);
-    table.getColumn('email')?.setFilterValue(e.target.value);
+  const handleGroupChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setGroupFilter(e.target.value);
+    table.getColumn('group_name')?.setFilterValue(e.target.value);
   };
 
   return (
@@ -37,6 +37,13 @@ const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps)
               onChange={handleUsernameChange}
               className="input input-sm w-40"
             />
+            <input
+              type="text"
+              placeholder="Search Group"
+              value={groupFilter}
+              onChange={handleGroupChange}
+              className="input input-sm w-40"
+            />
           </div>
           <div className="flex gap-3 items-center">
             <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>