diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx new file mode 100644 index 0000000..dc7ecd7 --- /dev/null +++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx @@ -0,0 +1,411 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext'; +import { NumericFormat } from 'react-number-format'; +import { + Alert, + Container, + DataGridColumnHeader, + DataGridInner, + 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 { toast } from 'sonner'; +import { doSaveLogActivity } from '@/actions/GlobalActions'; +import { getAuth } from '@/auth'; +import { + Table, + TableBody, + TableCaption, + TableCell, + TableFooter, + TableHead, + TableHeader, + TableRow +} from '@/components/ui/table'; +import { ManageTransferFeeContext } from '../hooks/ManageTransferFeeContext'; +import { ColumnDef } from '@tanstack/react-table'; +import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext'; +import { apiConfig } from '@/config/api.config'; +import { get } from 'http'; + +interface TransactionTypeProps { + id: string; + name: string; +} + +const API_URL = apiConfig.service_transaction; + +const AddFeeDialog = () => { + const parentRef = useRef(null); + const { reload } = useDataGrid(); + const { PostData, PutData, GetData } = useCallApi(); + const { showAddFeeDialog, handleAddFeeDialog, handleEditFeeDialog, selectedTransferFee } = + useManageTransferFeeContext(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const [transactionTypes, setTransactionTypes] = useState([]); + + const initialState = { + name: '', + description: '', + transaction_type: '', + minimum_amount: 0, + maximum_amount: 0, + period_start: '', + period_end: '', + deduct_amount: 0, + deduct_percentage: 0, + priority: false, + status: '', + status_include: '', + 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) => { + e.preventDefault(); + // setIsSubmitting(true); + const payload = { + name: formField.name, + description: formField.description, + period_start: formField.period_start, + period_end: formField.period_end, + minimum_amount: formField.minimum_amount, + maximum_amount: formField.maximum_amount, + deduct_amount: formField.deduct_amount, + deduct_percentage: formField.deduct_percentage, + priority: formField.priority, + transaction_type: formField.transaction_type, + status: formField.status, + status_include: formField.status_include + }; + console.log(payload); + }; + useEffect(() => { + const created_time = new Date(); + const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); + + if (showAddFeeDialog) { + setFormField({ + ...formField, + created_by: parsedUser?.username, + created_at: formattedTime + }); + } + }, [showAddFeeDialog]); + + useEffect(() => { + if (!showAddFeeDialog) return; + + const getTransactionTypeList = async (sorting: any) => { + try { + sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; + const response = await GetData(`${API_URL}/transactiontype/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc ? 'DESC' : 'ASC' + }); + console.log('TRANSACTION TYPE LIST: ', response?.data?.list); + + setTransactionTypes(response?.data.list || []); + } catch (error) { + console.error('Error fetching customer', error); + } + }; + + getTransactionTypeList([{ id: 'id', desc: false }]); + }, [showAddFeeDialog]); + + const doCreateTransferType = useCallback( + async (e: React.FormEvent) => { + 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}/transactionfees/create`, { + ...formField, + priority: formField.priority ? 'Y' : 'N' + }); + // console.log("coba coba:",response); + + if (response?.status) { + toast.success('Success Create Transfer Fee'); + reload(); + resetForm(); + handleAddFeeDialog(false); + } else { + setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' }); + } + console.log(response); + }, + [formField] + ); + + return ( + handleAddFeeDialog(open)}> + + + + +
+
+

AddTransfer Fee

+
+
{ + handleAddFeeDialog(false); + resetForm(); + }} + > + +
+
+ + + {alert.show && {alert.message}} +
+
+
+
+ + + setFormField((prev) => ({ ...prev, name: target.value })) + } + /> +
+
+ + + setFormField((prev) => ({ ...prev, description: target.value })) + } + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + minimum_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Max Transaction Per Day" + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + maximum_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Max Transaction Per Day" + /> +
+
+ + + setFormField((prev) => ({ ...prev, period_start: target.value })) + } + /> +
+
+ + + setFormField((prev) => ({ ...prev, period_end: target.value })) + } + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + deduct_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Max Transaction Per Day" + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + deduct_percentage: values.floatValue || 0 + })); + }} + placeholder="Enter Max Transaction Per Day" + /> +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + + + ); +}; + +export default AddFeeDialog; diff --git a/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx b/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx new file mode 100644 index 0000000..bf61c83 --- /dev/null +++ b/src/pages/transfer/transferfee/blocks/DeleteDialog.tsx @@ -0,0 +1,87 @@ +import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; +import { Alert, useDataGrid } from '@/components'; +import { ChangeEvent, useCallback, useState } from 'react'; +import { apiConfig } from '@/config/api.config'; +import { toast } from 'sonner'; +import { useCallApi } from '@/hooks'; +import { doSaveLogActivity } from '@/actions/GlobalActions'; +import { EnforceSwitch } from '@/components/switch'; +import { useContext } from 'react'; +import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext'; +import { ManageTransferFeeContext } from '../hooks/ManageTransferFeeContext'; +import { DialogDescription } from '@radix-ui/react-dialog'; +import { useManageAccessTypeContext } from '@/pages/access/access-type/hooks/useManageAccessTypeContext'; + +const API_URL = apiConfig.service_transaction; + +const DeleteDialog = () => { + const { showDeleteFeeDialog, handleDeleteFeeDialog, selectedTransferFee } = useManageTransferFeeContext(); + const { reload } = useDataGrid(); + const { DeleteData } = useCallApi(); + const [enforce, setEnforce] = useState(false); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + + const doDeleteTransferFee = useCallback(async () => { + console.log("Selected Transfer Fee:", selectedTransferFee, "Type:", typeof selectedTransferFee); + const response = await DeleteData(`${API_URL}/transactionfees/delete/${selectedTransferFee}/${enforce}`, { + id: selectedTransferFee + }); + + if (response?.status) { + setAlert((prev) => ({ ...prev, show: false, message: '' })); + handleDeleteFeeDialog(false, null); + toast.success('Success Delete Product'); + reload(); + } else { + toast.error('Failed Delete Product'); + setAlert((prev) => ({ ...prev, show: true, message: response?.message })); + } + }, [selectedTransferFee, enforce]); + + // console.log(selectedTransferFee); + + return ( + handleDeleteFeeDialog(open, null)}> + + + Delete Transfer Type + Delete Transfer Type + +

