diff --git a/package.json b/package.json
index 2ec0235..5ddb8ec 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "babel-plugin-named-asset-import": "^0.3.7",
     "babel-preset-react-app": "^10.0.0",
     "bfj": "^7.0.2",
+    "blob-util": "^2.0.2",
     "camelcase": "^6.2.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "css-loader": "4.3.0",
@@ -39,6 +40,7 @@
     "eslint-plugin-testing-library": "^3.9.2",
     "eslint-webpack-plugin": "^2.5.4",
     "file-loader": "6.2.0",
+    "file-saver": "^2.0.5",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index cb0c818..6643085 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -17,7 +17,7 @@ import {
   Form,
   DatePicker,
 } from "antd";
-import { UserOutlined, FilterOutlined } from "@ant-design/icons";
+import { UserOutlined, FilterOutlined,ExportOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -28,12 +28,14 @@ import { useParams } from "react-router-dom";
 import { appConfig } from "../../config/app";
 import { MembershipModal } from "./MembershipModal";
 import moment from "moment";
+import FileSaver from "file-saver";
 
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 export const DetailUser = observer(() => {
   const store = useStore();
   const [form] = Form.useForm();
+  const [formExport] = Form.useForm();
   const modalLoader = useContext(ModalLoaderContext);
   const { id } = useParams();
   const [visibleModal, setVisibleModal] = useState(false);
@@ -43,6 +45,7 @@ export const DetailUser = observer(() => {
   const [filterEnd, setFilterEnd] = useState([]);
   const [visibleHis, setVisibleHis] = useState(true);
   const [actionFilter, setAction] = useState(false);
+  const [modalExport, setModalExport] = useState(false);
 
   useEffect(() => {
     (async () => {
@@ -160,6 +163,29 @@ export const DetailUser = observer(() => {
     }
     modalLoader.setLoading(false);
   };
+
+  const handleSubmitExport = async () => {
+    const date = formExport.getFieldsValue();
+    const data ={
+      dateStart: moment(date.tanggal_export).format("YYYY-MM-DD")
+    }
+    modalLoader.setLoading(true);
+    try {
+      const response = await store.transaction.exportTransaction(store.membership.dataDetail.id, data)
+      FileSaver.saveAs(response, `Helo.xlsx`)
+      response.statusCode == 201 || response.statusCode == 200
+        ?  message.success(response?.body?.message || `Success Export`)
+        : message.error(response?.body?.message || `Failed Export`);
+     } catch (e) {
+      console.error(e, "apa errornya");
+      message.error(e.response?.body?.message || "Fail Approve");
+      setModalExport(false)
+      modalLoader.setLoading(false);
+    }
+    setModalExport(false)
+    modalLoader.setLoading(false);
+  };
+
   const columns = [
     {
       title: "Pengirim",
@@ -542,6 +568,11 @@ export const DetailUser = observer(() => {
                   Withdraw Profit
                 </Button>
               )}
+                <Button
+                  onClick={() => setModalExport(true)}
+                >
+                  <ExportOutlined /> Export
+                </Button>
             </Space>
           </Col>
         </Row>
@@ -787,9 +818,9 @@ export const DetailUser = observer(() => {
                       dataSource={store.transaction.dataHistoryTopUp}
                       bordered
                       pagination={{
-                        pageSize: store.transaction.pageSizeHistoryTransaction,
-                        total: store.transaction.total_dataHistoryTransaction,
-                        current: store.transaction.pageHistoryTransaction + 1,
+                        pageSize: store.transaction.pageSizeHistoryTopUp,
+                        total: store.transaction.total_dataHistoryTopUp,
+                        current: store.transaction.pageHistoryTopUp + 1,
                         showSizeChanger: true,
                         simple: false,
                       }}
@@ -1106,6 +1137,26 @@ export const DetailUser = observer(() => {
           </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>
   );
 });
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 54b9c09..db72d27 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -1,5 +1,6 @@
 import { makeAutoObservable } from "mobx";
 import { http } from "../utils/http";
+import { binaryStringToArrayBuffer, arrayBufferToBlob } from 'blob-util'
 
 export class Transaction {
   page = 0;
@@ -267,4 +268,21 @@ export class Transaction {
       console.error(e);
     }
   }
+
+   async exportTransaction(id,data) {
+    try {
+      const response = await http
+        .post(`/excel/history-user/export/${id}`)
+        .send(data)
+
+console.log(response, 'ress');
+      const apa = binaryStringToArrayBuffer(response.text)
+      const ini = arrayBufferToBlob(apa, 'text/xlsx')
+      let file = new File([ini], 'text.xlsx', {type: "text/xlsx;charset=utf-8"})
+console.log(file, 'ini file');
+      return file;
+    } catch (e) {
+      console.error(e);
+    }
+  }
 }