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

src/layouts/demo2/header/HeaderTopbar.tsx

@@ -1,9 +1,10 @@
-import { useRef } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { KeenIcon } from '@/components/keenicons';
 import { toAbsoluteUrl } from '@/utils';
 import { Menu, MenuItem, MenuToggle } from '@/components';
 import { DropdownUser } from '@/partials/dropdowns/user';
 import { useLanguage } from '@/i18n';
+import { getAuth } from '@/auth';
 
 const HeaderTopbar = () => {
   const itemChatRef = useRef<any>(null);
@@ -14,9 +15,14 @@ const HeaderTopbar = () => {
   const handleDropdownChatShow = () => {
     window.dispatchEvent(new Event('resize'));
   };
-
+  console.log(getAuth())
   return (
-    <div className="flex items-center gap-3.5">
+<div className="flex items-center gap-4">
+  <div className="hidden md:flex flex-col items-end mr-2 text-right">
+    <span className="font-semibold text-sm text-white leading-tight">{getAuth()?.user.username}</span>
+    <span className="text-xs text-gray-400">{getAuth()?.role_name}</span>
+  </div>
+
   <Menu>
     <MenuItem
       ref={itemUserRef}
@@ -28,23 +34,24 @@ const HeaderTopbar = () => {
           {
             name: 'offset',
             options: {
-                  offset: [20, 10] // [skid, distance]
+              offset: [20, 10],
-                }
+            },
-              }
+          },
-            ]
+        ],
       }}
     >
       <MenuToggle className="btn btn-icon rounded-full">
         <img
-              className="size-9 rounded-full justify-center border border-gray-500 shrink-0"
+          className="w-9 h-9 rounded-full border border-gray-500 object-cover"
           src={toAbsoluteUrl('/media/avatars/blank.png')}
-              alt=""
+          alt="User avatar"
         />
       </MenuToggle>
       {DropdownUser({ menuItemRef: itemUserRef })}
     </MenuItem>
   </Menu>
 </div>
+
   );
 };
 

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -16,6 +16,10 @@ import { useFetchYear } from './hooks/useFetchYear';
 import { get5LastYear } from '@/utils/Date';
 import { staticChartData } from './staticChart';
 import { Helmet } from 'react-helmet';
+import BalanceCard from './blocks/BalanceCard';
+import { getAuth } from '@/auth';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
 
 // sum -> nominal, count-> total
 type CountType = 'sum' | 'count';
@@ -33,6 +37,9 @@ const DashboardHomePage = () => {
     from: new Date(),
     to: new Date()
   });
