add new field (Transactiontype status) on transactiontype + remove console on addDialog conversion
This commit is contained in:
bagusajisaputroo
@ -1,5 +1,5 @@
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
|
||||
import {
|
||||
Alert,
|
||||
@ -30,6 +30,15 @@ import {
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
import { getAuth } from '@/auth';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from '@/components/ui/command';
|
||||
|
||||
interface WalletProps {
|
||||
Wallet_id: string;
|
||||
@ -48,6 +57,7 @@ const API_URL3_CUSTOMER = apiConfig.service_customer;
|
||||
|
||||
const AddDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const { GetData } = useCallApi();
|
||||
const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
|
||||
const [wallets, setWallets] = useState<WalletProps[]>([]);
|
||||
@ -70,37 +80,102 @@ const AddDialog = () => {
|
||||
maximum_amount: 0,
|
||||
max_transaction_per_day: 0,
|
||||
status: '',
|
||||
type: '',
|
||||
status_approval: '',
|
||||
created_by: '',
|
||||
created_at: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const parsedUser = getAuth()?.user;
|
||||
|
||||
// Updated validation function to make only certain fields required
|
||||
const validateForm = () => {
|
||||
const requiredFields = [
|
||||
'name',
|
||||
'description',
|
||||
'wallet_origin',
|
||||
'wallet_destination',
|
||||
'wallet_fee_destination',
|
||||
'customer_fee_destination',
|
||||
'status',
|
||||
'status_approval'
|
||||
];
|
||||
|
||||
const missingFields = requiredFields.filter(
|
||||
(field) =>
|
||||
formField[field as keyof typeof formField] === '' ||
|
||||
formField[field as keyof typeof formField] === null ||
|
||||
formField[field as keyof typeof formField] === undefined
|
||||
);
|
||||
|
||||
if (missingFields.length > 0) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: `Please fill out all required fields: ${missingFields.join(', ')}`
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
setAlert({ show: false, message: '' });
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
// setIsSubmitting(true);
|
||||
const payload = {
|
||||
name: formField.name,
|
||||
description: formField.description,
|
||||
wallet_origin: formField.wallet_origin,
|
||||
wallet_destination: formField.wallet_destination,
|
||||
minimum_amount: formField.minimum_amount,
|
||||
maximum_amount: formField.maximum_amount,
|
||||
max_transaction_per_day: formField.max_transaction_per_day,
|
||||
wallet_fee_destination: formField.wallet_fee_destination,
|
||||
customer_fee_destination: formField.customer_fee_destination,
|
||||
status_approval: formField.status_approval,
|
||||
status: formField.status
|
||||
};
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (!validateForm()) {
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
doCreateTransferType(formField)
|
||||
.then((success) => {
|
||||
if (success) {
|
||||
handleAddDialog(false);
|
||||
toast.success('Success Create Transfer Type');
|
||||
reload();
|
||||
resetForm();
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
const doCreateTransferType = useCallback(
|
||||
async (data: typeof formField) => {
|
||||
try {
|
||||
const response = await PostData(`${API_URL}/transactiontype/create`, data);
|
||||
|
||||
if (response?.status) {
|
||||
setAlert({ show: false, message: '' });
|
||||
return true;
|
||||
} else {
|
||||
setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: 'An error occurred while creating transfer type'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
[PostData]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
@ -128,7 +203,6 @@ const AddDialog = () => {
|
||||
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
|
||||
});
|
||||
setCustomers(response?.data.list);
|
||||
// console.log('CUSTOMER: ', response?.data.list);
|
||||
} catch (error) {
|
||||
console.error('Error fetching customer', error);
|
||||
}
|
||||
@ -161,34 +235,6 @@ const AddDialog = () => {
|
||||
fetchWallets();
|
||||
}, [showAddDialog]);
|
||||
|
||||
const doCreateTransferType = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
for (const key in formField) {
|
||||
if (formField[key as keyof typeof formField] === '') {
|
||||
setAlert({ show: true, message: 'All fields must be filled out' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setAlert({ show: false, message: '' });
|
||||
|
||||
const response = await PostData(`${API_URL}/transactiontype/create`, formField);
|
||||
|
||||
if (response?.status) {
|
||||
setAlert({ show: false, message: '' });
|
||||
handleAddDialog(false);
|
||||
toast.success('Success Create Transfer Type');
|
||||
reload();
|
||||
resetForm();
|
||||
} else {
|
||||
setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
|
||||
}
|
||||
handleAddDialog(false);
|
||||
},
|
||||
[formField]
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
|
||||
<DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
@ -198,7 +244,7 @@ const AddDialog = () => {
|
||||
<div className="flex items-center justify-between flex-wrap grow">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-xl font-semibold leading-none text-gray-900">
|
||||
Addd Transaction Type
|
||||
Add Transaction Type
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
|
||||
</div>
|
||||
@ -220,7 +266,7 @@ const AddDialog = () => {
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
<form action="" onSubmit={doCreateTransferType}>
|
||||
<form action="" onSubmit={handleSubmit}>
|
||||
<div className="card-body grid gap-5 p-0">
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
@ -228,15 +274,17 @@ const AddDialog = () => {
|
||||
Transfer Type Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.name}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, name: target.value }))
|
||||
}
|
||||
/>
|
||||
<div className="grow">
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.name}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, name: target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -246,15 +294,17 @@ const AddDialog = () => {
|
||||
Description
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.description}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, description: target.value }))
|
||||
}
|
||||
/>
|
||||
<div className="grow">
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.description}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, description: target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -263,20 +313,22 @@ const AddDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Minimum Amount
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.minimum_amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
minimum_amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Minimum Amount"
|
||||
/>
|
||||
<div className="grow">
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.minimum_amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
minimum_amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Minimum Amount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -285,20 +337,22 @@ const AddDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Maximum Amount
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.maximum_amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
maximum_amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Maximum Amount"
|
||||
/>
|
||||
<div className="grow">
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.maximum_amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
maximum_amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Maximum Amount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
@ -306,24 +360,26 @@ const AddDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Max Transaction per day
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.max_transaction_per_day}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
max_transaction_per_day: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Max Transaction Per Day"
|
||||
/>
|
||||
<div className="grow">
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.max_transaction_per_day}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
max_transaction_per_day: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Max Transaction Per Day"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
From Account
|
||||
<span className="text-red-500">*</span>
|
||||
@ -351,7 +407,7 @@ const AddDialog = () => {
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
To Account
|
||||
<span className="text-red-500">*</span>
|
||||
@ -378,7 +434,7 @@ const AddDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Wallet Destination Fee
|
||||
<span className="text-red-500">*</span>
|
||||
@ -405,35 +461,91 @@ const AddDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Customer Fee Destination
|
||||
<span className="text-red-500">*</span>
|
||||
Customer Fee Destination<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow">
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{customers.find(
|
||||
(customer) => customer.id === formField.customer_fee_destination
|
||||
)?.username || 'Select Customer'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Customer..." />
|
||||
<CommandList
|
||||
className="max-h-[300px] overflow-y-auto"
|
||||
style={{ touchAction: 'pan-y' }}
|
||||
onWheel={(e) => {
|
||||
e.currentTarget.scrollTop += e.deltaY;
|
||||
}}
|
||||
>
|
||||
<CommandEmpty>No Customer found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{customers.map((customer) => (
|
||||
<CommandItem
|
||||
key={customer.id}
|
||||
value={customer.username}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
customer_fee_destination: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
TransactionType Status
|
||||
<span className="text-red-500"> *</span>
|
||||
</label>
|
||||
|
||||
<div className="grow">
|
||||
<Select
|
||||
value={formField.customer_fee_destination}
|
||||
onValueChange={(customer_fee_destination) =>
|
||||
setFormField((prev) => ({ ...prev, customer_fee_destination }))
|
||||
value={formField.type}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, type: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Customer" />
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{customers.map((customer, idx) => (
|
||||
<SelectItem value={customer.id} key={customer.id}>
|
||||
{customer.username} - {customer.msisdn}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectItem value="D">Disbursement </SelectItem>
|
||||
<SelectItem value="O">Other </SelectItem>
|
||||
<SelectItem value="CA">Change Customer to Agent </SelectItem>
|
||||
<SelectItem value="AC">Change Agent to Customer </SelectItem>
|
||||
<SelectItem value="CE">Return Customer Emoney </SelectItem>
|
||||
<SelectItem value="AD">Return Agent Deposit </SelectItem>
|
||||
<SelectItem value="AM">Return Agent Merchant </SelectItem>
|
||||
<SelectItem value="AE">Return Agent Emoney </SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Status Approval
|
||||
<span className="text-red-500">*</span>
|
||||
@ -459,7 +571,7 @@ const AddDialog = () => {
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Status
|
||||
<span className="text-red-500"> *</span>
|
||||
|
||||
@ -22,10 +22,18 @@ import { apiConfig } from '@/config/api.config';
|
||||
import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components';
|
||||
import { toast } from 'sonner';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
import { getAuth } from '@/auth';
|
||||
import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
|
||||
import AddFeeDialog from '../../transferfee/blocks/AddDialog';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from '@/components/ui/command';
|
||||
|
||||
const API_URL = apiConfig.service_transaction;
|
||||
const API_URL_MASTERDATA = apiConfig.service_master_data;
|
||||
@ -50,6 +58,7 @@ interface TranssactionTypeProps {
|
||||
max_transaction_per_day: number;
|
||||
status_approval: string;
|
||||
status: string;
|
||||
type: string;
|
||||
wallet_origin: WalletProps;
|
||||
wallet_destination: WalletProps;
|
||||
wallet_fee_destination: WalletProps;
|
||||
@ -58,7 +67,7 @@ interface TranssactionTypeProps {
|
||||
|
||||
const EditDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const { showEditDialog, handleEditDialog, selectedTransferType, accounts } =
|
||||
const { showEditDialog, handleEditDialog, selectedTransferType } =
|
||||
useManageTransferTypeContext();
|
||||
const { reload } = useDataGrid();
|
||||
const [wallets, setWallets] = useState<WalletProps[]>([]);
|
||||
@ -66,29 +75,13 @@ const EditDialog = () => {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [customers, setCustomers] = useState<CustomerProps[]>([]);
|
||||
const [transactiontypes, setTransactionTypes] = useState<TranssactionTypeProps[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const resetForm = () => {
|
||||
setFormField({
|
||||
name: '',
|
||||
description: '',
|
||||
wallet_origin: '',
|
||||
wallet_destination: '',
|
||||
wallet_fee_destination: '',
|
||||
customer_fee_destination: '',
|
||||
minimum_amount: 0,
|
||||
maximum_amount: 0,
|
||||
max_transaction_per_day: 0,
|
||||
status_approval: '',
|
||||
status: '',
|
||||
updated_by: '',
|
||||
updated_at: ''
|
||||
});
|
||||
};
|
||||
const [formField, setFormField] = useState({
|
||||
|
||||
const initialState = {
|
||||
name: '',
|
||||
description: '',
|
||||
wallet_origin: '',
|
||||
@ -99,40 +92,113 @@ const EditDialog = () => {
|
||||
maximum_amount: 0,
|
||||
max_transaction_per_day: 0,
|
||||
status_approval: '',
|
||||
type: '',
|
||||
status: '',
|
||||
updated_by: '',
|
||||
updated_at: ''
|
||||
});
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
|
||||
// Validation function to make certain fields required
|
||||
const validateForm = () => {
|
||||
const requiredFields = [
|
||||
'name',
|
||||
'description',
|
||||
'wallet_origin',
|
||||
'wallet_destination',
|
||||
'wallet_fee_destination',
|
||||
'customer_fee_destination',
|
||||
'status',
|
||||
'status_approval',
|
||||
'type'
|
||||
];
|
||||
|
||||
const missingFields = requiredFields.filter(
|
||||
(field) =>
|
||||
formField[field as keyof typeof formField] === '' ||
|
||||
formField[field as keyof typeof formField] === null ||
|
||||
formField[field as keyof typeof formField] === undefined
|
||||
);
|
||||
|
||||
if (missingFields.length > 0) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: `Please fill out all required fields: ${missingFields.join(', ')}`
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
setAlert({ show: false, message: '' });
|
||||
return true;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const updated_time = new Date();
|
||||
const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
|
||||
if (showEditDialog) {
|
||||
setFormField({
|
||||
...formField,
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
updated_by: parsedUser?.username,
|
||||
updated_at: formattedTime
|
||||
});
|
||||
}));
|
||||
}
|
||||
}, [showEditDialog]);
|
||||
/* actions */
|
||||
const doUpdateTransferType = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (!validateForm()) {
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
doUpdateTransferType()
|
||||
.then((success) => {
|
||||
if (success) {
|
||||
handleEditDialog(false, null);
|
||||
toast.success('Success Update Transfer Type');
|
||||
reload();
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
const doUpdateTransferType = useCallback(async () => {
|
||||
try {
|
||||
const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, {
|
||||
...formField
|
||||
});
|
||||
|
||||
if (response?.status) {
|
||||
handleEditDialog(false, null);
|
||||
toast.success('Success Update Transfer Type');
|
||||
reload();
|
||||
setAlert({ show: false, message: '' });
|
||||
return true;
|
||||
} else {
|
||||
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
|
||||
setAlert({ show: true, message: response?.message || 'Failed to update transfer type' });
|
||||
return false;
|
||||
}
|
||||
},
|
||||
[formField, selectedTransferType]
|
||||
);
|
||||
} catch (error) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: 'An error occurred while updating transfer type'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}, [formField, selectedTransferType, PutData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showEditDialog) return;
|
||||
const getCustomerList = async (sorting: any) => {
|
||||
try {
|
||||
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
@ -143,7 +209,6 @@ const EditDialog = () => {
|
||||
order_field: sorting[0].id,
|
||||
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
|
||||
});
|
||||
// console.log('CUSTOMER: ', response?.data.list);
|
||||
setCustomers(response?.data.list);
|
||||
} catch (error) {
|
||||
console.error('Error fetching customer', error);
|
||||
@ -151,7 +216,8 @@ const EditDialog = () => {
|
||||
};
|
||||
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
}, []);
|
||||
}, [showEditDialog, GetData]);
|
||||
|
||||
const fetchWallets = useCallback(async () => {
|
||||
const params = {
|
||||
limit: 100,
|
||||
@ -169,39 +235,48 @@ const EditDialog = () => {
|
||||
} else {
|
||||
setWallets([]);
|
||||
}
|
||||
}, []);
|
||||
}, [GetData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showEditDialog) return;
|
||||
fetchWallets();
|
||||
}, [fetchWallets]);
|
||||
}, [showEditDialog, fetchWallets]);
|
||||
|
||||
const fetchTransactionType = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
|
||||
// console.log('Transaction Type: ', response?.data);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
name: response.data.name,
|
||||
description: response.data.description,
|
||||
wallet_origin: response.data.wallet_origin.id,
|
||||
wallet_destination: response.data.wallet_destination.id,
|
||||
wallet_fee_destination: response.data.wallet_fee_destination.id,
|
||||
customer_fee_destination: response.data.customer_fee_destination.id,
|
||||
minimum_amount: response.data.minimum_amount,
|
||||
maximum_amount: response.data.maximum_amount,
|
||||
max_transaction_per_day: response.data.max_transaction_per_day,
|
||||
status_approval: response.data.status_approval,
|
||||
status: response.data.status
|
||||
}));
|
||||
try {
|
||||
const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
name: response.data.name,
|
||||
description: response.data.description,
|
||||
wallet_origin: response.data.wallet_origin.id,
|
||||
wallet_destination: response.data.wallet_destination.id,
|
||||
wallet_fee_destination: response.data.wallet_fee_destination.id,
|
||||
customer_fee_destination: response.data.customer_fee_destination.id,
|
||||
minimum_amount: response.data.minimum_amount,
|
||||
maximum_amount: response.data.maximum_amount,
|
||||
max_transaction_per_day: response.data.max_transaction_per_day,
|
||||
status_approval: response.data.status_approval,
|
||||
type: response.data.type || '',
|
||||
status: response.data.status
|
||||
}));
|
||||
}
|
||||
// console.log(response);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction type', error);
|
||||
setAlert({
|
||||
show: true,
|
||||
message: 'Failed to load transaction type data'
|
||||
});
|
||||
}
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
}, []);
|
||||
}, [GetData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTransferType) {
|
||||
fetchTransactionType(selectedTransferType);
|
||||
}
|
||||
}, [selectedTransferType]);
|
||||
}, [selectedTransferType, fetchTransactionType]);
|
||||
|
||||
return (
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
|
||||
@ -230,11 +305,11 @@ const EditDialog = () => {
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<div className="flex flex-col px-0">
|
||||
{alert.show && (
|
||||
<Alert variant="danger">
|
||||
<Alert variant="danger" className="mb-3">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
<form action="" onSubmit={doUpdateTransferType}>
|
||||
<form action="" onSubmit={handleSubmit}>
|
||||
<div className="card-body grid gap-5 p-0">
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
@ -242,15 +317,17 @@ const EditDialog = () => {
|
||||
Transfer Type Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.name}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, name: target.value }))
|
||||
}
|
||||
/>
|
||||
<div className="grow">
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.name}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, name: target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -260,15 +337,17 @@ const EditDialog = () => {
|
||||
Description
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.description}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, description: target.value }))
|
||||
}
|
||||
/>
|
||||
<div className="grow">
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.description}
|
||||
onChange={({ target }) =>
|
||||
setFormField((prev) => ({ ...prev, description: target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -277,20 +356,22 @@ const EditDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Minimum Amount
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.minimum_amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
minimum_amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Minimum Amount"
|
||||
/>
|
||||
<div className="grow">
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.minimum_amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
minimum_amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Minimum Amount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -299,20 +380,22 @@ const EditDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Maximum Amount
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.maximum_amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
maximum_amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Maximum Amount"
|
||||
/>
|
||||
<div className="grow">
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.maximum_amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
maximum_amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Maximum Amount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
@ -320,24 +403,26 @@ const EditDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Max Transaction per day
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.max_transaction_per_day}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
max_transaction_per_day: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Max Transaction Per Day"
|
||||
/>
|
||||
<div className="grow">
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.max_transaction_per_day}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
max_transaction_per_day: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Max Transaction Per Day"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
From Account
|
||||
<span className="text-red-500">*</span>
|
||||
@ -353,8 +438,8 @@ const EditDialog = () => {
|
||||
<SelectValue placeholder="Select Wallet" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{wallets.map((wallet, idx) => (
|
||||
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
|
||||
{wallets.map((wallet) => (
|
||||
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
|
||||
{wallet.Wallet_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -365,7 +450,7 @@ const EditDialog = () => {
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
To Account
|
||||
<span className="text-red-500">*</span>
|
||||
@ -381,7 +466,7 @@ const EditDialog = () => {
|
||||
<SelectValue placeholder="Select Wallet" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{wallets.map((wallet, idx) => (
|
||||
{wallets.map((wallet) => (
|
||||
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
|
||||
{wallet.Wallet_name}
|
||||
</SelectItem>
|
||||
@ -392,7 +477,7 @@ const EditDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Wallet Destination Fee
|
||||
<span className="text-red-500">*</span>
|
||||
@ -408,7 +493,7 @@ const EditDialog = () => {
|
||||
<SelectValue placeholder="Select Wallet" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{wallets.map((wallet, idx) => (
|
||||
{wallets.map((wallet) => (
|
||||
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
|
||||
{wallet.Wallet_name}
|
||||
</SelectItem>
|
||||
@ -419,27 +504,84 @@ const EditDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Customer Fee Destination
|
||||
<span className="text-red-500">*</span>
|
||||
Customer Fee Destination<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow">
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{customers.find(
|
||||
(customer) => customer.id === formField.customer_fee_destination
|
||||
)?.username || 'Select Customer'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Customer..." />
|
||||
<CommandList
|
||||
className="max-h-[300px] overflow-y-auto"
|
||||
style={{ touchAction: 'pan-y' }}
|
||||
onWheel={(e) => {
|
||||
e.currentTarget.scrollTop += e.deltaY;
|
||||
}}
|
||||
>
|
||||
<CommandEmpty>No Customer found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{customers.map((customer) => (
|
||||
<CommandItem
|
||||
key={customer.id}
|
||||
value={customer.username}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
customer_fee_destination: customer.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{customer.username} - {customer.msisdn}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Type
|
||||
<span className="text-red-500"> *</span>
|
||||
</label>
|
||||
<div className="grow">
|
||||
<Select
|
||||
value={formField.customer_fee_destination}
|
||||
onValueChange={(customer_fee_destination) =>
|
||||
setFormField((prev) => ({ ...prev, customer_fee_destination }))
|
||||
value={formField.type}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, type: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Customer" />
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{customers.map((customer, idx) => (
|
||||
<SelectItem value={customer.id} key={customer.id}>
|
||||
{customer.username} - {customer.msisdn}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectItem value="D">Disbursement </SelectItem>
|
||||
<SelectItem value="O">Other </SelectItem>
|
||||
<SelectItem value="CA">Change Customer to Agent </SelectItem>
|
||||
<SelectItem value="AC">Change Agent to Customer </SelectItem>
|
||||
<SelectItem value="CE">Return Customer Emoney </SelectItem>
|
||||
<SelectItem value="AD">Return Agent Deposit </SelectItem>
|
||||
<SelectItem value="AM">Return Agent Merchant </SelectItem>
|
||||
<SelectItem value="AE">Return Agent Emoney </SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@ -447,12 +589,11 @@ const EditDialog = () => {
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Status Approval
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="grow">
|
||||
<Select
|
||||
value={formField.status_approval}
|
||||
@ -473,12 +614,11 @@ const EditDialog = () => {
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Status
|
||||
<span className="text-red-500"> *</span>
|
||||
</label>
|
||||
|
||||
<div className="grow">
|
||||
<Select
|
||||
value={formField.status}
|
||||
@ -514,10 +654,11 @@ const EditDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/* Bagian Transaction Fee */}
|
||||
|
||||
{/* Transaction Fee Section */}
|
||||
<ManageTransferFeeContextProvider>
|
||||
<Container>
|
||||
<div className="grid gap-5 lg:gap-7.5">
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5">
|
||||
<DataGridInner />
|
||||
</div>
|
||||
<AddFeeDialog />
|
||||
@ -530,4 +671,4 @@ const EditDialog = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export { EditDialog };
|
||||
export { EditDialog };
|
||||
@ -20,6 +20,7 @@ interface TransferType {
|
||||
walletOriginId: string;
|
||||
walletDestinationId: string;
|
||||
status: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface ContextProps {
|
||||
@ -155,6 +156,16 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
enableHiding: false,
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.type,
|
||||
id: 'type',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader title="TransactionType Status" column={column} />
|
||||
),
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
|
||||
id: 'status',
|
||||
|
||||
Reference in New Issue
Block a user