Config Page

2021-12-23 15:06:46 +07:00 · 2021-12-23 15:06:46 +07:00 · 8ead48ad2a
commit 8ead48ad2a
parent 4ba8f07f93
11 changed files with 463 additions and 182 deletions
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@ -1,11 +1,22 @@
-import React, {useContext, useState} from "react";
-import {Button, Divider, Form, Input, List, 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 {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  List,
+  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 { ModalLoaderContext } from "../utils/modal";

 export const PartnerComponent = observer((props) => {
  const store = useStore();
@ -151,6 +162,7 @@ export const PartnerComponent = observer((props) => {
            ? "Failed Change Partner Password"
            : "Success Update Data Partner"
        );
+
        //await store.partner.getData()
      } catch (e) {
        modalLoader.setLoading(true);
@ -166,9 +178,11 @@ export const PartnerComponent = observer((props) => {
    } else {
      modalLoader.setLoading(true);
      try {
-        await store.partner.create(data);
-        message.success("Success Add New Partner");
+        const response = await store.partner.create(data);
        modalLoader.setLoading(false);
+        response?.body?.statusCode === 200
+          ? message.success("Success Add New Partner")
+          : message.error("Failed Add Partner");
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Partner");
@ -219,7 +233,7 @@ export const PartnerComponent = observer((props) => {
            pageSize: store.partner.pageSize,
            total: store.partner.total_data,
            current: store.partner.page + 1,
-            style: {marginBottom: "1rem", marginRight: "1rem"},
+            style: { marginBottom: "1rem", marginRight: "1rem" },
          }}
          dataSource={store.partner.data}
          style={{ padding: 0 }}
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@ -115,13 +115,15 @@ export const ProductComponent = observer((props) => {
      key: "action",
      render: (text, record) => (
        <Button
-          onClick={async () => {
-            history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
-            //console.log(record.id)
-          }}
-        >
-          Detail
-        </Button>
+            onClick={async () => {
+              await store.product.getDetail(record.product_id);
+              await store.product.getDetailProduct(record.product_id);
+              history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id));
+              //console.log(record.product_id);
+            }}
+          >
+            Detail
+          </Button>
      ),
    },
  ];
--- a/src/pages/Config/Partner.js
+++ b/src/pages/Config/Partner.js
@ -49,13 +49,13 @@ export const Partner = observer(() => {
      <BreadcumbComponent data={routeData}/>
      <Card>
        <Row style={{marginBottom: 20}}>
-          <Col span={12}>
-            {/* <Button>
+          {/* <Col span={12}>
+            <Button>
                            <FilterOutlined/>
                            Filter
-                        </Button> */}
-          </Col>
-          <Col span={12} style={{textAlign: "right"}}>
+                        </Button>
+          </Col> */}
+          <Col span={24} style={{textAlign: "right"}}>
            {/* <Search
              placeholder="input search text"
              style={{
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@ -18,6 +18,7 @@ import { FilterOutlined, DownloadOutlined } from "@ant-design/icons";
 import { format, parseISO } from "date-fns";
 import { ModalLoaderContext } from "../../utils/modal";
 import { useParams } from "react-router-dom";
+import { MembershipModal } from "./MembershipModal";

 const { Title, Text } = Typography;

@ -35,6 +36,7 @@ export const DetailUser = observer(() => {
  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
+      await getData();
      await Promise.allSettled([
        store.transaction.getDataHistoryTopUp(id),
        store.membership.getDetail(id),
@ -43,6 +45,71 @@ export const DetailUser = observer(() => {
    })();
  }, []);

+  const getData = async () => {
+    store.authentication.userData.role === "Admin"
+      ? await store.membership.getData()
+      : await store.membership.getDataBySuperior();
+  };
+  const changeStatus = async (id, isActive) => {
+    const status = isActive ? "inactive" : "active";
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      modalLoader.setLoading(true);
+      const response = await store.membership.changeStatus(id, status);
+      modalLoader.setLoading(false);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Membership`)
+        : message.error(`Failed ${status2} Membership`);
+      await getData();
+    } catch (err) {
+      modalLoader.setLoading(false);
+      message.error(`Failed ${status2} Membership`);
+    }
+  };
+
+  const onSubmit = async (data) => {
+    data.superior = true;
+
+    if (initialData.id) {
+      setConfirmLoading(true);
+      modalLoader.setLoading(true);
+      try {
+        await store.membership.update(initialData.id, data);
+        message.success(
+          initialData.isChangePassword
+            ? "Success Change Member Password"
+            : "Success Update Data Member"
+        );
+        await getData();
+        modalLoader.setLoading(false);
+      } catch (e) {
+        modalLoader.setLoading(true);
+        message.error(
+          initialData.isChangePassword
+            ? "Failed Update Member Password"
+            : "Failed Update Data Member"
+        );
+      }
+      setConfirmLoading(false);
+      setVisibleModal(false);
+    } else {
+      setConfirmLoading(true);
+      modalLoader.setLoading(true);
+      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");
+      }
+      modalLoader.setLoading(false);
+      setConfirmLoading(false);
+      setVisibleModal(false);
+      setInitialData({});
+    }
+  };
  const columns = [
    {
      title: "Amount",
@ -61,6 +128,69 @@ export const DetailUser = observer(() => {
        );
      },
    },
+    {
+      title: "Status",
+      dataIndex: "isActive",
+      key: "isActive",
+      render: (text, record) => (
+        <Tag
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B" }}
+        >
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+        </Tag>
+      ),
+    },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+        <Space size="middle">
+          {/* {store.authentication.userData.role === "Admin" &&  */}
+          <Button
+            type={record?.isActive === true ? "danger" : "primary"}
+            onClick={() => changeStatus(record?.id, record?.isActive)}
+          >
+            {record?.isActive === true ? "Inactive" : "Active"}
+          </Button>
+          {/* } */}
+          {/* {store.authentication.userData.role === "Admin" &&  */}
+          <Button
+            onClick={() => {
+              let record2 = record;
+              delete record2.password;
+              record2.isChangePassword = false;
+
+              setInitialData({
+                ...record2,
+                // roleId: record.roles.id,
+              });
+              setVisibleModal(true);
+            }}
+          >
+            Edit
+          </Button>
+          {/* }
+              {store.authentication.userData.role === "Admin" &&  */}
+          <Button
+            onClick={() => {
+              let record2 = record;
+              delete record2.password;
+              record2.isChangePassword = true;
+
+              setInitialData({
+                ...record2,
+                // roleId: record.roles.id,
+              });
+              setVisibleModal(true);
+            }}
+          >
+            Ganti Password
+          </Button>
+          {/* } */}
+        </Space>
+      ),
+    },
  ];

  const routeData = [
@ -68,6 +198,10 @@ export const DetailUser = observer(() => {
      route: LINKS.HOME,
      name: "Home",
    },
+    {
+      route: LINKS.MEMBERSHIP,
+      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
+    },
    {
      route: LINKS.USER_DETAIL,
      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
@ -91,30 +225,30 @@ export const DetailUser = observer(() => {
                <Text strong>Username</Text>
              </Col>
              <Col span={12}>
-                <Text>
-                {store.membership.dataDetail.superior?.username}
-                </Text>
+                <Text>{store.membership.dataDetail.superior?.username}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Role</Text>
              </Col>
              <Col span={12}>
-                <Text>
-                {store.membership.dataDetail.roles?.name}
-                </Text>
+                <Text>{store.membership.dataDetail.roles?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Phone Number</Text>
              </Col>
              <Col span={12}>
-                <Text>{store.membership.dataDetail.userDetail?.phone_number}</Text>
+                <Text>
+                  {store.membership.dataDetail.userDetail?.phone_number}
+                </Text>
              </Col>
              <Col span={12}>
                <Text strong>Status</Text>
              </Col>
              <Col span={12}>
                <Text>
-                  {store.membership.dataDetail.isActive === true ? "Aktif": "Inaktif"}
+                  {store.membership.dataDetail.isActive === true
+                    ? "Aktif"
+                    : "Inaktif"}
                </Text>
              </Col>
            </Row>
@ -141,7 +275,7 @@ export const DetailUser = observer(() => {
                History Top Up
              </Title>

-              <Button
+              {/* <Button
                style={{ marginBottom: "1rem" }}
                onClick={() => {
                  console.log("clicked filter");
@ -149,7 +283,7 @@ export const DetailUser = observer(() => {
              >
                <FilterOutlined />
                Filter
-              </Button>
+              </Button> */}
              <Table
                columns={columns}
                dataSource={store.transaction.dataHistoryTopUp}
@ -160,6 +294,56 @@ export const DetailUser = observer(() => {
        </Row>
        <div />
      </Card>
+      {/* <Modal
+        visible={isVisibleTopUpModal}
+        title="Top Up Saldo"
+        okText="Top Up"
+        cancelText="Cancel"
+        onCancel={() => {
+          form.resetFields();
+          handleCancelTransaction();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmitTransaction(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="amount"
+            label="Amount"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <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> */}
+      <MembershipModal
+        visible={visibleModal}
+        confirmLoading={confirmLoading}
+        initialData={initialData}
+        onCreate={async (data) => {
+          onSubmit(data);
+        }}
+        onCancel={() => {
+          setInitialData({});
+          setVisibleModal(false);
+        }}
+      />
    </div>
  );
 });
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@ -147,31 +147,33 @@ export const Membership = observer(() => {
          currency: "IDR",
        }).format(text),
    },
-    // {
-    //   title: "Status",
-    //   dataIndex: "isActive",
-    //   key: "isActive",
-    //   render: (text, record) => (
-    //     <Tag
-    //       color={record?.isActive === true ? "processing" : "#E3E8EE"}
-    //       style={{ color: "#4F566B" }}
-    //     >
-    //       {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
-    //     </Tag>
-    //   ),
-    // },
+    {
+      title: "Status",
+      dataIndex: "isActive",
+      key: "isActive",
+      render: (text, record) => (
+        <Tag
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B" }}
+        >
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+        </Tag>
+      ),
+    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
-          {/* {store.authentication.userData.role === "Admin" && <Button
+          {/* {store.authentication.userData.role === "Admin" && */}
+           <Button
                  type={record?.isActive === true ? "danger" : "primary"}
                  onClick={() => changeStatus(record?.id, record?.isActive)}
              >
                  {record?.isActive === true ? "Inactive" : "Active"}
-              </Button>}
-              <Button
+              </Button>
+              {/* } */}
+              {/* <Button
                  onClick={() => {
                      setDestination(record?.id);
                      console.log(record?.id);
@ -179,8 +181,9 @@ export const Membership = observer(() => {
                  }}
              >
                  <DownloadOutlined/> Top Up Saldo
-              </Button>
-              {store.authentication.userData.role === "Admin" && <Button
+              </Button> */}
+              {/* {store.authentication.userData.role === "Admin" &&  */}
+              <Button
                  onClick={() => {
                      let record2 = record;
                      delete record2.password;
@ -194,8 +197,10 @@ export const Membership = observer(() => {
                  }}
              >
                  Edit
-              </Button>}
-              {store.authentication.userData.role === "Admin" && <Button
+              </Button>
+              {/* }
+              {store.authentication.userData.role === "Admin" && */}
+               <Button
                  onClick={() => {
                      let record2 = record;
                      delete record2.password;
@ -209,7 +214,8 @@ export const Membership = observer(() => {
                  }}
              >
                  Ganti Password
-              </Button>} */}
+              </Button>
+              {/* } */}
          <Button
            onClick={() => {
              setDestination(record?.id);
@ -219,15 +225,18 @@ export const Membership = observer(() => {
          >
            <DownloadOutlined /> Top Up Saldo
          </Button>
-          <Button
-            onClick={async () => {
-              await store.transaction.getDataHistoryTopUp(record.id);
-              history.push(LINKS.USER_DETAIL.replace(":id", record.id));
-              console.log(record.id);
-            }}
-          >
-            Detail
-          </Button>
+          {/* {store.authentication.userData.role === "Admin" && ( */}
+            <Button
+              onClick={async () => {
+                await store.transaction.getDataHistoryTopUp(record.id);
+                history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+                console.log(record.id);
+              }}
+            >
+              Detail
+            </Button>
+          {/* ) */}
+          {/* } */}
        </Space>
      ),
    },
@ -239,8 +248,8 @@ export const Membership = observer(() => {
      name: "Home",
    },
    {
-      route: "/app/membership",
-      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
+      route: LINKS.MEMBERSHIP,
+      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
    },
  ];

@ -300,14 +309,14 @@ export const Membership = observer(() => {
              </Button> */}
            </Col>
            <Col span={12} style={{ textAlign: "right" }}>
-              <Search
+              {/* <Search
                placeholder="input search text"
                style={{
                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                }}
-              />
+              /> */}
              <Button
                onClick={() => {
                  setInitialData({});
--- a/src/pages/Product/Category.js
+++ b/src/pages/Product/Category.js
@ -50,13 +50,13 @@ export const Category = observer(() => {
      <BreadcumbComponent data={routeData} />
      <Card>
        <Row style={{ marginBottom: 20 }}>
-          <Col span={12}>
+          {/* <Col span={12}>
            <Button>
              <FilterOutlined />
              Filter
            </Button>
-          </Col>
-          <Col span={12} style={{ textAlign: "right" }}>
+          </Col> */}
+          <Col span={24} style={{ textAlign: "right" }}>
            {/* <Search
              placeholder="input search text"
              style={{
--- a/src/pages/Product/ProductDetail.js
+++ b/src/pages/Product/ProductDetail.js
@ -1,17 +1,19 @@
-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";
+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";
+import { useParams } from "react-router-dom";

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

 export const ProductDetail = observer(() => {
  const store = useStore();
+  const { id } = useParams();
  const modalLoader = useContext(ModalLoaderContext);

  const routeData = [
@ -21,11 +23,11 @@ export const ProductDetail = observer(() => {
    },
    {
      route: LINKS.PRODUCT,
-      name: <span style={{fontWeight: "bold"}}>Product</span>,
+      name: <span style={{ fontWeight: "bold" }}>Product</span>,
    },
    {
      route: LINKS.PRODUCT_DETAIL,
-      name: <span style={{fontWeight: 'bold'}}>Product Detail</span>,
+      name: <span style={{ fontWeight: "bold" }}>Product Detail</span>,
    },
  ];

@ -33,89 +35,121 @@ export const ProductDetail = observer(() => {
    (async () => {
      modalLoader.setLoading(true);
      await Promise.allSettled([
-        store.authentication.getProfile(),
-        store.transaction.getDataHistoryTransaction(),
+        //store.authentication.getProfile(),
+        store.product.getDetail(id),
+        store.product.getDetailProduct(id),
      ]);
      modalLoader.setLoading(false);
-    })()
+    })();
  }, []);

+  //console.log(id)
  const columns = [
    {
-      title: 'Markup Price',
-      dataIndex: 'mark_up_price',
-      key: 'mark_up_price',
-      width: '20%',
+      title: "Markup Price",
+      dataIndex: "mark_up_price",
+      key: "mark_up_price",
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
    },
    {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-      width: '50%',
+      title: "Price",
+      dataIndex: "price",
+      key: "price",
+      width: "50%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
    },
    {
-      title: 'Transaction Date',
-      dataIndex: 'created_at',
-      key: 'created_at',
+      title: "Transaction Date",
+      dataIndex: "startDate",
+      key: "startDate",
      render: (text, record) => {
        return (
-          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
-        )
+          <Text>{format(parseISO(record.startDate), "dd MMMM yyyy")}</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;
+  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}/>
+      <BreadcumbComponent data={routeData} />
      <Card>
        <Title strong>Product Detail</Title>
-        <Row style={{marginBottom: 20}}>
+        <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>
+                <Text>{store.product.dataDetailProduct.code}</Text>
              </Col>
              <Col span={12}>
-                <Text strong>Produk</Text>
+                <Text strong>Nama Produk</Text>
              </Col>
-              <Col span={12}>
-                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+              <Col span={10}>
+                <Text>{store.product.dataDetailProduct.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Harga Beli</Text>
              </Col>
              <Col span={12}>
-                <Text>{store.authentication.profileData?.username}</Text>
+                <Text>
+                  {new Intl.NumberFormat("id-ID", {
+                    style: "currency",
+                    currency: "IDR",
+                  }).format(store.product.dataDetailProduct.basePrice)}
+                </Text>
              </Col>
              <Col span={12}>
                <Text strong>Harga Jual</Text>
              </Col>
              <Col span={12}>
-                <Text>{store.authentication.profileData.roles?.name}</Text>
+                <Text>
+                  {new Intl.NumberFormat("id-ID", {
+                    style: "currency",
+                    currency: "IDR",
+                  }).format(store.product.dataDetailProduct.price)}
+                </Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Supplier</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.product.dataDetailProduct.supplier.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Status</Text>
              </Col>
              <Col span={12}>
-                <Text>{store.authentication.profileData.superior?.username}</Text>
+                <Text>{store.product.dataDetailProduct.status}</Text>
              </Col>
            </Row>
          </Col>
-          <Col lg={12} xs={24}>
+          {/* <Col lg={12} xs={24}>
            <Row justify={"center"}>
              <Col lg={24} xs={12}>
                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
@ -124,29 +158,31 @@ export const ProductDetail = observer(() => {
                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
              </Col>
            </Row>
-          </Col>
+          </Col> */}
        </Row>
        <Row>
          <Col span={24}>
            <div>
-              <Title strong level={3}>History User Transaction</Title>
+              <Title strong level={3}>
+                Product Price History
+              </Title>

-              <Button style={{marginBottom: '1rem'}} onClick={() => {
+              {/* <Button style={{marginBottom: '1rem'}} onClick={() => {
                console.log('clicked filter')
              }}>
                <FilterOutlined/>
                Filter
-              </Button>
+              </Button> */}
              <Table
                columns={columns}
-                dataSource={store.transaction.dataHistoryTransaction}
+                dataSource={store.product.dataDetail}
                bordered
              />
            </div>
          </Col>
        </Row>
-        <div/>
+        <div />
      </Card>
    </div>
-  )
+  );
 });
--- a/src/pages/Product/Subcategory.js
+++ b/src/pages/Product/Subcategory.js
@ -54,13 +54,13 @@ export const Subcategory = observer(() => {
      <BreadcumbComponent data={routeData}/>
      <Card>
        <Row style={{marginBottom: 20}}>
-          <Col span={12}>
-            {/* <Button>
+          {/* <Col span={12}>
+            <Button>
              <FilterOutlined />
              Filter
-            </Button> */}
-          </Col>
-          <Col span={12} style={{textAlign: "right"}}>
+            </Button>
+          </Col> */}
+          <Col span={24} style={{textAlign: "right"}}>
            {/* <Search
              placeholder="input search text"
              style={{
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@ -1,12 +1,12 @@
-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";
-import {MoneyCollectOutlined} from "@ant-design/icons";
-import {ModalLoaderContext} from "../../utils/modal";
+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";
+import { MoneyCollectOutlined } from "@ant-design/icons";
+import { ModalLoaderContext } from "../../utils/modal";

-const {Search} = Input;
-const {Option} = Select;
+const { Search } = Input;
+const { Option } = Select;

 export const Product = observer(() => {
  const store = useStore();
@ -18,8 +18,8 @@ export const Product = observer(() => {
        modalLoader.setLoading(true);
        await Promise.allSettled([
          store.transaction.getDataSubCategories(),
-          store.transaction.getDataCategories()
-        ])
+          store.transaction.getDataCategories(),
+        ]);
        modalLoader.setLoading(false);
      } catch (e) {
        modalLoader.setLoading(false);
@ -44,7 +44,9 @@ export const Product = observer(() => {
  const handleBuyProduct = async (data) => {
    modalLoader.setLoading(true);
    try {
-      const response = await store.transaction.buyProduct({productCode: data});
+      const response = await store.transaction.buyProduct({
+        productCode: data,
+      });
      if (response.status === 201) {
        message.success("Success Buy Product");
      } else {
@ -64,16 +66,18 @@ export const Product = observer(() => {
  return (
    <div>
      <Row>
-        <span style={{fontWeight: "bold", marginBottom: "10px"}}>Sub Category</span>
+        <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+          Sub Category
+        </span>
      </Row>
      <Row>
        <Col span={24}>
          <Select
-              placeholder={"Select Sub Category"}
-              allowClear={true}
-              onChange={(val) => handleChangeSubcategory(val)}
-              style={{marginBottom: "10px", width: "100%"}}
-              value={store.transaction.filterSubCategory}
+            placeholder={"Select Sub Category"}
+            allowClear={true}
+            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}>
@ -83,54 +87,61 @@ export const Product = observer(() => {
          </Select>
        </Col>
      </Row>
-      <Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
+      <Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
        <Col
          span={12}
-          style={{fontWeight: "bold", display: "flex", alignItems: "center"}}
+          style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
        >
          Produk & Nominal
        </Col>
-        <Col span={12} style={{textAlign: "right"}}>
+        <Col span={12} style={{ textAlign: "right" }}>
          <Search
-              placeholder="input search text"
-              style={{width: 200, marginRight: 10}}
+            placeholder="input search text"
+            style={{ width: 200, marginRight: 10 }}
          />
        </Col>
      </Row>
      {store.transaction.data.length != 0 && (
-          <Row>
-            {store.transaction.data.map((item, index) => (
-                <Col key={index} xs={24} md={16} lg={8}>
-                  <Card
-                      onClick={() => {
-                        Modal.confirm({
-                          title: `Are you sure buy ${item.product_name}?`,
-                          icon: <MoneyCollectOutlined/>,
-                          okText: "Confirm",
-                          cancelText: "Cancel",
-                          okType: "primary",
-                          onOk() {
-                            handleBuyProduct(item.product_code)
-                          },
-                          onCancel() {
-                            console.log("Cancel");
-                          },
-                        });
-                      }}
-                      style={{cursor: "pointer",marginLeft:10}}
-                  >
-                    <span style={{color: "black"}}>{item.product_name}</span>
-                    <br/>
-                    <span style={{color: "grey", fontSize: 10}}>
+        <Row>
+          {store.transaction.data.map((item, index) => (
+            <Col key={index} xs={24} md={16} lg={8}>
+              <Card
+                onClick={() => {
+                  Modal.confirm({
+                    title: `Are you sure buy ${item.product_name}?`,
+                    icon: <MoneyCollectOutlined />,
+                    okText: "Confirm",
+                    cancelText: "Cancel",
+                    okType: "primary",
+                    onOk() {
+                      handleBuyProduct(item.product_code);
+                    },
+                    onCancel() {
+                      console.log("Cancel");
+                    },
+                  });
+                }}
+                hoverable
+                style={{
+                  cursor: "pointer",
+                  marginLeft: 10,
+                  borderColor: "salmon",
+                  height: 100,
+                  marginBottom: 10,
+                }}
+              >
+                <span style={{ color: "black" }}>{item.product_name}</span>
+                <br />
+                <span style={{ color: "grey", fontSize: 10 }}>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(item?.price)}
                </span>
-                  </Card>
-                </Col>
-            ))}
-          </Row>
+              </Card>
+            </Col>
+          ))}
+        </Row>
      )}
      {/* {store.transaction.data.length !== 0 && (
          <Col style={{textAlign: "right", marginTop: "1em"}}>
--- a/src/routes/app.js
+++ b/src/routes/app.js
@ -30,7 +30,7 @@ export const LINKS = {
    PAYBACK_CREATED: "/app/payback-created",
    SUBCATEGORY: "/app/subcategory",
    USER_DETAIL: "/app/user-detail/:id",
-    PRODUCT_DETAIL: "/app/product-detail",
+    PRODUCT_DETAIL: "/app/product-detail/:id",
 };

 export const AppRoute = () => {
--- a/src/store/product.js
+++ b/src/store/product.js
@ -22,6 +22,11 @@ export class Product {
    dataSubCategories = [];
    total_dataSubCategories = 0;
    filterCategory = null;
+    dataDetail=[]
+    dataDetailProduct=[]
+
+    pageGetDetail=0
+    supplier=null

    constructor(ctx) {
        this.ctx = ctx;
@ -31,7 +36,7 @@ export class Product {
    async getData() {
        try {
            const response = await http.get(`/product/all?supplier=${this.filterSupplier}&sub-category=${this.filterSubCategory}&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
@ -67,6 +72,26 @@ export class Product {
            console.error(e);
        }
    }
+    async getDetail(id) {
+        try {
+            const response = await http.get(`/product/price-history/${id}?page=${this.pageGetDetail}&supplier=${this.supplier}`);
+            //console.log(response,' Detail')
+            this.dataDetail = response.body.data
+            this.total_data = response?.body?.count ?? 0
+        } catch (e) {
+            console.error(e);
+        }
+    }
+    async getDetailProduct(id) {
+        try {
+            const response = await http.get(`/product/${id}`);
+            //console.log(response,' Detail Product')
+            this.dataDetailProduct = response.body.data
+            this.total_data = response?.body?.count ?? 0
+        } catch (e) {
+            console.error(e);
+        }
+    }

    async create(data) {
        try {