Pages Supplier

src/component/CommissionComponent.js

@@ -1,244 +1,178 @@
-import React, {useEffect, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-import {capitalize} from "lodash";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Select,
+  Space,
+  Table,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { capitalize } from "lodash";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
 
 export const CommissionComponent = observer((props) => {
-    const store = useStore();
-    const [form] = Form.useForm();
-    const {Option} = Select;
-    const history = useHistory();
-    const [idData, setIdData] = useState('');
-    const [confirmLoading, setConfirmLoading] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
+  const store = useStore();
+  const [form] = Form.useForm();
+  const { Option } = Select;
+  const history = useHistory();
+  const [idData, setIdData] = useState("");
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-    useEffect(() => {
-        const init = async () => {
-            try {
-                setIsLoading(true);
-                //await store.product.getDataSubCategories();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
-
-        init();
-    }, []);
-
-    const handleEditButton = (data) => {
-        console.log(data, "isi data")
-        form.setFieldsValue({
-            name: data.name,
-            npwp: data.npwp,
-            address: data.address,
-            
-        });
-        store.commission.visibleModalCommission = true;
-        setIdData(data.id);
-    }
-
-    const columns = [
-        {
-          title: "Name",
-          dataIndex: "name",
-          key: "name",
-        },
-        {
-          title: "Npwp",
-          dataIndex: "npwp",
-          key: "npwp",
-        },
-        {
-          title: "Address",
-          dataIndex: "address",
-          key: "address",
-        },
-        {
-          title: "Status",
-          dataIndex: "status",
-          key: "status",
-          render: (text, record) => (
-            <Tag
-              color={record?.status === true ? "processing" : "#E3E8EE"}
-              style={{ color: "#4F566B" }}
-            >
-              {record?.status === true ? " ACTIVE" : "INACTIVE"}
-            </Tag>
-          ),
-        },
-        {
-            title: "Action",
-            key: "action",
-            render: (text, record) => (
-                <Space size="middle">
-                    <Button
-                        onClick={() => handleEditButton(record)}
-                    >Edit</Button>
-                    <Button
-                        onClick={() => handleDelete(record.id)}
-                    >
-                        Delete
-                    </Button>
-                </Space>
-            ),
-        },
-      ];
-
-    const deleteData = async (id) => {
-        try {
-            console.log(id);
-            await store.commission.delete(id);
-            message.success("Data Berhasil Dihapus");
-            history.push(LINKS.PRODUCT);
-        } catch (err) {
-            console.log("error", err);
-            message.error("Gagal menghapus");
-        }
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        //await store.product.getDataSubCategories();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
     };
 
-    const handleDelete = (id) => {
-        Modal.confirm({
-            title: "Are you sure delete this record?",
-            icon: <ExclamationCircleOutlined/>,
-            okText: "Yes",
-            okType: "primary",
-            cancelText: "Cancel",
-            onOk() {
-                return deleteData(id);
-            },
-            onCancel() {
-                console.log("Cancel");
-            },
-        });
-    };
+    init();
+  }, []);
 
-    const handleCancel = () => {
-        setIdData('')
-        store.commission.visibleModalCommission = false;
+  const handleEditButton = (data) => {
+    console.log(data, "isi data");
+    form.setFieldsValue({
+      value: data.commission,
+    });
+    store.commission.visibleModalCommission = true;
+    setIdData(data.id);
+  };
+
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "Amount",
+      dataIndex: "commission",
+      key: "commission",
+    },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+        <Space size="middle">
+          <Button onClick={() => handleEditButton(record)}>Edit</Button>
+        </Space>
+      ),
+    },
+  ];
+
+  const deleteData = async (id) => {
+    try {
+      console.log(id);
+      await store.commission.delete(id);
+      message.success("Data Berhasil Dihapus");
+      history.push(LINKS.PRODUCT);
+    } catch (err) {
+      console.log("error", err);
+      message.error("Gagal menghapus");
     }
+  };
 
