Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

src/component/ProductComponent.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, {useContext, useState} from "react";
 import {
   Button,
   Col,
@@ -15,19 +15,19 @@ import {
   Tag,
   Typography,
 } from "antd";
-import { observer } from "mobx-react-lite";
+import {observer} from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
+import {useHistory} from "react-router-dom";
-import { useStore } from "../utils/useStore";
+import {useStore} from "../utils/useStore";
-import { LINKS } from "../routes/app";
+import {LINKS} from "../routes/app";
-import { ModalLoaderContext } from "../utils/modal";
+import {ModalLoaderContext} from "../utils/modal";
 
-const { Title, Text } = Typography;
+const {Title, Text} = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const { Option } = Select;
+  const {Option} = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
   const [filterSupplier, setFilterSupplier] = useState([]);
@@ -107,17 +107,12 @@ export const ProductComponent = observer((props) => {
       key: "action",
       render: (text, record) => (
         <Button
-          onClick={async () => {
+            onClick={async () => {
-            await store.product.getDetail(record.product_id);
+              history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id));
-            await store.product.getDetailProduct(record.product_id);
+            }}
-            history.push(
+          >
-              LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
+            Detail
-            );
+          </Button>
-            //console.log(record.product_id);
-          }}
-        >
-          Detail
-        </Button>
       ),
     },
   ];

