Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

src/component/PartnerComponent.js

@@ -23,6 +23,7 @@ export const PartnerComponent = observer((props) => {
   const { Option } = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
+  const [isChangePassword, setIsChangePassword] = useState(false);
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -62,6 +63,19 @@ export const PartnerComponent = observer((props) => {
       npwp: data.npwp,
       address: data.address,
     });
+    setIsChangePassword(false);
+    store.partner.visibleModalPartner = true;
+    setIdData(data.id);
+  };
+
+  const changePassword = (data) => {
+    // form.setFieldsValue({
+    //   name: data.name,
+    //   npwp: data.npwp,
+    //   address: data.address,
+
+    // });
+    setIsChangePassword(true);
     store.partner.visibleModalPartner = true;
     setIdData(data.id);
   };
@@ -89,8 +103,7 @@ export const PartnerComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B", cursor: 'pointer' }}
+          style={{ color: "#4F566B", cursor: "pointer" }}
-          onClick={() => changeStatus(record?.id, record?.status)}
         >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
@@ -101,25 +114,19 @@ export const PartnerComponent = observer((props) => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
+          <Button onClick={() => changeStatus(record?.id, record?.status)}>
+            {record?.status === true ? "Inactive" : "Active"}
+          </Button>
           <Button onClick={() => handleEditButton(record)}>Edit</Button>
-          <Button onClick={() => handleDelete(record.id)}>Delete</Button>
+          {/* <Button onClick={() => handleDelete(record.id)}>Delete</Button> */}
+          <Button onClick={() => changePassword(record)}>
+            Change Password
+          </Button>
         </Space>
       ),
     },
   ];
 
