feat: export file

src/pages/Membership/DetailUser.js

@@ -171,20 +171,17 @@ export const DetailUser = observer(() => {
     }
     modalLoader.setLoading(true);
     try {
-      const response = await store.transaction.exportTransaction(store.membership.dataDetail.id, dataDate)
-        console.log('responseiniyak', response);
-        message.success("Success export");
+      await store.transaction.exportTransaction(store.membership.dataDetail, dataDate)
+        // console.log('responseiniyak', response);
+        // message.success("Success export");
         setModalExport(false);
         modalLoader.setLoading(false);
-        return response;
      } catch (e) {
+      setModalExport(false);
       console.error(e, "apa errornya");
       message.error(e.response?.body?.message || "Failed to export");
-      setModalExport(false);
       modalLoader.setLoading(false);
     }
-    setModalExport(false);
-    modalLoader.setLoading(false);
   };
 
   const columns = [
@@ -563,17 +560,19 @@ export const DetailUser = observer(() => {
                   </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>

src/pages/Profile/Profile.js

@@ -23,7 +23,7 @@ import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import { FilterOutlined } from "@ant-design/icons";
+import { FilterOutlined, ExportOutlined } from "@ant-design/icons";
 import { format, parseISO } from "date-fns";
 import { appConfig } from "../../config/app";
 import { ModalLoaderContext } from "../../utils/modal";
@@ -34,12 +34,14 @@ const { RangePicker } = DatePicker;
 export const Profile = observer(() => {
   const store = useStore();
   const [form] = Form.useForm();
+  const [formExport] = Form.useForm();
   const { id } = useParams();
   const modalLoader = useContext(ModalLoaderContext);
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
   const [actionFilter, setAction] = useState(false);
   const [visible, setVisible] = useState(false);
+  const [modalExport, setModalExport] = useState(false);
 
   const routeData = [
     {
@@ -383,6 +385,27 @@ export const Profile = observer(() => {
     setVisible(false);
     form.resetFields();
   };
+
+ const handleSubmitExport = async () => {
+    const date = formExport.getFieldsValue();
+    const dataDate ={
+      dateStart: moment(date.tanggal_export).format("YYYY-MM-DD")
+    }
+    modalLoader.setLoading(true);
+    try {
+      await store.transaction.exportTransaction(store.authentication.profileData, dataDate)
+        // 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);
+    }
+  };
+
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
@@ -394,8 +417,32 @@ export const Profile = observer(() => {
             : dataRoute
         }
       />
-      <Card>
+      <Card>{console.log(store.authentication.profileData?.userDetail,':)')}
+        
+        {store.authentication.userData.role === "Admin Partner" ? (
+        <Row style={{ marginBottom: 10 }}>
         <Title strong>Profile</Title>
+          <Col
+            lg={17}
+            xs={17}
+            style={{ textAlign: "right" }}
+          >
+            <Space
+              size="small"
+              align={"center"}
+              wrap={true}
+              style={{ textAlign: "center" }}
+            >
+                <Button
+                  onClick={() => setModalExport(true)}
+                >
+                  <ExportOutlined /> Export
+                </Button>
+            </Space>
+          </Col>
+        </Row>
+        ):
+        <Title strong>Profile</Title>}
 
         <Row style={{ marginBottom: 20 }}>
           <Col lg={12} xs={24}>
@@ -982,6 +1029,28 @@ export const Profile = observer(() => {
           </Form.Item>
         </Form>
       </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>
   );
 });

src/store/transaction.js

@@ -5,6 +5,7 @@ import axios from "axios";
 import {appConfig} from "../config/app";
 import fileDownload from "react-file-download";
 import {TokenUtil} from "../utils/token";
+import {message} from "antd";
 
 export class Transaction {
   page = 0;
@@ -273,24 +274,26 @@ export class Transaction {
     }
   }
 
-   async exportTransaction(id,dateStart) {
+    exportTransaction(data,date) {
     try {
     axios({
-      url: appConfig.apiUrl + `/excel/history-user/export/${id}`,
+      url: appConfig.apiUrl + `/excel/history-user/export/${data.id}`,
       headers: {"Authorization" : `Bearer ${TokenUtil.accessToken}`},
       method: 'POST',
-      data: dateStart,
+      data: date,
       responseType: 'blob'
     }).then((response) => {
         var fileDownload = require('react-file-download');
-        fileDownload(response.data, `Mutasi Transaki IRS 2022-12-08.xlsx`);
+        message.success("Success export");
+        fileDownload(response.data, `Mutasi Transaki ${data.userDetail.name} ${date.dateStart}.xlsx`);
         return fileDownload;
       }).catch(function (error) {
-        return error.message;
+        message.error("No data to export");
+        return error;
     });
 
     } catch (e) {
-      console.error(e)
+      console.error(e,':)')
     }
   }
 }