diff --git a/src/pages/master/walletRule/WalletRuleMaster.tsx b/src/pages/master/walletRule/WalletRuleMaster.tsx index c98a242..a580dae 100644 --- a/src/pages/master/walletRule/WalletRuleMaster.tsx +++ b/src/pages/master/walletRule/WalletRuleMaster.tsx @@ -1,6 +1,7 @@ import { Container, DataGridInner } from '@/components'; import { ManageWalletRuleContextProvider } from './hooks/ManageWalletRuleContext'; import { Breadcrumbs, Link } from '@mui/material'; +import AddDialog from './blocks/AddDialog'; const WalletRuleMaster = () => { return ( @@ -24,6 +25,8 @@ 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..52317f7 --- /dev/null +++ b/src/pages/master/walletRule/blocks/AddDialog.tsx @@ -0,0 +1,362 @@ +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'; + +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: '', + 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}

+ + )} + +
+
+
+
+ + +
+
+ +
+
+ + + + + + + + + + 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 AddDialog; 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 (
- */} {/*