-//   const handleEditStatus = async (id)=>{
-//     try {
-//         console.log(id);
-//         await store.partner.delete(id);
-//         message.success("Data Berhasil Dihapus");
-//         history.push(LINKS.PARTNER);
-//       } catch (err) {
-//         console.log("error", err);
-//         message.error("Gagal menghapus");
-//       }
-//   }
-
   const deleteData = async (id) => {
     try {
       console.log(id);
@@ -132,7 +139,6 @@ export const PartnerComponent = observer((props) => {
     }
   };
 
-
   const handleDelete = (id) => {
     Modal.confirm({
       title: "Are you sure delete this record?",
@@ -160,10 +166,10 @@ export const PartnerComponent = observer((props) => {
       setConfirmLoading(true);
       try {
         await store.partner.update(idData, data);
-        message.success("Success Update Data Partner");
+        message.success(isChangePassword ? "Failed Change Partner Password" : "Success Update Data Partner");
         //await store.partner.getData()
       } catch (e) {
-        message.error("Failed Update Data Partner");
+        message.error(isChangePassword ? "Failed Change Partner Password" : "Failed Update Data Partner");
       }
       setConfirmLoading(false);
       store.partner.visibleModalPartner = false;
@@ -211,7 +217,13 @@ export const PartnerComponent = observer((props) => {
 
       <Modal
         visible={store.partner.visibleModalPartner}
-        title={idData ? "Edit Partner" : "Create a new partner"}
+        title={
+          isChangePassword
+            ? "Change Member Password"
+            : idData
+            ? "Edit Partner"
+            : "Create a new partner"
+        }
         okText={idData ? "Edit" : "Create"}
         cancelText="Cancel"
         onCancel={() => {
@@ -232,60 +244,65 @@ export const PartnerComponent = observer((props) => {
         }}
       >
         <Form form={form} layout="vertical">
-          <Form.Item
+          {!isChangePassword && (
-            name="name"
+            <Form.Item
-            label="Name"
+              name="name"
-            rules={[
+              label="Name"
+              rules={[
                 idData
                   ? { required: false }
-                  : { required: true, message: "Please input password name!" }]}
+                  : { required: true, message: "Please input password name!" },
-          >
+              ]}
-            <Input />
+            >
-          </Form.Item>
+              <Input />
-          <Form.Item
+            </Form.Item>
-            name="owner"
+          )}
-            label="Owner"
+          {((idData && isChangePassword) || !idData) && (
-            rules={[
+            <Form.Item
-              idData
+              name="password_account"
-                ? { required: false }
+              label="Password Account"
-                : { required: true, message: "Please input name!" }
+              rules={[
-            ]}
+                idData
-          >
+                  ? { required: false }
-            <Input />
+                  : {
-          </Form.Item>
+                      required: true,
-          <Form.Item
+                      message: "Please input password account!",
-            name="password_account"
+                    },
-            label="Password Account"
+              ]}
-            rules={[
+            >
-              idData
+              <Input />
-                ? { required: false }
+            </Form.Item>
-                : { required: true, message: "Please input password account!" }
+          )}
-            ]}
+
-          >
+          {!isChangePassword && (
-            <Input />
+            <>
-          </Form.Item>
+              <Form.Item
-          <Form.Item
+                name="npwp"
-            name="npwp"
+                label="Npwp"
-            label="Npwp"
+                rules={[
-            rules={[
+                  idData
-              idData
+                    ? { required: false }
-                ? { required: false }
+                    : { required: true, message: "Please input npwp!" },
-                : { required: true, message: "Please input npwp!" }
+                ]}
-            ]}
+              >
-          >
+                <Input />
-            <Input />
+              </Form.Item>
-          </Form.Item>
+              <Form.Item
-          <Form.Item
+                name="address"
-            name="address"
+                label="address"
-            label="address"
+                rules={[
-            rules={[
+                  idData
-              idData
+                    ? { required: false }
-                ? { required: false }
+                    : {
-                : { required: true, message: "Please input password address!" }
+                        required: true,
-            ]}
+                        message: "Please input password address!",
-          >
+                      },
-            <Input />
+                ]}
-          </Form.Item>
+              >
+                <Input />
+              </Form.Item>
+            </>
+          )}
         </Form>
       </Modal>
     </div>

src/pages/App/DesktopLayout.js

@@ -83,7 +83,7 @@ export const DesktopLayout = observer(() => {
                 color: "#413d3e",
               }}
             >
-              Admin
+              {store.authentication.userData.role}
             </Paragraph>
           </div>
           <MenuList closeLeftDrawer={() => {}} />

src/pages/App/MenuList.js

@@ -111,14 +111,6 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role !== "Retail" && (
-        <Menu.Item key="retail">
-          <Link to={LINKS.PRODUCT}>
-            <DatabaseOutlined />
-            <span>Product</span>
-          </Link>
-        </Menu.Item>
-      )}
       <Menu.Item key="payback">
         <Link to={LINKS.PAYBACK}>
           <DatabaseOutlined />

src/pages/Config/Partner.js

@@ -51,10 +51,10 @@ export const Partner = observer(() => {
             <Card>
                 <Row style={{marginBottom: 20}}>
                     <Col span={12}>
-                        <Button>
+                        {/* <Button>
                             <FilterOutlined/>
                             Filter
-                        </Button>
+                        </Button> */}
                     </Col>
                     <Col span={12} style={{textAlign: "right"}}>
                         <Search
@@ -70,20 +70,7 @@ export const Partner = observer(() => {
                         </Button>
                     </Col>
                 </Row>
-                <Tabs
+                <PartnerComponent />
-                    //onChange={handleChangeTabPane}
-                    size="default"
-                    tabBarGutter="50"
-                >
-                    
-                        <TabPane
-                            tab="Partner"
-                            key="1"
-                        >
-                            <PartnerComponent/>
-                        </TabPane>
-                    ))
-                </Tabs>
             </Card>
         </div>
     );

src/pages/Membership/Membership.js

@@ -41,8 +41,8 @@ export const Membership = observer(() => {
     const init = async () => {
       try {
         setIsLoading(true);
-        await store.membership.getData();
+        await getData();
-        await store.role.getData();
+        store.role.getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -52,9 +52,18 @@ export const Membership = observer(() => {
     init();
   }, []);
 
+  const getData = () => {
+    (store.authentication.userData.role === "Admin")
+          ? store.membership.getData()
+          : store.membership.getDataBySuperior();
+  }
+
   const changeStatus = async (id, isActive) => {
     const status = isActive ? "inactive" : "active";
     const status2 = isActive ? "Inactivating" : "Activating";
+
+    console.log(status);
+
     try {
       const response = await store.membership.changeStatus(id, status);
 
@@ -96,17 +105,21 @@ export const Membership = observer(() => {
       dataIndex: "username",
       key: "username",
     },
+    {
+      title: "Role",
+      dataIndex: "roleName",
+      key: "role",
+    },
     {
       title: "Status",
       dataIndex: "status",
       key: "status",
       render: (text, record) => (
         <Tag
-          color={record?.status === true ? "processing" : "#E3E8EE"}
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B", cursor: "pointer" }}
+          style={{ color: "#4F566B" }}
-          onClick={() => changeStatus(record?.id, record?.status)}
         >
-          {record?.status === true ? " ACTIVE" : "INACTIVE"}
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
       ),
     },
@@ -115,27 +128,45 @@ export const Membership = observer(() => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
+          <Button onClick={() => changeStatus(record?.id, record?.isActive)}>
+            {record?.isActive === true ? "Inactive" : "Active"}
+          </Button>
           <Button
             onClick={() => {
-              setVisibleModal(true);
+              let record2 = record;
+              delete record2.password;
+              record2.isChangePassword = false;
+
               setInitialData({
-                ...record,
+                ...record2,
-                roleId: record.roles.id,
+                // roleId: record.roles.id,
               });
+              setVisibleModal(true);
             }}
           >
             Edit
           </Button>
           <Button
+            onClick={() => {
+              let record2 = record;
+              delete record2.password;
+              record2.isChangePassword = true;
+
+              setInitialData({
+                ...record2,
+                // roleId: record.roles.id,
+              });
+              setVisibleModal(true);
+            }}
+          >
+            Ganti Password
+          </Button>
+          {/* <Button
             onClick={async () => {
               handleDelete(record.id);
             }}
           >
             Delete
-          </Button>
-          {/* <Button onClick={showModal}
-          >
-            Role
           </Button> */}
         </Space>
       ),
@@ -154,16 +185,26 @@ export const Membership = observer(() => {
   ];
 
   const onSubmit = async (data) => {
+    data.superior = true;
+
     if (initialData.id) {
       setInitialData({});
       setConfirmLoading(true);
       try {
         console.log(data);
         await store.membership.update(initialData.id, data);
-        message.success("Success Update Data Member");
+        message.success(
-        await store.membership.getData();
+          initialData.isChangePassword
+            ? "Success Change Member Password"
+            : "Success Update Data Member"
+        );
+        await getData();
       } catch (e) {
-        message.error("Failed Update Data Member");
+        message.error(
+          initialData.isChangePassword
+            ? "Failed Update Member Password"
+            : "Failed Update Data Member"
+        );
       }
       setConfirmLoading(false);
       setVisibleModal(false);
@@ -173,7 +214,7 @@ export const Membership = observer(() => {
       try {
         await store.membership.create(data);
         message.success("Success Add New Member");
-        await store.membership.getData();
+        await getData();
       } catch (e) {
         console.log(e, "apa errornya");
         message.error("Failed Add Member");
@@ -195,7 +236,7 @@ export const Membership = observer(() => {
           //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
           await store.membership.delete(record);
           message.success("Success Delete Data");
-          await store.membership.getData();
+          await getData();
         } catch (e) {
           message.error("Failed Delete Data");
         }
@@ -273,7 +314,7 @@ export const Membership = observer(() => {
                 store.membership.pageSize = page.pageSize;
                 store.membership.page = pageNumber - 1;
                 // store.membership.isLoading = true;
-                await store.membership.getData();
+                await getData();
                 // store.membership.isLoading = false;
               }}
             />
@@ -287,7 +328,7 @@ export const Membership = observer(() => {
                 onChange: (page) => {
                   store.membership.pageSize = page.pageSize;
                   store.membership.page = page.current;
-                  store.membership.getData();
+                  getData();
                 },
                 pageSize: store.membership.pageSize,
                 total: store.membership.total_data,

src/pages/Membership/MembershipModal.js

@@ -17,7 +17,13 @@ export const MembershipModal = ({
   return (
     <Modal
       visible={visible}
-      title={initialData.id ? "Edit Member" : "Create a new Membership"}
+      title={
+        initialData.isChangePassword
+          ? "Change Member Password"
+          : initialData.id
+          ? "Edit Member"
+          : "Create a new Membership"
+      }
       okText={initialData.id ? "Edit" : "Create"}
       cancelText="Cancel"
       onCancel={() => {
@@ -28,7 +34,10 @@ export const MembershipModal = ({
         form
           .validateFields()
           .then((values) => {
-            onCreate(values);
+            let input = values;
+            input.username = initialData.username;
+
+            onCreate(input);
             form.resetFields();
           })
           .catch((info) => {
@@ -42,58 +51,39 @@ export const MembershipModal = ({
         name="form_in_modal"
         initialValues={initialData}
       >
-        <Form.Item
+        {((initialData.id && !initialData.isChangePassword) || !initialData.id) && (
-          name="username"
+          <Form.Item
-          label="Username"
+            name="username"
-          rules={[{ required: true, message: "Please input Username!" }]}
+            label="Username"
-        >
+            rules={[{ required: true, message: "Please input Username!" }]}
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="password"
-          label="Password"
-          rules={[{ required: false, message: "Please input password!" }]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="roleId"
-          label="Role"
-          rules={[{ required: true, message: "Please input role id!" }]}
-        >
-          <Select>
-            {store.role.data.map((item) => (
-              <Option key={item.id} value={item.id}>
-                {item.name}
-              </Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item
-          name="superior"
-          label="Superior"
-          rules={[
-            { required: true, message: "Please select superior status!" },
-          ]}
-        >
-          <Select
-            showSearch
-            placeholder="Select Status"
-            optionFilterProp="children"
-            filterOption={(input, option) =>
-              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }
-            filterSort={(optionA, optionB) =>
-              optionA.children
-                .toLowerCase()
-                .localeCompare(optionB.children.toLowerCase())
-            }
           >
-            {dataStatus.map((it, idx) => {
+            <Input />
-              return <Option value={it} key={idx}>{capitalize(it)}</Option>;
+          </Form.Item>
-            })}
+        )}
-          </Select>
+        {((initialData.id && initialData.isChangePassword) || !initialData.id) && (
-        </Form.Item>
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[{ required: false, message: "Please input password!" }]}
+          >
+            <Input />
+          </Form.Item>
+        )}
+        {((initialData.id && !initialData.isChangePassword) || !initialData.id) && (
+          <Form.Item
+            name="roleId"
+            label="Role"
+            rules={[{ required: true, message: "Please input role id!" }]}
+          >
+            <Select>
+              {store.role.data.map((item) => (
+                <Option key={item.id} value={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        )}
       </Form>
     </Modal>
   );

src/pages/Product/Product.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Input, Row, Tabs } from "antd";
+import { Button, Card, Col, Input, Row, Select, Tabs } from "antd";
 import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { useStore } from "../../utils/useStore";
@@ -9,6 +9,7 @@ import { LINKS } from "../../routes/app";
 
 const { TabPane } = Tabs;
 const { Search } = Input;
+const { Option } = Select;
 
 export const Product = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
@@ -72,14 +73,27 @@ export const Product = observer(() => {
           </Col>
         </Row>
 
-        <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
+        <Row>
+          <Col span={24}>
+            <Select
+              placeholder="Choose Supplier"
+              onChange={(val) => console.log(val, "SELECTED")}
+              style={{ marginBottom: "20px", width: "100%" }}
+            >
+              <Option value={1}>Hemm</Option>
+              <Option value={2}>Huam</Option>
+            </Select>
+          </Col>
+        </Row>
+
+        {/* <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
           {store.product.dataCategories.map((item, idx) => (
-            <TabPane tab={item.name} key={item.id}>
+            <TabPane tab={item.name} key={item.id}> */}
-              {/* <ProductComponent category={item.name} /> */}
+        {/* <ProductComponent category={item.name} /> */}
-              <ProductComponent />
+        <ProductComponent />
-            </TabPane>
+        {/* </TabPane>
           ))}
-        </Tabs>
+        </Tabs> */}
       </Card>
     </div>
   );

src/pages/Profile/Profile.js

@@ -1,12 +1,14 @@
-import React from "react";
+import React, {useEffect} from "react";
-import {Card, Col, Row, Typography} from "antd";
+import {Button, 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";
+import {FilterOutlined} from "@ant-design/icons";
 
 const {Title, Text} = Typography;
 
-export const Profile = () => {
+export const Profile = observer(() => {
     const store = useStore();
     const routeData = [
         {
@@ -19,34 +21,103 @@ 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}/>
             <Card>
+                <Title strong>Profile</Title>
                 <Row style={{marginBottom: 20}}>
+                    <Col span={12}>
+                        <Row>
+                            <Col span={12}>
+                                <Text strong>Name</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text strong>Phone Number</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text strong>Username</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text>{store.authentication.profileData?.username}</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text strong>Role</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text>{store.authentication.profileData.roles?.name}</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text strong>Superior</Text>
+                            </Col>
+                            <Col span={12}>
+                                <Text>{store.authentication.profileData.superior?.username}</Text>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col span={12}>
+                        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+                            <Title strong level={3}>Saldo</Title>
+                            <Text style={{fontSize: '1.25rem'}}>{store.authentication.profileData?.wallet}</Text>
+                        </div>
+                    </Col>
+                </Row>
+                <Row>
                     <Col span={24}>
                         <div>
-                            <Title strong>Profile</Title>
+                            <Title strong level={3}>History User Transaction</Title>
-                            <Row>
+
-                                <Col span={10}>
+                            <Button style={{marginBottom: '1rem'}} onClick={() => {
-                                    <Text strong>Name</Text>
+                                console.log('clicked filter')
-                                </Col>
+                            }}>
-                                <Col span={14}>
+                                <FilterOutlined/>
-                                    <Text>{store.authentication.userData.username}</Text>
+                                Filter
-                                </Col>
+                            </Button>
-                                <Col span={10}>
+                            <Table
-                                    <Text strong>Role</Text>
+                                columns={columns}
-                                </Col>
+                                dataSource={store.transaction.dataHistoryTransaction}
-                                <Col span={14}>
+                                bordered
-                                    <Text>{store.authentication.userData.role}</Text>
+                            />
-                                </Col>
-                            </Row>
                         </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;
+    } catch (e) {
+      console.error(e);
+      throw e;
+    }
+  }
+
   logout() {
     TokenUtil.clearAccessToken();
     TokenUtil.persistToken();

src/store/commission.js

@@ -26,8 +26,11 @@ export class Commission {
 
     async getData() {
         const response = await http.get(`/config/commission?page=${this.page}&pageSize=${this.pageSize}`);
-        console.log(response)
+        this.data = response.body.data.map((item, idx) => {
-        this.data = response.body.data ?? []
+            item.key = idx;
+            return item
+        }) ?? []
+        
         this.total_data = response.body.total_data ?? 0
     }
     async create(data) {

src/store/membership.js

@@ -17,16 +17,23 @@ export class Membership {
          
         this.data = response.body.data.map((item, idx) => {
             item.key = idx;
+            item.roleName = item.roles.name;
+            return item
+        }) ?? []
+        
+        this.total_data = response.body.total_data ?? 0
+    }
+    
+    async getDataBySuperior() {
+        const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
+        this.data = response.body.data.map((item, idx) => {
+            item.key = idx;
+            item.roleName = item.roles.name;
             return item
         }) ?? []
         
         this.total_data = response.body.total_data ?? 0
     }
-    // async getData() {
-    //     const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
-    //     this.data = response.body.data ?? []
-    //     this.total_data = response.body.total_data ?? 0
-    // }
 
     async create(data) {
         return await http.post('/users').send(data)
@@ -47,6 +54,8 @@ export class Membership {
     }
 
     async changeStatus(id, status) {
+        console.log(`/users/${id}/${status}`);
+        
         const response = await http.get(`/users/${id}/${status}`);
         await this.getData();
         return response;

src/store/transaction.js

@@ -1,5 +1,5 @@
-import { makeAutoObservable } from "mobx";
+import {makeAutoObservable} from "mobx";
-import { http } from "../utils/http";
+import {http} from "../utils/http";
 
 export class Transaction {
     page = 0;
@@ -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}`);
+
+        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();

src/store/user.js

@@ -1,9 +1,14 @@
-import {action, observable} from "mobx";
+import {action, makeAutoObservable, observable} from "mobx";
 import {http} from "../utils/http";
 
 export class User {
     @observable data = [];
 
+    constructor(ctx) {
+        this.ctx = ctx;
+        makeAutoObservable(this);
+    }
+
     @action
     async getData() {
         this.data = (await http.get('/user')).body.data;