add Wallet Rule route and get list data
This commit is contained in:
Wikzyy
32
src/pages/master/walletRule/WalletRuleMaster.tsx
Normal file
32
src/pages/master/walletRule/WalletRuleMaster.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { Container, DataGridInner } from '@/components';
|
||||||
|
import { ManageWalletRuleContextProvider } from './hooks/ManageWalletRuleContext';
|
||||||
|
import { Breadcrumbs, Link } from '@mui/material';
|
||||||
|
|
||||||
|
const WalletRuleMaster = () => {
|
||||||
|
return (
|
||||||
|
<ManageWalletRuleContextProvider>
|
||||||
|
<Container>
|
||||||
|
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet Rule</h1>
|
||||||
|
<Breadcrumbs sx={{ mb: 2 }}>
|
||||||
|
<Link underline="none" color="inherit" href="/">
|
||||||
|
<span className="text-sm hover:underline">Dashboard</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link underline="none" color="inherit">
|
||||||
|
<span className="text-sm">Master Data</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link underline="none" color="inherit">
|
||||||
|
<span className="text-sm">Manage Wallet Rule</span>
|
||||||
|
</Link>
|
||||||
|
</Breadcrumbs>
|
||||||
|
|
||||||
|
<div className="grid gap-5 lg:gap-7.5">
|
||||||
|
<DataGridInner />
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</ManageWalletRuleContextProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WalletRuleMaster;
|
||||||
55
src/pages/master/walletRule/blocks/ListToolbar.tsx
Normal file
55
src/pages/master/walletRule/blocks/ListToolbar.tsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { useManageProductsContext } from '../../products/hooks/useManageProductsContext';
|
||||||
|
|
||||||
|
const ListToolbar = () => {
|
||||||
|
const { table, reload } = useDataGrid();
|
||||||
|
const { handleAddDialog } = useManageProductsContext();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||||
|
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||||
|
<div className="flex justify-between w-full items-center">
|
||||||
|
<div className="flex w-[50%] gap-3 items-center">
|
||||||
|
<label className="input input-sm w-1/3">
|
||||||
|
<KeenIcon icon="magnifier" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search Products"
|
||||||
|
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||||
|
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-7.5 disabled:bg-gray-400"
|
||||||
|
// disabled={isLoading}
|
||||||
|
// onClick={handleFilterData}
|
||||||
|
>
|
||||||
|
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||||
|
<KeenIcon icon="filter" />
|
||||||
|
</Button>
|
||||||
|
</DefaultTooltip> */}
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 items-center">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-7.5 text-[0.8rem]"
|
||||||
|
onClick={() => handleAddDialog(true)}
|
||||||
|
>
|
||||||
|
Add Data
|
||||||
|
</Button>
|
||||||
|
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
||||||
|
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||||
|
<KeenIcon icon="arrows-circle" />
|
||||||
|
</Button>
|
||||||
|
</DefaultTooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ListToolbar;
|
||||||
240
src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
Normal file
240
src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
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 React, { createContext, useCallback, useMemo, useState } from 'react';
|
||||||
|
import ListToolbar from '../blocks/ListToolbar';
|
||||||
|
|
||||||
|
interface WalletRuleProps {
|
||||||
|
name: string;
|
||||||
|
id_currency: string;
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ContextProps {
|
||||||
|
walletRules: WalletRuleProps[];
|
||||||
|
showAddDialog: boolean;
|
||||||
|
handleAddDialog: (show: boolean) => void;
|
||||||
|
showEditDialog: boolean;
|
||||||
|
handleEditDialog: (show: boolean, selected_walletRule: string | null) => void;
|
||||||
|
showDeleteDialog: boolean;
|
||||||
|
handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => void;
|
||||||
|
selectedWalletRule: string | null;
|
||||||
|
getWalletRuleLists: (
|
||||||
|
limit: number,
|
||||||
|
page: number,
|
||||||
|
with_deleted: boolean,
|
||||||
|
order_field: any,
|
||||||
|
order_direction: any
|
||||||
|
) => Promise<{ data: WalletRuleProps[]; totalCount: number } | undefined>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialProps: ContextProps = {
|
||||||
|
walletRules: [],
|
||||||
|
showAddDialog: false,
|
||||||
|
handleAddDialog: (show: boolean) => {},
|
||||||
|
showEditDialog: false,
|
||||||
|
handleEditDialog: (show: boolean, selected_walletRule: string | null) => {},
|
||||||
|
showDeleteDialog: false,
|
||||||
|
handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => {},
|
||||||
|
selectedWalletRule: null,
|
||||||
|
getWalletRuleLists: async () => undefined
|
||||||
|
};
|
||||||
|
|
||||||
|
const ManageWalletRuleContext = createContext<ContextProps>(initialProps);
|
||||||
|
const API_URL_WALLET = apiConfig.service_wallet;
|
||||||
|
|
||||||
|
const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
const [walletRules, setWalletRules] = useState<WalletRuleProps[]>([]);
|
||||||
|
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||||
|
const [showEditDialog, setShowEditDialog] = useState(false);
|
||||||
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||||
|
const [selectedWalletRule, setSelectedWalletRule] = useState<string | null>(null);
|
||||||
|
const { GetData } = useCallApi();
|
||||||
|
|
||||||
|
const handleAddDialog = useCallback((show: boolean) => {
|
||||||
|
setShowAddDialog(show);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEditDialog = useCallback((show: boolean, selected_walletRule: string | null) => {
|
||||||
|
setShowEditDialog(show);
|
||||||
|
setSelectedWalletRule(show ? selected_walletRule : null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleDeleteDialog = useCallback((show: boolean, selected_walletRule: string | null) => {
|
||||||
|
setShowDeleteDialog(show);
|
||||||
|
setSelectedWalletRule(show ? selected_walletRule : null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<any>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
accessorFn: (row) => row.ID,
|
||||||
|
id: 'id',
|
||||||
|
header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
|
||||||
|
enableSorting: true,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[100px]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorFn: (row) => row.IDWallet,
|
||||||
|
id: 'name',
|
||||||
|
header: ({ column }) => <DataGridColumnHeader title="ID Wallet" column={column} />,
|
||||||
|
enableSorting: true,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[250px]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorFn: (row) => row.balance_minimum,
|
||||||
|
id: 'balance_minimum',
|
||||||
|
header: ({ column }) => <DataGridColumnHeader title="Balance Minimum" column={column} />,
|
||||||
|
enableSorting: true,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[250px]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorFn: (row) => row.balance_maximum,
|
||||||
|
id: 'balance_maximum',
|
||||||
|
header: ({ column }) => <DataGridColumnHeader title="Balance Maximum" column={column} />,
|
||||||
|
enableSorting: true,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[250px]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorFn: (row) => row.credit_limit,
|
||||||
|
id: 'credit_limit',
|
||||||
|
header: ({ column }) => <DataGridColumnHeader title="Credit Limit" column={column} />,
|
||||||
|
enableSorting: true,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[250px]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorFn: (row) => row.max_transaction_per_day,
|
||||||
|
id: 'max_transaction_per_day',
|
||||||
|
header: ({ column }) => (
|
||||||
|
<DataGridColumnHeader title="Max Transaction Per Day" column={column} />
|
||||||
|
),
|
||||||
|
enableSorting: true,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[250px]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorFn: (row) => row.monthly_limit,
|
||||||
|
id: 'monthly_limit',
|
||||||
|
header: ({ column }) => <DataGridColumnHeader title="Monthly Limit" column={column} />,
|
||||||
|
enableSorting: true,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[250px]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorFn: (row) => row.status,
|
||||||
|
id: 'status',
|
||||||
|
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
|
||||||
|
enableSorting: true,
|
||||||
|
enableHiding: false,
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[250px]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'actions',
|
||||||
|
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
|
||||||
|
enableSorting: false,
|
||||||
|
enableHiding: false,
|
||||||
|
cell: (data) => {
|
||||||
|
const row = data.row.original;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||||
|
onClick={() => handleEditDialog(true, row.id)}
|
||||||
|
>
|
||||||
|
<KeenIcon icon="notepad-edit" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||||
|
onClick={() => handleDeleteDialog(true, row.id)}
|
||||||
|
>
|
||||||
|
<KeenIcon icon="trash" />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
meta: {
|
||||||
|
headerClassName: 'w-[100px]',
|
||||||
|
cellClassName: 'text-center'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const getWalletRuleLists = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||||
|
try {
|
||||||
|
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||||
|
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
|
||||||
|
const response = await GetData(`${API_URL_WALLET}/dashboard/wallet_rule`, {
|
||||||
|
limit,
|
||||||
|
page: page + 1,
|
||||||
|
with_deleted: false,
|
||||||
|
order_field: sorting[0].id,
|
||||||
|
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
|
||||||
|
filter: JSON.stringify(filter)
|
||||||
|
});
|
||||||
|
console.log(response?.data);
|
||||||
|
setWalletRules(response?.data.list);
|
||||||
|
return { data: response?.data.list, totalCount: response?.data.total_count };
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching Wallet Rule', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ManageWalletRuleContext.Provider
|
||||||
|
value={{
|
||||||
|
walletRules: walletRules,
|
||||||
|
showAddDialog,
|
||||||
|
handleAddDialog,
|
||||||
|
showEditDialog,
|
||||||
|
handleEditDialog,
|
||||||
|
showDeleteDialog,
|
||||||
|
handleDeleteDialog,
|
||||||
|
selectedWalletRule,
|
||||||
|
getWalletRuleLists
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Toaster expand visibleToasts={9} duration={3000} />
|
||||||
|
<DataGridProvider
|
||||||
|
columns={columns}
|
||||||
|
pagination={{ size: 10 }}
|
||||||
|
toolbar={<ListToolbar />}
|
||||||
|
layout={{ card: true }}
|
||||||
|
sorting={[{ id: 'id', desc: false }]}
|
||||||
|
serverSide={true}
|
||||||
|
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||||
|
getWalletRuleLists(pageIndex, pageSize, sorting, columnFilters)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</DataGridProvider>
|
||||||
|
</ManageWalletRuleContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { ManageWalletRuleContext, ManageWalletRuleContextProvider };
|
||||||
|
export type { WalletRuleProps };
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { ManageWalletRuleContext } from './ManageWalletRuleContext';
|
||||||
|
|
||||||
|
const useManageWalletRuleContext = () => {
|
||||||
|
const context = useContext(ManageWalletRuleContext);
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error(
|
||||||
|
'useManageWalletRuleContext must be used within a ManageWalletRuleContextProvider'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useManageWalletRuleContext };
|
||||||
@ -35,6 +35,7 @@ import ProductsMaster from '@/pages/master/products/ProductsMaster';
|
|||||||
import ProviderMaster from '@/pages/master/provider/ProviderMaster';
|
import ProviderMaster from '@/pages/master/provider/ProviderMaster';
|
||||||
import Transaction from '@/pages/transaction/transaction';
|
import Transaction from '@/pages/transaction/transaction';
|
||||||
import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
|
import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
|
||||||
|
import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
|
||||||
|
|
||||||
const AppRoutingSetup = (): ReactElement => {
|
const AppRoutingSetup = (): ReactElement => {
|
||||||
return (
|
return (
|
||||||
@ -56,6 +57,7 @@ const AppRoutingSetup = (): ReactElement => {
|
|||||||
element={<PostoAdmsMaster />}
|
element={<PostoAdmsMaster />}
|
||||||
/>
|
/>
|
||||||
<Route path="/master-data/conversion" element={<ConversionMaster />} />
|
<Route path="/master-data/conversion" element={<ConversionMaster />} />
|
||||||
|
<Route path="/master-data/wallet-rule" element={<WalletRuleMaster />} />
|
||||||
|
|
||||||
<Route path="/account/home/user-profile" element={<AccountUserProfilePage />} />
|
<Route path="/account/home/user-profile" element={<AccountUserProfilePage />} />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user