Merge branch 'develop' into 'devops-staging'

Develop

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

src/constants/payback.js

@@ -0,0 +1,7 @@
+export const PAYBACK_STATUS = {
+    0: 'Pending',
+    1: 'Success',
+    2: 'Failed',
+    3: 'Approved',
+    4: 'Rejected',
+}

src/pages/Payback/Payback.js

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table,} from "antd";
+import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons";
@@ -8,6 +8,7 @@ import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";
 import {appConfig} from "../../config/app";
 import {capitalize} from "lodash";
+import {PAYBACK_STATUS} from "../../constants/payback";
 
 const {Search} = Input;
 
@@ -35,6 +36,11 @@ export const Payback = observer(() => {
     }, []);
 
     const columns = [
+        {
+            title: "Name",
+            dataIndex: "userData_name",
+            key: "userData_name",
+        },
         {
             title: "Picture",
             dataIndex: "image_prove",
@@ -64,6 +70,7 @@ export const Payback = observer(() => {
             key: "action",
             width: '10%',
             render: (text, record) => (
+                PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ?
                     <Space size="middle">
                         <Button
                             onClick={async () => {
@@ -116,7 +123,13 @@ export const Payback = observer(() => {
                         >
                             Reject
                         </Button>
-              </Space>
+                    </Space> :
+                    <Tag
+                        color={PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3] ? "cyan" : "red"}
+                        style={{color: "#4F566B"}}
+                    >
+                        {PAYBACK_STATUS[record.status]}
+                    </Tag>
           ),
       },
   ];
@@ -140,8 +153,9 @@ export const Payback = observer(() => {
             const response = await store.payback.confirmPayback(id, type);
             if (response.body.status !== 201) {
                 message.error(`Failed ${capitalize(type)} Payback`);
-            }
+            } else {
                 message.success(`Success ${capitalize(type)} Payback`);
+            }
         } catch (e) {
             console.error(e, "apa errornya");
             message.error("Failed Handler Action Payback");

src/pages/Payback/PaybackCreated.js

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table,} from "antd";
+import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table, Tag,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
@@ -8,6 +8,7 @@ import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";
 import {appConfig} from "../../config/app";
+import {PAYBACK_STATUS} from "../../constants/payback";
 
 const {Search} = Input;
 
@@ -61,6 +62,19 @@ export const PaybackCreated = observer(() => {
             currency: "IDR",
           }).format(text),
     },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+      width: '10%',
+      render: (text) =>
+          <Tag
+              color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
+              style={{color: "#4F566B"}}
+          >
+            {PAYBACK_STATUS[text]}
+          </Tag>
+    },
   ];
 
   const routeData = [