Are you sure?

+ you will delete this data! +
+ + ) => { + setEnforce(e.target.checked); + }} + /> +
+ + {alert.show && ( + +

{alert.message}

+ + )} + + + + + + + + ); +}; + +export default DeleteDialog; + +export { DeleteDialog }; diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx new file mode 100644 index 0000000..89ee86c --- /dev/null +++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx @@ -0,0 +1,499 @@ +import { useCallback, useEffect, useRef, useState } from 'react'; +import { NumericFormat } from 'react-number-format'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; + +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import { apiConfig } from '@/config/api.config'; +import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components'; +import { toast } from 'sonner'; +import { useCallApi } from '@/hooks'; +import { doSaveLogActivity } from '@/actions/GlobalActions'; +import { getAuth } from '@/auth'; +import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext'; +import AddFeeDialog from '../../transferfee/blocks/AddDialog'; + +const API_URL = apiConfig.service_transaction; +const API_URL_MASTERDATA = apiConfig.service_master_data; +const API_URL_CUSTOMER = apiConfig.service_customer; + +interface WalletProps { + Wallet_id: string; + Wallet_name: string; +} + +interface CustomerProps { + id: string; + username: string; + msisdn: string; +} + +interface TransactionTypeProps { + id: string; + name: string; +} + +const EditFeeDialog = () => { + const parentRef = useRef(null); + const { showEditFeeDialog, handleEditFeeDialog, selectedTransferFee } = + useManageTransferFeeContext(); + const { reload } = useDataGrid(); + const [wallets, setWallets] = useState([]); + const { GetData, PutData } = useCallApi(); + const [isSubmitting, setIsSubmitting] = useState(false); + const [transactionTypes, setTransactionTypes] = useState([]); + const parsedUser = getAuth()?.user; + const [customers, setCustomers] = useState([]); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const [formField, setFormField] = useState({ + name: '', + description: '', + minimum_amount: 0, + maximum_amount: 0, + period_start: '', + period_end: '', + deduct_amount: 0, + deduct_percentage: 0, + priority: '', + status: '', + status_include: '', + transaction_type: '', + updated_by: '', + updated_at: '' + }); + useEffect(() => { + const updated_time = new Date(); + const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' '); + + if (showEditFeeDialog) { + setFormField({ + ...formField, + updated_by: parsedUser?.username, + updated_at: formattedTime + }); + } + }, [showEditFeeDialog]); + /* actions */ + const doUpdateTransferFee = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + const response = await PutData(`${API_URL}/transactionfees/update/${selectedTransferFee}`, { + ...formField + }); + if (response?.status) { + handleEditFeeDialog(false, null); + toast.success('Success Update User'); + reload(); + } else { + setAlert((prev) => ({ ...prev, show: true, message: response?.message })); + } + console.log(formField); + }, + [formField, selectedTransferFee] + ); + const fetchWallets = useCallback(async () => { + const params = { + limit: 100, + page: 1, + with_deleted: false, + order_field: 'name', + order_direction: 'ASC', + filter: JSON.stringify({ + status: 'Y' + }) + }; + const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params); + if (response?.status && response?.data) { + setWallets(response.data.list); + } else { + setWallets([]); + } + }, []); + + useEffect(() => { + fetchWallets(); + }, [fetchWallets]); + + useEffect(() => { + if (!showEditFeeDialog) return; + + const getCustomerList = async (sorting: any) => { + try { + sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; + const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc ? 'DESC' : 'ASC' + }); + + // 🟡 Log daftar pelanggan saja (kalau respons pakai struktur {data: {list: [...]}}) + console.log('CUSTOMER LIST: ', response?.data?.list); + + setCustomers(response?.data.list || []); + } catch (error) { + console.error('Error fetching customer', error); + } + }; + + getCustomerList([{ id: 'msisdn', desc: false }]); + }, []); + useEffect(() => { + if (!showEditFeeDialog) return; + + const getTransactionTypeList = async (sorting: any) => { + try { + sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; + const response = await GetData(`${API_URL}/transactiontype/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc ? 'DESC' : 'ASC' + }); + + // 🟡 Log daftar pelanggan saja (kalau respons pakai struktur {data: {list: [...]}}) + console.log('TRANSACTION TYPE LIST: ', response?.data?.list); + + setTransactionTypes(response?.data.list || []); + } catch (error) { + console.error('Error fetching customer', error); + } + }; + + getTransactionTypeList([{ id: 'id', desc: false }]); + }, [showEditFeeDialog]); + + const fetchTransactionFee = useCallback(async (id: string) => { + const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { id }); + // console.log("API Response:", response); + + if (response?.status) { + setFormField((prev) => ({ + ...prev, + name: response.data.name, + description: response.data.description, + minimum_amount: response.data.minimum_amount, + maximum_amount: response.data.maximum_amount, + period_start: response.data.period_start, + period_end: response.data.period_end, + deduct_amount: response.data.deduct_amount, + deduct_percentage: response.data.deduct_percentage, + priority: response.data.priority, + status: response.data.status, + status_include: response.data.status_include, + transaction_type: response.data.transaction_type.id + + // updated_by: parsedUser?.username , + // updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ') + })); + } else { + setFormField((prev) => ({ + ...prev, + name: '', + description: '', + minimum_amount: 0, + maximum_amount: 0, + period_start: '', + period_end: '', + deduct_amount: 0, + deduct_percentage: 0, + priority: '', + status: '', + status_include: '', + transaction_type: '' + })); + } + }, []); + + useEffect(() => { + if (selectedTransferFee) { + fetchTransactionFee(selectedTransferFee); + } + }, [selectedTransferFee]); + + return ( + handleEditFeeDialog(open, null)}> + + + + +
+
+

+ Update Transaction Fee +

+
+
+
handleEditFeeDialog(false, null)} + > + +
+
+ + +
+ {alert.show && ( + +

{alert.message}

+ + )} +
+
+
+
+ + + setFormField((prev) => ({ ...prev, name: target.value })) + } + /> +
+
+ + + setFormField((prev) => ({ ...prev, description: target.value })) + } + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + minimum_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Minimum Amount" + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + maximum_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Minimum Amount" + /> +
+
+ + + setFormField((prev) => ({ ...prev, period_start: target.value })) + } + /> +
+
+ + + setFormField((prev) => ({ ...prev, period_end: target.value })) + } + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + deduct_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Minimum Amount" + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + deduct_percentage: values.floatValue || 0 + })); + }} + placeholder="Enter Minimum Amount" + /> +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {/*
+ + +
*/} + + {/*
+ + +
*/} +
+ + +
+
+
+
+
+ + + + ); +}; + +export { EditFeeDialog }; diff --git a/src/pages/transfer/transferfee/blocks/ListToolBar.tsx b/src/pages/transfer/transferfee/blocks/ListToolBar.tsx new file mode 100644 index 0000000..9acdc39 --- /dev/null +++ b/src/pages/transfer/transferfee/blocks/ListToolBar.tsx @@ -0,0 +1,44 @@ + import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; + import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext'; + import { Button } from '@/components/ui/button'; + + const ListToolbar = () => { + const { table, reload } = useDataGrid(); + const { handleAddFeeDialog, handleEditFeeDialog, selectedTransferFee} = useManageTransferFeeContext(); + + return ( +
+
+
+
+ +
+
+ + + + +
+
+
+
+ ); + }; + + export default ListToolbar; diff --git a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx new file mode 100644 index 0000000..67d08ba --- /dev/null +++ b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx @@ -0,0 +1,236 @@ +import { DataGridColumnHeader, DataGridProvider, KeenIcon } 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'; +import DeleteDialog from '../blocks/DeleteDialog'; +import { EditFeeDialog } from '../blocks/EditDialog'; + +interface ContextProps { + showEditFeeDialog: boolean; + handleEditFeeDialog: (show: boolean, selectedTransferFee: string | null) => void; + showAddFeeDialog: boolean; + handleAddFeeDialog: (show: boolean) => void; + handleDeleteFeeDialog: (show: boolean, selectedTransferFee: string | null) => void; + showDeleteFeeDialog: boolean; + selectedTransferFee: string | null; +} + +const initialProps: ContextProps = { + showEditFeeDialog: false, + handleEditFeeDialog: () => {}, + showAddFeeDialog: false, + handleAddFeeDialog: () => {}, + showDeleteFeeDialog: false, + handleDeleteFeeDialog: () => {}, + selectedTransferFee: null +}; + +const ManageTransferFeeContext = createContext(initialProps); +const API_URL = apiConfig.service_transaction; + +const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactNode }) => { + const [showEditFeeDialog, setShowEditFeeDialog] = useState(false); + const [showAddFeeDialog, setShowAddFeeDialog] = useState(false); + const [showDeleteFeeDialog, setShowDeleteFeeDialog] = useState(false); + + const [selectedTransferFee, setSelectedTransferFee] = useState(null); + const { GetData } = useCallApi(); + + const handleEditFeeDialog = useCallback((show: boolean, selectedTransferFee: string | null) => { + setSelectedTransferFee(show ? selectedTransferFee : null); + setShowEditFeeDialog(show); + }, []); + + const handleAddFeeDialog = useCallback((show: boolean) => { + setShowAddFeeDialog(show); + }, []); + + const handleDeleteFeeDialog = useCallback((show: boolean, selectedTransferFee: string | null) => { + setSelectedTransferFee(show ? selectedTransferFee : null); + setShowDeleteFeeDialog(show); + }, []); + const doGetTransferFeeListData = async ( + page: number, + limit: number, + sorting: any, + filter: any + ) => { + sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting; + filter = filter.length == 0 ? {} : { any: filter[0].value.toLowerCase() }; + const response = await GetData(`${API_URL}/transactionfees/list`, { + limit: limit, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc ? 'ASC' : 'DESC', + filter: JSON.stringify(filter) + }); + console.log('hasilnya', response?.data.list); + console.log('transactiontype', response?.data); + + return { data: response?.data.list, totalCount: response?.data.total_count }; + }; + const columns = useMemo[]>( + () => [ + { + accessorFn: (row) => row.name, + id: 'name', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[200px]' } + }, + { + accessorFn: (row) => row.description, + id: 'description', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.minimum_amount, + id: 'minimum_amount', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[150px]' } + }, + { + accessorFn: (row) => row.maximum_amount, + id: 'maximum_amount', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[150px]' } + }, + { + accessorFn: (row) => row.period_start?.split('T')[0], + id: 'period_start', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[200px]' } + }, + { + accessorFn: (row) => row.period_end?.split('T')[0], + id: 'period_end', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[200px]' } + }, + { + accessorFn: (row) => row.deduct_amount, + id: 'deduct_amount', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[150px]' } + }, + { + accessorFn: (row) => row.deduct_percentage, + id: 'deduct_percentage', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[150px]' } + }, + { + accessorFn: (row) => row.priority, + id: 'priority', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[100px]' } + }, + { + accessorFn: (row) => row.transaction_type?.name, + id: 'transactionTypeId', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.status_include, + id: 'status_include', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[150px]' } + }, + { + id: 'actions', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + cell: (data) => { + const row = data.row.original; + return ( + <> + + + + ); + }, + meta: { + headerClassName: 'w-[100px]', + cellClassName: 'text-center' + } + } + ], + [handleEditFeeDialog, handleDeleteFeeDialog] + ); + + return ( +
+
+

Manage Transaction Fee

+
+ + + } + sorting={[{ id: 'id', desc: true }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + doGetTransferFeeListData(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + + + + +
+ ); +}; + +export { ManageTransferFeeContext, ManageTransferFeeContextProvider }; diff --git a/src/pages/transfer/transferfee/hooks/useManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/useManageTransferFeeContext.tsx new file mode 100644 index 0000000..11873ba --- /dev/null +++ b/src/pages/transfer/transferfee/hooks/useManageTransferFeeContext.tsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import { ManageTransferFeeContext } from './ManageTransferFeeContext'; + +const useManageTransferFeeContext = () => { + const context = useContext(ManageTransferFeeContext); + + if (!context) throw new Error('useManageAccessTypeContext must be used within AuthProvider'); + + return context; +}; + +export { useManageTransferFeeContext }; diff --git a/src/pages/transfer/transfertype/TransferType.tsx b/src/pages/transfer/transfertype/TransferType.tsx new file mode 100644 index 0000000..de8effe --- /dev/null +++ b/src/pages/transfer/transfertype/TransferType.tsx @@ -0,0 +1,27 @@ +import { Container, DataGridInner } from '@/components'; +import { + ManageTransferTypeContext, + ManageTransferTypeContextProvider +} from './hooks/ManageTransferTypeContext'; +import AddDialog from './blocks/AddDialog'; +import { DeleteDialog } from './blocks/DeleteDialog'; +import { EditDialog } from './blocks/EditDialog'; + +const TransferType = () => { + + return ( + + +
+ +
+ + + + + + + ); +}; + +export default TransferType; diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx new file mode 100644 index 0000000..d0afb04 --- /dev/null +++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx @@ -0,0 +1,490 @@ +import { apiConfig } from '@/config/api.config'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext'; +import { + Alert, + Container, + DataGridColumnHeader, + DataGridInner, + KeenIcon, + useDataGrid +} from '@/components'; +import { useCallApi } from '@/hooks'; +import { NumericFormat } from 'react-number-format'; +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 { toast } from 'sonner'; +import { getAuth } from '@/auth'; + +interface WalletProps { + Wallet_id: string; + Wallet_name: string; +} + +interface CustomerProps { + id: string; + username: string; + msisdn: string; +} + +const API_URL = apiConfig.service_transaction; +const API_URL_MASTERDATA = apiConfig.service_master_data; +const API_URL3_CUSTOMER = apiConfig.service_customer; + +const AddDialog = () => { + const parentRef = useRef(null); + const { GetData } = useCallApi(); + const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext(); + const [wallets, setWallets] = useState([]); + const [customers, setCustomers] = useState([]); + const { reload } = useDataGrid(); + const { PostData, PutData } = useCallApi(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + + const initialState = { + name: '', + description: '', + wallet_origin: '', + wallet_destination: '', + wallet_fee_destination: '', + customer_fee_destination: '', + minimum_amount: 0, + maximum_amount: 0, + max_transaction_per_day: 0, + status: '', + status_approval: '', + created_by: '', + created_at: '' + }; + + const [formField, setFormField] = useState(initialState); + + const resetForm = () => { + setFormField(initialState); + }; + const [isSubmitting, setIsSubmitting] = useState(false); + + const parsedUser = getAuth()?.user; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // setIsSubmitting(true); + const payload = { + name: formField.name, + description: formField.description, + wallet_origin: formField.wallet_origin, + wallet_destination: formField.wallet_destination, + minimum_amount: formField.minimum_amount, + maximum_amount: formField.maximum_amount, + max_transaction_per_day: formField.max_transaction_per_day, + wallet_fee_destination: formField.wallet_fee_destination, + customer_fee_destination: formField.customer_fee_destination, + status_approval: formField.status_approval, + status: formField.status + }; + }; + 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]); + + useEffect(() => { + if (!showAddDialog) return; + const getCustomerList = async (sorting: any) => { + try { + sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; + + const response = await GetData(`${API_URL3_CUSTOMER}/customer/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc ? 'DESC' : 'ASC' + }); + console.log('CUSTOMER LIST: ', response?.data?.list); + + setCustomers(response?.data.list || []); + } catch (error) { + console.error('Error fetching customer', error); + } + }; + + getCustomerList([{ id: 'msisdn', desc: false }]); + }, [showAddDialog]); + + const fetchWallets = useCallback(async () => { + const params = { + limit: 100, + page: 1, + with_deleted: false, + order_field: 'name', + order_direction: 'ASC', + filter: JSON.stringify({ + status: 'Y' + }) + }; + const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params); + if (response?.status && response?.data) { + setWallets(response.data.list); + } else { + setWallets([]); + } + console.log('WALLET LIST: ', response?.data?.list); + }, []); + + useEffect(() => { + if (!showAddDialog) return; + fetchWallets(); + }, [showAddDialog]); + + const doCreateTransferType = useCallback( + async (e: React.FormEvent) => { + 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(); + + console.log('Berhasil nih, isinya gini:', formField); + } else { + setAlert({ show: true, message: response?.message || 'Failed to create transfer type' }); + } + handleAddDialog(false); + }, + [formField] + ); + + return ( + handleAddDialog(open)}> + + + + +
+
+

Transaction Type

+
+
+
{ + handleAddDialog(false); + resetForm(); + }} + > + +
+
+ + +
+ {alert.show && ( + +

{alert.message}

+ + )} +
+
+
+
+ + + setFormField((prev) => ({ ...prev, name: target.value })) + } + /> +
+
+ +
+
+ + + setFormField((prev) => ({ ...prev, description: target.value })) + } + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + minimum_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Minimum Amount" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + maximum_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Maximum Amount" + /> +
+
+
+
+ + { + setFormField((prev) => ({ + ...prev, + max_transaction_per_day: values.floatValue || 0 + })); + }} + placeholder="Enter Max Transaction Per Day" + /> +
+
+
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+ +
+
+ + +
+ +
+
+
+ +
+
+ + +
+ +
+
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default AddDialog; diff --git a/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx b/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx new file mode 100644 index 0000000..52f9e25 --- /dev/null +++ b/src/pages/transfer/transfertype/blocks/DeleteDialog.tsx @@ -0,0 +1,92 @@ +import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; +import { Alert, useDataGrid } from '@/components'; +import { ChangeEvent, useCallback, useState } from 'react'; +import { apiConfig } from '@/config/api.config'; +import { toast } from 'sonner'; +import { useCallApi } from '@/hooks'; +import { doSaveLogActivity } from '@/actions/GlobalActions'; +import { EnforceSwitch } from '@/components/switch'; +import { useContext } from 'react'; +import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext'; +import { ManageTransferTypeContext } from '../hooks/ManageTransferTypeContext'; +import TransferType from '../TransferType'; +import { DialogDescription } from '@radix-ui/react-dialog'; +import { useManageAccessTypeContext } from '@/pages/access/access-type/hooks/useManageAccessTypeContext'; + +const API_URL = apiConfig.service_transaction; + +const DeleteDialog = () => { + const { showDeleteDialog, handleDeleteDialog, selectedTransferType } = useManageTransferTypeContext(); + const { reload } = useDataGrid(); + const { DeleteData } = useCallApi(); + const [enforce, setEnforce] = useState(false); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + + const doDeleteTransferType = useCallback(async () => { + if (!selectedTransferType) { + toast.error('No Transfer Type selected'); + return; + } + + const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/${enforce}`, { + id: selectedTransferType + }); + + if (response?.status) { + setAlert((prev) => ({ ...prev, show: false, message: '' })); + handleDeleteDialog(false, null); + reload(); + setTimeout(() => toast.success('Success Delete Product'), 0); + } else { + setAlert((prev) => ({ ...prev, show: true, message: response?.message })); + setTimeout(() => toast.error('Failed Delete Product'), 0); + } + }, [selectedTransferType, enforce, DeleteData, handleDeleteDialog, reload]); + + // console.log(selectedTransferType); + + return ( + handleDeleteDialog(open, null)}> + + + Delete Transfer Type + Delete Transfer Type + +

