diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index a0fb07b..e22715a 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -10,6 +10,7 @@ import {
   Space,
   Table,
   Tag,
+  InputNumber,
 } from "antd";
 import { observer } from "mobx-react-lite";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
@@ -40,7 +41,7 @@ export const SupplierComponent = observer((props) => {
   const handleTopup = (data) => {
     console.log(data, "isi data");
     form.setFieldsValue({
-      code: data.code,
+      supplier: data.code,
     });
     store.supplier.visibleModalTransaction = true;
     store.supplier.code = data.code;
@@ -163,6 +164,26 @@ export const SupplierComponent = observer((props) => {
     });
   };
 
+  const handleCancelTransaction = () => {
+    store.supplier.visibleModalTransaction = false;
+  };
+
+  const handleSubmitTransaction = async (data) => {
+    console.log(data, ':)')
+    try {
+      modalLoader.setLoading(true);
+      const response = await store.supplier.createTransaction(data);
+      message.success(response?.body?.message || "Success Top Up");
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error(e.response?.body?.message || "Failed Top Up");
+    }
+
+    modalLoader.setLoading(false);
+    store.supplier.visibleModalTransaction = false;
+    form.resetFields();
+  };
+
   const handleCancel = () => {
     setIdData("");
     store.supplier.visibleModalSupplier = false;
@@ -374,53 +395,56 @@ export const SupplierComponent = observer((props) => {
             >
               <Input />
             </Form.Item>
-            <Form.Item
-                name="name"
-                label="Name"
-                rules={[{ required: true, message: "Please input url!" }]}
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item
-                name="url"
-                label="Url"
-                rules={[{ required: true, message: "Please input url!" }]}
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item
-                name="irs_pin"
-                label="Pin"
-                rules={[{ required: true, message: "Please input url!" }]}
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item
-                name="irs_user"
-                label="User"
-                rules={[{ required: true, message: "Please input url!" }]}
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item
-                name="irs_pass"
-                label="Password"
-                rules={[{ required: true, message: "Please input url!" }]}
-            >
-              <Input />
-            </Form.Item>
-            {!idData && (
-                <Form.Item
-                    name="code"
-                    label="Kode"
-                    rules={[{ required: true, message: "Please input kode!" }]}
-                >
-                  <Input />
-                </Form.Item>
-            )}
-          </Form>
-        </Modal>
-        <TopupsaldoModal code={store.supplier.code} />
-      </div>
+        </Form>
+      </Modal>
+      <Modal
+        visible={store.supplier.visibleModalTransaction}
+        title="Top Up Saldo"
+        okText="Top Up"
+        cancelText="Batal"
+        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!" }]}
+          >
+            <Input disabled={true} />
+          </Form.Item>
+          <Form.Item
+            name="amount"
+            label="Nominal"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <InputNumber
+              style={{ width: "100%" }}
+              formatter={(value) =>
+                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+              }
+              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
   );
 });