feat: stiching api profile and history transaction.js

src/pages/Profile/Profile.js

@@ -1,12 +1,13 @@
-import React from "react";
+import React, {useEffect} from "react";
-import {Card, Col, Row, Typography} from "antd";
+import {Card, Col, Row, Table, Typography} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
 
 const {Title, Text} = Typography;
 
-export const Profile = () => {
+export const Profile = observer(() => {
     const store = useStore();
     const routeData = [
         {
@@ -19,6 +20,35 @@ export const Profile = () => {
         },
     ];
 
+    useEffect(() => {
+        (async () => {
+            await Promise.allSettled([
+                store.authentication.getProfile(),
+                store.transaction.getDataHistoryTransaction(),
+            ]);
+        })()
+    }, []);
+
+    const columns = [
+        {
+            title: 'Markup Price',
+            dataIndex: 'mark_up_price',
+            key: 'mark_up_price',
+            width: '20%',
+        },
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            width: '50%',
+        },
+        {
+            title: 'Transaction Date',
+            dataIndex: 'created_at',
+            key: 'created_at',
+        },
+    ]
+
     return (
         <div className={["ppob-container"].join(" ")}>
             <BreadcumbComponent data={routeData}/>
@@ -27,26 +57,49 @@ export const Profile = () => {
                     <Col span={24}>
                         <div>
                             <Title strong>Profile</Title>
-                            <Row>
+                            {/*<Row>*/}
-                                <Col span={10}>
+                            {/*    <Col span={10}>*/}
-                                    <Text strong>Name</Text>
+                            {/*        <Text strong>Name</Text>*/}
-                                </Col>
+                            {/*    </Col>*/}
-                                <Col span={14}>
+                            {/*    <Col span={14}>*/}
-                                    <Text>{store.authentication.userData.username}</Text>
+                            {/*        <Text>{store.authentication.profileData.username}</Text>*/}
-                                </Col>
+                            {/*    </Col>*/}
-                                <Col span={10}>
+                            {/*    <Col span={10}>*/}
-                                    <Text strong>Role</Text>
+                            {/*        <Text strong>Role</Text>*/}
-                                </Col>
+                            {/*    </Col>*/}
-                                <Col span={14}>
+                            {/*    <Col span={14}>*/}
-                                    <Text>{store.authentication.userData.role}</Text>
+                            {/*        <Text>{store.authentication.profileData.roles.name}</Text>*/}
+                            {/*    </Col>*/}
+                            {/*    <Col span={10}>*/}
+                            {/*        <Text strong>Superior</Text>*/}
+                            {/*    </Col>*/}
+                            {/*    <Col span={14}>*/}
+                            {/*        <Text>{store.authentication.profileData.superior.username}</Text>*/}
+                            {/*    </Col>*/}
+                            {/*    <Col span={10}>*/}
+                            {/*        <Text strong>Wallet</Text>*/}
+                            {/*    </Col>*/}
+                            {/*    <Col span={14}>*/}
+                            {/*        <Text>{store.authentication.profileData.wallet}</Text>*/}
+                            {/*    </Col>*/}
+                            {/*</Row>*/}
+                        </div>
                     </Col>
                 </Row>
+                <Row>
+                    <Col span={24}>
+                        <div>
+                            <Title strong level={3}>History User Transaction</Title>
+                            <Table
+                                columns={columns}
+                                dataSource={store.transaction.dataHistoryTransaction}
+                                bordered
+                            />
                         </div>
                     </Col>
                 </Row>
                 <div/>
             </Card>
-
         </div>
     )
-};
+});

src/store/authentication.js

@@ -6,6 +6,7 @@ export class Authentication {
   isLoggedIn = false;
   isLoginLoading = false;
   ctx;
+  profileData = {};
 
   constructor(ctx) {
     this.ctx = ctx;
@@ -49,6 +50,16 @@ export class Authentication {
     }
   }
 
+  async getProfile() {
+    try {
+      const response = await http.get('/auth/profile');
+      this.profileData = response.body.data;
+    } catch (e) {
+      console.error(e);
+      throw e;
+    }
+  }
+
   logout() {
     TokenUtil.clearAccessToken();
     TokenUtil.persistToken();

src/store/transaction.js

@@ -19,6 +19,11 @@ export class Transaction {
     dataSubCategories = [];
     total_dataSubCategories = 0;
 
+    pageHistoryTransaction = 0;
+    pageSizeHistoryTransaction = 10
+    dataHistoryTransaction = [];
+    total_dataHistoryTransaction = 0;
+
     constructor(ctx) {
         this.ctx = ctx;
         makeAutoObservable(this);
@@ -47,6 +52,13 @@ export class Transaction {
         }
     }
 
+    async getDataHistoryTransaction() {
+        const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}`);
+
+        this.dataHistoryTransaction = response.body.data ?? []
+        this.total_dataHistoryTransaction = response.body.total_data ?? 0
+    }
+
     async create(data) {
         const response = await http.post('/product').send(data);
         await this.getData();