Update

package.json

@@ -1,7 +1,7 @@
 {
   "name": "budgoose",
   "private": true,
-  "version": "0.1.9",
+  "version": "0.1.10",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,6 +17,8 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.1.1",
+    "echarts": "^5.5.1",
+    "echarts-for-react": "^3.0.2",
     "framer-motion": "^10.15.1",
     "js-cookie": "^3.0.5",
     "moment": "^2.30.1",

src/App.jsx

@@ -1,11 +1,9 @@
-import {motion, useAnimate} from "framer-motion";
 import './App.css'
 import {
 	createBrowserRouter,
 	RouterProvider,
 } from "react-router-dom";
-import {Button, Card} from "@nextui-org/react";
-import {Fragment, useEffect} from "react";
+import {useEffect} from "react";
 import {Toaster} from "react-hot-toast";
 import Welcome from "./pages/welcomePage/Welcome.jsx";
 import Cookies from "js-cookie";
@@ -15,6 +13,9 @@ import HolderPage from "./pages/HolderPage.jsx";
 import Auth from "./components/auth/Auth.jsx";
 import Test from "./pages/testPage/Test.jsx";
 import ErrorBoundary from "./pages/errorPage/ErrorBoundary.jsx";
+import WalletPage from "./pages/WalletPage.jsx";
+import TransferPage from "./pages/TransferPage.jsx";
+import DashboardPage from "./pages/DashboardPage.jsx";
 
 const router = createBrowserRouter([
 	{
@@ -26,12 +27,24 @@ const router = createBrowserRouter([
 		element: <Auth><MainLayout/></Auth>,
 		children: [
 			{
-				path: "/transaction",
+				path: "/dashboard",
+				element: <DashboardPage/>,
+			},
+			{
+				path: "/loan",
 				element: <TransactionPage/>,
 			},
 			{
 				path: "/holder",
 				element: <HolderPage/>,
+			},
+			{
+				path: "/wallet",
+				element: <WalletPage/>,
+			},
+			{
+				path: "/transfer",
+				element: <TransferPage/>,
 			}
 		]
 	},

src/components/auth/Auth.jsx

@@ -12,7 +12,7 @@ const Auth = ({children}) => {
 
         if (info === undefined) {
             Cookie.remove('info', {path: '/', domain: import.meta.env.VITE_DOMAIN_COOKIE});
-            navigate('/login');
+            navigate('/');
         }
 
         document.title = 'Budgoose | AdonisGM';

src/components/customInput/InputSelectWallet.jsx

@@ -1,24 +1,23 @@
 import {useEffect, useState} from "react";
 import callApi from "../../apis/GatewayApi.js";
 import InputAutocomplete from "./core/InputAutocomplete.jsx";
-import PropTypes from "prop-types";
 
-const InputSelectHolder = (props) => {
+const InputSelectWallet = (props) => {
 	const [holders, setHolders] = useState([])
 	const [isLoading, setIsLoading] = useState(true)
 
 	useEffect(() => {
-		getHolders()
+		getWallets()
 	}, []);
 
-	const getHolders = () => {
+	const getWallets = () => {
 		setHolders([])
 
-		callApi('pkg_bud_holder.get_all', {}, (data) => {
+		callApi('pkg_bud_wallet.get_all', {}, (data) => {
 			setHolders(data.map((e) => {
 				return {
-					value: e.PK_BUD_HOLDER,
-					label: e.C_HOLDER_NAME
+					value: e.PK_BUD_WALLET,
+					label: e.C_NAME
 				}
 			}))
 
@@ -33,4 +32,4 @@ const InputSelectHolder = (props) => {
 	/>
 }
 
-export default InputSelectHolder;
+export default InputSelectWallet;

src/components/customInput/InputSwitch.jsx

@@ -0,0 +1,32 @@
+import {useController} from "react-hook-form";
+import {Switch} from "@nextui-org/react";
+
+const InputSwitch = (props) => {
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty , error},
+        formState: { touchedFields, dirtyFields }
+    } = useController({
+        name: props.name,
+        control: props.control,
+        rules: props.rules,
+    });
+
+    return (
+        <Switch
+            isSelected={field.value}
+            isDisabled={props.isDisabled}
+
+            onValueChange={field.onChange}
+            onBlur={field.onBlur}
+            value={field.value}
+            ref={field.ref}
+
+            size={'sm'}
+        >
+            {props.label}
+        </Switch>
+    )
+}
+
+export default InputSwitch;

src/components/renderCash/RenderCash.jsx

@@ -0,0 +1,17 @@
+import {useDispatch, useSelector} from "react-redux";
+import {formatNumber} from "../../common/common.js";
+import {change} from '../../redux/slice/hideAmount.js'
+
+const RenderCash = (props) => {
+    const hideAmount = useSelector((state) => state.hideAmount.value)
+    const dispatch = useDispatch()
+
+    return <span
+        onClick={() => dispatch(change())}
+        className={'font-mono cursor-pointer'}
+    >
+        {hideAmount ? '**,***,***' : formatNumber(props.cash)}
+    </span>
+}
+
+export default RenderCash;

src/layout/Navbar.jsx

@@ -1,14 +1,32 @@
 import {Card, CardBody} from "@nextui-org/react";
 import NavbarItem from "./NavbarItem.jsx";
-import {IconTrendingUp, IconUsers} from "@tabler/icons-react";
+import {IconLayoutDashboard, IconTransformFilled, IconTrendingUp, IconUsers, IconWallet} from "@tabler/icons-react";
 import {NavLink} from "react-router-dom";
 
 const listNavbarItem = [
 	{
-		name: "Transaction",
+		name: "Dashboard",
+		icon: IconLayoutDashboard,
+		color: 'green',
+		url: '/dashboard',
+	},
+	{
+		name: "Wallet",
+		icon: IconWallet,
+		color: 'fuchsia',
+		url: '/wallet',
+	},
+	{
+		name: "Transfer",
+		icon: IconTransformFilled,
+		color: 'blue',
+		url: '/transfer',
+	},
+	{
+		name: "Loan",
 		icon: IconTrendingUp,
 		color: 'sky',
-		url: '/transaction',
+		url: '/loan',
 	},
 	{
 		name: "Holder",

src/layout/NavbarItem.jsx

@@ -18,6 +18,21 @@ const configColor = {
 		backgroundColor: 'bg-orange-200',
 		backgroundColor1: 'bg-orange-100',
 	},
+	green: {
+		textColor: 'text-green-600',
+		backgroundColor: 'bg-green-200',
+		backgroundColor1: 'bg-green-100',
+	},
+	fuchsia: {
+		textColor: 'text-fuchsia-600',
+		backgroundColor: 'bg-fuchsia-200',
+		backgroundColor1: 'bg-fuchsia-100',
+	},
+	blue: {
+		textColor: 'text-blue-600',
+		backgroundColor: 'bg-blue-200',
+		backgroundColor1: 'bg-blue-100',
+	},
 	default: {
 		textColor: 'text-slate-600',
 		backgroundColor: 'bg-slate-200',

src/pages/DashboardPage.jsx

@@ -0,0 +1,12 @@
+import {useEffect} from "react";
+import Dashboard from "./dashboardPage/Dashboard.jsx";
+
+const DashboardPage = () => {
+    useEffect(() => {
+        document.title = "Dashboard | AdonisGM";
+    }, []);
+
+    return <div className={'container mx-auto'}><Dashboard/></div>
+}
+
+export default DashboardPage

src/pages/HolderPage.jsx

@@ -6,7 +6,7 @@ const TransactionPage = () => {
 		document.title = "Holder | AdonisGM";
 	}, []);
 
-	return <Holder/>
+	return <div className={'container mx-auto'}><Holder/></div>
 }
 
 export default TransactionPage

src/pages/TransactionPage.jsx

@@ -6,7 +6,7 @@ const TransactionPage = () => {
 		document.title = "Transaction | AdonisGM";
 	}, []);
 
-	return <Transaction/>
+	return <div className={'container mx-auto'}><Transaction/></div>
 }
 
 export default TransactionPage

src/pages/TransferPage.jsx

@@ -0,0 +1,14 @@
+import {useEffect} from "react";
+import Transfer from "./transferPage/Transfer.jsx";
+
+const TransferPage = () => {
+    useEffect(() => {
+        document.title = "Transfer | AdonisGM";
+    }, []);
+
+    return <div className={'container mx-auto'}>
+        <Transfer/>
+    </div>
+}
+
+export default TransferPage

src/pages/WalletPage.jsx

@@ -0,0 +1,12 @@
+import {useEffect} from "react";
+import Wallet from "./walletPage/Wallet.jsx";
+
+const WalletPage = () => {
+    useEffect(() => {
+        document.title = "Wallet | AdonisGM";
+    }, []);
+
+    return <div className={'container mx-auto'}><Wallet/></div>
+}
+
+export default WalletPage