diff --git a/src/component/TopupsaldoModal.js b/src/component/TopupsaldoModal.js
index 376869e..cd9ff86 100644
--- a/src/component/TopupsaldoModal.js
+++ b/src/component/TopupsaldoModal.js
@@ -1,8 +1,8 @@
-import React, {useContext} from "react";
-import {Form, Input, message, Modal} from "antd";
-import {observer} from "mobx-react-lite";
-import {useStore} from "../utils/useStore";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext } from "react";
+import { Form, Input, message, Modal, InputNumber } from "antd";
+import { observer } from "mobx-react-lite";
+import { useStore } from "../utils/useStore";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const TopupsaldoModal = observer((props) => {
   const store = useStore();
@@ -27,7 +27,7 @@ export const TopupsaldoModal = observer((props) => {
     store.supplier.visibleModalTransaction = false;
     form.resetFields();
   };
-  
+
   return (
     <div>
       <Modal
@@ -55,21 +55,27 @@ export const TopupsaldoModal = observer((props) => {
         <Form
           form={form}
           layout="vertical"
-          initialValues={{supplier: store.supplier.code}}
+          initialValues={{ supplier: store.supplier.code }}
         >
           <Form.Item
             name="supplier"
             label="Supplier"
-            rules={[{required: true, message: "Please input supplier!"}]}
+            rules={[{ required: true, message: "Please input supplier!" }]}
           >
-            <Input disabled={true}/>
+            <Input disabled={true} />
           </Form.Item>
           <Form.Item
             name="amount"
             label="Amount"
-            rules={[{required: true, message: "Please input amount!"}]}
+            rules={[{ required: true, message: "Please input amount!" }]}
           >
-            <Input/>
+            <InputNumber
+              style={{ width: "100%" }}
+              formatter={(value) =>
+                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+              }
+              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+            />
           </Form.Item>
         </Form>
       </Modal>
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index d2649d0..2583356 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -7,12 +7,14 @@ import {observer} from "mobx-react-lite";
 import {FilterOutlined} from "@ant-design/icons";
 import {format, parseISO} from "date-fns";
 import {ModalLoaderContext} from "../../utils/modal";
+import { useParams } from "react-router-dom";     
 
 const {Title, Text} = Typography;
 
 export const DetailUser = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const { id } = useParams();
 
   const routeData = [
     {
@@ -24,12 +26,13 @@ export const DetailUser = observer(() => {
       name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
     },
   ];
-
+console.log(id)
   useEffect(() => {
     (async () => {
       modalLoader.setLoading(true);
       await Promise.allSettled([
         store.authentication.getProfile(),
+        store.transaction.getDataHistoryTopUp(id),
         store.transaction.getDataHistoryTransaction(),
       ]);
       modalLoader.setLoading(false);
@@ -83,7 +86,7 @@ export const DetailUser = observer(() => {
                 <Text strong>Name</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+                <Text>{store.transaction.data.name}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Role</Text>
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 887861b..811b9fc 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -14,7 +14,7 @@ import {
   Space,
   Table,
   Tag,
-  InputNumber
+  InputNumber,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -101,10 +101,16 @@ export const Membership = observer(() => {
         };
       }
 
+      let response = null;
+
       (await store.authentication.userData.role) === "Admin"
-        ? store.transaction.distributeAdmin(data)
-        : store.transaction.distribute(data);
-      message.success("Success Top Up");
+        ? (response = await store.transaction.distributeAdmin(data))
+        : (response = await store.transaction.distribute(data));
+
+      response?.body?.statusCode === 200
+        ? message.success("Success Top Up")
+        : message.error("Failed Top Up");
+
       modalLoader.setLoading(false);
       //await store.supplier.getData()
     } catch (e) {
@@ -217,8 +223,9 @@ export const Membership = observer(() => {
           </Button>
           <Button
             onClick={async () => {
+              await store.transaction.getDataHistoryTopUp(record.id)
               history.push(LINKS.DETAILUSER.replace(":id", record.id));
-              //console.log(record.id)
+              console.log(record.id);
             }}
           >
             Detail
@@ -465,7 +472,7 @@ export const Membership = observer(() => {
         }}
       >
         <Form form={form} layout="vertical">
-          <Form.Item
+          {/* <Form.Item
             name="supplier"
             label="Supplier"
             rules={[{ required: true, message: "Please input supplier!" }]}
@@ -477,7 +484,7 @@ export const Membership = observer(() => {
                 </Option>
               ))}
             </Select>
-          </Form.Item>
+          </Form.Item> */}
           <Form.Item
             name="amount"
             label="Amount"
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 410e049..cad1219 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -22,10 +22,14 @@ export class Transaction {
     filterSubCategory = null;
 
     pageHistoryTransaction = 0;
+    pageHistoryTopUp = 0;
     // pageSizeHistoryTransaction = 10
     dataHistoryTransaction = [];
     total_dataHistoryTransaction = 0;
 
+    dataHistoryTopUp=[];
+    total_dataHistoryTopUp = 0;
+    
     constructor(ctx) {
         this.ctx = ctx;
         makeAutoObservable(this);
@@ -76,6 +80,18 @@ export class Transaction {
         }
     }
 
+    async getDataHistoryTopUp(id) {
+        try {
+            console.log("Top up")
+            const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
+            
+            this.dataHistoryTopUp = response.body.data ?? []
+            this.total_dataHistoryTopUp = response?.body?.count ?? 0
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     async create(data) {
         try {
             const response = await http.post('/product').send(data);