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">
+        <Menu.Item key="payback-to-user">
           <Link to={LINKS.PAYBACK}>
             <DatabaseOutlined />
             <span>Payback</span>
           </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,29 +1,47 @@
-import React, {useState} from 'react';
+import React, { useState, useEffect } from "react";
-import {Button, Form, Image, Input, message, Modal, Upload} from 'antd';
+import {
+  Button,
+  Form,
+  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,
-                                 onCreate,
-                                 onCancel,
-                                 initialData,
-                             }) => {
   const [form] = Form.useForm();
   const store = useStore();
-
   const [fileList, setFileList] = useState([]);
   const [previewTitle, setPreviewTitle] = useState("");
   const [previewImage, setPreviewImage] = useState("");
   const [loading, setLoading] = useState(false);
   const [fileUrl, setFileUrl] = useState("");
   const firstIndexFileList = fileList[0];
+  const [isLoading, setIsLoading] = useState(false);
 
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        //await store.membership.getData();
+        //await store.role.getData();
+        await store.authentication.getProfile();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
+
+    init();
+  }, []);
   const beforeUpload = (file) => {
     let isPdf, isLt2M;
-        let allowedFile = ['image/jpeg', 'image/png', "application/pdf"];
+    let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
-        let isValid = allowedFile.includes(file.type)
+    let isValid = allowedFile.includes(file.type);
     if (!isValid) {
       message.error("You can only upload PDF or Image file!");
     }
@@ -33,7 +51,7 @@ export const PaybackModal = ({
       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;
@@ -64,9 +82,26 @@ export const PaybackModal = ({
   );
 
   const previewUpload = (
-        <Image className="w-full h-full" preview={false}
+    <Image
-               src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}/>
+      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");
+    }
+
+    store.payback.visibleModalPayback = false;
+    form.resetFields();
+  };
 
   return (
     <Modal
@@ -75,18 +110,19 @@ export const PaybackModal = ({
       okText={"Create"}
       cancelText="Cancel"
       onCancel={() => {
-                form.resetFields()
+        form.resetFields();
-                onCancel()
+        onCancel();
       }}
       onOk={() => {
         form
           .validateFields()
-                    .then(values => {
+          .then((values) => {
-                        onCreate(values);
+            handleSubmit(values);
-                        form.resetFields()
+            console.log(values);
+            form.resetFields();
           })
-                    .catch(info => {
+          .catch((info) => {
-                        console.log('Validate Failed:', info);
+            console.log("Validate Failed:", info);
           });
       }}
     >
@@ -96,26 +132,29 @@ export const PaybackModal = ({
         name="form_in_modal"
         initialValues={initialData}
       >
-
         <Form.Item
-                    name="name"
+          name="destination"
-                    label="name"
+          label="destination"
-                    rules={[{required: true, message: 'Please input Name!'}]}
+          rules={[{ required: true, message: "Please input Name!" }]}
+          initialValue={store.authentication.profileData.superior?.id}
         >
           <Input />
         </Form.Item>
         <Form.Item
           label="Upload Picture"
-                    name="picture"
+          name="image_prove"
+          initialValue={"tes"}
         >
-                    <div style={{
+          <div
+            style={{
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center",
-                    }}>
+            }}
+          >
             <div>
               <Upload
-                                name="file"
+                name="image_prove"
                 maxCount={1}
                 className="avatar-uploader"
                 // listType="picture-card"
@@ -124,6 +163,7 @@ export const PaybackModal = ({
                 beforeUpload={beforeUpload}
                 onPreview={handlePreview}
                 onChange={handleChange}
+                defaultValue={"tes"}
               >
                 {!firstIndexFileList ? uploadButton : null}
               </Upload>
@@ -146,15 +186,17 @@ export const PaybackModal = ({
                 />
               </div>
               <h5>{previewTitle}</h5>
-                            <h5>{previewUpload}
+              <h5>
-                                {previewTitle && <span>{`${previewTitle ?? ""}`}</span>}</h5>
+                {previewUpload}
+                {previewTitle && <span>{`${previewTitle ?? ""}`}</span>}
+              </h5>
             </div>
           </div>
         </Form.Item>
         <Form.Item
           name="amount"
           label="amount"
-                    rules={[{required: true, message: 'Please input Amount!'}]}
+          rules={[{ required: true, message: "Please input Amount!" }]}
         >
           <Input />
         </Form.Item>

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);
+    }
+  }
+}