adding field status_kind on transfertype

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

@@ -82,6 +82,7 @@ const AddDialog = () => {
     status: '',
     type: '',
     status_approval: '',
+    status_kind: '',
     created_by: '',
     created_at: ''
   };
@@ -102,7 +103,8 @@ const AddDialog = () => {
       'wallet_origin',
       'wallet_destination',
       'status',
-      'status_approval'
+      'status_approval',
+      'status_kind'
     ];
 
     const missingFields = requiredFields.filter(
@@ -506,6 +508,35 @@ const AddDialog = () => {
                     </div>
                   </div>
                 </div>
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Status Kind
+                      <span className="text-red-500">*</span>
+                    </label>
+
+                    <div className="grow">
+                      <Select
+                        value={formField.status_kind}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status_kind: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="R">Return</SelectItem>
+                          <SelectItem value="T">Transfer</SelectItem>
+                          <SelectItem value="P">Purchase</SelectItem>
+                          <SelectItem value="W">Withdraw</SelectItem>
+                          <SelectItem value="U">Top Up</SelectItem>
+                          <SelectItem value="N">Top Up Patner</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
 
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">

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

@@ -79,6 +79,7 @@ const EditDialog = () => {
     status: string;
     type: string;
     status_approval: string;
+    status_kind: string;
     updated_by: string;
     updated_at: string;
     permission: string[];
@@ -91,6 +92,7 @@ const EditDialog = () => {
     maximum_amount: 0,
     max_transaction_per_day: 0,
     status_approval: '',
+    status_kind: '',
     type: '',
     status: '',
     permission: [],
@@ -132,6 +134,7 @@ const EditDialog = () => {
       'wallet_destination',
       'status',
       'status_approval',
+      'status_kind',
       'type'
     ];
 
@@ -345,11 +348,13 @@ const EditDialog = () => {
             maximum_amount: response.data.maximum_amount,
             max_transaction_per_day: response.data.max_transaction_per_day,
             status_approval: response.data.status_approval,
+            status_kind: response.data.status_kind,
             type: response.data.type || '',
             status: response.data.status,
             permission: permissionIds
           }));
         }
+        // console.log(response);
       } catch (error) {
         console.error('Error fetching transaction type', error);
         setAlert({
@@ -640,7 +645,35 @@ const EditDialog = () => {
                     </div>
                   </div>
                 </div>
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Status Kind
+                      <span className="text-red-500">*</span>
+                    </label>
 
+                    <div className="grow">
+                      <Select
+                        value={formField.status_kind}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, status_kind: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="R">Return</SelectItem>
+                          <SelectItem value="T">Transfer</SelectItem>
+                          <SelectItem value="P">Purchase</SelectItem>
+                          <SelectItem value="W">Withdraw</SelectItem>
+                          <SelectItem value="U">Top Up</SelectItem>
+                          <SelectItem value="N">Top Up Patner</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">

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

@@ -2,55 +2,181 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
 import { Button } from '@/components/ui/button';
 import { useEffect, useState } from 'react';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem
+} from '@/components/ui/select';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+
+interface TransferType {
+  id: number;
+  name: string;
+  type: string;
+  wallet_origin: { id: number; name: string };
+  wallet_destination: { id: number; name: string };
+  status_approval: string;
+}
+
+const API_URL = apiConfig.service_transaction;
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
-  const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
+  const { handleAddDialog } = useManageTransferTypeContext();
-  
+  const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
-  const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
+  const { GetData } = useCallApi();
+
+  const [searchValue, setSearchValue] = useState('');
+  const [statusTypes, setStatusTypes] = useState('');
+  const [walletOrigins, setWalletOrigin] = useState('');
+  const [walletDestinations, setWalletDestination] = useState('');
+  const [approval, setApproval] = useState('');
+
+  const unique = (arr: string[]) => Array.from(new Set(arr));
+  const types = unique(transferTypes.map((t) => t.type));
+  const origins = unique(transferTypes.map((t) => t.wallet_origin.name));
+  const destinations = unique(transferTypes.map((t) => t.wallet_destination.name));
 
   useEffect(() => {
     const timer = setTimeout(() => {
+
       table.getColumn('name')?.setFilterValue(searchValue);
       table.setPageIndex(0);
     }, 200);
-
     return () => clearTimeout(timer);
-  }, [searchValue, table]);
+  }, [searchValue]);
+
+  useEffect(() => {
+    table.getColumn('type')?.setFilterValue(statusTypes);
+  }, [statusTypes]);
+
+  useEffect(() => {
+    table
+      .getColumn('wallet_origin')
+      ?.setFilterValue(walletOrigins === '__all__' ? '' : walletOrigins);
+  }, [walletOrigins]);
+
+  useEffect(() => {
+    table
+      .getColumn('wallet_destination')
+      ?.setFilterValue(walletDestinations === '__all__' ? '' : walletDestinations);
+  }, [walletDestinations]);
+
+  useEffect(() => {
+    table.getColumn('status_approval')?.setFilterValue(approval);
+  }, [approval]);
+
+  const fetchTransferTypes = async () => {
+    try {
+      const response = await GetData(`${API_URL}/transactiontype/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: 'created_at',
+        order_direction: 'ASC'
+      });
+      setTransferTypes(response?.data.list || []);
+    } catch (error) {
+      console.error('Error fetching transfer types', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchTransferTypes();
+  }, []);
+
+  const handleClearFilter = () => {
+    setSearchValue('');
+    setStatusTypes('__all__');
+    setWalletOrigin('__all__');
+    setWalletDestination('__all__');
+    setApproval('__all__');
+    table.getColumn('name')?.setFilterValue('');
+    table.getColumn('type')?.setFilterValue('');
+    table.getColumn('wallet_origin')?.setFilterValue('');
+    table.getColumn('wallet_destination')?.setFilterValue('');
+    table.getColumn('status_approval')?.setFilterValue('');
+    table.setPageIndex(0);
+  };
+
+  const renderSelect = (
+    placeholder: string,
+    value: string,
+    onChange: (val: string) => void,
+    options: string[]
+  ) => (
+    <div className="min-w-[220px]">
+      <Select value={value === '' ? undefined : value} onValueChange={onChange}>
+        <SelectTrigger className="h-8 text-sm">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((opt) => (
+            <SelectItem key={opt} value={opt}>
+              {opt}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
 
   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 justify-between w-full items-center mb-3">
-          <div className="flex w-[50%] gap-3 items-center">
+          <div className="flex w-[34%] gap-2 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-full text-sm">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Transaction Type"
+                placeholder="Search Transaction Type Name"
                 value={searchValue}
-                onChange={(event) => setSearchValue(event.target.value)}
+                onChange={(e) => setSearchValue(e.target.value)}
               />
             </label>
           </div>
-          <div className="flex gap-3 items-center">
+
+          <div className="flex gap-2 items-center">
+            <Button variant="outline" className="h-8 px-3 text-xs" onClick={handleClearFilter}>
+              Clear
+            </Button>
             <Button
               variant="outline"
-              className="h-7.5 text-[0.8rem]"
+              className="h-8 px-3 text-xs"
               onClick={() => handleAddDialog(true)}
             >
-              Add Data
+              Add
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <DefaultTooltip title="Refresh" placement="top">
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+              <Button variant="outline" className="h-8 px-3" onClick={() => reload()}>
                 <KeenIcon icon="arrows-circle" />
               </Button>
             </DefaultTooltip>
           </div>
         </div>
+
+        {/* Filter bar */}
+        <div className="flex flex-wrap gap-2 w-full">
+          {renderSelect('Select Status Transaction Type', statusTypes, setStatusTypes, types)}
+          {renderSelect('Select Status Approval', approval, setApproval, ['Y', 'N'])}
+          {/* {renderSelect('Select Origin Wallet', walletOrigins, setWalletOrigin, origins)}
+          {renderSelect(
+            'Select Destination Wallet',
+            walletDestinations,
+            setWalletDestination,
+            destinations
+          )} */}
+
+          {/* {renderSelect('Origin', walletOrigins, setWalletOrigin, origins)}
+          {renderSelect('Destination', walletDestinations, setWalletDestination, destinations)} */}
+        </div>
       </div>
     </div>
   );
 };
 
-export default ListToolbar;
+export default ListToolbar;

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

@@ -224,6 +224,27 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         enableHiding: false,
         meta: { headerClassName: 'w-[150px]' }
       },
+      {
+        accessorFn: (row: { status_kind: string }) => {
+          const mapping: Record<string, string> = {
+            R: "Return",
+            T: "Transfer",
+            P: "Purchasem",
+            W: "Withdrawm",
+            U: "Top Up",
+            N: "Top Up Patner"
+          };
+
+          return mapping[row.status_kind] || 'Unknown';
+        },
+        id: 'status_kind',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Status Kind" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
       {
         accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
         id: 'status_approval',
@@ -266,15 +287,35 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     page: number,
     limit: number,
     sorting: any,
-    filter: any
+    columnFilters: any
   ) => {
     const orderField = 'created_at';
-
     const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
 
-    const searchFilter = debouncedSearchTerm ? { any: debouncedSearchTerm.toLowerCase() } : {};
+    let filterObject: Record<string, any> = {};
 
-    filter = filter.length == 0 ? searchFilter : { any: filter[0].value?.toLowerCase() };
+    if (debouncedSearchTerm) {
+      filterObject["any"] = debouncedSearchTerm.toLowerCase();
+    }
+
+    if (columnFilters.length > 0) {
+      columnFilters.forEach((filter: any) => {
+        if (filter.id && filter.value) {
+          if (filter.id === 'name') {
+            filterObject["any"] = filter.value.toLowerCase();
+          } 
+          else if (filter.id === 'wallet_origin') {
+            filterObject["wallet_origin.name"] = filter.value.toLowerCase();
+          }
+          else if (filter.id === 'wallet_destination') {
+            filterObject["wallet_destination.name"] = filter.value.toLowerCase();
+          }
+          else {
+            filterObject[filter.id] = filter.value.toLowerCase();
+          }
+        }
+      });
+    }
 
     const response = await GetData(`${API_URL}/transactiontype/list`, {
       limit: limit,
@@ -282,8 +323,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
       with_deleted: false,
       order_field: orderField,
       order_direction: orderDirection,
-      filter: JSON.stringify(filter)
+      filter: JSON.stringify(filterObject)
     });
+    // console.log(response);
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
@@ -327,4 +369,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 };
 
 export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
-export type { TransferType };
+export type { TransferType };