Merge branch 'develop' into 'devops-staging'

Develop See merge request empatnusabangsa/ppob/ppob-frontend!5
2021-12-22 08:31:19 +00:00 · 2021-12-22 08:31:19 +00:00 · f704b68a20
commit f704b68a20
parent 54697d0c76 5039fa736a
24 changed files with 813 additions and 391 deletions
--- a/src/component/CategoryComponent.js
+++ b/src/component/CategoryComponent.js
@ -139,7 +139,7 @@ export const CategoryComponent = observer((props) => {
          store.category.pageSize = page.pageSize;
          store.category.page = pageNumber - 1;
          modalLoader.setLoading(true);
-          await store.category.getData();
+          //await store.category.getData();
          modalLoader.setLoading(false);
        }}
      />
--- a/src/component/CommissionComponent.js
+++ b/src/component/CommissionComponent.js
@ -82,7 +82,7 @@ export const CommissionComponent = observer((props) => {
          store.commission.pageSize = page.pageSize;
          store.commission.page = pageNumber - 1;
          modalLoader.setLoading(true);
-          await store.commission.getData();
+          //await store.commission.getData();
          modalLoader.setLoading(false);
        }}
      />
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@ -211,7 +211,7 @@ export const PartnerComponent = observer((props) => {
            store.partner.pageSize = page.pageSize;
            store.partner.page = pageNumber - 1;
            modalLoader.setLoading(true);
-            await store.partner.getData();
+            //await store.partner.getData();
            modalLoader.setLoading(false);
          }}
        />
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@ -1,38 +1,22 @@
-import React, { useContext, useState } from "react";
-import {
-  Button,
-  Col,
-  Form,
-  Input,
-  message,
-  Modal,
-  Row,
-  Select,
-  Table,
-  Divider,
-  Tag,
-  Typography,
-  List,
-} from "antd";
-import { observer } from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
-import { capitalize } from "lodash";
-import { useStore } from "../utils/useStore";
-import { LINKS } from "../routes/app";
-import { ModalLoaderContext } from "../utils/modal";
+import React, {useContext, useState} from "react";
+import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd";
+import {observer} from "mobx-react-lite";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+import {useHistory} from "react-router-dom";
+import {useStore} from "../utils/useStore";
+import {LINKS} from "../routes/app";
+import {ModalLoaderContext} from "../utils/modal";

