Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
@ -147,6 +147,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
||||
try {
|
||||
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
filter = filter.length == 0 ? {} : { 'wallets.name': { like: `%${filter[0].value?.toLowerCase()}%` } };
|
||||
|
||||
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, {
|
||||
limit,
|
||||
page: page + 1,
|
||||
|
||||
@ -36,7 +36,6 @@ const ApprovalDialog = () => {
|
||||
selectedTransactionIdForApproval,
|
||||
} = useTransactionContext();
|
||||
|
||||
const [transactionDetails, setTransactionDetails] = useState<any>(null);
|
||||
|
||||
const [formField, setFormField] = useState({
|
||||
transaction_code: '',
|
||||
@ -54,11 +53,6 @@ const ApprovalDialog = () => {
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!transactionDetails || !transactionDetails.code) {
|
||||
toast.error('Transaction data not loaded yet.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formField.status) {
|
||||
toast.error('Please select a status.');
|
||||
return;
|
||||
@ -82,22 +76,25 @@ const ApprovalDialog = () => {
|
||||
if (result.isConfirmed) {
|
||||
// ✅ Kalau tekan YES, baru tembak API
|
||||
const response = await PostData(`${API_URL}/transaction/set-approval`, {
|
||||
id_transaction: transactionDetails.id,
|
||||
id_transaction: selectedTransactionIdForApproval,
|
||||
notes: formField.notes,
|
||||
status: formField.status,
|
||||
pin: formField.pin,
|
||||
});
|
||||
|
||||
// console.log(response?.message?.error?.message,response?.status);
|
||||
|
||||
if (response?.status === false) {
|
||||
toast.error(response?.message?.error?.message || 'Approval failed');
|
||||
// console.log(response);
|
||||
toast.error(JSON.stringify(response));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (response?.status) {
|
||||
toast.success('Success Update Approval');
|
||||
const createActivity = {
|
||||
module: 'Approval Transaction',
|
||||
description: `Change status approve for transaction => ${transactionDetails.code}`,
|
||||
description: `Change status approve for transaction => ${selectedTransactionIdForApproval}`,
|
||||
action: 'U',
|
||||
};
|
||||
doSaveLogActivity(createActivity);
|
||||
@ -108,7 +105,7 @@ const ApprovalDialog = () => {
|
||||
console.log('User cancelled');
|
||||
}
|
||||
},
|
||||
[formField, transactionDetails]
|
||||
[formField]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -119,41 +116,10 @@ const ApprovalDialog = () => {
|
||||
status: '',
|
||||
pin: ''
|
||||
});
|
||||
setTransactionDetails(null);
|
||||
setAlert({ show: false, message: '' });
|
||||
}
|
||||
}, [showApprovalDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTransactionDetails = async () => {
|
||||
if (selectedTransactionIdForApproval) {
|
||||
try {
|
||||
const response = await GetData(
|
||||
`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`,
|
||||
{
|
||||
id: selectedTransactionIdForApproval,
|
||||
}
|
||||
);
|
||||
setTransactionDetails(response?.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (showApprovalDialog && selectedTransactionIdForApproval) {
|
||||
fetchTransactionDetails();
|
||||
}
|
||||
}, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (transactionDetails) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
transaction_code: transactionDetails.id ?? '',
|
||||
}));
|
||||
}
|
||||
}, [transactionDetails]);
|
||||
|
||||
return (
|
||||
<Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
|
||||
|
||||
@ -42,12 +42,35 @@ const TransactionDisbursement = () => {
|
||||
message: ''
|
||||
});
|
||||
|
||||
const fetchWallets = async () => {
|
||||
try {
|
||||
const response = await GetData(
|
||||
`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
|
||||
{}
|
||||
);
|
||||
if (response?.status === true) {
|
||||
setWallets(response.data || []);
|
||||
} else {
|
||||
toast.warning(response?.message || 'Failed to fetch wallet data');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.warning('Failed to fetch wallet data');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCustomerMsisdn = async (sorting: any, filterValue: string) => {
|
||||
const filter: any =
|
||||
filterValue.trim().length === 0 ? {} : { msisdn: { like: `%${filterValue}%` } };
|
||||
filterValue.trim().length === 0
|
||||
? {}
|
||||
: {
|
||||
or: [
|
||||
{ msisdn: { like: `%${filterValue}%` } },
|
||||
{ fullname: { like: `%${filterValue}%` } }
|
||||
]
|
||||
};
|
||||
|
||||
const query: any = {
|
||||
limit: 25,
|
||||
limit: 100,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: sorting[0].id,
|
||||
@ -74,38 +97,6 @@ const TransactionDisbursement = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchWallets = async () => {
|
||||
try {
|
||||
const response = await GetData(
|
||||
`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
|
||||
{}
|
||||
);
|
||||
if (response?.status === true) {
|
||||
setWallets(response.data || []);
|
||||
} else {
|
||||
toast.warning(response?.message || 'Failed to fetch wallet data');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.warning('Failed to fetch wallet data');
|
||||
}
|
||||
};
|
||||
|
||||
fetchWallets();
|
||||
fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], '');
|
||||
|
||||
const handleClickOutside = (event: any) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const doPostData = async (form: typeof initialForm) => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
@ -116,6 +107,7 @@ const TransactionDisbursement = () => {
|
||||
pin: form.pin
|
||||
});
|
||||
if (response?.status == true) {
|
||||
await fetchWallets();
|
||||
toast.success('Success Request Topup');
|
||||
} else {
|
||||
toast.error(`${response?.message?.message}`);
|
||||
@ -128,6 +120,7 @@ const TransactionDisbursement = () => {
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setShowConfirmation(false);
|
||||
ResetForm();
|
||||
}
|
||||
};
|
||||
|
||||
@ -146,6 +139,12 @@ const TransactionDisbursement = () => {
|
||||
// TODO: Kirim ke backend atau proses lainnya
|
||||
};
|
||||
|
||||
const ResetForm = () => {
|
||||
setForm(initialForm);
|
||||
setAlert({ show: false, message: '' });
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const handleCancelSubmit = () => {
|
||||
setShowConfirmation(false);
|
||||
};
|
||||
@ -166,6 +165,22 @@ const TransactionDisbursement = () => {
|
||||
setSearchTerm(msisdn);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchWallets();
|
||||
fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], '');
|
||||
|
||||
const handleClickOutside = (event: any) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const filteredMsisdn = customerMsisdn
|
||||
.filter((item) => item.label.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
.slice(0, 10);
|
||||
@ -256,10 +271,16 @@ const TransactionDisbursement = () => {
|
||||
<label htmlFor="amount">Amount</label>
|
||||
<span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="amount"
|
||||
id="topupAmount"
|
||||
type="number"
|
||||
min={0}
|
||||
value={form.amount}
|
||||
onChange={(e) => setForm({ ...form, amount: e.target.value })}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value >= 0) {
|
||||
setForm({ ...form, amount: String(value) });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -34,25 +34,21 @@ const TransactionTopup = () => {
|
||||
const API_URL = apiConfig.transaction;
|
||||
const API_URL_WALLET = apiConfig.service_wallet;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchWallets = async () => {
|
||||
try {
|
||||
const response = await GetData(
|
||||
`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
|
||||
{}
|
||||
);
|
||||
if (response?.status === true) {
|
||||
setWallets(response.data || []);
|
||||
} else {
|
||||
toast.warning(response?.message || 'Failed to fetch wallet data');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.warning('Failed to fetch wallet data');
|
||||
const fetchWallets = async () => {
|
||||
try {
|
||||
const response = await GetData(
|
||||
`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
|
||||
{}
|
||||
);
|
||||
if (response?.status === true) {
|
||||
setWallets(response.data || []);
|
||||
} else {
|
||||
toast.warning(response?.message || 'Failed to fetch wallet data');
|
||||
}
|
||||
};
|
||||
|
||||
fetchWallets();
|
||||
}, []);
|
||||
} catch (error) {
|
||||
toast.warning('Failed to fetch wallet data');
|
||||
}
|
||||
};
|
||||
|
||||
const doPostData = async (form: typeof initialState) => {
|
||||
setIsSubmitting(true);
|
||||
@ -64,6 +60,7 @@ const TransactionTopup = () => {
|
||||
});
|
||||
console.log(response);
|
||||
if (response?.status == true) {
|
||||
await fetchWallets();
|
||||
toast.success('Success Request Topup');
|
||||
} else {
|
||||
toast.warning(`${response?.message}`);
|
||||
@ -75,6 +72,7 @@ const TransactionTopup = () => {
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setShowConfirmation(false);
|
||||
ResetForm();
|
||||
}
|
||||
};
|
||||
|
||||
@ -97,6 +95,15 @@ const TransactionTopup = () => {
|
||||
setShowConfirmation(false);
|
||||
};
|
||||
|
||||
const ResetForm = () => {
|
||||
setForm(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchWallets();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@ -151,8 +158,14 @@ const TransactionTopup = () => {
|
||||
<Input
|
||||
id="topupAmount"
|
||||
type="number"
|
||||
min={0}
|
||||
value={form.topupAmount}
|
||||
onChange={(e) => setForm({ ...form, topupAmount: e.target.value })}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value >= 0) {
|
||||
setForm({ ...form, topupAmount: String(value) });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -2,55 +2,220 @@ 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 [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
|
||||
const { handleAddDialog } = useManageTransferTypeContext();
|
||||
const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
|
||||
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));
|
||||
const typeLabelMap: Record<string, string> = {
|
||||
D: 'Disbursement',
|
||||
O: 'Other',
|
||||
CA: 'Change Group Emoney Customer to Agent',
|
||||
AC: 'Change Group Emoney Agent to Customer',
|
||||
PC: 'Change Group Point Agent to Customer',
|
||||
PA: 'Change Group Point Customer to Agent',
|
||||
CE: 'Return Customer Emoney',
|
||||
AD: 'Return Agent Deposit',
|
||||
AM: 'Return Agent Merchant',
|
||||
AE: 'Return Agent Emoney',
|
||||
R: 'Reward Point',
|
||||
TE: 'Top Up Escrow',
|
||||
TM: 'Top Up Master Agent',
|
||||
TA: 'Top Up Agent',
|
||||
PL: 'Purchase Loja',
|
||||
DE: 'Disbursment Escrow',
|
||||
DM: 'Disbursment Master Agent',
|
||||
DA: 'Disbursment Agent',
|
||||
WI: 'Withdraw Merchant',
|
||||
IC: 'Income Merchant'
|
||||
};
|
||||
const approvalLabelMap: Record<string, string> = {
|
||||
Y: 'Yes',
|
||||
N: 'No'
|
||||
};
|
||||
|
||||
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[],
|
||||
labelMap?: Record<string, 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}>
|
||||
{labelMap?.[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 w-[50%] gap-3 items-center">
|
||||
<label className="input input-sm w-1/3">
|
||||
<div className="flex justify-between w-full items-center mb-3">
|
||||
<div className="flex w-[34%] gap-2 items-center">
|
||||
<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'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||
<DefaultTooltip title="Refresh" placement="top">
|
||||
<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,
|
||||
typeLabelMap
|
||||
)}
|
||||
{renderSelect(
|
||||
'Select Status Approval',
|
||||
approval,
|
||||
setApproval,
|
||||
['Y', 'N'],
|
||||
approvalLabelMap
|
||||
)}
|
||||
{/* {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;
|
||||
|
||||
@ -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: "Purchase",
|
||||
W: "Withdraw",
|
||||
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 };
|
||||
Reference in New Issue
Block a user