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

src/component/ProductComponent.js

@@ -108,12 +108,7 @@ export const ProductComponent = observer((props) => {
       render: (text, record) => (
         <Button
             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)
-            );
-            //console.log(record.product_id);
             }}
           >
             Detail

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",
@@ -117,19 +122,6 @@ export const DetailUser = observer(() => {
         );
       },
     },
-    {
-      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,22 +186,19 @@ 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
                   type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
                   onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
               >
                 {store.membership.dataDetail.isActive === true ? "Inactive" : "Active"}
               </Button>
-              }
-              {store.authentication.userData.role === "Admin" &&
               <Button
                   onClick={() => {
                     setInitialData({
@@ -225,8 +214,6 @@ export const DetailUser = observer(() => {
               >
                 Edit
               </Button>
-              }
-              {store.authentication.userData.role === "Admin" &&
               <Button
                   onClick={() => {
                     setInitialData({
@@ -242,8 +229,7 @@ export const DetailUser = observer(() => {
               >
                 Ganti Password
               </Button>
-              }
+            </Space>}
-            </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",
                           }}
+                      >
+                        <Button
+                            disabled={visibleModalUpload}
+                            style={{
+                              marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                              marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
+                            }}
+                            icon={<PlusOutlined/>}
+                            onClick={() => setVisibleModalUpload(true)}
+                        >
+                          Tambah Produk
+                        </Button>
+                      </div>}
+                    </div>
+                  </Col>
+                </Row>
+              </div>
+          <ProductComponent/>
+        </Card>
+
+        <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
-                            showUploadList={false}
+                  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,
-                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
                       }}
                       icon={<UploadOutlined/>}
                   >
                     Upload Product
                   </Button>
+                </div>
               </Upload>
-                        {loadingState}
+            </Form.Item>
-                      </div>
+            <Form.Item
-                    </div>
+                name="supplierCode"
-              </Col>
+                label="Supplier Code"
-            </Row>
+                rules={[{required: true, message: "Please input Supplier Code!"}]}
-          </div>
+            >
-        )}
+              <Select>
-        <ProductComponent />
+                {store.supplier.data.map(data => (
-      </Card>
+                    <Option key={data.id} value={data.code}>
+                      {data.name}
+                    </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </Form>
+        </Modal>
       </div>
   );
 });

src/pages/Product/ProductDetail.js

@@ -1,10 +1,9 @@
 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 {LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
-import { FilterOutlined } from "@ant-design/icons";
 import {format, parseISO} from "date-fns";
 import {ModalLoaderContext} from "../../utils/modal";
 import {useParams} from "react-router-dom";
@@ -26,7 +25,7 @@ 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>,
     },
   ];
@@ -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>
@@ -175,8 +158,23 @@ export const ProductDetail = observer(() => {
               </Button> */}
               <Table
                   columns={columns}
-                dataSource={store.product.dataDetail}
+                  dataSource={store.product.dataPriceHistory}
                   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,8 +1,7 @@
-import React, { useContext, useEffect } from "react";
+import React, {useContext, useEffect, useState} from "react";
 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 { MoneyCollectOutlined } from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";
 
 const {Search} = Input;
@@ -11,6 +10,8 @@ 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,9 +62,15 @@ 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>
         <Row>
@@ -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={{
@@ -139,17 +135,43 @@ export const Product = observer(() => {
                   }).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);
         }