tambahan
This commit is contained in:
bagusajisaputroo
@ -1,6 +1,8 @@
|
|||||||
interface apiConfigProps {
|
interface apiConfigProps {
|
||||||
service_dashboard: string;
|
service_dashboard: string;
|
||||||
service_master_data: string;
|
service_master_data: string;
|
||||||
|
service_transaction: string;
|
||||||
|
service_customer: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const API_URL = import.meta.env.VITE_APP_API_URL;
|
const API_URL = import.meta.env.VITE_APP_API_URL;
|
||||||
@ -8,7 +10,9 @@ const apiConfig: apiConfigProps = {
|
|||||||
// service_dashboard: `${API_URL}${import.meta.env.VITE_ENV != 'development' ? '/d' : ''}`,
|
// service_dashboard: `${API_URL}${import.meta.env.VITE_ENV != 'development' ? '/d' : ''}`,
|
||||||
service_dashboard: `${API_URL}/d`,
|
service_dashboard: `${API_URL}/d`,
|
||||||
// service_master_data: `${API_URL}/m`
|
// service_master_data: `${API_URL}/m`
|
||||||
service_master_data: `${API_URL}/t`
|
service_master_data: `${API_URL}/t`,
|
||||||
|
service_transaction: `${API_URL}/tt`,
|
||||||
|
service_customer: `${API_URL}/c`,
|
||||||
};
|
};
|
||||||
|
|
||||||
export { apiConfig };
|
export { apiConfig };
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
import { Container, DataGridInner } from '@/components';
|
|
||||||
import {
|
|
||||||
ManageTransferTypeContext,
|
|
||||||
ManageTransferTypeContextProvider
|
|
||||||
} from './hooks/ManageTransferTypeContext';
|
|
||||||
import AddDialog from './blocks/AddDialog';
|
|
||||||
|
|
||||||
const TransferType = () => {
|
|
||||||
return (
|
|
||||||
<ManageTransferTypeContextProvider>
|
|
||||||
<Container>
|
|
||||||
<div className="grid gap-5 lg:gap-7.5">
|
|
||||||
<DataGridInner />
|
|
||||||
</div>
|
|
||||||
<AddDialog />
|
|
||||||
</Container>
|
|
||||||
</ManageTransferTypeContextProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TransferType;
|
|
||||||
@ -1,398 +0,0 @@
|
|||||||
import { apiConfig } from '@/config/api.config';
|
|
||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
||||||
import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
|
|
||||||
import { Alert, KeenIcon, useDataGrid } from '@/components';
|
|
||||||
import { useCallApi } from '@/hooks';
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogBody,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle
|
|
||||||
} from '@/components/ui/dialog';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue
|
|
||||||
} from '@/components/ui/select';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import TransactionFeeDialog from './TransactionFeeDialog';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
|
||||||
import { getAuth } from '@/auth';
|
|
||||||
|
|
||||||
interface CreateTransferTypeParams {
|
|
||||||
transfer_type_name: string;
|
|
||||||
description: string;
|
|
||||||
from_account: string;
|
|
||||||
to_account: string;
|
|
||||||
minimal_amount: number;
|
|
||||||
maximum_amount: number;
|
|
||||||
otp_threshold: number;
|
|
||||||
maximum_transaction_perDay: number;
|
|
||||||
status: string;
|
|
||||||
created_by: string;
|
|
||||||
created_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const API_URL = apiConfig.service_dashboard;
|
|
||||||
|
|
||||||
const AddDialog = () => {
|
|
||||||
const parentRef = useRef<any | null>(null);
|
|
||||||
const { showAddDialog, handleAddDialog, accounts } = useManageTransferTypeContext();
|
|
||||||
const { reload } = useDataGrid();
|
|
||||||
const { PostData, PutData } = useCallApi();
|
|
||||||
const [alert, setAlert] = useState({
|
|
||||||
show: false,
|
|
||||||
message: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
transfer_type_name: '',
|
|
||||||
description: '',
|
|
||||||
from_account: '',
|
|
||||||
to_account: '',
|
|
||||||
minimal_amount: 0,
|
|
||||||
maximum_amount: 0,
|
|
||||||
otp_threshold: 0,
|
|
||||||
maximum_transaction_perDay: 0,
|
|
||||||
status: '',
|
|
||||||
created_by: '',
|
|
||||||
created_at: ''
|
|
||||||
};
|
|
||||||
|
|
||||||
const [formField, setFormField] = useState(initialState);
|
|
||||||
|
|
||||||
const resetForm = () => {
|
|
||||||
setFormField(initialState);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
|
|
||||||
const parsedUser = getAuth()?.user;
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
// setIsSubmitting(true);
|
|
||||||
const payload = {
|
|
||||||
transfer_type_name: formField.transfer_type_name,
|
|
||||||
description: formField.description,
|
|
||||||
from_account: formField.from_account,
|
|
||||||
to_account: formField.to_account,
|
|
||||||
minimal_amount: formField.minimal_amount,
|
|
||||||
maximum_amount: formField.maximum_amount,
|
|
||||||
otp_threshold: formField.otp_threshold,
|
|
||||||
maximum_transaction_perDay: formField.maximum_transaction_perDay
|
|
||||||
};
|
|
||||||
console.log(payload);
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
const created_time = new Date();
|
|
||||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
|
||||||
|
|
||||||
if (showAddDialog) {
|
|
||||||
setFormField({
|
|
||||||
...formField,
|
|
||||||
created_by: parsedUser?.username,
|
|
||||||
created_at: formattedTime
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [showAddDialog]);
|
|
||||||
const doCreateTransferType = useCallback(
|
|
||||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log(formField);
|
|
||||||
|
|
||||||
for (const key in formField) {
|
|
||||||
if (
|
|
||||||
formField[key as keyof typeof formField] === '' ||
|
|
||||||
formField[key as keyof typeof formField] === 0
|
|
||||||
) {
|
|
||||||
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();
|
|
||||||
|
|
||||||
const createActivity = {
|
|
||||||
module: 'Manage Transfer Type',
|
|
||||||
description: `Create New Transfer Type => ${formField.transfer_type_name}`,
|
|
||||||
action: 'C'
|
|
||||||
};
|
|
||||||
|
|
||||||
doSaveLogActivity(createActivity);
|
|
||||||
} else {
|
|
||||||
setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleAddDialog(false);
|
|
||||||
},
|
|
||||||
[formField]
|
|
||||||
);
|
|
||||||
const handleTransactionFeeSubmit = (data: any) => {
|
|
||||||
// console.log('Transaction Fee Data Submitted:', data);
|
|
||||||
setShowTransactionFeeDialog(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
|
|
||||||
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
|
||||||
<DialogHeader className="p-5 border-0">
|
|
||||||
<DialogTitle></DialogTitle>
|
|
||||||
<DialogDescription></DialogDescription>
|
|
||||||
<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">Transfer Type</h1>
|
|
||||||
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="cursor-pointer hover:opacity-100 opacity-50"
|
|
||||||
onClick={() => {
|
|
||||||
handleAddDialog(false);
|
|
||||||
resetForm();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<KeenIcon icon="cross" className="text-1.5xl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DialogHeader>
|
|
||||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
|
||||||
<div className="flex flex-col px-0">
|
|
||||||
{alert.show && (
|
|
||||||
<Alert variant="danger" className="mb-3">
|
|
||||||
<h3>{alert.message}</h3>
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
<form action="" onSubmit={doCreateTransferType}>
|
|
||||||
<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">
|
|
||||||
<label className="form-label flex items-center gap-1 max-w-56">
|
|
||||||
Transfer Type Name
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
value={formField.transfer_type_name}
|
|
||||||
onChange={({ target }) =>
|
|
||||||
setFormField((prev) => ({ ...prev, transfer_type_name: target.value }))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</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">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
value={formField.description}
|
|
||||||
onChange={({ target }) =>
|
|
||||||
setFormField((prev) => ({ ...prev, description: target.value }))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="flex items-center flex-wrap gap-2.5">
|
|
||||||
<label className="form-label max-w-56">From Account</label>
|
|
||||||
|
|
||||||
<div className="grow">
|
|
||||||
<Select
|
|
||||||
value={formField.from_account}
|
|
||||||
onValueChange={(target) =>
|
|
||||||
setFormField((prev) => ({ ...prev, from_account: target }))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{accounts.map((account, idx) => (
|
|
||||||
<SelectItem value={account.name} key={account.id}>
|
|
||||||
{account.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="flex items-center flex-wrap gap-2.5">
|
|
||||||
<label className="form-label max-w-56">To Account</label>
|
|
||||||
|
|
||||||
<div className="grow">
|
|
||||||
<Select
|
|
||||||
value={formField.to_account}
|
|
||||||
onValueChange={(target) =>
|
|
||||||
setFormField((prev) => ({ ...prev, to_account: target }))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{accounts.map((account, idx) => (
|
|
||||||
<SelectItem value={account.name} key={account.id}>
|
|
||||||
{account.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</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">
|
|
||||||
Minimal Amount
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
className="input"
|
|
||||||
type="number"
|
|
||||||
autoComplete="off"
|
|
||||||
value={formField.minimal_amount}
|
|
||||||
onChange={({ target }) =>
|
|
||||||
setFormField((prev) => ({
|
|
||||||
...prev,
|
|
||||||
minimal_amount: Number(target.value)
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</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">
|
|
||||||
Maximum Amount
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
className="input"
|
|
||||||
type="number"
|
|
||||||
autoComplete="off"
|
|
||||||
value={formField.maximum_amount}
|
|
||||||
onChange={({ target }) =>
|
|
||||||
setFormField((prev) => ({
|
|
||||||
...prev,
|
|
||||||
maximum_amount: Number(target.value)
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</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">
|
|
||||||
OTP Threshold
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
className="input"
|
|
||||||
type="number"
|
|
||||||
autoComplete="off"
|
|
||||||
value={formField.otp_threshold}
|
|
||||||
onChange={({ target }) =>
|
|
||||||
setFormField((prev) => ({
|
|
||||||
...prev,
|
|
||||||
otp_threshold: Number(target.value)
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</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">
|
|
||||||
Maximum Transaction / day
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
className="input"
|
|
||||||
type="number"
|
|
||||||
autoComplete="off"
|
|
||||||
value={formField.maximum_transaction_perDay}
|
|
||||||
onChange={({ target }) =>
|
|
||||||
setFormField((prev) => ({
|
|
||||||
...prev,
|
|
||||||
maximum_transaction_perDay: Number(target.value)
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="flex items-center flex-wrap gap-2.5">
|
|
||||||
<label className="form-label max-w-56">Status</label>
|
|
||||||
|
|
||||||
<div className="grow">
|
|
||||||
<Select
|
|
||||||
value={formField.status}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
setFormField((prev) => ({ ...prev, status: value }))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="Y">Y</SelectItem>
|
|
||||||
<SelectItem value="N">N</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end pt-2.5 gap-5">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setShowTransactionFeeDialog(true)}
|
|
||||||
>
|
|
||||||
Transaction Fee Form
|
|
||||||
</Button>
|
|
||||||
<Button variant={'outline'} type="reset">
|
|
||||||
Reset
|
|
||||||
</Button>
|
|
||||||
<Button variant={'default'} type="submit" disabled={isSubmitting}>
|
|
||||||
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<TransactionFeeDialog
|
|
||||||
open={showTransactionFeeDialog}
|
|
||||||
onClose={() => setShowTransactionFeeDialog(false)}
|
|
||||||
onSubmit={handleTransactionFeeSubmit}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DialogBody>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AddDialog;
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
|
||||||
import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
|
|
||||||
const ListToolbar = () => {
|
|
||||||
const { table, reload } = useDataGrid();
|
|
||||||
const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
|
||||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
|
||||||
<div className="flex justify-between w-full items-center">
|
|
||||||
<div className="flex w-[50%] gap-3 items-center">
|
|
||||||
<label className="input input-sm w-1/3">
|
|
||||||
<KeenIcon icon="magnifier" />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search Access Type"
|
|
||||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
|
||||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<DefaultTooltip title={'Filter'} placement={'top'}>
|
|
||||||
<Button variant={'outline'} className="h-7.5 disabled:bg-gray-400">
|
|
||||||
<KeenIcon icon="filter" />
|
|
||||||
</Button>
|
|
||||||
</DefaultTooltip>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-3 items-center">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="h-7.5 text-[0.8rem]"
|
|
||||||
onClick={() => handleAddDialog(true)}
|
|
||||||
>
|
|
||||||
Add Data
|
|
||||||
</Button>
|
|
||||||
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
|
||||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
|
||||||
<KeenIcon icon="arrows-circle" />
|
|
||||||
</Button>
|
|
||||||
</DefaultTooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ListToolbar;
|
|
||||||
@ -1,281 +0,0 @@
|
|||||||
import { useState, useCallback, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogBody,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle
|
|
||||||
} from '@/components/ui/dialog';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { apiConfig } from '@/config/api.config';
|
|
||||||
import { useCallApi } from '@/hooks';
|
|
||||||
import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
|
|
||||||
import { get } from 'http';
|
|
||||||
import { getAuth } from '@/auth';
|
|
||||||
import { useDataGrid } from '@/components';
|
|
||||||
import { set } from 'date-fns';
|
|
||||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem
|
|
||||||
} from '@/components/ui/select';
|
|
||||||
|
|
||||||
interface TransactionFeeDialogProps {
|
|
||||||
open: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
onSubmit: (data: TransactionFeeForm) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TransactionFeeForm {
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
minimum_amount: number;
|
|
||||||
maximum_amount: number;
|
|
||||||
period_start: string;
|
|
||||||
period_end: string;
|
|
||||||
deduct_amount: number;
|
|
||||||
deduct_percentage: number;
|
|
||||||
priority: string;
|
|
||||||
status: string;
|
|
||||||
transactionTypeId: string;
|
|
||||||
created_by: string;
|
|
||||||
created_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const API_URL = apiConfig.service_dashboard;
|
|
||||||
|
|
||||||
const TransactionFeeDialog: React.FC<TransactionFeeDialogProps> = ({ open, onClose, onSubmit }) => {
|
|
||||||
const { showAddDialog, handleAddDialog } = useManageTransferTypeContext();
|
|
||||||
const parsedUser = getAuth()?.user;
|
|
||||||
const [formField, setFormField] = useState<TransactionFeeForm>({
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
minimum_amount: 0,
|
|
||||||
maximum_amount: 0,
|
|
||||||
period_start: '',
|
|
||||||
period_end: '',
|
|
||||||
deduct_amount: 0,
|
|
||||||
deduct_percentage: 0,
|
|
||||||
priority: '',
|
|
||||||
status: '',
|
|
||||||
transactionTypeId: '',
|
|
||||||
created_by: '',
|
|
||||||
created_at: ''
|
|
||||||
});
|
|
||||||
const { PostData, PutData } = useCallApi();
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormField((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[name]: value
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const { reload } = useDataGrid();
|
|
||||||
const resetForm = () => {
|
|
||||||
setFormField(formField);
|
|
||||||
};
|
|
||||||
const [alert, setAlert] = useState({
|
|
||||||
show: false,
|
|
||||||
message: ''
|
|
||||||
});
|
|
||||||
useEffect(() => {
|
|
||||||
const created_time = new Date();
|
|
||||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
|
||||||
|
|
||||||
if (showAddDialog) {
|
|
||||||
setFormField({
|
|
||||||
...formField,
|
|
||||||
created_by: parsedUser?.username,
|
|
||||||
created_at: formattedTime
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [showAddDialog]);
|
|
||||||
const doCreateTransactionFee = useCallback(
|
|
||||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log(formField);
|
|
||||||
const response = await PostData(`${API_URL}/transactionfees/create`, formField);
|
|
||||||
|
|
||||||
if (response?.status) {
|
|
||||||
setAlert({ show: false, message: '' });
|
|
||||||
handleAddDialog(false);
|
|
||||||
toast.success('Success Create Transfer Type');
|
|
||||||
reload();
|
|
||||||
resetForm();
|
|
||||||
|
|
||||||
const createActivity = {
|
|
||||||
module: 'Manage Transfer Fee',
|
|
||||||
description: `Create New Transfer Fee => ${formField.name}`,
|
|
||||||
action: 'C'
|
|
||||||
};
|
|
||||||
|
|
||||||
doSaveLogActivity(createActivity);
|
|
||||||
} else {
|
|
||||||
setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
|
|
||||||
}
|
|
||||||
|
|
||||||
onSubmit(formField);
|
|
||||||
},
|
|
||||||
[formField]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onClose}>
|
|
||||||
<DialogContent className="max-w-lg p-5">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Transaction Fee</DialogTitle>
|
|
||||||
<DialogDescription></DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<DialogBody>
|
|
||||||
<form onSubmit={doCreateTransactionFee}>
|
|
||||||
<div className="grid gap-4">
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Name</label>
|
|
||||||
<Input name="name" value={formField.name} onChange={handleChange} required />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Description</label>
|
|
||||||
<Input
|
|
||||||
name="description"
|
|
||||||
value={formField.description}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Minimum Amount</label>
|
|
||||||
<Input
|
|
||||||
name="minimum_amount"
|
|
||||||
type="number"
|
|
||||||
value={formField.minimum_amount}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Maximum Amount</label>
|
|
||||||
<Input
|
|
||||||
name="maximum_amount"
|
|
||||||
type="number"
|
|
||||||
value={formField.maximum_amount}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Start</label>
|
|
||||||
<Input
|
|
||||||
name="period_start"
|
|
||||||
type="date"
|
|
||||||
value={formField.period_start}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">End</label>
|
|
||||||
<Input
|
|
||||||
name="period_end"
|
|
||||||
type="date"
|
|
||||||
value={formField.period_end}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Deduct Amount</label>
|
|
||||||
<Input
|
|
||||||
name="deduct_amount"
|
|
||||||
type="number"
|
|
||||||
value={formField.deduct_amount}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Deduct Percentage</label>
|
|
||||||
<Input
|
|
||||||
name="deduct_percentage"
|
|
||||||
type="number"
|
|
||||||
value={formField.deduct_percentage}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Status</label>
|
|
||||||
<Select
|
|
||||||
value={formField.status}
|
|
||||||
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<SelectTrigger className="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
||||||
<SelectValue placeholder="Select" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="Y">Y</SelectItem>
|
|
||||||
<SelectItem value="N">N</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Priority</label>
|
|
||||||
<Input
|
|
||||||
name="priority"
|
|
||||||
value={formField.priority}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value;
|
|
||||||
if (/^\d*$/.test(value)) {
|
|
||||||
handleChange(e);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
type="text"
|
|
||||||
inputMode="numeric"
|
|
||||||
placeholder="Masukkan angka"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-full flex flex-col gap-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Transaction Type ID</label>
|
|
||||||
<Input
|
|
||||||
name="transactionTypeId"
|
|
||||||
value={formField.transactionTypeId}
|
|
||||||
onChange={handleChange}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end mt-4 gap-3">
|
|
||||||
<Button variant="outline" type="button" onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button variant="default" type="submit">
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</DialogBody>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TransactionFeeDialog;
|
|
||||||
@ -1,178 +0,0 @@
|
|||||||
import { DataGridColumnHeader, DataGridProvider } from '@/components';
|
|
||||||
import { Toaster } from '@/components/ui/sonner';
|
|
||||||
import { apiConfig } from '@/config/api.config';
|
|
||||||
import { useCallApi } from '@/hooks';
|
|
||||||
import { ColumnDef } from '@tanstack/react-table';
|
|
||||||
import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
|
|
||||||
import ListToolbar from '../blocks/ListToolBar';
|
|
||||||
|
|
||||||
interface SelectedUser {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
internal_name: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AccountProps {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const accounts: string[] = [
|
|
||||||
'eMoney Account',
|
|
||||||
'Topup Account',
|
|
||||||
'Merchant Account',
|
|
||||||
'Deposit Account',
|
|
||||||
'Cash out/in'
|
|
||||||
];
|
|
||||||
|
|
||||||
interface ContextProps {
|
|
||||||
showEditDialog: boolean;
|
|
||||||
handleEditDialog: (show: boolean, selected_user: string | null) => void;
|
|
||||||
showAddDialog: boolean;
|
|
||||||
handleAddDialog: (show: boolean) => void;
|
|
||||||
selectedUser: string | null;
|
|
||||||
accounts: AccountProps[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialProps: ContextProps = {
|
|
||||||
showEditDialog: false,
|
|
||||||
handleEditDialog: () => {},
|
|
||||||
showAddDialog: false,
|
|
||||||
handleAddDialog: () => {},
|
|
||||||
selectedUser: null,
|
|
||||||
accounts: []
|
|
||||||
};
|
|
||||||
|
|
||||||
const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
|
|
||||||
const API_URL = apiConfig.service_dashboard;
|
|
||||||
|
|
||||||
const ManageTransferTypeContextProvider = ({ children }: { children: React.ReactNode }) => {
|
|
||||||
const [showEditDialog, setShowEditDialog] = useState(false);
|
|
||||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
|
||||||
const [selectedUser, setSelectedUser] = useState<string | null>(null);
|
|
||||||
const [accounts, setAccount] = useState<AccountProps[]>([]);
|
|
||||||
const { GetData } = useCallApi();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setAccount([
|
|
||||||
{ id: '1', name: 'eMoney Account' },
|
|
||||||
{ id: '2', name: 'Topup Account' },
|
|
||||||
{ id: '3', name: 'Merchant Account' },
|
|
||||||
{ id: '4', name: 'Deposit Account' },
|
|
||||||
{ id: '5', name: 'Cash in/out Account' }
|
|
||||||
]);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => {
|
|
||||||
setSelectedUser(show ? selected_user : null);
|
|
||||||
setShowEditDialog(show);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleAddDialog = useCallback((show: boolean) => {
|
|
||||||
setShowAddDialog(show);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const columns = useMemo<ColumnDef<any>[]>(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
accessorFn: (row) => row.id,
|
|
||||||
id: 'id',
|
|
||||||
header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
|
|
||||||
enableSorting: true,
|
|
||||||
enableHiding: false,
|
|
||||||
meta: {
|
|
||||||
headerClassName: 'w-[100px]'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: (row) => row.name,
|
|
||||||
id: 'name',
|
|
||||||
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
|
|
||||||
enableSorting: true,
|
|
||||||
enableHiding: false,
|
|
||||||
meta: {
|
|
||||||
headerClassName: 'w-[250px]'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: (row) => row.internal_name,
|
|
||||||
id: 'internal_name',
|
|
||||||
header: ({ column }) => <DataGridColumnHeader title="Internal Name" column={column} />,
|
|
||||||
enableSorting: true,
|
|
||||||
enableHiding: false,
|
|
||||||
meta: {
|
|
||||||
headerClassName: 'w-[250px]'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorFn: (row) => row.description,
|
|
||||||
id: 'description',
|
|
||||||
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
|
|
||||||
enableSorting: true,
|
|
||||||
enableHiding: false,
|
|
||||||
meta: {
|
|
||||||
headerClassName: 'w-[250px]'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'actions',
|
|
||||||
enableSorting: false,
|
|
||||||
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-primary mr-2"
|
|
||||||
onClick={() => handleEditDialog(true, row.original.id)}
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-sm btn-primary" onClick={() => handleAddDialog(true)}>
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
meta: {
|
|
||||||
headerClassName: 'w-[100px]',
|
|
||||||
cellClassName: 'text-center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[handleAddDialog, handleEditDialog]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="container mx-auto py-5">
|
|
||||||
<h1>Manage Access Type</h1>
|
|
||||||
</div>
|
|
||||||
<ManageTransferTypeContext.Provider
|
|
||||||
value={{
|
|
||||||
showEditDialog,
|
|
||||||
handleEditDialog,
|
|
||||||
showAddDialog,
|
|
||||||
handleAddDialog,
|
|
||||||
selectedUser,
|
|
||||||
accounts
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Toaster expand visibleToasts={9} duration={3000} />
|
|
||||||
<DataGridProvider
|
|
||||||
columns={columns}
|
|
||||||
pagination={{ size: 10 }}
|
|
||||||
layout={{ card: true }}
|
|
||||||
toolbar={<ListToolbar />}
|
|
||||||
sorting={[{ id: 'id', desc: true }]}
|
|
||||||
serverSide={true}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</DataGridProvider>
|
|
||||||
</ManageTransferTypeContext.Provider>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
|
|
||||||
export type { SelectedUser };
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { useContext } from 'react';
|
|
||||||
import { ManageTransferTypeContext } from './ManageTransferTypeContext';
|
|
||||||
|
|
||||||
const useManageTransferTypeContext = () => {
|
|
||||||
const context = useContext(ManageTransferTypeContext);
|
|
||||||
|
|
||||||
if (!context) throw new Error('useManageAccessTypeContext must be used within AuthProvider');
|
|
||||||
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
|
|
||||||
export { useManageTransferTypeContext };
|
|
||||||
@ -24,7 +24,7 @@ import ManageMenu from '@/pages/menu/manage-menu/ManageMenu';
|
|||||||
import Welcome from '@/pages/menu/welcome/Welcome';
|
import Welcome from '@/pages/menu/welcome/Welcome';
|
||||||
import Inbox from '@/pages/message/Inbox';
|
import Inbox from '@/pages/message/Inbox';
|
||||||
import ManageWebServices from '@/pages/webservice/ManageWebServices';
|
import ManageWebServices from '@/pages/webservice/ManageWebServices';
|
||||||
import TransferType from '@/pages/transfer/TransferType';
|
import TransferType from '@/pages/transfer/transfertype/TransferType';
|
||||||
import MasterData from '@/pages/master/MasterData';
|
import MasterData from '@/pages/master/MasterData';
|
||||||
import PostoAdmsMaster from '@/pages/master/postoadms/PostoAdmsMaster';
|
import PostoAdmsMaster from '@/pages/master/postoadms/PostoAdmsMaster';
|
||||||
import SucosMaster from '@/pages/master/sucos/SucosMaster';
|
import SucosMaster from '@/pages/master/sucos/SucosMaster';
|
||||||
|
|||||||
Reference in New Issue
Block a user