diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 32a275d..9521b40 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -15,26 +15,28 @@ import {
   Tag,
   Select,
   Option,
-  Typography,
+  Typography, DatePicker,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
 import {
   DownloadOutlined,
   PlusSquareOutlined,
-  FilterOutlined,
+  FilterOutlined, ExportOutlined,
 } from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useHistory } from "react-router-dom";
 import { ModalLoaderContext } from "../../utils/modal";
+import moment from "moment";
 
 export const Membership = observer(() => {
   const history = useHistory();
   const { Option } = Select;
   const { Title } = Typography;
   const [form] = Form.useForm();
+  const [formExport] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
   const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
@@ -44,6 +46,9 @@ export const Membership = observer(() => {
   const modalLoader = useContext(ModalLoaderContext);
   const [filterMembership, setFilterMembership] = useState([]);
   const [filterPartner, setFilterPartner] = useState([]);
+  const [filterBuyer, setFilterBuyer] = useState("");
+  const [modalExport, setModalExport] = useState(false);
+  const [filterSupplier, setFilterSupplier] = useState("");
 
   useEffect(() => {
     const init = async () => {
@@ -52,8 +57,10 @@ export const Membership = observer(() => {
         const isAdmin = store.authentication.userData.role === "Admin";
         await getData();
         await store.membership.getData();
+        await store.membership.getDataFilter();
         await store.membership.getDataBySuperior();
         await store.partner.getData();
+        await store.supplier.getData();
         await store.role.getData(isAdmin);
         modalLoader.setLoading(false);
       } catch (e) {
@@ -167,6 +174,29 @@ export const Membership = observer(() => {
     setDestination(null);
   };
 
+  const handleSubmitExport = async () => {
+    const date = formExport.getFieldsValue();
+    const dataAll ={
+      dateStart: moment(date.start_date).format("YYYY-MM-DD"),
+      dateEnd: moment(date.end_date).format("YYYY-MM-DD"),
+      supplier: filterSupplier,
+      buyer: filterBuyer
+    }
+    modalLoader.setLoading(true);
+    try {
+      await store.transaction.exportTransactionAll(dataAll)
+      // 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");
+      modalLoader.setLoading(false);
+    }
+  };
+
   const columns = [
     {
       title: "Nama",
@@ -344,6 +374,16 @@ export const Membership = observer(() => {
                   Filter
                 </Button>
               )}
+              {store.authentication.userData.role === "Admin" && (
+              <Button
+                  style={{
+                    marginLeft: "10px"
+                  }}
+                  onClick={() => setModalExport(true)}
+              >
+                <ExportOutlined /> Export
+              </Button>
+              )}
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
               {/* <Search
@@ -616,6 +656,78 @@ export const Membership = 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="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.Item
+                  name="supplier"
+                  label="Supplier"
+              >
+                <Select
+                    mode={"single"}
+                    placeholder="Choose Supplier"
+                    onChange={(val) => {
+                      setFilterSupplier(val);
+                    }}
+                    style={{ width: "100%" }}
+                    value={filterSupplier}
+                >
+                  <Option value="all">All Supplier</Option>
+                  {store.supplier.data.map((item) => (
+                      <Option value={item.id} key={item.id}>
+                        {item.name}
+                      </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+              <Form.Item
+                  name="buyer"
+                  label="Buyer"
+              >
+                <Select
+                    mode={"single"}
+                    placeholder="Choose Buyer"
+                    onChange={(val) => {
+                      setFilterBuyer(val);
+                    }}
+                    style={{ width: "100%" }}
+                    value={filterBuyer}
+                >
+                  <Option value="all">All Buyer</Option>
+                  {store.membership.dataFilterMembership.map((item) => (
+                      <Option value={item.id} key={item.id}>
+                        {item.name} ({item.username})
+                      </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Form>
+          </Col>
+        </Row>
+      </Modal>
     </div>
   );
 });
diff --git a/src/store/membership.js b/src/store/membership.js
index fda2a67..03ed3e7 100644
--- a/src/store/membership.js
+++ b/src/store/membership.js
@@ -5,6 +5,7 @@ export class Membership {
     page = 0;
     pageSize = 10
     data = [];
+    dataFilterMembership = [];
     total_data = 0;
     dataTotal=0;
 
@@ -44,6 +45,26 @@ export class Membership {
         }
     }
 
+    async getDataFilter() {
+        try {
+            const response = await http.get(`/users?page=${this.page}&pageSize=1000&superior=${this.filterMembership}&type=${this.filterPartner}`);
+            this.dataFilterMembership = response.body.data ?? []
+            this.dataFilterMembership = response.body.data.map((item, idx) => {
+                item.key = idx;
+                item.name = item?.user_detail?.name;
+                item.username = item?.username
+                item.phone_number = item?.user_detail?.phone_number;
+                item.roleId = item?.roles.id;
+                item.roleName = item?.roles.name;
+                return item
+            }) ?? []
+
+            console.log(this.dataTotal)
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     async getDetail(id) {
         try {
             const response = await http.get(`/users/`+id);
@@ -53,7 +74,7 @@ export class Membership {
             console.error(e);
         }
     }
-    
+
     async getDataBySuperior() {
         try {
             const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 322a1fa..1e4cce5 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -303,4 +303,27 @@ export class Transaction {
       console.error(e,':)')
     }
   }
+
+  exportTransactionAll(data) {
+    try {
+      axios({
+        url: appConfig.apiUrl + `/excel/history-user/export-all`,
+        headers: {"Authorization" : `Bearer ${TokenUtil.accessToken}`},
+        method: 'POST',
+        data: data,
+        responseType: 'blob'
+      }).then((response) => {
+        var fileDownload = require('react-file-download');
+        message.success("Success export");
+        fileDownload(response.data, `Mutasi Transaksi ${data.dateStart} - ${data.dateEnd}.xlsx`);
+        return fileDownload;
+      }).catch(function (error) {
+        message.error("No data to export");
+        return error;
+      });
+
+    } catch (e) {
+      console.error(e,':)')
+    }
+  }
 }