Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -268,13 +268,16 @@ const DashboardHomePage = () => {
         ) : null}
 
         <div className="flex space-x-4 mt-5">
-          {bankaccount?.data && bankaccount?.data.length > 0 && getAuth()?.statusbalance=='Y' ? (
+          {bankaccount?.data && bankaccount?.data.length > 0 
-            bankaccount?.data.map((bankaccountdatas: { amount: string, creditlimit: string, monthlylimit: string; wallet: string; }, index: number) => (
+          && getAuth()?.statusbalance=='Y' 
+          ? (
+            bankaccount?.data.map((bankaccountdatas: { id_balance:string,amount: string, credit_limit: string, monthly_limit: string; wallet: string; }, index: number) => (
               <BankSaldo
                 title={bankaccountdatas.wallet}
                 balance={bankaccountdatas.amount}
-                creditLimit={bankaccountdatas.creditlimit}
+                creditLimit={bankaccountdatas.credit_limit}
-                monthlyLimit={bankaccountdatas.monthlylimit}
+                monthlyLimit={bankaccountdatas.monthly_limit}
+                idbalance={bankaccountdatas.id_balance}
               />
             ))
           ) : (

src/pages/dashboards/home/blocks/BankSaldo.tsx

@@ -1,20 +1,27 @@
-// BankSaldo.tsx
+import React, { useState } from 'react';
-import { Wallet } from "lucide-react";
+import { Wallet } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import ShowDetailWalletDialog from './ShowDetailWalletDialog';
 
 interface AccountCardProps {
     title: string;
     balance: string;
     creditLimit: string;
     monthlyLimit: string;
+    idbalance: string;
 }
 
-export const BankSaldo = ({
+export const BankSaldo: React.FC<AccountCardProps> = ({
     title,
     balance,
     creditLimit,
     monthlyLimit,
-}: AccountCardProps) => {
+    idbalance,
+}) => {
+    const [showDialog, setShowDialog] = useState(false);
+
     return (
+        <>
             <div className="w-full max-w-xs bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
                 <div className="h-1 bg-red-500" />
                 <div className="p-4 space-y-4">
@@ -23,9 +30,9 @@ export const BankSaldo = ({
                         <Wallet className="h-5 w-5 text-gray-500" />
                     </div>
                     <div className="text-2xl font-bold text-gray-800">
-                    {new Intl.NumberFormat("en-US", {
+                        {new Intl.NumberFormat('en-US', {
-                        style: "currency",
+                            style: 'currency',
-                        currency: "USD",
+                            currency: 'USD',
                             minimumFractionDigits: 2,
                             maximumFractionDigits: 2,
                         }).format(parseFloat(balance))}
@@ -39,24 +46,27 @@ export const BankSaldo = ({
                             <span>Monthly Limit:</span>
                             <span>{monthlyLimit}</span>
                         </div>
+                        <div className="flex justify-between mt-3">
+                            <Button
+                                variant="outline"
+                                className="h-7.5"
+                                onClick={() => setShowDialog(true)}
+                            >
+                                Detail Wallet
+                            </Button>
                         </div>
                     </div>
                 </div>
+            </div>
+
+            {showDialog && (
+                <ShowDetailWalletDialog
+                    open={showDialog}
+                    onClose={() => setShowDialog(false)}
+                    idbalance={idbalance}
+                />
+            )}
+        </>
     );
 };
-
+export default BankSaldo;
-interface AccountCardsProps {
-    accounts: AccountCardProps[];
-}
-
-export const AccountCards = ({ accounts }: AccountCardsProps) => {
-    return (
-        <div className="flex flex-wrap gap-4 justify-center">
-            {accounts.map((account, index) => (
-                <BankSaldo key={index} {...account} />
-            ))}
-        </div>
-    );
-};
-
-export default BankSaldo

src/pages/dashboards/home/blocks/ShowDetailWalletDialog.tsx

@@ -0,0 +1,336 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from '@/components/ui/dialog';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { DataGridColumnHeader, DataGridProvider } from '@/components';
+import { Button } from '@/components/ui/button';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { DefaultTooltip, KeenIcon } from '@/components';
+
+interface ShowDetailWalletDialogProps {
+    open: boolean;
+    onClose: () => void;
+    idbalance: string;
+}
+
+interface TransferType {
+    id: string;
+    name: string;
+}
+
+const formatDate = (date: Date) => date.toLocaleDateString('sv-SE');
+const getDefaultDateRange = () => {
+    const today = new Date();
+    const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+    return {
+        from: formatDate(sevenDaysAgo),
+        to: formatDate(today),
+    };
+};
+
+const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
+    open,
+    onClose,
+    idbalance,
+}) => {
+    const { GetData } = useCallApi();
+
+    const [dateRange, setDateRange] = useState(getDefaultDateRange());
+    const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
+    const [transferType, setTransferType] = useState<TransferType[]>([]);
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+    const [searchValue, setSearchValue] = useState('');
+    const [category, setCategory] = useState<string[]>([]);
+    const [transaction, setTransaction] = useState<any[]>([]);
+    const [filters, setFilters] = useState<any>({});
+
+    const fetchTransferType = useCallback(async () => {
+        try {
+            const response = await GetData(`${apiConfig.service_transaction}/transactiontype/list`, {
+                limit: 100,
+                page: 1,
+                with_deleted: false,
+                order_field: 'created_at',
+                order_direction: 'ASC',
+            });
+            setTransferType(response?.data?.list || []);
+        } catch (error) {
+            console.error('Error fetching transfer types', error);
+        }
+    }, [GetData]);
+
+    useEffect(() => {
+        fetchTransferType();
+    }, [fetchTransferType]);
+
+    useEffect(() => {
+        const uniqueCategories = Array.from(
+            new Set(transaction.map((tx) => tx.category).filter((cat) => !!cat))
+        );
+        setCategory(uniqueCategories);
+    }, [transaction]);
+
+    const handleTransferTypeChange = (value: string) => {
+        setSelectedTransferType(value === 'all' ? null : value);
+    };
+
+    const handleCategoryChange = (value: string) => {
+        setSelectedCategory(value === '' ? null : value);
+    };
+
+    const handleClearAllFilters = () => {
+        setDateRange(getDefaultDateRange());
+        setSelectedTransferType(null);
+        setSelectedCategory(null);
+        setSearchValue('');
+        setFilters({});
+    };
+
+    const handleApplyFilters = () => {
+        const appliedFilters: any = {};
+
+        if (dateRange.from) appliedFilters.date_from = dateRange.from+" 00:00:00";
+        if (dateRange.to) appliedFilters.date_to = dateRange.to+" 23:59:59";
+        if (selectedTransferType) appliedFilters.transaction_type_id = selectedTransferType;
+        if (selectedCategory) appliedFilters.category = selectedCategory;
+        if (searchValue) appliedFilters.transaction_code = searchValue;
+
+        setFilters(appliedFilters);
+    };
+
+
+    const columns = [
+        {
+            accessorKey: 'transaction_code',
+            header: ({ column }: any) => <DataGridColumnHeader title="Transaction Code" column={column} />,
+            enableSorting: false,
+            meta: { headerClassName: 'min-w-[120px]' },
+        },
+        {
+            accessorKey: 'msisdn_reff',
+            header: ({ column }: any) => <DataGridColumnHeader title="MSISDN Reffer" column={column} />,
+            enableSorting: false,
+            meta: { headerClassName: 'min-w-[120px]' },
+        },
+        {
+            accessorKey: 'transaction_type.name',
+            header: ({ column }: any) => <DataGridColumnHeader title="Transaction Type" column={column} />,
+            enableSorting: false,
+            meta: { headerClassName: 'min-w-[180px]' },
+        },
+        {
+            accessorKey: 'type',
+            header: ({ column }: any) => <DataGridColumnHeader title="Type" column={column} />,
+            enableSorting: false,
+            meta: { headerClassName: 'min-w-[80px]' },
+        },
+        {
+            accessorKey: 'amount',
+            header: ({ column }: any) => <DataGridColumnHeader title="Amount" column={column} />,
+            enableSorting: false,
+            cell: (info: any) => info.getValue()?.toFixed(2),
+            meta: { headerClassName: 'min-w-[100px]' },
+        },
+        {
+            accessorKey: 'pre_amount',
+            header: ({ column }: any) => <DataGridColumnHeader title="Pre Amount" column={column} />,
+            enableSorting: false,
+            cell: (info: any) => info.getValue()?.toFixed(2),
+            meta: { headerClassName: 'min-w-[100px]' },
+        },
+        {
+            accessorKey: 'post_amount',
+            header: ({ column }: any) => <DataGridColumnHeader title="Post Amount" column={column} />,
+            enableSorting: false,
+            cell: (info: any) => info.getValue()?.toFixed(2),
+            meta: { headerClassName: 'min-w-[100px]' },
+        },
+        {
+            accessorKey: 'category',
+            header: ({ column }: any) => <DataGridColumnHeader title="Category" column={column} />,
+            enableSorting: false,
+            meta: { headerClassName: 'min-w-[80px]' },
+        },
+        {
+            accessorKey: 'date',
+            header: ({ column }: any) => <DataGridColumnHeader title="Date" column={column} />,
+            enableSorting: false,
+            cell: (info: any) => {
+                const val = info.getValue();
+                if (!val) return '-';
+                return new Date(val).toLocaleString('id-ID', {
+                    day: '2-digit',
+                    month: 'short',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                });
+            },
+            meta: { headerClassName: 'min-w-[150px]' },
+        },
+        {
+            accessorKey: 'purpose',
+            header: ({ column }: any) => <DataGridColumnHeader title="Purpose" column={column} />,
+            enableSorting: false,
+            cell: (info: any) => info.getValue() || '-',
+            meta: { headerClassName: 'min-w-[200px]' },
+        },
+        {
+            accessorKey: 'notes',
+            header: ({ column }: any) => <DataGridColumnHeader title="Notes" column={column} />,
+            enableSorting: false,
+            cell: (info: any) => info.getValue() || '-',
+            meta: { headerClassName: 'min-w-[200px]' },
+        },
+    ];
+
+    const getTransactionLists = useCallback(
+        async (page: number, limit: number, sorting: any, _columnFilters: any) => {
+            // console.log(idbalance);
+            try {
+                const response = await GetData(`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`, {
+                    limit,
+                    page: page + 1,
+                    with_deleted: false,
+                    order_field: "created_at",
+                    order_direction: 'DESC',
+                    filter: filters
+                });
+
+                // console.log(filters);
+
+                if (!response || !response.data) {
+                    console.warn('No data received:', response);
+                    return { data: [], totalCount: 0 };
+                }
+
+                setTransaction(response.data.list);
+                return { data: response.data.list, totalCount: response.data.total_count };
+            } catch (error) {
+                console.error('Error fetching transaction', error);
+                return { data: [], totalCount: 0 };
+            }
+        },
+        [GetData, idbalance, filters]
+    );
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="max-w-[95vw] sm:max-w-[1200px] p-4 overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>Details Wallet Statement</DialogTitle>
+                </DialogHeader>
+                <DialogDescription />
+
+                <DialogBody>
+                    <div className="flex flex-wrap gap-2 lg:gap-5 w-full mb-4">
+                        <div className="flex flex-wrap gap-3 w-full">
+                            <label className="input input-sm w-full sm:w-[160px]">
+                                From
+                                <input
+                                    type="date"
+                                    value={dateRange.from}
+                                    onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
+                                />
+                            </label>
+
+                            <label className="input input-sm w-full sm:w-[160px]">
+                                To
+                                <input
+                                    type="date"
+                                    value={dateRange.to}
+                                    onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
+                                />
+                            </label>
+
+                            <div className="w-full sm:w-[160px]">
+                                <Select value={selectedTransferType || 'all'} onValueChange={handleTransferTypeChange}>
+                                    <SelectTrigger className="h-[32px]">
+                                        <SelectValue placeholder="Transaction Type" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="all">Select Transaction</SelectItem>
+                                        {transferType.map((transfer) => (
+                                            <SelectItem key={transfer.id} value={transfer.id}>
+                                                {transfer.name}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="w-full sm:w-[160px]">
+                                <Select value={selectedCategory ?? ''} onValueChange={handleCategoryChange}>
+                                    <SelectTrigger className="h-[32px]">
+                                        <SelectValue placeholder="Select Category" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {category.length === 0 ? (
+                                            <div className="text-gray-500 px-4 py-2">No data</div>
+                                        ) : (
+                                            category.map((cat) => (
+                                                <SelectItem key={cat} value={cat}>
+                                                    {cat}
+                                                </SelectItem>
+                                            ))
+                                        )}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <label className="input input-sm w-full sm:w-[160px]">
+                                <KeenIcon icon="magnifier" />
+                                <input
+                                    type="text"
+                                    placeholder="Transaction Code"
+                                    className="overflow-hidden text-ellipsis w-full"
+                                    value={searchValue}
+                                    onChange={(e) => setSearchValue(e.target.value)}
+                                />
+                            </label>
+
+                            <DefaultTooltip title="Reset Filter" placement="top">
+                                <Button variant="outline" className="h-8" onClick={handleClearAllFilters}>
+                                    <KeenIcon icon="arrow-circle-left" />
+                                </Button>
+                            </DefaultTooltip>
+
+                            <Button variant="outline" className="h-8" onClick={handleApplyFilters}>
+                                Filter Data
+                            </Button>
+                        </div>
+                    </div>
+
+                    <div className="py-4 max-h-[70vh] overflow-y-auto">
+                        <DataGridProvider
+                            key={JSON.stringify(filters)}
+                            columns={columns}
+                            pagination={{ size: 10 }}
+                            layout={{ card: true }}
+                            sorting={[{ id: 'id', desc: false }]}
+                            serverSide={true}
+                            onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+                                getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
+                            }
+                        />
+                    </div>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ShowDetailWalletDialog;

src/pages/dashboards/home/blocks/TransactionPieChart.tsx

@@ -48,6 +48,14 @@ const TransactionPieChart = ({ startdate, enddate }: Props) => {
             { name: 'Top Up P24', value: parseFloat((responseTransactionValue?.data?.B ?? 0).toFixed(2)), color: '#FADA7A' },
             { name: 'Transfer Agent', value: parseFloat((responseTransactionValue?.data?.A ?? 0).toFixed(2)), color: '#B1C29E' },
             { name: 'Withdrawal Agent', value: parseFloat((responseTransactionValue?.data?.M ?? 0).toFixed(2)), color: '#FCE7C8' },
+            { name: 'Top Up Agent', value: parseFloat((responseTransactionValue?.data?.O ?? 0).toFixed(2)), color: '#F0A04B' },
+            { name: 'Transfer P24', value: parseFloat((responseTransactionValue?.data?.S ?? 0).toFixed(2)), color: '#FADA7A' },
+            { name: 'Withdraw Merchant', value: parseFloat((responseTransactionValue?.data?.I ?? 0).toFixed(2)), color: '#B1C29E' },
+            { name: 'Donation', value: parseFloat((responseTransactionValue?.data?.D ?? 0).toFixed(2)), color: '#FCE7C8' },
+            { name: 'Fee', value: parseFloat((responseTransactionValue?.data?.F ?? 0).toFixed(2)), color: '#F0A04B' },
+            { name: 'Reversal', value: parseFloat((responseTransactionValue?.data?.V ?? 0).toFixed(2)), color: '#FADA7A' },
+            { name: 'Cashback Cash', value: parseFloat((responseTransactionValue?.data?.C ?? 0).toFixed(2)), color: '#B1C29E' },
+            { name: 'Cashback Point', value: parseFloat((responseTransactionValue?.data?.H ?? 0).toFixed(2)), color: '#FCE7C8' },
         ];        
 
     return (

src/pages/dashboards/home/blocks/TransactionValue.tsx

@@ -71,7 +71,7 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
                     type = "Purchase Loja"
                     break;
                 case "B":
-                    type ="Top Up P24";
+                    type = "Top Up P24";
                     break;
                 case "A":
                     type = " Transfer Agent";
@@ -79,6 +79,30 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
                 case "M":
                     type = "Withdrawal Agent";
                     break;
+                case 'O': 
+                    type = 'TOP UP AGENT'; 
+                    break;
+                case 'S': 
+                    type = 'TRANSFER P24';
+                    break;
+                case 'I': 
+                    type = 'WIJTDRAW MERCHANT'; 
+                    break;
+                case 'D': 
+                    type = 'DONATION'; 
+                    break;
+                case 'F': 
+                    type = 'FEE'; 
+                    break;
+                case 'V': 
+                    type = 'REVERSAL'; 
+                    break;
+                case 'C': 
+                    type = 'CASHBACK CASH'; 
+                    break;
+                case 'H': 
+                    type = 'CASHBACK POINT';
+                    break;
                 default:
                     type = "Unknown";
                     break;

src/pages/disbursement/history-transaction/HistoryTransaction.tsx

@@ -23,7 +23,7 @@ const HistoryTransactionDisbursement = () => {
             </Link>
 
             <Link underline="none" color="inherit">
-              <span className="text-sm">History Disbursement</span>
+              <span className="text-sm">Disbursement</span>
             </Link>
           </Breadcrumbs>
           <div className="grid gap-5 lg:gap-7.5">

src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx

@@ -285,7 +285,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'execution_date', desc: false }]}
+        sorting={[{ id: 'execution_date', desc: true }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getTransactionLists(pageIndex, pageSize, sorting, columnFilters)

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,72 @@ interface ListToolbarProps {
 }
 
 const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolbarProps) => {
-
   const [groupFilter, setGroupFilter] = useState('');
-  const [usernameFilter, setUsernameFilter] = useState('');
+  const { table, reload } = useDataGrid();
-  const [msisdnFilter, setMsisdnFilter] = useState('');
+  const [searchValue, setSearchValue] = useState<string>();
-  const {table}=useDataGrid();
+  const [typeSearchValue, setSearchTypeValue] = useState<string>();
   
-  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUsernameFilter(e.target.value);
+    e.preventDefault()
-    table.getColumn('username')?.setFilterValue(e.target.value);
+    // setSearchValue(e.target.value)
-  };
+    if (typeSearchValue === 'username') {
-  const handleMsisdnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      table.getColumn('username')?.setFilterValue(searchValue);
-    setMsisdnFilter(e.target.value);
+      table.getColumn('msisdn')?.setFilterValue('');
-    table.getColumn('msisdn')?.setFilterValue(e.target.value);
+    }
+    if (typeSearchValue === 'msisdn') {
+      table.getColumn('msisdn')?.setFilterValue(searchValue);
+      table.getColumn('username')?.setFilterValue('');
+    }
+    table.getColumn('group_name')?.setFilterValue(groupFilter);
   };
 
   const handleGroupChange = (e: any) => {
     let value = e.target.value;
     if (value === '__all__') value = '';
     setGroupFilter(value);
-    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 }[] => {
+    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">
+
+          <form onSubmit={(e:any) => handleSearch(e)}>
             <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 +100,54 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
                   ))}
                 </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 Phone Number"
+                  placeholder={`Search ${typeSearchValue || ''}`}  // Use typeSearchValue if it's set, else fallback to an empty string
-              value={msisdnFilter}
+                  value={searchValue}
-              onChange={handleMsisdnChange}
+                  onChange={(e:any) => setSearchValue(e.target.value)}
-              className="input w-40"
                 />
+              </label>
+              <Button variant="outline" className="h-7.5">
+                <KeenIcon icon="magnifier" />
+              </Button>
             </div>
+          </form>
+
           <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/approval-transaction/blocks/ListToolbar.tsx

@@ -14,76 +14,61 @@ import {
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
-  // Set the initial state for trxDate
+  // State untuk filter
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [statusApproval, setStatusApproval] = useState<string>(
+  const [statusApproval, setStatusApproval] = useState<string>('');
-    (table.getColumn('status_approve')?.getFilterValue() as string) ?? ''
+  const [searchValue, setSearchValue] = useState<string>('');
-  );
+  const [typeSearchValue, setSearchTypeValue] = useState<string>('');
 
-  useEffect(() => {
+  // Set tanggal default saat pertama mount
-    const timer = setTimeout(() => {
-      table.getColumn('status_approve')?.setFilterValue(statusApproval);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [statusApproval, table]);
-
-  // Function to format date to YYYY-MM-DD
-  const formatDate = (date: Date): string => {
-    return date.toISOString().split('T')[0];
-  };
-
-  const [searchValue, setSearchValue] = useState<string>();
-  const [typeSearchValue, setSearchTypeValue] = useState<string>();
-
-
-
-  // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
-    // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    const formatDate = (date: Date) => date.toISOString().split('T')[0];
     settrxDate({
       from: formatDate(today),
       to: formatDate(today),
     });
   }, []);
 
+  // Fungsi untuk apply semua filter sekaligus saat tombol Filter ditekan
   const handleFilterData = useCallback(() => {
     try {
+      if (!trxDate.from || !trxDate.to) {
+        toast.error('Please select From and To dates');
+        return;
+      }
+
+      // Set filter tanggal
       table.getColumn('transaction_date')?.setFilterValue(trxDate);
+
+      // Set filter status approval
+      table.getColumn('status_approve')?.setFilterValue(statusApproval || '');
+
+      // Set filter search type sebagai column filter id 'searchtype'
+      table.setColumnFilters((prevFilters) => {
+        // Hapus dulu filter dengan id 'searchtype' dan 'code' agar gak duplikat
+        const filtered = prevFilters.filter(
+          (f) => f.id !== 'searchtype' && f.id !== 'code'
+        );
+
+        // Tambahkan filter baru jika ada
+        if (typeSearchValue) {
+          filtered.push({ id: 'searchtype', value: typeSearchValue });
+        }
+        if (searchValue) {
+          filtered.push({ id: 'code', value: searchValue });
+        }
+
+        return filtered;
+      });
+
+      // Reset ke halaman pertama
+      table.setPageIndex(0);
     } catch (error) {
       toast.error('Error applying filter');
-      console.error('Error applying filter:', error);
+      console.error(error);
     }
-  }, [trxDate, table]);
+  }, [trxDate, statusApproval, searchValue, typeSearchValue, table]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      // Add search type filter to column filters
-      table.setColumnFilters((prev) => [
-        ...prev.filter((f) => f.id !== 'searchtype'),
-        { id: 'searchtype', value: typeSearchValue },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeSearchValue, table]);
-
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('code')?.setFilterValue(searchValue);
-      table.setPageIndex(0);
-    }, 200);
-
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
-
-  useEffect(() => {
-    if (trxDate.from && trxDate.to) {
-      handleFilterData();
-    }
-  }, [trxDate]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -93,11 +78,8 @@ const ListToolbar = () => {
             From
             <input
               type="date"
-              placeholder="From"
               value={trxDate.from}
-              onChange={(event) =>
+              onChange={(e) => settrxDate({ ...trxDate, from: e.target.value })}
-                settrxDate({ ...trxDate, from: event.target.value })
-              }
               name="from"
             />
           </label>
@@ -106,20 +88,15 @@ const ListToolbar = () => {
             To
             <input
               type="date"
-              placeholder="To"
               value={trxDate.to}
-              onChange={(event) =>
+              onChange={(e) => settrxDate({ ...trxDate, to: e.target.value })}
-                settrxDate({ ...trxDate, to: event.target.value })
-              }
               name="to"
             />
           </label>
 
           <Select
             value={statusApproval}
-            onValueChange={(value) => {
+            onValueChange={setStatusApproval}
-              setStatusApproval(value);
-            }}
           >
             <SelectTrigger className="input input-sm w-[160px] h-[31px]">
               <SelectValue placeholder="Select Status" />
@@ -133,9 +110,7 @@ const ListToolbar = () => {
 
           <Select
             value={typeSearchValue}
-            onValueChange={(value) => {
+            onValueChange={setSearchTypeValue}
-              setSearchTypeValue(value);
-            }}
           >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Search Type" />
@@ -151,12 +126,16 @@ const ListToolbar = () => {
             <KeenIcon icon="magnifier" />
             <input
               type="text"
-              placeholder={`Search ${typeSearchValue || ''}`}  // Use typeSearchValue if it's set, else fallback to an empty string
+              placeholder={`Search ${typeSearchValue || ''}`}
               value={searchValue}
-              onChange={(event) => setSearchValue(event.target.value)}
+              onChange={(e) => setSearchValue(e.target.value)}
             />
           </label>
 
+          {/* Tombol Filter */}
+          <Button onClick={handleFilterData}>
+            Filter
+          </Button>
         </div>
 
         <div className="ml-auto">
@@ -166,23 +145,22 @@ const ListToolbar = () => {
               className="h-7.5"
               onClick={() => {
                 const today = new Date();
-                // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                const formatDate = (date: Date) => date.toISOString().split('T')[0];
 
-                // Resetting all filters
+                // Reset semua filter dan tanggal ke hari ini
                 setSearchValue('');
                 setStatusApproval('');
-                settrxDate({
+                settrxDate({ from: formatDate(today), to: formatDate(today) });
-                  from: formatDate(today),
-                  to: formatDate(today),
-                });
-
                 setSearchTypeValue('');
 
+                // Reset filter di tabel
                 table.getColumn('code')?.setFilterValue('');
                 table.getColumn('status_approve')?.setFilterValue('');
+                table.getColumn('transaction_date')?.setFilterValue('');
+                table.setColumnFilters([]);
                 table.setPageIndex(0);
 
-                reload(); // Reload table data
+                reload();
               }}
             >
               <KeenIcon icon="arrows-circle" />

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

@@ -456,7 +456,24 @@ const DetailTransaction = () => {
                                                     kind = 'TRANSFER AGENT';
                                                 } else if (transactionDetails?.kind === 'M') {
                                                     kind = 'WITHDRAWAL AGENT';
+                                                }else if( transactionDetails?.kind === 'O') {
+                                                    kind = 'TOPUP AGENT';
+                                                }else if (transactionDetails?.kind === 'S') {
+                                                    kind = 'TOPUP P24';
+                                                }else if (transactionDetails?.kind === 'I') {
+                                                    kind = 'WITHDRAW MERCHANT';
+                                                }else if (transactionDetails?.kind === 'D') {
+                                                    kind = 'DONATION';
+                                                }else if (transactionDetails?.kind === 'F') {
+                                                    kind = 'FEE';
+                                                }else if (transactionDetails?.kind === 'V') {
+                                                    kind = 'REVERSAL';
+                                                }else if( transactionDetails?.kind === 'C') {
+                                                    kind = 'CASHBACK CASH';
+                                                }else if( transactionDetails?.kind === 'H') {
+                                                    kind = 'CASHBACK POINT';
                                                 }
+
                                                 return kind;
                                             })()}
                                         </p>

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

@@ -1,7 +1,7 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useTransactionContext } from '../hooks/useTransactionContext';
 import { Button } from '@/components/ui/button';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import {
   Select,
@@ -17,8 +17,8 @@ import { getAuth } from '@/auth';
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [searchValue, setSearchValue] = useState<string>(''); // default: empty string
+  const [searchValue, setSearchValue] = useState<string>('');
-  const [typeSearchValue, setSearchTypeValue] = useState<string>(''); // default: empty string
+  const [typeSearchValue, setSearchTypeValue] = useState<string>('');
   const [typeValue, setTypeValue] = useState<string>(
     (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
   );
@@ -26,62 +26,44 @@ const ListToolbar = () => {
   const { GetData } = useCallApi();
   const API_URL = apiConfig.transaction;
 
-  const formatDate = (date: Date): string => {
+  const formatDate = (date: Date): string => date.toISOString().split('T')[0];
-    return date.toISOString().split('T')[0];
-  };
 
+  // Set tanggal default hari ini saat mount
   useEffect(() => {
     const today = new Date();
-    settrxDate({
+    const formatted = formatDate(today);
-      from: formatDate(today),
+    settrxDate({ from: formatted, to: formatted });
-      to: formatDate(today),
-    });
   }, []);
 
-  useEffect(() => {
+  // **Hilangkan semua useEffect yang auto apply filter saat input berubah**
-    const timer = setTimeout(() => {
+  // Karena kamu mau filter apply hanya lewat tombol Filter
-      table.setColumnFilters((prev) => [
-        ...prev.filter((f) => f.id !== 'kind'),
-        { id: 'kind', value: typeValue },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeValue, table]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.setColumnFilters((prev) => [
-        ...prev.filter((f) => f.id !== 'searchtype'),
-        { id: 'searchtype', value: typeSearchValue },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeSearchValue, table]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('code')?.setFilterValue(searchValue);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
 
+  // Fungsi untuk apply SEMUA filter sekaligus saat tombol Filter diklik
   const handleFilterData = useCallback(() => {
-    try {
+    if (!trxDate.from || !trxDate.to) {
-      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+      toast.error('Please select both From and To dates');
-    } catch (error) {
+      return;
-      toast.error('Error applying filter');
-      console.error('Error applying filter:', error);
     }
-  }, [trxDate, table]);
 
-  useEffect(() => {
+    // Terapkan filter tanggal
-    if (trxDate.from && trxDate.to) {
+    table.getColumn('transaction_date')?.setFilterValue(trxDate);
-      handleFilterData();
+
-    }
+    // Terapkan filter jenis transaksi (kind)
-  }, [trxDate]);
+    table.setColumnFilters((prev) => {
+      // Hapus filter 'kind' dan 'searchtype' agar bisa set ulang
+      const others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code');
+      // Bangun array baru dengan filter yang diinginkan
+      const filters: any[] = [...others];
+
+      if (typeValue) filters.push({ id: 'kind', value: typeValue });
+      if (typeSearchValue) filters.push({ id: 'searchtype', value: typeSearchValue });
+      if (searchValue) filters.push({ id: 'code', value: searchValue });
+
+      return filters;
+    });
+
+    table.setPageIndex(0);
+  }, [trxDate, typeValue, typeSearchValue, searchValue, table]);
 
   const exporDataToExcel = async (
     typeSearchValue: string,
@@ -93,8 +75,8 @@ const ListToolbar = () => {
       const formattedFilter: any = {
         "Transactions.transaction_date": {
           from: `${trxDate.from} 00:00:00`,
-          to: `${trxDate.to} 23:59:59`
+          to: `${trxDate.to} 23:59:59`,
-        }
+        },
       };
 
       if (typeSearchValue === 'msisdn') {
@@ -106,17 +88,20 @@ const ListToolbar = () => {
       }
 
       if (typeValue) {
-        formattedFilter["Transactions.kind"] = typeValue;
+        formattedFilter['Transactions.kind'] = typeValue;
       }
 
       const filterParam = encodeURIComponent(JSON.stringify(formattedFilter));
 
-      const response = await fetch(`${API_URL}/transaction/export?filter=${filterParam}`, {
+      const response = await fetch(
+        `${API_URL}/transaction/export?filter=${filterParam}`,
+        {
           method: 'GET',
           headers: {
-          Authorization: `Bearer ${getAuth()?.access_token}`, // ganti dengan token kamu
+            Authorization: `Bearer ${getAuth()?.access_token}`,
+          },
         }
-      });
+      );
 
       if (!response.ok) {
         throw new Error('Failed to fetch file');
@@ -134,7 +119,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">
@@ -162,11 +146,7 @@ const ListToolbar = () => {
               name="to"
             />
           </label>
-
+          <Select value={typeValue} onValueChange={(value) => setTypeValue(value)}>
-          <Select
-            value={typeValue}
-            onValueChange={(value) => setTypeValue(value)}
-          >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Transaction Type" />
             </SelectTrigger>
@@ -182,13 +162,18 @@ const ListToolbar = () => {
               <SelectItem value="B">TOP UP P24</SelectItem>
               <SelectItem value="A">TRANSFER AGENT</SelectItem>
               <SelectItem value="M">WITHDRAWAL AGENT</SelectItem>
+              <SelectItem value="O">TOP UP AGENT</SelectItem>
+              <SelectItem value="S">TRANSFER P24</SelectItem>
+              <SelectItem value="I">WITHDRAW MERCHANT</SelectItem>
+              <SelectItem value="D">DONATION</SelectItem>
+              <SelectItem value="F">FEE</SelectItem>
+              <SelectItem value="V">REVERSAL</SelectItem>
+              <SelectItem value="C">CASHBACK CASH</SelectItem>
+              <SelectItem value="H">CASHBACK POINT</SelectItem>
             </SelectContent>
           </Select>
 
-          <Select
+          <Select value={typeSearchValue} onValueChange={(value) => setSearchTypeValue(value)}>
-            value={typeSearchValue}
-            onValueChange={(value) => setSearchTypeValue(value)}
-          >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Search Type" />
             </SelectTrigger>
@@ -208,6 +193,11 @@ const ListToolbar = () => {
               onChange={(event) => setSearchValue(event.target.value)}
             />
           </label>
+
+          <Button className="h-7.5" onClick={handleFilterData}>
+            Filter
+          </Button>
+
         </div>
 
         <div className="ml-auto flex gap-2">
@@ -237,28 +227,17 @@ const ListToolbar = () => {
             Export Data
           </Button>
 
-
-
           <DefaultTooltip title={'Refresh'} placement={'top'}>
             <Button
               variant="outline"
               className="h-7.5"
               onClick={() => {
                 const today = new Date();
-
                 setSearchValue('');
                 setSearchTypeValue('');
                 setTypeValue('');
-                settrxDate({
+                settrxDate({ from: formatDate(today), to: formatDate(today) });
-                  from: formatDate(today),
+                table.setColumnFilters([]);
-                  to: formatDate(today),
-                });
-
-                table.setColumnFilters([
-                  { id: 'code', value: '' },
-                  { id: 'kind', value: '' },
-                ]);
-
                 table.setPageIndex(0);
                 reload();
               }}

src/pages/transaction/history-transaction/hooks/TransactionContext.tsx

@@ -82,6 +82,14 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
             case 'B': return 'TOP UP P24';
             case 'A': return 'TRANSFER AGENT';
             case 'M': return 'WITHDRAWAL AGENT';
+            case 'O': return 'TOP UP AGENT';
+            case 'S': return 'TRANSFER P24';
+            case 'I': return 'WIJTDRAW MERCHANT';
+            case 'D': return 'DONATION';
+            case 'F': return 'FEE';
+            case 'V': return 'REVERSAL';
+            case 'C': return 'CASHBACK CASH';
+            case 'H': return 'CASHBACK POINT';
             default: return '_';
           }
         },

src/pages/transfer/transfertype/blocks/AddDialog.tsx

@@ -568,6 +568,15 @@ const AddDialog = () => {
                           <SelectItem value="B">Top Up P24</SelectItem>
                           <SelectItem value="A">Transfer Agent</SelectItem>
                           <SelectItem value="M">Withdraw Agent</SelectItem>
+                          <SelectItem value="O">Top Up Agent</SelectItem>
+                          <SelectItem value="S">Transfer P24</SelectItem>
+                          <SelectItem value="I">Withdraw Merchant</SelectItem>
+                          <SelectItem value="D">Donation</SelectItem>
+                          <SelectItem value="F">Fee</SelectItem>
+                          <SelectItem value="V">Raversal</SelectItem>
+                          <SelectItem value="C">Cashback Cash</SelectItem>
+                          <SelectItem value="H">Cashback Point</SelectItem>
+                          <SelectItem value="J">Withdraw Admin</SelectItem>
                         </SelectContent>
                       </Select>
                       {errors.status_kind && (

src/pages/transfer/transfertype/blocks/EditDialog.tsx

@@ -766,7 +766,16 @@ const EditDialog = () => {
                               <SelectItem value="B">Top Up P24</SelectItem>
                               <SelectItem value="A">Transfer Agent</SelectItem>
                               <SelectItem value="M">Withdraw Agent</SelectItem>
-                            </SelectContent>
+                              <SelectItem value="O">Top Up Agent</SelectItem>
+                              <SelectItem value="S">Transfer P24</SelectItem>
+                              <SelectItem value="I">Withdraw Merchant</SelectItem>
+                              <SelectItem value="D">Donation</SelectItem>
+                              <SelectItem value="F">Fee</SelectItem>
+                              <SelectItem value="V">Raversal</SelectItem>
+                              <SelectItem value="C">Cashback Cash</SelectItem>
+                              <SelectItem value="H">Cashback Point</SelectItem>
+                              <SelectItem value="J">Withdraw Admin</SelectItem>
+                            </SelectContent>{' '}
                           </Select>
                           {errors.status_kind && (
                             <span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -62,14 +62,14 @@ const ListToolbar = () => {
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
-      table.getColumn('name')?.setFilterValue(searchValue);
+table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
       table.setPageIndex(0);
     }
   };
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      table.getColumn('name')?.setFilterValue(searchValue);
+table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
       table.setPageIndex(0);
     }, 200);
     return () => clearTimeout(timer);
@@ -210,6 +210,15 @@ const ListToolbar = () => {
                   <SelectItem value="B">Top Up P24</SelectItem>
                   <SelectItem value="A">Transfer Agent</SelectItem>
                   <SelectItem value="M">Withdraw Agent</SelectItem>
+                  <SelectItem value="O">Top Up Agent</SelectItem>
+                  <SelectItem value="S">Transfer P24</SelectItem>
+                  <SelectItem value="I">Withdraw Merchant</SelectItem>
+                  <SelectItem value="D">Donation</SelectItem>
+                  <SelectItem value="F">Fee</SelectItem>
+                  <SelectItem value="V">Raversal</SelectItem>
+                  <SelectItem value="C">Cashback Cash</SelectItem>
+                  <SelectItem value="H">Cashback Point</SelectItem>
+                  <SelectItem value="J">Withdraw Admin</SelectItem>
                 </SelectContent>
               </Select>
             </div>

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -34,8 +34,8 @@ const formatInteger = (num: number): string => {
   return num.toLocaleString('en-US', {
     style: 'decimal',
     maximumFractionDigits: 0
-  })
+  });
-}
+};
 
 interface AccountProps {
   id: string;
@@ -224,9 +224,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             TM: 'Top Up Master Agent',
             TA: 'Top Up Agent',
             PL: 'Purchase Loja',
-            DE: 'Disbursment Escrow',
+            DE: 'Disbursement Escrow',
-            DM: 'Disbursment Master Agent',
+            DM: 'Disbursement Master Agent',
-            DA: 'Disbursment Agent',
+            DA: 'Disbursement Agent',
             WI: 'Withdraw Merchant',
             IC: 'Income Merchant',
             DN: 'Donation'
@@ -287,7 +287,16 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             L: { label: 'Purchase Loja', className: 'bg-rose-100 text-rose-600' },
             B: { label: 'Top Up P24', className: 'bg-rose-100 text-rose-600' },
             A: { label: 'Transfer Agent', className: 'bg-rose-100 text-rose-600' },
-            M: { label: 'Withdraw Agent', className: 'bg-rose-100 text-rose-600' }
+            M: { label: 'Withdraw Agent', className: 'bg-rose-100 text-rose-600' },
+            O: { label: 'Top Up Agent', className: 'bg-rose-100 text-rose-600' },
+            S: { label: 'Transfer P24', className: 'bg-rose-100 text-rose-600' },
+            I: { label: 'Withdraw Merchant', className: 'bg-rose-100 text-rose-600' },
+            D: { label: 'Donation', className: 'bg-rose-100 text-rose-600' },
+            F: { label: 'Fee', className: 'bg-rose-100 text-rose-600' },
+            V: { label: 'Raversal', className: 'bg-rose-100 text-rose-600' },
+            C: { label: 'Cashback Cash', className: 'bg-rose-100 text-rose-600' },
+            H: { label: 'Cashback Point', className: 'bg-rose-100 text-rose-600' },
+            J: { label: 'Withdraw Admin', className: 'bg-rose-100 text-rose-600' },
           };
 
           const kindInfo = mapping[kind] || {
@@ -366,7 +375,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     let filterObject: Record<string, any> = {};
 
     if (debouncedSearchTerm) {
-      filterObject['any'] = debouncedSearchTerm.toLowerCase();
+      filterObject['name'] = `%${debouncedSearchTerm.toLowerCase()}%`;
     }
 
     if (columnFilters.length > 0) {