Merge branch 'develop' into 'devops-staging'

Develop

See merge request empatnusabangsa/ppob/ppob-frontend!190

package.json

@@ -16,12 +16,14 @@
     "@typescript-eslint/eslint-plugin": "^4.26.1",
     "@typescript-eslint/parser": "^4.26.1",
     "antd": "^4.16.2",
+    "axios": "^1.2.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.0.2",
     "babel-loader": "8.2.2",
     "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 +41,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",
@@ -65,6 +68,7 @@
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "^11.0.4",
     "react-dom": "^17.0.2",
+    "react-file-download": "^0.3.5",
     "react-refresh": "^0.8.3",
     "react-responsive": "^9.0.0-beta.5",
     "react-router-dom": "^5.2.0",

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,27 @@ export const DetailUser = observer(() => {
     }
     modalLoader.setLoading(false);
   };
+
+  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.membership.dataDetail, 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);
+    }
+  };
+
   const columns = [
     {
       title: "Pengirim",
@@ -536,11 +560,18 @@ 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>
@@ -787,9 +818,9 @@ export const DetailUser = observer(() => {
                       dataSource={store.transaction.dataHistoryTopUp}
                       bordered
                       pagination={{
-                        pageSize: store.transaction.pageSizeHistoryTransaction,
+                        pageSize: store.transaction.pageSizeHistoryTopUp,
-                        total: store.transaction.total_dataHistoryTransaction,
+                        total: store.transaction.total_dataHistoryTopUp,
-                        current: store.transaction.pageHistoryTransaction + 1,
+                        current: store.transaction.pageHistoryTopUp + 1,
                         showSizeChanger: true,
                         simple: false,
                       }}
@@ -1106,6 +1137,28 @@ 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>
   );
 });

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

@@ -1,5 +1,11 @@
 import { makeAutoObservable } from "mobx";
 import { http } from "../utils/http";
+import { binaryStringToArrayBuffer, arrayBufferToBlob } from 'blob-util'
+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;
@@ -267,4 +273,27 @@ export class Transaction {
       console.error(e);
     }
   }
+
+    exportTransaction(data,date) {
+    try {
+    axios({
+      url: appConfig.apiUrl + `/excel/history-user/export/${data.id}`,
+      headers: {"Authorization" : `Bearer ${TokenUtil.accessToken}`},
+      method: 'POST',
+      data: date,
+      responseType: 'blob'
+    }).then((response) => {
+        var fileDownload = require('react-file-download');
+        message.success("Success export");
+        fileDownload(response.data, `Mutasi Transaki ${data.userDetail.name} ${date.dateStart}.xlsx`);
+        return fileDownload;
+      }).catch(function (error) {
+        message.error("No data to export");
+        return error;
+    });
+
+    } catch (e) {
+      console.error(e,':)')
+    }
+  }
 }