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

refactor: form access type

Browse Source
This commit is contained in:
Wikzyy
2025-02-25 10:41:33 +07:00
parent b45fa2daaf
commit aee7203125
2 changed files with 24 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/pages/access/access-type/blocks/AddDialog.tsx
View File

@ -21,22 +21,11 @@ import {
} from '@/components/ui/select';
import { Button } from '@/components/ui/button';
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;
}
const API_URL = apiConfig.service_dashboard;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog, accounts } = useManageAccessTypeContext();
const { showAddDialog, handleAddDialog, accessTypes } = useManageAccessTypeContext();
const { reload } = useDataGrid();
const { PostData, PutData } = useCallApi();
const [alert, setAlert] = useState({
@ -45,14 +34,9 @@ const AddDialog = () => {
});
const initialState = {
transfer_type_name: '',
name: '',
description: '',
from_account: '',
to_account: '',
minimal_amount: 0,
maximum_amount: 0,
otp_threshold: 0,
maximum_transaction_perDay: 0
internal_name: ''
};
const [formField, setFormField] = useState(initialState);
@ -64,17 +48,11 @@ const AddDialog = () => {
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(formField);
};
console.log(payload);
const handleReset = () => {
setFormField(initialState);
};
return (
@ -84,7 +62,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">
Create Transfer Type
Create Access Type
</h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div>
@ -110,16 +88,14 @@ const AddDialog = () => {
<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>
<label className="form-label flex items-center gap-1 max-w-56">Name</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.transfer_type_name}
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, transfer_type_name: target.value }))
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</div>
@ -142,140 +118,25 @@ const AddDialog = () => {
</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
Internal Name
</label>
<Input
className="input"
type="number"
type="text"
autoComplete="off"
value={formField.minimal_amount}
value={formField.internal_name}
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)
}))
setFormField((prev) => ({ ...prev, internal_name: target.value }))
}
/>
</div>
</div>
<div className="flex justify-end pt-2.5 gap-5">
<Button variant={'outline'} type="reset">
<Button variant={'outline'} type="reset" onClick={handleReset}>
Reset
</Button>
<Button variant={'default'} type="submit">

30
src/pages/access/access-type/hooks/ManageAccessTypeContext.tsx
View File

@ -13,26 +13,20 @@ interface SelectedUser {
description: string;
}
interface AccountProps {
interface AccessTypeProps {
id: string;
name: string;
internal_name: string;
description: 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[];
accessTypes: AccessTypeProps[];
}
const initialProps: ContextProps = {
@ -41,7 +35,7 @@ const initialProps: ContextProps = {
showAddDialog: false,
handleAddDialog: () => {},
selectedUser: null,
accounts: []
accessTypes: []
};
const ManageAccessTypeContext = createContext<ContextProps>(initialProps);
@ -51,19 +45,9 @@ const ManageAccessTypeContextProvider = ({ children }: { children: React.ReactNo
const [showEditDialog, setShowEditDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false);
const [selectedUser, setSelectedUser] = useState<string | null>(null);
const [accounts, setAccount] = useState<AccountProps[]>([]);
const [accessTypes, setAccessTypes] = useState<AccessTypeProps[]>([]);
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);
@ -155,7 +139,7 @@ const ManageAccessTypeContextProvider = ({ children }: { children: React.ReactNo
showAddDialog,
handleAddDialog,
selectedUser,
accounts
accessTypes
}}
>
<Toaster expand visibleToasts={9} duration={3000} />