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

add new field (Transactiontype status) on transactiontype + remove console on addDialog conversion

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-05 17:41:00 +07:00
parent 59a51284c8
commit 5437979dd3
4 changed files with 538 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/master/conversion/blocks/AddDialog.tsx
View File

@ -121,7 +121,7 @@ const AddDialog = () => {
} }
doCreateConversion(e); doCreateConversion(e);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };

362
src/pages/transfer/transfertype/blocks/AddDialog.tsx
View File

@ -1,5 +1,5 @@
import { apiConfig } from '@/config/api.config'; 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 { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
import { import {
Alert, Alert,
@ -30,6 +30,15 @@ import {
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { getAuth } from '@/auth'; 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 { interface WalletProps {
Wallet_id: string; Wallet_id: string;
@ -48,6 +57,7 @@ const API_URL3_CUSTOMER = apiConfig.service_customer;
const AddDialog = () => { const AddDialog = () => {
const parentRef = useRef<any | null>(null); const parentRef = useRef<any | null>(null);
const [open, setOpen] = useState(false);
const { GetData } = useCallApi(); const { GetData } = useCallApi();
const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext(); const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
const [wallets, setWallets] = useState<WalletProps[]>([]); const [wallets, setWallets] = useState<WalletProps[]>([]);
@ -70,37 +80,102 @@ const AddDialog = () => {
maximum_amount: 0, maximum_amount: 0,
max_transaction_per_day: 0, max_transaction_per_day: 0,
status: '', status: '',
type: '',
status_approval: '', status_approval: '',
created_by: '', created_by: '',
created_at: '' created_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
}; };
const [isSubmitting, setIsSubmitting] = useState(false);
const parsedUser = getAuth()?.user; 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>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
// setIsSubmitting(true); setIsSubmitting(true);
const payload = {
name: formField.name, if (!validateForm()) {
description: formField.description, setIsSubmitting(false);
wallet_origin: formField.wallet_origin, return;
wallet_destination: formField.wallet_destination, }
minimum_amount: formField.minimum_amount,
maximum_amount: formField.maximum_amount, doCreateTransferType(formField)
max_transaction_per_day: formField.max_transaction_per_day, .then((success) => {
wallet_fee_destination: formField.wallet_fee_destination, if (success) {
customer_fee_destination: formField.customer_fee_destination, handleAddDialog(false);
status_approval: formField.status_approval, toast.success('Success Create Transfer Type');
status: formField.status 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(() => { useEffect(() => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -128,7 +203,6 @@ const AddDialog = () => {
order_direction: sorting[0].desc ? 'DESC' : 'ASC' order_direction: sorting[0].desc ? 'DESC' : 'ASC'
}); });
setCustomers(response?.data.list); setCustomers(response?.data.list);
// console.log('CUSTOMER: ', response?.data.list);
} catch (error) { } catch (error) {
console.error('Error fetching customer', error); console.error('Error fetching customer', error);
} }
@ -161,34 +235,6 @@ const AddDialog = () => {
fetchWallets(); fetchWallets();
}, [showAddDialog]); }, [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 ( return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@ -198,7 +244,7 @@ const AddDialog = () => {
<div className="flex items-center justify-between flex-wrap grow"> <div className="flex items-center justify-between flex-wrap grow">
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center">
<h1 className="text-xl font-semibold leading-none text-gray-900"> <h1 className="text-xl font-semibold leading-none text-gray-900">
Addd Transaction Type Add Transaction Type
</h1> </h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div> <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div> </div>
@ -220,7 +266,7 @@ const AddDialog = () => {
<h3>{alert.message}</h3> <h3>{alert.message}</h3>
</Alert> </Alert>
)} )}
<form action="" onSubmit={doCreateTransferType}> <form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -228,15 +274,17 @@ const AddDialog = () => {
Transfer Type Name Transfer Type Name
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow">
className="input" <Input
type="text" className="input"
autoComplete="off" type="text"
value={formField.name} autoComplete="off"
onChange={({ target }) => value={formField.name}
setFormField((prev) => ({ ...prev, name: target.value })) onChange={({ target }) =>
} setFormField((prev) => ({ ...prev, name: target.value }))
/> }
/>
</div>
</div> </div>
</div> </div>
@ -246,15 +294,17 @@ const AddDialog = () => {
Description Description
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow">
className="input" <Input
type="text" className="input"
autoComplete="off" type="text"
value={formField.description} autoComplete="off"
onChange={({ target }) => value={formField.description}
setFormField((prev) => ({ ...prev, description: target.value })) onChange={({ target }) =>
} setFormField((prev) => ({ ...prev, description: target.value }))
/> }
/>
</div>
</div> </div>
</div> </div>
@ -263,20 +313,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Minimum Amount Minimum Amount
</label> </label>
<NumericFormat <div className="grow">
className="input" <NumericFormat
value={formField.minimum_amount} className="input"
thousandSeparator="." value={formField.minimum_amount}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
minimum_amount: values.floatValue || 0 ...prev,
})); minimum_amount: values.floatValue || 0
}} }));
placeholder="Enter Minimum Amount" }}
/> placeholder="Enter Minimum Amount"
/>
</div>
</div> </div>
</div> </div>
@ -285,20 +337,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Maximum Amount Maximum Amount
</label> </label>
<NumericFormat <div className="grow">
className="input" <NumericFormat
value={formField.maximum_amount} className="input"
thousandSeparator="." value={formField.maximum_amount}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
maximum_amount: values.floatValue || 0 ...prev,
})); maximum_amount: values.floatValue || 0
}} }));
placeholder="Enter Maximum Amount" }}
/> placeholder="Enter Maximum Amount"
/>
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
@ -306,24 +360,26 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Max Transaction per day Max Transaction per day
</label> </label>
<NumericFormat <div className="grow">
className="input" <NumericFormat
value={formField.max_transaction_per_day} className="input"
thousandSeparator="." value={formField.max_transaction_per_day}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
max_transaction_per_day: values.floatValue || 0 ...prev,
})); max_transaction_per_day: values.floatValue || 0
}} }));
placeholder="Enter Max Transaction Per Day" }}
/> placeholder="Enter Max Transaction Per Day"
/>
</div>
</div> </div>
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
From Account From Account
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -351,7 +407,7 @@ const AddDialog = () => {
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
To Account To Account
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -378,7 +434,7 @@ const AddDialog = () => {
</div> </div>
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Wallet Destination Fee Wallet Destination Fee
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -405,35 +461,91 @@ const AddDialog = () => {
</div> </div>
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Customer Fee Destination Customer Fee Destination<span className="text-red-500">*</span>
<span className="text-red-500">*</span>
</label> </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"> <div className="grow">
<Select <Select
value={formField.customer_fee_destination} value={formField.type}
onValueChange={(customer_fee_destination) => onValueChange={(value) =>
setFormField((prev) => ({ ...prev, customer_fee_destination })) setFormField((prev) => ({ ...prev, type: value }))
} }
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select Customer" /> <SelectValue placeholder="Select" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{customers.map((customer, idx) => ( <SelectItem value="D">Disbursement </SelectItem>
<SelectItem value={customer.id} key={customer.id}> <SelectItem value="O">Other </SelectItem>
{customer.username} - {customer.msisdn} <SelectItem value="CA">Change Customer to Agent </SelectItem>
</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> </SelectContent>
</Select> </Select>
</div> </div>
</div> </div>
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Status Approval Status Approval
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -459,7 +571,7 @@ const AddDialog = () => {
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Status Status
<span className="text-red-500"> *</span> <span className="text-red-500"> *</span>

437
src/pages/transfer/transfertype/blocks/EditDialog.tsx
View File

@ -22,10 +22,18 @@ import { apiConfig } from '@/config/api.config';
import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components'; import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { getAuth } from '@/auth'; import { getAuth } from '@/auth';
import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext'; import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
import AddFeeDialog from '../../transferfee/blocks/AddDialog'; 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 = apiConfig.service_transaction;
const API_URL_MASTERDATA = apiConfig.service_master_data; const API_URL_MASTERDATA = apiConfig.service_master_data;
@ -50,6 +58,7 @@ interface TranssactionTypeProps {
max_transaction_per_day: number; max_transaction_per_day: number;
status_approval: string; status_approval: string;
status: string; status: string;
type: string;
wallet_origin: WalletProps; wallet_origin: WalletProps;
wallet_destination: WalletProps; wallet_destination: WalletProps;
wallet_fee_destination: WalletProps; wallet_fee_destination: WalletProps;
@ -58,7 +67,7 @@ interface TranssactionTypeProps {
const EditDialog = () => { const EditDialog = () => {
const parentRef = useRef<any | null>(null); const parentRef = useRef<any | null>(null);
const { showEditDialog, handleEditDialog, selectedTransferType, accounts } = const { showEditDialog, handleEditDialog, selectedTransferType } =
useManageTransferTypeContext(); useManageTransferTypeContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const [wallets, setWallets] = useState<WalletProps[]>([]); const [wallets, setWallets] = useState<WalletProps[]>([]);
@ -66,29 +75,13 @@ const EditDialog = () => {
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [transactiontypes, setTransactionTypes] = useState<TranssactionTypeProps[]>([]); const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
}); });
const resetForm = () => {
setFormField({ const initialState = {
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({
name: '', name: '',
description: '', description: '',
wallet_origin: '', wallet_origin: '',
@ -99,40 +92,113 @@ const EditDialog = () => {
maximum_amount: 0, maximum_amount: 0,
max_transaction_per_day: 0, max_transaction_per_day: 0,
status_approval: '', status_approval: '',
type: '',
status: '', status: '',
updated_by: '', updated_by: '',
updated_at: '' 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(() => { useEffect(() => {
const updated_time = new Date(); const updated_time = new Date();
const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
if (showEditDialog) { if (showEditDialog) {
setFormField({ setFormField((prev) => ({
...formField, ...prev,
updated_by: parsedUser?.username, updated_by: parsedUser?.username,
updated_at: formattedTime updated_at: formattedTime
}); }));
} }
}, [showEditDialog]); }, [showEditDialog]);
/* actions */
const doUpdateTransferType = useCallback( const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault();
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}`, { const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, {
...formField ...formField
}); });
if (response?.status) { if (response?.status) {
handleEditDialog(false, null); setAlert({ show: false, message: '' });
toast.success('Success Update Transfer Type'); return true;
reload();
} else { } else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message })); setAlert({ show: true, message: response?.message || 'Failed to update transfer type' });
return false;
} }
}, } catch (error) {
[formField, selectedTransferType] setAlert({
); show: true,
message:
error instanceof Error
? error.message
: 'An error occurred while updating transfer type'
});
return false;
}
}, [formField, selectedTransferType, PutData]);
useEffect(() => { useEffect(() => {
if (!showEditDialog) return;
const getCustomerList = async (sorting: any) => { const getCustomerList = async (sorting: any) => {
try { try {
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
@ -143,7 +209,6 @@ const EditDialog = () => {
order_field: sorting[0].id, order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'DESC' : 'ASC' order_direction: sorting[0].desc ? 'DESC' : 'ASC'
}); });
// console.log('CUSTOMER: ', response?.data.list);
setCustomers(response?.data.list); setCustomers(response?.data.list);
} catch (error) { } catch (error) {
console.error('Error fetching customer', error); console.error('Error fetching customer', error);
@ -151,7 +216,8 @@ const EditDialog = () => {
}; };
getCustomerList([{ id: 'id', desc: false }]); getCustomerList([{ id: 'id', desc: false }]);
}, []); }, [showEditDialog, GetData]);
const fetchWallets = useCallback(async () => { const fetchWallets = useCallback(async () => {
const params = { const params = {
limit: 100, limit: 100,
@ -169,39 +235,48 @@ const EditDialog = () => {
} else { } else {
setWallets([]); setWallets([]);
} }
}, []); }, [GetData]);
useEffect(() => { useEffect(() => {
if (!showEditDialog) return;
fetchWallets(); fetchWallets();
}, [fetchWallets]); }, [showEditDialog, fetchWallets]);
const fetchTransactionType = useCallback(async (id: string) => { const fetchTransactionType = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id }); try {
// console.log('Transaction Type: ', response?.data); const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
name: response.data.name, name: response.data.name,
description: response.data.description, description: response.data.description,
wallet_origin: response.data.wallet_origin.id, wallet_origin: response.data.wallet_origin.id,
wallet_destination: response.data.wallet_destination.id, wallet_destination: response.data.wallet_destination.id,
wallet_fee_destination: response.data.wallet_fee_destination.id, wallet_fee_destination: response.data.wallet_fee_destination.id,
customer_fee_destination: response.data.customer_fee_destination.id, customer_fee_destination: response.data.customer_fee_destination.id,
minimum_amount: response.data.minimum_amount, minimum_amount: response.data.minimum_amount,
maximum_amount: response.data.maximum_amount, maximum_amount: response.data.maximum_amount,
max_transaction_per_day: response.data.max_transaction_per_day, max_transaction_per_day: response.data.max_transaction_per_day,
status_approval: response.data.status_approval, status_approval: response.data.status_approval,
status: response.data.status 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(() => { useEffect(() => {
if (selectedTransferType) { if (selectedTransferType) {
fetchTransactionType(selectedTransferType); fetchTransactionType(selectedTransferType);
} }
}, [selectedTransferType]); }, [selectedTransferType, fetchTransactionType]);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@ -230,11 +305,11 @@ const EditDialog = () => {
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}> <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0"> <div className="flex flex-col px-0">
{alert.show && ( {alert.show && (
<Alert variant="danger"> <Alert variant="danger" className="mb-3">
<h3>{alert.message}</h3> <h3>{alert.message}</h3>
</Alert> </Alert>
)} )}
<form action="" onSubmit={doUpdateTransferType}> <form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -242,15 +317,17 @@ const EditDialog = () => {
Transfer Type Name Transfer Type Name
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow">
className="input" <Input
type="text" className="input"
autoComplete="off" type="text"
value={formField.name} autoComplete="off"
onChange={({ target }) => value={formField.name}
setFormField((prev) => ({ ...prev, name: target.value })) onChange={({ target }) =>
} setFormField((prev) => ({ ...prev, name: target.value }))
/> }
/>
</div>
</div> </div>
</div> </div>
@ -260,15 +337,17 @@ const EditDialog = () => {
Description Description
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow">
className="input" <Input
type="text" className="input"
autoComplete="off" type="text"
value={formField.description} autoComplete="off"
onChange={({ target }) => value={formField.description}
setFormField((prev) => ({ ...prev, description: target.value })) onChange={({ target }) =>
} setFormField((prev) => ({ ...prev, description: target.value }))
/> }
/>
</div>
</div> </div>
</div> </div>
@ -277,20 +356,22 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Minimum Amount Minimum Amount
</label> </label>
<NumericFormat <div className="grow">
className="input" <NumericFormat
value={formField.minimum_amount} className="input"
thousandSeparator="." value={formField.minimum_amount}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
minimum_amount: values.floatValue || 0 ...prev,
})); minimum_amount: values.floatValue || 0
}} }));
placeholder="Enter Minimum Amount" }}
/> placeholder="Enter Minimum Amount"
/>
</div>
</div> </div>
</div> </div>
@ -299,20 +380,22 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Maximum Amount Maximum Amount
</label> </label>
<NumericFormat <div className="grow">
className="input" <NumericFormat
value={formField.maximum_amount} className="input"
thousandSeparator="." value={formField.maximum_amount}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
maximum_amount: values.floatValue || 0 ...prev,
})); maximum_amount: values.floatValue || 0
}} }));
placeholder="Enter Maximum Amount" }}
/> placeholder="Enter Maximum Amount"
/>
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
@ -320,24 +403,26 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Max Transaction per day Max Transaction per day
</label> </label>
<NumericFormat <div className="grow">
className="input" <NumericFormat
value={formField.max_transaction_per_day} className="input"
thousandSeparator="." value={formField.max_transaction_per_day}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
max_transaction_per_day: values.floatValue || 0 ...prev,
})); max_transaction_per_day: values.floatValue || 0
}} }));
placeholder="Enter Max Transaction Per Day" }}
/> placeholder="Enter Max Transaction Per Day"
/>
</div>
</div> </div>
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
From Account From Account
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -353,8 +438,8 @@ const EditDialog = () => {
<SelectValue placeholder="Select Wallet" /> <SelectValue placeholder="Select Wallet" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{wallets.map((wallet, idx) => ( {wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}> <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name} {wallet.Wallet_name}
</SelectItem> </SelectItem>
))} ))}
@ -365,7 +450,7 @@ const EditDialog = () => {
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
To Account To Account
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -381,7 +466,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select Wallet" /> <SelectValue placeholder="Select Wallet" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{wallets.map((wallet, idx) => ( {wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}> <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name} {wallet.Wallet_name}
</SelectItem> </SelectItem>
@ -392,7 +477,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Wallet Destination Fee Wallet Destination Fee
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -408,7 +493,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select Wallet" /> <SelectValue placeholder="Select Wallet" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{wallets.map((wallet, idx) => ( {wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}> <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name} {wallet.Wallet_name}
</SelectItem> </SelectItem>
@ -419,27 +504,84 @@ const EditDialog = () => {
</div> </div>
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Customer Fee Destination Customer Fee Destination<span className="text-red-500">*</span>
<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> </label>
<div className="grow"> <div className="grow">
<Select <Select
value={formField.customer_fee_destination} value={formField.type}
onValueChange={(customer_fee_destination) => onValueChange={(value) =>
setFormField((prev) => ({ ...prev, customer_fee_destination })) setFormField((prev) => ({ ...prev, type: value }))
} }
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select Customer" /> <SelectValue placeholder="Select" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{customers.map((customer, idx) => ( <SelectItem value="D">Disbursement </SelectItem>
<SelectItem value={customer.id} key={customer.id}> <SelectItem value="O">Other </SelectItem>
{customer.username} - {customer.msisdn} <SelectItem value="CA">Change Customer to Agent </SelectItem>
</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> </SelectContent>
</Select> </Select>
</div> </div>
@ -447,12 +589,11 @@ const EditDialog = () => {
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Status Approval Status Approval
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
</label> </label>
<div className="grow"> <div className="grow">
<Select <Select
value={formField.status_approval} value={formField.status_approval}
@ -473,12 +614,11 @@ const EditDialog = () => {
</div> </div>
<div className="w-full"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Status Status
<span className="text-red-500"> *</span> <span className="text-red-500"> *</span>
</label> </label>
<div className="grow"> <div className="grow">
<Select <Select
value={formField.status} value={formField.status}
@ -514,10 +654,11 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</form> </form>
{/* Bagian Transaction Fee */}
{/* Transaction Fee Section */}
<ManageTransferFeeContextProvider> <ManageTransferFeeContextProvider>
<Container> <Container>
<div className="grid gap-5 lg:gap-7.5"> <div className="grid gap-5 lg:gap-7.5 mt-5">
<DataGridInner /> <DataGridInner />
</div> </div>
<AddFeeDialog /> <AddFeeDialog />
@ -530,4 +671,4 @@ const EditDialog = () => {
); );
}; };
export { EditDialog }; export { EditDialog };

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

@ -20,6 +20,7 @@ interface TransferType {
walletOriginId: string; walletOriginId: string;
walletDestinationId: string; walletDestinationId: string;
status: string; status: string;
type: string;
} }
interface ContextProps { interface ContextProps {
@ -155,6 +156,16 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } 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'), accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
id: 'status', id: 'status',