Config Page

src/component/PartnerComponent.js

@@ -1,11 +1,22 @@
-import React, {useContext, useState} from "react";
+import React, { useContext, useState } from "react";
-import {Button, Divider, Form, Input, List, message, Modal, Space, Table, Tag,} from "antd";
+import {
-import {observer} from "mobx-react-lite";
+  Button,
-import {ExclamationCircleOutlined} from "@ant-design/icons";
+  Divider,
-import {useHistory} from "react-router-dom";
+  Form,
-import {useStore} from "../utils/useStore";
+  Input,
-import {LINKS} from "../routes/app";
+  List,
-import {ModalLoaderContext} from "../utils/modal";
+  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);
+        const response = await store.partner.create(data);
-        message.success("Success Add New Partner");
         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 }}

src/component/ProductComponent.js

@@ -115,13 +115,15 @@ export const ProductComponent = observer((props) => {
       key: "action",
       render: (text, record) => (
         <Button
-          onClick={async () => {
+            onClick={async () => {
-            history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
+              await store.product.getDetail(record.product_id);
-            //console.log(record.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>
+          >
+            Detail
+          </Button>
       ),
     },
   ];

src/pages/Config/Partner.js

@@ -49,13 +49,13 @@ export const Partner = observer(() => {
       <BreadcumbComponent data={routeData}/>
       <Card>
         <Row style={{marginBottom: 20}}>
-          <Col span={12}>
+          {/* <Col span={12}>
-            {/* <Button>
+            <Button>
                             <FilterOutlined/>
                             Filter
-                        </Button> */}
+                        </Button>
-          </Col>
+          </Col> */}
-          <Col span={12} style={{textAlign: "right"}}>
+          <Col span={24} style={{textAlign: "right"}}>
             {/* <Search
               placeholder="input search text"
               style={{

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>
+                <Text>{store.membership.dataDetail.superior?.username}</Text>
-                {store.membership.dataDetail.superior?.username}
-                </Text>
               </Col>
               <Col span={12}>
                 <Text strong>Role</Text>
               </Col>
               <Col span={12}>
-                <Text>
+                <Text>{store.membership.dataDetail.roles?.name}</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>
   );
 });

src/pages/Membership/Membership.js

@@ -147,31 +147,33 @@ export const Membership = observer(() => {
           currency: "IDR",
         }).format(text),
     },
-    // {
+    {
-    //   title: "Status",
+      title: "Status",
-    //   dataIndex: "isActive",
+      dataIndex: "isActive",
-    //   key: "isActive",
+      key: "isActive",
-    //   render: (text, record) => (
+      render: (text, record) => (
-    //     <Tag
+        <Tag
-    //       color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
-    //       style={{ color: "#4F566B" }}
+          style={{ color: "#4F566B" }}
-    //     >
+        >
-    //       {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
-    //     </Tag>
+        </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>
+              </Button> */}
-              {store.authentication.userData.role === "Admin" && <Button
+              {/* {store.authentication.userData.role === "Admin" &&  */}
+              <Button
                   onClick={() => {
                       let record2 = record;
                       delete record2.password;
@@ -194,8 +197,10 @@ export const Membership = observer(() => {
                   }}
               >
                   Edit
-              </Button>}
+              </Button>
-              {store.authentication.userData.role === "Admin" && <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
+          {/* {store.authentication.userData.role === "Admin" && ( */}
-            onClick={async () => {
+            <Button
-              await store.transaction.getDataHistoryTopUp(record.id);
+              onClick={async () => {
-              history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+                await store.transaction.getDataHistoryTopUp(record.id);
-              console.log(record.id);
+                history.push(LINKS.USER_DETAIL.replace(":id", record.id));
-            }}
+                console.log(record.id);
-          >
+              }}
-            Detail
+            >
-          </Button>
+              Detail
+            </Button>
+          {/* ) */}
+          {/* } */}
         </Space>
       ),
     },
@@ -239,8 +248,8 @@ export const Membership = observer(() => {
       name: "Home",
     },
     {
-      route: "/app/membership",
+      route: LINKS.MEMBERSHIP,
-      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
+      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({});

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> */}
-          <Col span={12} style={{ textAlign: "right" }}>
+          <Col span={24} style={{ textAlign: "right" }}>
             {/* <Search
               placeholder="input search text"
               style={{

src/pages/Product/ProductDetail.js

@@ -1,17 +1,19 @@
-import React, {useContext, useEffect} from "react";
+import React, { useContext, useEffect } from "react";
-import {Button, Card, Col, Row, Table, Typography} from "antd";
+import { Button, Card, Col, Row, Table, Typography } from "antd";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
+import { LINKS } from "../../routes/app";
-import {useStore} from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
-import {FilterOutlined} from "@ant-design/icons";
+import { FilterOutlined } from "@ant-design/icons";
-import {format, parseISO} from "date-fns";
+import { format, parseISO } from "date-fns";
-import {ModalLoaderContext} from "../../utils/modal";
+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.authentication.getProfile(),
-        store.transaction.getDataHistoryTransaction(),
+        store.product.getDetail(id),
+        store.product.getDetailProduct(id),
       ]);
       modalLoader.setLoading(false);
-    })()
+    })();
   }, []);
 
+  //console.log(id)
   const columns = [
     {
-      title: 'Markup Price',
+      title: "Markup Price",
-      dataIndex: 'mark_up_price',
+      dataIndex: "mark_up_price",
-      key: 'mark_up_price',
+      key: "mark_up_price",
-      width: '20%',
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
-      title: 'Name',
+      title: "Price",
-      dataIndex: 'name',
+      dataIndex: "price",
-      key: 'name',
+      key: "price",
-      width: '50%',
+      width: "50%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
-      title: 'Transaction Date',
+      title: "Transaction Date",
-      dataIndex: 'created_at',
+      dataIndex: "startDate",
-      key: 'created_at',
+      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 ? {
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop
-    display: "flex",
+    ? {
-    justifyContent: "center"
+        display: "flex",
-  } : {fontSize: "0.75rem"};
+        justifyContent: "center",
-  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+      }
-    fontSize: '1.25rem',
+    : { fontSize: "0.75rem" };
-    display: "flex",
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop
-    justifyContent: "center"
+    ? {
-  } : null;
+        fontSize: "1.25rem",
+        display: "flex",
+        justifyContent: "center",
+      }
+    : null;
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
         <Title strong>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}>
+              <Col span={10}>
-                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+                <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>
-  )
+  );
 });

src/pages/Product/Subcategory.js

@@ -54,13 +54,13 @@ export const Subcategory = observer(() => {
       <BreadcumbComponent data={routeData}/>
       <Card>
         <Row style={{marginBottom: 20}}>
-          <Col span={12}>
+          {/* <Col span={12}>
-            {/* <Button>
+            <Button>
               <FilterOutlined />
               Filter
-            </Button> */}
+            </Button>
-          </Col>
+          </Col> */}
-          <Col span={12} style={{textAlign: "right"}}>
+          <Col span={24} style={{textAlign: "right"}}>
             {/* <Search
               placeholder="input search text"
               style={{

src/pages/Transaction/Product.js

@@ -1,12 +1,12 @@
-import React, {useContext, useEffect} from "react";
+import React, { useContext, useEffect } from "react";
-import {useStore} from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
-import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
+import { Button, Card, Col, Input, message, Modal, Row, Select } from "antd";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
-import {MoneyCollectOutlined} from "@ant-design/icons";
+import { MoneyCollectOutlined } from "@ant-design/icons";
-import {ModalLoaderContext} from "../../utils/modal";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
+const { Search } = Input;
-const {Option} = Select;
+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"}
+            placeholder={"Select Sub Category"}
-              allowClear={true}
+            allowClear={true}
-              onChange={(val) => handleChangeSubcategory(val)}
+            onChange={(val) => handleChangeSubcategory(val)}
-              style={{marginBottom: "10px", width: "100%"}}
+            style={{ marginBottom: "10px", width: "100%" }}
-              value={store.transaction.filterSubCategory}
+            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"
+            placeholder="input search text"
-              style={{width: 200, marginRight: 10}}
+            style={{ width: 200, marginRight: 10 }}
           />
         </Col>
       </Row>
       {store.transaction.data.length != 0 && (
-          <Row>
+        <Row>
-            {store.transaction.data.map((item, index) => (
+          {store.transaction.data.map((item, index) => (
-                <Col key={index} xs={24} md={16} lg={8}>
+            <Col key={index} xs={24} md={16} lg={8}>
-                  <Card
+              <Card
-                      onClick={() => {
+                onClick={() => {
-                        Modal.confirm({
+                  Modal.confirm({
-                          title: `Are you sure buy ${item.product_name}?`,
+                    title: `Are you sure buy ${item.product_name}?`,
-                          icon: <MoneyCollectOutlined/>,
+                    icon: <MoneyCollectOutlined />,
-                          okText: "Confirm",
+                    okText: "Confirm",
-                          cancelText: "Cancel",
+                    cancelText: "Cancel",
-                          okType: "primary",
+                    okType: "primary",
-                          onOk() {
+                    onOk() {
-                            handleBuyProduct(item.product_code)
+                      handleBuyProduct(item.product_code);
-                          },
+                    },
-                          onCancel() {
+                    onCancel() {
-                            console.log("Cancel");
+                      console.log("Cancel");
-                          },
+                    },
-                        });
+                  });
-                      }}
+                }}
-                      style={{cursor: "pointer",marginLeft:10}}
+                hoverable
-                  >
+                style={{
-                    <span style={{color: "black"}}>{item.product_name}</span>
+                  cursor: "pointer",
-                    <br/>
+                  marginLeft: 10,
-                    <span style={{color: "grey", fontSize: 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>
+              </Card>
-                </Col>
+            </Col>
-            ))}
+          ))}
-          </Row>
+        </Row>
       )}
       {/* {store.transaction.data.length !== 0 && (
           <Col style={{textAlign: "right", marginTop: "1em"}}>

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 = () => {

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 {