Are you sure?

+ you will delete this data! +
+ + ) => { + setEnforce(e.target.checked); + }} + /> +
+ + {alert.show && ( + +

{alert.message}

+ + )} + + + + + + + + ); +}; + +export default DeleteDialog; + +export { DeleteDialog }; diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx new file mode 100644 index 0000000..7a27df0 --- /dev/null +++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx @@ -0,0 +1,525 @@ +import { useCallback, useEffect, useRef, useState } from 'react'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select'; +import { NumericFormat } from 'react-number-format'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import { apiConfig } from '@/config/api.config'; +import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components'; +import { toast } from 'sonner'; +import { useCallApi } from '@/hooks'; +import { doSaveLogActivity } from '@/actions/GlobalActions'; +import { getAuth } from '@/auth'; +import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext'; +import AddFeeDialog from '../../transferfee/blocks/AddDialog'; + +const API_URL = apiConfig.service_transaction; +const API_URL_MASTERDATA = apiConfig.service_master_data; +const API_URL_CUSTOMER = apiConfig.service_customer; + +interface WalletProps { + Wallet_id: string; + Wallet_name: string; +} + +interface CustomerProps { + id: string; + username: string; + msisdn: string; +} + +interface TranssactionTypeProps { + name: string; + description: string; + minimum_amount: number; + maximum_amount: number; + max_transaction_per_day: number; + status_approval: string; + status: string; + wallet_origin: WalletProps; + wallet_destination: WalletProps; + wallet_fee_destination: WalletProps; + customer_fee_destination: CustomerProps; +} + +const EditDialog = () => { + const parentRef = useRef(null); + const { showEditDialog, handleEditDialog, selectedTransferType, accounts } = + useManageTransferTypeContext(); + const { reload } = useDataGrid(); + const [wallets, setWallets] = useState([]); + const { GetData, PutData } = useCallApi(); + const [isSubmitting, setIsSubmitting] = useState(false); + const parsedUser = getAuth()?.user; + const [customers, setCustomers] = useState([]); + const [transactiontypes, setTransactionTypes] = useState([]); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const resetForm = () => { + setFormField(formField); + }; + const [formField, setFormField] = useState({ + name: '', + description: '', + wallet_origin: '', + wallet_destination: '', + wallet_fee_destination: '', + customer_fee_destination: '', + minimum_amount: 0, + maximum_amount: 0, + max_transaction_per_day: 0, + status_approval: '', + status: '', + updated_by: '', + updated_at: '' + }); + useEffect(() => { + const updated_time = new Date(); + const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' '); + + if (showEditDialog) { + setFormField({ + ...formField, + updated_by: parsedUser?.username, + updated_at: formattedTime + }); + } + }, [showEditDialog]); + /* actions */ + const doUpdateTransferType = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, { + ...formField + }); + if (response?.status) { + handleEditDialog(false, null); + toast.success('Success Update User'); + reload(); + } else { + setAlert((prev) => ({ ...prev, show: true, message: response?.message })); + } + // console.log(formField); + }, + [formField, selectedTransferType] + ); + useEffect(() => { + const getCustomerList = async (sorting: any) => { + try { + sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; + const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, { + limit: 100, + page: 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc ? 'DESC' : 'ASC' + }); + // console.log('CUSTOMER LIST: ', response?.data?.list); + + setCustomers(response?.data.list || []); + } catch (error) { + console.error('Error fetching customer', error); + } + }; + + getCustomerList([{ id: 'id', desc: false }]); + }, [showEditDialog]); + const fetchWallets = useCallback(async () => { + const params = { + limit: 100, + page: 1, + with_deleted: false, + order_field: 'name', + order_direction: 'ASC', + filter: JSON.stringify({ + status: 'Y' + }) + }; + const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params); + if (response?.status && response?.data) { + setWallets(response.data.list); + } else { + setWallets([]); + } + }, []); + + useEffect(() => { + fetchWallets(); + }, [fetchWallets]); + + const fetchTransactionType = useCallback(async (id: string) => { + const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id }); + // console.log("API Response:", response); + + if (response?.status) { + const data = response.data; + console.log('Fetched customer_fee_destination:', response.data); + setFormField((prev) => ({ + ...prev, + name: response.data.name, + description: response.data.description, + wallet_origin: response.data.wallet_origin.id, + wallet_destination: response.data.wallet_destination.id, + wallet_fee_destination: response.data.wallet_fee_destination.id, + customer_fee_destination: response.data.customer_fee_destination.id, + minimum_amount: response.data.minimum_amount, + maximum_amount: response.data.maximum_amount, + 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', ' ') + })); + } else { + setFormField((prev) => ({ + ...prev, + name: '', + description: '', + wallet_origin: '', + wallet_destination: '', + wallet_fee_destination: '', + customer_fee_destination: '', + maximum_amount: 0, + minimum_amount: 0, + max_transaction_per_day: 0, + status_approval: '', + status: '' + })); + } + }, []); + + useEffect(() => { + if (selectedTransferType) { + fetchTransactionType(selectedTransferType); + } + }, [selectedTransferType]); + // console.log('Form Field Data: ', formField); + // console.log('customer list:', customers); + return ( + handleEditDialog(open, null)}> + + + + +
+
+

