Merge branch 'develop' into 'devops-staging'

Perbaikan Project PPOB

See merge request empatnusabangsa/ppob/ppob-frontend!67

src/pages/Membership/DetailUser.js

@@ -252,6 +252,17 @@ export const DetailUser = observer(() => {
     },
   ];
 
+  const dataRoute = [
+    {
+      route: LINKS.MEMBERSHIP,
+      name: "Keanggotaan"
+    },
+    {
+      route: LINKS.USER_DETAIL.replace(":id", id),
+      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
+    },
+  ];
+
   const styleSaldoTitle = store.ui.mediaQuery.isDesktop
     ? {
         display: "flex",
@@ -275,21 +286,22 @@ export const DetailUser = observer(() => {
     store.authentication.dataProfit.userDetail?.image_identity,
     "detail"
   );
-  console.log(
+  console.log(store.authentication.listImage, "detail gambar");
-    store.authentication.listImage,
-    "detail gambar"
-  );
   return (
     <div className={[""].join(" ")}>
-      <BreadcumbComponent data={routeData} />
+      <BreadcumbComponent
+        data={
+          store.authentication.userData.role === "Admin" ? routeData : dataRoute
+        }
+      />
       <Card>
         <Row style={{ marginBottom: 10 }}>
           <Title strong level={2}>
             Detail User
           </Title>
 
-            {store.authentication.userData.role === "Admin" && (
+          {store.authentication.userData.role === "Admin" && (
-               <Col lg={18} xs={18} style={{ textAlign: "right" }}>
+            <Col lg={18} xs={18} style={{ textAlign: "right" }}>
               <Space
                 size="middle"
                 align={"center"}
@@ -338,7 +350,8 @@ export const DetailUser = observer(() => {
                       store.membership.dataDetail.userDetail.image_identity
                     );
                     console.log(
-                      store.membership.dataDetail.userDetail.image_store,"ini store"
+                      store.membership.dataDetail.userDetail.image_store,
+                      "ini store"
                     );
                     console.log(store.membership.dataDetail.username);
                     setVisibleModal(true);
@@ -373,10 +386,10 @@ export const DetailUser = observer(() => {
                   Withdraw Profit
                 </Button>
               </Space>
-              </Col>
+            </Col>
-            )}
+          )}
-            {store.authentication.userData.role === "Supervisor" && (
+          {store.authentication.userData.role === "Supervisor" && (
-               <Col lg={16} xs={16} style={{ textAlign: "right" }}>
+            <Col lg={16} xs={16} style={{ textAlign: "right" }}>
               <Space
                 size="middle"
                 align={"center"}
@@ -447,10 +460,10 @@ export const DetailUser = observer(() => {
                   Ganti Password
                 </Button>
               </Space>
-              </Col>
+            </Col>
-            )}
+          )}
-            {store.authentication.userData.role === "Sales" && (
+          {store.authentication.userData.role === "Sales" && (
-               <Col lg={16} xs={16} style={{ textAlign: "right" }}>
+            <Col lg={16} xs={16} style={{ textAlign: "right" }}>
               <Space
                 size="middle"
                 align={"center"}
@@ -521,9 +534,8 @@ export const DetailUser = observer(() => {
                   Ganti Password
                 </Button>
               </Space>
-              </Col>
+            </Col>
-            )}
+          )}
-          
         </Row>
 
         <Row style={{ marginBottom: 20 }}>
@@ -641,7 +653,7 @@ export const DetailUser = observer(() => {
                                 ? `${appConfig.apiUrl}/config/image/${item}`
                                 : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                             }
-                            style={{ width: "10vw",marginRight:15 }}
+                            style={{ width: "10vw", marginRight: 15 }}
                           />
                         ))}
                       </Row>
@@ -679,7 +691,7 @@ export const DetailUser = observer(() => {
                                 ? `${appConfig.apiUrl}/config/image/${item}`
                                 : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                             }
-                            style={{ width: "10vw",marginRight:15 }}
+                            style={{ width: "10vw", marginRight: 15 }}
                           />
                         ))}
                       </Row>

src/pages/Membership/Membership.js

@@ -30,7 +30,6 @@ import { LINKS } from "../../routes/app";
 import { useHistory } from "react-router-dom";
 import { ModalLoaderContext } from "../../utils/modal";
 
-
 export const Membership = observer(() => {
   const history = useHistory();
   const { Option } = Select;
@@ -253,12 +252,19 @@ export const Membership = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
     },
   ];
+
+  const dataRoute = [
+    {
+      route: LINKS.MEMBERSHIP,
+      name: "Keanggotaan"
+    },
+  ];
   const onSubmit = async (data, image, imageStore) => {
     data.superior = true;
-    console.log(imageStore, "Apa imageStore")
+    console.log(imageStore, "Apa imageStore");
 
-    if(!imageStore){
+    if (!imageStore) {
-      imageStore = []
+      imageStore = [];
     }
 
     if (initialData.id) {
@@ -325,7 +331,11 @@ export const Membership = observer(() => {
   };
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} />
+      <BreadcumbComponent
+        data={
+          store.authentication.userData.role === "Admin" ? routeData : dataRoute
+        }
+      />
       <Card>
         <div>
           <Row style={{ marginBottom: 20 }}>
@@ -399,7 +409,7 @@ export const Membership = observer(() => {
               pagination={{
                 onChange: async (page, pageSize) => {
                   store.membership.pageSize = pageSize;
-                  store.membership.page = page -1;
+                  store.membership.page = page - 1;
                   modalLoader.setLoading(true);
                   await getData();
                   modalLoader.setLoading(false);
@@ -442,7 +452,7 @@ export const Membership = observer(() => {
                               <small>Role : {item.roles?.name}</small> <br />
                               <small>Saldo : {item.coa?.amount}</small> <br />
                               <Button
-                                style={{ marginRight: 10,marginTop:7 }}
+                                style={{ marginRight: 10, marginTop: 7 }}
                                 onClick={() => {
                                   setDestination(item?.id);
                                   console.log(item?.id);

src/pages/Payback/Payback.js

@@ -182,6 +182,13 @@ export const Payback = observer(() => {
     },
   ];
 
+  const dataRoute = [
+    {
+      route: LINKS.PAYBACK,
+      name: "Konfirmasi Pembayaran"
+    },
+  ];
+
   const handleAction = async (id, type) => {
     modalLoader.setLoading(true);
     try {
@@ -222,7 +229,7 @@ export const Payback = observer(() => {
     store.payback.visibleModalFilterPayback = false;
   };
 
-  const handleCancelFilter = async() => {
+  const handleCancelFilter = async () => {
     //setFilterMembership([]);
     //form.resetFields();
     store.payback.filterMembership = null;
@@ -236,8 +243,12 @@ export const Payback = observer(() => {
     const data = form.getFieldsValue();
     //console.log(data);
     store.payback.filterMembership = filterMembership;
-    store.payback.filterStart = data.start_date ? (moment(data.start_date).format('YYYY-MM-DD') + ' 00:00:00') : null;
+    store.payback.filterStart = data.start_date
-    store.payback.filterEnd = data.end_date ? (moment(data.end_date).format('YYYY-MM-DD') + ' 23:59:59') : null;
+      ? moment(data.start_date).format("YYYY-MM-DD") + " 00:00:00"
+      : null;
+    store.payback.filterEnd = data.end_date
+      ? moment(data.end_date).format("YYYY-MM-DD") + " 23:59:59"
+      : null;
     modalLoader.setLoading(true);
     await store.payback.getDataConfirmation();
     modalLoader.setLoading(false);
@@ -281,7 +292,11 @@ export const Payback = observer(() => {
   ];
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} />
+      <BreadcumbComponent
+        data={
+          store.authentication.userData.role === "Admin" ? routeData : dataRoute
+        }
+      />
       <Card>
         <div>
           <Row style={{ marginBottom: 20 }}>
@@ -470,7 +485,7 @@ export const Payback = observer(() => {
         visible={store.payback.visibleModalFilterPayback}
         title={"Filter"}
         footer={footerLayoutFilter}
-        onCancel={async() => {
+        onCancel={async () => {
           //form.resetFields();
           //setFilterMembership([]);
           store.payback.filterMembership = null;

src/pages/Payback/PaybackCreated.js

@@ -133,6 +133,14 @@ export const PaybackCreated = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Buat Pembayaran</span>,
     },
   ];
+
+  const dataRoute = [
+    {
+      route: LINKS.PAYBACK_CREATED,
+      name: "Buat Pembayaran"
+    },
+  ];
+
   const handleRemoveFilter = async () => {
     store.payback.filterStart = null;
     store.payback.filterEnd = null;
@@ -209,7 +217,11 @@ export const PaybackCreated = observer(() => {
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} />
+      <BreadcumbComponent
+        data={
+          store.authentication.userData.role === "Admin" ? routeData : dataRoute
+        }
+      />
       <Card>
         <div>
           <Row style={{ marginBottom: 20 }}>
@@ -307,36 +319,35 @@ export const PaybackCreated = observer(() => {
                         className={[""].join(" ")}
                         title={item.name}
                         description={
-                          <div style={{marginBottom:10}}>
+                          <div style={{ marginBottom: 10 }}>
                             <small>Amount: {item.amount}</small>
-                            <br/>
+                            <br />
-                            <div style={{marginTop:5}}>
+                            <div style={{ marginTop: 5 }}>
-                            <small>Status  : </small>
+                              <small>Status : </small>
-                            <Tag
+                              <Tag
-                              color={
+                                color={
-                                item.status === 0
+                                  item.status === 0
-                                  ? "purple"
+                                    ? "purple"
+                                    : item.status === 1
+                                    ? "blue"
+                                    : item.status === 2
+                                    ? "warning"
+                                    : item.status === 3
+                                    ? "success"
+                                    : "red"
+                                }
+                              >
+                                {item.status === 0
+                                  ? "Pending"
                                   : item.status === 1
-                                  ? "blue"
+                                  ? "Success"
                                   : item.status === 2
-                                  ? "warning"
+                                  ? "Failed"
                                   : item.status === 3
-                                  ? "success"
+                                  ? "Approved"
-                                  : "red"
+                                  : "Rejected"}
-                              }
+                              </Tag>
-                            >
-                              {item.status === 0
-                                ? "Pending"
-                                : item.status === 1
-                                ? "Success"
-                                : item.status === 2
-                                ? "Failed"
-                                : item.status === 3
-                                ? "Approved"
-                                : "Rejected"}
-                            </Tag>
                             </div>
-                            
                           </div>
                         }
                       />

src/pages/Product/Product.js

@@ -1,15 +1,30 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, { useContext, useEffect, useState } from "react";
-import {Button, Card, Col, Form, Input, message, Modal, Row, Select, Upload} from "antd";
+import {
-import {FilterOutlined, PlusOutlined, UploadOutlined,} from "@ant-design/icons";
+  Button,
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+  Card,
-import {useStore} from "../../utils/useStore";
+  Col,
-import {observer} from "mobx-react-lite";
+  Form,
-import {ProductComponent} from "../../component/ProductComponent";
+  Input,
-import {LINKS} from "../../routes/app";
+  message,
-import {ModalLoaderContext} from "../../utils/modal";
+  Modal,
+  Row,
+  Select,
+  Upload,
+} from "antd";
+import {
+  FilterOutlined,
+  PlusOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { ProductComponent } from "../../component/ProductComponent";
+import { LINKS } from "../../routes/app";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
+const { Search } = Input;
-const {Option} = Select;
+const { Option } = Select;
 
 export const Product = observer(() => {
   const store = useStore();
@@ -30,7 +45,7 @@ export const Product = observer(() => {
           store.supplier.getData(),
           store.category.getData(),
           store.product.getDataSubCategories(),
-          store.product.getProductPartner()
+          store.product.getProductPartner(),
         ]);
         await store.product.getData();
         modalLoader.setLoading(false);
@@ -58,18 +73,26 @@ export const Product = observer(() => {
     },
     {
       route: LINKS.PRODUCT,
-      name: <span style={{fontWeight: "bold"}}>Produk</span>,
+      name: <span style={{ fontWeight: "bold" }}>Produk</span>,
+    },
+  ];
+
+  const dataRoute = [
+    {
+      route: LINKS.PRODUCT,
+      name: "Produk",
     },
   ];
 
   const beforeUpload = (file) => {
     let isLt2M;
     let allowedFile = [
-      "text/csv", "application/csv",
+      "text/csv",
+      "application/csv",
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
       "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
       "application/vnd.ms-excel",
-      "application/vnd.ms-excel.sheet.macroEnabled.12"
+      "application/vnd.ms-excel.sheet.macroEnabled.12",
     ];
     let isValid = allowedFile.includes(file.type);
     if (!isValid) {
@@ -93,12 +116,14 @@ export const Product = observer(() => {
         message.error("Failed upload excel!");
       }
 
-      setFileList([{
+      setFileList([
-        uid: '-1',
+        {
-        name: response.body.filename,
+          uid: "-1",
-        status: 'done',
+          name: response.body.filename,
-        url: '',
+          status: "done",
-      }]);
+          url: "",
+        },
+      ]);
       setExcel(response.body.filename);
     } catch (e) {
       setLoading(false);
@@ -107,10 +132,10 @@ export const Product = observer(() => {
   };
 
   const handleChange = (info) => {
-    if (info.file.status === 'uploading') {
+    if (info.file.status === "uploading") {
       setLoading(true);
     } else {
-      setLoading(false)
+      setLoading(false);
     }
   };
 
@@ -140,7 +165,7 @@ export const Product = observer(() => {
   const handleSubmit = async (data) => {
     const request = {
       fileName: excel,
-      supplierCode: data.supplierCode
+      supplierCode: data.supplierCode,
     };
     const responseUploadProduct = await handleUploadProduct(request);
 
@@ -152,30 +177,37 @@ export const Product = observer(() => {
   };
 
   return (
-      <div className={[""].join(" ")}>
+    <div className={[""].join(" ")}>
-        <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent
-        <Card>
+        data={
-              <div>
+          store.authentication.userData.role === "Admin" ||
-                <Row style={{marginBottom: 20}}>
+          store.authentication.userData.role === "Admin Partner"
-                  <Col span={12}>
+            ? routeData
-                    <Button
+            : dataRoute
-                        onClick={() => {
+        }
-                          store.product.visibleModalFilterProduct = true;
+      />
-                        }}
+      <Card>
-                    >
+        <div>
-                      <FilterOutlined/>
+          <Row style={{ marginBottom: 20 }}>
-                      Filter
+            <Col span={12}>
-                    </Button>
+              <Button
-                  </Col>
+                onClick={() => {
-                  <Col span={12}>
+                  store.product.visibleModalFilterProduct = true;
-                    <div
+                }}
-                        style={{
+              >
-                          display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                <FilterOutlined />
-                          justifyContent: "flex-end",
+                Filter
-                          textAlign: "right",
+              </Button>
-                        }}
+            </Col>
-                    >
+            <Col span={12}>
-                      {/* <Search
+              <div
+                style={{
+                  display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                  justifyContent: "flex-end",
+                  textAlign: "right",
+                }}
+              >
+                {/* <Search
                     placeholder="input search text"
                     style={{
                       width: store.ui.mediaQuery.isMobile ? 160 : 200,
@@ -184,105 +216,109 @@ export const Product = observer(() => {
                     }}
                   /> */}
 
-                      {store.authentication.userData.role == "Admin" && <div
+                {store.authentication.userData.role == "Admin" && (
-                          style={{
+                  <div
-                            display: store.ui.mediaQuery.isMobile ? "" : "flex",
-                            justifyContent: "flex-end",
-                            textAlign: "right",
-                          }}
-                      >
-                        <Button
-                            disabled={visibleModalUpload}
-                            style={{
-                              marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                              marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
-                            }}
-                            icon={<PlusOutlined/>}
-                            onClick={() => setVisibleModalUpload(true)}
-                        >
-                          Tambah Produk
-                        </Button>
-                      </div>}
-                    </div>
-                  </Col>
-                </Row>
-              </div>
-          <ProductComponent/>
-        </Card>
-
-        <Modal
-            visible={visibleModalUpload}
-            title={"Upload Excel Product"}
-            okText={"Create"}
-            cancelText="Cancel"
-            onCancel={() => {
-              form.resetFields();
-              handleCancel();
-            }}
-            onOk={() => {
-              form
-                  .validateFields()
-                  .then((values) => {
-                    console.log(values, "isi form");
-                    handleSubmit(values);
-                    form.resetFields();
-                  })
-                  .catch((info) => {
-                    console.error("Validate Failed:", info);
-                  });
-            }}
-        >
-          <Form form={form} layout="vertical">
-            <Form.Item
-                name="fileName"
-                label="Upload Excel Product"
-                rules={[{required: true, message: "Please Upload Excel Product!"}]}
-            >
-              <Upload
-                  fileList={fileList}
-                  onChange={handleChange}
-                  beforeUpload={(file) => beforeUpload(file)}
-                  customRequest={(args) => uploadHandler(args)}
-                  onRemove={(file) => {
-                    setLoading(false);
-                    setFileList([]);
-                    setExcel("");
-                  }}
-              >
-                <div
                     style={{
-                      display: "flex",
+                      display: store.ui.mediaQuery.isMobile ? "" : "flex",
-                      flexDirection: "row",
+                      justifyContent: "flex-end",
-                      justifyContent: "center",
+                      textAlign: "right",
                     }}
-                >
+                  >
-                  <Button
+                    <Button
-                      disabled={loading}
+                      disabled={visibleModalUpload}
                       style={{
                         marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                        marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
                       }}
-                      icon={<UploadOutlined/>}
+                      icon={<PlusOutlined />}
-                  >
+                      onClick={() => setVisibleModalUpload(true)}
-                    Upload Product
+                    >
-                  </Button>
+                      Tambah Produk
-                </div>
+                    </Button>
-              </Upload>
+                  </div>
-            </Form.Item>
+                )}
-            <Form.Item
+              </div>
-                name="supplierCode"
+            </Col>
-                label="Supplier Code"
+          </Row>
-                rules={[{required: true, message: "Please input Supplier Code!"}]}
+        </div>
+        <ProductComponent />
+      </Card>
+
+      <Modal
+        visible={visibleModalUpload}
+        title={"Upload Excel Product"}
+        okText={"Create"}
+        cancelText="Cancel"
+        onCancel={() => {
+          form.resetFields();
+          handleCancel();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmit(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="fileName"
+            label="Upload Excel Product"
+            rules={[
+              { required: true, message: "Please Upload Excel Product!" },
+            ]}
+          >
+            <Upload
+              fileList={fileList}
+              onChange={handleChange}
+              beforeUpload={(file) => beforeUpload(file)}
+              customRequest={(args) => uploadHandler(args)}
+              onRemove={(file) => {
+                setLoading(false);
+                setFileList([]);
+                setExcel("");
+              }}
             >
-              <Select>
+              <div
-                {store.supplier.data.map(data => (
+                style={{
-                    <Option key={data.id} value={data.code}>
+                  display: "flex",
-                      {data.name}
+                  flexDirection: "row",
-                    </Option>
+                  justifyContent: "center",
-                ))}
+                }}
-              </Select>
+              >
-            </Form.Item>
+                <Button
-          </Form>
+                  disabled={loading}
-        </Modal>
+                  style={{
-      </div>
+                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                  }}
+                  icon={<UploadOutlined />}
+                >
+                  Upload Product
+                </Button>
+              </div>
+            </Upload>
+          </Form.Item>
+          <Form.Item
+            name="supplierCode"
+            label="Supplier Code"
+            rules={[{ required: true, message: "Please input Supplier Code!" }]}
+          >
+            <Select>
+              {store.supplier.data.map((data) => (
+                <Option key={data.id} value={data.code}>
+                  {data.name}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
   );
 });

src/pages/Profile/Profile.js

@@ -38,7 +38,7 @@ export const Profile = observer(() => {
   const routeData = [
     {
       route: LINKS.HOME,
-      name: "Home",
+      name: "Beranda",
     },
     {
       route: LINKS.PROFILE,
@@ -46,6 +46,13 @@ export const Profile = observer(() => {
     },
   ];
 
+  const dataRoute = [
+    {
+      route: LINKS.PROFILE,
+      name: "Profil",
+    },
+  ];
+
   useEffect(() => {
     (async () => {
       modalLoader.setLoading(true);
@@ -214,7 +221,14 @@ export const Profile = observer(() => {
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} />
+      <BreadcumbComponent
+        data={
+          store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Admin Partner"
+            ? routeData
+            : dataRoute
+        }
+      />
       <Card>
         <Title strong>Profile</Title>
         <Row style={{ marginBottom: 20 }}>
@@ -362,7 +376,7 @@ export const Profile = observer(() => {
                                 ? `${appConfig.apiUrl}/config/image/${item}`
                                 : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                             }
-                            style={{ width: "10vw",marginRight:15 }}
+                            style={{ width: "10vw", marginRight: 15 }}
                           />
                         ))}
                       </Row>

src/pages/Transaction/Transaction.js

@@ -55,13 +55,9 @@ export const Transaction = observer(() => {
   };
 
   const routeData = [
-    {
-      route: LINKS.HOME,
-      name: "Beranda",
-    },
     {
       route: LINKS.TRANSACTION,
-      name: <span style={{ fontWeight: "bold" }}>Transaksi</span>,
+      name: "Transaksi"
     },
   ];