feat: add payback page

src/pages/App/DesktopLayout.js

@@ -1,32 +1,32 @@
-import React, { useState } from "react";
-import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
-import { MenuList } from "./MenuList";
-import { Link, useHistory } from "react-router-dom";
-import { HomeOutlined, MenuOutlined, UserOutlined } from "@ant-design/icons";
-import { AppRoute, LINKS } from "../../routes/app";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import { useMediaQuery } from "react-responsive";
+import React, {useState} from "react";
+import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
+import {MenuList} from "./MenuList";
+import {Link, useHistory} from "react-router-dom";
+import {HomeOutlined, MenuOutlined, UserOutlined} from "@ant-design/icons";
+import {AppRoute, LINKS} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {useMediaQuery} from "react-responsive";
 
-const { Text, Paragraph } = Typography;
-const { Header, Content, Sider } = Layout;
-const { SubMenu } = Menu;
+const {Text, Paragraph} = Typography;
+const {Header, Content, Sider} = Layout;
+const {SubMenu} = Menu;
 
 export const DesktopLayout = observer(() => {
-  let history = useHistory();
-  const xl = useMediaQuery({ minWidth: 1024 });
-  const store = useStore();
-  const [clicked, setClicked] = useState(false);
+    let history = useHistory();
+    const xl = useMediaQuery({minWidth: 1024});
+    const store = useStore();
+    const [clicked, setClicked] = useState(false);
 
-  return (
-    <Layout
-      theme={"light"}
-      className={"transparent"}
-      hasSider={store.ui.mediaQuery.isDesktop}
-      style={{
-        paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
-        display: "flex",
-        // minWidth: 1024,
+    return (
+        <Layout
+            theme={"light"}
+            className={"transparent"}
+            hasSider={store.ui.mediaQuery.isDesktop}
+            style={{
+                paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
+                display: "flex",
+                // minWidth: 1024,
         width: "100%",
         height: "100%",
         position: "relative",
@@ -138,39 +138,45 @@ export const DesktopLayout = observer(() => {
                       <span>Commision</span>
                     </Link>
                   </Menu.Item>
-                  <Menu.Item key="supplier">
-                    <Link to={LINKS.SUPPLIER}>
-                      <HomeOutlined />
-                      <span>Supplier</span>
-                    </Link>
-                  </Menu.Item>
+                    <Menu.Item key="supplier">
+                        <Link to={LINKS.SUPPLIER}>
+                            <HomeOutlined/>
+                            <span>Supplier</span>
+                        </Link>
+                    </Menu.Item>
                 </SubMenu>
               )}
-              {store.authentication.userData.role !== "Retail" && (
-                <Menu.Item key="product">
-                  <Link to={LINKS.PRODUCT}>
-                    <HomeOutlined />
-                    <span>Product</span>
-                  </Link>
+                {store.authentication.userData.role !== "Retail" && (
+                    <Menu.Item key="product">
+                        <Link to={LINKS.PRODUCT}>
+                            <HomeOutlined/>
+                            <span>Product</span>
+                        </Link>
+                    </Menu.Item>
+                )}
+                <Menu.Item key="payback">
+                    <Link to={LINKS.PAYBACK}>
+                        <HomeOutlined/>
+                        <span>Payback</span>
+                    </Link>
                 </Menu.Item>
-              )}
-              {store.authentication.userData.role === "Retail" && (
-                <Menu.Item key="transaction">
-                  <Link to={LINKS.TRANSACTION}>
-                    <HomeOutlined />
-                    <span>Transaction</span>
-                  </Link>
+                {store.authentication.userData.role === "Retail" && (
+                    <Menu.Item key="transaction">
+                        <Link to={LINKS.TRANSACTION}>
+                            <HomeOutlined/>
+                            <span>Transaction</span>
+                        </Link>
+                    </Menu.Item>
+                )}
+                <Menu.Item key="profile">
+                    <Link to={LINKS.PROFILE}>
+                        <UserOutlined/>
+                        <span>Profile</span>
+                    </Link>
                 </Menu.Item>
-              )}
-              <Menu.Item key="profile">
-                <Link to={LINKS.PROFILE}>
-                  <UserOutlined />
-                  <span>Profile</span>
-                </Link>
-              </Menu.Item>
-              <Menu.Divider
-                style={{ background: "transparent", paddingTop: 15 }}
-              />
+                <Menu.Divider
+                    style={{background: "transparent", paddingTop: 15}}
+                />
             </Menu>
           </div>
         </Drawer>

src/pages/App/MenuList.js

@@ -1,35 +1,36 @@
-import React, { useEffect, useState } from "react";
-import { Menu } from "antd";
-import { Link } from "react-router-dom";
+import React, {useEffect, useState} from "react";
+import {Menu} from "antd";
+import {Link} from "react-router-dom";
 import {
-  HomeOutlined,
-  UserOutlined,
   AppstoreOutlined,
-  MenuUnfoldOutlined,
   DatabaseOutlined,
+  FileProtectOutlined,
+  HomeOutlined,
+  MenuUnfoldOutlined,
   MoneyCollectOutlined,
   ProjectOutlined,
-  FileProtectOutlined,
+  UserOutlined,
 } from "@ant-design/icons";
-import { observer } from "mobx-react-lite";
-import { useStore } from "../../utils/useStore";
-import { LINKS } from "../../routes/app";
+import {observer} from "mobx-react-lite";
+import {useStore} from "../../utils/useStore";
+import {LINKS} from "../../routes/app";
 
-const { SubMenu } = Menu;
+const {SubMenu} = Menu;
 
 export const MenuList = observer((props) => {
   const store = useStore();
-  useEffect(() => {}, []);
+  useEffect(() => {
+  }, []);
 
   const [setKeys, setSetKeys] = useState(["dashboard"]);
 
   return (
-    <Menu
-      defaultOpenKeys={["sub4"]}
-      theme="light"
-      style={{
-        backgroundColor: "transparent",
-        borderRightWidth: 0,
+      <Menu
+          defaultOpenKeys={["sub4"]}
+          theme="light"
+          style={{
+            backgroundColor: "transparent",
+            borderRightWidth: 0,
         fontWeight: 400,
         paddingLeft: 0,
       }}
@@ -82,24 +83,30 @@ export const MenuList = observer((props) => {
           </Menu.Item>
         </SubMenu>
       )}
-      {store.authentication.userData.role !== "Retail" && (
-        <Menu.Item key="product">
-          <Link to={LINKS.PRODUCT}>
-            <DatabaseOutlined />
-            <span>Product</span>
+        {store.authentication.userData.role !== "Retail" && (
+            <Menu.Item key="product">
+              <Link to={LINKS.PRODUCT}>
+                <DatabaseOutlined/>
+                <span>Product</span>
+              </Link>
+            </Menu.Item>
+        )}
+        <Menu.Item key="payback">
+          <Link to={LINKS.PAYBACK}>
+            <DatabaseOutlined/>
+            <span>Payback</span>
           </Link>
         </Menu.Item>
-      )}
-      {store.authentication.userData.role === ("Retail" || "Admin") && (
-        <Menu.Item key="transaction">
-          <Link to={LINKS.TRANSACTION}>
-            <HomeOutlined />
-            <span>Transaction</span>
-          </Link>
-        </Menu.Item>
-      )}
-      <Menu.Item key="profile">
-        <Link to={LINKS.PROFILE}>
+        {store.authentication.userData.role === ("Retail" || "Admin") && (
+            <Menu.Item key="transaction">
+              <Link to={LINKS.TRANSACTION}>
+                <HomeOutlined/>
+                <span>Transaction</span>
+              </Link>
+            </Menu.Item>
+        )}
+        <Menu.Item key="profile">
+          <Link to={LINKS.PROFILE}>
           <UserOutlined />
           <span>Profile</span>
         </Link>