post payback

src/pages/App/MenuList.js

@@ -124,12 +124,20 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      <Menu.Item key="payback">
+      <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback">
-        <Link to={LINKS.PAYBACK}>
+        <Menu.Item key="payback-to-user">
-          <DatabaseOutlined />
+          <Link to={LINKS.PAYBACK}>
-          <span>Payback</span>
+            <DatabaseOutlined />
-        </Link>
+            <span>Payback</span>
-      </Menu.Item>
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="payback-from-user">
+          <Link to={LINKS.PAYBACKFROMUSER}>
+            <DatabaseOutlined />
+            <span>Payback User</span>
+          </Link>
+        </Menu.Item>
+      </SubMenu>
       {store.authentication.userData.role !== "Admin" && (
         <Menu.Item key="profile">
           <Link to={LINKS.PROFILE}>

src/pages/Payback/Payback.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState ,useEffect} from "react";
 import {
   Button,
   Card,
@@ -31,56 +31,25 @@ export const Payback = observer(() => {
   const [visibleModal, setVisibleModal] = useState(false);
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [initialData, setInitialData] = useState({});
+  //const [confirmLoading, setConfirmLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-  // useEffect(() => {
-  //     // const init = async () => {
-  //     //   try {
-  //     //     setIsLoading(true);
-  //     //     await store.membership.getData();
-  //     //     await store.role.getData();
-  //     //     setIsLoading(false);
-  //     //   } catch (e) {
-  //     //     setIsLoading(false);
-  //     //   }
-  //     // };
-  //
-  //     // init();
-  // }, []);
 
-  const dummyData = [
+  useEffect(() => {
-    {
+      const init = async () => {
-      key: "1",
+        try {
-      id: 1,
+          setIsLoading(true);
-      name: "John Doe",
+          await store.payback.getDataUser();
-      picture:
+          //await store.role.getData();
-        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+          setIsLoading(false);
-      amount: "Rp. 1.000.000",
+        } catch (e) {
-    },
+          setIsLoading(false);
-    {
+        }
-      key: "2",
+      };
-      id: 1,
+  
-      name: "John Doe",
+      init();
-      picture:
+  }, []);
-        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+
-      amount: "Rp. 1.000.000",
-    },
-    {
-      key: "3",
-      id: 1,
-      name: "John Doe",
-      picture:
-        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
-      amount: "Rp. 1.000.000",
-    },
-    {
-      key: "4",
-      id: 1,
-      name: "John Doe",
-      picture:
-        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
-      amount: "Rp. 1.000.000",
-    },
-  ];
 
   const columns = [
     {
@@ -90,8 +59,8 @@ export const Payback = observer(() => {
     },
     {
       title: "Picture",
-      dataIndex: "picture",
+      dataIndex: "image_prove",
-      key: "picture",
+      key: "image_prove",
       render: (text, record) => (
         <Image
           src={record.picture}
@@ -210,7 +179,7 @@ export const Payback = observer(() => {
               key="1"
               hasEmpty
               columns={columns}
-              dataSource={dummyData}
+              dataSource={store.payback.data}
               bordered
               // pagination={{
               //     pageSize: store.membership.pageSize,
@@ -245,7 +214,7 @@ export const Payback = observer(() => {
               //     current: store.membership.page,
               //     style: {marginBottom: "1rem", marginRight: "1rem"},
               // }}
-              dataSource={dummyData}
+              dataSource={store.payback.data}
               style={{ padding: 0 }}
               renderItem={(item) => {
                 return (

src/pages/Payback/PaybackFromUser.js

@@ -0,0 +1,277 @@
+import React, { useState ,useEffect} from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Image,
+  Input,
+  List,
+  message,
+  Row,
+  Space,
+  Table,
+} from "antd";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import {
+  CheckCircleOutlined,
+  CloseOutlined,
+  FilterOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
+import { PaybackModal } from "./PaybackModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+
+const { Search } = Input;
+
+export const PaybackFromUser = observer(() => {
+  const store = useStore();
+  const [visibleModal, setVisibleModal] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [initialData, setInitialData] = useState({});
+  //const [confirmLoading, setConfirmLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+
+  useEffect(() => {
+      const init = async () => {
+        try {
+          setIsLoading(true);
+          await store.payback.getData();
+          //await store.role.getData();
+          setIsLoading(false);
+        } catch (e) {
+          setIsLoading(false);
+        }
+      };
+  
+      init();
+  }, []);
+
+
+  const columns = [
+    // {
+    //   title: "Name",
+    //   dataIndex: "name",
+    //   key: "name",
+    // },
+    {
+      title: "Picture",
+      dataIndex: "image_prove",
+      key: "image_prove",
+      render: (text, record) => (
+        <Image
+          src={record.picture}
+          style={{ width: 50, height: 50 }}
+          shape="circle"
+          alt="avatar"
+        />
+      ),
+    },
+    {
+      title: "Amount",
+      dataIndex: "amount",
+      key: "amount",
+    },
+    // {
+    //   title: "Action",
+    //   key: "action",
+    //   width: 100,
+    //   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>
+    //   ),
+    // },
+  ];
+
+  if(store.authentication.userData.role === "Retail") columns.pop();
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.PAYBACKFROMUSER,
+      name: <span style={{ fontWeight: "bold" }}>Payback User</span>,
+    },
+  ];
+
+  const onSubmit = async (data) => {
+    setConfirmLoading(true);
+    try {
+      // await store.membership.create(data);
+      // message.success("Success Add New Member");
+      // await store.membership.getData();
+    } catch (e) {
+      console.error(e, "apa errornya");
+      message.error("Failed Add Member");
+    }
+    setConfirmLoading(false);
+    setVisibleModal(false);
+  };
+
+  const handleAction = async (record, type) => {};
+
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData} />
+      <Card>
+        <div>
+          <Row style={{ marginBottom: 20 }}>
+            <Col span={12}>
+              <Button>
+                <FilterOutlined />
+                Filter
+              </Button>
+            </Col>
+            <Col span={12} style={{ textAlign: "right" }}>
+              <Search
+                placeholder="input search text"
+                style={{
+                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                }}
+              />
+              {store.authentication.userData.role !== "Admin" && (
+                <Button
+                  onClick={() => {
+                    setInitialData({});
+                    setVisibleModal(true);
+                  }}
+                >
+                  <PlusSquareOutlined /> New
+                </Button>
+              )}
+            </Col>
+          </Row>
+          {store.ui.mediaQuery.isDesktop && (
+            <Table
+              key="1"
+              hasEmpty
+              columns={columns}
+              dataSource={store.payback.data}
+              bordered
+              // pagination={{
+              //     pageSize: store.membership.pageSize,
+              //     total: store.membership.total_data,
+              //     current: store.membership.page + 1,
+              //     showSizeChanger: true,
+              //     simple: false
+              // }}
+              // onChange={async (page) => {
+              //     let pageNumber = page.current;
+              //     store.membership.pageSize = page.pageSize;
+              //     store.membership.page = pageNumber - 1;
+              //     // store.membership.isLoading = true;
+              //     await store.membership.getData();
+              //     // store.membership.isLoading = false;
+              // }}
+            />
+          )}
+
+          {store.ui.mediaQuery.isMobile && (
+            <List
+              itemLayout="horizontal"
+              position={"top"}
+              // pagination={{
+              //     onChange: (page) => {
+              //         store.membership.pageSize = page.pageSize;
+              //         store.membership.page = page.current;
+              //         store.membership.getData();
+              //     },
+              //     pageSize: store.membership.pageSize,
+              //     total: store.membership.total_data,
+              //     current: store.membership.page,
+              //     style: {marginBottom: "1rem", marginRight: "1rem"},
+              // }}
+              dataSource={store.payback.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.name}
+                        description={
+                          <div style={{}}>
+                            <Image src={item.picture} preview={false} />
+                          </div>
+                        }
+                      />
+                      <div style={{ marginRight: 16 }}>
+                        <p
+                          style={{
+                            fontSize: 9,
+                            margin: 0,
+                          }}
+                        >
+                          {item.amount}
+                        </p>
+                      </div>
+                    </List.Item>
+                    <Divider plain style={{ margin: 0 }} />
+                  </div>
+                );
+              }}
+            />
+          )}
+        </div>
+      </Card>
+
+      <PaybackModal
+        visible={visibleModal}
+        confirmLoading={confirmLoading}
+        initialData={initialData}
+        onCreate={async (data) => {
+          await onSubmit(data);
+        }}
+        onCancel={() => {
+          setInitialData({});
+          setVisibleModal(false);
+        }}
+      />
+    </div>
+  );
+});

src/pages/Payback/PaybackModal.js

@@ -1,164 +1,206 @@
-import React, {useState} from 'react';
+import React, { useState, useEffect } from "react";
-import {Button, Form, Image, Input, message, Modal, Upload} from 'antd';
+import {
-import {useStore} from "../../utils/useStore";
+  Button,
-import {appConfig} from "../../config/app";
+  Form,
-import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";
+  Image,
+  Input,
+  message,
+  Modal,
+  Upload,
+} from "antd";
+import { useStore } from "../../utils/useStore";
+import { appConfig } from "../../config/app";
+import { LoadingOutlined, UploadOutlined } from "@ant-design/icons";
 
-export const PaybackModal = ({
+export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
-                                 visible,
+  const [form] = Form.useForm();
-                                 onCreate,
+  const store = useStore();
-                                 onCancel,
+  const [fileList, setFileList] = useState([]);
-                                 initialData,
+  const [previewTitle, setPreviewTitle] = useState("");
-                             }) => {
+  const [previewImage, setPreviewImage] = useState("");
-    const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
-    const store = useStore();
+  const [fileUrl, setFileUrl] = useState("");
+  const firstIndexFileList = fileList[0];
+  const [isLoading, setIsLoading] = useState(false);
 
-    const [fileList, setFileList] = useState([]);
+  useEffect(() => {
-    const [previewTitle, setPreviewTitle] = useState("");
+    const init = async () => {
-    const [previewImage, setPreviewImage] = useState("");
+      try {
-    const [loading, setLoading] = useState(false);
+        setIsLoading(true);
-    const [fileUrl, setFileUrl] = useState("");
+        //await store.membership.getData();
-    const firstIndexFileList = fileList[0];
+        //await store.role.getData();
+        await store.authentication.getProfile();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
 
-    const beforeUpload = (file) => {
+    init();
-        let isPdf, isLt2M;
+  }, []);
-        let allowedFile = ['image/jpeg', 'image/png', "application/pdf"];
+  const beforeUpload = (file) => {
-        let isValid = allowedFile.includes(file.type)
+    let isPdf, isLt2M;
-        if (!isValid) {
+    let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
-            message.error("You can only upload PDF or Image file!");
+    let isValid = allowedFile.includes(file.type);
-        }
+    if (!isValid) {
-        // return file.type === 'application/pdf' ? true : Upload.LIST_IGNORE;
+      message.error("You can only upload PDF or Image file!");
-        isLt2M = file.size / 1024 / 1024 < 2;
+    }
-        if (!isLt2M) {
+    // return file.type === 'application/pdf' ? true : Upload.LIST_IGNORE;
-            message.error("File must smaller than 2MB!");
+    isLt2M = file.size / 1024 / 1024 < 2;
-        }
+    if (!isLt2M) {
-        return isValid && isLt2M ? true : Upload.LIST_IGNORE;
+      message.error("File must smaller than 2MB!");
+    }
+    return isValid && isLt2M ? true : Upload.LIST_IGNORE;
+  };
+
+  const handlePreview = async (file) => {
+    const fileUrl = appConfig.apiUrl + file.response.path;
+    setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
+  };
+
+  const handleChange = ({ fileList }) => {
+    setFileList(fileList);
+    if (fileList.length && fileList[0].status === "done") {
+      form.setFieldsValue({
+        file_url: fileList[0].response.path,
+      });
+      console.log(fileList, "apaaaaaa");
+      setFileUrl(fileList[0].response.path);
+      setPreviewImage(fileList[0].response.path);
+      setPreviewTitle(fileList[0].name);
+    }
+  };
+
+  const uploadButton = (
+    <div>
+      {loading ? (
+        <LoadingOutlined />
+      ) : (
+        <Button icon={<UploadOutlined />}>Click to Upload</Button>
+      )}
+    </div>
+  );
+
+  const previewUpload = (
+    <Image
+      className="w-full h-full"
+      preview={false}
+      src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}
+    />
+  );
+
+  const handleSubmit = async (data) => {
+    console.log(data, "isi data2");
+    try {
+      await store.payback.create(data);
+      message.success("Success Add New Member");
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error("Failed Add Member");
     }
 
-    const handlePreview = async (file) => {
+    store.payback.visibleModalPayback = false;
-        const fileUrl = appConfig.apiUrl + file.response.path;
+    form.resetFields();
-        setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
+  };
-    };
 
-    const handleChange = ({fileList}) => {
+  return (
-        setFileList(fileList);
+    <Modal
-        if (fileList.length && fileList[0].status === "done") {
+      visible={visible}
-            form.setFieldsValue({
+      title={"Create a new Payback"}
-                file_url: fileList[0].response.path,
+      okText={"Create"}
-            });
+      cancelText="Cancel"
-            console.log(fileList, "apaaaaaa");
+      onCancel={() => {
-            setFileUrl(fileList[0].response.path);
+        form.resetFields();
-            setPreviewImage(fileList[0].response.path);
+        onCancel();
-            setPreviewTitle(fileList[0].name);
+      }}
-        }
+      onOk={() => {
-    };
+        form
-
+          .validateFields()
-    const uploadButton = (
+          .then((values) => {
-        <div>
+            handleSubmit(values);
-            {loading ? (
+            console.log(values);
-                <LoadingOutlined/>
+            form.resetFields();
-            ) : (
+          })
-                <Button icon={<UploadOutlined/>}>Click to Upload</Button>
+          .catch((info) => {
-            )}
+            console.log("Validate Failed:", info);
-        </div>
+          });
-    );
+      }}
-
+    >
-    const previewUpload = (
+      <Form
-        <Image className="w-full h-full" preview={false}
+        form={form}
-               src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}/>
+        layout="vertical"
-    )
+        name="form_in_modal"
-
+        initialValues={initialData}
-    return (
+      >
-        <Modal
+        <Form.Item
-            visible={visible}
+          name="destination"
-            title={"Create a new Payback"}
+          label="destination"
-            okText={"Create"}
+          rules={[{ required: true, message: "Please input Name!" }]}
-            cancelText="Cancel"
+          initialValue={store.authentication.profileData.superior?.id}
-            onCancel={() => {
-                form.resetFields()
-                onCancel()
-            }}
-            onOk={() => {
-                form
-                    .validateFields()
-                    .then(values => {
-                        onCreate(values);
-                        form.resetFields()
-                    })
-                    .catch(info => {
-                        console.log('Validate Failed:', info);
-                    });
-            }}
         >
-            <Form
+          <Input />
-                form={form}
+        </Form.Item>
-                layout="vertical"
+        <Form.Item
-                name="form_in_modal"
+          label="Upload Picture"
-                initialValues={initialData}
+          name="image_prove"
-            >
+          initialValue={"tes"}
-
+        >
-                <Form.Item
+          <div
-                    name="name"
+            style={{
-                    label="name"
+              display: "flex",
-                    rules={[{required: true, message: 'Please input Name!'}]}
+              justifyContent: "space-between",
-                >
+              alignItems: "center",
-                    <Input/>
+            }}
-                </Form.Item>
+          >
-                <Form.Item
+            <div>
-                    label="Upload Picture"
+              <Upload
-                    name="picture"
+                name="image_prove"
-                >
+                maxCount={1}
-                    <div style={{
+                className="avatar-uploader"
-                        display: "flex",
+                // listType="picture-card"
-                        justifyContent: "space-between",
+                action={appConfig.apiUrl + "/files"}
-                        alignItems: "center",
+                fileList={fileList}
-                    }}>
+                beforeUpload={beforeUpload}
-                        <div>
+                onPreview={handlePreview}
-                            <Upload
+                onChange={handleChange}
-                                name="file"
+                defaultValue={"tes"}
-                                maxCount={1}
+              >
-                                className="avatar-uploader"
+                {!firstIndexFileList ? uploadButton : null}
-                                // listType="picture-card"
+              </Upload>
-                                action={appConfig.apiUrl + "/files"}
+              <h5
-                                fileList={fileList}
+                style={{
-                                beforeUpload={beforeUpload}
+                  marginTop: 12,
-                                onPreview={handlePreview}
+                  color: "rgba(0, 0, 0, 0.45)",
-                                onChange={handleChange}
+                }}
-                            >
+              >
-                                {!firstIndexFileList ? uploadButton : null}
+                Max size of file 2 mb
-                            </Upload>
+              </h5>
-                            <h5
+            </div>
-                                style={{
+            <div>
-                                    marginTop: 12,
+              <h5>Preview</h5>
-                                    color: "rgba(0, 0, 0, 0.45)",
+              <div>
-                                }}
+                <img
-                            >
+                  src={previewImage}
-                                Max size of file 2 mb
+                  alt="preview"
-                            </h5>
+                  style={{ width: "100%" }}
-                        </div>
+                />
-                        <div>
+              </div>
-                            <h5>Preview</h5>
+              <h5>{previewTitle}</h5>
-                            <div>
+              <h5>
-                                <img
+                {previewUpload}
-                                    src={previewImage}
+                {previewTitle && <span>{`${previewTitle ?? ""}`}</span>}
-                                    alt="preview"
+              </h5>
-                                    style={{width: "100%"}}
+            </div>
-                                />
+          </div>
-                            </div>
+        </Form.Item>
-                            <h5>{previewTitle}</h5>
+        <Form.Item
-                            <h5>{previewUpload}
+          name="amount"
-                                {previewTitle && <span>{`${previewTitle ?? ""}`}</span>}</h5>
+          label="amount"
-                        </div>
+          rules={[{ required: true, message: "Please input Amount!" }]}
-                    </div>
+        >
-                </Form.Item>
+          <Input />
-                <Form.Item
+        </Form.Item>
-                    name="amount"
+      </Form>
-                    label="amount"
+    </Modal>
-                    rules={[{required: true, message: 'Please input Amount!'}]}
+  );
-                >
-                    <Input/>
-                </Form.Item>
-            </Form>
-        </Modal>
-    );
 };

src/routes/app.js

@@ -10,6 +10,7 @@ import {Partner} from "../pages/Config/Partner";
 import {Supplier} from "../pages/Config/Supplier";
 import {Category} from "../pages/Product/Category";
 import {Payback} from "../pages/Payback/Payback";
+import {PaybackFromUser} from "../pages/Payback/PaybackFromUser";
 import {Subcategory} from "../pages/Product/Subcategory";
 
 export const LINKS = {
@@ -24,6 +25,7 @@ export const LINKS = {
     SUPPLIER: "/app/supplier",
     CATEGORY: "/app/category",
     PAYBACK: "/app/payback",
+    PAYBACKFROMUSER: "/app/payback-from-user",
     SUBCATEGORY: "/app/subcategory",
 
 };
@@ -36,6 +38,9 @@ export const AppRoute = () => {
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>
+        <Route path={LINKS.PAYBACKFROMUSER}>
+            <PaybackFromUser/>
+        </Route>
         <Route path={LINKS.CATEGORY}>
             <Category/>
         </Route>

src/store/index.js

@@ -10,7 +10,7 @@ import { Transaction } from "./transaction";
 import { TokenUtil } from "../utils/token";
 import { Category } from "./category";
 import { Subcategory } from "./subcategory";
-
+import { Payback } from "./payback";
 import { Role } from "./role";
 
 export class Store {
@@ -23,6 +23,7 @@ export class Store {
     supplier = new Supplier(this);
     commission = new Commission(this);
     category = new Category(this);
+    payback = new Payback(this);
     transaction = new Transaction(this);
     subcategory = new Subcategory(this);
     role = new Role(this);

src/store/payback.js

@@ -0,0 +1,91 @@
+import { makeAutoObservable } from "mobx";
+import { http } from "../utils/http";
+
+export class Payback {
+  page = 0;
+  pageSize = 10;
+  data = [];
+  total_data = 0;
+  filterCategory = null;
+  visibleModalPayback = false;
+
+  pageCategories = 0;
+  pageSizeCategories = 10;
+  dataCategories = [];
+  total_dataCategories = 0;
+
+  pageSubCategories = 0;
+  pageSizeSubCategories = 10;
+  dataSubCategories = [];
+  total_dataSubCategories = 0;
+
+  constructor(ctx) {
+    this.ctx = ctx;
+    makeAutoObservable(this);
+  }
+
+  async getData() {
+    try {
+      const response = await http.get(
+        `/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}`
+      );
+      //console.log(response)
+      this.data =
+        response.body[0].map((item, idx) => {
+          item.key = idx;
+          return item;
+        }) ?? [];
+
+      this.total_data = response.body.total_data ?? 0;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  async getDataUser() {
+    try {
+      const response = await http.get(
+        `/transaction/deposit-return/confirmation?page=${this.page}&pageSize=${this.pageSize}`
+      );
+      console.log(response);
+      this.data =
+        response.body[0].map((item, idx) => {
+          item.key = idx;
+          return item;
+        }) ?? [];
+
+      this.total_data = response.body.total_data ?? 0;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  async update(id, data) {
+    try {
+      const response = await http.put(`/config/commission/${id}`).send(data);
+      await this.getData();
+      return response;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  async delete(id) {
+    try {
+      const response = await http.del(`/product/${id}`);
+      await this.getData();
+      return response;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  async create(data) {
+    try {
+    console.log(data)
+      return await http.post("/transaction/deposit-return").send(data);
+      
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}