adding deduct origin on transfer fee
This commit is contained in:
bagusajisaputroo
@ -106,6 +106,7 @@ const AddFeeDialog = () => {
|
||||
created_by: '',
|
||||
created_at: '',
|
||||
deduct_from: '',
|
||||
deduct_origin: '00000000-0000-0000-0000-000000000000',
|
||||
deduct_from_account: '',
|
||||
credit_to: '',
|
||||
credit_destination: '00000000-0000-0000-0000-000000000000',
|
||||
@ -296,6 +297,14 @@ const AddFeeDialog = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (formField.deduct_from === 'I' && !formField.deduct_origin) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: 'Deduct Origin is required when Input is selected'
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
|
||||
const payload = { ...formField };
|
||||
@ -304,6 +313,9 @@ const AddFeeDialog = () => {
|
||||
payload.credit_destination = '00000000-0000-0000-0000-000000000000';
|
||||
}
|
||||
|
||||
if (formField.deduct_from !== 'I') {
|
||||
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
|
||||
}
|
||||
try {
|
||||
const response = await PostData(`${API_URL}/transactionfees/create`, payload);
|
||||
|
||||
@ -557,7 +569,13 @@ const AddFeeDialog = () => {
|
||||
</label>
|
||||
<Select
|
||||
value={formField.deduct_from}
|
||||
onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
|
||||
onValueChange={(value) =>
|
||||
setFormField({
|
||||
...formField,
|
||||
deduct_from: value,
|
||||
deduct_origin: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Deduct From" />
|
||||
@ -565,12 +583,86 @@ const AddFeeDialog = () => {
|
||||
<SelectContent>
|
||||
<SelectItem value="D">Destination Member</SelectItem>
|
||||
<SelectItem value="S">Source Member</SelectItem>
|
||||
<SelectItem value="I">Input</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{formField.deduct_from === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.deduct_origin)
|
||||
?.username || 'Search customer...'}
|
||||
</span>
|
||||
<path d="m6 9 6 6 6-6"></path>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
deduct_origin: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct From Destination <span className="text-red-500">*</span>
|
||||
Deduct From Account <span className="text-red-500">*</span>
|
||||
</label>
|
||||
{renderSelectWithLoading(
|
||||
formField.deduct_from_account,
|
||||
@ -580,6 +672,7 @@ const AddFeeDialog = () => {
|
||||
isLoadingWallets
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit To <span className="text-red-500">*</span>
|
||||
@ -678,6 +771,7 @@ const AddFeeDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit Destination Account <span className="text-red-500">*</span>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import {
|
||||
@ -99,6 +100,7 @@ const EditFeeDialog = () => {
|
||||
updated_by: '',
|
||||
updated_at: '',
|
||||
deduct_from: '',
|
||||
deduct_origin: '00000000-0000-0000-0000-000000000000',
|
||||
deduct_from_account: '',
|
||||
credit_to: '',
|
||||
credit_destination: '00000000-0000-0000-0000-000000000000',
|
||||
@ -167,6 +169,15 @@ const EditFeeDialog = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (formField.deduct_from === 'I' && !formField.deduct_origin) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: 'Deduct Origin is required when Input is selected'
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setAlert({ show: false, message: '' });
|
||||
|
||||
const payload = { ...formField };
|
||||
@ -175,6 +186,11 @@ const EditFeeDialog = () => {
|
||||
payload.credit_destination = '00000000-0000-0000-0000-000000000000';
|
||||
}
|
||||
|
||||
if (formField.deduct_from !== 'I') {
|
||||
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
|
||||
}
|
||||
|
||||
// console.log(payload);
|
||||
try {
|
||||
const response = await PutData(
|
||||
`${API_URL}/transactionfees/update/${selectedTransferFee}`,
|
||||
@ -293,7 +309,7 @@ const EditFeeDialog = () => {
|
||||
setIsLoadingTransferFee(true);
|
||||
try {
|
||||
const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
|
||||
|
||||
// console.log(response);
|
||||
if (response?.status) {
|
||||
setFormField({
|
||||
...initialState,
|
||||
@ -310,6 +326,7 @@ const EditFeeDialog = () => {
|
||||
status_include: response.data.status_include || '',
|
||||
deduct_from: response.data.deduct_from || '',
|
||||
deduct_from_account: response.data.deduct_from_account?.id || '',
|
||||
deduct_origin: response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
|
||||
credit_to: response.data.credit_to || '',
|
||||
credit_destination:
|
||||
response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
|
||||
@ -344,6 +361,7 @@ const EditFeeDialog = () => {
|
||||
hasFetchedRef.current = false;
|
||||
}
|
||||
}, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setFormField(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
@ -351,12 +369,14 @@ const EditFeeDialog = () => {
|
||||
setOpen(false);
|
||||
handleEditFeeDialog(false, null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!showEditFeeDialog) {
|
||||
setCustomerSearchTerm('');
|
||||
setOpen(false);
|
||||
}
|
||||
}, [showEditFeeDialog]);
|
||||
|
||||
const renderSelectWithLoading = (
|
||||
value: string,
|
||||
onChangeHandler: (value: string) => void,
|
||||
@ -606,7 +626,13 @@ const EditFeeDialog = () => {
|
||||
</label>
|
||||
<Select
|
||||
value={formField.deduct_from}
|
||||
onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
|
||||
onValueChange={(value) =>
|
||||
setFormField({
|
||||
...formField,
|
||||
deduct_from: value,
|
||||
deduct_origin: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Deduct From" />
|
||||
@ -614,13 +640,87 @@ const EditFeeDialog = () => {
|
||||
<SelectContent>
|
||||
<SelectItem value="D">Destination Member</SelectItem>
|
||||
<SelectItem value="S">Source Member</SelectItem>
|
||||
<SelectItem value="I">Input</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{formField.deduct_from === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.deduct_origin)
|
||||
?.username || 'Search customer...'}
|
||||
</span>
|
||||
<path d="m6 9 6 6 6-6"></path>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
deduct_origin: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct From Destination <span className="text-red-500">*</span>
|
||||
Deduct From Account <span className="text-red-500">*</span>
|
||||
</label>
|
||||
{renderSelectWithLoading(
|
||||
formField.deduct_from_account,
|
||||
@ -630,7 +730,6 @@ const EditFeeDialog = () => {
|
||||
isLoadingWallets
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit To <span className="text-red-500">*</span>
|
||||
@ -782,8 +881,6 @@ const EditFeeDialog = () => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="flex justify-end pt-2.5 gap-5">
|
||||
<Button variant={'outline'} type="button" onClick={resetForm}>
|
||||
Reset
|
||||
|
||||
@ -227,10 +227,11 @@ const ManageTransferFeeContextProvider = ({
|
||||
accessorFn: (row: { deduct_from: string }) => {
|
||||
const mapping: Record<string, string> = {
|
||||
D: 'Destination Member',
|
||||
S: 'Source Member'
|
||||
S: 'Source Member',
|
||||
I: 'Input Customer'
|
||||
};
|
||||
|
||||
return mapping[row.deduct_from];
|
||||
return mapping[row.deduct_from] || 'Unknown';
|
||||
},
|
||||
id: 'deduct_from',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Deduct From" column={column} />,
|
||||
@ -239,16 +240,33 @@ const ManageTransferFeeContextProvider = ({
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.deduct_from_account?.description,
|
||||
accessorFn: (row) => {
|
||||
if (row.deduct_from === 'S' || row.deduct_from === 'D' || !row.deduct_from_account) {
|
||||
return 'N/A';
|
||||
}
|
||||
return row.deduct_from_account.description;
|
||||
},
|
||||
id: 'deduct_from_account',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader title="Deduct From Account" column={column} />
|
||||
<DataGridColumnHeader title="Deduct From Destination" column={column} />
|
||||
),
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
},
|
||||
|
||||
{
|
||||
accessorFn: (row) => {
|
||||
if (row.deduct_from === 'S' || row.deduct_from === 'D' || !row.deduct_origin) {
|
||||
return 'N/A';
|
||||
}
|
||||
return row.deduct_origin?.fullname;
|
||||
},
|
||||
id: 'deduct_origin',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Deduct Origin" column={column} />,
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.status,
|
||||
id: 'status',
|
||||
|
||||
Reference in New Issue
Block a user