src/pages/Membership/DetailUser.js

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, message, Row, Space, Table, Tag, Typography,} from "antd";
+import {Button, Card, Col, message, Row, Space, Table, Typography,} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
@@ -104,6 +104,11 @@ export const DetailUser = observer(() => {
       title: "Amount",
       dataIndex: "amount",
       key: "amount",
+      render: (text) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Transaction Date",
@@ -112,24 +117,11 @@ export const DetailUser = observer(() => {
       render: (text, record) => {
         return (
           <Text>
-            {format(parseISO(record.transaction_date), "dd MMMM yyyy ")}
+            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
           </Text>
         );
       },
     },
-    {
-      title: "Status",
-      dataIndex: "isActive",
-      key: "isActive",
-      render: (text, record) => (
-          <Tag
-              color={store.membership.dataDetail.isActive === true ? "processing" : "#E3E8EE"}
-              style={{color: "#4F566B"}}
-          >
-            {store.membership.dataDetail.isActive === true ? " ACTIVE" : "INACTIVE"}
-          </Tag>
-      ),
-    },
   ];
 
   const routeData = [
@@ -142,8 +134,8 @@ export const DetailUser = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
     },
     {
-      route: LINKS.USER_DETAIL,
+      route: LINKS.USER_DETAIL.replace(":id", id),
-      name: <span style={{ fontWeight: "bold" }}>Detail Anggota</span>,
+      name: <span style={{fontWeight: "bold"}}>Detail User</span>,
     },
   ];
 
@@ -194,56 +186,50 @@ export const DetailUser = observer(() => {
             </Row>
           </Col>
           <Col lg={12} xs={24}>
-            <Title strong level={3}>Action User Detail</Title>
+            {store.authentication.userData.role === "Admin" && <Title strong level={3}>Action User Detail</Title>}
-            <Space
+            {store.authentication.userData.role === "Admin" && <Space
                 size="middle"
                 align={"center"}
                 wrap={true}
                 style={{textAlign: 'center'}}
             >
-              {store.authentication.userData.role === "Admin" &&
+              <Button
-                  <Button
+                  type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
-                      type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
+                  onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
-                      onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
+              >
-                  >
+                {store.membership.dataDetail.isActive === true ? "Inactive" : "Active"}
-                    {store.membership.dataDetail.isActive === true ? "Inactive" : "Active"}
+              </Button>
-                  </Button>
+              <Button
-              }
+                  onClick={() => {
-              {store.authentication.userData.role === "Admin" &&
+                    setInitialData({
-                  <Button
+                      id: store.membership.dataDetail.id,
-                      onClick={() => {
+                      name: store.membership.dataDetail.userDetail.name,
-                        setInitialData({
+                      username: store.membership.dataDetail.username,
-                          id: store.membership.dataDetail.id,
+                      phone_number: store.membership.dataDetail.userDetail.phone_number,
-                          name: store.membership.dataDetail.userDetail.name,
+                      roleId: store.membership.dataDetail.roles.id,
-                          username: store.membership.dataDetail.username,
+                      isChangePassword: false,
-                          phone_number: store.membership.dataDetail.userDetail.phone_number,
+                    });
-                          roleId: store.membership.dataDetail.roles.id,
+                    setVisibleModal(true);
-                          isChangePassword: false,
+                  }}
-                        });
+              >
-                        setVisibleModal(true);
+                Edit
-                      }}
+              </Button>
-                  >
+              <Button
-                    Edit
+                  onClick={() => {
-                  </Button>
+                    setInitialData({
-              }
+                      id: store.membership.dataDetail.id,
-              {store.authentication.userData.role === "Admin" &&
+                      name: store.membership.dataDetail.userDetail.name,
-                  <Button
+                      username: store.membership.dataDetail.username,
-                      onClick={() => {
+                      phone_number: store.membership.dataDetail.userDetail.phone_number,
-                        setInitialData({
+                      roleId: store.membership.dataDetail.roles.id,
-                          id: store.membership.dataDetail.id,
+                      isChangePassword: true,
-                          name: store.membership.dataDetail.userDetail.name,
+                    });
-                          username: store.membership.dataDetail.username,
+                    setVisibleModal(true);
-                          phone_number: store.membership.dataDetail.userDetail.phone_number,
+                  }}
-                          roleId: store.membership.dataDetail.roles.id,
+              >
-                          isChangePassword: true,
+                Ganti Password
-                        });
+              </Button>
-                        setVisibleModal(true);
+            </Space>}
-                      }}
-                  >
-                    Ganti Password
-                  </Button>
-              }
-            </Space>
           </Col>
         </Row>
         <Row>

src/pages/Product/Product.js

@@ -1,6 +1,6 @@
 import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Input, message, Row, Upload} from "antd";
+import {Button, Card, Col, Form, Input, message, Modal, Row, Select, Upload} from "antd";
-import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
+import {FilterOutlined, PlusOutlined, UploadOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
@@ -9,15 +9,22 @@ import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";
 
 const {Search} = Input;
+const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
   const [loading, setLoading] = useState(false);
+  const [visibleModalUpload, setVisibleModalUpload] = useState(false);
+  const [excel, setExcel] = useState("");
+  const [fileList, setFileList] = useState([]);
+  const [form] = Form.useForm();
 
   useEffect(() => {
     const init = async () => {
       try {
+        store.supplier.page = 0;
+        store.supplier.pageSize = 1000;
         modalLoader.setLoading(true);
         await Promise.allSettled([
           store.supplier.getData(),
@@ -37,6 +44,10 @@ export const Product = observer(() => {
     };
 
     init();
+
+    return () => {
+      store.supplier.pageSize = 10;
+    };
   }, []);
 
   const routeData = [
@@ -73,16 +84,21 @@ export const Product = observer(() => {
   const uploadHandler = async (args) => {
     const file = args.file;
     try {
-      const responseUpload = await store.product.uploadExcel(file);
+      const response = await store.product.uploadExcel(file);
 
-      if (responseUpload.status === 201) {
+      if (response.status === 201) {
         message.success("Success upload excel!");
       } else {
         message.error("Failed upload excel!");
       }
 
-      setLoading(false);
+      setFileList([{
-      const responseUploadProduct = await handleUploadProduct(responseUpload);
+        uid: '-1',
+        name: response.body.filename,
+        status: 'done',
+        url: '',
+      }]);
+      setExcel(response.body.filename);
     } catch (e) {
       setLoading(false);
       message.error("Failed upload excel!");
@@ -99,33 +115,45 @@ export const Product = observer(() => {
 
   const handleUploadProduct = async (data) => {
     try {
-      const response = await store.product.uploadProduct({fileName: data.body.filename});
+      const response = await store.product.uploadProduct(data);
 
       if (response.status === 201) {
         message.success("Success Create Product by Excel!");
       } else {
         message.error("Failed Create Product by Excel!");
       }
-      setLoading(false);
-      await store.product.getData();
       return response;
     } catch (e) {
       setLoading(false);
       message.error("Failed Create Product by Excel!");
     }
-  }
+  };
 
-  const loadingState = (
+  const handleCancel = () => {
-      <div>
+    form.resetFields();
-        {loading ? <LoadingOutlined/> : null}
+    setFileList([]);
-      </div>
+    setExcel("");
-  );
+    setVisibleModalUpload(false);
+  };
+
+  const handleSubmit = async (data) => {
+    const request = {
+      fileName: excel,
+      supplierCode: data.supplierCode
+    };
+    const responseUploadProduct = await handleUploadProduct(request);
+
+    await store.product.getData();
+    setLoading(false);
+    setFileList([]);
+    setExcel("");
+    setVisibleModalUpload(false);
+  };
 
   return (
       <div className={["ppob-container"].join(" ")}>
         <BreadcumbComponent data={routeData}/>
         <Card>
-          {store.authentication.userData.role !== "Admin" && (
               <div>
                 <Row style={{marginBottom: 20}}>
                   <Col span={12}>
@@ -155,42 +183,105 @@ export const Product = observer(() => {
                     }}
                   /> */}
 
-                      <div
+                      {store.authentication.userData.role == "Admin" && <div
                           style={{
                             display: store.ui.mediaQuery.isMobile ? "" : "flex",
                             justifyContent: "flex-end",
                             textAlign: "right",
                           }}
                       >
-                        <Upload
+                        <Button
-                            showUploadList={false}
+                            disabled={visibleModalUpload}
-                            onChange={handleChange}
+                            style={{
-                            beforeUpload={(file) => beforeUpload(file)}
+                              marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                            customRequest={(args) => uploadHandler(args)}
+                              marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
-                            onRemove={(file) => {
-                              setLoading(false);
                             }}
+                            icon={<PlusOutlined/>}
+                            onClick={() => setVisibleModalUpload(true)}
                         >
-                          <Button
+                          Tambah Produk
-                              disabled={loading}
+                        </Button>
-                              style={{
+                      </div>}
-                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
-                              }}
-                              icon={<UploadOutlined/>}
-                          >
-                            Upload Product
-                          </Button>
-                        </Upload>
-                        {loadingState}
-                      </div>
                     </div>
-              </Col>
+                  </Col>
-            </Row>
+                </Row>
-          </div>
+              </div>
-        )}
+          <ProductComponent/>
-        <ProductComponent />
+        </Card>
-      </Card>
+
-    </div>
+        <Modal
+            visible={visibleModalUpload}
+            title={"Upload Excel Product"}
+            okText={"Create"}
+            cancelText="Cancel"
+            onCancel={() => {
+              form.resetFields();
+              handleCancel();
+            }}
+            onOk={() => {
+              form
+                  .validateFields()
+                  .then((values) => {
+                    console.log(values, "isi form");
+                    handleSubmit(values);
+                    form.resetFields();
+                  })
+                  .catch((info) => {
+                    console.error("Validate Failed:", info);
+                  });
+            }}
+        >
+          <Form form={form} layout="vertical">
+            <Form.Item
+                name="fileName"
+                label="Upload Excel Product"
+                rules={[{required: true, message: "Please Upload Excel Product!"}]}
+            >
+              <Upload
+                  fileList={fileList}
+                  onChange={handleChange}
+                  beforeUpload={(file) => beforeUpload(file)}
+                  customRequest={(args) => uploadHandler(args)}
+                  onRemove={(file) => {
+                    setLoading(false);
+                    setFileList([]);
+                    setExcel("");
+                  }}
+              >
+                <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "center",
+                    }}
+                >
+                  <Button
+                      disabled={loading}
+                      style={{
+                        marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                      }}
+                      icon={<UploadOutlined/>}
+                  >
+                    Upload Product
+                  </Button>
+                </div>
+              </Upload>
+            </Form.Item>
+            <Form.Item
+                name="supplierCode"
+                label="Supplier Code"
+                rules={[{required: true, message: "Please input Supplier Code!"}]}
+            >
+              <Select>
+                {store.supplier.data.map(data => (
+                    <Option key={data.id} value={data.code}>
+                      {data.name}
+                    </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </Form>
+        </Modal>
+      </div>
   );
 });

src/pages/Product/ProductDetail.js

@@ -1,19 +1,18 @@
-import React, { useContext, useEffect } from "react";
+import React, {useContext, useEffect} from "react";
-import { Button, Card, Col, Row, Table, Typography } from "antd";
+import {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 {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";
-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 {id} = useParams();
   const modalLoader = useContext(ModalLoaderContext);
 
   const routeData = [
@@ -26,8 +25,8 @@ export const ProductDetail = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Produk</span>,
     },
     {
-      route: LINKS.PRODUCT_DETAIL,
+      route: LINKS.PRODUCT_DETAIL.replace(':id', `${id}`),
-      name: <span style={{ fontWeight: "bold" }}>Detail Produk</span>,
+      name: <span style={{fontWeight: "bold"}}>Detail Produk</span>,
     },
   ];
 
@@ -35,21 +34,18 @@ export const ProductDetail = observer(() => {
     (async () => {
       modalLoader.setLoading(true);
       await Promise.allSettled([
-        //store.authentication.getProfile(),
+        store.product.getPriceHistoryByProduct(id),
-        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%",
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -60,7 +56,6 @@ export const ProductDetail = observer(() => {
       title: "Price",
       dataIndex: "price",
       key: "price",
-      width: "50%",
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -68,12 +63,22 @@ export const ProductDetail = observer(() => {
         }).format(text),
     },
     {
-      title: "Transaction Date",
+      title: "Tanggal Berlaku",
       dataIndex: "startDate",
       key: "startDate",
-      render: (text, record) => {
+      render: (text) => {
         return (
-          <Text>{format(parseISO(record.startDate), "dd MMMM yyyy")}</Text>
+            <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
+        );
+      },
+    },
+    {
+      title: "Tanggal Berakhir",
+      dataIndex: "endDate",
+      key: "endDate",
+      render: (text) => {
+        return (
+            <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}</Text>
         );
       },
     },
@@ -105,47 +110,25 @@ export const ProductDetail = observer(() => {
                 <Text strong>Kode</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.product.dataDetailProduct.code}</Text>
+                <Text>{store.product?.dataDetailProduct?.code}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Nama Produk</Text>
               </Col>
               <Col span={10}>
-                <Text>{store.product.dataDetailProduct.name}</Text>
+                <Text>{store.product?.dataDetailProduct?.name}</Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Harga Beli</Text>
-              </Col>
-              <Col span={12}>
-                <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>
-                  {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>
+                <Text>{store.product?.dataDetailProduct?.supplier?.name}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Status</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.product.dataDetailProduct.status}</Text>
+                <Text>{store.product?.dataDetailProduct?.status}</Text>
               </Col>
             </Row>
           </Col>
@@ -174,9 +157,24 @@ export const ProductDetail = observer(() => {
                 Filter
               </Button> */}
               <Table
-                columns={columns}
+                  columns={columns}
-                dataSource={store.product.dataDetail}
+                  dataSource={store.product.dataPriceHistory}
-                bordered
+                  bordered
+                  pagination={{
+                    pageSize: store.product.pageSizePriceHistory,
+                    total: store.product.totalDataPriceHistory,
+                    current: store.product.pagePriceHistory + 1,
+                    showSizeChanger: true,
+                    simple: false,
+                  }}
+                  onChange={async (page) => {
+                    let pageNumber = page.current;
+                    store.product.pageSizePriceHistory = page.pageSize;
+                    store.product.pagePriceHistory = pageNumber - 1;
+                    modalLoader.setLoading(true);
+                    await store.product.getPriceHistoryByProduct(id);
+                    modalLoader.setLoading(false);
+                  }}
               />
             </div>
           </Col>

src/pages/Profile/Profile.js

@@ -60,7 +60,7 @@ export const Profile = observer(() => {
       key: 'created_at',
       render: (text, record) => {
         return (
-          <Text>{format(parseISO(record.created_at), 'mm:HH dd MM YYYY')}</Text>
+          <Text>{format(parseISO(record.created_at), 'mm:HH dd-MM-yyyy')}</Text>
         )
       },
     },

src/pages/Transaction/Product.js

@@ -1,16 +1,17 @@
-import React, { useContext, useEffect } from "react";
+import React, {useContext, useEffect, useState} from "react";
-import { useStore } from "../../utils/useStore";
+import {useStore} from "../../utils/useStore";
-import { Button, Card, Col, Input, message, Modal, Row, Select } from "antd";
+import {Card, Col, Form, 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 {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();
   const modalLoader = useContext(ModalLoaderContext);
+  const [form] = Form.useForm();
+  const [visibleModalBuy, setVisibleModalBuy] = useState(false);
 
   useEffect(() => {
     const init = async () => {
@@ -41,11 +42,12 @@ export const Product = observer(() => {
     modalLoader.setLoading(false);
   };
 
-  const handleBuyProduct = async (data) => {
+  const handleBuyProduct = async (data, productCode) => {
     modalLoader.setLoading(true);
     try {
       const response = await store.transaction.buyProduct({
-        productCode: data,
+        ...data,
+        productCode: productCode,
       });
       if (response.status === 201) {
         message.success(response?.body?.message || "Berhasil Beli Produk");
@@ -60,38 +62,44 @@ export const Product = observer(() => {
       console.log(e, "apa errornya");
       message.error("Gagal Beli Product");
     }
+    setVisibleModalBuy(false);
     modalLoader.setLoading(false);
   };
 
+  const handleCancel = () => {
+    form.resetFields();
+    setVisibleModalBuy(false);
+  };
+
   return (
-    <div>
+      <div>
-      <Row>
+        <Row>
-        <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+        <span style={{fontWeight: "bold", marginBottom: "10px"}}>
           Sub Category
         </span>
-      </Row>
+        </Row>
-      <Row>
+        <Row>
-        <Col span={24}>
+          <Col span={24}>
-          <Select
+            <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}>
+                    {item.name}
+                  </Option>
+              ))}
+            </Select>
+          </Col>
+        </Row>
+        <Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
+          <Col
+              span={12}
+              style={{fontWeight: "bold", display: "flex", alignItems: "center"}}
           >
-            {store.transaction.dataSubCategories.map((item, index) => (
-              <Option key={item.id} value={item.id}>
-                {item.name}
-              </Option>
-            ))}
-          </Select>
-        </Col>
-      </Row>
-      <Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
-        <Col
-          span={12}
-          style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
-        >
           Produk & Nominal
         </Col>
         <Col span={12} style={{ textAlign: "right" }}>
@@ -107,19 +115,7 @@ export const Product = observer(() => {
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
                 onClick={() => {
-                  Modal.confirm({
+                  setVisibleModalBuy(true)
-                    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={{
@@ -130,26 +126,52 @@ export const Product = observer(() => {
                   marginBottom: 10,
                 }}
               >
-                <span style={{ color: "black" }}>{item.product_name}</span>
+                <span style={{color: "black"}}>{item.product_name}</span>
-                <br />
+                <br/>
-                <span style={{ color: "grey", fontSize: 10 }}>
+                <span style={{color: "grey", fontSize: 10}}>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
                     currency: "IDR",
                   }).format(item?.price)}
                 </span>
               </Card>
+
+              <Modal
+                  visible={visibleModalBuy}
+                  title={`Are you sure buy ${item.product_name}?`}
+                  okText={"Confirm"}
+                  cancelText="Cancel"
+                  onCancel={() => {
+                    form.resetFields();
+                    handleCancel();
+                  }}
+                  onOk={() => {
+                    form
+                        .validateFields()
+                        .then((values) => {
+                          console.log(values, "isi form");
+                          handleBuyProduct(values, item.product_code);
+                          form.resetFields();
+                        })
+                        .catch((info) => {
+                          console.error("Validate Failed:", info);
+                        });
+                  }}
+              >
+                <Form form={form} layout="vertical">
+                  <Form.Item
+                      name="phoneNumber"
+                      label="Phone Number"
+                      rules={[{required: true, message: "Please input Phone Number!"}]}
+                  >
+                    <Input/>
+                  </Form.Item>
+                </Form>
+              </Modal>
             </Col>
           ))}
         </Row>
       )}
-      {/* {store.transaction.data.length !== 0 && (
-          <Col style={{textAlign: "right", marginTop: "1em"}}>
-            <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
-              Beli Sekarang
-            </Button>
-          </Col>
-      )} */}
     </div>
   );
 });

src/store/product.js

@@ -13,7 +13,7 @@ export class Product {
     uploadBtnProduct = false;
 
     pageCategories = 0;
-    pageSizeCategories = 10
+    pageSizeCategories = 100;
     dataCategories = [];
     total_dataCategories = 0;
 
@@ -22,11 +22,13 @@ export class Product {
     dataSubCategories = [];
     total_dataSubCategories = 0;
     filterCategory = null;
-    dataDetail=[]
-    dataDetailProduct=[]
 
-    pageGetDetail=0
+    dataPriceHistory = [];
-    supplier=null
+    totalDataPriceHistory = 0;
+    pagePriceHistory = 0;
+    pageSizePriceHistory = 10
+
+    dataDetailProduct = {};
 
     constructor(ctx) {
         this.ctx = ctx;
@@ -72,22 +74,21 @@ export class Product {
             console.error(e);
         }
     }
-    async getDetail(id) {
+
+    async getPriceHistoryByProduct(id) {
         try {
-            const response = await http.get(`/product/price-history/${id}?page=${this.pageGetDetail}&supplier=${this.supplier}`);
+            const response = await http.get(`/product/price-history/${id}?page=${this.pagePriceHistory}&pageSize${this.pageSizePriceHistory}`);
-            //console.log(response,' Detail')
+            this.dataPriceHistory = response.body.data
-            this.dataDetail = response.body.data
+            this.totalDataPriceHistory = response?.body?.count ?? 0
-            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);
         }