Merge branch 'develop' into 'devops-staging'

Perbaikan PPOB

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

src/component/CategoryComponent.js

@@ -8,6 +8,8 @@ import {
   Select,
   Space,
   Table,
+  List,
+  Divider
 } from "antd";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
@@ -115,6 +117,7 @@ export const CategoryComponent = observer((props) => {
 
   return (
     <div>
+      {store.ui.mediaQuery.isDesktop && (
         <Table
           style={{ textAlign: "center" }}
           columns={columns}
@@ -136,7 +139,73 @@ export const CategoryComponent = observer((props) => {
             modalLoader.setLoading(false);
           }}
         />
-
+      )}
+      {store.ui.mediaQuery.isMobile && (
+        <List
+          itemLayout="horizontal"
+          position={"top"}
+          pagination={{
+            onChange: async (page, pageSize) => {
+              store.category.pageSize = pageSize;
+              store.category.page = page - 1;
+              modalLoader.setLoading(true);
+              await store.category.getData();
+              modalLoader.setLoading(false);
+            },
+            pageSize: store.category.pageSize,
+            total: store.category.total_data,
+            current: store.category.page + 1,
+            style: { marginBottom: "1rem", marginRight: "1rem" },
+          }}
+          dataSource={store.category.data}
+          style={{ padding: 0 }}
+          renderItem={(item) => {
+            return (
+              <div>
+                <List.Item
+                  key={item.id}
+                  style={{
+                    backgroundColor: "#ffffff",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <List.Item.Meta
+                    className={["cariparkir-container"].join(" ")}
+                    title={item.code}
+                    description={
+                      <div style={{}}>
+                        <p>
+                          <small>Category : {item.name}</small>
+                          <br />
+                        </p>
+                        <p></p>
+                      </div>
+                    }
+                  />
+                  <div style={{ marginRight: 16 }}>
+                    <p
+                      style={{
+                        fontSize: 9,
+                        margin: 0,
+                      }}
+                    >
+                      <Button onClick={() => handleEditButton(item)}>
+                        Edit
+                      </Button>
+                    </p>
+                  </div>
+                </List.Item>
+                <Divider plain style={{ margin: 0 }} />
+              </div>
+            );
+          }}
+        />
+      )}
       <Modal
         visible={store.category.visibleModalCategory}
         title={idData ? "Edit Category" : "Create a new Category"}

src/component/PartnerComponent.js

@@ -235,9 +235,9 @@ export const PartnerComponent = observer((props) => {
           itemLayout="horizontal"
           position={"top"}
           pagination={{
-            onChange: async (page) => {
+            onChange: async (page, pageSize) => {
-              store.partner.pageSize = page.pageSize;
+              store.partner.pageSize = pageSize;
-              store.partner.page = page.current - 1;
+              store.partner.page = page - 1;
               modalLoader.setLoading(true);
               await store.partner.getData();
               modalLoader.setLoading(false);
@@ -270,9 +270,11 @@ export const PartnerComponent = observer((props) => {
                     description={
                       <div style={{}}>
                         <p>
+                          <div style={{ marginBottom: 10 }}>
                             <small>Nama : {item.name}</small> <br />
                             <small>Npwp : {item.npwp}</small> <br />
                             <small>Address : {item.address}</small>
+                          </div>
                           <Space size="middle">
                             <Button
                               type={

src/component/ProductComponent.js

@@ -313,9 +313,9 @@ export const ProductComponent = observer((props) => {
           itemLayout="horizontal"
           position={"top"}
           pagination={{
-            onChange: async (page) => {
+            onChange: async (page,pageSize) => {
-              store.product.pageSize = page.pageSize;
+              store.product.pageSize = pageSize;
-              store.product.page = page.current - 1;
+              store.product.page = page - 1;
               modalLoader.setLoading(true);
               await store.product.getData();
               modalLoader.setLoading(false);

src/component/SubcategoryComponent.js

@@ -148,9 +148,9 @@ export const SubcategoryComponent = observer((props) => {
           itemLayout="horizontal"
           position={"top"}
           pagination={{
-            onChange: async (page) => {
+            onChange: async (page,pageSize) => {
-              store.subcategory.pageSize = page.pageSize;
+              store.subcategory.pageSize = pageSize;
-              store.subcategory.page = page.current - 1;
+              store.subcategory.page = page - 1;
               modalLoader.setLoading(true);
               await store.subcategory.getData();
               modalLoader.setLoading(false);

src/component/SupplierComponent.js

@@ -251,9 +251,9 @@ export const SupplierComponent = observer((props) => {
           itemLayout="horizontal"
           position={"top"}
           pagination={{
-            onChange: async (page) => {
+            onChange: async (page,pageSize) => {
-              store.supplier.pageSize = page.pageSize;
+              store.supplier.pageSize = pageSize;
-              store.supplier.page = page.current - 1;
+              store.supplier.page = page - 1;
               modalLoader.setLoading(true);
               await store.supplier.getData();
               modalLoader.setLoading(false);

src/pages/App/DesktopLayout.js

@@ -205,23 +205,19 @@ export const DesktopLayout = observer(() => {
                       <span>Produk</span>
                     </Link>
                   </Menu.Item>
-                  {store.authentication.userData.role === "Admin" && (
                   <Menu.Item key="sub-category">
                     <Link to={LINKS.SUBCATEGORY}>
                       <FileSyncOutlined />
                       <span>Sub Kategori</span>
                     </Link>
                   </Menu.Item>
-                  )}
-                </SubMenu>
-              )}
-              {store.authentication.userData.role === "Admin" && (
                   <Menu.Item key="category">
                     <Link to={LINKS.CATEGORY}>
                       <FileAddOutlined />
                       <span>Kategori</span>
                     </Link>
                   </Menu.Item>
+                </SubMenu>
               )}
               {store.authentication.userData.role === "Supervisor" && (
                 <Menu.Item key="product">

src/pages/Membership/DetailUser.js

@@ -43,6 +43,7 @@ export const DetailUser = observer(() => {
       modalLoader.setLoading(false);
     })();
 
+
     return () => {
       store.membership.dataDetail = {};
       store.transaction.dataHistoryTopUp = [];
@@ -265,6 +266,9 @@ export const DetailUser = observer(() => {
         justifyContent: "center",
       }
     : null;
+    console.log(JSON.parse(store.authentication.dataProfit.userDetail?.image_store)," ini dia")
+    const data = JSON.parse(store.authentication.dataProfit.userDetail?.image_store)
+    console.log(data,"ini data")
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -412,7 +416,7 @@ export const DetailUser = observer(() => {
                     <Text>
                       <Image
                         src={
-                          store.authentication.dataProfit.profileData
+                          store.authentication.dataProfit.userDetail
                             ?.image_identity
                             ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
                             : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
@@ -421,19 +425,25 @@ export const DetailUser = observer(() => {
                       />
                     </Text>
                   </Col>
+                 
                   <Col span={12}>
+                  
                         <Text>
+                        {data.map((item)=>{
                           <Image
                           src={
-                          store.authentication.dataProfit.profileData
+                            store.authentication.dataProfit.userDetail
                               ?.image_store
-                            ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_store}`
+                              ? `${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" }}
                         />
+                      })}
                         </Text>
+                        
                   </Col>
+                
                 </Row>
               )}
               {store.authentication.userData.role === "Admin" && (
@@ -448,7 +458,7 @@ export const DetailUser = observer(() => {
                     <Text>
                       <Image
                         src={
-                          store.authentication.dataProfit.profileData?.image_identity
+                          store.authentication.dataProfit.userDetail?.image_identity
                             ? "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                             : `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`}
                         style={{ width: "10vw" }}
@@ -459,7 +469,7 @@ export const DetailUser = observer(() => {
                     <Text>
                       <Image
                         src={
-                          store.authentication.dataProfit.profileData
+                          store.authentication.dataProfit.userDetail
                             ?.image_store
                             ?"https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                             :  `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_store}` }
@@ -479,7 +489,7 @@ export const DetailUser = observer(() => {
                     <Text>
                       <Image
                         src={
-                          store.authentication.dataProfit.profileData
+                          store.authentication.dataProfit.userDetail
                             ?.image_identity
                             ? `${appConfig.apiUrl}/config/image/${store.authentication.profileData.userDetail?.image_identity}`
                             : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
@@ -629,9 +639,9 @@ export const DetailUser = observer(() => {
                     itemLayout="horizontal"
                     position={"top"}
                     pagination={{
-                      onChange: async (page) => {
+                      onChange: async (page,pageSize) => {
-                        store.transaction.pageSize = page.pageSize;
+                        store.transaction.pageSize = pageSize;
-                        store.transaction.page = page.current - 1;
+                        store.transaction.page = page - 1;
                         modalLoader.setLoading(true);
                         await getData();
                         modalLoader.setLoading(false);

src/pages/Membership/Membership.js

@@ -30,6 +30,7 @@ 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;
@@ -291,7 +292,7 @@ export const Membership = observer(() => {
         const request = {
           ...data,
           image_identity: image,
-          image_store: imageStore,
+          image_store: JSON.stringify(imageStore),
         };
         const response = await store.membership.create(request);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
@@ -308,6 +309,7 @@ export const Membership = observer(() => {
       setConfirmLoading(false);
       setVisibleModal(false);
       setInitialData({});
+      form.resetFields();
     }
   };
   return (
@@ -385,9 +387,9 @@ export const Membership = observer(() => {
               itemLayout="horizontal"
               position={"top"}
               pagination={{
-                onChange: async (page) => {
+                onChange: async (page, pageSize) => {
-                  store.membership.pageSize = page.pageSize;
+                  store.membership.pageSize = pageSize;
-                  store.membership.page = page.current - 1;
+                  store.membership.page = page -1;
                   modalLoader.setLoading(true);
                   await getData();
                   modalLoader.setLoading(false);

src/pages/Membership/MembershipModal.js

@@ -87,15 +87,14 @@ export const MembershipModal = ({
     const res = await store.payback.uploadImages(file);
     console.log(res, "ini respon 2");
     setImageStore(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
-    setResponseFilenameStore(res.body.filename);
+    setResponseFilenameStore([...responseFilenameStore, res.body.filename]);
-    setFileStore([
+    setFileStore([...fileStore, {
-      {
       uid: "-1",
       name: res.body.filename,
       status: "done",
       url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
-      },
+    } ]);
-    ]);
+
     setLoadingStore(false);
   };
 
@@ -159,6 +158,15 @@ export const MembershipModal = ({
           .then((values) => {
             onCreate(values,responseFilename,responseFilenameStore);
             form.resetFields();
+            setFileStore([])
+            setImage("");
+            setFileList([]);
+            setPreviewImage("");
+            setResponseFilename("");
+            setImageStore("");
+            setFileStore([]);
+            setPreviewImageStore("");
+            setResponseFilenameStore("");
           })
           .catch((info) => {
             console.log("Validate Failed:", info);
@@ -435,13 +443,14 @@ export const MembershipModal = ({
                     onChange={handleChangeStore}
                     beforeUpload={(file) => beforeUploadStore(file)}
                     customRequest={(args) => uploadHandlerStore(args)}
+                    maxCount={3}
                     onRemove={(file) => {
                       setImageStore("");
                       setLoadingStore(false);
                       setFileStore([]);
                     }}
                   >
-                    {imageStore === "" ? uploadButtonStore : null}
+                    {fileStore.length >= 3 ? null:uploadButtonStore  }
                   </Upload>
                   <h5
                     style={{

src/pages/Membership/Picture.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Image, Modal, Upload, message } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { http } from "../utils/http";
+
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
+
+export class PicturesWall extends React.Component {
+  state = {
+    previewVisible: false,
+    previewImage: '',
+    previewTitle: '',
+    fileList: [],
+  };
+
+  handleCancel = () => this.setState({ previewVisible: false });
+
+  handlePreview = async file => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+
+    this.setState({
+      previewImage: file.url || file.preview,
+      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
+      previewVisible: true,
+    });
+  };
+
+  handlePreviewCancel = () => {
+    this.setState({
+      previewVisible: false,
+    });
+  };
+
+  handleChange = ({ fileList }, info) => {
+
+    // if (this.props.maxUpload) {
+    //   if (fileList.length > this.props.maxUpload) {
+    //     fileList.splice(0, 1)
+    //   }
+    // }
+
+    // if (info.file.status !== 'uploading') {
+    //   console.log(info.file, info.fileList);
+    // }
+    // if (info.file.status === 'done') {
+    //   message.success(`${info.file.name} file uploaded successfully`);
+    // } else if (info.file.status === 'error') {
+    //   message.error(`${info.file.name} file upload failed.`);
+    // }
+
+    this.setState({ fileList })
+  };
+
+  render() {
+    const { previewVisible, previewImage, fileList, previewTitle, handlePreviewCancel } = this.state;
+    const uploadButton = (
+      <div>
+        <PlusOutlined />
+        <div style={{ marginTop: 8 }}>Upload</div>
+      </div>
+    );
+
+    return (
+      <>
+        <Upload
+          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          listType="picture-card"
+          fileList={fileList}
+          accept={'.png, .jpg, .jpeg, .PNG, .JPG, .JPEG'}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          beforeUpload={(file) => {
+            console.log({ file })
+            http.uploadAntd({
+              file,
+              onError() {
+
+              },
+              onProgress(event) {
+                console.log({ event })
+              },
+              onSuccess: (res) => {
+                if (this.props.onUpload) {
+                  const { fileList } = this.state
+                  const index = fileList.findIndex(d => d.uid === file.uid)
+
+                  if (fileList.length > this.props.maxUpload) {
+                    this.setState({
+                      fileList: []
+                    }) && this.props.onUpload()
+                    message.error('Upload foto tidak boleh melebihi batas maksimal!');
+                  } else {
+                    fileList[index].path = res.body.path
+                    this.setState({
+                      ...fileList
+                    })
+                    this.props.onUpload(fileList)
+
+                  }
+                }
+              }
+            })
+            return false;
+          }}
+          {...(this.props.uploadProps || {})}
+        >
+          {/* {fileList.length > this.props.maxUpload ?
+            this.setState({
+              fileList: []
+            }) && this.props.onUpload() && null
+            :
+            ''} */}
+          {fileList.length >= this.props.maxUpload ? '' : uploadButton}
+        </Upload>
+
+        <Modal
+          visible={previewVisible}
+          title={previewTitle}
+          footer={null}
+          onCancel={this.handleCancel}
+        >
+          <Image
+            onClick={this.handleCancel}
+            src={previewImage}
+          />
+        </Modal>
+      </>
+    );
+  }
+}
+
+export default PicturesWall;

src/pages/Payback/Payback.js

@@ -367,12 +367,10 @@ export const Payback = observer(() => {
                     >
                       <List.Item.Meta
                         className={["cariparkir-container"].join(" ")}
-                        title={item.name}
+                        title={item.userData_name}
                         description={
                           <div style={{}}>
                             <p>
-                              <span>{item.userData_name}</span>
-                              <br />
                               <small>Amount: {item.amount}</small>
                               <br />
                               {PAYBACK_STATUS[item.status] ===

src/pages/Payback/PaybackCreated.js

@@ -274,9 +274,9 @@ export const PaybackCreated = observer(() => {
               itemLayout="horizontal"
               position={"top"}
               pagination={{
-                onChange: async (page) => {
+                onChange: async (page, pageSize) => {
-                  store.payback.pageSizeCreated = page.pageSize;
+                  store.payback.pageSizeCreated = pageSize;
-                  store.payback.pageCreated = page.current - 1;
+                  store.payback.pageCreated = page - 1;
                   modalLoader.setLoading(true);
                   await store.payback.getDataCreated();
                   modalLoader.setLoading(false);
@@ -308,7 +308,7 @@ export const PaybackCreated = observer(() => {
                         title={item.name}
                         description={
                           <div style={{}}>
-                            <Image src={item.image_prove} preview={false} />
+                            <small>Amount: {item.amount}</small>
                           </div>
                         }
                       />
@@ -319,7 +319,12 @@ export const PaybackCreated = observer(() => {
                             margin: 0,
                           }}
                         >
-                          {item.amount}
+                          {" "}
+                          <Image
+                            src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
+                            style={{ width: "20vw" }}
+                            preview={true}
+                          />
                         </p>
                       </div>
                     </List.Item>

src/pages/Profile/Profile.js

@@ -401,20 +401,19 @@ export const Profile = observer(() => {
                   position={"top"}
                   dataSource={store.transaction.dataHistoryTransaction}
                   pagination={{
-                    pageSize: store.transaction.pageSizeHistoryTransaction,
+                    onChange: async (page, pageSize) => {
-                    total: store.transaction.total_dataHistoryTransaction,
+                      console.log(page,'Page')
-                    current: store.transaction.pageHistoryTransaction + 1,
+                      console.log(pageSize,'Page size')
-                    showSizeChanger: true,
+                      store.transaction.pageSizeHistoryTransaction = pageSize;
-                    simple: false,
+                      store.transaction.pageHistoryTransaction = page -1;
-                  }}
-                  onChange={async (page) => {
-                    let pageNumber = page.current;
-                    store.transaction.pageSizeHistoryTransaction =
-                      page.pageSize;
-                    store.transaction.pageHistoryTransaction = pageNumber - 1;
                       modalLoader.setLoading(true);
                       await store.transaction.getDataHistoryTransaction();
                       modalLoader.setLoading(false);
+                    },
+                    pageSize: store.transaction.pageSizeHistoryTransaction,
+                    total:store.transaction.total_dataHistoryTransaction,
+                    current: store.transaction.pageHistoryTransaction + 1,
+                    style: { marginBottom: "1rem", marginRight: "1rem" },
                   }}
                   style={{ padding: 0 }}
                   renderItem={(item) => {
@@ -472,6 +471,10 @@ export const Profile = observer(() => {
                                     No.Seri : {item.seri_number}
                                   </small>{" "}
                                   <br />
+                                  <small>
+                                    Alasan Gagal : {item.failed_reason}
+                                  </small>{" "}
+                                  <br />
                                   <small>
                                     IDTrx Mitra :{" "}
                                     {item.partner_transaction_code}

src/store/product.js

@@ -48,6 +48,7 @@ export class Product {
             }) ?? []
 
             this.total_data = response?.body?.count ?? 0
+            //console.log(this.total_data)
         } catch (e) {
             console.error(e);
         }

src/store/transaction.js

@@ -135,6 +135,7 @@ export class Transaction {
       console.log(response);
       this.dataHistoryTransaction = response.body.data ?? [];
       this.total_dataHistoryTransaction = response?.body?.count ?? 0;
+      console.log(this.total_dataHistoryTransaction)
     } catch (e) {
       console.error(e);
     }