diff --git a/src/pages/master/walletRule/WalletRuleMaster.tsx b/src/pages/master/walletRule/WalletRuleMaster.tsx index a580dae..23fde29 100644 --- a/src/pages/master/walletRule/WalletRuleMaster.tsx +++ b/src/pages/master/walletRule/WalletRuleMaster.tsx @@ -2,6 +2,7 @@ import { Container, DataGridInner } from '@/components'; import { ManageWalletRuleContextProvider } from './hooks/ManageWalletRuleContext'; import { Breadcrumbs, Link } from '@mui/material'; import AddDialog from './blocks/AddDialog'; +import EditDialog from './blocks/EditDialog'; const WalletRuleMaster = () => { return ( @@ -27,6 +28,7 @@ const WalletRuleMaster = () => { + ); diff --git a/src/pages/master/walletRule/blocks/AddDialog.tsx b/src/pages/master/walletRule/blocks/AddDialog.tsx index 06d93c0..7ff2241 100644 --- a/src/pages/master/walletRule/blocks/AddDialog.tsx +++ b/src/pages/master/walletRule/blocks/AddDialog.tsx @@ -132,7 +132,7 @@ const AddDialog = () => { order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' }); - console.log('GROUPS: ', response?.data); + // console.log('GROUPS: ', response?.data); setGroups(response?.data.list); } catch (error) { console.error('Error fetching groups', error); @@ -149,7 +149,7 @@ const AddDialog = () => { order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' }); - console.log('WALLET: ', response?.data); + // console.log('WALLET: ', response?.data); setWallets(response?.data.list); } catch (error) { console.error('Error fetching wallet', error); diff --git a/src/pages/master/walletRule/blocks/EditDialog.tsx b/src/pages/master/walletRule/blocks/EditDialog.tsx new file mode 100644 index 0000000..02c9435 --- /dev/null +++ b/src/pages/master/walletRule/blocks/EditDialog.tsx @@ -0,0 +1,398 @@ +import { useCallApi } from '@/hooks'; +import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext'; +import { Alert, useDataGrid } from '@/components'; +import React, { useCallback, useEffect, useState } from 'react'; +import { apiConfig } from '@/config/api.config'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; +import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList +} from '@/components/ui/command'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + +interface GroupProps { + ID: string; + is_bank: string; + name: string; + status: string; +} + +interface WalletProps { + ID: string; + name: string; + id_currency: string; + status: string; +} + +const API_URL_WALLET = apiConfig.service_wallet; + +const EditDialog = () => { + const { showEditDialog, handleEditDialog, selectedWalletRule } = useManageWalletRuleContext(); + const { GetData, PutData } = useCallApi(); + const { reload } = useDataGrid(); + const [open, setOpen] = useState(false); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState: { + id_wallet: string; + id_group: string; + max_transaction_per_day: number | null; + balance_minimum: number | null; + balance_maximum: number | null; + credit_limit: number | null; + monthly_limit: number | null; + status: string; + } = { + id_wallet: '', + id_group: '', + max_transaction_per_day: null, + balance_minimum: null, + balance_maximum: null, + credit_limit: null, + monthly_limit: null, + status: '' + }; + const [formField, setFormField] = useState(initialState); + const [groups, setGroups] = useState([]); + const [wallets, setWallets] = useState([]); + + const resetForm = () => { + setFormField(initialState); + setAlert({ show: false, message: '' }); + }; + + const doUpdateWalletRule = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PutData( + `${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule}`, + formField + ); + + if (response?.status) { + handleEditDialog(false, null); + toast.success('Success Update Wallet Rule'); + reload(); + } else { + toast.error('Failed Update Wallet Rule'); + setAlert({ show: true, message: 'Failed Update Wallet Rule' }); + } + }, + [formField] + ); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.id_group.trim() === '' || + formField.max_transaction_per_day === 0 || + formField.balance_minimum === 0 || + formField.balance_maximum === 0 || + formField.credit_limit === 0 || + formField.monthly_limit === 0 || + formField.status.trim() === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + // console.log(formField); + doUpdateWalletRule(e); + setAlert({ show: false, message: '' }); + }; + + const getGroupLists = async (sorting: any) => { + try { + const response = await GetData(`${API_URL_WALLET}/dashboard/group`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); + + // console.log('GROUPS: ', response?.data); + setGroups(response?.data.list); + } catch (error) { + console.error('Error fetching groups', error); + } + }; + + const getWalletLists = async (sorting: any) => { + try { + const response = await GetData(`${API_URL_WALLET}/dashboard/wallet`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' + }); + + // console.log('WALLET: ', response?.data); + setWallets(response?.data.list); + } catch (error) { + console.error('Error fetching wallet', error); + } + }; + + const doFetchData = useCallback(async (id: string) => { + const response = await GetData(`${API_URL_WALLET}/dashboard/wallet_rule/${id}`, { id }); + + console.log(response); + if (response?.status) { + setFormField((prev) => ({ + ...prev, + id_wallet: response?.data.id_wallet, + id_group: response?.data.id_group, + max_transaction_per_day: response?.data.max_transaction_per_day, + balance_minimum: response?.data.balance_minimum, + balance_maximum: response?.data.balance_maximum, + credit_limit: response?.data.credit_limit, + monthly_limit: response?.data.monthly_limit, + status: response?.data.status + })); + } + }, []); + + useEffect(() => { + getWalletLists([{ id: 'name', desc: false }]); + getGroupLists([{ id: 'name', desc: false }]); + }, []); + + useEffect(() => { + if (showEditDialog === false) { + resetForm(); + } + }, [showEditDialog]); + + useEffect(() => { + if (selectedWalletRule) { + doFetchData(selectedWalletRule); + } + }, [selectedWalletRule]); +// console.log(selectedWalletRule); + return ( + handleEditDialog(open, null)}> + + + Wallet Rule - Create + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + +
+
+ +
+
+ + + + + + + + + + No Group found. + + {groups.map((group) => ( + { + setFormField({ + ...formField, + id_group: group.ID + }); + setOpen(false); + }} + > + {group.name} + + ))} + + + + + +
+
+ +
+
+ + + setFormField({ + ...formField, + max_transaction_per_day: parseInt(e.target.value) + }) + } + /> +
+
+ +
+
+ + + setFormField({ ...formField, balance_minimum: parseInt(e.target.value) }) + } + /> +
+
+ +
+
+ + + setFormField({ ...formField, balance_maximum: parseInt(e.target.value) }) + } + /> +
+
+ +
+
+ + + setFormField({ ...formField, credit_limit: parseInt(e.target.value) }) + } + /> +
+
+ +
+
+ + + setFormField({ ...formField, monthly_limit: parseInt(e.target.value) }) + } + /> +
+
+ +
+
+ + +
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default EditDialog; diff --git a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx index b71f086..51d0e07 100644 --- a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx +++ b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx @@ -142,13 +142,13 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo <> @@ -176,7 +176,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', filter: JSON.stringify(filter) }); - console.log(response?.data); + // console.log(response?.data); setWalletRules(response?.data.list); return { data: response?.data.list, totalCount: response?.data.total_count }; } catch (error) {