-    const handleSubmit = async (data) => {
-        console.log(data, "isi data2")
-        if (idData !== '') {
-            setConfirmLoading(true);
-            try {
-                await store.commission.update(idData, data)
-                message.success("Success Update Data Member")
-            } catch (e) {
-                message.error("Failed Update Data Member")
-            }
-            setConfirmLoading(false);
-            store.commission.visibleModalCommission = false;
-            setIdData('');
-            form.resetFields();
-        } else {
-            setConfirmLoading(true);
-            try {
-                await store.commission.create(data)
-                message.success("Success Add New Member")
-            } catch (e) {
-                console.log(e, "apa errornya")
-                message.error("Failed Add Member")
-            }
-            setConfirmLoading(false);
-            store.commission.visibleModalCommission = false;
-            setIdData('');
-            form.resetFields();
-        }
+  const handleCancel = () => {
+    setIdData("");
+    store.commission.visibleModalCommission = false;
+  };
+
+  const handleSubmit = async (data) => {
+    console.log(data, "isi data2");
+    if (idData !== "") {
+      setConfirmLoading(true);
+      try {
+        await store.commission.update(idData, data);
+        message.success("Success Update Data Member");
+      } catch (e) {
+        message.error("Failed Update Data Member");
+      }
+      setConfirmLoading(false);
+      store.commission.visibleModalCommission = false;
+      setIdData("");
+      form.resetFields();
+    } else {
+      setConfirmLoading(true);
+      try {
+        await store.commission.create(data);
+        message.success("Success Add New Member");
+      } catch (e) {
+        console.log(e, "apa errornya");
+        message.error("Failed Add Member");
+      }
+      setConfirmLoading(false);
+      store.commission.visibleModalCommission = false;
+      setIdData("");
+      form.resetFields();
     }
+  };
 
-    return (
-        <div>
-            <Table
-                style={{textAlign: "center"}}
-                columns={columns}
-                dataSource={store.commission.data}
-                bordered
-                pagination={{
-                    pageSize: store.product.pageSize,
-                    total: store.product.total_data,
-                    current: store.product.page + 1,
-                    showSizeChanger: true,
-                    simple: false
-                }}
-                onChange={async (page) => {
-                    let pageNumber = page.current;
-                    store.commission.pageSize = page.pageSize;
-                    store.commission.page = pageNumber - 1;
-                    // store.membership.isLoading = true;
-                    await store.commission.getData();
-                    // store.membership.isLoading = false;
-                }}
-            />
+  return (
+    <div>
+      <Table
+        style={{ textAlign: "center" }}
+        columns={columns}
+        dataSource={store.commission.data}
+        bordered
+        pagination={{
+          pageSize: store.product.pageSize,
+          total: store.product.total_data,
+          current: store.product.page + 1,
+          showSizeChanger: true,
+          simple: false,
+        }}
+        onChange={async (page) => {
+          let pageNumber = page.current;
+          store.commission.pageSize = page.pageSize;
+          store.commission.page = pageNumber - 1;
+          // store.membership.isLoading = true;
+          await store.commission.getData();
+          // store.membership.isLoading = false;
+        }}
+      />
 
-            <Modal
-                visible={store.commission.visibleModalCommission}
-                title={idData ? "Edit Commission" : "Create a new commission"}
-                okText={idData ? "Edit" : "Create"}
-                cancelText="Cancel"
-                onCancel={() => {
-                    form.resetFields();
-                    handleCancel();
-                }}
-                onOk={() => {
-                    form
-                        .validateFields()
-                        .then((values) => {
-                            console.log(values, "isi form")
-                            handleSubmit(values);
-                            form.resetFields();
-                        })
-                        .catch((info) => {
-                            console.error("Validate Failed:", info);
-                        });
-                }}
-            >
-                <Form
-                    form={form}
-                    layout="vertical"
-                >
-                    <Form.Item
-                    name="name"
-                    label="Name"
-                    rules={[{required: true, message: 'Please input name!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="owner"
-                    label="Owner"
-                    rules={[{required: true, message: 'Please input owner!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="password_account"
-                    label="Password Account"
-                    rules={[{required: true, message: 'Please input password account!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="npwp"
-                    label="Npwp"
-                    rules={[{required: true, message: 'Please input npwp!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="address"
-                    label="address"
-                    rules={[{required: true, message: 'Please input password!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                </Form>
-            </Modal>
-        </div>
-    );
+      <Modal
+        visible={store.commission.visibleModalCommission}
+        title={idData ? "Edit Commission" : "Create a new commission"}
+        okText={idData ? "Edit" : "Create"}
+        cancelText="Cancel"
+        onCancel={() => {
+          form.resetFields();
+          handleCancel();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmit(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="value"
+            label="Commission"
+            rules={[{ required: true, message: "Please input commission!" }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
 });

src/component/SupplierComponent.js

@@ -1,43 +1,23 @@
 import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Form,
-  Input,
-  message,
-  Modal,
-  Select,
-  Space,
-  Table,
-  Tag,
-} from "antd";
+import { Button, Form, Input, message, Modal, Space, Table, Tag } from "antd";
 import { observer } from "mobx-react-lite";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
-import { capitalize } from "lodash";
 import { useStore } from "../utils/useStore";
 import { LINKS } from "../routes/app";
+import { TopupsaldoModal } from "./TopupsaldoModal";
 
 export const SupplierComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  //const [formEdit] = Form.useForm();
-  const { Option } = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
-  const [confirmLoading, setConfirmLoading] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  const [code, setCode] = useState("");
 
   useEffect(() => {
     const init = async () => {
-      try {
-        setIsLoading(true);
-        await store.supplier.getData();
-        setIsLoading(false);
-      } catch (e) {
-        setIsLoading(false);
-      }
+      await store.supplier.getData();
     };
-
     init();
   }, []);
 
@@ -52,6 +32,14 @@ export const SupplierComponent = observer((props) => {
     setIdData(data.id);
   };
 
+  const handleTopup = (data) => {
+    console.log(data, "isi data");
+    form.setFieldsValue({
+      code: data.code,
+    });
+    store.supplier.visibleModalTransaction = true;
+    setCode(data.code);
+  };
   const changeStatus = async (id, isActive) => {
     const status = isActive ? "inactive" : "active";
     const status2 = isActive ? "Inactivating" : "Activating";
@@ -78,6 +66,12 @@ export const SupplierComponent = observer((props) => {
       dataIndex: "code",
       key: "code",
     },
+    ,
+    {
+      title: "Saldo",
+      dataIndex: "saldo",
+      key: "saldo",
+    },
     {
       title: "Status",
       dataIndex: "status",
@@ -85,8 +79,7 @@ export const SupplierComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B", cursor: "pointer" }}
-          onClick={() => changeStatus(record?.id, record?.status)}
+          style={{ color: "#4F566B"}}
         >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
@@ -98,7 +91,13 @@ export const SupplierComponent = observer((props) => {
       render: (text, record) => (
         <Space size="middle">
           <Button onClick={() => handleEditButton(record)}>Edit</Button>
-          <Button onClick={() => handleDelete(record.id)}>Delete</Button>
+          <Button
+            type={record?.status === true ? "danger" : "primary"}
+            onClick={() => changeStatus(record?.id, record?.status)}
+          >
+            {record?.status === true ? "INACTIVE" : "ACTIVE"}
+          </Button>
+          <Button onClick={() => handleTopup(record)}> Top Up Saldo</Button>
         </Space>
       ),
     },
@@ -140,7 +139,6 @@ export const SupplierComponent = observer((props) => {
   const handleSubmit = async (data) => {
     console.log(data, "isi data2");
     if (idData !== "") {
-      setConfirmLoading(true);
       try {
         await store.supplier.update(idData, data);
         message.success("Success Update Data Member");
@@ -148,21 +146,19 @@ export const SupplierComponent = observer((props) => {
       } catch (e) {
         message.error("Failed Update Data Member");
       }
-      setConfirmLoading(false);
+
       store.supplier.visibleModalSupplier = false;
       setIdData("");
       form.resetFields();
     } else {
-      setConfirmLoading(true);
       try {
         await store.supplier.create(data);
         message.success("Success Add New Member");
-        //await store.supplier.getData()
       } catch (e) {
         console.log(e, "apa errornya");
         message.error("Failed Add Member");
       }
-      setConfirmLoading(false);
+
       store.supplier.visibleModalSupplier = false;
       setIdData("");
       form.resetFields();
@@ -187,12 +183,9 @@ export const SupplierComponent = observer((props) => {
           let pageNumber = page.current;
           store.supplier.pageSize = page.pageSize;
           store.supplier.page = pageNumber - 1;
-          // store.membership.isLoading = true;
           await store.supplier.getData();
-          // store.membership.isLoading = false;
         }}
       />
-
       <Modal
         visible={store.supplier.visibleModalSupplier}
         title={idData ? "Edit Supplier" : "Create a new Supplier"}
@@ -232,6 +225,7 @@ export const SupplierComponent = observer((props) => {
           </Form.Item>
         </Form>
       </Modal>
+      <TopupsaldoModal code={code} />
     </div>
   );
 });

src/component/TopupsaldoModal.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { Form, Input, message, Modal } from "antd";
+import { observer } from "mobx-react-lite";
+import { useStore } from "../utils/useStore";
+
+export const TopupsaldoModal = observer((props) => {
+  const store = useStore();
+  const [form] = Form.useForm();
+
+  const handleCancelTransaction = () => {
+    store.supplier.visibleModalTransaction = false;
+  };
+  const handleSubmitTransaction = async (data) => {
+    console.log(data, "isi data2");
+
+    try {
+      await store.supplier.createTransaction(data);
+      message.success("Success Top Up");
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error("Failed Top Up");
+    }
+
+    store.supplier.visibleModalTransaction = false;
+    form.resetFields();
+  };
+  return (
+    <div>
+      <Modal
+        visible={store.supplier.visibleModalTransaction}
+        title="Top Up Saldo"
+        okText="Top Up"
+        cancelText="Cancel"
+        onCancel={() => {
+          form.resetFields();
+          handleCancelTransaction();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmitTransaction(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          initialValues={{ supplier: props.code }}
+        >
+          <Form.Item
+            name="supplier"
+            label="Supplier"
+            rules={[{ required: true, message: "Please input supplier!" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="amount"
+            label="Amount"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+});