Page Category

src/pages/App/MenuList.js

@@ -1,38 +1,40 @@
-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,
   FileAddOutlined,
   FileSyncOutlined,
-  ProfileOutlined
+  ProfileOutlined,
+  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,
       }}
@@ -116,11 +118,31 @@ export const MenuList = observer((props) => {
           <Link to={LINKS.TRANSACTION}>
             <HomeOutlined />
             <span>Transaction</span>
+            </Link>
+        {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>
-      )}
-      <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>
@@ -132,6 +154,6 @@ export const MenuList = observer((props) => {
       {/*	</Link>*/}
       {/*</Menu.Item>*/}
       <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
-    </Menu>
+    </Menu.Item>
   );
 });