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

add field "deduct_when" on transfer type and rename entity on transfertypecontext

Browse Source
This commit is contained in:
bagusajisaputroo
2025-05-27 23:24:10 +07:00
parent 3b940788e4
commit 7237b483b4
4 changed files with 248 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -114,7 +114,8 @@ const AddFeeDialog = () => {
deduct_from_account: '', deduct_from_account: '',
credit_to: '', credit_to: '',
credit_destination: '00000000-0000-0000-0000-000000000000', credit_destination: '00000000-0000-0000-0000-000000000000',
credit_destination_account: '' credit_destination_account: '',
deduct_when: 'A'
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
@ -389,6 +390,12 @@ const AddFeeDialog = () => {
); );
}; };
useEffect(() => {
if (formField.status_include === 'N') {
setFormField((prev) => ({ ...prev, deduct_when: 'A' }));
}
}, [formField.status_include]);
return ( return (
<Dialog <Dialog
open={showAddFeeDialog} open={showAddFeeDialog}
@ -835,6 +842,25 @@ const AddFeeDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{formField.status_include === 'Y' && (
<div className="w-full">
<label className="form-label">
Deduct When <span className="text-red-500">*</span>
</label>
<Select
value={formField.deduct_when}
onValueChange={(value) => setFormField({ ...formField, deduct_when: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Deduct When" />
</SelectTrigger>
<SelectContent>
<SelectItem value="A">After</SelectItem>
<SelectItem value="B">Before</SelectItem>
</SelectContent>
</Select>
</div>
)}
<div className="flex justify-end pt-2.5 gap-5"> <div className="flex justify-end pt-2.5 gap-5">
<Button <Button

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

@ -105,7 +105,8 @@ const EditFeeDialog = () => {
deduct_from_account: '', deduct_from_account: '',
credit_to: '', credit_to: '',
credit_destination: '00000000-0000-0000-0000-000000000000', credit_destination: '00000000-0000-0000-0000-000000000000',
credit_destination_account: '' credit_destination_account: '',
deduct_when: 'A'
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
@ -161,6 +162,15 @@ const EditFeeDialog = () => {
} }
} }
if (formField.status_include === 'Y' && !formField.deduct_origin) {
setAlert({
show: true,
message: 'Deduct Origin is required when Input is selected'
});
setIsSubmitting(false);
return;
}
if (formField.credit_to === 'I' && !formField.credit_destination) { if (formField.credit_to === 'I' && !formField.credit_destination) {
setAlert({ setAlert({
show: true, show: true,
@ -190,6 +200,9 @@ const EditFeeDialog = () => {
if (formField.deduct_from !== 'I') { if (formField.deduct_from !== 'I') {
payload.deduct_origin = '00000000-0000-0000-0000-000000000000'; payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
} }
if (formField.status_include !== 'Y') {
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
}
// console.log(payload); // console.log(payload);
try { try {
@ -334,7 +347,8 @@ const EditFeeDialog = () => {
response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000', response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
credit_destination_account: response.data.credit_destination_account?.id || '', credit_destination_account: response.data.credit_destination_account?.id || '',
updated_by: parsedUser?.username, updated_by: parsedUser?.username,
updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ') updated_at: new Date().toISOString().slice(0, 19).replace('T', ' '),
deduct_when: response.data.deduct_when || 'A'
}); });
if (response.data.transaction_type?.name) { if (response.data.transaction_type?.name) {
@ -488,7 +502,6 @@ const EditFeeDialog = () => {
/> />
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Transfer Fee Name <span className="text-red-500">*</span> Transfer Fee Name <span className="text-red-500">*</span>
@ -503,7 +516,6 @@ const EditFeeDialog = () => {
} }
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Description <span className="text-red-500">*</span> Description <span className="text-red-500">*</span>
@ -518,7 +530,6 @@ const EditFeeDialog = () => {
} }
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label">Minimum Amount</label> <label className="form-label">Minimum Amount</label>
<NumericFormat <NumericFormat
@ -536,7 +547,6 @@ const EditFeeDialog = () => {
placeholder="Enter Minimum Amount" placeholder="Enter Minimum Amount"
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label">Maximum Amount</label> <label className="form-label">Maximum Amount</label>
<NumericFormat <NumericFormat
@ -554,7 +564,6 @@ const EditFeeDialog = () => {
placeholder="Enter Maximum Amount" placeholder="Enter Maximum Amount"
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Period Start <span className="text-red-500">*</span> Period Start <span className="text-red-500">*</span>
@ -569,7 +578,6 @@ const EditFeeDialog = () => {
} }
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Period End <span className="text-red-500">*</span> Period End <span className="text-red-500">*</span>
@ -584,7 +592,6 @@ const EditFeeDialog = () => {
} }
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label">Deduct Amount</label> <label className="form-label">Deduct Amount</label>
<NumericFormat <NumericFormat
@ -602,7 +609,6 @@ const EditFeeDialog = () => {
placeholder="Enter Deduct Amount" placeholder="Enter Deduct Amount"
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label">Deduct Percentage</label> <label className="form-label">Deduct Percentage</label>
<NumericFormat <NumericFormat
@ -620,7 +626,6 @@ const EditFeeDialog = () => {
placeholder="Enter Deduct Percentage" placeholder="Enter Deduct Percentage"
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Deduct From <span className="text-red-500">*</span> Deduct From <span className="text-red-500">*</span>
@ -645,8 +650,7 @@ const EditFeeDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{formField.deduct_from === 'I' && (
{formField.deduct_from === 'I' && (
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Deduct Origin <span className="text-red-500">*</span> Deduct Origin <span className="text-red-500">*</span>
@ -657,7 +661,8 @@ const EditFeeDialog = () => {
onClick={() => setOpenDeductOrigin(!openDeductOrigin)} onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
> >
<span className="truncate"> <span className="truncate">
{customers.find((customer) => customer.id === formField.deduct_origin)?.username || 'Search customer...'} {customers.find((customer) => customer.id === formField.deduct_origin)
?.username || 'Search customer...'}
</span> </span>
</div> </div>
@ -679,7 +684,9 @@ const EditFeeDialog = () => {
{customers {customers
.filter( .filter(
(customer) => (customer) =>
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) || customer.username
.toLowerCase()
.includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm) customer.msisdn.includes(customerSearchTerm)
) )
.map((customer) => ( .map((customer) => (
@ -696,19 +703,21 @@ const EditFeeDialog = () => {
))} ))}
{customers.filter( {customers.filter(
(customer) => (customer) =>
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) || customer.username
.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">No customer found</div> <div className="px-3 py-2 text-sm text-gray-500">
)} No customer found
</div>
</div> </div>
)} )}
</div> </div>
</div> </div>
)} )}
</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>
@ -746,8 +755,7 @@ const EditFeeDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{formField.credit_to === 'I' && (
{formField.credit_to === 'I' && (
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Credit Destination <span className="text-red-500">*</span> Credit Destination <span className="text-red-500">*</span>
@ -758,8 +766,9 @@ const EditFeeDialog = () => {
onClick={() => setOpenCreditDestination(!openCreditDestination)} onClick={() => setOpenCreditDestination(!openCreditDestination)}
> >
<span className="truncate"> <span className="truncate">
{customers.find((customer) => customer.id === formField.credit_destination) {customers.find(
?.username || 'Search customer...'} (customer) => customer.id === formField.credit_destination
)?.username || 'Search customer...'}
</span> </span>
</div> </div>
@ -808,16 +817,16 @@ 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">No customer found</div> <div className="px-3 py-2 text-sm text-gray-500">
)} No customer found
</div>
</div> </div>
)} )}
</div> </div>
</div> </div>
)} )}
</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>
@ -830,7 +839,6 @@ const EditFeeDialog = () => {
isLoadingWallets isLoadingWallets
)} )}
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Status <span className="text-red-500">*</span> Status <span className="text-red-500">*</span>
@ -848,7 +856,6 @@ const EditFeeDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="w-full"> <div className="w-full">
<label className="form-label"> <label className="form-label">
Status Include <span className="text-red-500">*</span> Status Include <span className="text-red-500">*</span>
@ -856,7 +863,11 @@ const EditFeeDialog = () => {
<Select <Select
value={formField.status_include} value={formField.status_include}
onValueChange={(value) => onValueChange={(value) =>
setFormField({ ...formField, status_include: value }) setFormField({
...formField,
status_include: value,
deduct_when: value === 'N' ? 'A' : formField.deduct_when
})
} }
> >
<SelectTrigger> <SelectTrigger>
@ -868,7 +879,27 @@ const EditFeeDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{formField.status_include === 'Y' && (
<div className="w-full">
<label className="form-label">
Deduct When <span className="text-red-500">*</span>
</label>
<Select
value={formField.deduct_when}
onValueChange={(value) =>
setFormField({ ...formField, deduct_when: value })
}
>
<SelectTrigger>
<SelectValue placeholder="Select Deduct When" />
</SelectTrigger>
<SelectContent>
<SelectItem value="A">After</SelectItem>
<SelectItem value="B">Before</SelectItem>
</SelectContent>
</Select>
</div>
)}
<div className="flex justify-end pt-2.5 gap-5"> <div className="flex justify-end pt-2.5 gap-5">
<Button variant={'outline'} type="button" onClick={resetForm}> <Button variant={'outline'} type="button" onClick={resetForm}>
Reset Reset

15
src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
View File

@ -315,6 +315,21 @@ const ManageTransferFeeContextProvider = ({
cellClassName: 'text-center' cellClassName: 'text-center'
} }
}, },
{
accessorFn: (row: { deduct_when: string }) => {
const mapping: Record<string, string> = {
A: 'After',
B: 'Before'
};
return mapping[row.deduct_when] || 'Unknown';
},
id: 'deduct_when',
header: ({ column }) => <DataGridColumnHeader title="Status Deduct" column={column} />,
enableSorting: false,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{ {
id: 'actions', id: 'actions',
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,

46
src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
View File

@ -51,7 +51,7 @@ interface TransferType {
walletOriginId: string; walletOriginId: string;
walletDestinationId: string; walletDestinationId: string;
status: string; status: string;
type: string; TransactionType_type: string;
} }
interface ContextProps { interface ContextProps {
@ -134,7 +134,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
{ {
accessorFn: (row) => row.id, accessorFn: (row) => row.TransactionType_id,
id: 'id', id: 'id',
header: ({ column }) => ( header: ({ column }) => (
<DataGridColumnHeader title="Transaction Type ID" column={column} /> <DataGridColumnHeader title="Transaction Type ID" column={column} />
@ -144,7 +144,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
{ {
accessorFn: (row) => row.name, accessorFn: (row) => row.TransactionType_name,
id: 'name', id: 'name',
header: ({ column }) => ( header: ({ column }) => (
<DataGridColumnHeader title="Transaction Type Name" column={column} /> <DataGridColumnHeader title="Transaction Type Name" column={column} />
@ -154,7 +154,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
{ {
accessorFn: (row) => row.description, accessorFn: (row) => row.TransactionType_description,
id: 'description', id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: false, enableSorting: false,
@ -162,7 +162,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
{ {
accessorFn: (row) => row.wallet_origin?.name || 'N/A', accessorFn: (row) => row.WalletOrigin_name || 'N/A',
id: 'wallet_origin', id: 'wallet_origin',
header: ({ column }) => <DataGridColumnHeader title="From Account" column={column} />, header: ({ column }) => <DataGridColumnHeader title="From Account" column={column} />,
enableSorting: false, enableSorting: false,
@ -170,7 +170,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
{ {
accessorFn: (row) => row.wallet_destination.name || 'N/A', accessorFn: (row) => row.WalletDestination_name || 'N/A',
id: 'wallet_destination', id: 'wallet_destination',
header: ({ column }) => <DataGridColumnHeader title="To Account" column={column} />, header: ({ column }) => <DataGridColumnHeader title="To Account" column={column} />,
enableSorting: false, enableSorting: false,
@ -178,36 +178,36 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
{ {
accessorFn: (row) => row.maximum_amount, accessorFn: (row) => row.TransactionType_maximum_amount,
id: 'maximum_amount', id: 'maximum_amount',
header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />,
cell: ({ row }) => formatNumber(row.original.maximum_amount), cell: ({ row }) => formatNumber(row.original.TransactionType_maximum_amount),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
{ {
accessorFn: (row) => row.minimum_amount, accessorFn: (row) => row.TransactionType_minimum_amount,
id: 'minimum_amount', id: 'minimum_amount',
header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />,
cell: ({ row }) => formatNumber(row.original.minimum_amount), cell: ({ row }) => formatNumber(row.original.TransactionType_minimum_amount),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
{ {
accessorFn: (row) => row.max_transaction_per_day, accessorFn: (row) => row.TransactionType_max_transaction_per_day,
id: 'max_transaction_per_day', id: 'max_transaction_per_day',
header: ({ column }) => ( header: ({ column }) => (
<DataGridColumnHeader title="Max Transaction Per Day" column={column} /> <DataGridColumnHeader title="Max Transaction Per Day" column={column} />
), ),
cell: ({ row }) => formatInteger(row.original.max_transaction_per_day), cell: ({ row }) => formatInteger(row.original.TransactionType_max_transaction_per_day),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
{ {
accessorFn: (row: { type: string }) => { accessorFn: (row: { TransactionType_type: string }) => {
const mapping: Record<string, string> = { const mapping: Record<string, string> = {
D: 'Disbursement', D: 'Disbursement',
O: 'Other', O: 'Other',
@ -232,7 +232,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
DN: 'Donation' DN: 'Donation'
}; };
return mapping[row.type] || 'Unknown'; return mapping[row.TransactionType_type] || 'Unknown';
}, },
id: 'type', id: 'type',
header: ({ column }) => ( header: ({ column }) => (
@ -244,7 +244,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
}, },
{ {
accessorFn: (row) => row.status, accessorFn: (row) => row.TransactionType_status,
id: 'status', id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false, enableSorting: false,
@ -267,14 +267,15 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
cellClassName: 'text-center' cellClassName: 'text-center'
} }
}, },
{ {
accessorFn: (row) => row.status_kind, accessorFn: (row) => row.TransactionType_status_kind,
id: 'status_kind', id: 'status_kind',
header: ({ column }) => <DataGridColumnHeader title="Status Kind" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Status Kind" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
cell: ({ row }) => { cell: ({ row }) => {
const kind = row.original.status_kind; const kind = row.original.TransactionType_status_kind;
const mapping: Record<string, { label: string; className: string }> = { const mapping: Record<string, { label: string; className: string }> = {
R: { label: 'Return', className: 'bg-blue-100 text-blue-600' }, R: { label: 'Return', className: 'bg-blue-100 text-blue-600' },
@ -313,7 +314,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
meta: { headerClassName: 'w-[250px]', cellClassName: 'text-center' } meta: { headerClassName: 'w-[250px]', cellClassName: 'text-center' }
}, },
{ {
accessorFn: (row) => row.status_approval, accessorFn: (row) => row.TransactionType_status_approval,
id: 'status_approval', id: 'status_approval',
header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
enableSorting: false, enableSorting: false,
@ -344,13 +345,13 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
<> <>
<button <button
className="btn btn-sm btn-icon btn-clear btn-light" className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleEditDialog(true, row.id)} onClick={() => handleEditDialog(true, row.TransactionType_id)}
> >
<KeenIcon icon="notepad-edit" /> <KeenIcon icon="notepad-edit" />
</button> </button>
<button <button
className="btn btn-sm btn-icon btn-clear btn-light" className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDeleteDialog(true, row.id)} onClick={() => handleDeleteDialog(true, row.TransactionType_id)}
> >
<KeenIcon icon="trash" /> <KeenIcon icon="trash" />
</button> </button>
@ -362,7 +363,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
], ],
[handleEditDialog, handleDeleteDialog] [handleEditDialog, handleDeleteDialog]
); );
console.log(selectedTransferType)
const doGetTransferTypeListData = async ( const doGetTransferTypeListData = async (
page: number, page: number,
limit: number, limit: number,
@ -400,6 +401,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
}); });
} }
const response = await GetData(`${API_URL}/transactiontype/list`, { const response = await GetData(`${API_URL}/transactiontype/list`, {
limit: limit, limit: limit,
page: page + 1, page: page + 1,
@ -408,7 +410,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
order_direction: orderDirection, order_direction: orderDirection,
filter: JSON.stringify(filterObject) filter: JSON.stringify(filterObject)
}); });
// console.log(response); console.log(response);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
}; };