fix search and download

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

@@ -3,6 +3,7 @@ import { UserPlus } from 'lucide-react';
 import { KeenIcon, useDataGrid } from '@/components';
 import { DefaultTooltip } from '@/components';
 import { useState } from 'react';
+import { toast } from 'sonner';
 import {
   Select,
   SelectContent,
@@ -10,6 +11,9 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
+import { getAuth } from '@/auth';
+import { apiConfig } from '@/config/api.config';
+  const API_URL = apiConfig.service_customer;
 
 interface ListToolbarProps {
   createMember: () => void;
@@ -19,42 +23,70 @@ interface ListToolbarProps {
 }
 
 const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolbarProps) => {
-
   const [groupFilter, setGroupFilter] = useState('');
-  const [usernameFilter, setUsernameFilter] = useState('');
-  const [msisdnFilter, setMsisdnFilter] = useState('');
-  const {table}=useDataGrid();
+  const { table, reload } = useDataGrid();
+  const [searchValue, setSearchValue] = useState<string>();
+  const [typeSearchValue, setSearchTypeValue] = useState<string>();
   
-  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUsernameFilter(e.target.value);
-    table.getColumn('username')?.setFilterValue(e.target.value);
-  };
-  const handleMsisdnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setMsisdnFilter(e.target.value);
-    table.getColumn('msisdn')?.setFilterValue(e.target.value);
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value)
+    if (typeSearchValue === 'username') {
+      table.getColumn('username')?.setFilterValue(e.target.value);
+      table.getColumn('msisdn')?.setFilterValue('');
+    }
+    if (typeSearchValue === 'msisdn') {
+      table.getColumn('msisdn')?.setFilterValue(e.target.value);
+      table.getColumn('username')?.setFilterValue('');
+    }
+    if (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);
   };
 
+  const generateExportFilters = (groupFilter: string, typeSearchValue: any, searchValue: any): { id: string; value: string }[] => {
+    const filters: { id: string; value: string }[] = [];
+    if (groupFilter) filters.push({ id: 'group_name', value: groupFilter });
+    if (typeSearchValue && searchValue) filters.push({ id: typeSearchValue, value: searchValue });
+    return filters;
+  };
+
+  const exporDataToExcel = async (filters: { id: string; value: string }[]) => {
+    try {
+      const filterParam = encodeURIComponent(JSON.stringify(filters));
+      const response = await fetch(`${API_URL}/customer/export-excel?filter=${filterParam}`, {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${getAuth()?.access_token}`,
+        }
+      });
+      if (!response.ok) throw new Error('Failed to fetch file');
+
+      const blob = await response.blob();
+      const contentDisposition = response.headers.get('content-disposition');
+      const currentYear = new Date().getFullYear();
+      const filename = `TPAY_members_${currentYear}.xlsx`;
+      return { blob, filename };
+    } catch (error:any) {
+      console.error('Error exporting data:', error);
+      toast.error(error)
+    }
+  };
+
   return (
     <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">
-            <input
-              type="text"
-              placeholder="Search Username"
-              value={usernameFilter}
-              onChange={handleUsernameChange}
-              className="input w-40"
-            />
+
             <Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
-              <SelectTrigger className="input input-sm w-40 text-gray-500">
+              <SelectTrigger className="input input-sm w-[250px] h-[31px]">
                 <SelectValue placeholder="Select Group" />
               </SelectTrigger>
               <SelectContent>
@@ -66,15 +98,50 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
                 ))}
               </SelectContent>
             </Select>
-            <input
-              type="text"
-              placeholder="Search Phone Number"
-              value={msisdnFilter}
-              onChange={handleMsisdnChange}
-              className="input w-40"
-            />
+
+            <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>
+
           </div>
           <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5"
+              onClick={async () => {
+                const filters = generateExportFilters(groupFilter, typeSearchValue, searchValue);
+                const result = await exporDataToExcel(filters);
+  
+                if (result) {
+                  const url = window.URL.createObjectURL(result.blob);
+                  const a = document.createElement('a');
+                  a.href = url;
+                  a.download = result.filename;
+                  a.click();
+                  window.URL.revokeObjectURL(url);
+                } else {
+                  toast.error('Failed to export data');
+                }
+              }}
+            >
+              Export Data
+            </Button>
             <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
               Add Data
             </Button>

src/pages/transaction/history-transaction/blocks/ListToolbar.tsx

@@ -134,7 +134,6 @@ const ListToolbar = () => {
     }
   };
 
-
   return (
     <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 justify-between items-center">