Pages Supplier

src/pages/Membership/Membership.js

@@ -12,6 +12,8 @@ import {
   Space,
   Table,
   Tag,
+  Form,
+  Select,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -19,14 +21,16 @@ import {
   ExclamationCircleOutlined,
   FilterOutlined,
   PlusSquareOutlined,
+  DownloadOutlined,
 } from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 
 const { Search } = Input;
-
+const { Option } = Select;
 export const Membership = observer(() => {
+  const [form] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
   const [initialData, setInitialData] = useState({});
@@ -62,6 +66,24 @@ export const Membership = observer(() => {
       message.error(`Failed ${status2} Membership`);
     }
   };
+  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 columns = [
     {
@@ -219,6 +241,19 @@ export const Membership = observer(() => {
               </Button>
             </Col>
           </Row>
+          <Col
+            span={24}
+            style={{
+              textAlign: "right",
+              marginBottom: store.ui.mediaQuery.isMobile ? 30 : 10,
+            }}
+          >
+            <Button
+              onClick={() => (store.supplier.visibleModalTransaction = true)}
+            >
+              <DownloadOutlined /> Top Up Saldo
+            </Button>
+          </Col>
           {store.ui.mediaQuery.isDesktop && (
             <Table
               key="1"
@@ -306,6 +341,51 @@ export const Membership = observer(() => {
           )}
         </div>
       </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>
       <MembershipModal
         visible={visibleModal}
         confirmLoading={confirmLoading}