diff --git a/src/pages/master/walletRule/WalletRuleMaster.tsx b/src/pages/master/walletRule/WalletRuleMaster.tsx index c98a242..08e56d2 100644 --- a/src/pages/master/walletRule/WalletRuleMaster.tsx +++ b/src/pages/master/walletRule/WalletRuleMaster.tsx @@ -1,6 +1,9 @@ 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'; +import DeleteDialog from './blocks/DeleteDialog'; const WalletRuleMaster = () => { return ( @@ -24,6 +27,10 @@ const WalletRuleMaster = () => {
+ + + + ); diff --git a/src/pages/master/walletRule/blocks/AddDialog.tsx b/src/pages/master/walletRule/blocks/AddDialog.tsx new file mode 100644 index 0000000..885c15a --- /dev/null +++ b/src/pages/master/walletRule/blocks/AddDialog.tsx @@ -0,0 +1,380 @@ +import { apiConfig } from '@/config/api.config'; +import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import { useCallback, useEffect, useState } from 'react'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +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 { NumericFormat } from 'react-number-format'; + +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 AddDialog = () => { + const { showAddDialog, handleAddDialog } = useManageWalletRuleContext(); + const { reload } = useDataGrid(); + const { PostData, GetData } = useCallApi(); + const [open, setOpen] = useState(false); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState: { + id_wallet: string; + id_group: string; + max_transaction_per_day: string | number | null; + balance_minimum: string | number | null; + balance_maximum: string | number | null; + credit_limit: string | number | null; + monthly_limit: string | 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 doCreateWalletRule = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PostData(`${API_URL_WALLET}/dashboard/wallet_rule`, formField); + + if (response?.status) { + handleAddDialog(false); + toast.success('Success Create Wallet Rule'); + reload(); + } else { + toast.error('Failed Create Wallet Rule'); + setAlert({ show: true, message: 'Failed Create 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); + doCreateWalletRule(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); + } + }; + + useEffect(() => { + getWalletLists([{ id: 'name', desc: false }]); + getGroupLists([{ id: 'name', desc: false }]); + }, []); + + useEffect(() => { + if (showAddDialog === false) { + resetForm(); + } + }, [showAddDialog]); + + return ( + handleAddDialog(open)}> + + + Wallet Rule - Create + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + max_transaction_per_day: + values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Max Transaction Per Day" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + balance_minimum: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Balance Minimum" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + balance_maximum: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Balance Maximum" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + credit_limit: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Credit Limit" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + monthly_limit: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Monthly Limit" + /> +
+
+ +
+
+ + +
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default AddDialog; diff --git a/src/pages/master/walletRule/blocks/DeleteDialog.tsx b/src/pages/master/walletRule/blocks/DeleteDialog.tsx new file mode 100644 index 0000000..97f3e0c --- /dev/null +++ b/src/pages/master/walletRule/blocks/DeleteDialog.tsx @@ -0,0 +1,76 @@ +import { useCallApi } from '@/hooks'; +import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallback, useState } from 'react'; +import { toast } from 'sonner'; +import { apiConfig } from '@/config/api.config'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; + +const API_URL_WALLET = apiConfig.service_wallet; + +const DeleteDialog = () => { + const { showDeleteDialog, handleDeleteDialog, selectedWalletRule } = useManageWalletRuleContext(); + const { DeleteData } = useCallApi(); + const { reload } = useDataGrid(); + const [alert, setAlert] = useState({ show: false, message: '' }); + + const doDeleteWalletRule = useCallback(async () => { + if (!selectedWalletRule) { + toast.error('No wallet rule selected'); + return; + } + + const response = await DeleteData( + `${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule.ID}`, + { id: selectedWalletRule.ID } + ); + + if (response?.status) { + toast.success('Wallet rule deleted successfully'); + handleDeleteDialog(false, null); + reload(); + setAlert({ show: false, message: '' }); + } else { + toast.error('Failed to delete wallet rule'); + setAlert({ show: true, message: response?.message }); + } + }, [selectedWalletRule]); + + return ( + handleDeleteDialog(open, null)}> + + + + + +

Are you sure?

+ You will delete this data! + + {alert.show && ( + +

{alert.message}

+ + )} + + + + + + + + ); +}; + +export default DeleteDialog; diff --git a/src/pages/master/walletRule/blocks/EditDialog.tsx b/src/pages/master/walletRule/blocks/EditDialog.tsx new file mode 100644 index 0000000..9b870c4 --- /dev/null +++ b/src/pages/master/walletRule/blocks/EditDialog.tsx @@ -0,0 +1,418 @@ +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'; +import { NumericFormat } from 'react-number-format'; + +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 [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState: { + id_wallet: string; + id_group: string; + max_transaction_per_day: string | number | null; + balance_minimum: string | number | null; + balance_maximum: string | number | null; + credit_limit: string | number | null; + monthly_limit: string | 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?.ID}`, + 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) { + setFormField((prev) => ({ + ...prev, + id_wallet: selectedWalletRule?.id_wallet, + id_group: selectedWalletRule?.id_group, + max_transaction_per_day: selectedWalletRule?.max_transaction_per_day, + balance_minimum: selectedWalletRule?.balance_minimum, + balance_maximum: selectedWalletRule?.balance_maximum, + credit_limit: selectedWalletRule?.credit_limit, + monthly_limit: selectedWalletRule?.monthly_limit, + status: selectedWalletRule?.status + })); + } + }, [selectedWalletRule]); + // console.log(selectedWalletRule); + return ( + handleEditDialog(open, null)}> + + + Wallet Rule - Create + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + max_transaction_per_day: + values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Max Transaction Per Day" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + balance_minimum: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Balance Minimum" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + balance_maximum: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Balance Maximum" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + credit_limit: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Credit Limit" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + monthly_limit: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Monthly Limit" + /> +
+
+ +
+
+ + +
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default EditDialog; diff --git a/src/pages/master/walletRule/blocks/ListToolbar.tsx b/src/pages/master/walletRule/blocks/ListToolbar.tsx index 2a2df4f..b607532 100644 --- a/src/pages/master/walletRule/blocks/ListToolbar.tsx +++ b/src/pages/master/walletRule/blocks/ListToolbar.tsx @@ -1,17 +1,17 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { Button } from '@/components/ui/button'; -import { useManageProductsContext } from '../../products/hooks/useManageProductsContext'; +import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext'; const ListToolbar = () => { const { table, reload } = useDataGrid(); - const { handleAddDialog } = useManageProductsContext(); + const { handleAddDialog } = useManageWalletRuleContext(); return (
- */} {/* @@ -176,7 +188,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) { @@ -194,7 +206,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo handleEditDialog, showDeleteDialog, handleDeleteDialog, - selectedWalletRule, + selectedWalletRule: selectedWalletRule, getWalletRuleLists }} > diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx index 73bdcfd..65f032e 100644 --- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx +++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx @@ -75,7 +75,7 @@ const AddFeeDialog = () => { period_end: '', deduct_amount: 0, deduct_percentage: 0, - priority: false, + priority: '', status: '', status_include: '', created_by: '', @@ -107,7 +107,7 @@ const AddFeeDialog = () => { transaction_type: formField.transaction_type, status: formField.status, status_include: formField.status_include, - priority: formField.priority ? 'Y' : 'N' + priority: formField.priority }; }; useEffect(() => { @@ -162,7 +162,6 @@ const AddFeeDialog = () => { const response = await PostData(`${API_URL}/transactionfees/create`, { ...formField }); - console.log(response); if (response?.status) { toast.success('Success Create Transfer Fee'); reload(); @@ -202,7 +201,7 @@ const AddFeeDialog = () => {
- + { />
- + { />
- + { />
- + { />
- + { />
- + { />
- + { />
- + { />
- +
- +
- +
- + { />
- + { />
- + { />
- + { />
- + { />
- + { />
- + { />
- + { />
- +
- +
- +
- - -
+ + +
{/*
- + diff --git a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx index 8188d4d..8703234 100644 --- a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx +++ b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx @@ -153,7 +153,7 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN meta: { headerClassName: 'w-[100px]' } }, { - accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactieve'), + accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'), id: 'status', header: ({ column }) => , enableSorting: true, diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx index 453fdcf..2796241 100644 --- a/src/pages/transfer/transfertype/blocks/AddDialog.tsx +++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx @@ -128,7 +128,7 @@ const AddDialog = () => { order_direction: sorting[0].desc ? 'DESC' : 'ASC' }); setCustomers(response?.data.list); - console.log('CUSTOMER: ', response?.data.list); + // console.log('CUSTOMER: ', response?.data.list); } catch (error) { console.error('Error fetching customer', error); } diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx index 15f56e0..0061789 100644 --- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx +++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx @@ -143,7 +143,7 @@ const EditDialog = () => { order_field: sorting[0].id, order_direction: sorting[0].desc ? 'DESC' : 'ASC' }); - console.log('CUSTOMER: ', response?.data.list); + // console.log('CUSTOMER: ', response?.data.list); setCustomers(response?.data.list); } catch (error) { console.error('Error fetching customer', error); @@ -177,7 +177,7 @@ const EditDialog = () => { const fetchTransactionType = useCallback(async (id: string) => { const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id }); - console.log('Transaction Type: ', response?.data); + // console.log('Transaction Type: ', response?.data); if (response?.status) { setFormField((prev) => ({ ...prev, @@ -192,11 +192,9 @@ const EditDialog = () => { max_transaction_per_day: response.data.max_transaction_per_day, status_approval: response.data.status_approval, status: response.data.status - // updated_by: parsedUser?.username , - // updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ') })); - console.log('Transaction Type: ', formField); } + // console.log('form fieldd Transaction Type: ', formField); }, []); useEffect(() => { @@ -242,6 +240,7 @@ const EditDialog = () => {
{
{
{
{
{
- +
{
- +
{
- +