TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing tranfer fee

Browse Source
This commit is contained in:
bagusajisaputroo
2025-05-19 13:58:47 +07:00
parent ec5cc4ea37
commit 6bbaa3e94d
2 changed files with 169 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/pages/transfer/transferfee/blocks/AddDialog.tsx
View File

@ -90,6 +90,10 @@ const AddFeeDialog = () => {
id: customer.id, id: customer.id,
name: customer.username name: customer.username
})); }));
const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
const [openCreditDestination, setOpenCreditDestination] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({}); const [errors, setErrors] = useState<Record<string, string>>({});
const initialState = { const initialState = {
name: '', name: '',
@ -120,6 +124,16 @@ const AddFeeDialog = () => {
setTransactionTypeName(''); setTransactionTypeName('');
}; };
const handleCloseDialog = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
setCustomerSearchTerm('');
setOpenCreditDestination(false);
setOpenDeductOrigin(false);
setOpen(false);
handleEditFeeDialog(false, null);
};
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false); const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
@ -376,7 +390,15 @@ const AddFeeDialog = () => {
}; };
return ( return (
<Dialog open={showAddFeeDialog} onOpenChange={(open) => handleAddFeeDialog(open)}> <Dialog
open={showAddFeeDialog}
onOpenChange={(open) => {
if (!open) {
handleAddFeeDialog(open);
handleCloseDialog();
}
}}
>
<DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogTitle></DialogTitle> <DialogTitle></DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
@ -595,16 +617,15 @@ const AddFeeDialog = () => {
<div className="relative"> <div className="relative">
<div <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" 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)} onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
> >
<span className="truncate"> <span className="truncate">
{customers.find((customer) => customer.id === formField.deduct_origin) {customers.find((customer) => customer.id === formField.deduct_origin)
?.username || 'Search customer...'} ?.username || 'Search customer...'}
</span> </span>
<path d="m6 9 6 6 6-6"></path>
</div> </div>
{open && ( {openDeductOrigin && (
<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="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"> <div className="sticky top-0 bg-white p-2 border-b">
<Input <Input
@ -632,11 +653,8 @@ const AddFeeDialog = () => {
key={customer.id} key={customer.id}
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100" className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
onClick={() => { onClick={() => {
setFormField({ setFormField({ ...formField, deduct_origin: customer.id });
...formField, setOpenDeductOrigin(false);
deduct_origin: customer.id
});
setOpen(false);
}} }}
> >
{customer.username} {customer.username}
@ -706,17 +724,16 @@ const AddFeeDialog = () => {
<div className="relative"> <div className="relative">
<div <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" 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)} onClick={() => setOpenCreditDestination(!openCreditDestination)}
> >
<span className="truncate"> <span className="truncate">
{customers.find( {customers.find(
(customer) => customer.id === formField.credit_destination (customer) => customer.id === formField.credit_destination
)?.username || 'Search customer...'} )?.username || 'Search customer...'}
</span> </span>
<path d="m6 9 6 6 6-6"></path>
</div> </div>
{open && ( {openCreditDestination && (
<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="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"> <div className="sticky top-0 bg-white p-2 border-b">
<Input <Input
@ -748,7 +765,7 @@ const AddFeeDialog = () => {
...formField, ...formField,
credit_destination: customer.id credit_destination: customer.id
}); });
setOpen(false); setOpenCreditDestination(false);
}} }}
> >
{customer.username} {customer.username}

53
src/pages/transfer/transferfee/blocks/EditDialog.tsx
View File

@ -1,4 +1,3 @@
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { import {
@ -62,6 +61,8 @@ const EditFeeDialog = () => {
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { GetData, PutData } = useCallApi(); const { GetData, PutData } = useCallApi();
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
const [openCreditDestination, setOpenCreditDestination] = useState(false);
const [wallets, setWallets] = useState<WalletProps[]>([]); const [wallets, setWallets] = useState<WalletProps[]>([]);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
@ -326,7 +327,8 @@ const EditFeeDialog = () => {
status_include: response.data.status_include || '', status_include: response.data.status_include || '',
deduct_from: response.data.deduct_from || '', deduct_from: response.data.deduct_from || '',
deduct_from_account: response.data.deduct_from_account?.id || '', deduct_from_account: response.data.deduct_from_account?.id || '',
deduct_origin: response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000', deduct_origin:
response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
credit_to: response.data.credit_to || '', credit_to: response.data.credit_to || '',
credit_destination: credit_destination:
response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000', response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
@ -366,6 +368,8 @@ const EditFeeDialog = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
setCustomerSearchTerm(''); setCustomerSearchTerm('');
setOpenCreditDestination(false);
setOpenDeductOrigin(false);
setOpen(false); setOpen(false);
handleEditFeeDialog(false, null); handleEditFeeDialog(false, null);
}; };
@ -653,16 +657,14 @@ const EditFeeDialog = () => {
<div className="relative"> <div className="relative">
<div <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" 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)} onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
> >
<span className="truncate"> <span className="truncate">
{customers.find((customer) => customer.id === formField.deduct_origin) {customers.find((customer) => customer.id === formField.deduct_origin)?.username || 'Search customer...'}
?.username || 'Search customer...'}
</span> </span>
<path d="m6 9 6 6 6-6"></path>
</div> </div>
{open && ( {openDeductOrigin && (
<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="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"> <div className="sticky top-0 bg-white p-2 border-b">
<Input <Input
@ -680,9 +682,7 @@ const EditFeeDialog = () => {
{customers {customers
.filter( .filter(
(customer) => (customer) =>
customer.username customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
.toLowerCase()
.includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm) customer.msisdn.includes(customerSearchTerm)
) )
.map((customer) => ( .map((customer) => (
@ -690,11 +690,8 @@ const EditFeeDialog = () => {
key={customer.id} key={customer.id}
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100" className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
onClick={() => { onClick={() => {
setFormField({ setFormField({ ...formField, deduct_origin: customer.id });
...formField, setOpenDeductOrigin(false);
deduct_origin: customer.id
});
setOpen(false);
}} }}
> >
{customer.username} {customer.username}
@ -702,14 +699,10 @@ const EditFeeDialog = () => {
))} ))}
{customers.filter( {customers.filter(
(customer) => (customer) =>
customer.username customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
.toLowerCase()
.includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm) customer.msisdn.includes(customerSearchTerm)
).length === 0 && ( ).length === 0 && (
<div className="px-3 py-2 text-sm text-gray-500"> <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
No customer found
</div>
)} )}
</div> </div>
</div> </div>
@ -718,6 +711,7 @@ const EditFeeDialog = () => {
</div> </div>
)} )}
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Deduct From Account <span className="text-red-500">*</span> Deduct From Account <span className="text-red-500">*</span>
@ -764,17 +758,15 @@ const EditFeeDialog = () => {
<div className="relative"> <div className="relative">
<div <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" 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)} onClick={() => setOpenCreditDestination(!openCreditDestination)}
> >
<span className="truncate"> <span className="truncate">
{customers.find( {customers.find((customer) => customer.id === formField.credit_destination)
(customer) => customer.id === formField.credit_destination ?.username || 'Search customer...'}
)?.username || 'Search customer...'}
</span> </span>
<path d="m6 9 6 6 6-6"></path>
</div> </div>
{open && ( {openCreditDestination && (
<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="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"> <div className="sticky top-0 bg-white p-2 border-b">
<Input <Input
@ -806,7 +798,7 @@ const EditFeeDialog = () => {
...formField, ...formField,
credit_destination: customer.id credit_destination: customer.id
}); });
setOpen(false); setOpenCreditDestination(false);
}} }}
> >
{customer.username} {customer.username}
@ -819,9 +811,7 @@ const EditFeeDialog = () => {
.includes(customerSearchTerm.toLowerCase()) || .includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm) customer.msisdn.includes(customerSearchTerm)
).length === 0 && ( ).length === 0 && (
<div className="px-3 py-2 text-sm text-gray-500"> <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
No customer found
</div>
)} )}
</div> </div>
</div> </div>
@ -830,6 +820,7 @@ const EditFeeDialog = () => {
</div> </div>
)} )}
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Credit Destination Account <span className="text-red-500">*</span> Credit Destination Account <span className="text-red-500">*</span>