+ Update Transaction Type +

+
+
+
{ + handleEditDialog(false, null); + resetForm(); + }} + > + +
+
+ + +
+ {alert.show && ( + +

{alert.message}

+ + )} +
+
+
+
+ + + setFormField((prev) => ({ ...prev, name: target.value })) + } + /> +
+
+ +
+
+ + + setFormField((prev) => ({ ...prev, description: target.value })) + } + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + maximum_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Minimum Amount" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + maximum_amount: values.floatValue || 0 + })); + }} + placeholder="Enter Maximum Amount" + /> +
+
+
+
+ + { + setFormField((prev) => ({ + ...prev, + max_transaction_per_day: values.floatValue || 0 + })); + }} + placeholder="Enter Max Transaction Per Day" + /> +
+
+
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ + +
+ +
+
+
+ +
+
+ + +
+ +
+
+
+ + {/*
+ +
*/} +
+ {/* */} + + + +
+
+
+ {/* Bagian Transaction Fee */} + + +
+ +
+ + + +
+ + + + ); +}; + +export { EditDialog }; diff --git a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx new file mode 100644 index 0000000..7325816 --- /dev/null +++ b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx @@ -0,0 +1,44 @@ +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 ( +
+
+
+
+ +
+
+ + + + +
+
+
+
+ ); +}; + +export default ListToolbar; diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx new file mode 100644 index 0000000..5759d29 --- /dev/null +++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx @@ -0,0 +1,254 @@ + import { DataGridColumnHeader, DataGridProvider, KeenIcon } 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 AccountProps { + id: string; + name: string; + } + + interface TransferType { + id: string; + name: string; + minimum_amount: number; + maximum_amount: number; + max_transaction_per_day: number; + walletOriginId: string; + walletDestinationId: string; + status: string; + } + + interface ContextProps { + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_user: string | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + showDeleteDialog: boolean; + handleDeleteDialog: (show: boolean, selected_user: string | null) => void; + selectedTransferType: string | null; + transferType: string|null; + accounts: AccountProps[]; + } + + const initialProps: ContextProps = { + showEditDialog: false, + handleEditDialog: () => {}, + showAddDialog: false, + handleAddDialog: () => {}, + showDeleteDialog: false, + handleDeleteDialog: () => {}, + selectedTransferType: null, + accounts: [], + transferType: null + }; + + const ManageTransferTypeContext = createContext(initialProps); + const API_URL = apiConfig.service_transaction; + + const ManageTransferTypeContextProvider = ({ children }: { children: React.ReactNode }) => { + const [showEditDialog, setShowEditDialog] = useState(false); + const [showAddDialog, setShowAddDialog] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + const [selectedUser, setSelectedUser] = useState(null); + const [accounts, setAccount] = useState([]); + const { GetData } = useCallApi(); + const [selectedTransferType, setSelectedTransferType] = useState(null); + const [transferType, setTransferType] = useState(null); + + + const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => { + setSelectedTransferType(show ? selected_transfertype : null); + setShowEditDialog(show); + }, []); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => { + setShowDeleteDialog(show); + setSelectedTransferType(show ? selected_transfertype : null); + }, []); + + const columns = useMemo[]>( + () => [ + + { + accessorFn: (row) => row.name, + id: 'name', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.wallet_origin?.name || 'N/A', + id: 'wallet_origin', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.wallet_destination.name || 'N/A', + id: 'wallet_destination', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.maximum_amount, + id: 'maximum_amount', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.minimum_amount, + id: 'minimum_amount', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.max_transaction_per_day, + id: 'max_transaction_per_day', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.description, + id: 'description', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.wallet_fee_destination.name , + id: 'wallet_fee_destination', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.customer_fee_destination?.username || 'N/A', + id: 'customer_fee_destination', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.status_approval, + id: 'status_approval', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[150px]' } + }, + { + accessorFn: (row) => row.status, + id: 'status', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[150px]' } + } +, + { + id: 'actions', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + cell: (data) => { + const row = data.row.original; + return ( + <> + + + + ); + }, + meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' } + } + ], + [handleEditDialog, handleDeleteDialog] + ); + const doGetTransferTypeListData = async (page: number, limit: number, sorting: any, filter: any) => { + + sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting; + filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() }; + const response = await GetData(`${API_URL}/transactiontype/list`, { + limit: limit, + page: page + 1, + with_deleted: false, + order_field: sorting[0].id, + order_direction: sorting[0].desc ? 'ASC' : 'DESC', + filter: JSON.stringify(filter) + }); + console.log("bismillah:",response?.data.list) + // setTransferType(response?.data.list); + return { data: response?.data.list, totalCount: response?.data.total_count }; + // console.log("test:",response) +   }; + + return ( +
+
+

Manage Transaction Type

+
+ + + + +
+ } + sorting={[{ id: 'id', desc: true }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + doGetTransferTypeListData(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + +
+ +
+ ); + + }; + + export { ManageTransferTypeContext, ManageTransferTypeContextProvider }; + export type { TransferType }; diff --git a/src/pages/transfer/transfertype/hooks/useManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/useManageTransferTypeContext.tsx new file mode 100644 index 0000000..b726a7c --- /dev/null +++ b/src/pages/transfer/transfertype/hooks/useManageTransferTypeContext.tsx @@ -0,0 +1,12 @@ +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 };