Menu Supplier

src/pages/Config/Supplier.js

@@ -1,6 +1,21 @@
 import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Input, Row, Tabs } from "antd";
-import { FilterOutlined, PlusSquareOutlined,DownloadOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Card,
+  Col,
+  Input,
+  Row,
+  Tabs,
+  Form,
+  message,
+  Modal,
+  Select,
+} from "antd";
+import {
+  FilterOutlined,
+  PlusSquareOutlined,
+  DownloadOutlined,
+} from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -9,9 +24,12 @@ import { LINKS } from "../../routes/app";
 
 const { TabPane } = Tabs;
 const { Search } = Input;
+const { Option } = Select;
 
 export const Supplier = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [form] = Form.useForm();
   const store = useStore();
 
   useEffect(() => {
@@ -33,7 +51,24 @@ export const Supplier = observer(() => {
   //     store.product.filterCategory = key;
   //     console.log(key);
   // };
-
+  const handleCancelTransaction = () => {
+    store.supplier.visibleModalTransaction = false;
+  };
+  const handleSubmitTransaction = async (data) => {
+    console.log(data, "isi data2");
+    setConfirmLoading(true);
+    try {
+      await store.supplier.createTransaction(data);
+      message.success("Success Top Up");
+      //await store.supplier.getData()
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error("Failed Top Up");
+    }
+    setConfirmLoading(false);
+    store.supplier.visibleModalTransaction = false;
+    form.resetFields();
+  };
   const routeData = [
     {
       route: LINKS.HOME,
@@ -44,7 +79,7 @@ export const Supplier = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Supplier</span>,
     },
   ];
-
+  
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -78,7 +113,7 @@ export const Supplier = observer(() => {
           <Button
             onClick={() => (store.supplier.visibleModalTransaction = true)}
           >
-           <DownloadOutlined /> Top Up Saldo
+            <DownloadOutlined /> Top Up Saldo
           </Button>
         </Col>
         <Tabs
@@ -92,6 +127,51 @@ export const Supplier = observer(() => {
           ))
         </Tabs>
       </Card>
+      <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">
+          <Form.Item
+            name="supplier"
+            label="Supplier"
+            rules={[{ required: true, message: "Please input supplier!" }]}
+          >
+            <Select placeholder="Select Code Supplier" allowClear>
+              {store.supplier.data.map((item) => (
+                <Option value={item.code} key={item.code}>
+                  {item.code}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item
+            name="amount"
+            label="Amount"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 });