This commit is contained in:
unknown
2025-05-29 00:13:11 +07:00
6 changed files with 266 additions and 169 deletions

View File

@ -612,10 +612,10 @@ const DetailApprovalTransaction = () => {
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
</div>
<div>
{/* <div>
<p className="text-sm text-gray-500">Phone Number</p>
<p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>
</div>
</div> */}
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.origin_customer?.email ?? "-"}</p>

View File

@ -678,11 +678,11 @@ const DetailTransaction = () => {
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_name}</p>
</div>
<div>
{/* <div>
<p className="text-sm text-gray-500">Phone Number</p>
<p className="font-medium">{transactionDetails?.origin_msisdn}</p>
<p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
</div>
</div> */}
<div>
<p className="text-sm text-gray-500">Phone Number</p>
<p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>

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,13 +390,19 @@ const AddFeeDialog = () => {
);
};
useEffect(() => {
if (formField.status_include === 'N') {
setFormField((prev) => ({ ...prev, deduct_when: 'A' }));
}
}, [formField.status_include]);
return (
<Dialog
open={showAddFeeDialog}
onOpenChange={(open) => {
if (!open) {
handleAddFeeDialog(open);
handleCloseDialog();
handleAddFeeDialog(open);
handleCloseDialog();
}
}}
>
@ -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

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,70 +650,74 @@ const EditFeeDialog = () => {
</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={() => setOpenDeductOrigin(!openDeductOrigin)}
>
<span className="truncate">
{customers.find((customer) => customer.id === formField.deduct_origin)
?.username || 'Search customer...'}
</span>
</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={() => setOpenDeductOrigin(!openDeductOrigin)}
>
<span className="truncate">
{customers.find((customer) => customer.id === formField.deduct_origin)?.username || 'Search customer...'}
</span>
</div>
{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="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 });
setOpenDeductOrigin(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>
)}
{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="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 });
setOpenDeductOrigin(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 Account <span className="text-red-500">*</span>
@ -746,78 +755,78 @@ const EditFeeDialog = () => {
</SelectContent>
</Select>
</div>
{formField.credit_to === 'I' && (
<div className="w-full">
<label className="form-label">
Credit Destination <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={() => setOpenCreditDestination(!openCreditDestination)}
>
<span className="truncate">
{customers.find(
(customer) => customer.id === formField.credit_destination
)?.username || 'Search customer...'}
</span>
</div>
{formField.credit_to === 'I' && (
<div className="w-full">
<label className="form-label">
Credit Destination <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={() => setOpenCreditDestination(!openCreditDestination)}
>
<span className="truncate">
{customers.find((customer) => customer.id === formField.credit_destination)
?.username || 'Search customer...'}
</span>
</div>
{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="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,
credit_destination: customer.id
});
setOpenCreditDestination(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>
)}
{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="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,
credit_destination: customer.id
});
setOpenCreditDestination(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">
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

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} />,