Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

src/component/PartnerComponent.js

@@ -114,7 +114,10 @@ export const PartnerComponent = observer((props) => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
-          <Button onClick={() => changeStatus(record?.id, record?.status)}>
+          <Button
+            type={record?.status === true ? "danger" : "primary"}
+            onClick={() => changeStatus(record?.id, record?.status)}
+          >
             {record?.status === true ? "Inactive" : "Active"}
           </Button>
           <Button onClick={() => handleEditButton(record)}>Edit</Button>
@@ -166,10 +169,18 @@ export const PartnerComponent = observer((props) => {
       setConfirmLoading(true);
       try {
         await store.partner.update(idData, data);
-        message.success(isChangePassword ? "Failed Change Partner Password" : "Success Update Data Partner");
+        message.success(
+          isChangePassword
+            ? "Failed Change Partner Password"
+            : "Success Update Data Partner"
+        );
         //await store.partner.getData()
       } catch (e) {
-        message.error(isChangePassword ? "Failed Change Partner Password" : "Failed Update Data Partner");
+        message.error(
+          isChangePassword
+            ? "Failed Change Partner Password"
+            : "Failed Update Data Partner"
+        );
       }
       setConfirmLoading(false);
       store.partner.visibleModalPartner = false;

src/pages/App/DesktopLayout.js

@@ -10,6 +10,8 @@ import {
   DatabaseOutlined,
   FileAddOutlined,
   FileSyncOutlined,
+  FileProtectOutlined,
+  ShoppingCartOutlined,
 } from "@ant-design/icons";
 import { AppRoute, LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -122,12 +124,12 @@ export const DesktopLayout = observer(() => {
               {store.authentication.userData.role !== "Retail" && (
                 <Menu.Item key="membership">
                   <Link to={LINKS.MEMBERSHIP}>
-                    <HomeOutlined />
+            <FileProtectOutlined />
                     <span>Membership</span>
                   </Link>
                 </Menu.Item>
               )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role === "Admin" && (
                 <SubMenu
                   key="config"
                   icon={<HomeOutlined />}
@@ -154,10 +156,10 @@ export const DesktopLayout = observer(() => {
                   </Menu.Item>
                 </SubMenu>
               )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role === "Admin" && (
                 <SubMenu
                   key="product-main"
-                  icon={<ProfileOutlined />}
+                  icon={<DatabaseOutlined />}
                   title="Product"
                 >
                   <Menu.Item key="product">
@@ -180,28 +182,28 @@ export const DesktopLayout = observer(() => {
                   </Menu.Item>
                 </SubMenu>
               )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="product">
                   <Link to={LINKS.PRODUCT}>
-                    <HomeOutlined />
+                    <DatabaseOutlined />
                     <span>Product</span>
                   </Link>
                 </Menu.Item>
               )}
+              {store.authentication.userData.role === "Retail" && (
+                <Menu.Item key="transaction">
+                  <Link to={LINKS.TRANSACTION}>
+                    <ShoppingCartOutlined />
+                    <span>Transaction</span>
+                  </Link>
+                </Menu.Item>
+              )}
               <Menu.Item key="payback">
                 <Link to={LINKS.PAYBACK}>
-                  <HomeOutlined />
+                  <DatabaseOutlined />
                   <span>Payback</span>
                 </Link>
               </Menu.Item>
-              {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 />

src/pages/App/MenuList.js

@@ -12,6 +12,7 @@ import {
   MoneyCollectOutlined,
   ProfileOutlined,
   ProjectOutlined,
+  ShoppingCartOutlined,
   UserOutlined,
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
@@ -59,7 +60,7 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role !== "Retail" && (
+      {store.authentication.userData.role === "Admin" && (
         <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
@@ -81,7 +82,7 @@ export const MenuList = observer((props) => {
           </Menu.Item>
         </SubMenu>
       )}
-      {store.authentication.userData.role !== "Retail" && (
+      {store.authentication.userData.role === "Admin" && (
         <SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
           <Menu.Item key="product">
             <Link to={LINKS.PRODUCT}>
@@ -103,10 +104,18 @@ export const MenuList = observer((props) => {
           </Menu.Item>
         </SubMenu>
       )}
-      {store.authentication.userData.role === ("Retail" || "Admin") && (
+      {store.authentication.userData.role !== "Admin" && (
+        <Menu.Item key="retail">
+          <Link to={LINKS.PRODUCT}>
+            <DatabaseOutlined />
+            <span>Product</span>
+          </Link>
+        </Menu.Item>
+      )}
+      {store.authentication.userData.role === "Retail" && (
         <Menu.Item key="transaction">
           <Link to={LINKS.TRANSACTION}>
-            <HomeOutlined />
+            <ShoppingCartOutlined />
             <span>Transaction</span>
           </Link>
         </Menu.Item>
@@ -117,14 +126,6 @@ export const MenuList = observer((props) => {
           <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}>
           <UserOutlined />

src/pages/Membership/Membership.js

@@ -33,6 +33,8 @@ export const Membership = observer(() => {
   const [form] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
+  const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
+  const [destination, setDestination] = useState(null);
   const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -43,6 +45,8 @@ export const Membership = observer(() => {
         setIsLoading(true);
         await getData();
         store.role.getData();
+        if (store.authentication.userData.role === "Admin")
+          await store.supplier.getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -53,10 +57,10 @@ export const Membership = observer(() => {
   }, []);
 
   const getData = () => {
-    (store.authentication.userData.role === "Admin")
+    store.authentication.userData.role === "Admin"
       ? store.membership.getData()
       : store.membership.getDataBySuperior();
-  }
+  };
 
   const changeStatus = async (id, isActive) => {
     const status = isActive ? "inactive" : "active";
@@ -76,13 +80,17 @@ export const Membership = observer(() => {
     }
   };
   const handleCancelTransaction = () => {
-    store.supplier.visibleModalTransaction = false;
+    setIsVisibleTopUpModal(false);
+    setDestination(null);
   };
   const handleSubmitTransaction = async (data) => {
-    console.log(data, "isi data2");
     setConfirmLoading(true);
     try {
-      await store.supplier.createTransaction(data);
+      data.destination = destination;
+
+      (await store.authentication.userData.role) === "Admin"
+        ? store.transaction.distributeAdmin(data)
+        : store.transaction.distribute(data);
       message.success("Success Top Up");
       //await store.supplier.getData()
     } catch (e) {
@@ -90,8 +98,9 @@ export const Membership = observer(() => {
       message.error("Failed Top Up");
     }
     setConfirmLoading(false);
-    store.supplier.visibleModalTransaction = false;
+    setIsVisibleTopUpModal(false);
     form.resetFields();
+    setDestination(null);
   };
 
   const columns = [
@@ -128,9 +137,20 @@ export const Membership = observer(() => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
-          <Button onClick={() => changeStatus(record?.id, record?.isActive)}>
+          <Button
+            type={record?.status === true ? "danger" : "primary"}
+            onClick={() => changeStatus(record?.id, record?.isActive)}
+          >
             {record?.isActive === true ? "Inactive" : "Active"}
           </Button>
+          <Button
+            onClick={() => {
+              setDestination(record?.user_detail?.id);
+              setIsVisibleTopUpModal(true);
+            }}
+          >
+            <DownloadOutlined /> Top Up Saldo
+          </Button>
           <Button
             onClick={() => {
               let record2 = record;
@@ -248,20 +268,15 @@ export const Membership = observer(() => {
   };
   return (
     <div className={["ppob-container"].join(" ")}>
-      {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal> */}
       <BreadcumbComponent data={routeData} />
       <Card>
         <div>
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
-              <Button>
+              {/* <Button>
                 <FilterOutlined />
                 Filter
-              </Button>
+              </Button> */}
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
               <Search
@@ -282,19 +297,6 @@ export const Membership = observer(() => {
               </Button>
             </Col>
           </Row>
-          <Col
-            span={24}
-            style={{
-              textAlign: "right",
-              marginBottom: store.ui.mediaQuery.isMobile ? 30 : 10,
-            }}
-          >
-            <Button
-              onClick={() => (store.supplier.visibleModalTransaction = true)}
-            >
-              <DownloadOutlined /> Top Up Saldo
-            </Button>
-          </Col>
           {store.ui.mediaQuery.isDesktop && (
             <Table
               key="1"
@@ -383,7 +385,7 @@ export const Membership = observer(() => {
         </div>
       </Card>
       <Modal
-        visible={store.supplier.visibleModalTransaction}
+        visible={isVisibleTopUpModal}
         title="Top Up Saldo"
         okText="Top Up"
         cancelText="Cancel"
@@ -405,6 +407,7 @@ export const Membership = observer(() => {
         }}
       >
         <Form form={form} layout="vertical">
+          {store.authentication.userData.role === "Admin" && (
             <Form.Item
               name="supplier"
               label="Supplier"
@@ -418,6 +421,7 @@ export const Membership = observer(() => {
                 ))}
               </Select>
             </Form.Item>
+          )}
           <Form.Item
             name="amount"
             label="Amount"

src/pages/Payback/Payback.js

@@ -1,8 +1,25 @@
 import React, { useState } from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Image,
+  Input,
+  List,
+  message,
+  Row,
+  Space,
+  Table,
+} from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import {CheckCircleOutlined, CloseOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import {
+  CheckCircleOutlined,
+  CloseOutlined,
+  FilterOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
 import { PaybackModal } from "./PaybackModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
@@ -32,34 +49,38 @@ export const Payback = observer(() => {
 
   const dummyData = [
     {
-            key: '1',
+      key: "1",
       id: 1,
       name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
       amount: "Rp. 1.000.000",
     },
     {
-            key: '2',
+      key: "2",
       id: 1,
       name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
       amount: "Rp. 1.000.000",
     },
     {
-            key: '3',
+      key: "3",
       id: 1,
       name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
       amount: "Rp. 1.000.000",
     },
     {
-            key: '4',
+      key: "4",
       id: 1,
       name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
       amount: "Rp. 1.000.000",
     },
-    ]
+  ];
 
   const columns = [
     {
@@ -93,7 +114,7 @@ export const Payback = observer(() => {
         <Space size="middle">
           <Button
             onClick={async () => {
-                            await handleAction(record, 'accept');
+              await handleAction(record, "accept");
             }}
             icon={<CheckCircleOutlined />}
             style={{
@@ -106,7 +127,7 @@ export const Payback = observer(() => {
           </Button>
           <Button
             onClick={async () => {
-                            await handleAction(record, 'reject');
+              await handleAction(record, "reject");
             }}
             icon={<CloseOutlined />}
             style={{
@@ -122,6 +143,8 @@ export const Payback = observer(() => {
     },
   ];
 
+  if(store.authentication.userData.role === "Retail") columns.pop();
+
   const routeData = [
     {
       route: LINKS.HOME,
@@ -147,17 +170,10 @@ export const Payback = observer(() => {
     setVisibleModal(false);
   };
 
-    const handleAction = async (record, type) => {
-
-    };
+  const handleAction = async (record, type) => {};
 
   return (
     <div className={["ppob-container"].join(" ")}>
-            {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal> */}
       <BreadcumbComponent data={routeData} />
       <Card>
         <div>
@@ -177,6 +193,7 @@ export const Payback = observer(() => {
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
               />
+              {store.authentication.userData.role !== "Admin" && (
                 <Button
                   onClick={() => {
                     setInitialData({});
@@ -185,6 +202,7 @@ export const Payback = observer(() => {
                 >
                   <PlusSquareOutlined /> New
                 </Button>
+              )}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (

src/pages/Profile/Profile.js

@@ -50,13 +50,23 @@ export const Profile = observer(() => {
         },
     ]
 
+    const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+        display: "flex",
+        justifyContent: "center"
+    } : {fontSize: "0.75rem"};
+    const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+        fontSize: '1.25rem',
+        display: "flex",
+        justifyContent: "center"
+    } : null;
+
     return (
         <div className={["ppob-container"].join(" ")}>
             <BreadcumbComponent data={routeData}/>
             <Card>
                 <Title strong>Profile</Title>
                 <Row style={{marginBottom: 20}}>
-                    <Col span={12}>
+                    <Col lg={12} xs={24}>
                         <Row>
                             <Col span={12}>
                                 <Text strong>Name</Text>
@@ -90,11 +100,15 @@ export const Profile = observer(() => {
                             </Col>
                         </Row>
                     </Col>
-                    <Col span={12}>
-                        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
-                            <Title strong level={3}>Saldo</Title>
-                            <Text style={{fontSize: '1.25rem'}}>{store.authentication.profileData?.wallet}</Text>
-                        </div>
+                    <Col lg={12} xs={24}>
+                        <Row justify={"center"}>
+                            <Col lg={24} xs={12}>
+                                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+                            </Col>
+                            <Col lg={24} xs={12}>
+                                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+                            </Col>
+                        </Row>
                     </Col>
                 </Row>
                 <Row>

src/store/transaction.js

@@ -76,6 +76,16 @@ export class Transaction {
         await this.getData();
         return response;
     }
+
+    async distribute(data) {
+        const response = await http.post('/transaction/distribute').send(data);
+        return response;
+    }
+
+    async distributeAdmin(data) {
+        const response = await http.post('/transaction/distribute-admin').send(data);
+        return response;
+    }
 }