Pages Payback

src/pages/App/DesktopLayout.js

@@ -12,6 +12,8 @@ import {
   FileSyncOutlined,
   FileProtectOutlined,
   ShoppingCartOutlined,
+  AlipayOutlined,
+  PayCircleOutlined
 } from "@ant-design/icons";
 import { AppRoute, LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -202,12 +204,24 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
-              <Menu.Item key="payback">
+              <SubMenu
+                key="payback-main"
+                icon={<ProfileOutlined />}
+                title="Payback"
+              >
+                <Menu.Item key="payback-to-user">
                   <Link to={LINKS.PAYBACK}>
-                  <DatabaseOutlined />
+                    <PayCircleOutlined />
+                    <span>Payback To</span>
+                  </Link>
+                </Menu.Item>
+                <Menu.Item key="payback-from-user">
+                  <Link to={LINKS.PAYBACKFROMUSER}>
+                    <AlipayOutlined />
                     <span>Payback</span>
                   </Link>
                 </Menu.Item>
+              </SubMenu>
               {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="profile">
                   <Link to={LINKS.PROFILE}>

src/pages/App/MenuList.js

@@ -14,6 +14,8 @@ import {
   ProjectOutlined,
   ShoppingCartOutlined,
   UserOutlined,
+  AlipayOutlined,
+  PayCircleOutlined
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../utils/useStore";
@@ -127,14 +129,14 @@ export const MenuList = observer((props) => {
       <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback">
         <Menu.Item key="payback-to-user">
           <Link to={LINKS.PAYBACK}>
-            <DatabaseOutlined />
+            <PayCircleOutlined />
-            <span>Payback</span>
+            <span>Payback To</span>
           </Link>
         </Menu.Item>
         <Menu.Item key="payback-from-user">
           <Link to={LINKS.PAYBACKFROMUSER}>
-            <DatabaseOutlined />
+            <AlipayOutlined/>
-            <span>Payback User</span>
+            <span>Payback</span>
           </Link>
         </Menu.Item>
       </SubMenu>

src/pages/Membership/Membership.js

@@ -47,7 +47,7 @@ export const Membership = observer(() => {
 
         await getData();
         await store.role.getData(isAdmin);
-        if (isAdmin) await store.supplier.getData();
+        await store.supplier.getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);

src/pages/Payback/Payback.js

@@ -162,7 +162,7 @@ export const Payback = observer(() => {
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
               />
-              {store.authentication.userData.role !== "Admin" && (
+              {/* {store.authentication.userData.role !== "Admin" && (
                 <Button
                   onClick={() => {
                     setInitialData({});
@@ -171,7 +171,7 @@ export const Payback = observer(() => {
                 >
                   <PlusSquareOutlined /> New
                 </Button>
-              )}
+              )} */}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (
@@ -260,7 +260,7 @@ export const Payback = observer(() => {
         </div>
       </Card>
 
-      <PaybackModal
+      {/* <PaybackModal
         visible={visibleModal}
         confirmLoading={confirmLoading}
         initialData={initialData}
@@ -271,7 +271,7 @@ export const Payback = observer(() => {
           setInitialData({});
           setVisibleModal(false);
         }}
-      />
+      /> */}
     </div>
   );
 });

src/pages/Payback/PaybackFromUser.js

@@ -52,18 +52,13 @@ export const PaybackFromUser = observer(() => {
 
 
   const columns = [
-    // {
-    //   title: "Name",
-    //   dataIndex: "name",
-    //   key: "name",
-    // },
     {
       title: "Picture",
       dataIndex: "image_prove",
       key: "image_prove",
       render: (text, record) => (
         <Image
-          src={record.picture}
+          src={record.image_prove}
           style={{ width: 50, height: 50 }}
           shape="circle"
           alt="avatar"
@@ -75,6 +70,41 @@ export const PaybackFromUser = observer(() => {
       dataIndex: "amount",
       key: "amount",
     },
+    {
+      title: "Action",
+      dataIndex: "amount",
+      key: "action",
+      render: (text, record) => (
+        <Space size="middle">
+          <Button
+            onClick={async () => {
+              await handleAction(record, "accept");
+            }}
+            icon={<CheckCircleOutlined />}
+            style={{
+              backgroundColor: "#1bb91d",
+              color: "#fff",
+              borderColor: "#1bb91d",
+            }}
+          >
+            Accept
+          </Button>
+          <Button
+            onClick={async () => {
+              await handleAction(record, "reject");
+            }}
+            icon={<CloseOutlined />}
+            style={{
+              backgroundColor: "#ff1c1c",
+              color: "#fff",
+              borderColor: "#ff1c1c",
+            }}
+          >
+            Reject
+          </Button>
+        </Space>
+      ),
+    },
     // {
     //   title: "Action",
     //   key: "action",
@@ -181,21 +211,21 @@ export const PaybackFromUser = observer(() => {
               columns={columns}
               dataSource={store.payback.data}
               bordered
-              // pagination={{
+              pagination={{
-              //     pageSize: store.membership.pageSize,
+                  pageSize: store.payback.pageSize,
-              //     total: store.membership.total_data,
+                  total: store.payback.total_data,
-              //     current: store.membership.page + 1,
+                  current: store.payback.page + 1,
-              //     showSizeChanger: true,
+                  showSizeChanger: true,
-              //     simple: false
+                  simple: false
-              // }}
+              }}
-              // onChange={async (page) => {
+              onChange={async (page) => {
-              //     let pageNumber = page.current;
+                  let pageNumber = page.current;
-              //     store.membership.pageSize = page.pageSize;
+                  store.payback.pageSize = page.pageSize;
-              //     store.membership.page = pageNumber - 1;
+                  store.payback.page = pageNumber - 1;
-              //     // store.membership.isLoading = true;
+                  // store.membership.isLoading = true;
-              //     await store.membership.getData();
+                  await store.payback.getData();
-              //     // store.membership.isLoading = false;
+                  // store.membership.isLoading = false;
-              // }}
+              }}
             />
           )}
 
@@ -236,7 +266,7 @@ export const PaybackFromUser = observer(() => {
                         title={item.name}
                         description={
                           <div style={{}}>
-                            <Image src={item.picture} preview={false} />
+                            <Image src={item.image_prove} preview={false} />
                           </div>
                         }
                       />

src/pages/Payback/PaybackModal.js

@@ -23,6 +23,7 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
   const firstIndexFileList = fileList[0];
   const [isLoading, setIsLoading] = useState(false);
   
+
   useEffect(() => {
     const init = async () => {
       try {
@@ -93,13 +94,14 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
     console.log(data, "isi data2");
     try {
       await store.payback.create(data);
-      message.success("Success Add New Member");
+      message.success("Success Add Payback");
+      await store.payback.getData();
     } catch (e) {
       console.log(e, "apa errornya");
       message.error("Failed Add Member");
     }
     
-    store.payback.visibleModalPayback = false;
+    //store.payback.visibleModalPayback = false;
     form.resetFields();
   };
 
@@ -143,7 +145,6 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
         <Form.Item
           label="Upload Picture"
           name="image_prove"
-          initialValue={"tes"}
         >
           <div
             style={{
@@ -163,7 +164,6 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
                 beforeUpload={beforeUpload}
                 onPreview={handlePreview}
                 onChange={handleChange}
-                defaultValue={"tes"}
               >
                 {!firstIndexFileList ? uploadButton : null}
               </Upload>

src/store/payback.js

@@ -9,15 +9,15 @@ export class Payback {
   filterCategory = null;
   visibleModalPayback = false;
 
-  pageCategories = 0;
+  pagePayback = 0;
-  pageSizeCategories = 10;
+  pageSizePayback = 10;
-  dataCategories = [];
+  dataPayback = [];
-  total_dataCategories = 0;
+  total_dataPayback = 0;
 
-  pageSubCategories = 0;
+  pageSubPayback = 0;
-  pageSizeSubCategories = 10;
+  pageSizeSubPayback = 10;
-  dataSubCategories = [];
+  dataSubPayback = [];
-  total_dataSubCategories = 0;
+  total_dataPayback = 0;
 
   constructor(ctx) {
     this.ctx = ctx;
@@ -29,14 +29,14 @@ export class Payback {
       const response = await http.get(
         `/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}`
       );
-      //console.log(response)
+      console.log(response)
       this.data =
-        response.body[0].map((item, idx) => {
+        response.body.data.map((item, idx) => {
           item.key = idx;
           return item;
         }) ?? [];
 
-      this.total_data = response.body.total_data ?? 0;
+      this.total_data = response.body.count ?? 0;
     } catch (e) {
       console.error(e);
     }
@@ -49,12 +49,12 @@ export class Payback {
       );
       console.log(response);
       this.data =
-        response.body[0].map((item, idx) => {
+        response.body.data.map((item, idx) => {
           item.key = idx;
           return item;
         }) ?? [];
 
-      this.total_data = response.body.total_data ?? 0;
+      this.total_data = response.body.count ?? 0;
     } catch (e) {
       console.error(e);
     }