Config Page

src/component/PartnerComponent.js

@@ -1,5 +1,16 @@
 import React, { useContext, useState } from "react";
-import {Button, Divider, Form, Input, List, message, Modal, Space, Table, Tag,} from "antd";
+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";
@@ -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");

src/component/ProductComponent.js

@@ -116,8 +116,10 @@ export const ProductComponent = observer((props) => {
       render: (text, record) => (
         <Button
             onClick={async () => {
-            history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
-            //console.log(record.id)
+              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

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

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>
   );
 });

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,6 +225,7 @@ export const Membership = observer(() => {
           >
             <DownloadOutlined /> Top Up Saldo
           </Button>
+          {/* {store.authentication.userData.role === "Admin" && ( */}
             <Button
               onClick={async () => {
                 await store.transaction.getDataHistoryTopUp(record.id);
@@ -228,6 +235,8 @@ export const Membership = observer(() => {
             >
               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({});

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

src/pages/Product/ProductDetail.js

@@ -7,11 +7,13 @@ 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;
 
 export const ProductDetail = observer(() => {
   const store = useStore();
+  const { id } = useParams();
   const modalLoader = useContext(ModalLoaderContext);
 
   const routeData = [
@@ -25,7 +27,7 @@ export const ProductDetail = observer(() => {
     },
     {
       route: LINKS.PRODUCT_DETAIL,
-      name: <span style={{fontWeight: 'bold'}}>Product Detail</span>,
+      name: <span style={{ fontWeight: "bold" }}>Product Detail</span>,
     },
   ];
 
@@ -33,47 +35,63 @@ 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 ? {
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop
+    ? {
         display: "flex",
-    justifyContent: "center"
-  } : {fontSize: "0.75rem"};
-  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
-    fontSize: '1.25rem',
+        justifyContent: "center",
+      }
+    : { fontSize: "0.75rem" };
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop
+    ? {
+        fontSize: "1.25rem",
         display: "flex",
-    justifyContent: "center"
-  } : null;
+        justifyContent: "center",
+      }
+    : null;
 
   return (
     <div className={["ppob-container"].join(" ")}>
@@ -87,35 +105,51 @@ export const ProductDetail = observer(() => {
                 <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,22 +158,24 @@ 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>
@@ -148,5 +184,5 @@ export const ProductDetail = observer(() => {
         <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}>
-            {/* <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={{

src/pages/Transaction/Product.js

@@ -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,7 +66,9 @@ 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}>
@@ -110,14 +114,21 @@ export const Product = observer(() => {
                     cancelText: "Cancel",
                     okType: "primary",
                     onOk() {
-                            handleBuyProduct(item.product_code)
+                      handleBuyProduct(item.product_code);
                     },
                     onCancel() {
                       console.log("Cancel");
                     },
                   });
                 }}
-                      style={{cursor: "pointer",marginLeft:10}}
+                hoverable
+                style={{
+                  cursor: "pointer",
+                  marginLeft: 10,
+                  borderColor: "salmon",
+                  height: 100,
+                  marginBottom: 10,
+                }}
               >
                 <span style={{ color: "black" }}>{item.product_name}</span>
                 <br />

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 {