-const { Title, Text } = Typography;
+const {Title, Text} = Typography;

 export const ProductComponent = observer((props) => {
  const store = useStore();
  const [form] = Form.useForm();
-  const { Option } = Select;
+  const {Option} = Select;
  const history = useHistory();
  const [idData, setIdData] = useState("");
-  const [filterSupplier, setFilterSupplier] = useState(null);
-  const [filterCategories, setFilterCategories] = useState(null);
-  const [filterSubCategories, setFilterSubCategories] = useState(null);
+  const [filterSupplier, setFilterSupplier] = useState([]);
+  const [filterSubCategories, setFilterSubCategories] = useState([]);
  const modalLoader = useContext(ModalLoaderContext);

  const handleEditButton = (data) => {
@ -52,23 +36,23 @@ export const ProductComponent = observer((props) => {
  const columns = [
    {
      title: "Kode",
-      dataIndex: "code",
-      key: "code",
+      dataIndex: "product_code",
+      key: "product_code",
    },
    {
      title: "Produk",
-      dataIndex: ["name"],
-      key: "name",
+      dataIndex: "product_name",
+      key: "product_name",
    },
    {
      title: "Harga Beli",
-      dataIndex: ["currentPrice", "price"],
-      key: ["currentPrice", "price"],
+      dataIndex: "current_price_price",
+      key: "current_price_price",
    },
    {
      title: "Harga Jual",
-      dataIndex: ["currentPrice", "mark_up_price"],
-      key: ["currentPrice", "mark_up_price"],
+      dataIndex: "mark_up_price",
+      key: "mark_up_price",
    },
    // {
    //     title: "Gangguan",
@ -96,6 +80,20 @@ export const ProductComponent = observer((props) => {
        </Tag>
      ),
    },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+          <Button
+            onClick={async () => {
+              history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+              //console.log(record.id)
+            }}
+            >
+              Detail
+            </Button>
+      ),
+    },
  ];

  const deleteData = async (id) => {
@ -164,17 +162,17 @@ export const ProductComponent = observer((props) => {
  const handleRemoveFilter = async () => {
    store.product.filterSupplier = null;
    store.product.filterSubCategory = null;
-    setFilterSupplier(null);
-    setFilterCategories(null);
-    setFilterSubCategories(null);
+    setFilterSupplier([]);
+    store.product.filterCategory = null;
+    setFilterSubCategories([]);
    await store.product.getData();
    store.product.visibleModalFilterProduct = false;
  };

  const handleCancelFilter = () => {
-    setFilterSupplier(null);
-    setFilterCategories(null);
-    setFilterSubCategories(null);
+    setFilterSupplier([]);
+    store.product.filterCategory = null;
+    setFilterSubCategories([]);
    store.product.visibleModalFilterProduct = false;
  };

@ -187,6 +185,16 @@ export const ProductComponent = observer((props) => {
    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"}
@ -383,7 +391,7 @@ export const ProductComponent = observer((props) => {
            ]}
          >
            <Select placeholder="Select Sub Category" allowClear>
-              {store.product.dataSubCategories.map((item) => (
+              {store.category.dataSubCategories.map((item) => (
                  <Option value={item.id} key={item.id}>
                    {item.name}
                  </Option>
@ -409,7 +417,8 @@ export const ProductComponent = observer((props) => {
                onChange={(val) => {
                  setFilterSupplier(val);
                }}
-              style={{ marginBottom: "20px", width: "100%" }}
+                style={{marginBottom: "20px", width: "100%"}}
+                value={filterSupplier}
            >
              {store.supplier.data.map((item) => (
                  <Option value={item.id} key={item.id}>
@ -425,12 +434,9 @@ export const ProductComponent = observer((props) => {
            <Select
                mode={"multiple"}
                placeholder="Choose Category"
-              onChange={async (val) => {
-                setFilterCategories(val);
-                store.product.filterByCategory = val;
-                await store.product.getDataSubCategories();
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
+                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}>
@ -449,7 +455,8 @@ export const ProductComponent = observer((props) => {
                onChange={(val) => {
                  setFilterSubCategories(val);
                }}
-              style={{ marginBottom: "20px", width: "100%" }}
+                style={{marginBottom: "20px", width: "100%"}}
+                value={filterSubCategories}
            >
              {store.product.dataSubCategories.map((item) => (
                  <Option value={item.id} key={item.id}>
--- a/src/component/Subcategory.js
+++ b/src/component/Subcategory.js
@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useState,useEffect } from "react";
 import {
  Button,
  Form,
@ -23,7 +23,10 @@ export const SubcategoryComponent = observer((props) => {
  const { Option } = Select;
  const [idData, setIdData] = useState("");
  const modalLoader = useContext(ModalLoaderContext);
+  useEffect(() => {
    
+    getData()
+  }, [])
  const getData = async () => {
    await store.category.getData();
    await store.subcategory.getData();
@ -78,7 +81,7 @@ export const SubcategoryComponent = observer((props) => {
      modalLoader.setLoading(true);
      try {
        await store.subcategory.update(idData, data);
-        await getData();
+        //await getData();
        message.success("Success Update Data Category");
      } catch (e) {
        message.error("Failed Update Data Category");
@ -91,7 +94,6 @@ export const SubcategoryComponent = observer((props) => {
      modalLoader.setLoading(true);
      try {
        await store.subcategory.create(data);
-        await getData();
        message.success("Success Add New Category");
      } catch (e) {
        console.log(e, "apa errornya");
@ -124,7 +126,7 @@ export const SubcategoryComponent = observer((props) => {
            store.subcategory.pageSize = page.pageSize;
            store.subcategory.page = pageNumber - 1;
            modalLoader.setLoading(true);
-            await getData();
+            // await getData();
            modalLoader.setLoading(false);
          }}
        />
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@ -1,12 +1,23 @@
-import React, {useContext, useState} from "react";
-import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
-import {TopupsaldoModal} from "./TopupsaldoModal";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Space,
+  Table,
+  Tag,
+  List,
+  Divider,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { TopupsaldoModal } from "./TopupsaldoModal";
+import { ModalLoaderContext } from "../utils/modal";

 export const SupplierComponent = observer((props) => {
  const store = useStore();
@ -73,7 +84,7 @@ export const SupplierComponent = observer((props) => {
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
-          }).format(text)
+        }).format(text),
    },
    {
      title: "Saldo di System",
@ -84,7 +95,7 @@ export const SupplierComponent = observer((props) => {
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
-          }).format(text)
+        }).format(text),
    },
    {
      title: "Status",
@ -94,7 +105,7 @@ export const SupplierComponent = observer((props) => {
      render: (text, record) => (
        <Tag
          color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{color: "#4F566B"}}
+          style={{ color: "#4F566B" }}
        >
          {record?.status === true ? " ACTIVE" : "INACTIVE"}
        </Tag>
@ -137,7 +148,7 @@ export const SupplierComponent = observer((props) => {
  const handleDelete = (id) => {
    Modal.confirm({
      title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined/>,
+      icon: <ExclamationCircleOutlined />,
      okText: "Yes",
      okType: "primary",
      cancelText: "Cancel",
@ -190,8 +201,9 @@ export const SupplierComponent = observer((props) => {

  return (
    <div>
+      {store.ui.mediaQuery.isDesktop && (
        <Table
-        style={{textAlign: "center"}}
+          style={{ textAlign: "center" }}
          columns={columns}
          dataSource={store.supplier.data}
          bordered
@ -207,10 +219,103 @@ export const SupplierComponent = observer((props) => {
            store.supplier.pageSize = page.pageSize;
            store.supplier.page = pageNumber - 1;
            modalLoader.setLoading(true);
-          await store.supplier.getData();
+            //await store.supplier.getData();
            modalLoader.setLoading(false);
          }}
        />
+      )}
+      {store.ui.mediaQuery.isMobile && (
+        <List
+          itemLayout="horizontal"
+          position={"top"}
+          pagination={{
+            onChange: async (page) => {
+              store.supplier.pageSize = page.pageSize;
+              store.supplier.page = page.current;
+              modalLoader.setLoading(true);
+              await store.supplier.getData();
+              modalLoader.setLoading(false);
+            },
+            pageSize: store.supplier.pageSize,
+            total: store.supplier.total_data,
+            current: store.supplier.page,
+            style: { marginBottom: "1rem", marginRight: "1rem" },
+          }}
+          dataSource={store.supplier.data}
+          style={{ padding: 0 }}
+          renderItem={(item) => {
+            return (
+              <div>
+                <List.Item
+                  key={item.id}
+                  style={{
+                    backgroundColor: "#ffffff",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <List.Item.Meta
+                    className={["cariparkir-container"].join(" ")}
+                    title={item.code}
+                    description={
+                      <div style={{}}>
+                        <p>
+                          <small>Name : {item.name}</small> <br />
+                          <small>Saldo Supplier : {item.coa.amount}</small>
+                          <br />
+                          <small>
+                            Saldo System : {item.coa_undistribute.amount}
+                          </small>
+                          <br />
+                          <Button
+                            style={{
+                              marginRight: 10,
+                            }}
+                            type={item?.status === true ? "danger" : "primary"}
+                            onClick={() => changeStatus(item?.id, item?.status)}
+                          >
+                            {item?.status === true ? "INACTIVE" : "ACTIVE"}
+                          </Button>
+                          <Button
+                            onClick={() => handleTopup(item)}
+                            style={{
+                              marginRight: 10,
+                            }}
+                          >
+                            Top Up Saldo
+                          </Button>
+                          <Button
+                            onClick={() => handleEditButton(item)}
+                            style={{
+                              marginBottom: 5,
+                            }}
+                          >
+                            Edit
+                          </Button>
+                          <Tag
+                            color={
+                              item?.status === true ? "processing" : "#E3E8EE"
+                            }
+                            style={{ color: "#4F566B" }}
+                          >
+                            {item?.status === true ? " ACTIVE" : "INACTIVE"}
+                          </Tag>
+                        </p>
+                        <p></p>
+                      </div>
+                    }
+                  />
+                </List.Item>
+                <Divider plain style={{ margin: 0 }} />
+              </div>
+            );
+          }}
+        />
+      )}
      <Modal
        visible={store.supplier.visibleModalSupplier}
        title={idData ? "Edit Supplier" : "Create a new Supplier"}
@ -237,22 +342,22 @@ export const SupplierComponent = observer((props) => {
          <Form.Item
            name="name"
            label="Name"
-            rules={[{required: true, message: "Please input name!"}]}
+            rules={[{ required: true, message: "Please input name!" }]}
          >
-            <Input/>
+            <Input />
          </Form.Item>
          {!idData && (
            <Form.Item
              name="code"
              label="Kode"
-              rules={[{required: true, message: "Please input kode!"}]}
+              rules={[{ required: true, message: "Please input kode!" }]}
            >
-              <Input/>
+              <Input />
            </Form.Item>
          )}
        </Form>
      </Modal>
-      <TopupsaldoModal code={store.supplier.code}/>
+      <TopupsaldoModal code={store.supplier.code} />
    </div>
  );
 });
--- a/src/index.css
+++ b/src/index.css
@ -63,6 +63,11 @@ code {
 .ant-menu-submenu-arrow{
    padding-right: 40px !important; 
 }
-.ant-breadcrumb{
+.ant-breadcrumb {
    margin-bottom: 10px !important;
 }
+
+.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: #ed1f24 !important;
+    border-color: #ed1f24 !important;
+}
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@ -209,18 +209,22 @@ export const DesktopLayout = observer(() => {
                icon={<ProfileOutlined />}
                title="Payback"
              >
+                {store.authentication.userData.role !== "Retail" && (
                <Menu.Item key="payback-to-user">
                  <Link to={LINKS.PAYBACK}>
                    <PayCircleOutlined />
                    <span>Payback To</span>
                  </Link>
                </Menu.Item>
+                )}
+                {store.authentication.userData.role !== "Admin" && (
                <Menu.Item key="payback-from-user">
                  <Link to={LINKS.PAYBACKFROMUSER}>
                    <AlipayOutlined />
                    <span>Payback</span>
                  </Link>
                </Menu.Item>
+                )}
              </SubMenu>
              {store.authentication.userData.role !== "Admin" && (
                <Menu.Item key="profile">
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@ -15,7 +15,7 @@ import {
  ShoppingCartOutlined,
  UserOutlined,
  AlipayOutlined,
-  PayCircleOutlined
+  PayCircleOutlined,
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../utils/useStore";
@ -127,18 +127,22 @@ export const MenuList = observer((props) => {
        </Menu.Item>
      )}
      <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback">
+        {store.authentication.userData.role !== "Retail" && (
          <Menu.Item key="payback-to-user">
            <Link to={LINKS.PAYBACK}>
              <PayCircleOutlined />
              <span>Payback To</span>
            </Link>
          </Menu.Item>
+        )}
+        {store.authentication.userData.role !== "Admin" && (
          <Menu.Item key="payback-from-user">
            <Link to={LINKS.PAYBACKFROMUSER}>
-            <AlipayOutlined/>
+              <AlipayOutlined />
              <span>Payback</span>
            </Link>
          </Menu.Item>
+        )}
      </SubMenu>
      {store.authentication.userData.role !== "Admin" && (
        <Menu.Item key="profile">
--- a/src/pages/Config/Supplier.js
+++ b/src/pages/Config/Supplier.js
@ -75,7 +75,7 @@ export const Supplier = observer(() => {
              placeholder="input search text"
              style={{
                width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                marginRight: store.ui.mediaQuery.isMobile ? 10 : 10,
                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
              }}
              onSearch={(value) => console.log(value)}
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@ -0,0 +1,148 @@
+import React, {useContext, useEffect} from "react";
+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";
+import {format, parseISO} from "date-fns";
+import {ModalLoaderContext} from "../../utils/modal";
+
+const {Title, Text} = Typography;
+
+export const DetailUser = observer(() => {
+  const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.DETAILUSER,
+      name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([
+        store.authentication.getProfile(),
+        store.transaction.getDataHistoryTransaction(),
+      ]);
+      modalLoader.setLoading(false);
+    })()
+  }, []);
+
+  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',
+      render: (text, record) => {
+        return (
+          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+        )
+      },
+    },
+  ]
+
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+    display: "flex",
+    justifyContent: "center"
+  } : {fontSize: "0.75rem"};
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+    fontSize: '1.25rem',
+    display: "flex",
+    justifyContent: "center"
+  } : null;
+
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData}/>
+      <Card>
+        <Title strong>Detail User</Title>
+        <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>
+              </Col>
+              <Col span={12}>
+                <Text strong>Role</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Saldo Supplier</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.username}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Saldo System</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.roles?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Status</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.superior?.username}</Text>
+              </Col>
+            </Row>
+          </Col>
+          <Col lg={12} xs={24}>
+            <Row justify={"center"}>
+              <Col lg={24} xs={12}>
+                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+              </Col>
+              <Col lg={24} xs={12}>
+                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <div>
+              <Title strong level={3}>History User Transaction</Title>
+
+              <Button style={{marginBottom: '1rem'}} onClick={() => {
+                console.log('clicked filter')
+              }}>
+                <FilterOutlined/>
+                Filter
+              </Button>
+              <Table
+                columns={columns}
+                dataSource={store.transaction.dataHistoryTransaction}
+                bordered
+              />
+            </div>
+          </Col>
+        </Row>
+        <div/>
+      </Card>
+    </div>
+  )
+});
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@ -1,36 +1,37 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
  Button,
  Card,
  Col,
  Divider,
+  Form,
  Input,
  List,
  message,
  Modal,
  Row,
+  Select,
  Space,
  Table,
  Tag,
-  Form,
-  Select,
 } from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
 import {
-  ExclamationCircleOutlined,
-  FilterOutlined,
-  PlusSquareOutlined,
  DownloadOutlined,
+  ExclamationCircleOutlined,
+  PlusSquareOutlined,
 } from "@ant-design/icons";
-import {MembershipModal} from "./MembershipModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
+import { MembershipModal } from "./MembershipModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { Link, useHistory } from "react-router-dom";
+import { ModalLoaderContext } from "../../utils/modal";

-const {Search} = Input;
-const {Option} = Select;
+const { Search } = Input;
+const { Option } = Select;
 export const Membership = observer(() => {
+  const history = useHistory();
  const [form] = Form.useForm();
  const store = useStore();
  const [visibleModal, setVisibleModal] = useState(false);
@ -133,9 +134,26 @@ export const Membership = observer(() => {
      key: "role",
    },
    {
-      title: "Saldo",
+      title: "Saldo di Supplier",
      dataIndex: ["coa", "amount"],
      key: ["coa", "amount"],
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    {
+      title: "Saldo di System",
+      dataIndex: ["coa_undistribute", "amount"],
+      key: ["coa_undistribute", "amount"],
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
    },
    {
      title: "Status",
@ -144,7 +162,7 @@ export const Membership = observer(() => {
      render: (text, record) => (
        <Tag
          color={record?.isActive === true ? "processing" : "#E3E8EE"}
-          style={{color: "#4F566B"}}
+          style={{ color: "#4F566B" }}
        >
          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
        </Tag>
@ -168,7 +186,7 @@ export const Membership = observer(() => {
              setIsVisibleTopUpModal(true);
            }}
          >
-            <DownloadOutlined/> Top Up Saldo
+            <DownloadOutlined /> Top Up Saldo
          </Button>
          <Button
            onClick={() => {
@ -200,13 +218,14 @@ export const Membership = observer(() => {
          >
            Ganti Password
          </Button>
-          {/* <Button
+          <Button
            onClick={async () => {
-              handleDelete(record.id);
+              history.push(LINKS.DETAILUSER.replace(":id", record.id));
+              //console.log(record.id)
            }}
          >
-            Delete
-          </Button> */}
+            Detail
+          </Button>
        </Space>
      ),
    },
@ -219,7 +238,7 @@ export const Membership = observer(() => {
    },
    {
      route: "/app/membership",
-      name: <span style={{fontWeight: "bold"}}>Membership</span>,
+      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
    },
  ];

@ -254,7 +273,6 @@ export const Membership = observer(() => {
      try {
        await store.membership.create(data);
        message.success("Success Add New Member");
-        await getData();
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Member");
@ -266,42 +284,42 @@ export const Membership = observer(() => {
    }
  };

-  const handleDelete = (record) => {
-    Modal.confirm({
-      title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined/>,
-      okText: "Yes",
-      okType: "primary",
-      cancelText: "Cancel",
-      async onOk() {
-        try {
-          //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 getData();
-        } catch (e) {
-          message.error("Failed Delete Data");
-        }
-      },
-      onCancel() {
-        console.log("Cancel");
-      },
-    });
+  const handleDetail = (record) => {
+    // Modal.confirm({
+    //   title: "Are you sure delete this record?",
+    //   icon: <ExclamationCircleOutlined/>,
+    //   okText: "Yes",
+    //   okType: "primary",
+    //   cancelText: "Cancel",
+    //   async onOk() {
+    //     try {
+    //       //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 getData();
+    //     } catch (e) {
+    //       message.error("Failed Delete Data");
+    //     }
+    //   },
+    //   onCancel() {
+    //     console.log("Cancel");
+    //   },
+    // });
  };

  return (
    <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
      <Card>
        <div>
-          <Row style={{marginBottom: 20}}>
+          <Row style={{ marginBottom: 20 }}>
            <Col span={12}>
              {/* <Button>
                <FilterOutlined />
                Filter
              </Button> */}
            </Col>
-            <Col span={12} style={{textAlign: "right"}}>
+            <Col span={12} style={{ textAlign: "right" }}>
              <Search
                placeholder="input search text"
                style={{
@ -316,7 +334,7 @@ export const Membership = observer(() => {
                  setVisibleModal(true);
                }}
              >
-                <PlusSquareOutlined/> New
+                <PlusSquareOutlined /> New
              </Button>
            </Col>
          </Row>
@ -339,7 +357,7 @@ export const Membership = observer(() => {
                store.membership.pageSize = page.pageSize;
                store.membership.page = pageNumber - 1;
                modalLoader.setLoading(true);
-                await getData();
+                //await getData();
                modalLoader.setLoading(false);
              }}
            />
@ -360,10 +378,10 @@ export const Membership = observer(() => {
                pageSize: store.membership.pageSize,
                total: store.membership.total_data,
                current: store.membership.page,
-                style: {marginBottom: "1rem", marginRight: "1rem"},
+                style: { marginBottom: "1rem", marginRight: "1rem" },
              }}
              dataSource={store.membership.data}
-              style={{padding: 0}}
+              style={{ padding: 0 }}
              renderItem={(item) => {
                return (
                  <div>
@ -381,27 +399,39 @@ export const Membership = observer(() => {
                    >
                      <List.Item.Meta
                        className={["cariparkir-container"].join(" ")}
-                        title={item.username}
+                        title={item.name}
                        description={
                          <div style={{}}>
                            <p>
-                              <small>Username : {item.username}</small> <br/>
+                              <small>Role : {item.roleName}</small> <br />
+                              <small>Saldo Supplier : {item.amount}</small>{" "}
+                              <br />
+                              <small>Saldo System : {item.amount}</small> <br />
                            </p>
                          </div>
                        }
                      />
-                      <div style={{marginRight: 16}}>
+                      <div style={{ marginRight: 16 }}>
                        <p
                          style={{
                            fontSize: 9,
                            margin: 0,
                          }}
                        >
-                          {item.username}
+                          <Button
+                            type={
+                              item?.isActive === true ? "danger" : "primary"
+                            }
+                            onClick={() =>
+                              changeStatus(item?.id, item?.isActive)
+                            }
+                          >
+                            {item?.isActive === true ? "Inactive" : "Active"}
+                          </Button>
                        </p>
                      </div>
                    </List.Item>
-                    <Divider plain style={{margin: 0}}/>
+                    <Divider plain style={{ margin: 0 }} />
                  </div>
                );
              }}
@ -435,7 +465,7 @@ export const Membership = observer(() => {
          <Form.Item
            name="supplier"
            label="Supplier"
-            rules={[{required: true, message: "Please input supplier!"}]}
+            rules={[{ required: true, message: "Please input supplier!" }]}
          >
            <Select placeholder="Select Code Supplier" allowClear>
              {store.supplier.data.map((item) => (
@ -448,9 +478,9 @@ export const Membership = observer(() => {
          <Form.Item
            name="amount"
            label="Amount"
-            rules={[{required: true, message: "Please input amount!"}]}
+            rules={[{ required: true, message: "Please input amount!" }]}
          >
-            <Input/>
+            <Input />
          </Form.Item>
        </Form>
      </Modal>
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@ -1,16 +1,15 @@
 import React from "react";
-import { Form, Input, Modal, Select } from "antd";
-import { capitalize } from "lodash";
-import { useStore } from "../../utils/useStore";
+import {Form, Input, Modal, Select} from "antd";
+import {useStore} from "../../utils/useStore";

 export const MembershipModal = ({
                                    visible,
                                    onCreate,
                                    onCancel,
                                    initialData,
-}) => {
+                                }) => {
    const [form] = Form.useForm();
-  const { Option } = Select;
+    const {Option} = Select;
    const store = useStore();

  return (
@ -77,7 +76,7 @@ export const MembershipModal = ({
            label="Password"
            rules={[{ required: false, message: "Please input password!" }]}
          >
-            <Input />
+              <Input.Password/>
          </Form.Item>
        )}
        {((initialData.id && !initialData.isChangePassword) ||
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@ -158,21 +158,21 @@ export const Payback = observer(() => {
                  columns={columns}
                  dataSource={store.payback.data}
                  bordered
-                  pagination={{
-                    pageSize: store.payback.page,
-                    total: store.payback.total_data,
-                    current: store.payback.pageSize + 1,
-                    showSizeChanger: true,
-                    simple: false
-                  }}
-                  onChange={async (page) => {
-                    let pageNumber = page.current;
-                    store.payback.pageSize = page.pageSize;
-                    store.payback.page = pageNumber - 1;
-                    modalLoader.setLoading(true);
-                    await store.payback.getData();
-                    modalLoader.setLoading(false);
-                  }}
+                  // pagination={{
+                  //   pageSize: store.payback.page,
+                  //   total: store.payback.total_data,
+                  //   current: store.payback.pageSize + 1,
+                  //   showSizeChanger: true,
+                  //   simple: false
+                  // }}
+                  // onChange={async (page) => {
+                  //   let pageNumber = page.current;
+                  //   store.payback.pageSize = page.pageSize;
+                  //   store.payback.page = pageNumber - 1;
+                  //   modalLoader.setLoading(true);
+                  //   await store.payback.getData();
+                  //   modalLoader.setLoading(false);
+                  // }}
              />
          )}

@ -180,19 +180,19 @@ export const Payback = observer(() => {
              <List
                  itemLayout="horizontal"
                  position={"top"}
-                  pagination={{
-                    onChange: async (page) => {
-                      store.payback.pageSize = page.pageSize;
-                      store.payback.page = page.current;
-                      modalLoader.setLoading(true);
-                      await store.payback.getData();
-                      modalLoader.setLoading(false);
-                    },
-                    pageSize: store.payback.pageSize,
-                    total: store.payback.total_data,
-                    current: store.payback.page,
-                    style: {marginBottom: "1rem", marginRight: "1rem"},
-                  }}
+                  // pagination={{
+                  //   onChange: async (page) => {
+                  //     store.payback.pageSize = page.pageSize;
+                  //     store.payback.page = page.current;
+                  //     modalLoader.setLoading(true);
+                  //     await store.payback.getData();
+                  //     modalLoader.setLoading(false);
+                  //   },
+                  //   pageSize: store.payback.pageSize,
+                  //   total: store.payback.total_data,
+                  //   current: store.payback.page,
+                  //   style: {marginBottom: "1rem", marginRight: "1rem"},
+                  // }}
                  dataSource={store.payback.data}
                  style={{padding: 0}}
                  renderItem={(item) => {
--- a/src/pages/Payback/PaybackFromUser.js
+++ b/src/pages/Payback/PaybackFromUser.js
@ -12,7 +12,6 @@ const {Search} = Input;

 export const PaybackFromUser = observer(() => {
  const store = useStore();
-  const [visibleModal, setVisibleModal] = useState(false);
  const [initialData, setInitialData] = useState({});
  const modalLoader = useContext(ModalLoaderContext);

@ -71,23 +70,6 @@ export const PaybackFromUser = observer(() => {
    },
  ];

-  const onSubmit = async (data) => {
-    modalLoader.setLoading(true);
-    try {
-      // await store.membership.create(data);
-      // message.success("Success Add New Member");
-      // await store.membership.getData();
-    } catch (e) {
-      console.error(e, "apa errornya");
-      message.error("Failed Add Member");
-    }
-    modalLoader.setLoading(false);
-    setVisibleModal(false);
-  };
-
-  const handleAction = async (record, type) => {
-  };
-
  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData}/>
@ -113,7 +95,7 @@ export const PaybackFromUser = observer(() => {
                <Button
                  onClick={() => {
                    setInitialData({});
-                    setVisibleModal(true);
+                    store.payback.visibleModalPayback = true;
                  }}
                >
                  <PlusSquareOutlined/> New
@ -140,7 +122,7 @@ export const PaybackFromUser = observer(() => {
                  store.payback.pageSizePaybackUser = page.pageSize;
                  store.payback.pageSizePaybackUser = pageNumber - 1;
                  modalLoader.setLoading(true);
-                  await store.payback.getDataUser();
+                  //await store.payback.getDataUser();
                  modalLoader.setLoading(false);
                }}
            />
@ -210,15 +192,7 @@ export const PaybackFromUser = observer(() => {
      </Card>

      <PaybackModal
-        visible={visibleModal}
        initialData={initialData}
-        onCreate={async (data) => {
-          await onSubmit(data);
-        }}
-        onCancel={() => {
-          setInitialData({});
-          setVisibleModal(false);
-        }}
      />
    </div>
  );
--- a/src/pages/Payback/PaybackModal.js
+++ b/src/pages/Payback/PaybackModal.js
@ -1,12 +1,12 @@
 import React, {useContext, useState} from "react";
-import {Form, Input, message, Modal, Upload,} from "antd";
+import {Form, InputNumber, message, Modal, Upload,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";
 import {http} from "../../utils/http";
 import {appConfig} from "../../config/app";

-export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
+export const PaybackModal = ({initialData}) => {
  const [form] = Form.useForm();
  const store = useStore();
  const [image, setImage] = useState("");
@ -58,40 +58,51 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
  );

  const handleSubmit = async (data) => {
-    console.log(data, "isi data2");
-    try {
    modalLoader.setLoading(true);
-      await store.payback.create(data);
-      modalLoader.setLoading(false);
+    try {
+      const request = {
+        ...data,
+        destination: store.authentication.profileData.superior?.id
+      }
+      await store.payback.create(request);
      message.success("Success Add Payback");
-      await store.payback.getData();
    } catch (e) {
-      modalLoader.setLoading(false);
      if (e.response?.body?.message) {
        message.error(e.response.body.message);
        return;
      }
      message.error(e.message);
    }
+    modalLoader.setLoading(false);
    form.resetFields();
+    store.payback.visibleModalPayback = false;
+    setImage("");
+    setFileList([]);
+    setPreviewImage("");
+    setPreviewVisible(false);
  };

+  const handleCancel = () => {
+    form.resetFields();
+    store.payback.visibleModalPayback = false;
+    setImage("");
+    setFileList([]);
+    setPreviewImage("");
+    setPreviewVisible(false);
+  }
+
  return (
      <Modal
-          visible={visible}
+          visible={store.payback.visibleModalPayback}
          title={"Create a new Payback"}
          okText={"Create"}
          cancelText="Cancel"
-          onCancel={() => {
-            form.resetFields();
-            onCancel();
-          }}
+          onCancel={handleCancel}
          onOk={() => {
            form
                .validateFields()
                .then((values) => {
                  handleSubmit(values);
-                  console.log(values);
                  form.resetFields();
                })
                .catch((info) => {
@ -105,14 +116,6 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
            name="form_in_modal"
            initialValues={initialData}
        >
-          <Form.Item
-              name="destination"
-              label="destination"
-              rules={[{required: true, message: "Please input Name!"}]}
-              initialValue={store.authentication.profileData.superior?.id}
-          >
-            <Input/>
-          </Form.Item>
          <Form.Item
              label="Upload Picture"
              name="image_prove"
@ -138,13 +141,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {

                {image === "" ? uploadButton : null}
              </Upload>
-              <h5
-                  style={{
+              <h5 style={{
                marginTop: 12,
                color: "rgba(0, 0, 0, 0.45)",
-                  }}
-              >
-                Max size of file 2 mb
+              }}>
+                Max size of file 2 MB
              </h5>
            </div>
          </Form.Item>
@ -153,7 +154,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
              label="amount"
              rules={[{required: true, message: "Please input Amount!"}]}
          >
-            <Input/>
+            <InputNumber
+                style={{width: "100%"}}
+                formatter={value => `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                parser={value => value.replace(/\Rp.\s?|(,*)/g, '')}
+            />
          </Form.Item>
        </Form>
      </Modal>
--- a/src/pages/Product/DetailProduct.js
+++ b/src/pages/Product/DetailProduct.js
@ -0,0 +1,148 @@
+import React, {useContext, useEffect} from "react";
+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";
+import {format, parseISO} from "date-fns";
+import {ModalLoaderContext} from "../../utils/modal";
+
+const {Title, Text} = Typography;
+
+export const DetailProduct = observer(() => {
+  const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.DETAILPRODUCT,
+      name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([
+        store.authentication.getProfile(),
+        store.transaction.getDataHistoryTransaction(),
+      ]);
+      modalLoader.setLoading(false);
+    })()
+  }, []);
+
+  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',
+      render: (text, record) => {
+        return (
+          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+        )
+      },
+    },
+  ]
+
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+    display: "flex",
+    justifyContent: "center"
+  } : {fontSize: "0.75rem"};
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+    fontSize: '1.25rem',
+    display: "flex",
+    justifyContent: "center"
+  } : null;
+
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData}/>
+      <Card>
+        <Title strong>Detail Product</Title>
+        <Row style={{marginBottom: 20}}>
+          <Col lg={12} xs={24}>
+            <Row>
+              <Col span={12}>
+                <Text strong>Kode</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Produk</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Harga Beli</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.username}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Harga Jual</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.roles?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Status</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.superior?.username}</Text>
+              </Col>
+            </Row>
+          </Col>
+          <Col lg={12} xs={24}>
+            <Row justify={"center"}>
+              <Col lg={24} xs={12}>
+                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+              </Col>
+              <Col lg={24} xs={12}>
+                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <div>
+              <Title strong level={3}>History User Transaction</Title>
+
+              <Button style={{marginBottom: '1rem'}} onClick={() => {
+                console.log('clicked filter')
+              }}>
+                <FilterOutlined/>
+                Filter
+              </Button>
+              <Table
+                columns={columns}
+                dataSource={store.transaction.dataHistoryTransaction}
+                bordered
+              />
+            </div>
+          </Col>
+        </Row>
+        <div/>
+      </Card>
+    </div>
+  )
+});
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@ -1,5 +1,5 @@
 import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Input, Row, Upload,message} from "antd";
+import {Button, Card, Col, Input, message, Row, Upload} from "antd";
 import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
@ -20,8 +20,8 @@ export const Product = observer(() => {
        modalLoader.setLoading(true);
        await Promise.allSettled([
          store.supplier.getData(),
-          store.product.getDataCategories(),
          store.category.getData(),
+          store.product.getDataSubCategories(),
        ]);
        await store.product.getData();
        modalLoader.setLoading(false);
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
 import {observer} from "mobx-react-lite";
@ -10,8 +10,6 @@ const {Option} = Select;

 export const Product = observer(() => {
  const store = useStore();
-
-  const [productData, setProductData] = useState([]);
  const modalLoader = useContext(ModalLoaderContext);

  useEffect(() => {
@ -36,20 +34,6 @@ export const Product = observer(() => {
    init();
  }, []);

-  // data
-  useEffect(() => {
-    console.log("⚡ transaction data store", store.transaction.data);
-    setProductData(store.transaction.data);
-  }, [store.transaction.data]);
-
-  // Subcategory
-  useEffect(() => {
-    console.log(
-      "⚡ transaction subcategory store",
-      store.transaction.dataSubCategories
-    );
-  }, [store.transaction.dataSubCategories]);
-
  const handleChangeSubcategory = async (item) => {
    store.transaction.filterSubCategory = item;
    modalLoader.setLoading(true);
@ -61,12 +45,16 @@ export const Product = observer(() => {
    modalLoader.setLoading(true);
    try {
      const response = await store.transaction.buyProduct({productCode: data});
-      // if (response.status === 200) {
+      if (response.status === 201) {
        message.success("Success Buy Product");
-      // } else {
-      //message.error("Failed Buy Product");
-      //}
+      } else {
+        message.error("Failed Buy Product", 3);
+      }
    } catch (e) {
+      if (e.response?.body?.message) {
+        message.error(e.response.body.message);
+        return;
+      }
      console.log(e, "apa errornya");
      message.error("Failed Buy Product");
    }
@ -83,12 +71,9 @@ export const Product = observer(() => {
          <Select
              placeholder={"Select Sub Category"}
              allowClear={true}
-            onChange={(val) => {
-              if (val) {
-                handleChangeSubcategory(val);
-              }
-            }}
+              onChange={(val) => handleChangeSubcategory(val)}
              style={{marginBottom: "10px", width: "100%"}}
+              value={store.transaction.filterSubCategory}
          >
            {store.transaction.dataSubCategories.map((item, index) => (
              <Option key={item.id} value={item.id}>
@ -112,9 +97,9 @@ export const Product = observer(() => {
          />
        </Col>
      </Row>
-      {productData.length != 0 && (
+      {store.transaction.data.length != 0 && (
          <Row>
-          {productData.map((item, index) => (
+            {store.transaction.data.map((item, index) => (
                <Col key={index} xs={24} md={16} lg={8}>
                  <Card
                      onClick={() => {
@ -147,8 +132,8 @@ export const Product = observer(() => {
            ))}
          </Row>
      )}
-      {productData.length !== 0 && (
-        <Col style={{textAlign: "right"}}>
+      {store.transaction.data.length !== 0 && (
+          <Col style={{textAlign: "right", marginTop: "1em"}}>
            <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
              Beli Sekarang
            </Button>
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState,message} from "react";
+import React, {message, useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Card, Tabs} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@ -14,7 +14,6 @@ export const Transaction = observer(() => {

  const modalLoader = useContext(ModalLoaderContext);

-  // Init
  useEffect(() => {
    const init = async () => {
      try {
@ -34,14 +33,12 @@ export const Transaction = observer(() => {
    init();
  }, []);

-  // Category
-  useEffect(() => {
-    console.log('⚡ transaction category store', store.transaction.dataCategories)
-  }, [store.transaction.dataCategories])
-
  const handleChangeTabs = async (key) => {
-    store.transaction.filterCategory = key;
    modalLoader.setLoading(true);
+    store.transaction.dataSubCategories = [];
+    store.transaction.data = [];
+    store.transaction.filterSubCategory = null;
+    store.transaction.filterCategory = key;
    await store.transaction.getDataSubCategories();
    modalLoader.setLoading(false);
  };
--- a/src/routes/app.js
+++ b/src/routes/app.js
@ -2,7 +2,9 @@ import {Redirect, Route, Switch} from "react-router-dom";
 import {Home} from "../pages/Home/Home";
 import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
+import {DetailUser} from "../pages/Membership/DetailUser";
 import {Product} from "../pages/Product/Product";
+import {DetailProduct} from "../pages/Product/DetailProduct";
 import {Transaction} from "../pages/Transaction/Transaction";
 import {Profile} from "../pages/Profile/Profile";
 import {Commission} from "../pages/Config/Commission";
@ -27,7 +29,8 @@ export const LINKS = {
    PAYBACK: "/app/payback",
    PAYBACKFROMUSER: "/app/payback-from-user",
    SUBCATEGORY: "/app/subcategory",
-
+    DETAILUSER: "/app/detail-user",
+    DETAILPRODUCT: "/app/detail-product",
 };

 export const AppRoute = () => {
@ -35,6 +38,12 @@ export const AppRoute = () => {
        <Route path={LINKS.HOME}>
            <Home/>
        </Route>
+        <Route path={LINKS.DETAILUSER}>
+            <DetailUser/>
+        </Route>
+        <Route path={LINKS.DETAILPRODUCT}>
+            <DetailProduct/>
+        </Route>
        <Route path={LINKS.COMMISSION}>
            <Commission/>
        </Route>
--- a/src/store/payback.js
+++ b/src/store/payback.js
@ -73,9 +73,9 @@ export class Payback {

  async create(data) {
    try {
-    console.log(data)
-      return await http.post("/transaction/deposit-return").send(data);
-      
+      const response = await http.post("/transaction/deposit-return").send(data);
+      await this.getData();
+      return response;
    } catch (e) {
      console.error(e);
    }
--- a/src/store/product.js
+++ b/src/store/product.js
@ -21,7 +21,7 @@ export class Product {
    pageSizeSubCategories = 10
    dataSubCategories = [];
    total_dataSubCategories = 0;
-    filterByCategory = null;
+    filterCategory = null;

    constructor(ctx) {
        this.ctx = ctx;
@ -44,7 +44,7 @@ export class Product {

    async getDataSubCategories() {
        try {
-            const response = await http.get(`/product/sub-categories?category=${this.filterByCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
+            const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
            this.dataSubCategories = response.body.data.map((item, idx) => {
                item.key = idx;
                return item
--- a/src/store/subcategory.js
+++ b/src/store/subcategory.js
@ -56,7 +56,7 @@ export class Subcategory {
    async create(data) {
        try {
            const response = await http.post('/product/sub-categories').send(data);
-            await this.getData();
+            //await this.getData();
            return response;
        } catch (e) {
            console.error(e);
@ -66,7 +66,7 @@ export class Subcategory {
    async update(id, data) {
        try {
            const response = await http.put(`/product/sub-categories/${id}`).send(data);
-            await this.getData();
+            //await this.getData();
            return response;
        } catch (e) {
            console.error(e);