Fixing Menu

src/pages/App/DesktopLayout.js

@@ -140,6 +140,14 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
+              {store.authentication.userData.role === "Sales" && (
+                <Menu.Item key="membership">
+                  <Link to={LINKS.MEMBERSHIP}>
+                    <IdcardOutlined />
+                    <span>Keanggotaan</span>
+                  </Link>
+                </Menu.Item>
+              )}
               {store.authentication.userData.role === "Supervisor" && (
                 <Menu.Item key="membership">
                   <Link to={LINKS.MEMBERSHIP}>
@@ -221,6 +229,14 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
+              {store.authentication.userData.role === "Sales" && (
+                <Menu.Item key="product">
+                  <Link to={LINKS.PRODUCT}>
+                    <AppstoreAddOutlined />
+                    <span>Produk</span>
+                  </Link>
+                </Menu.Item>
+              )}
               {store.authentication.userData.role === "Admin Partner" && (
                 <Menu.Item key="transaction">
                   <Link to={LINKS.TRANSACTION}>
@@ -237,8 +253,7 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
-              {store.authentication.userData.role !== "Admin Partner" &&
-                store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role !== "Admin Partner" && (
                   <SubMenu
                     key="payback-main"
                     icon={<ProfileOutlined />}

src/pages/App/MenuList.js

@@ -51,14 +51,14 @@ export const MenuList = observer((props) => {
       overflowedIndicator={0}
       forceSubMenuRender={true}
     >
-      {/* {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" && (
+        <Menu.Item key="home">
+          <Link to={LINKS.HOME}>
+            <HomeOutlined />
+            <span>Beranda</span>
+          </Link>
+        </Menu.Item>
+      )}
       {store.authentication.userData.role === "Admin" && (
         <Menu.Item key="membership">
           <Link to={LINKS.MEMBERSHIP}>
@@ -75,6 +75,14 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
+      {store.authentication.userData.role === "Sales" && (
+        <Menu.Item key="membership">
+          <Link to={LINKS.MEMBERSHIP}>
+            <IdcardOutlined />
+            <span>Keanggotaan</span>
+          </Link>
+        </Menu.Item>
+      )}
       {store.authentication.userData.role === "Admin" && (
         <SubMenu key="config" icon={<SettingOutlined />} title="Config">
           <Menu.Item key="partner">
@@ -135,6 +143,14 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
+      {store.authentication.userData.role === "Sales" && (
+        <Menu.Item key="retail">
+          <Link to={LINKS.PRODUCT}>
+            <AppstoreAddOutlined />
+            <span>Produk</span>
+          </Link>
+        </Menu.Item>
+      )}
       {store.authentication.userData.role === "Supervisor" && (
         <Menu.Item key="retail">
           <Link to={LINKS.PRODUCT}>
@@ -151,31 +167,30 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role !== "Retail" &&
-        store.authentication.userData.role !== "Admin Partner" && (
-          <SubMenu
-            key="payback-main"
-            icon={<CodepenOutlined />}
-            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>
-            )}
-          </SubMenu>
-        )}
+      {store.authentication.userData.role !== "Admin Partner" && (
+        <SubMenu
+          key="payback-main"
+          icon={<CodepenOutlined />}
+          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>
+          )}
+        </SubMenu>
+      )}
       {store.authentication.userData.role !== "Admin" && (
         <Menu.Item key="profile">
           <Link to={LINKS.PROFILE}>

src/pages/Login/Login.js

@@ -1,9 +1,9 @@
 import React from "react";
-import {observer} from 'mobx-react-lite';
-import {useStore} from "../../utils/useStore";
-import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
-import {useHistory} from "react-router-dom";
-import {LINKS} from "../../routes/app";
+import { observer } from "mobx-react-lite";
+import { useStore } from "../../utils/useStore";
+import { Button, Card, Col, Form, Input, message, Row, Typography } from "antd";
+import { useHistory } from "react-router-dom";
+import { LINKS } from "../../routes/app";
 
 export const Login = observer(() => {
   const store = useStore();
@@ -23,21 +23,31 @@ export const Login = observer(() => {
       }
       message.error(e.message);
     }
-      history.push(LINKS.HOME);
-  }
+    store.authentication.userData.role === "Retail"
+      ? history.push(LINKS.TRANSACTION)
+      : history.push(LINKS.HOME);
+  };
 
   return (
-    <div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}>
-      <Row justify={'center'}>
+    <div style={{ width: "100vw", display: "flex", justifyContent: "center" }}>
+      <Row justify={"center"}>
         <Col>
-          <div style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-            marginTop: '5vh',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}>
-            <div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "flex-start",
+              marginTop: "5vh",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "stretch",
+              }}
+            >
               <Typography.Paragraph
                 style={{
                   margin: 0,
@@ -52,11 +62,11 @@ export const Login = observer(() => {
               </Typography.Paragraph>
             </div>
             <Card
-              style={{width: 320, textAlign: 'center'}}
-              headStyle={{fontSize: 13, fontWeight: 200}}
+              style={{ width: 320, textAlign: "center" }}
+              headStyle={{ fontSize: 13, fontWeight: 200 }}
               className={"shadow"}
               bordered={true}
-              title={'Sign in to your account'}
+              title={"Sign in to your account"}
             >
               <Form
                 layout={"vertical"}
@@ -64,17 +74,32 @@ export const Login = observer(() => {
                 onFinish={handleLogin}
                 className={"w-9/12"}
               >
-                <Form.Item label="Username" name="username"
-                           rules={[{required: true, message: 'Please input your username!'}]}>
-                  <Input/>
+                <Form.Item
+                  label="Username"
+                  name="username"
+                  rules={[
+                    { required: true, message: "Please input your username!" },
+                  ]}
+                >
+                  <Input />
                 </Form.Item>
-                <Form.Item label="Password" name="password"
-                           rules={[{required: true, message: 'Please input your password!'}]}>
-                  <Input.Password/>
+                <Form.Item
+                  label="Password"
+                  name="password"
+                  rules={[
+                    { required: true, message: "Please input your password!" },
+                  ]}
+                >
+                  <Input.Password />
                 </Form.Item>
                 <div className={"flex flex-row justify-between content-center"}>
-                  <Button type="primary" htmlType="submit"
-                          loading={store.authentication.isLoginLoading}>Submit</Button>
+                  <Button
+                    type="primary"
+                    htmlType="submit"
+                    loading={store.authentication.isLoginLoading}
+                  >
+                    Submit
+                  </Button>
                 </div>
               </Form>
             </Card>

src/pages/Membership/Membership.js

@@ -327,13 +327,10 @@ export const Membership = observer(() => {
                         description={
                           <div style={{}}>
                             <p>
+                              <small>Saldo System : {item.name}</small> <br />
                               <small>Role : {item.roleName}</small> <br />
                               <small>
-                                Saldo Supplier : {item.coa.amount}
-                              </small>{" "}
-                              <br />
-                              <small>
-                                Saldo System : {item.coa.amount}
+                                Saldo Supplier : {item.coa?.amount}
                               </small>{" "}
                               <br />
                               <Button