Perbaikan Project PPOB

src/pages/App/DesktopLayout.js

@@ -1,65 +1,65 @@
-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 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 {
-    AlipayOutlined,
-    DatabaseOutlined,
-    FileAddOutlined,
-    FileProtectOutlined,
-    FileSyncOutlined,
-    HomeOutlined,
-    LogoutOutlined,
-    MenuOutlined,
-    PayCircleOutlined,
-    ProfileOutlined,
-    ShoppingCartOutlined,
-    UserOutlined
+  AlipayOutlined,
+  DatabaseOutlined,
+  FileAddOutlined,
+  FileProtectOutlined,
+  FileSyncOutlined,
+  HomeOutlined,
+  LogoutOutlined,
+  MenuOutlined,
+  PayCircleOutlined,
+  ProfileOutlined,
+  ShoppingCartOutlined,
+  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 { 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,
-                width: "100%",
-                height: "100%",
-                position: "relative",
-            }}
+  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",
+      }}
+    >
+      {store.ui.mediaQuery.isDesktop && (
+        <Sider
+          className={"transparent"}
+          width={240}
+          style={{
+            overflowX: "hidden",
+            bottom: 0,
+            justifyContent: "flex-start",
+            paddingTop: 20,
+            paddingLeft: 20,
+            position: "fixed",
+            top: 0,
+            zIndex: 10,
+          }}
         >
-            {store.ui.mediaQuery.isDesktop && (
-                <Sider
-                    className={"transparent"}
-                    width={240}
-                    style={{
-                        overflowX: "hidden",
-                        bottom: 0,
-                        justifyContent: "flex-start",
-                        paddingTop: 20,
-                        paddingLeft: 20,
-                        position: "fixed",
-                        top: 0,
-                        zIndex: 10,
-                    }}
-                >
           <div
             style={{
               paddingLeft: 20,
@@ -118,20 +118,23 @@ export const DesktopLayout = observer(() => {
             }}
           >
             <Menu>
-              <Menu.Item key="home">
-                <Link to={LINKS.HOME}>
-                  <HomeOutlined/>
+              {store.authentication.userData.role !== "Admin Partner" && (
+                <Menu.Item key="home">
+                  <Link to={LINKS.HOME}>
+                    <HomeOutlined />
                     <span>Beranda</span>
-                </Link>
-              </Menu.Item>
-              {store.authentication.userData.role !== "Retail" && (
-                <Menu.Item key="membership">
-                  <Link to={LINKS.MEMBERSHIP}>
-                      <FileProtectOutlined/>
-                      <span>Keanggotaan</span>
                   </Link>
                 </Menu.Item>
               )}
+              {store.authentication.userData.role !== "Retail" ||
+                (store.authentication.userData.role !== "Admin Partner" && (
+                  <Menu.Item key="membership">
+                    <Link to={LINKS.MEMBERSHIP}>
+                      <FileProtectOutlined />
+                      <span>Keanggotaan</span>
+                    </Link>
+                  </Menu.Item>
+                ))}
               {store.authentication.userData.role === "Admin" && (
                 <SubMenu
                   key="config"
@@ -141,14 +144,14 @@ export const DesktopLayout = observer(() => {
                 >
                   <Menu.Item key="partner">
                     <Link to={LINKS.PARTNER}>
-                        <HomeOutlined/>
-                        <span>Rekanan</span>
+                      <HomeOutlined />
+                      <span>Rekanan</span>
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="commision">
                     <Link to={LINKS.COMMISSION}>
-                        <HomeOutlined/>
-                        <span>Komisi</span>
+                      <HomeOutlined />
+                      <span>Komisi</span>
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="supplier">
@@ -167,23 +170,23 @@ export const DesktopLayout = observer(() => {
                 >
                   <Menu.Item key="product">
                     <Link to={LINKS.PRODUCT}>
-                        <DatabaseOutlined/>
-                        <span>Produk</span>
+                      <DatabaseOutlined />
+                      <span>Produk</span>
                     </Link>
                   </Menu.Item>
                   {store.authentication.userData.role === "Admin" && (
                     <Menu.Item key="category">
                       <Link to={LINKS.CATEGORY}>
-                          <FileAddOutlined/>
-                          <span>Kategori</span>
+                        <FileAddOutlined />
+                        <span>Kategori</span>
                       </Link>
                     </Menu.Item>
                   )}
                   {store.authentication.userData.role === "Admin" && (
                     <Menu.Item key="sub-category">
                       <Link to={LINKS.SUBCATEGORY}>
-                          <FileSyncOutlined/>
-                          <span>Sub Kategori</span>
+                        <FileSyncOutlined />
+                        <span>Sub Kategori</span>
                       </Link>
                     </Menu.Item>
                   )}
@@ -192,46 +195,49 @@ export const DesktopLayout = observer(() => {
               {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="product">
                   <Link to={LINKS.PRODUCT}>
-                      <DatabaseOutlined/>
-                      <span>Produk</span>
+                    <DatabaseOutlined />
+                    <span>Produk</span>
                   </Link>
                 </Menu.Item>
               )}
-              {store.authentication.userData.role === "Retail" && (
-                <Menu.Item key="transaction">
-                  <Link to={LINKS.TRANSACTION}>
-                      <ShoppingCartOutlined/>
+              {store.authentication.userData.role === "Retail" ||
+                (store.authentication.userData.role === "Admin Partner" && (
+                  <Menu.Item key="transaction">
+                    <Link to={LINKS.TRANSACTION}>
+                      <ShoppingCartOutlined />
                       <span>Transaksi</span>
-                  </Link>
-                </Menu.Item>
-              )}
-              <SubMenu
-                  key="payback-main"
-                  icon={<ProfileOutlined/>}
-                  title="Pembayaran"
-              >
-                {store.authentication.userData.role !== "Retail" && (
-                <Menu.Item key="payback-to-user">
-                  <Link to={LINKS.PAYBACK}>
-                      <PayCircleOutlined/>
-                      <span>Konfirmasi</span>
-                  </Link>
-                </Menu.Item>
-                )}
-                {store.authentication.userData.role !== "Admin" && (
-                <Menu.Item key="payback-from-user">
-                    <Link to={LINKS.PAYBACK_CREATED}>
-                        <AlipayOutlined/>
-                        <span>Dibuat oleh Saya</span>
                     </Link>
-                </Menu.Item>
-                )}
-              </SubMenu>
+                  </Menu.Item>
+                ))}
+              {store.authentication.userData.role !== "Admin Partner" && (
+                <SubMenu
+                  key="payback-main"
+                  icon={<ProfileOutlined />}
+                  title="Pembayaran"
+                >
+                  {store.authentication.userData.role !== "Retail" && (
+                    <Menu.Item key="payback-to-user">
+                      <Link to={LINKS.PAYBACK}>
+                        <PayCircleOutlined />
+                        <span>Konfirmasi</span>
+                      </Link>
+                    </Menu.Item>
+                  )}
+                  {store.authentication.userData.role !== "Admin" && (
+                    <Menu.Item key="payback-from-user">
+                      <Link to={LINKS.PAYBACK_CREATED}>
+                        <AlipayOutlined />
+                        <span>Dibuat oleh Saya</span>
+                      </Link>
+                    </Menu.Item>
+                  )}
+                </SubMenu>
+              )}
               {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="profile">
                   <Link to={LINKS.PROFILE}>
-                      <UserOutlined/>
-                      <span>Profil</span>
+                    <UserOutlined />
+                    <span>Profil</span>
                   </Link>
                 </Menu.Item>
               )}
@@ -354,45 +360,46 @@ export const DesktopLayout = observer(() => {
                   autoAdjustOverflow={true}
                   placement="bottomRight"
                   content={
-                      <Menu
-                          type={"line"}
-                          inlineIndent={0}
-                          theme="light"
-                          style={{
-                              backgroundColor: "transparent",
-                              borderRightWidth: 0,
-                          }}
-                          mode="inline"
+                    <Menu
+                      type={"line"}
+                      inlineIndent={0}
+                      theme="light"
+                      style={{
+                        backgroundColor: "transparent",
+                        borderRightWidth: 0,
+                      }}
+                      mode="inline"
+                    >
+                      {store.authentication.userData.role !== "Admin" && (
+                        <Menu.Item>
+                          <Link to={LINKS.PROFILE}>
+                            <UserOutlined />
+                            <span>Profile</span>
+                          </Link>
+                        </Menu.Item>
+                      )}
+                      <Menu.Item
+                        onClick={() => {
+                          store.authentication.logout();
+                          history.push("/login");
+                        }}
                       >
-                          {store.authentication.userData.role !== "Admin" && <Menu.Item>
-                              <Link to={LINKS.PROFILE}>
-                                  <UserOutlined/>
-                                  <span>Profile</span>
-                              </Link>
-                          </Menu.Item>
-                          }
-                          <Menu.Item
-                              onClick={() => {
-                                  store.authentication.logout();
-                                  history.push("/login");
-                              }}
-                          >
-                              <LogoutOutlined/>
-                              <span>Sign out</span>
-                          </Menu.Item>
-                      </Menu>
+                        <LogoutOutlined />
+                        <span>Sign out</span>
+                      </Menu.Item>
+                    </Menu>
                   }
                   title={
-                      <Text>
-                          {store.user.data.username}
-                          <Paragraph
-                              style={{fontWeight: 400, marginTop: '0.5rem'}}
-                              type={"secondary-dark"}
-                              strong
-                          >
-                              {store.authentication.userData.username}
-                          </Paragraph>
-                      </Text>
+                    <Text>
+                      {store.user.data.username}
+                      <Paragraph
+                        style={{ fontWeight: 400, marginTop: "0.5rem" }}
+                        type={"secondary-dark"}
+                        strong
+                      >
+                        {store.authentication.userData.username}
+                      </Paragraph>
+                    </Text>
                   }
                   trigger="click"
                   visible={clicked}
@@ -455,45 +462,45 @@ export const DesktopLayout = observer(() => {
                 autoAdjustOverflow={true}
                 placement="bottomRight"
                 content={
-                    <Menu
-                        type={"line"}
-                        inlineIndent={0}
-                        theme="light"
-                        style={{
-                            backgroundColor: "transparent",
-                            borderRightWidth: 0,
-                        }}
-                        mode="inline"
+                  <Menu
+                    type={"line"}
+                    inlineIndent={0}
+                    theme="light"
+                    style={{
+                      backgroundColor: "transparent",
+                      borderRightWidth: 0,
+                    }}
+                    mode="inline"
+                  >
+                    {store.authentication.userData.role !== "Admin" && (
+                      <Menu.Item key="profile">
+                        <Link to={LINKS.PROFILE}>
+                          <UserOutlined />
+                          <span>Profile</span>
+                        </Link>
+                      </Menu.Item>
+                    )}
+                    <Menu.Item
+                      key={"logout"}
+                      onClick={() => {
+                        store.authentication.logout();
+                        history.push("/login");
+                      }}
                     >
-                        {store.authentication.userData.role !== "Admin" && (
-                            <Menu.Item key="profile">
-                                <Link to={LINKS.PROFILE}>
-                                    <UserOutlined/>
-                                    <span>Profile</span>
-                                </Link>
-                            </Menu.Item>
-                        )}
-                        <Menu.Item
-                            key={"logout"}
-                            onClick={() => {
-                                store.authentication.logout();
-                                history.push("/login");
-                            }}
-                        >
-                            <LogoutOutlined/>
-                            <span>Sign out</span>
-                        </Menu.Item>
-                    </Menu>
+                      <LogoutOutlined />
+                      <span>Sign out</span>
+                    </Menu.Item>
+                  </Menu>
                 }
                 title={
                   <Text>
-                      <Paragraph
-                          style={{fontWeight: 400, marginTop: '0.5rem'}}
-                          type={"secondary-dark"}
-                          strong
-                      >
-                          {store.authentication.userData.username}
-                      </Paragraph>
+                    <Paragraph
+                      style={{ fontWeight: 400, marginTop: "0.5rem" }}
+                      type={"secondary-dark"}
+                      strong
+                    >
+                      {store.authentication.userData.username}
+                    </Paragraph>
                   </Text>
                 }
                 trigger="click"

src/pages/App/MenuList.js

@@ -1,34 +1,33 @@
-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 {
-    AppstoreOutlined,
-    DatabaseOutlined,
-    FileAddOutlined,
-    FileProtectOutlined,
-    FileSyncOutlined,
-    HomeOutlined,
-    MenuUnfoldOutlined,
-    MoneyCollectOutlined,
-    ProfileOutlined,
-    ProjectOutlined,
-    ShoppingCartOutlined,
-    UserOutlined,
+  AppstoreOutlined,
+  DatabaseOutlined,
+  FileAddOutlined,
+  FileProtectOutlined,
+  FileSyncOutlined,
+  HomeOutlined,
+  MenuUnfoldOutlined,
+  MoneyCollectOutlined,
+  ProfileOutlined,
+  ProjectOutlined,
+  ShoppingCartOutlined,
+  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(() => {
-    }, []);
+  const store = useStore();
+  useEffect(() => {}, []);
 
-    const [setKeys, setSetKeys] = useState(["dashboard"]);
+  const [setKeys, setSetKeys] = useState(["dashboard"]);
 
-    return (
+  return (
     <Menu
       defaultOpenKeys={["sub4"]}
       theme="light"
@@ -47,20 +46,23 @@ export const MenuList = observer((props) => {
       overflowedIndicator={0}
       forceSubMenuRender={true}
     >
-      <Menu.Item key="home">
-        <Link to={LINKS.HOME}>
-          <HomeOutlined />
-          <span>Beranda</span>
-        </Link>
-      </Menu.Item>
-      {store.authentication.userData.role !== "Retail" && (
-        <Menu.Item key="membership">
-          <Link to={LINKS.MEMBERSHIP}>
-            <FileProtectOutlined />
-            <span>Keanggotaan</span>
+      {store.authentication.userData.role === "Admin" && (
+        <Menu.Item key="home">
+          <Link to={LINKS.HOME}>
+            <HomeOutlined />
+            <span>Beranda</span>
           </Link>
         </Menu.Item>
       )}
+      {store.authentication.userData.role !== "Retail" &&
+        store.authentication.userData.role !== "Admin Partner" && (
+          <Menu.Item key="membership">
+            <Link to={LINKS.MEMBERSHIP}>
+              <FileProtectOutlined />
+              <span>Keanggotaan</span>
+            </Link>
+          </Menu.Item>
+        )}
       {store.authentication.userData.role === "Admin" && (
         <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
           <Menu.Item key="partner">
@@ -109,6 +111,14 @@ export const MenuList = observer((props) => {
           )}
         </SubMenu>
       )}
+      {store.authentication.userData.role === "Admin Partner" && (
+        <Menu.Item key="retail">
+          <Link to={LINKS.PRODUCT}>
+            <DatabaseOutlined />
+            <span>Produk</span>
+          </Link>
+        </Menu.Item>
+      )}
       {store.authentication.userData.role === "Supervisor" && (
         <Menu.Item key="retail">
           <Link to={LINKS.PRODUCT}>
@@ -117,37 +127,45 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role === "Retail" && (
-        <Menu.Item key="transaction">
-          <Link to={LINKS.TRANSACTION}>
-            <ShoppingCartOutlined />
-            <span>Transaksi</span>
-          </Link>
-        </Menu.Item>
-      )}
-      <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Pembayaran">
-        {store.authentication.userData.role !== "Retail" && (
-          <Menu.Item key="payback-to-user">
-            <Link to={LINKS.PAYBACK}>
-              <FileProtectOutlined/>
-                <span>Konfirmasi</span>
+      {store.authentication.userData.role === "Retail" ||
+        (store.authentication.userData.role === "Admin Partner" && (
+          <Menu.Item key="transaction">
+            <Link to={LINKS.TRANSACTION}>
+              <ShoppingCartOutlined />
+              <span>Transaksi</span>
             </Link>
           </Menu.Item>
-        )}
-        {store.authentication.userData.role !== "Admin" && (
-          <Menu.Item key="payback-from-user">
-              <Link to={LINKS.PAYBACK_CREATED}>
-                  <FileProtectOutlined/>
+        ))}
+      {store.authentication.userData.role !== "Retail" &&
+        store.authentication.userData.role !== "Admin Partner" && (
+          <SubMenu
+            key="payback-main"
+            icon={<ProfileOutlined />}
+            title="Pembayaran"
+          >
+            {store.authentication.userData.role !== "Retail" && (
+              <Menu.Item key="payback-to-user">
+                <Link to={LINKS.PAYBACK}>
+                  <FileProtectOutlined />
+                  <span>Konfirmasi</span>
+                </Link>
+              </Menu.Item>
+            )}
+            {store.authentication.userData.role !== "Admin" && (
+              <Menu.Item key="payback-from-user">
+                <Link to={LINKS.PAYBACK_CREATED}>
+                  <FileProtectOutlined />
                   <span>Dibuat oleh Saya</span>
-              </Link>
-          </Menu.Item>
+                </Link>
+              </Menu.Item>
+            )}
+          </SubMenu>
         )}
-      </SubMenu>
       {store.authentication.userData.role !== "Admin" && (
         <Menu.Item key="profile">
           <Link to={LINKS.PROFILE}>
-              <UserOutlined/>
-              <span>Profil</span>
+            <UserOutlined />
+            <span>Profil</span>
           </Link>
         </Menu.Item>
       )}