diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index 7179628..e22715a 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -38,13 +38,13 @@ export const SupplierComponent = observer((props) => {
     setIdData(data.id);
   };
 
-  const handleTopup = async (data) => {
-    store.supplier.code = data.code;
-    console.log(data.code, "isi data");
+  const handleTopup = (data) => {
+    console.log(data, "isi data");
     form.setFieldsValue({
       supplier: data.code,
     });
     store.supplier.visibleModalTransaction = true;
+    store.supplier.code = data.code;
   };
 
   const changeStatus = async (id, isActive) => {
@@ -55,8 +55,8 @@ export const SupplierComponent = observer((props) => {
       const response = await store.supplier.changeStatus(id, status);
       modalLoader.setLoading(false);
       response?.body?.statusCode === 201
-        ? message.success(`Success ${status2} Supplier`)
-        : message.error(`Failed ${status2} Supplier`);
+          ? message.success(`Success ${status2} Supplier`)
+          : message.error(`Failed ${status2} Supplier`);
     } catch (err) {
       modalLoader.setLoading(false);
       console.log("error", err);
@@ -82,10 +82,10 @@ export const SupplierComponent = observer((props) => {
       key: ["coa", "amount"],
       width: "20%",
       render: (text, record) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Saldo di System",
@@ -93,10 +93,10 @@ export const SupplierComponent = observer((props) => {
       key: ["coa_undistribute", "amount"],
       width: "20%",
       render: (text, record) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Status",
@@ -104,12 +104,12 @@ export const SupplierComponent = observer((props) => {
       key: "status",
       width: "5%",
       render: (text, record) => (
-        <Tag
-          color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
-        >
-          {record?.status === true ? " ACTIVE" : "INACTIVE"}
-        </Tag>
+          <Tag
+              color={record?.status === true ? "processing" : "#E3E8EE"}
+              style={{ color: "#4F566B" }}
+          >
+            {record?.status === true ? " ACTIVE" : "INACTIVE"}
+          </Tag>
       ),
     },
     {
@@ -117,16 +117,16 @@ export const SupplierComponent = observer((props) => {
       key: "action",
       width: "20%",
       render: (text, record) => (
-        <Space size="middle">
-          <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>
-          <Button onClick={() => handleEditButton(record)}>Edit</Button>
-        </Space>
+          <Space size="middle">
+            <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>
+            <Button onClick={() => handleEditButton(record)}>Edit</Button>
+          </Space>
       ),
     },
   ];
@@ -185,7 +185,6 @@ export const SupplierComponent = observer((props) => {
   };
 
   const handleCancel = () => {
-    form.resetFields();
     setIdData("");
     store.supplier.visibleModalSupplier = false;
   };
@@ -197,12 +196,12 @@ export const SupplierComponent = observer((props) => {
         modalLoader.setLoading(true);
         const response = await store.supplier.update(idData, data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success(
-            response?.body?.message || "Berhasil Ubah Data Supplier"
-          )
-          : message.error(
-            response?.body?.message || "Gagal Ubah Data Supplier"
-          );
+            ? message.success(
+                response?.body?.message || "Berhasil Ubah Data Supplier"
+            )
+            : message.error(
+                response?.body?.message || "Gagal Ubah Data Supplier"
+            );
       } catch (e) {
         modalLoader.setLoading(false);
         message.error(e.response?.body?.message || "Gagal Ubah Data Supplier");
@@ -217,7 +216,7 @@ export const SupplierComponent = observer((props) => {
         const response = await store.supplier.create(data);
         if (response.status === 201) {
           message.success(
-            response?.body?.message || "Berhasil Tambah Supplier"
+              response?.body?.message || "Berhasil Tambah Supplier"
           );
           await store.supplier.getData();
         } else {
@@ -229,9 +228,9 @@ export const SupplierComponent = observer((props) => {
         console.log(e.result, "testingan1");
         if (e.response?.body?.error) {
           message.error(
-            e.response.body.error
-              ? "Supplier Tersebut Sudah Terdaftar"
-              : e.response.body.error
+              e.response.body.error
+                  ? "Supplier Tersebut Sudah Terdaftar"
+                  : e.response.body.error
           );
           modalLoader.setLoading(false);
           store.supplier.visibleModalSupplier = false;
@@ -250,195 +249,152 @@ export const SupplierComponent = observer((props) => {
   };
 
   return (
-    <div>
-      {store.ui.mediaQuery.isDesktop && (
-        <Table
-          style={{ textAlign: "center" }}
-          columns={columns}
-          dataSource={store.supplier.data}
-          bordered
-          pagination={{
-            pageSize: store.supplier.pageSize,
-            total: store.supplier.total_data,
-            current: store.supplier.page + 1,
-            showSizeChanger: true,
-            simple: false,
-          }}
-          onChange={async (page) => {
-            let pageNumber = page.current;
-            store.supplier.pageSize = page.pageSize;
-            store.supplier.page = pageNumber - 1;
-            modalLoader.setLoading(true);
-            await store.supplier.getData();
-            modalLoader.setLoading(false);
-          }}
-        />
-      )}
-      {store.ui.mediaQuery.isMobile && (
-        <List
-          itemLayout="horizontal"
-          position={"top"}
-          pagination={{
-            onChange: async (page, pageSize) => {
-              store.supplier.pageSize = pageSize;
-              store.supplier.page = page - 1;
-              modalLoader.setLoading(true);
-              await store.supplier.getData();
-              modalLoader.setLoading(false);
-            },
-            pageSize: store.supplier.pageSize,
-            total: store.supplier.total_data,
-            current: store.supplier.page + 1,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
-          }}
-          dataSource={store.supplier.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={[""].join(" ")}
-                    title={item.code}
-                    description={
-                      <div style={{}}>
-                        <p>
-                          <small>Name : {item.name}</small> <br />
-                          <small>Saldo Supplier : {item.coa.amount}</small>
-                          <br />
-                          <small>
-                            Saldo System : {item.coa_undistribute.amount}
-                          </small>
-                          <br />
-                          <Button
+      <div>
+        {store.ui.mediaQuery.isDesktop && (
+            <Table
+                style={{ textAlign: "center" }}
+                columns={columns}
+                dataSource={store.supplier.data}
+                bordered
+                pagination={{
+                  pageSize: store.supplier.pageSize,
+                  total: store.supplier.total_data,
+                  current: store.supplier.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.supplier.pageSize = page.pageSize;
+                  store.supplier.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await store.supplier.getData();
+                  modalLoader.setLoading(false);
+                }}
+            />
+        )}
+        {store.ui.mediaQuery.isMobile && (
+            <List
+                itemLayout="horizontal"
+                position={"top"}
+                pagination={{
+                  onChange: async (page, pageSize) => {
+                    store.supplier.pageSize = pageSize;
+                    store.supplier.page = page - 1;
+                    modalLoader.setLoading(true);
+                    await store.supplier.getData();
+                    modalLoader.setLoading(false);
+                  },
+                  pageSize: store.supplier.pageSize,
+                  total: store.supplier.total_data,
+                  current: store.supplier.page + 1,
+                  style: { marginBottom: "1rem", marginRight: "1rem" },
+                }}
+                dataSource={store.supplier.data}
+                style={{ padding: 0 }}
+                renderItem={(item) => {
+                  return (
+                      <div>
+                        <List.Item
+                            key={item.id}
                             style={{
-                              marginRight: 10,
+                              backgroundColor: "#ffffff",
+                              paddingTop: 0,
+                              paddingBottom: 0,
+                              display: "flex",
+                              flexDirection: "row",
+                              alignItems: "center",
+                              justifyContent: "center",
                             }}
-                            type={item?.status === true ? "danger" : "primary"}
-                            onClick={() => changeStatus(item?.id, item?.status)}
-                          >
-                            {item?.status === true ? "INACTIVE" : "ACTIVE"}
-                          </Button>
-                          <Button
-                            onClick={() => handleTopup(item)}
-                            style={{
-                              marginRight: 10,
-                            }}
-                          >
-                            Top Up Saldo
-                          </Button>
-                          <Button
-                            onClick={() => handleEditButton(item)}
-                            style={{
-                              marginBottom: 5,
-                            }}
-                          >
-                            Edit
-                          </Button>
-                          <Tag
-                            color={
-                              item?.status === true ? "processing" : "#E3E8EE"
-                            }
-                            style={{ color: "#4F566B" }}
-                          >
-                            {item?.status === true ? " ACTIVE" : "INACTIVE"}
-                          </Tag>
-                        </p>
-                        <p></p>
+                        >
+                          <List.Item.Meta
+                              className={[""].join(" ")}
+                              title={item.code}
+                              description={
+                                <div style={{}}>
+                                  <p>
+                                    <small>Name : {item.name}</small> <br />
+                                    <small>Saldo Supplier : {item.coa.amount}</small>
+                                    <br />
+                                    <small>
+                                      Saldo System : {item.coa_undistribute.amount}
+                                    </small>
+                                    <br />
+                                    <Button
+                                        style={{
+                                          marginRight: 10,
+                                        }}
+                                        type={item?.status === true ? "danger" : "primary"}
+                                        onClick={() => changeStatus(item?.id, item?.status)}
+                                    >
+                                      {item?.status === true ? "INACTIVE" : "ACTIVE"}
+                                    </Button>
+                                    <Button
+                                        onClick={() => handleTopup(item)}
+                                        style={{
+                                          marginRight: 10,
+                                        }}
+                                    >
+                                      Top Up Saldo
+                                    </Button>
+                                    <Button
+                                        onClick={() => handleEditButton(item)}
+                                        style={{
+                                          marginBottom: 5,
+                                        }}
+                                    >
+                                      Edit
+                                    </Button>
+                                    <Tag
+                                        color={
+                                          item?.status === true ? "processing" : "#E3E8EE"
+                                        }
+                                        style={{ color: "#4F566B" }}
+                                    >
+                                      {item?.status === true ? " ACTIVE" : "INACTIVE"}
+                                    </Tag>
+                                  </p>
+                                  <p></p>
+                                </div>
+                              }
+                          />
+                        </List.Item>
+                        <Divider plain style={{ margin: 0 }} />
                       </div>
-                    }
-                  />
-                </List.Item>
-                <Divider plain style={{ margin: 0 }} />
-              </div>
-            );
-          }}
-        />
-      )}
-      <Modal
-        visible={store.supplier.visibleModalSupplier}
-        title={idData ? "Edit Supplier" : "Buat Supplier Baru"}
-        okText={idData ? "Edit" : "Buat"}
-        cancelText="Batal"
-        onCancel={() => {
-          handleCancel();
-        }}
-        onOk={() => {
-          form
-            .validateFields()
-            .then((values) => {
-              console.log(values, "isi form");
-              handleSubmit(values);
+                  );
+                }}
+            />
+        )}
+        <Modal
+            visible={store.supplier.visibleModalSupplier}
+            title={idData ? "Edit Supplier" : "Buat Supplier Baru"}
+            okText={idData ? "Edit" : "Buat"}
+            cancelText="Batal"
+            onCancel={() => {
               form.resetFields();
-            })
-            .catch((info) => {
-              console.error("Validate Failed:", info);
-            });
-        }}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item
-            name="irs_id"
-            label="Id"
-            rules={[{ required: true, message: "Please input name!" }]}
-          >
-            <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 && (
+              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="code"
-              label="Kode"
-              rules={[{ required: true, message: "Please input kode!" }]}
+                name="irs_id"
+                label="Id"
+                rules={[{ required: true, message: "Please input name!" }]}
             >
               <Input />
             </Form.Item>
-          )}
         </Form>
       </Modal>
       <Modal
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 35a5b06..6c14b56 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -83,8 +83,8 @@ export const DetailUser = observer(() => {
       const response = await store.membership.changeStatus(id, status);
       modalLoader.setLoading(false);
       response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-        ? message.success(`Success ${status2} Membership`)
-        : message.error(`Failed ${status2} Membership`);
+          ? message.success(`Success ${status2} Membership`)
+          : message.error(`Failed ${status2} Membership`);
       await getData();
     } catch (err) {
       modalLoader.setLoading(false);
@@ -99,8 +99,8 @@ export const DetailUser = observer(() => {
       modalLoader.setLoading(false);
 
       response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-        ? message.success(`Success Withdraw Profit`)
-        : message.error(`Failed Withdraw Profit`);
+          ? message.success(`Success Withdraw Profit`)
+          : message.error(`Failed Withdraw Profit`);
       await getData();
     } catch (err) {
       modalLoader.setLoading(false);
@@ -124,24 +124,24 @@ export const DetailUser = observer(() => {
 
       if (response?.body?.statusCode === 200) {
         message.success(
-          initialData.isChangePassword
-            ? "Success Change Member Password"
-            : "Success Update Data Member"
+            initialData.isChangePassword
+                ? "Success Change Member Password"
+                : "Success Update Data Member"
         );
       } else {
         message.error(
-          initialData.isChangePassword
-            ? "Failed Change Member Password"
-            : "Failed Update Data Member"
+            initialData.isChangePassword
+                ? "Failed Change Member Password"
+                : "Failed Update Data Member"
         );
       }
       await getData();
     } catch (e) {
       modalLoader.setLoading(false);
       message.error(
-        initialData.isChangePassword
-          ? "Failed Update Member Password"
-          : "Failed Update Data Member"
+          initialData.isChangePassword
+              ? "Failed Update Member Password"
+              : "Failed Update Data Member"
       );
     }
     modalLoader.setLoading(false);
@@ -154,8 +154,8 @@ export const DetailUser = observer(() => {
       const response = await store.approval.resendUser(id);
       console.log(response);
       response.body.statusCode !== 201 && response.body.statusCode !== 200
-        ? message.error(response?.body?.message || `Failed Approve`)
-        : message.success(response?.body?.message || `Success Approve`);
+          ? message.error(response?.body?.message || `Failed Approve`)
+          : message.success(response?.body?.message || `Success Approve`);
       await getData();
     } catch (e) {
       console.error(e, "apa errornya");
@@ -172,11 +172,11 @@ export const DetailUser = observer(() => {
     modalLoader.setLoading(true);
     try {
       await store.transaction.exportTransaction(store.membership.dataDetail, dataDate)
-        // console.log('responseiniyak', response);
-        // message.success("Success export");
-        setModalExport(false);
-        modalLoader.setLoading(false);
-     } catch (e) {
+      // console.log('responseiniyak', response);
+      // message.success("Success export");
+      setModalExport(false);
+      modalLoader.setLoading(false);
+    } catch (e) {
       setModalExport(false);
       console.error(e, "apa errornya");
       message.error(e.response?.body?.message || "Failed to export");
@@ -195,10 +195,10 @@ export const DetailUser = observer(() => {
       dataIndex: "amount",
       key: "amount",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Tanggal Transaksi",
@@ -206,9 +206,9 @@ export const DetailUser = observer(() => {
       key: "transaction_date",
       render: (text, record) => {
         return (
-          <Text>
-            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
-          </Text>
+            <Text>
+              {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
+            </Text>
         );
       },
     },
@@ -235,20 +235,20 @@ export const DetailUser = observer(() => {
       dataIndex: "price",
       key: "price",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Sisa Saldo",
       dataIndex: "balance_remaining",
       key: "balance_remaining",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Pembeli",
@@ -271,21 +271,21 @@ export const DetailUser = observer(() => {
       key: "status",
       render: (text, record) => {
         return (
-          <Tag
-            color={
-              record.status === 1
-                ? "success"
-                : record.status === 0
-                  ? "warning"
-                  : "processing"
-            }
-          >
-            {record.status === 1
-              ? "Success"
-              : record.status === 0
-                ? "Pending"
-                : "Failed"}
-          </Tag>
+            <Tag
+                color={
+                  record.status === 1
+                      ? "success"
+                      : record.status === 0
+                          ? "warning"
+                          : "processing"
+                }
+            >
+              {record.status === 1
+                  ? "Success"
+                  : record.status === 0
+                      ? "Pending"
+                      : "Failed"}
+            </Tag>
         );
       },
     },
@@ -306,9 +306,9 @@ export const DetailUser = observer(() => {
       width: "15%",
       render: (text, record) => {
         return (
-          <Text>
-            {format(parseISO(record.created_at), "MM-dd-yyyy HH:mm:ss")}
-          </Text>
+            <Text>
+              {format(parseISO(record.created_at), "MM-dd-yyyy HH:mm:ss")}
+            </Text>
         );
       },
     },
@@ -349,23 +349,23 @@ export const DetailUser = observer(() => {
   ];
 
   const styleSaldoTitle = store.ui.mediaQuery.isDesktop
-    ? {
-      display: "flex",
-      justifyContent: "center",
-    }
-    : { fontSize: "0.75rem" };
+      ? {
+        display: "flex",
+        justifyContent: "center",
+      }
+      : { fontSize: "0.75rem" };
   const styleSaldoContent = store.ui.mediaQuery.isDesktop
-    ? {
-      fontSize: "1.25rem",
-      display: "flex",
-      justifyContent: "center",
-    }
-    : null;
+      ? {
+        fontSize: "1.25rem",
+        display: "flex",
+        justifyContent: "center",
+      }
+      : null;
   const data = store.authentication.listImage;
   console.log(data, "ini data");
   console.log(
-    store.authentication.dataProfit.userDetail?.image_identity,
-    "detail"
+      store.authentication.dataProfit.userDetail?.image_identity,
+      "detail"
   );
 
   const handleRemoveFilter = async () => {
@@ -375,10 +375,10 @@ export const DetailUser = observer(() => {
     setFilterStart([]);
     setFilterEnd([]);
     actionFilter === true
-      ? await store.transaction.getDataHistoryTopUp(id)
-      : await store.transaction.getDetailHistoryTransaction(
-        store.authentication.dataProfit.id
-      );
+        ? await store.transaction.getDataHistoryTopUp(id)
+        : await store.transaction.getDetailHistoryTransaction(
+            store.authentication.dataProfit.id
+        );
     // await store.transaction.getDetailHistoryTransaction(
     //   store.authentication.dataProfit.id
     // );
@@ -391,10 +391,10 @@ export const DetailUser = observer(() => {
     store.transaction.filterEnd = null;
     store.transaction.visibleModalFilterTransaction = false;
     actionFilter === true
-      ? await store.transaction.getDataHistoryTopUp(id)
-      : await store.transaction.getDetailHistoryTransaction(
-        store.authentication.dataProfit.id
-      );
+        ? await store.transaction.getDataHistoryTopUp(id)
+        : await store.transaction.getDetailHistoryTransaction(
+            store.authentication.dataProfit.id
+        );
     // await store.transaction.getDetailHistoryTransaction(
     //   store.authentication.dataProfit.id
     // );
@@ -411,10 +411,10 @@ export const DetailUser = observer(() => {
     ) + " 23:59:59";
     modalLoader.setLoading(true);
     actionFilter === true
-      ? await store.transaction.getDataHistoryTopUp(id)
-      : await store.transaction.getDetailHistoryTransaction(
-        store.authentication.dataProfit.id
-      );
+        ? await store.transaction.getDataHistoryTopUp(id)
+        : await store.transaction.getDetailHistoryTransaction(
+            store.authentication.dataProfit.id
+        );
     modalLoader.setLoading(false);
     store.transaction.filterStart = null;
     store.transaction.filterEnd = null;
@@ -423,12 +423,12 @@ export const DetailUser = observer(() => {
   };
   const footerLayoutFilter = [
     <Button
-      key={"remove"}
-      onClick={handleRemoveFilter}
-      style={{
-        backgroundColor: "#e74e5e",
-        color: "#fff",
-      }}
+        key={"remove"}
+        onClick={handleRemoveFilter}
+        style={{
+          backgroundColor: "#e74e5e",
+          color: "#fff",
+        }}
     >
       Hapus Filter
     </Button>,
@@ -436,729 +436,729 @@ export const DetailUser = observer(() => {
       Batal
     </Button>,
     <Button
-      key={"submit"}
-      onClick={handleSubmitFilter}
-      style={{
-        backgroundColor: "#4e79e7",
-        color: "#fff",
-      }}
+        key={"submit"}
+        onClick={handleSubmitFilter}
+        style={{
+          backgroundColor: "#4e79e7",
+          color: "#fff",
+        }}
     >
       Terapkan
     </Button>,
   ];
   return (
-    <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent
-        data={
-          store.authentication.userData.role === "Admin" ? routeData : dataRoute
-        }
-      />
-      <Card>
-        <Row style={{ marginBottom: 10 }}>
-          <Title strong level={2}>
-            Detail User
-          </Title>
-          <Col
-            lg={store.authentication.userData.role === "Admin" ? 18 : 17}
-            xs={store.authentication.userData.role === "Admin" ? 18 : 17}
-            style={{ textAlign: "right" }}
-          >
-            <Space
-              size="small"
-              align={"center"}
-              wrap={true}
-              style={{ textAlign: "center" }}
+      <div className={["ppob-container"].join(" ")}>
+        <BreadcumbComponent
+            data={
+              store.authentication.userData.role === "Admin" ? routeData : dataRoute
+            }
+        />
+        <Card>
+          <Row style={{ marginBottom: 10 }}>
+            <Title strong level={2}>
+              Detail User
+            </Title>
+            <Col
+                lg={store.authentication.userData.role === "Admin" ? 18 : 17}
+                xs={store.authentication.userData.role === "Admin" ? 18 : 17}
+                style={{ textAlign: "right" }}
             >
-              {store.authentication.userData.role === "Admin" && (
-                <Space>
-                  <Button
-                    type={
-                      store.membership.dataDetail.is_active === true
-                        ? "danger"
-                        : "primary"
-                    }
-                    onClick={() =>
-                      changeStatus(
-                        store.membership.dataDetail.id,
-                        store.membership.dataDetail.is_active
-                      )
-                    }
-                  >
-                    {store.membership.dataDetail.is_active === true
-                      ? "Inactive"
-                      : "Active"}
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setInitialData({
-                        id: store.membership.dataDetail.id,
-                        code: store.membership.dataDetail.partner.code,
-                        name: store.membership.dataDetail.userDetail.name,
-                        username: store.membership.dataDetail.username,
-                        identity_number:
-                          store.membership.dataDetail.userDetail
-                            .identity_number,
-                        image_identity:
-                          store.membership.dataDetail?.userDetail
-                            .image_identity,
-                        image_store:
-                          store.membership.dataDetail?.userDetail.image_store,
-                        phone_number:
-                          store.membership.dataDetail.userDetail.phone_number,
-                        roleId: store.membership.dataDetail.roles.id,
-                        isChangePassword: false,
-                      });
-                      console.log(
-                        store.membership.dataDetail.userDetail.identity_number
-                      );
-                      console.log(store.membership.dataDetail.userDetail.id);
-                      console.log(
-                        store.membership.dataDetail.userDetail.image_identity
-                      );
-                      console.log(
-                        store.membership.dataDetail.userDetail.image_store,
-                        "ini store"
-                      );
-                      console.log(store.membership.dataDetail.username);
-                      setVisibleModal(true);
-                    }}
-                  >
-                    Edit
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setInitialData({
-                        id: store.membership.dataDetail.id,
-                        name: store.membership.dataDetail.userDetail.name,
-                        username: store.membership.dataDetail.username,
-                        phone_number:
-                          store.membership.dataDetail.userDetail.phone_number,
-                        roleId: store.membership.dataDetail.roles.id,
-                        isChangePassword: true,
-                      });
-                      setVisibleModal(true);
-                    }}
-                  >
-                    Ganti Password
-                  </Button>
-                </Space>
-              )}
-              {((store.authentication.userData.role === "Sales" &&
-                store.membership.dataDetail.is_rejected === true &&
-                store.membership.dataDetail.is_active === false) ||
-                (store.authentication.userData.role === "Supervisor" &&
-                  store.membership.dataDetail.is_rejected === true &&
-                  store.membership.dataDetail.is_active === false)) && (
-                  <Button
-                    style={{
-                      backgroundColor: "#1bb91d",
-                      color: "#fff",
-                    }}
-                    onClick={() => handleResend(store.membership.dataDetail.id)}
-                  >
-                    Resend
-                  </Button>
+              <Space
+                  size="small"
+                  align={"center"}
+                  wrap={true}
+                  style={{ textAlign: "center" }}
+              >
+                {store.authentication.userData.role === "Admin" && (
+                    <Space>
+                      <Button
+                          type={
+                            store.membership.dataDetail.is_active === true
+                                ? "danger"
+                                : "primary"
+                          }
+                          onClick={() =>
+                              changeStatus(
+                                  store.membership.dataDetail.id,
+                                  store.membership.dataDetail.is_active
+                              )
+                          }
+                      >
+                        {store.membership.dataDetail.is_active === true
+                            ? "Inactive"
+                            : "Active"}
+                      </Button>
+                      <Button
+                          onClick={() => {
+                            setInitialData({
+                              id: store.membership.dataDetail.id,
+                              code: store.membership.dataDetail.partner.code,
+                              name: store.membership.dataDetail.userDetail.name,
+                              username: store.membership.dataDetail.username,
+                              identity_number:
+                              store.membership.dataDetail.userDetail
+                                  .identity_number,
+                              image_identity:
+                              store.membership.dataDetail?.userDetail
+                                  .image_identity,
+                              image_store:
+                              store.membership.dataDetail?.userDetail.image_store,
+                              phone_number:
+                              store.membership.dataDetail.userDetail.phone_number,
+                              roleId: store.membership.dataDetail.roles.id,
+                              isChangePassword: false,
+                            });
+                            console.log(
+                                store.membership.dataDetail.userDetail.identity_number
+                            );
+                            console.log(store.membership.dataDetail.userDetail.id);
+                            console.log(
+                                store.membership.dataDetail.userDetail.image_identity
+                            );
+                            console.log(
+                                store.membership.dataDetail.userDetail.image_store,
+                                "ini store"
+                            );
+                            console.log(store.membership.dataDetail.username);
+                            setVisibleModal(true);
+                          }}
+                      >
+                        Edit
+                      </Button>
+                      <Button
+                          onClick={() => {
+                            setInitialData({
+                              id: store.membership.dataDetail.id,
+                              name: store.membership.dataDetail.userDetail.name,
+                              username: store.membership.dataDetail.username,
+                              phone_number:
+                              store.membership.dataDetail.userDetail.phone_number,
+                              roleId: store.membership.dataDetail.roles.id,
+                              isChangePassword: true,
+                            });
+                            setVisibleModal(true);
+                          }}
+                      >
+                        Ganti Password
+                      </Button>
+                    </Space>
                 )}
-              {store.authentication.userData.role === "Admin" && (
-                <>
-                <Button
-                  onClick={() => withdrawProfit(store.membership.dataDetail.id)}
-                >
-                  Withdraw Profit
-                </Button>
-                <Button
-                  onClick={() => setModalExport(true)}
-                >
-                  <ExportOutlined /> Export
-                </Button>
-                </>
-              )}
-            </Space>
-          </Col>
-        </Row>
-        <Row style={{ marginBottom: 20 }}>
-          <Col lg={12} xs={24}>
-            <Row>
-              <Col span={12}>
-                <Text strong>Name</Text>
-              </Col>
-              <Col span={12}>
-                <Text>{store.authentication.dataProfit.userDetail?.name}</Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Username</Text>
-              </Col>
-              <Col span={12}>
-                <Text>{store.authentication.dataProfit.username}</Text>
-              </Col>
-              {/* <Col span={12}>
+                {((store.authentication.userData.role === "Sales" &&
+                        store.membership.dataDetail.is_rejected === true &&
+                        store.membership.dataDetail.is_active === false) ||
+                    (store.authentication.userData.role === "Supervisor" &&
+                        store.membership.dataDetail.is_rejected === true &&
+                        store.membership.dataDetail.is_active === false)) && (
+                    <Button
+                        style={{
+                          backgroundColor: "#1bb91d",
+                          color: "#fff",
+                        }}
+                        onClick={() => handleResend(store.membership.dataDetail.id)}
+                    >
+                      Resend
+                    </Button>
+                )}
+                {store.authentication.userData.role === "Admin" && (
+                    <>
+                      <Button
+                          onClick={() => withdrawProfit(store.membership.dataDetail.id)}
+                      >
+                        Withdraw Profit
+                      </Button>
+                      <Button
+                          onClick={() => setModalExport(true)}
+                      >
+                        <ExportOutlined /> Export
+                      </Button>
+                    </>
+                )}
+              </Space>
+            </Col>
+          </Row>
+          <Row style={{ marginBottom: 20 }}>
+            <Col lg={12} xs={24}>
+              <Row>
+                <Col span={12}>
+                  <Text strong>Name</Text>
+                </Col>
+                <Col span={12}>
+                  <Text>{store.authentication.dataProfit.userDetail?.name}</Text>
+                </Col>
+                <Col span={12}>
+                  <Text strong>Username</Text>
+                </Col>
+                <Col span={12}>
+                  <Text>{store.authentication.dataProfit.username}</Text>
+                </Col>
+                {/* <Col span={12}>
                 <Text strong>Role</Text>
               </Col>
               <Col span={12}>
                 <Text>{store.authentication.dataProfit.roles?.name}</Text>
               </Col> */}
-              <Col span={12}>
-                <Text strong>Phone Number</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {store.authentication.dataProfit.userDetail?.phone_number}
-                </Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Id Number</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {store.authentication.dataProfit.userDetail?.identity_number}
-                </Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Code</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {store.authentication.dataProfit.partner?.code}
-                </Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Status</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {store.authentication.dataProfit.is_active === true
-                    ? "Aktif"
-                    : "Inaktif"}
-                </Text>
-              </Col>
-              {store.authentication.userData.role === "Admin" &&
-                store.authentication.dataProfit.roles?.name !==
-                "Admin Partner" && (
-                  <Row>
-                    <Col span={12}>
-                      <Text strong>Foto Identitas</Text>
-                    </Col>
-                    <Col span={12}></Col>
-                    <Col span={12}>
-                      <Text>
-                        <Image
-                          src={
-                            store.authentication.dataProfit.userDetail
-                              ?.image_identity
-                              ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
-                              : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                          }
-                          style={{ width: "8vw" }}
-                        />
-                      </Text>
-                    </Col>
-                    {store.authentication.dataProfit.roles?.name ===
-                      "Retail" && (
-                        <Col span={24}>
-                          <Text strong>Foto Toko</Text>
-                          <Text>
-                            <Row>
-                              {store.authentication.listImage
+                <Col span={12}>
+                  <Text strong>Phone Number</Text>
+                </Col>
+                <Col span={12}>
+                  <Text>
+                    {store.authentication.dataProfit.userDetail?.phone_number}
+                  </Text>
+                </Col>
+                <Col span={12}>
+                  <Text strong>Id Number</Text>
+                </Col>
+                <Col span={12}>
+                  <Text>
+                    {store.authentication.dataProfit.userDetail?.identity_number}
+                  </Text>
+                </Col>
+                <Col span={12}>
+                  <Text strong>Code</Text>
+                </Col>
+                <Col span={12}>
+                  <Text>
+                    {store.authentication.dataProfit.partner?.code}
+                  </Text>
+                </Col>
+                <Col span={12}>
+                  <Text strong>Status</Text>
+                </Col>
+                <Col span={12}>
+                  <Text>
+                    {store.authentication.dataProfit.is_active === true
+                        ? "Aktif"
+                        : "Inaktif"}
+                  </Text>
+                </Col>
+                {store.authentication.userData.role === "Admin" &&
+                    store.authentication.dataProfit.roles?.name !==
+                    "Admin Partner" && (
+                        <Row>
+                          <Col span={12}>
+                            <Text strong>Foto Identitas</Text>
+                          </Col>
+                          <Col span={12}></Col>
+                          <Col span={12}>
+                            <Text>
+                              <Image
+                                  src={
+                                    store.authentication.dataProfit.userDetail
+                                        ?.image_identity
+                                        ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
+                                        : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                                  }
+                                  style={{ width: "8vw" }}
+                              />
+                            </Text>
+                          </Col>
+                          {store.authentication.dataProfit.roles?.name ===
+                              "Retail" && (
+                                  <Col span={24}>
+                                    <Text strong>Foto Toko</Text>
+                                    <Text>
+                                      <Row>
+                                        {store.authentication.listImage
+                                            ? store.authentication.listImage.map(
+                                                (item, index) => (
+                                                    <Image
+                                                        key={index}
+                                                        src={
+                                                          item
+                                                              ? `${appConfig.apiUrl}/config/image/${item}`
+                                                              : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                                                        }
+                                                        style={{ width: "8vw", marginRight: 10 }}
+                                                    />
+                                                )
+                                            )
+                                            : ""}
+                                      </Row>
+                                    </Text>
+                                  </Col>
+                              )}
+                        </Row>
+                    )}
+                {store.authentication.userData.role === "Sales" && (
+                    <Row>
+                      <Col span={12}>
+                        <Text strong>Foto Identitas</Text>
+                      </Col>
+                      <Col span={12}></Col>
+                      <Col span={12}>
+                        <Text>
+                          <Image
+                              src={
+                                store.authentication.dataProfit.userDetail
+                                    ?.image_identity
+                                    ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
+                                    : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                              }
+                              style={{ width: "10vw" }}
+                          />
+                        </Text>
+                      </Col>
+                      <Col span={24}>
+                        <Text strong>Foto Toko</Text>
+                        <Text>
+                          <Row>
+                            {store.authentication.listImage
                                 ? store.authentication.listImage.map(
-                                  (item, index) => (
-                                    <Image
-                                      key={index}
-                                      src={
-                                        item
-                                          ? `${appConfig.apiUrl}/config/image/${item}`
-                                          : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                                      }
-                                      style={{ width: "8vw", marginRight: 10 }}
-                                    />
-                                  )
+                                    (item, index) => (
+                                        <Image
+                                            key={index}
+                                            src={
+                                              item
+                                                  ? `${appConfig.apiUrl}/config/image/${item}`
+                                                  : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                                            }
+                                            style={{ width: "10vw", marginRight: 15 }}
+                                        />
+                                    )
                                 )
                                 : ""}
-                            </Row>
+                          </Row>
+                        </Text>
+                      </Col>
+                    </Row>
+                )}
+                {store.authentication.userData.role === "Supervisor" && (
+                    <Row>
+                      <Col span={12}>
+                        <Text strong>Foto Identitas</Text>
+                      </Col>
+                      <Col span={12}></Col>
+                      <Col span={12}>
+                        <Text>
+                          <Image
+                              src={
+                                store.authentication.dataProfit.userDetail
+                                    ?.image_identity
+                                    ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
+                                    : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                              }
+                              style={{ width: "10vw" }}
+                          />
+                        </Text>
+                      </Col>
+                    </Row>
+                )}
+              </Row>
+            </Col>
+            <Col lg={12} xs={24}>
+              <Row>
+                <Col lg={24} xs={24}>
+                  <Row>
+                    <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
+                      <Row justify={"center"}>
+                        <Col lg={12} xs={12}>
+                          <Title strong level={3} style={styleSaldoTitle}>
+                            Saldo
+                          </Title>
+                        </Col>
+                        <Col lg={24} xs={12}>
+                          <Text style={styleSaldoContent}>
+                            {new Intl.NumberFormat("id-ID", {
+                              style: "currency",
+                              currency: "IDR",
+                            }).format(
+                                store.authentication.dataProfit.wallet || 0
+                            )}
                           </Text>
                         </Col>
-                      )}
-                  </Row>
-                )}
-              {store.authentication.userData.role === "Sales" && (
-                <Row>
-                  <Col span={12}>
-                    <Text strong>Foto Identitas</Text>
-                  </Col>
-                  <Col span={12}></Col>
-                  <Col span={12}>
-                    <Text>
-                      <Image
-                        src={
-                          store.authentication.dataProfit.userDetail
-                            ?.image_identity
-                            ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
-                            : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                        }
-                        style={{ width: "10vw" }}
-                      />
-                    </Text>
-                  </Col>
-                  <Col span={24}>
-                    <Text strong>Foto Toko</Text>
-                    <Text>
-                      <Row>
-                        {store.authentication.listImage
-                          ? store.authentication.listImage.map(
-                            (item, index) => (
-                              <Image
-                                key={index}
-                                src={
-                                  item
-                                    ? `${appConfig.apiUrl}/config/image/${item}`
-                                    : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                                }
-                                style={{ width: "10vw", marginRight: 15 }}
-                              />
-                            )
-                          )
-                          : ""}
+                        <Col></Col>
                       </Row>
-                    </Text>
-                  </Col>
-                </Row>
-              )}
-              {store.authentication.userData.role === "Supervisor" && (
-                <Row>
-                  <Col span={12}>
-                    <Text strong>Foto Identitas</Text>
-                  </Col>
-                  <Col span={12}></Col>
-                  <Col span={12}>
-                    <Text>
-                      <Image
-                        src={
-                          store.authentication.dataProfit.userDetail
-                            ?.image_identity
-                            ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
-                            : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                        }
-                        style={{ width: "10vw" }}
-                      />
-                    </Text>
-                  </Col>
-                </Row>
-              )}
-            </Row>
-          </Col>
-          <Col lg={12} xs={24}>
-            <Row>
-              <Col lg={24} xs={24}>
-                <Row>
-                  <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
-                    <Row justify={"center"}>
-                      <Col lg={12} xs={12}>
-                        <Title strong level={3} style={styleSaldoTitle}>
-                          Saldo
-                        </Title>
-                      </Col>
-                      <Col lg={24} xs={12}>
-                        <Text style={styleSaldoContent}>
-                          {new Intl.NumberFormat("id-ID", {
-                            style: "currency",
-                            currency: "IDR",
-                          }).format(
-                            store.authentication.dataProfit.wallet || 0
-                          )}
-                        </Text>
-                      </Col>
-                      <Col></Col>
-                    </Row>
-                  </Col>
-                  <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
-                    <Row justify={"center"}>
-                      <Col lg={12} xs={12}>
-                        <Title strong level={3} style={styleSaldoTitle}>
-                          Keuntungan
-                        </Title>
-                      </Col>
-                      <Col lg={24} xs={12}>
-                        <Text style={styleSaldoContent}>
-                          {new Intl.NumberFormat("id-ID", {
-                            style: "currency",
-                            currency: "IDR",
-                          }).format(
-                            store.authentication.dataProfit?.profit || 0
-                          )}
-                        </Text>
-                      </Col>
-                      <Col></Col>
-                    </Row>
-                  </Col>
-                </Row>
-              </Col>
-            </Row>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24}>
-            <Tabs defaultActiveKey="1">
-              <TabPane tab="Riwayat Top Up" key="1">
-                {store.ui.mediaQuery.isDesktop && (
-                  <div>
-                    <Button
-                      style={{ marginBottom: "1rem", marginLeft: 5 }}
-                      onClick={() => {
-                        store.transaction.visibleModalFilterTransaction = true;
-                        store.transaction.page = 0;
-                        setAction(true);
-                      }}
-                    >
-                      <FilterOutlined />
-                      Filter
-                    </Button>
-                    <Table
-                      key="1"
-                      hasEmpty
-                      columns={columns}
-                      dataSource={store.transaction.dataHistoryTopUp}
-                      bordered
-                      pagination={{
-                        pageSize: store.transaction.pageSizeHistoryTopUp,
-                        total: store.transaction.total_dataHistoryTopUp,
-                        current: store.transaction.pageHistoryTopUp + 1,
-                        showSizeChanger: true,
-                        simple: false,
-                      }}
-                      onChange={async (page) => {
-                        let pageNumber = page.current;
-                        store.transaction.pageSize = page.pageSize;
-                        store.transaction.page = pageNumber - 1;
-                        modalLoader.setLoading(true);
-                        await getData();
-                        modalLoader.setLoading(false);
-                      }}
-                    />
-                  </div>
-                )}
-                {store.ui.mediaQuery.isMobile && (
-                  <div>
-                    <Button
-                      style={{ marginBottom: "1rem" }}
-                      onClick={() => {
-                        store.transaction.visibleModalFilterTransaction = true;
-                        store.transaction.page = 0;
-                        setAction(true);
-                      }}
-                    >
-                      <FilterOutlined />
-                      Filter
-                    </Button>
-                    <List
-                      itemLayout="horizontal"
-                      position={"top"}
-                      pagination={{
-                        onChange: async (page, pageSize) => {
-                          store.transaction.pageSize = pageSize;
-                          store.transaction.page = page - 1;
-                          modalLoader.setLoading(true);
-                          await getData();
-                          modalLoader.setLoading(false);
-                        },
-                        pageSize: store.transaction.pageSize,
-                        total: store.transaction.total_data,
-                        current: store.transaction.page + 1,
-                        style: { marginBottom: "1rem", marginRight: "1rem" },
-                      }}
-                      dataSource={store.transaction.dataHistoryTopUp}
-                      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.sender_name}
-                                description={
-                                  <div style={{}}>
-                                    <p>
-                                      <small>
-                                        Amount :{" "}
-                                        {new Intl.NumberFormat("id-ID", {
-                                          style: "currency",
-                                          currency: "IDR",
-                                        }).format(item.amount || 0)}
-                                      </small>{" "}
-                                      <br />
-                                      <small>
-                                        Transaction Date :{" "}
-                                        {format(
-                                          parseISO(item.transaction_date),
-                                          "dd-MM-yyyy hh:mm:ss"
-                                        )}
-                                      </small>{" "}
-                                      <br />
-                                    </p>
+                    </Col>
+                    <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
+                      <Row justify={"center"}>
+                        <Col lg={12} xs={12}>
+                          <Title strong level={3} style={styleSaldoTitle}>
+                            Keuntungan
+                          </Title>
+                        </Col>
+                        <Col lg={24} xs={12}>
+                          <Text style={styleSaldoContent}>
+                            {new Intl.NumberFormat("id-ID", {
+                              style: "currency",
+                              currency: "IDR",
+                            }).format(
+                                store.authentication.dataProfit?.profit || 0
+                            )}
+                          </Text>
+                        </Col>
+                        <Col></Col>
+                      </Row>
+                    </Col>
+                  </Row>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={24}>
+              <Tabs defaultActiveKey="1">
+                <TabPane tab="Riwayat Top Up" key="1">
+                  {store.ui.mediaQuery.isDesktop && (
+                      <div>
+                        <Button
+                            style={{ marginBottom: "1rem", marginLeft: 5 }}
+                            onClick={() => {
+                              store.transaction.visibleModalFilterTransaction = true;
+                              store.transaction.page = 0;
+                              setAction(true);
+                            }}
+                        >
+                          <FilterOutlined />
+                          Filter
+                        </Button>
+                        <Table
+                            key="1"
+                            hasEmpty
+                            columns={columns}
+                            dataSource={store.transaction.dataHistoryTopUp}
+                            bordered
+                            pagination={{
+                              pageSize: store.transaction.pageSizeHistoryTopUp,
+                              total: store.transaction.total_dataHistoryTopUp,
+                              current: store.transaction.pageHistoryTopUp + 1,
+                              showSizeChanger: true,
+                              simple: false,
+                            }}
+                            onChange={async (page) => {
+                              let pageNumber = page.current;
+                              store.transaction.pageSize = page.pageSize;
+                              store.transaction.page = pageNumber - 1;
+                              modalLoader.setLoading(true);
+                              await getData();
+                              modalLoader.setLoading(false);
+                            }}
+                        />
+                      </div>
+                  )}
+                  {store.ui.mediaQuery.isMobile && (
+                      <div>
+                        <Button
+                            style={{ marginBottom: "1rem" }}
+                            onClick={() => {
+                              store.transaction.visibleModalFilterTransaction = true;
+                              store.transaction.page = 0;
+                              setAction(true);
+                            }}
+                        >
+                          <FilterOutlined />
+                          Filter
+                        </Button>
+                        <List
+                            itemLayout="horizontal"
+                            position={"top"}
+                            pagination={{
+                              onChange: async (page, pageSize) => {
+                                store.transaction.pageSize = pageSize;
+                                store.transaction.page = page - 1;
+                                modalLoader.setLoading(true);
+                                await getData();
+                                modalLoader.setLoading(false);
+                              },
+                              pageSize: store.transaction.pageSize,
+                              total: store.transaction.total_data,
+                              current: store.transaction.page + 1,
+                              style: { marginBottom: "1rem", marginRight: "1rem" },
+                            }}
+                            dataSource={store.transaction.dataHistoryTopUp}
+                            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.sender_name}
+                                          description={
+                                            <div style={{}}>
+                                              <p>
+                                                <small>
+                                                  Amount :{" "}
+                                                  {new Intl.NumberFormat("id-ID", {
+                                                    style: "currency",
+                                                    currency: "IDR",
+                                                  }).format(item.amount || 0)}
+                                                </small>{" "}
+                                                <br />
+                                                <small>
+                                                  Transaction Date :{" "}
+                                                  {format(
+                                                      parseISO(item.transaction_date),
+                                                      "dd-MM-yyyy hh:mm:ss"
+                                                  )}
+                                                </small>{" "}
+                                                <br />
+                                              </p>
+                                            </div>
+                                          }
+                                      />
+                                    </List.Item>
+                                    <Divider plain style={{ margin: 0 }} />
                                   </div>
+                              );
+                            }}
+                        />
+                      </div>
+                  )}
+                </TabPane>
+                <TabPane tab="Riwayat Transaksi" key="2">
+                  {store.ui.mediaQuery.isDesktop && (
+                      <div>
+                        <Button
+                            style={{ marginBottom: "1rem", marginLeft: 5 }}
+                            onClick={() => {
+                              store.transaction.visibleModalFilterTransaction = true;
+                              store.transaction.page = 0;
+                            }}
+                        >
+                          <FilterOutlined />
+                          Filter
+                        </Button>
+                        <Table
+                            key="1"
+                            hasEmpty
+                            scroll={{ x: 1300 }}
+                            columns={column}
+                            dataSource={
+                              store.transaction.dataDetailHistoryTransactionDetailUser
+                            }
+                            bordered
+                            pagination={store.transaction.total_data > 1000 ? {
+                                  pageSizeOptions : [10, 20, 50, 100, 1000],
+                                  pageSize: store.transaction.pageSize,
+                                  total: store.transaction.total_data,
+                                  current: store.transaction.page + 1,
+                                  showSizeChanger: true,
+                                  simple: false,
+                                } :
+                                {
+                                  pageSize: store.transaction.pageSize,
+                                  total: store.transaction.total_data,
+                                  current: store.transaction.page + 1,
+                                  showSizeChanger: true,
+                                  simple: false,
                                 }
-                              />
-                            </List.Item>
-                            <Divider plain style={{ margin: 0 }} />
-                          </div>
-                        );
-                      }}
-                    />
-                  </div>
-                )}
-              </TabPane>
-              <TabPane tab="Riwayat Transaksi" key="2">
-                {store.ui.mediaQuery.isDesktop && (
-                  <div>
-                    <Button
-                      style={{ marginBottom: "1rem", marginLeft: 5 }}
-                      onClick={() => {
-                        store.transaction.visibleModalFilterTransaction = true;
-                        store.transaction.page = 0;
-                      }}
-                    >
-                      <FilterOutlined />
-                      Filter
-                    </Button>
-                    <Table
-                      key="1"
-                      hasEmpty
-                      scroll={{ x: 1300 }}
-                      columns={column}
-                      dataSource={
-                        store.transaction.dataDetailHistoryTransactionDetailUser
-                      }
-                      bordered
-                      pagination={store.transaction.total_data > 1000 ? {
-                        pageSizeOptions : [10, 20, 50, 100, 1000],
-                        pageSize: store.transaction.pageSize,
-                        total: store.transaction.total_data,
-                        current: store.transaction.page + 1,
-                        showSizeChanger: true,
-                        simple: false,
-                          } :
-                          {
-                            pageSize: store.transaction.pageSize,
-                            total: store.transaction.total_data,
-                            current: store.transaction.page + 1,
-                            showSizeChanger: true,
-                            simple: false,
-                          }
 
-                    }
-                      onChange={async (page) => {
-                        let pageNumber = page.current;
-                        store.transaction.pageSize = page.pageSize;
-                        store.transaction.page = pageNumber - 1;
-                        modalLoader.setLoading(true);
-                        await getData();
-                        modalLoader.setLoading(false);
-                      }}
-                    />
-                  </div>
-                )}
+                            }
+                            onChange={async (page) => {
+                              let pageNumber = page.current;
+                              store.transaction.pageSize = page.pageSize;
+                              store.transaction.page = pageNumber - 1;
+                              modalLoader.setLoading(true);
+                              await getData();
+                              modalLoader.setLoading(false);
+                            }}
+                        />
+                      </div>
+                  )}
 
-                {store.ui.mediaQuery.isMobile && (
-                  <div>
-                    <Button
-                      style={{ marginBottom: "1rem" }}
-                      onClick={() => {
-                        store.transaction.visibleModalFilterTransaction = true;
-                        store.transaction.page = 0;
-                      }}
-                    >
-                      <FilterOutlined />
-                      Filter
-                    </Button>
-                    <List
-                      itemLayout="horizontal"
-                      position={"top"}
-                      pagination={{
-                        onChange: async (page, pageSize) => {
-                          store.transaction.pageSize = pageSize;
-                          store.transaction.page = page - 1;
-                          modalLoader.setLoading(true);
-                          await getData();
-                          modalLoader.setLoading(false);
-                        },
-                        pageSize: store.transaction.pageSize,
-                        total: store.transaction.total_data,
-                        current: store.transaction.page + 1,
-                        style: { marginBottom: "1rem", marginRight: "1rem" },
-                      }}
-                      dataSource={
-                        store.transaction.dataDetailHistoryTransactionDetailUser
-                      }
-                      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={[""].join(" ")}
-                                title={item.name}
-                                description={
-                                  <div style={{}}>
-                                    <p>
-                                      <small>Pembeli : {item.buyer}</small>{" "}
-                                      <br />
-                                      <small>Price : {item.price}</small> <br />
-                                      <small>
-                                        Tujuan : {item.transaction_destination}
-                                      </small>{" "}
-                                      <br />
-                                      <small>
-                                        Kode Transaksi : {item.transaction_code}
-                                      </small>{" "}
-                                      <br />
-                                      <small>
-                                        Status :{" "}
-                                        {
-                                          <Tag
-                                            color={
-                                              item.status === 1
-                                                ? "success"
-                                                : item.status === 0
-                                                  ? "warning"
-                                                  : "processing"
-                                            }
-                                          >
-                                            {item.status === 1
-                                              ? "Success"
-                                              : item.status === 0
-                                                ? "Pending"
-                                                : "Failed"}
-                                          </Tag>
-                                        }
-                                      </small>{" "}
-                                      <br />
-                                      <small>
-                                        No.Seri : {item.seri_number}
-                                      </small>{" "}
-                                      <br />
-                                      <small>
-                                        IDTrx Mitra :{" "}
-                                        {item.partner_transaction_code}
-                                      </small>{" "}
-                                      <br />
-                                      <small>
-                                        Transaction Date :{" "}
-                                        {format(
-                                          parseISO(item.created_at),
-                                          "dd-MM-yyyy hh:mm:ss"
-                                        )}
-                                      </small>{" "}
-                                      <br />
-                                    </p>
+                  {store.ui.mediaQuery.isMobile && (
+                      <div>
+                        <Button
+                            style={{ marginBottom: "1rem" }}
+                            onClick={() => {
+                              store.transaction.visibleModalFilterTransaction = true;
+                              store.transaction.page = 0;
+                            }}
+                        >
+                          <FilterOutlined />
+                          Filter
+                        </Button>
+                        <List
+                            itemLayout="horizontal"
+                            position={"top"}
+                            pagination={{
+                              onChange: async (page, pageSize) => {
+                                store.transaction.pageSize = pageSize;
+                                store.transaction.page = page - 1;
+                                modalLoader.setLoading(true);
+                                await getData();
+                                modalLoader.setLoading(false);
+                              },
+                              pageSize: store.transaction.pageSize,
+                              total: store.transaction.total_data,
+                              current: store.transaction.page + 1,
+                              style: { marginBottom: "1rem", marginRight: "1rem" },
+                            }}
+                            dataSource={
+                              store.transaction.dataDetailHistoryTransactionDetailUser
+                            }
+                            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={[""].join(" ")}
+                                          title={item.name}
+                                          description={
+                                            <div style={{}}>
+                                              <p>
+                                                <small>Pembeli : {item.buyer}</small>{" "}
+                                                <br />
+                                                <small>Price : {item.price}</small> <br />
+                                                <small>
+                                                  Tujuan : {item.transaction_destination}
+                                                </small>{" "}
+                                                <br />
+                                                <small>
+                                                  Kode Transaksi : {item.transaction_code}
+                                                </small>{" "}
+                                                <br />
+                                                <small>
+                                                  Status :{" "}
+                                                  {
+                                                    <Tag
+                                                        color={
+                                                          item.status === 1
+                                                              ? "success"
+                                                              : item.status === 0
+                                                                  ? "warning"
+                                                                  : "processing"
+                                                        }
+                                                    >
+                                                      {item.status === 1
+                                                          ? "Success"
+                                                          : item.status === 0
+                                                              ? "Pending"
+                                                              : "Failed"}
+                                                    </Tag>
+                                                  }
+                                                </small>{" "}
+                                                <br />
+                                                <small>
+                                                  No.Seri : {item.seri_number}
+                                                </small>{" "}
+                                                <br />
+                                                <small>
+                                                  IDTrx Mitra :{" "}
+                                                  {item.partner_transaction_code}
+                                                </small>{" "}
+                                                <br />
+                                                <small>
+                                                  Transaction Date :{" "}
+                                                  {format(
+                                                      parseISO(item.created_at),
+                                                      "dd-MM-yyyy hh:mm:ss"
+                                                  )}
+                                                </small>{" "}
+                                                <br />
+                                              </p>
+                                            </div>
+                                          }
+                                      />
+                                    </List.Item>
+                                    <Divider plain style={{ margin: 0 }} />
                                   </div>
-                                }
-                              />
-                            </List.Item>
-                            <Divider plain style={{ margin: 0 }} />
-                          </div>
-                        );
-                      }}
-                    />
-                  </div>
-                )}
-              </TabPane>
-            </Tabs>
-          </Col>
-        </Row>
-        <div />
-      </Card>
-      <MembershipModal
-        visible={visibleModal}
-        confirmLoading={confirmLoading}
-        initialData={initialData}
-        onCreate={async (data) => {
-          onSubmit(data);
-        }}
-        onCancel={() => {
-          setInitialData({});
-          setVisibleModal(false);
-        }}
-      />
-      <Modal
-        visible={store.transaction.visibleModalFilterTransaction}
-        title={"Filter"}
-        footer={footerLayoutFilter}
-        onCancel={async () => {
-          //form.resetFields();
-          store.transaction.filterStart = null;
-          store.transaction.filterEnd = null;
-          store.transaction.visibleModalFilterTransaction = false;
-          actionFilter === true
-            ? await store.transaction.getDataHistoryTopUp(id)
-            : await store.transaction.getDetailHistoryTransaction(
-              store.authentication.dataProfit.id
-            );
-          //await store.transaction.getDetailHistoryTransaction();
-        }}
-      >
-        <Row>
-          <Col span={24}>
-            <Form layout="vertical" name="filter" form={form}>
-              <Form.Item
-                name="start_date"
-                label="Dari"
-                rules={[{ required: true, message: "Please input Date!" }]}
-              >
-                <DatePicker style={{ width: "100%" }} />
-              </Form.Item>
-              <Form.Item
-                name="end_date"
-                label="Sampai"
-                rules={[{ required: true, message: "Please input Date!" }]}
-              >
-                <DatePicker style={{ width: "100%" }} />
-              </Form.Item>
-            </Form>
-          </Col>
-        </Row>
-      </Modal>
-       <Modal
-        visible={modalExport}
-        title={"Export"}
-				onOk={handleSubmitExport}
-        onCancel={() => {
-          setModalExport(false);
-        }}
-      >
-        <Row>
-          <Col span={24}>
-            <Form layout="vertical" name="filter" form={formExport}>
-              <Form.Item
-                name="tanggal_export"
-                label="Tanggal"
-                rules={[{ required: true, message: "Please input Date!" }]}
-              >
-                <DatePicker style={{ width: "100%" }} />
-              </Form.Item>
-            </Form>
-          </Col>
-        </Row>
-      </Modal>
-    </div>
+                              );
+                            }}
+                        />
+                      </div>
+                  )}
+                </TabPane>
+              </Tabs>
+            </Col>
+          </Row>
+          <div />
+        </Card>
+        <MembershipModal
+            visible={visibleModal}
+            confirmLoading={confirmLoading}
+            initialData={initialData}
+            onCreate={async (data) => {
+              onSubmit(data);
+            }}
+            onCancel={() => {
+              setInitialData({});
+              setVisibleModal(false);
+            }}
+        />
+        <Modal
+            visible={store.transaction.visibleModalFilterTransaction}
+            title={"Filter"}
+            footer={footerLayoutFilter}
+            onCancel={async () => {
+              //form.resetFields();
+              store.transaction.filterStart = null;
+              store.transaction.filterEnd = null;
+              store.transaction.visibleModalFilterTransaction = false;
+              actionFilter === true
+                  ? await store.transaction.getDataHistoryTopUp(id)
+                  : await store.transaction.getDetailHistoryTransaction(
+                      store.authentication.dataProfit.id
+                  );
+              //await store.transaction.getDetailHistoryTransaction();
+            }}
+        >
+          <Row>
+            <Col span={24}>
+              <Form layout="vertical" name="filter" form={form}>
+                <Form.Item
+                    name="start_date"
+                    label="Dari"
+                    rules={[{ required: true, message: "Please input Date!" }]}
+                >
+                  <DatePicker style={{ width: "100%" }} />
+                </Form.Item>
+                <Form.Item
+                    name="end_date"
+                    label="Sampai"
+                    rules={[{ required: true, message: "Please input Date!" }]}
+                >
+                  <DatePicker style={{ width: "100%" }} />
+                </Form.Item>
+              </Form>
+            </Col>
+          </Row>
+        </Modal>
+        <Modal
+            visible={modalExport}
+            title={"Export"}
+            onOk={handleSubmitExport}
+            onCancel={() => {
+              setModalExport(false);
+            }}
+        >
+          <Row>
+            <Col span={24}>
+              <Form layout="vertical" name="filter" form={formExport}>
+                <Form.Item
+                    name="tanggal_export"
+                    label="Tanggal"
+                    rules={[{ required: true, message: "Please input Date!" }]}
+                >
+                  <DatePicker style={{ width: "100%" }} />
+                </Form.Item>
+              </Form>
+            </Col>
+          </Row>
+        </Modal>
+      </div>
   );
 });