+  const currentRole = getAuth()?.role_name;
+  const idCustomer = getAuth()?.user.customer?.id;
+  // console.log(currentRole);
 
   // Menyusun tanggal awal dan akhir berdasarkan selectedYear
   useEffect(() => {
@@ -144,6 +151,13 @@ const DashboardHomePage = () => {
         <title>TPAY | Dashboard</title>
       </Helmet>
       <Container>
+        {/* Account Balance Cards */}
+        {currentRole === 'Escrow' || currentRole === 'Master Agent' ? (
+          <div className="grid gap-5 lg:gap-7.5 mb-14 mt-7">
+            <BalanceCard id={idCustomer} />
+          </div>
+        ) : null}
+
         <div className="flex gap-3 items-center mb-6">
           <YearPicker selectedYear={selectedYear} setSelectedYear={handleYearChange} />
           <div className="w-auto min-w-[120px]">

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

@@ -0,0 +1,100 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { CreditCard, Wallet } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type WalletResponse = {
+  amount: number;
+  id_wallet: string;
+  wallet: string;
+  credit_limit: number;
+  monthly_limit: number;
+};
+
+interface BalanceCardProps {
+  id: string;
+}
+
+const API_URL_WALLET = apiConfig.service_wallet;
+
+const BalanceCard = ({ id }: BalanceCardProps) => {
+  const { GetData } = useCallApi();
+  const [wallets, setWallets] = useState<WalletResponse[]>([]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(value);
+  };
+
+  const formatNumberWithDots = (value: number) => {
+    return value.toLocaleString('id-ID');
+  };
+
+  const getColorClass = (amount: number, walletType: string) => {
+    if (walletType.toLowerCase().includes('point account')) return 'bg-amber-300';
+    // if (amount > 3125) return 'bg-amber-300';
+    return 'bg-red-500';
+  };
+
+  useEffect(() => {
+    async function fetchAccountBalances() {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${id}`, {
+          id: id
+        });
+        if (response?.status === true) {
+          setWallets(response.data);
+        }
+      } catch (error) {
+        console.error('Error fetching account balances', error);
+      }
+    }
+
+    fetchAccountBalances();
+  }, [id]);
+
+  return (
+    <div className="grid lg:grid-cols-4 md:grid-cols-2 gap-5 items-stretch">
+      {wallets.map((wallet) => {
+        const colorClass = getColorClass(wallet.amount, wallet.wallet);
+        const isNegative = wallet.amount < 0;
+
+        return (
+          <div
+            key={wallet.id_wallet}
+            className="rounded-lg overflow-hidden shadow-lg border border-gray-200 hover:shadow-xl transition-shadow duration-300"
+          >
+            <div className={`${colorClass} h-2`} />
+            <div className="p-5">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-bold text-lg text-gray-800">{wallet.wallet}</h3>
+                {wallet.wallet.includes('Credit') ? (
+                  <CreditCard className="text-gray-600" size={20} />
+                ) : (
+                  <Wallet className="text-gray-600" size={20} />
+                )}
+              </div>
+              <p className={`text-xl font-bold ${isNegative ? 'text-red-600' : 'text-gray-800'}`}>
+                {formatCurrency(wallet.amount)}
+              </p>
+
+              <div className="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between">
+                <div className="text-xs text-gray-500">Credit Limit:</div>
+                <div className="text-sm">{formatNumberWithDots(wallet.credit_limit)}</div>
+              </div>
+              <div className="mt-3 flex items-center justify-between">
+                <div className="text-xs text-gray-500">Monthly Limit:</div>
+                <div className="text-sm">{formatNumberWithDots(wallet.monthly_limit)}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default BalanceCard;

src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx

@@ -20,11 +20,13 @@ import {
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 
 const API_URL = apiConfig.transaction;
 
 const ApprovalDialog = () => {
     const { GetData, PostData } = useCallApi();
+    // const { table, reload } = useDataGrid();
 
     const {
         showApprovalDialog,
@@ -83,6 +85,7 @@ const ApprovalDialog = () => {
                 };
                 doSaveLogActivity(createActivity);
                 setShowApprovalDialog(false);
+                // reload();
             } else {
                 setAlert({ show: true, message: response?.message });
             }

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

@@ -3,18 +3,40 @@ import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
 import { Button } from '@/components/ui/button';
 import { useCallback, useState, useEffect } from 'react';
 import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
   // Set the initial state for trxDate
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
+  const [statusApproval, setStatusApproval] = useState<string>(
+    (table.getColumn('status_approve')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    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>(
+    (table.getColumn('code')?.getFilterValue() as string) ?? ''
+  );
+
   // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
@@ -34,6 +56,15 @@ const ListToolbar = () => {
     }
   }, [trxDate, 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();
@@ -69,6 +100,33 @@ const ListToolbar = () => {
               name="to"
             />
           </label>
+
+          <Select
+            value={statusApproval}
+            onValueChange={(value) => {
+              setStatusApproval(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
+              <SelectValue placeholder="Select Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Y">APPROVED</SelectItem>
+              <SelectItem value="N">REJECT</SelectItem>
+              <SelectItem value="W">WAITING APPROVAL</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <label className="input input-sm w-1/3">
+            <KeenIcon icon="magnifier" />
+            <input
+              type="text"
+              placeholder="Search Transaction ID"
+              value={searchValue}
+              onChange={(event) => setSearchValue(event.target.value)}
+            />
+          </label>
+
         </div>
 
         <div className="ml-auto">
@@ -79,11 +137,20 @@ const ListToolbar = () => {
               onClick={() => {
                 const today = new Date();
                 const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+                // Resetting all filters
+                setSearchValue('');
+                setStatusApproval('');
                 settrxDate({
                   from: formatDate(firstDayOfMonth),
                   to: formatDate(today),
                 });
-                reload();
+
+                table.getColumn('code')?.setFilterValue('');
+                table.getColumn('status_approve')?.setFilterValue('');
+                table.setPageIndex(0);
+
+                reload(); // Reload table data
               }}
             >
               <KeenIcon icon="arrows-circle" />
@@ -93,7 +160,6 @@ const ListToolbar = () => {
       </div>
     </div>
   );
-
 };
 
 export default ListToolbar;

src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx

@@ -63,6 +63,15 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
+      {
+        accessorKey: 'code',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Code" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
       {
         accessorKey: 'transaction_date',
         header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@@ -164,7 +173,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorKey: 'status_approve',
-        header: 'Status',
+        header: 'Status Approval',
         cell: ({ row }) => {
           const statusCode = row.original.status_approve;
           let label = '';
@@ -234,27 +243,51 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
 
   const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      let startdate, enddate;
-
-      if (!filter || filter.length === 0) {
       const today = new Date();
-        const nextWeek = new Date();
+      const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-        nextWeek.setDate(today.getDate() + 7);
+
-        startdate = today.toISOString().split('T')[0];
+      // Default values
-        enddate = nextWeek.toISOString().split('T')[0];
+      let startdate = firstDayOfMonth.toISOString().split('T')[0];
-      } else {
+      let enddate = today.toISOString().split('T')[0];
-        startdate = filter[0]?.value?.from;
+      let transactioncode = '';
-        enddate = filter[0]?.value?.to;
+      let approvalstatus = '';
+
+      if (Array.isArray(filter)) {
+        filter.forEach((f: any) => {
+          // console.log(f.id);
+          if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
+            startdate = f.value.from;
+            enddate = f.value.to;
           }
 
-      const formattedFilter = {
+          if (f.id === 'code' && f.value) {
+            transactioncode = f.value;
+          }
+
+          if (f.id === 'status_approve' && f.value) {
+            approvalstatus = f.value;
+          }
+        });
+      }
+
+      // Constructing filter object with dynamic properties
+      const formattedFilter: any = {
         "Transactions.transaction_date": {
           from: `${startdate} 00:00:00`,
           to: `${enddate} 23:59:59`,
         },
-        "Transactions.status_approve": { in: ["W", "Y", "N"] },
       };
 
+      if (transactioncode) {
+        formattedFilter["Transactions.code"] = { like: `%${transactioncode}%` };
+      }
+
+      // Handle approval status filter
+      formattedFilter["Transactions.status_approve"] = approvalstatus
+        ? approvalstatus
+        : { in: ["W", "Y", "N"] };
+
+      // Fetch data from API
       const response = await GetData(`${API_URL}/transaction/history`, {
         limit,
         page: page + 1,
@@ -264,13 +297,17 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         filter: JSON.stringify(formattedFilter),
       });
 
-      setTransaction(response?.data?.list || []);
+      if (!response || !response.data) {
-      return {
+        console.warn('No data received:', response);
-        data: response?.data?.list || [],
+        return { data: [], totalCount: 0 };
-        totalCount: response?.data?.total_count || 0,
+      }
-      };
+
+      setTransaction(response.data.list); // Assuming this is a state setter
+      return { data: response.data.list, totalCount: response.data.total_count };
+
     } catch (error) {
       console.error('Error fetching transaction', error);
+      return { data: [], totalCount: 0 }; // Fail-safe fallback
     }
   };
 

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

@@ -3,19 +3,62 @@ import { useTransactionContext } from '../hooks/useTransactionContext';
 import { Button } from '@/components/ui/button';
 import { useCallback, useState, useEffect } from 'react';
 import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
-  // Set the initial state for trxDate
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('code')?.getFilterValue() as string) ?? ''
+  );
+
+  // const [statusValue, setStatusValue] = useState<string>(
+  //   (table.getColumn('status')?.getFilterValue() as string) ?? ''
+  // );
+
+  const [typeValue, setTypeValue] = useState<string>(
+    (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
+  );
 
-  // Function to format date to YYYY-MM-DD
   const formatDate = (date: Date): string => {
     return date.toISOString().split('T')[0];
   };
 
-  // useEffect to set the default date values
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('code')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
+  // useEffect(() => {
+  //   const timer = setTimeout(() => {
+  //     table.getColumn('status')?.setFilterValue(statusValue);
+  //     table.setPageIndex(0);
+  //   }, 200);
+  //   return () => clearTimeout(timer);
+  // }, [statusValue, table]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.setColumnFilters((prev) => [
+        ...prev.filter((f) => f.id !== 'kind'),
+        { id: 'kind', value: typeValue },
+      ]);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [typeValue, table]);
+
   useEffect(() => {
     const today = new Date();
     const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
@@ -69,6 +112,50 @@ const ListToolbar = () => {
               name="to"
             />
           </label>
+
+          {/* <Select
+            value={statusValue}
+            onValueChange={(value) => {
+              setStatusValue(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
+              <SelectValue placeholder="Select Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="C">COMPLETE</SelectItem>
+              <SelectItem value="F">FAILED</SelectItem>
+              <SelectItem value="O">ON PROCESS</SelectItem>
+            </SelectContent>
+          </Select> */}
+
+          <Select
+            value={typeValue}
+            onValueChange={(value) => {
+              setTypeValue(value);
+            }}
+          >
+            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
+              <SelectValue placeholder="Select Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="T">TRANSFER</SelectItem>
+              <SelectItem value="P">PURCHASE</SelectItem>
+              <SelectItem value="W">WITHDRAW</SelectItem>
+              <SelectItem value="U">TOP UP</SelectItem>
+              <SelectItem value="R">RETURN</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <label className="input input-sm w-1/3">
+            <KeenIcon icon="magnifier" />
+            <input
+              type="text"
+              placeholder="Search Transaction ID"
+              value={searchValue}
+              onChange={(event) => setSearchValue(event.target.value)}
+            />
+          </label>
         </div>
 
         <div className="ml-auto">
@@ -77,12 +164,27 @@ const ListToolbar = () => {
               variant="outline"
               className="h-7.5"
               onClick={() => {
+                // Preserve trxDate values (from, to) and reset others
                 const today = new Date();
                 const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+                // Only reset filters excluding from and to
+                setSearchValue('');
+                // setStatusValue('');
+                setTypeValue('');
                 settrxDate({
                   from: formatDate(firstDayOfMonth),
                   to: formatDate(today),
                 });
+
+                // Reset other filters except for date range
+                table.setColumnFilters([
+                  { id: 'code', value: '' },
+                  // { id: 'status', value: '' },
+                  { id: 'kind', value: '' },
+                ]);
+
+                table.setPageIndex(0);
                 reload();
               }}
             >

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

@@ -70,15 +70,34 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      // {
+      {
-      //   accessorKey: 'transaction_date',
+        accessorKey: 'code',
-      //   header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Code" column={column} />,
-      //   enableSorting: false,
+        enableSorting: false,
-      //   enableHiding: false,
+        enableHiding: false,
-      //   meta: {
+        meta: {
-      //     headerClassName: 'w-[250px]'
+          headerClassName: 'w-[250px]'
-      //   }
+        }
-      // },
+      },
+      {
+        accessorFn: (row) => {
+          switch (row.kind) {
+            case 'T': return 'TRANSFER';
+            case 'P': return 'PURCHASE';
+            case 'W': return 'WITHDRAW';
+            case 'U': return 'TOP UP';
+            case 'R': return 'RETURN';
+            default: return '_';
+          }
+        },
+        accessorKey: 'kind',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Kind" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
       {
         accessorKey: 'transaction_date',
         header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@@ -242,30 +261,60 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
   const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      let startdate;
-      let enddate;
-      let formattedFilter;
-
-      if (filter == undefined || filter.length == 0) {
       const today = new Date();
-
-        // Tanggal 1 di bulan sekarang
       const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
 
-        startdate = firstDayOfMonth.toISOString().split('T')[0];
+      // Default values
-        enddate = today.toISOString().split('T')[0];
+      let startdate = firstDayOfMonth.toISOString().split('T')[0];
-      } else if (filter != undefined || filter.length != 0) {
+      let enddate = today.toISOString().split('T')[0];
-        startdate = filter[0].value.from;
+      let transactioncode = '';
-        enddate = filter[0].value.to;
+      // let transactionstatus = '';
+      let type = ''
+
+      if (Array.isArray(filter)) {
+        // console.log(filter);
+        filter.forEach((f: any) => {
+          if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
+            startdate = f.value.from;
+            enddate = f.value.to;
           }
 
-      formattedFilter = {
+          if (f.id === 'code' && f.value) {
+            transactioncode = f.value;
+          }
+
+          // if (f.id === 'status' && f.value) {
+          //   transactionstatus = f.value;
+          // }
+
+          if (f.id === 'kind' && f.value) {
+            type = f.value;
+          }
+        });
+      }
+
+      // Build filter object dynamically
+      const formattedFilter: any = {
         "Transactions.transaction_date": {
-          from: startdate + " 00:00:00",
+          from: `${startdate} 00:00:00`,
-          to: enddate + " 23:59:59"
+          to: `${enddate} 23:59:59`
         }
       };
 
+      if (transactioncode) {
+        formattedFilter["Transactions.code"] = {
+          like: `%${transactioncode}%`
+        };
+      }
+
+      // if (transactionstatus) {
+      //   formattedFilter["Transactions.status"] = transactionstatus;
+      // }
+
+      if (type) {
+        formattedFilter["Transactions.kind"] = type;
+      }
+
       const response = await GetData(`${API_URL}/transaction/history`, {
         limit,
         page: page + 1,
@@ -275,13 +324,21 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         filter: JSON.stringify(formattedFilter)
       });
 
-      setTransaction(response?.data.list);
+      if (!response || !response.data) {
-      return { data: response?.data.list, totalCount: response?.data.total_count };
+        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 };
     }
   };
 
+
   return (
     <ManageTransactionContext.Provider
       value={{

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

@@ -471,7 +471,9 @@ const AddDialog = () => {
                           <SelectItem value="TM">Top Up Master Agent </SelectItem>
                           <SelectItem value="TA">Top Up Agent </SelectItem>
                           <SelectItem value="PL">Purchase Loja</SelectItem>
-                          
+                          <SelectItem value="DE">Disbursment Escrow</SelectItem>
+                          <SelectItem value="DM">Disbursment Master Agent</SelectItem>
+                          <SelectItem value="DA">Disbursment Agent</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>

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

@@ -605,6 +605,9 @@ const EditDialog = () => {
                           <SelectItem value="TM">Top Up Master Agent </SelectItem>
                           <SelectItem value="TA">Top Up Agent </SelectItem>
                           <SelectItem value="PL">Purchase Loja</SelectItem>
+                          <SelectItem value="DE">Disbursment Escrow</SelectItem>
+                          <SelectItem value="DM">Disbursment Master Agent</SelectItem>
+                          <SelectItem value="DA">Disbursment Agent</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>

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

@@ -186,7 +186,10 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             TE: 'Top Up Escrow',
             TM: 'Top Up Master Agent',
             TA: 'Top Up Agent',
-            PL:'Purchase Loja'
+            PL: 'Purchase Loja',
+            DE: 'Disbursment Escrow',
+            DM: 'Disbursment Master Agent',
+            DA: 'Disbursment Agent'
           };
 
           return mapping[row.type] || 'Unknown';