Merge branch 'develop' into 'devops-staging'

Develop

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

src/component/ProductComponent.js

@@ -79,16 +79,6 @@ export const ProductComponent = observer((props) => {
           currency: "IDR",
         }).format(text),
     },
-    {
-      title: "Harga Jual",
-      dataIndex: "mark_up_price",
-      key: "mark_up_price",
-      render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
-    },
     {
       title: "Harga",
       dataIndex: "price",
@@ -139,13 +129,13 @@ export const ProductComponent = observer((props) => {
     },
   ];
   if (store.authentication.userData.role !== "Admin") columns.pop();
-  if (store.authentication.userData.role !== "Admin") delete columns[4];
   if (store.authentication.userData.role !== "Admin") delete columns[2];
-  if (store.authentication.userData.role !== "Admin") delete columns[3];
+  if (store.authentication.userData.role === "Admin Partner") delete columns[3];
   if (store.authentication.userData.role !== "Admin") delete columns[6];
-  if (store.authentication.userData.role === "Admin") delete columns[3];
+  if (store.authentication.userData.role === "Admin Partner") delete columns[7];
-  if (store.authentication.userData.role === "Admin") delete columns[5];
+  if (store.authentication.userData.role === "Admin") delete columns[4];
   if (store.authentication.userData.role !== "Admin") delete columns[8];
+  if (store.authentication.userData.role === "Admin Partner") delete columns[5];
 
   const deleteData = async (id) => {
     try {
@@ -502,7 +492,7 @@ export const ProductComponent = observer((props) => {
               ))}
             </Select>
           </Col>
-          <Col span={24}>
+          {/* <Col span={24}>
             <Title level={5} type={"secondary"} strong>
               Filter Categories
             </Title>
@@ -519,7 +509,7 @@ export const ProductComponent = observer((props) => {
                 </Option>
               ))}
             </Select>
-          </Col>
+          </Col> */}
           <Col span={24}>
             <Title level={5} type={"secondary"} strong>
               Filter Sub-Categories

src/component/SubcategoryComponent.js

@@ -85,7 +85,7 @@ export const SubcategoryComponent = observer((props) => {
           : message.error(
               response?.body?.message || "Gagal Ubah Data Sub Kategori"
             );
-        //await getData();
+        await getData();
       } catch (e) {
         message.error(
           e.response?.body?.message || "Gagal Ubah Data Sub Kategori"
@@ -106,6 +106,7 @@ export const SubcategoryComponent = observer((props) => {
           : message.error(
               response?.body?.message || "Gagal Tambah Sub Kategori"
             );
+        await getData();
       } catch (e) {
         console.log(e, "apa errornya");
         message.error(e.response?.body?.message || "Gagal Tambah Sub Kategori");

src/pages/App/DesktopLayout.js

@@ -103,7 +103,7 @@ export const DesktopLayout = observer(() => {
 
       {store.ui.mediaQuery.isMobile && (
         <Drawer
-          title="Navigation"
+          title={`PPOB ${store.authentication.userData.role}`}
           placement={"left"}
           closable={false}
           width={"50%"}
@@ -124,14 +124,14 @@ export const DesktopLayout = observer(() => {
             }}
           >
             <Menu>
-              {/* {store.authentication.userData.role !== "Admin Partner" && ( */}
+              {store.authentication.userData.role !== "Retail" && (
-              <Menu.Item key="home">
+                <Menu.Item key="home">
-                <Link to={LINKS.HOME}>
+                  <Link to={LINKS.HOME}>
-                  <HomeOutlined />
+                    <HomeOutlined />
-                  <span>Beranda</span>
+                    <span>Beranda</span>
-                </Link>
+                  </Link>
-              </Menu.Item>
+                </Menu.Item>
-              {/* )} */}
+              )}
               {store.authentication.userData.role === "Admin" && (
                 <Menu.Item key="membership">
                   <Link to={LINKS.MEMBERSHIP}>
@@ -140,6 +140,14 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
+              {store.authentication.userData.role === "Sales" && (
+                <Menu.Item key="membership">
+                  <Link to={LINKS.MEMBERSHIP}>
+                    <IdcardOutlined />
+                    <span>Keanggotaan</span>
+                  </Link>
+                </Menu.Item>
+              )}
               {store.authentication.userData.role === "Supervisor" && (
                 <Menu.Item key="membership">
                   <Link to={LINKS.MEMBERSHIP}>
@@ -221,14 +229,22 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
-              {store.authentication.userData.role === "Admin Partner" && (
+              {store.authentication.userData.role === "Sales" && (
+                <Menu.Item key="product">
+                  <Link to={LINKS.PRODUCT}>
+                    <AppstoreAddOutlined />
+                    <span>Produk</span>
+                  </Link>
+                </Menu.Item>
+              )}
+              {/* {store.authentication.userData.role === "Admin Partner" && (
                 <Menu.Item key="transaction">
                   <Link to={LINKS.TRANSACTION}>
                     <ShoppingCartOutlined />
                     <span>Transaksi</span>
                   </Link>
                 </Menu.Item>
-              )}
+              )} */}
               {store.authentication.userData.role === "Retail" && (
                 <Menu.Item key="transaction">
                   <Link to={LINKS.TRANSACTION}>
@@ -237,31 +253,30 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
-              {store.authentication.userData.role !== "Admin Partner" &&
+              {store.authentication.userData.role !== "Admin Partner" && (
-                store.authentication.userData.role !== "Retail" && (
+                <SubMenu
-                  <SubMenu
+                  key="payback-main"
-                    key="payback-main"
+                  icon={<ProfileOutlined />}
-                    icon={<ProfileOutlined />}
+                  title="Pembayaran"
-                    title="Pembayaran"
+                >
-                  >
+                  {store.authentication.userData.role !== "Retail" && (
-                    {store.authentication.userData.role !== "Retail" && (
+                    <Menu.Item key="payback-to-user">
-                      <Menu.Item key="payback-to-user">
+                      <Link to={LINKS.PAYBACK}>
-                        <Link to={LINKS.PAYBACK}>
+                        <PayCircleOutlined />
-                          <PayCircleOutlined />
+                        <span>Konfirmasi</span>
-                          <span>Konfirmasi</span>
+                      </Link>
-                        </Link>
+                    </Menu.Item>
-                      </Menu.Item>
+                  )}
-                    )}
+                  {store.authentication.userData.role !== "Admin" && (
-                    {store.authentication.userData.role !== "Admin" && (
+                    <Menu.Item key="payback-from-user">
-                      <Menu.Item key="payback-from-user">
+                      <Link to={LINKS.PAYBACK_CREATED}>
-                        <Link to={LINKS.PAYBACK_CREATED}>
+                        <AlipayOutlined />
-                          <AlipayOutlined />
+                        <span>Dibuat oleh Saya</span>
-                          <span>Dibuat oleh Saya</span>
+                      </Link>
-                        </Link>
+                    </Menu.Item>
-                      </Menu.Item>
+                  )}
-                    )}
+                </SubMenu>
-                  </SubMenu>
+              )}
-                )}
               {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="profile">
                   <Link to={LINKS.PROFILE}>

src/pages/App/MenuList.js

@@ -51,14 +51,14 @@ export const MenuList = observer((props) => {
       overflowedIndicator={0}
       forceSubMenuRender={true}
     >
-      {/* {store.authentication.userData.role === "Admin" && ( */}
+      {store.authentication.userData.role !== "Retail" && (
-      <Menu.Item key="home">
+        <Menu.Item key="home">
-        <Link to={LINKS.HOME}>
+          <Link to={LINKS.HOME}>
-          <HomeOutlined />
+            <HomeOutlined />
-          <span>Beranda</span>
+            <span>Beranda</span>
-        </Link>
+          </Link>
-      </Menu.Item>
+        </Menu.Item>
-      {/* )} */}
+      )}
       {store.authentication.userData.role === "Admin" && (
         <Menu.Item key="membership">
           <Link to={LINKS.MEMBERSHIP}>
@@ -75,6 +75,14 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
+      {store.authentication.userData.role === "Sales" && (
+        <Menu.Item key="membership">
+          <Link to={LINKS.MEMBERSHIP}>
+            <IdcardOutlined />
+            <span>Keanggotaan</span>
+          </Link>
+        </Menu.Item>
+      )}
       {store.authentication.userData.role === "Admin" && (
         <SubMenu key="config" icon={<SettingOutlined />} title="Config">
           <Menu.Item key="partner">
@@ -135,6 +143,14 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
+      {store.authentication.userData.role === "Sales" && (
+        <Menu.Item key="retail">
+          <Link to={LINKS.PRODUCT}>
+            <AppstoreAddOutlined />
+            <span>Produk</span>
+          </Link>
+        </Menu.Item>
+      )}
       {store.authentication.userData.role === "Supervisor" && (
         <Menu.Item key="retail">
           <Link to={LINKS.PRODUCT}>
@@ -151,31 +167,30 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role !== "Retail" &&
+      {store.authentication.userData.role !== "Admin Partner" && (
-        store.authentication.userData.role !== "Admin Partner" && (
+        <SubMenu
-          <SubMenu
+          key="payback-main"
-            key="payback-main"
+          icon={<CodepenOutlined />}
-            icon={<CodepenOutlined />}
+          title="Pembayaran"
-            title="Pembayaran"
+        >
-          >
+          {store.authentication.userData.role !== "Retail" && (
-            {store.authentication.userData.role !== "Retail" && (
+            <Menu.Item key="payback-to-user">
-              <Menu.Item key="payback-to-user">
+              <Link to={LINKS.PAYBACK}>
-                <Link to={LINKS.PAYBACK}>
+                <FileProtectOutlined />
-                  <FileProtectOutlined />
+                <span>Konfirmasi</span>
-                  <span>Konfirmasi</span>
+              </Link>
-                </Link>
+            </Menu.Item>
-              </Menu.Item>
+          )}
-            )}
+          {store.authentication.userData.role !== "Admin" && (
-            {store.authentication.userData.role !== "Admin" && (
+            <Menu.Item key="payback-from-user">
-              <Menu.Item key="payback-from-user">
+              <Link to={LINKS.PAYBACK_CREATED}>
-                <Link to={LINKS.PAYBACK_CREATED}>
+                <FileProtectOutlined />
-                  <FileProtectOutlined />
+                <span>Dibuat oleh Saya</span>
-                  <span>Dibuat oleh Saya</span>
+              </Link>
-                </Link>
+            </Menu.Item>
-              </Menu.Item>
+          )}
-            )}
+        </SubMenu>
-          </SubMenu>
+      )}
-        )}
       {store.authentication.userData.role !== "Admin" && (
         <Menu.Item key="profile">
           <Link to={LINKS.PROFILE}>

src/pages/Login/Login.js

@@ -1,9 +1,9 @@
 import React from "react";
-import {observer} from 'mobx-react-lite';
+import { observer } from "mobx-react-lite";
-import {useStore} from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
-import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
+import { Button, Card, Col, Form, Input, message, Row, Typography } from "antd";
-import {useHistory} from "react-router-dom";
+import { useHistory } from "react-router-dom";
-import {LINKS} from "../../routes/app";
+import { LINKS } from "../../routes/app";
 
 export const Login = observer(() => {
   const store = useStore();
@@ -23,21 +23,31 @@ export const Login = observer(() => {
       }
       message.error(e.message);
     }
-      history.push(LINKS.HOME);
+    store.authentication.userData.role === "Retail"
-  }
+      ? history.push(LINKS.TRANSACTION)
+      : history.push(LINKS.HOME);
+  };
 
   return (
-    <div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}>
+    <div style={{ width: "100vw", display: "flex", justifyContent: "center" }}>
-      <Row justify={'center'}>
+      <Row justify={"center"}>
         <Col>
-          <div style={{
+          <div
-            display: 'flex',
+            style={{
-            justifyContent: 'flex-start',
+              display: "flex",
-            marginTop: '5vh',
+              justifyContent: "flex-start",
-            flexDirection: 'column',
+              marginTop: "5vh",
-            alignItems: 'center',
+              flexDirection: "column",
-          }}>
+              alignItems: "center",
-            <div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}>
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "stretch",
+              }}
+            >
               <Typography.Paragraph
                 style={{
                   margin: 0,
@@ -52,11 +62,11 @@ export const Login = observer(() => {
               </Typography.Paragraph>
             </div>
             <Card
-              style={{width: 320, textAlign: 'center'}}
+              style={{ width: 320, textAlign: "center" }}
-              headStyle={{fontSize: 13, fontWeight: 200}}
+              headStyle={{ fontSize: 13, fontWeight: 200 }}
               className={"shadow"}
               bordered={true}
-              title={'Sign in to your account'}
+              title={"Sign in to your account"}
             >
               <Form
                 layout={"vertical"}
@@ -64,17 +74,32 @@ export const Login = observer(() => {
                 onFinish={handleLogin}
                 className={"w-9/12"}
               >
-                <Form.Item label="Username" name="username"
+                <Form.Item
-                           rules={[{required: true, message: 'Please input your username!'}]}>
+                  label="Username"
-                  <Input/>
+                  name="username"
+                  rules={[
+                    { required: true, message: "Please input your username!" },
+                  ]}
+                >
+                  <Input />
                 </Form.Item>
-                <Form.Item label="Password" name="password"
+                <Form.Item
-                           rules={[{required: true, message: 'Please input your password!'}]}>
+                  label="Password"
-                  <Input.Password/>
+                  name="password"
+                  rules={[
+                    { required: true, message: "Please input your password!" },
+                  ]}
+                >
+                  <Input.Password />
                 </Form.Item>
                 <div className={"flex flex-row justify-between content-center"}>
-                  <Button type="primary" htmlType="submit"
+                  <Button
-                          loading={store.authentication.isLoginLoading}>Submit</Button>
+                    type="primary"
+                    htmlType="submit"
+                    loading={store.authentication.isLoginLoading}
+                  >
+                    Submit
+                  </Button>
                 </div>
               </Form>
             </Card>

src/pages/Membership/FilterUser.js

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { Form, Input, Modal, Select, InputNumber,Row,Title,Col,Option } from "antd";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+
+
+export const FilterUser = observer(() => {
+    const store = useStore();
+//   const [form] = Form.useForm();
+//   const { Option } = Select;
+//   const store = useStore();
+//   const [value, setValue] = useState();
+
+  return (
+    <Modal
+    visible={store.membership.visibleModalFilterMembership}
+    title={"Filter"}
+    //footer={footerLayoutFilter}
+  >
+    <Row>
+      <Col span={24}>
+        <Title level={5} type={"secondary"} strong>
+          Filter Supplier
+        </Title>
+        <Select
+          mode={"multiple"}
+          placeholder="Choose Supplier"
+        //   onChange={(val) => {
+        //     setFilterSupplier(val);
+        //   }}
+          style={{ marginBottom: "20px", width: "100%" }}
+        //   value={filterSupplier}
+        >
+          {store.supplier.data.map((item) => (
+            <Option value={item.id} key={item.id}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </Col>
+      <Col span={24}>
+        <Title level={5} type={"secondary"} strong>
+          Filter Categories
+        </Title>
+        <Select
+          mode={"multiple"}
+          placeholder="Choose Category"
+        //   onChange={async (val) => handleFilterCategory(val)}
+          style={{ marginBottom: "20px", width: "100%" }}
+          value={store.product.filterCategory || []}
+        >
+          {store.category.data.map((item) => (
+            <Option value={item.id} key={item.id}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </Col>
+      <Col span={24}>
+        <Title level={5} type={"secondary"} strong>
+          Filter Sub-Categories
+        </Title>
+        <Select
+          mode={"multiple"}
+          placeholder="Choose Sub-Category"
+        //   onChange={(val) => {
+        //     setFilterSubCategories(val);
+        //   }}
+          style={{ marginBottom: "20px", width: "100%" }}
+        //   value={filterSubCategories}
+        >
+          {store.product.dataSubCategories.map((item) => (
+            <Option value={item.id} key={item.id}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </Col>
+    </Row>
+  </Modal>
+  );
+});

src/pages/Membership/Membership.js

@@ -13,10 +13,17 @@ import {
   Space,
   Table,
   Tag,
+  Select,
+  Option,
+  Typography,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import {
+  DownloadOutlined,
+  PlusSquareOutlined,
+  FilterOutlined,
+} from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
@@ -25,6 +32,8 @@ import { ModalLoaderContext } from "../../utils/modal";
 
 export const Membership = observer(() => {
   const history = useHistory();
+  const { Option } = Select;
+  const { Title } = Typography;
   const [form] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
@@ -33,14 +42,17 @@ export const Membership = observer(() => {
   const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const modalLoader = useContext(ModalLoaderContext);
+  const [filterMembership, setFilterMembership] = useState([]);
+  const [filterPartner, setFilterPartner] = useState([]);
 
   useEffect(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
         const isAdmin = store.authentication.userData.role === "Admin";
-
         await getData();
+        await store.membership.getDataBySuperior();
+        await store.partner.getData();
         await store.role.getData(isAdmin);
         modalLoader.setLoading(false);
       } catch (e) {
@@ -81,6 +93,59 @@ export const Membership = observer(() => {
     }
   };
 
+  const handleRemoveFilter = async () => {
+    store.membership.filterMembership = null;
+    store.membership.filterPartner = null;
+    setFilterMembership([]);
+    setFilterPartner([]);
+    //store.product.filterCategory = null;
+    //setFilterSubCategories([]);
+    await store.membership.getData();
+    store.membership.visibleModalFiltermembership = false;
+  };
+  const handleCancelFilter = () => {
+    setFilterMembership([]);
+    setFilterPartner([]);
+    //store.product.filterCategory = null;
+    //setFilterSubCategories([]);
+    store.membership.visibleModalFilterMembership = false;
+  };
+
+  const handleSubmitFilter = async () => {
+    store.membership.filterMembership = filterMembership;
+    store.membership.filterPartner = filterPartner;
+    modalLoader.setLoading(true);
+    await store.membership.getData();
+    //await store.product.getData();
+    modalLoader.setLoading(false);
+    store.membership.visibleModalFilterMembership = false;
+  };
+
+  const footerLayoutFilter = [
+    <Button
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
+    >
+      Remove Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilter}>
+      Cancel
+    </Button>,
+    <Button
+      key={"submit"}
+      onClick={handleSubmitFilter}
+      style={{
+        backgroundColor: "#4e79e7",
+        color: "#fff",
+      }}
+    >
+      Apply
+    </Button>,
+  ];
   const handleCancelTransaction = () => {
     setIsVisibleTopUpModal(false);
     setDestination(null);
@@ -238,10 +303,16 @@ export const Membership = observer(() => {
         <div>
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
-              {/* <Button>
+              {store.authentication.userData.role === "Admin" && (
-                <FilterOutlined />
+                <Button
-                Filter
+                  onClick={() => {
-              </Button> */}
+                    store.membership.visibleModalFilterMembership = true;
+                  }}
+                >
+                  <FilterOutlined />
+                  Filter
+                </Button>
+              )}
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
               {/* <Search
@@ -327,13 +398,10 @@ export const Membership = observer(() => {
                         description={
                           <div style={{}}>
                             <p>
+                              <small>Saldo System : {item.name}</small> <br />
                               <small>Role : {item.roleName}</small> <br />
                               <small>
-                                Saldo Supplier : {item.coa.amount}
+                                Saldo Supplier : {item.coa?.amount}
-                              </small>{" "}
-                              <br />
-                              <small>
-                                Saldo System : {item.coa.amount}
                               </small>{" "}
                               <br />
                               <Button
@@ -441,6 +509,58 @@ export const Membership = observer(() => {
           setVisibleModal(false);
         }}
       />
+      <Modal
+        visible={store.membership.visibleModalFilterMembership}
+        title={"Filter"}
+        footer={footerLayoutFilter}
+      >
+        <Row>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Atasan/Superior
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Choose Superior"
+              onChange={(val) => {
+                setFilterMembership(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterMembership}
+            >
+              {store.membership.data.map((item) => (
+                <Option value={item.name} key={item.name}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Col>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Type
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Choose Type"
+              //onChange={async (val) => handleFilterPartner(val)}
+              onChange={(val) => {
+                setFilterPartner(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterPartner}
+              // value={store.membership.filterMembership || []}
+            >
+              <Option value="partner">Partner</Option>
+              <Option value="b2c">B2C</Option>
+              {/* {store.partner.data.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))} */}
+            </Select>
+          </Col>
+        </Row>
+      </Modal>
     </div>
   );
 });

src/pages/Membership/MembershipModal.js

@@ -1,7 +1,17 @@
 import React, { useState } from "react";
-import { Form, Input, Modal, Select, InputNumber } from "antd";
+import {
+  Form,
+  Input,
+  Modal,
+  Select,
+  InputNumber,
+  Row,
+  Col,
+  Typography,
+} from "antd";
 import { useStore } from "../../utils/useStore";
 
+const { Title, Text } = Typography;
 export const MembershipModal = ({
   visible,
   onCreate,

src/pages/Payback/Payback.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
   Button,
   Card,
@@ -13,6 +13,9 @@ import {
   Space,
   Table,
   Tag,
+  Select,
+  Typography,
+  DatePicker,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -31,10 +34,14 @@ import { capitalize } from "lodash";
 import { PAYBACK_STATUS } from "../../constants/payback";
 
 const { Search } = Input;
-
+const { RangePicker } = DatePicker;
 export const Payback = observer(() => {
+  const { Option } = Select;
+  const { Title } = Typography;
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const [filterSupplier, setFilterSupplier] = useState([]);
+  const [filterSubCategories, setFilterSubCategories] = useState([]);
 
   useEffect(() => {
     const init = async () => {
@@ -201,6 +208,67 @@ export const Payback = observer(() => {
     modalLoader.setLoading(false);
   };
 
+  const handleRemoveFilter = async () => {
+    store.product.filterSupplier = null;
+    store.product.filterSubCategory = null;
+    setFilterSupplier([]);
+    store.product.filterCategory = null;
+    setFilterSubCategories([]);
+    await store.product.getData();
+    store.product.visibleModalFilterProduct = false;
+  };
+
+  const handleCancelFilter = () => {
+    setFilterSupplier([]);
+    store.product.filterCategory = null;
+    setFilterSubCategories([]);
+    store.payback.visibleModalFilterPayback = false;
+  };
+
+  const handleSubmitFilter = async () => {
+    store.product.filterSupplier = filterSupplier;
+    store.product.filterSubCategory = filterSubCategories;
+    modalLoader.setLoading(true);
+    await store.product.getData();
+    modalLoader.setLoading(false);
+    store.product.visibleModalFilterProduct = false;
+  };
+
+  const handleFilterCategory = async (value) => {
+    if (value) {
+      store.product.filterCategory = value;
+      await store.product.getDataSubCategories();
+    } else {
+      store.product.filterCategory = null;
+      await store.product.getDataSubCategories();
+    }
+  };
+
+  const footerLayoutFilter = [
+    <Button
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
+    >
+      Remove Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilter}>
+      Cancel
+    </Button>,
+    <Button
+      key={"submit"}
+      onClick={handleSubmitFilter}
+      style={{
+        backgroundColor: "#4e79e7",
+        color: "#fff",
+      }}
+    >
+      Apply
+    </Button>,
+  ];
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -208,10 +276,14 @@ export const Payback = observer(() => {
         <div>
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
-              {/* <Button>
+              <Button
+                onClick={() => {
+                  store.payback.visibleModalFilterPayback = true;
+                }}
+              >
                 <FilterOutlined />
                 Filter
-              </Button> */}
+              </Button>
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
               {/* <Search
@@ -386,6 +458,73 @@ export const Payback = observer(() => {
           )}
         </div>
       </Card>
+      <Modal
+        visible={store.payback.visibleModalFilterPayback}
+        title={"Filter"}
+        footer={footerLayoutFilter}
+      >
+        <Row>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              From
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Pilih Anggota"
+              onChange={(val) => {
+                setFilterSupplier(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSupplier}
+            >
+              {store.payback.dataConfirmation.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.userData_name}
+                </Option>
+              ))}
+            </Select>
+          </Col>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Date
+            </Title>
+            <RangePicker style={{ marginBottom: "20px", width: "100%" }} />
+            {/* <Select
+              mode={"multiple"}
+              placeholder="Choose Category"
+              onChange={async (val) => handleFilterCategory(val)}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={store.product.filterCategory || []}
+            >
+              {store.category.data.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select> */}
+          </Col>
+          {/* <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Filter Sub-Categories
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Choose Sub-Category"
+              onChange={(val) => {
+                setFilterSubCategories(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSubCategories}
+            >
+              {store.product.dataSubCategories.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Col> */}
+        </Row>
+      </Modal>
     </div>
   );
 });

src/pages/Profile/Profile.js

@@ -1,18 +1,32 @@
-import React, {useContext, useEffect} from "react";
+import React, { useContext, useEffect, useState } from "react";
-import {Button, Card, Col, Row, Table, Typography} from "antd";
+import {
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+  Button,
-import {LINKS} from "../../routes/app";
+  Card,
-import {useStore} from "../../utils/useStore";
+  Col,
-import {observer} from "mobx-react-lite";
+  Row,
-import {FilterOutlined} from "@ant-design/icons";
+  Table,
-import {format, parseISO} from "date-fns";
+  Typography,
-import {ModalLoaderContext} from "../../utils/modal";
+  DatePicker,
-
+  Modal,
-const {Title, Text} = Typography;
+  Form,
+} from "antd";
+import moment from "moment";
+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 { format, parseISO } from "date-fns";
+import { ModalLoaderContext } from "../../utils/modal";
 
+const { Title, Text } = Typography;
+const { RangePicker } = DatePicker;
 export const Profile = observer(() => {
   const store = useStore();
+  const [form] = Form.useForm();
   const modalLoader = useContext(ModalLoaderContext);
+  const [filterStart, setFilterStart] = useState([]);
+  const [filterEnd, setFilterEnd] = useState([]);
 
   const routeData = [
     {
@@ -21,7 +35,7 @@ export const Profile = observer(() => {
     },
     {
       route: LINKS.PROFILE,
-      name: <span style={{fontWeight: 'bold'}}>Profil</span>,
+      name: <span style={{ fontWeight: "bold" }}>Profil</span>,
     },
   ];
 
@@ -33,68 +47,144 @@ export const Profile = observer(() => {
         store.transaction.getDataHistoryTransaction(),
       ]);
       modalLoader.setLoading(false);
-    })()
+    })();
   }, []);
 
+  const handleRemoveFilter = async () => {
+    store.transaction.filterStart = null;
+    store.transaction.filterEnd = null;
+    setFilterStart([]);
+    setFilterEnd([]);
+    await store.transaction.getDataHistoryTransaction();
+    store.product.visibleModalFilterProduct = false;
+  };
+
+  const handleCancelFilter = () => {
+    store.transaction.filterStart = null;
+    store.transaction.filterEnd = null;
+    store.transaction.visibleModalFilterTransaction = false;
+  };
+
+  const handleSubmitFilter = async () => {
+    // store.product.filterSupplier = filterSupplier;
+    // store.product.filterSubCategory = filterSubCategories;
+    // modalLoader.setLoading(true);
+    // await store.product.getData();
+    // modalLoader.setLoading(false);
+    // store.transaction.visibleModalFilterTransaction = false;
+
+    console.log(form.getFieldsValue(), "Tes");
+    const data = form.getFieldsValue();
+    store.transaction.filterStart = data.start_date;
+    store.transaction.filterEnd = data.end_date;
+    modalLoader.setLoading(true);
+    await store.transaction.getDataHistoryTransaction();
+    modalLoader.setLoading(false);
+    store.transaction.visibleModalFilterTransaction = false;
+  };
+
+  // const handleFilterCategory = async (value) => {
+  //   if (value) {
+  //     store.product.filterCategory = value;
+  //     await store.product.getDataSubCategories();
+  //   } else {
+  //     store.product.filterCategory = null;
+  //     await store.product.getDataSubCategories();
+  //   }
+  // };
+
+  const footerLayoutFilter = [
+    <Button
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
+    >
+      Remove Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilter}>
+      Cancel
+    </Button>,
+    <Button
+      key={"submit"}
+      onClick={handleSubmitFilter}
+      style={{
+        backgroundColor: "#4e79e7",
+        color: "#fff",
+      }}
+    >
+      Apply
+    </Button>,
+  ];
   const columns = [
     {
-      title: 'Markup Price',
+      title: "Markup Price",
-      dataIndex: 'mark_up_price',
+      dataIndex: "mark_up_price",
-      key: 'mark_up_price',
+      key: "mark_up_price",
-      width: '20%',
+      width: "20%",
       render: (text) =>
-          new Intl.NumberFormat("id-ID", {
+        new Intl.NumberFormat("id-ID", {
-            style: "currency",
+          style: "currency",
-            currency: "IDR",
+          currency: "IDR",
-          }).format(text),
+        }).format(text),
     },
     {
-      title: 'Name',
+      title: "Name",
-      dataIndex: 'name',
+      dataIndex: "name",
-      key: 'name',
+      key: "name",
-      width: '50%',
+      width: "50%",
     },
     {
-      title: 'Transaction Date',
+      title: "Transaction Date",
-      dataIndex: 'created_at',
+      dataIndex: "created_at",
-      key: 'created_at',
+      key: "created_at",
       render: (text, record) => {
         return (
-          <Text>{format(parseISO(record.created_at), 'mm:HH dd-MM-yyyy')}</Text>
+          <Text>{format(parseISO(record.created_at), "mm:HH dd-MM-yyyy")}</Text>
-        )
+        );
       },
     },
-  ]
+  ];
 
-  const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop
-    display: "flex",
+    ? {
-    justifyContent: "center"
+        display: "flex",
-  } : {fontSize: "0.75rem"};
+        justifyContent: "center",
-  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+      }
-    fontSize: '1.25rem',
+    : { fontSize: "0.75rem" };
-    display: "flex",
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop
-    justifyContent: "center"
+    ? {
-  } : null;
+        fontSize: "1.25rem",
+        display: "flex",
+        justifyContent: "center",
+      }
+    : null;
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
         <Title strong>Profile</Title>
-        <Row style={{marginBottom: 20}}>
+        <Row style={{ marginBottom: 20 }}>
           <Col lg={12} xs={24}>
             <Row>
               <Col span={12}>
                 <Text strong>Name</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+                <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>
+                <Text>
+                  {store.authentication.profileData?.userDetail?.phone_number}
+                </Text>
               </Col>
               <Col span={12}>
                 <Text strong>Username</Text>
@@ -112,63 +202,175 @@ export const Profile = observer(() => {
                 <Text strong>Superior</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData.superior?.username}</Text>
+                <Text>
+                  {store.authentication.profileData.superior?.username}
+                </Text>
               </Col>
             </Row>
           </Col>
-          <Col lg={12} xs={24}>
+          <Col>
             <Row justify={"center"}>
-              <Col lg={24} xs={12}>
+              <Col lg={12} xs={12}>
-                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+                <Title strong level={3} style={styleSaldoTitle}>
+                  Saldo
+                </Title>
               </Col>
               <Col lg={24} xs={12}>
-                <Text style={styleSaldoContent}>{
+                <Text style={styleSaldoContent}>
-                  new Intl.NumberFormat("id-ID", {
+                  {new Intl.NumberFormat("id-ID", {
                     style: "currency",
-                    currency: "IDR"
+                    currency: "IDR",
-                  })
+                  }).format(store.authentication.profileData?.wallet || 0)}
-                      .format(store.authentication.profileData?.wallet || 0)}
                 </Text>
               </Col>
+              <Col></Col>
+            </Row>
+          </Col>
+          <Col>
+            <Row justify={"center"}>
+              <Col lg={12} xs={12}>
+                <Title strong level={3} style={styleSaldoTitle}>
+                  Profit
+                </Title>
+              </Col>
+              <Col lg={24} xs={12}>
+                <Text style={styleSaldoContent}>
+                  {new Intl.NumberFormat("id-ID", {
+                    style: "currency",
+                    currency: "IDR",
+                  }).format(store.authentication.profileData?.wallet || 0)}
+                </Text>
+              </Col>
+              <Col></Col>
             </Row>
           </Col>
         </Row>
         <Row>
           <Col span={24}>
             <div>
-              <Title strong level={3}>History User Transaction</Title>
+              <Title strong level={3}>
-
+                History User Transaction
-              {/* <Button style={{marginBottom: '1rem'}} onClick={() => {
+              </Title>
-                console.log('clicked filter')
+              <Button
-              }}>
+                style={{ marginBottom: "1rem" }}
-                <FilterOutlined/>
+                onClick={() => {
+                  store.transaction.visibleModalFilterTransaction = true;
+                }}
+              >
+                <FilterOutlined />
                 Filter
-              </Button> */}
+              </Button>
               <Table
-                  columns={columns}
+                columns={columns}
-                  bordered
+                bordered
-                  dataSource={store.transaction.dataHistoryTransaction}
+                dataSource={store.transaction.dataHistoryTransaction}
-                  pagination={{
+                pagination={{
-                    pageSize: store.transaction.pageSizeHistoryTransaction,
+                  pageSize: store.transaction.pageSizeHistoryTransaction,
-                    total: store.transaction.total_dataHistoryTransaction,
+                  total: store.transaction.total_dataHistoryTransaction,
-                    current: store.transaction.pageHistoryTransaction + 1,
+                  current: store.transaction.pageHistoryTransaction + 1,
-                    showSizeChanger: true,
+                  showSizeChanger: true,
-                    simple: false,
+                  simple: false,
-                  }}
+                }}
-                  onChange={async (page) => {
+                onChange={async (page) => {
-                    let pageNumber = page.current;
+                  let pageNumber = page.current;
-                    store.transaction.pageSizeHistoryTransaction = page.pageSize;
+                  store.transaction.pageSizeHistoryTransaction = page.pageSize;
-                    store.transaction.pageHistoryTransaction = pageNumber - 1;
+                  store.transaction.pageHistoryTransaction = pageNumber - 1;
-                    modalLoader.setLoading(true);
+                  modalLoader.setLoading(true);
-                    await store.transaction.getDataHistoryTransaction();
+                  await store.transaction.getDataHistoryTransaction();
-                    modalLoader.setLoading(false);
+                  modalLoader.setLoading(false);
-                  }}
+                }}
               />
             </div>
           </Col>
         </Row>
-        <div/>
+        <div />
       </Card>
+      <Modal
+        visible={store.transaction.visibleModalFilterTransaction}
+        title={"Filter"}
+        footer={footerLayoutFilter}
+      >
+        <Row>
+          <Col span={24}>
+            <Form
+              layout="vertical"
+              name="filter"
+              form={form}
+            >
+              <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%" }}
+                  // defaultValue={moment("YYYY-MM-DD")}
+                />
+              </Form.Item>
+            </Form>
+            {/* <Select
+              mode={"multiple"}
+              placeholder="Choose Supplier"
+              onChange={(val) => {
+                setFilterSupplier(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSupplier}
+            >
+              {store.supplier.data.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select> */}
+          </Col>
+          {/* <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Filter Categories
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Choose Category"
+              onChange={async (val) => handleFilterCategory(val)}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={store.product.filterCategory || []}
+            >
+              {store.category.data.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Col>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Filter Sub-Categories
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Choose Sub-Category"
+              onChange={(val) => {
+                setFilterSubCategories(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSubCategories}
+            >
+              {store.product.dataSubCategories.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Col> */}
+        </Row>
+      </Modal>
     </div>
-  )
+  );
 });

src/pages/Transaction/Product.js

@@ -160,9 +160,9 @@ export const Product = observer(() => {
               >
                 <Form form={form} layout="vertical">
                   <Form.Item
-                      name="phoneNumber"
+                      name="destination"
-                      label="Phone Number"
+                      label="Destination"
-                      rules={[{required: true, message: "Please input Phone Number!"}]}
+                      rules={[{required: true, message: "Please input Destination Number!"}]}
                   >
                     <Input/>
                   </Form.Item>

src/pages/Transaction/Transaction.js

@@ -1,17 +1,28 @@
-import React, {message, useContext, useEffect} from "react";
+import React, { message, useContext, useEffect, useState } from "react";
-import {useStore} from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
-import {Card, Tabs} from "antd";
+import {
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+  Card,
-import {Product} from "./Product";
+  Tabs,
-import {LINKS} from "../../routes/app";
+  Col,
-import {observer} from "mobx-react-lite";
+  Button,
-import {ModalLoaderContext} from "../../utils/modal";
+  Typography,
-
+  Select,
-const {TabPane} = Tabs;
+  Modal,
+  Row,
+  DatePicker,
+} from "antd";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { Product } from "./Product";
+import { LINKS } from "../../routes/app";
+import { observer } from "mobx-react-lite";
+import { ModalLoaderContext } from "../../utils/modal";
+import { FilterOutlined } from "@ant-design/icons";
 
+const { TabPane } = Tabs;
 export const Transaction = observer(() => {
   const store = useStore();
-
+  const { Title } = Typography;
+  const { Option } = Select;
   const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
@@ -50,25 +61,30 @@ export const Transaction = observer(() => {
     },
     {
       route: LINKS.TRANSACTION,
-      name: <span style={{fontWeight: 'bold'}}>Transaksi</span>,
+      name: <span style={{ fontWeight: "bold" }}>Transaksi</span>,
     },
   ];
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} text=""/>
+      <BreadcumbComponent data={routeData} text="" />
       <Card>
-        <Tabs
+        <Col span={12} style={{ marginBottom: 30 }}>
-          onChange={handleChangeTabs}
+          {/* <Button
-          size="default"
+            onClick={() => {
-          tabBarGutter="50"
+              store.transaction.visibleModalFilterTransaction = true;
-        >
+            }}
+          >
+            <FilterOutlined />
+            Filter
+          </Button> */}
+        </Col>
+        <Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
           {store.transaction.dataCategories.map((item, index) => (
             <TabPane tab={item.name} key={item.id}>
-              <Product/>
+              <Product />
             </TabPane>
           ))}
-
         </Tabs>
       </Card>
     </div>

src/store/category.js

@@ -22,7 +22,7 @@ export class Category {
     async getData() {
         try {
             const response = await http.get(`/product/categories?page=${this.page}&pageSize=${this.pageSize}`);
-            console.log(response)
+            //console.log(response)
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item

src/store/membership.js

@@ -9,6 +9,11 @@ export class Membership {
 
     dataDetail = {};
 
+
+    //filter
+    visibleModalFilterMembership = false;
+    filterMembership = null;
+    filterPartner = null;
     constructor(ctx) {
         this.ctx = ctx;
         makeAutoObservable(this);
@@ -16,7 +21,10 @@ export class Membership {
 
     async getData() {
         try {
-            const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
+            const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superrior=${this.filterMembership}&type=${this.filterPartner}`);
+            // console.log(this.filterMembership)
+            // console.log(this.filterPartner)
+            // console.log(response)
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 item.name = item?.user_detail?.name;
@@ -35,7 +43,7 @@ export class Membership {
     async getDetail(id) {
         try {
             const response = await http.get(`/users/`+id);
-            console.log(response,'Data Detail')
+            //console.log(response,'Data Detail')
             this.dataDetail = response.body.data
         } catch (e) {
             console.error(e);

src/store/payback.js

@@ -13,7 +13,10 @@ export class Payback {
   pageSizeConfirmation = 10;
   dataConfirmation = [];
   totalDataConfirmation = 0;
+  //data=[]
 
+    //filter
+    visibleModalFilterPayback = false;
   constructor(ctx) {
     this.ctx = ctx;
     makeAutoObservable(this);
@@ -21,8 +24,7 @@ export class Payback {
 
   async getDataCreated() {
     try {
-      const response = await http.get(
+      const response = await http.get(`/transaction/deposit-return?page=${this.pageCreated}&pageSize=${this.pageSizeCreated}`
-          `/transaction/deposit-return?page=${this.pageCreated}&pageSize=${this.pageSizeCreated}`
       );
       this.dataCreated = response.body.data.map((item, idx) => {
         item.key = idx;
@@ -40,6 +42,7 @@ export class Payback {
       const response = await http.get(
           `/transaction/deposit-return/confirmation?page=${this.pageConfirmation}&pageSize=${this.pageSizeConfirmation}`
       );
+      console.log(response)
       this.dataConfirmation = response.body.data.map((item, idx) => {
         item.key = idx;
         return item;
@@ -84,6 +87,8 @@ export class Payback {
   async confirmPayback(id, data) {
     try {
       const response = await http.put(`/transaction/deposit-return/confirmation/${id}/${data}`);
+      // console.log(response)
+      // this.data=response.body.data
       await Promise.all([
         this.getDataConfirmation(),
         this.getDataCreated()

src/store/subcategory.js

@@ -27,6 +27,7 @@ export class Subcategory {
     async getData() {
         try {
             const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`);
+            console.log(response)
             this.data = response.body.data.map((item, idx) => {
             item.key = idx;
             item.categoryName = item.category.name;

src/store/transaction.js

@@ -1,150 +1,165 @@
-import {makeAutoObservable} from "mobx";
+import { makeAutoObservable } from "mobx";
-import {http} from "../utils/http";
+import { http } from "../utils/http";
 
 export class Transaction {
-    page = 0;
+  page = 0;
-    pageSize = 10
+  pageSize = 10;
-    data = [];
+  data = [];
-    total_data = 0;
+  total_data = 0;
-    filterSubCategory = null;
+  filterSubCategory = null;
-    visibleModalProduct = false;
+  visibleModalProduct = false;
-    visibleModalTransaction = false;
+  visibleModalTransaction = false;
 
-    pageCategories = 0;
+  pageCategories = 0;
-    pageSizeCategories = 10
+  pageSizeCategories = 10;
-    dataCategories = [];
+  dataCategories = [];
-    total_dataCategories = 0;
+  total_dataCategories = 0;
 
-    pageSubCategories = 0;
+  pageSubCategories = 0;
-    pageSizeSubCategories = 10
+  pageSizeSubCategories = 10;
-    dataSubCategories = [];
+  dataSubCategories = [];
-    total_dataSubCategories = 0;
+  total_dataSubCategories = 0;
-    filterSubCategory = null;
+  filterSubCategory = null;
 
-    pageHistoryTransaction = 0;
+  pageHistoryTransaction = 0;
-    pageSizeHistoryTransaction = 10
+  pageSizeHistoryTransaction = 10;
-    dataHistoryTransaction = [];
+  dataHistoryTransaction = [];
-    total_dataHistoryTransaction = 0;
+  total_dataHistoryTransaction = 0;
 
-    pageHistoryTopUp = 0;
+  pageHistoryTopUp = 0;
-    pageSizeHistoryTopUp = 10;
+  pageSizeHistoryTopUp = 10;
-    dataHistoryTopUp = [];
+  dataHistoryTopUp = [];
-    total_dataHistoryTopUp = 0;
+  total_dataHistoryTopUp = 0;
 
-    constructor(ctx) {
+  //filter
-        this.ctx = ctx;
+  visibleModalFilterTransaction = false;
-        makeAutoObservable(this);
+  filterStart = null;
+  filterEnd = null;
+  constructor(ctx) {
+    this.ctx = ctx;
+    makeAutoObservable(this);
+  }
+
+  async getData() {
+    try {
+      const response = await http.get(
+        `/product/by-categories-all?sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`
+      );
+      this.data = response.body.data ?? [];
+      this.total_data = response?.body?.count ?? 0;
+    } catch (e) {
+      console.error(e);
     }
+  }
 
-    async getData() {
+  async getDataSubCategories() {
-        try {
+    try {
-            const response = await http.get(`/product/by-categories-all?sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
+      const response = await http.get(
-            this.data = response.body.data ?? []
+        `/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`
-            this.total_data = response?.body?.count ?? 0
+      );
-        } catch (e) {
+      this.dataSubCategories = response.body.data ?? [];
-            console.error(e);
+      this.total_dataSubCategories = response.body.count ?? 0;
-        }
+    } catch (e) {
+      console.error(e);
     }
+  }
 
-    async getDataSubCategories() {
+  async getDataCategories() {
-        try {
+    try {
-            const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
+      const response = await http.get(
-            this.dataSubCategories = response.body.data ?? []
+        `/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`
-            this.total_dataSubCategories = response.body.count ?? 0
+      );
-        } catch (e) {
+      this.dataCategories = response.body.data ?? [];
-            console.error(e);
+      this.total_dataCategories = response?.body?.count ?? 0;
-        }
+      if (this.dataCategories.length > 0) {
+        this.filterCategory = this.dataCategories[0].id;
+      }
+    } catch (e) {
+      console.error(e);
     }
+  }
 
-    async getDataCategories() {
+  async getDataHistoryTransaction() {
-        try {
+    try {
-            const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
+      const response = await http.get(
-            this.dataCategories = response.body.data ?? []
+        `/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}&start=${this.filterStart}&end=${this.filterEnd}`
-            this.total_dataCategories = response?.body?.count ?? 0
+      );
-            if (this.dataCategories.length > 0) {
+      console.log(response);
-                this.filterCategory = this.dataCategories[0].id
+      this.dataHistoryTransaction = response.body.data ?? [];
-            }
+      this.total_dataHistoryTransaction = response?.body?.count ?? 0;
-        } catch (e) {
+    } catch (e) {
-            console.error(e);
+      console.error(e);
-        }
     }
+  }
 
-    async getDataHistoryTransaction() {
+  async getDataHistoryTopUp(id) {
-        try {
+    try {
-            const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}`);
+      const response = await http.get(
-            this.dataHistoryTransaction = response.body.data ?? []
+        `/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`
-            this.total_dataHistoryTransaction = response?.body?.count ?? 0
+      );
-        } catch (e) {
+      this.dataHistoryTopUp = response.body.data ?? [];
-            console.error(e);
+      this.total_dataHistoryTopUp = response?.body?.count ?? 0;
-        }
+    } catch (e) {
+      console.error(e);
     }
+  }
 
-    async getDataHistoryTopUp(id) {
+  async create(data) {
-        try {
+    try {
-            const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`);
+      const response = await http.post("/product").send(data);
-            this.dataHistoryTopUp = response.body.data ?? []
+      await this.getData();
-            this.total_dataHistoryTopUp = response?.body?.count ?? 0
+      return response;
-        } catch (e) {
+    } catch (e) {
-            console.error(e);
+      console.error(e);
-        }
     }
+  }
 
-    async create(data) {
+  async buyProduct(data) {
-        try {
+    try {
-            const response = await http.post('/product').send(data);
+      const response = await http.post("/transaction/order").send(data);
-            await this.getData();
+      return response;
-            return response;
+    } catch (e) {
-        } catch (e) {
+      console.error(e);
-            console.error(e);
-        }
     }
+  }
 
-    async buyProduct(data) {
+  async update(id, data) {
-        try {
+    try {
-            const response = await http.post('/transaction/order').send(data);
+      const response = await http.put(`/product/${id}`).send(data);
-            return response;
+      await this.getData();
-        } catch (e) {
+      return response;
-            console.error(e);
+    } catch (e) {
-        }
+      console.error(e);
     }
+  }
 
-    async update(id, data) {
+  async delete(id) {
-        try {
+    try {
-            const response = await http.put(`/product/${id}`).send(data);
+      const response = await http.del(`/product/${id}`);
-            await this.getData();
+      await this.getData();
-            return response;
+      return response;
-        } catch (e) {
+    } catch (e) {
-            console.error(e);
+      console.error(e);
-        }
     }
+  }
 
-    async delete(id) {
+  async distribute(data) {
-        try {
+    try {
-            const response = await http.del(`/product/${id}`);
+      const response = await http.post("/transaction/distribute").send(data);
-            await this.getData();
+      return response;
-            return response;
+    } catch (e) {
-        } catch (e) {
+      console.error(e);
-            console.error(e);
-        }
     }
+  }
 
-    async distribute(data) {
+  async distributeAdmin(data) {
-        try {
+    try {
-            const response = await http.post('/transaction/distribute').send(data);
+      const response = await http
-            return response;
+        .post("/transaction/distribute-admin")
-        } catch (e) {
+        .send(data);
-            console.error(e);
+      return response;
-        }
+    } catch (e) {
-    }
+      console.error(e);
-
-    async distributeAdmin(data) {
-        try {
-            const response = await http.post('/transaction/distribute-admin').send(data);
-            return response;
-        } catch (e) {
-            console.error(e);
-        }
     }
+  }
 }
-
-

src/store/ui.js

@@ -23,7 +23,7 @@ export class UI {
     };
 
     toggleLeftDrawerIsShown() {
-        console.log('what')
+        //console.log('what')
         this.leftDrawerIsShown = !this.leftDrawerIsShown;
     }