From 7ad15665cc8403be4bf9874dc81ebf82fa6b42d1 Mon Sep 17 00:00:00 2001
From: "ajat91.sudrajat" <ajat91.sudrajat@gmail.com>
Date: Tue, 28 Dec 2021 13:46:52 +0700
Subject: [PATCH] Perbaikan Project PPOB

---
 src/component/PartnerComponent.js       |  15 +-
 src/pages/App/DesktopLayout.js          | 116 ++++++++-----
 src/pages/App/MenuList.js               |  60 ++++---
 src/pages/Membership/Membership.js      |   6 +-
 src/pages/Membership/MembershipModal.js | 221 +++++++++++++-----------
 src/pages/Payback/Payback.js            |  81 ++++++++-
 6 files changed, 319 insertions(+), 180 deletions(-)

diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index d75496b..7dd2f90 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -20,6 +20,7 @@ import { ModalLoaderContext } from "../utils/modal";
 
 export const PartnerComponent = observer((props) => {
   const store = useStore();
+  const [value, setValue] = useState();
   const [form] = Form.useForm();
   const history = useHistory();
   const [idData, setIdData] = useState("");
@@ -415,9 +416,21 @@ export const PartnerComponent = observer((props) => {
                       required: true,
                       message: "Please input password phone number!",
                     },
+                {
+                  pattern: /^(?:\d*)$/,
+                  message: "Value should contain just number",
+                },
+                {
+                  pattern: /^[\d]{0,12}$/,
+                  message: "Value should be less than 12 character",
+                },
               ]}
             >
-              <Input />
+              <Input
+                onChange={(value) => {
+                  setValue(value);
+                }}
+              />
             </Form.Item>
           )}
           {!isChangePassword && (
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index cc46bbf..1921f50 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -118,23 +118,30 @@ export const DesktopLayout = observer(() => {
             }}
           >
             <Menu>
-              {store.authentication.userData.role !== "Admin Partner" && (
-                <Menu.Item key="home">
-                  <Link to={LINKS.HOME}>
-                    <HomeOutlined />
-                    <span>Beranda</span>
+              {/* {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 === "Admin" && (
+                <Menu.Item key="membership">
+                  <Link to={LINKS.MEMBERSHIP}>
+                    <FileProtectOutlined />
+                    <span>Keanggotaan</span>
+                  </Link>
+                </Menu.Item>
+              )}
+              {store.authentication.userData.role === "Supervisor" && (
+                <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"
@@ -192,7 +199,7 @@ export const DesktopLayout = observer(() => {
                   )}
                 </SubMenu>
               )}
-              {store.authentication.userData.role !== "Admin" && (
+              {store.authentication.userData.role === "Supervisor" && (
                 <Menu.Item key="product">
                   <Link to={LINKS.PRODUCT}>
                     <DatabaseOutlined />
@@ -200,39 +207,54 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
-              {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 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 Partner" && (
+                <Menu.Item key="product">
+                  <Link to={LINKS.PRODUCT}>
+                    <DatabaseOutlined />
+                    <span>Produk</span>
+                  </Link>
+                </Menu.Item>
               )}
+              {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 === "Retail" && (
+                <Menu.Item key="transaction">
+                  <Link to={LINKS.TRANSACTION}>
+                    <ShoppingCartOutlined />
+                    <span>Transaksi</span>
+                  </Link>
+                </Menu.Item>
+              )}
+              {store.authentication.userData.role !== "Admin Partner" && store.authentication.userData.role !== "Retail" && (
+                  <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}>
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index e66c3e0..126c7f3 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -15,7 +15,7 @@ import {
   SlackOutlined,
   CodepenOutlined,
   WindowsOutlined,
-  AliyunOutlined
+  AliyunOutlined,
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../utils/useStore";
@@ -48,23 +48,30 @@ 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 === "Admin" && (
-        <Menu.Item key="home">
-          <Link to={LINKS.HOME}>
-            <HomeOutlined />
-            <span>Beranda</span>
+        <Menu.Item key="membership">
+          <Link to={LINKS.MEMBERSHIP}>
+            <FileProtectOutlined />
+            <span>Keanggotaan</span>
+          </Link>
+        </Menu.Item>
+      )}
+      {store.authentication.userData.role === "Supervisor" && (
+        <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" icon={<MenuUnfoldOutlined />} title="Config">
           <Menu.Item key="partner">
@@ -129,15 +136,22 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {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 Partner" && (
+        <Menu.Item key="transaction">
+          <Link to={LINKS.TRANSACTION}>
+            <ShoppingCartOutlined />
+            <span>Transaksi</span>
+          </Link>
+        </Menu.Item>
+      )}
+      {store.authentication.userData.role === "Retail" && (
+        <Menu.Item key="transaction">
+          <Link to={LINKS.TRANSACTION}>
+            <ShoppingCartOutlined />
+            <span>Transaksi</span>
+          </Link>
+        </Menu.Item>
+      )}
       {store.authentication.userData.role !== "Retail" &&
         store.authentication.userData.role !== "Admin Partner" && (
           <SubMenu
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 5c0ad17..fd5fe25 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -104,15 +104,15 @@ export const Membership = observer(() => {
         : (response = await store.transaction.distribute(data));
 
       response?.body?.statusCode === 201
-        ? message.success("Success Top Up")
-        : message.error("Failed Top Up");
+        ? message.success("Sukses Top Up")
+        : message.error("Saldo Tidak Mencukupi");
 
       modalLoader.setLoading(false);
       await getData();
     } catch (e) {
       console.log(e, "apa errornya");
       modalLoader.setLoading(false);
-      message.error("Failed Top Up");
+      message.error("Gagal Top Up");
     }
     setConfirmLoading(false);
     setIsVisibleTopUpModal(false);
diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index 169850f..273c6cc 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -1,107 +1,122 @@
-import React from "react";
-import {Form, Input, Modal, Select} from "antd";
-import {useStore} from "../../utils/useStore";
+import React, { useState } from "react";
+import { Form, Input, Modal, Select, InputNumber } from "antd";
+import { useStore } from "../../utils/useStore";
 
 export const MembershipModal = ({
-                                    visible,
-                                    onCreate,
-                                    onCancel,
-                                    initialData,
-                                }) => {
-    const [form] = Form.useForm();
-    const {Option} = Select;
-    const store = useStore();
+  visible,
+  onCreate,
+  onCancel,
+  initialData,
+}) => {
+  const [form] = Form.useForm();
+  const { Option } = Select;
+  const store = useStore();
+  const [value, setValue] = useState();
 
-    return (
-        <Modal
-            visible={visible}
-            title={
-                initialData.isChangePassword
-                    ? "Change Member Password"
-                    : initialData.id
-                        ? "Edit Member"
-                        : "Create a new Membership"
-            }
-            okText={initialData.id ? "Edit" : "Create"}
-            cancelText="Cancel"
-            onCancel={() => {
-                form.resetFields();
-                onCancel();
-            }}
-            onOk={() => {
-                form
-                    .validateFields()
-                    .then((values) => {
-                        onCreate(values);
-                        form.resetFields();
-                    })
-                    .catch((info) => {
-                        console.log("Validate Failed:", info);
-                    });
-            }}
-        >
-            <Form
-                form={form}
-                layout="vertical"
-                name="form_in_modal"
-                initialValues={initialData}
-            >
-                {((initialData.id && !initialData.isChangePassword) ||
-                    !initialData.id) && (
-                    <Form.Item
-                        name="name"
-                        label="Name"
-                        rules={[{required: true, message: "Please input Name!"}]}
-                    >
-                        <Input/>
-                    </Form.Item>
-                )}
-                {!initialData.id && (
-                    <Form.Item
-                        name="username"
-                        label="Username"
-                        rules={[{required: true, message: "Please input Username!"}]}
-                    >
-                        <Input/>
-                    </Form.Item>
-                )}
-                {((initialData.id && initialData.isChangePassword) ||
-                    !initialData.id) && (
-                    <Form.Item
-                        name="password"
-                        label="Password"
-                        rules={[{required: false, message: "Please input password!"}]}
-                    >
-                        <Input.Password/>
-                    </Form.Item>
-                )}
-                {((initialData.id && !initialData.isChangePassword) ||
-                    !initialData.id) && (
-                    <Form.Item
-                        name="phone_number"
-                        label="Phone Number"
-                        rules={[{required: true, message: "Please input Phone Number!"}]}
-                    >
-                        <Input/>
-                    </Form.Item>
-                )}
-                {((initialData.id && !initialData.isChangePassword) ||
-                    !initialData.id) && (
-                    <Form.Item
-                        name="roleId"
-                        label="Role"
-                        rules={[{required: true, message: "Please input role id!"}]}
-                    >
-                        <Select>
-                            {store.role.data.map((item) => (
-                                <Option key={item.id} value={item.id}>
-                                    {item.name}
-                                </Option>
-                            ))}
-                        </Select>
-                    </Form.Item>
-                )}
-            </Form>
-        </Modal>
-    );
+  return (
+    <Modal
+      visible={visible}
+      title={
+        initialData.isChangePassword
+          ? "Change Member Password"
+          : initialData.id
+          ? "Edit Member"
+          : "Create a new Membership"
+      }
+      okText={initialData.id ? "Edit" : "Create"}
+      cancelText="Cancel"
+      onCancel={() => {
+        form.resetFields();
+        onCancel();
+      }}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            onCreate(values);
+            form.resetFields();
+          })
+          .catch((info) => {
+            console.log("Validate Failed:", info);
+          });
+      }}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        name="form_in_modal"
+        initialValues={initialData}
+      >
+        {((initialData.id && !initialData.isChangePassword) ||
+          !initialData.id) && (
+          <Form.Item
+            name="name"
+            label="Name"
+            rules={[{ required: true, message: "Please input Name!" }]}
+          >
+            <Input />
+          </Form.Item>
+        )}
+        {!initialData.id && (
+          <Form.Item
+            name="username"
+            label="Username"
+            rules={[{ required: true, message: "Please input Username!" }]}
+          >
+            <Input />
+          </Form.Item>
+        )}
+        {((initialData.id && initialData.isChangePassword) ||
+          !initialData.id) && (
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[{ required: false, message: "Please input password!" }]}
+          >
+            <Input.Password />
+          </Form.Item>
+        )}
+        {((initialData.id && !initialData.isChangePassword) ||
+          !initialData.id) && (
+          <Form.Item
+            name="phone_number"
+            label="Phone Number"
+            rules={[
+              { required: true, message: "Please input Phone Number!" },
+              {
+                pattern: /^(?:\d*)$/,
+                message: "Value should contain just number",
+              },
+              {
+                pattern: /^[\d]{0,12}$/,
+                message: "Value should be less than 12 character",
+              },
+            ]}
+          >
+            <Input
+              onChange={(value) => {
+                setValue(value);
+              }}
+            />
+          </Form.Item>
+        )}
+        {((initialData.id && !initialData.isChangePassword) ||
+          !initialData.id) && (
+          <Form.Item
+            name="roleId"
+            label="Role"
+            rules={[{ required: true, message: "Please input role id!" }]}
+          >
+            <Select>
+              {store.role.data.map((item) => (
+                <Option key={item.id} value={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        )}
+      </Form>
+    </Modal>
+  );
 };
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index cffe75b..7ffebc2 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -175,7 +175,7 @@ export const Payback = observer(() => {
     modalLoader.setLoading(true);
     try {
       const response = await store.payback.confirmPayback(id, type);
-      console.log(response)
+      console.log(response);
       response.body.statusCode !== 201 && response.body.statusCode !== 200
         ? message.error(
             response?.body?.message || `Failed ${capitalize(type)} Payback`
@@ -288,7 +288,79 @@ export const Payback = observer(() => {
                         title={item.name}
                         description={
                           <div style={{}}>
-                            <Image src={item.picture} preview={false} />
+                            <p>
+                              <span>{item.userData_name}</span>
+                              <br />
+                              <small>Amount: {item.amount}</small>
+                              <br />
+                              {PAYBACK_STATUS[item.status] ===
+                              PAYBACK_STATUS[0] ? (
+                                <Space size="middle">
+                                  <Button
+                                    onClick={async () => {
+                                      Modal.confirm({
+                                        title: `Are you sure Accept this submission?`,
+                                        icon: <CheckOutlined />,
+                                        okText: "Accept",
+                                        cancelText: "Cancel",
+                                        okType: "primary",
+                                        onOk() {
+                                          handleAction(item.id, "accept");
+                                        },
+                                        onCancel() {
+                                          console.log("Cancel");
+                                        },
+                                      });
+                                    }}
+                                    icon={<CheckCircleOutlined />}
+                                    style={{
+                                      backgroundColor: "#1bb91d",
+                                      color: "#fff",
+                                      borderColor: "#1bb91d",
+                                    }}
+                                  >
+                                    Accept
+                                  </Button>
+                                  <Button
+                                    onClick={async () => {
+                                      Modal.confirm({
+                                        title: `Are you sure Reject this submission?`,
+                                        icon: <StopOutlined />,
+                                        okText: "Reject",
+                                        cancelText: "Cancel",
+                                        okType: "primary",
+                                        onOk() {
+                                          handleAction(item.id, "reject");
+                                        },
+                                        onCancel() {
+                                          console.log("Cancel");
+                                        },
+                                      });
+                                    }}
+                                    icon={<CloseOutlined />}
+                                    style={{
+                                      backgroundColor: "#ff1c1c",
+                                      color: "#fff",
+                                      borderColor: "#ff1c1c",
+                                    }}
+                                  >
+                                    Reject
+                                  </Button>
+                                </Space>
+                              ) : (
+                                <Tag
+                                  color={
+                                    PAYBACK_STATUS[item.status] ===
+                                    PAYBACK_STATUS[3]
+                                      ? "cyan"
+                                      : "red"
+                                  }
+                                  style={{ color: "#4F566B" }}
+                                >
+                                  {PAYBACK_STATUS[item.status]}
+                                </Tag>
+                              )}
+                            </p>
                           </div>
                         }
                       />
@@ -299,7 +371,10 @@ export const Payback = observer(() => {
                             margin: 0,
                           }}
                         >
-                          {item.amount}
+                          <Image
+                            src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
+                            style={{ width: "10vw" }}
+                          />
                         </p>
                       </div>
                     </List.Item>