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: '',
credit_to: '',
credit_destination: '00000000-0000-0000-0000-000000000000',
credit_destination_account: ''
credit_destination_account: '',
deduct_when: 'A'
};
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 (
<Dialog
open={showAddFeeDialog}
@ -835,6 +842,25 @@ const AddFeeDialog = () => {
</SelectContent>
</Select>
</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">
<Button

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

@ -105,7 +105,8 @@ const EditFeeDialog = () => {
deduct_from_account: '',
credit_to: '',
credit_destination: '00000000-0000-0000-0000-000000000000',
credit_destination_account: ''
credit_destination_account: '',
deduct_when: 'A'
};
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) {
setAlert({
show: true,
@ -190,6 +200,9 @@ const EditFeeDialog = () => {
if (formField.deduct_from !== 'I') {
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
}
if (formField.status_include !== 'Y') {
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
}
// console.log(payload);
try {
@ -334,7 +347,8 @@ const EditFeeDialog = () => {
response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
credit_destination_account: response.data.credit_destination_account?.id || '',
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) {
@ -488,7 +502,6 @@ const EditFeeDialog = () => {
/>
</div>
</div>
<div className="w-full">
<label className="form-label">
Transfer Fee Name <span className="text-red-500">*</span>
@ -503,7 +516,6 @@ const EditFeeDialog = () => {
}
/>
</div>
<div className="w-full">
<label className="form-label">
Description <span className="text-red-500">*</span>
@ -518,7 +530,6 @@ const EditFeeDialog = () => {
}
/>
</div>
<div className="w-full">
<label className="form-label">Minimum Amount</label>
<NumericFormat
@ -536,7 +547,6 @@ const EditFeeDialog = () => {
placeholder="Enter Minimum Amount"
/>
</div>
<div className="w-full">
<label className="form-label">Maximum Amount</label>
<NumericFormat
@ -554,7 +564,6 @@ const EditFeeDialog = () => {
placeholder="Enter Maximum Amount"
/>
</div>
<div className="w-full">
<label className="form-label">
Period Start <span className="text-red-500">*</span>
@ -569,7 +578,6 @@ const EditFeeDialog = () => {
}
/>
</div>
<div className="w-full">
<label className="form-label">
Period End <span className="text-red-500">*</span>
@ -584,7 +592,6 @@ const EditFeeDialog = () => {
}
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Amount</label>
<NumericFormat
@ -602,7 +609,6 @@ const EditFeeDialog = () => {
placeholder="Enter Deduct Amount"
/>
</div>
<div className="w-full">
<label className="form-label">Deduct Percentage</label>
<NumericFormat
@ -620,7 +626,6 @@ const EditFeeDialog = () => {
placeholder="Enter Deduct Percentage"
/>
</div>
<div className="w-full">
<label className="form-label">
Deduct From <span className="text-red-500">*</span>
@ -645,7 +650,6 @@ const EditFeeDialog = () => {
</SelectContent>
</Select>
</div>
{formField.deduct_from === 'I' && (
<div className="w-full">
<label className="form-label">
@ -657,7 +661,8 @@ const EditFeeDialog = () => {
onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
>
<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>
</div>
@ -679,7 +684,9 @@ const EditFeeDialog = () => {
{customers
.filter(
(customer) =>
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
customer.username
.toLowerCase()
.includes(customerSearchTerm.toLowerCase()) ||
customer.msisdn.includes(customerSearchTerm)
)
.map((customer) => (
@ -696,10 +703,14 @@ const EditFeeDialog = () => {
))}
{customers.filter(
(customer) =>
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
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 className="px-3 py-2 text-sm text-gray-500">
No customer found
</div>
)}
</div>
</div>
@ -707,8 +718,6 @@ const EditFeeDialog = () => {
</div>
</div>
)}
<div className="w-full">
<label className="form-label">
Deduct From Account <span className="text-red-500">*</span>
@ -746,7 +755,6 @@ const EditFeeDialog = () => {
</SelectContent>
</Select>
</div>
{formField.credit_to === 'I' && (
<div className="w-full">
<label className="form-label">
@ -758,8 +766,9 @@ const EditFeeDialog = () => {
onClick={() => setOpenCreditDestination(!openCreditDestination)}
>
<span className="truncate">
{customers.find((customer) => customer.id === formField.credit_destination)
?.username || 'Search customer...'}
{customers.find(
(customer) => customer.id === formField.credit_destination
)?.username || 'Search customer...'}
</span>
</div>
@ -808,7 +817,9 @@ const EditFeeDialog = () => {
.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 className="px-3 py-2 text-sm text-gray-500">
No customer found
</div>
)}
</div>
</div>
@ -816,8 +827,6 @@ const EditFeeDialog = () => {
</div>
</div>
)}
<div className="w-full">
<label className="form-label">
Credit Destination Account <span className="text-red-500">*</span>
@ -830,7 +839,6 @@ const EditFeeDialog = () => {
isLoadingWallets
)}
</div>
<div className="w-full">
<label className="form-label">
Status <span className="text-red-500">*</span>
@ -848,7 +856,6 @@ const EditFeeDialog = () => {
</SelectContent>
</Select>
</div>
<div className="w-full">
<label className="form-label">
Status Include <span className="text-red-500">*</span>
@ -856,7 +863,11 @@ const EditFeeDialog = () => {
<Select
value={formField.status_include}
onValueChange={(value) =>
setFormField({ ...formField, status_include: value })
setFormField({
...formField,
status_include: value,
deduct_when: value === 'N' ? 'A' : formField.deduct_when
})
}
>
<SelectTrigger>
@ -868,7 +879,27 @@ const EditFeeDialog = () => {
</SelectContent>
</Select>
</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">
<Button variant={'outline'} type="button" onClick={resetForm}>
Reset

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

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