From e1c7c673a7e81931fefd4e77ecb08242a003dd5c Mon Sep 17 00:00:00 2001
From: Fadli <muhammad.fadli@bangun-kreatif.com>
Date: Wed, 11 May 2022 18:57:17 +0700
Subject: [PATCH] - fix filter list product when in page 2 dst - add biaya
 admin in list product

---
 src/component/ProductComponent.js  | 661 +++++++++++++++--------------
 src/pages/Product/ProductDetail.js | 358 ++++++++--------
 2 files changed, 520 insertions(+), 499 deletions(-)

diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 37c4d00..c4d28b5 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -64,30 +64,40 @@ export const ProductComponent = observer((props) => {
       dataIndex: "current_price_price",
       key: "current_price_price",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Harga Jual",
       dataIndex: "mark_up_price",
       key: "mark_up_price",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Harga",
       dataIndex: "price",
       key: "price",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
+    },
+    {
+      title: "Biaya Admin",
+      dataIndex: "admin_price",
+      key: "admin_price",
+      render: (text) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Supplier",
@@ -104,27 +114,27 @@ export const ProductComponent = observer((props) => {
       dataIndex: "tersedia",
       key: "tersedia",
       render: (text, record) => (
-        <Tag
-          color={record?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
-        >
-          {record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
-        </Tag>
+          <Tag
+              color={record?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
+              style={{ color: "#4F566B" }}
+          >
+            {record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
+          </Tag>
       ),
     },
     {
       title: "Tindakan",
       key: "action",
       render: (text, record) => (
-        <Button
-          onClick={async () => {
-            history.push(
-              LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
-            );
-          }}
-        >
-          Detail
-        </Button>
+          <Button
+              onClick={async () => {
+                history.push(
+                    LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
+                );
+              }}
+          >
+            Detail
+          </Button>
       ),
     },
   ];
@@ -180,10 +190,10 @@ export const ProductComponent = observer((props) => {
       try {
         const response = await store.product.update(idData, data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success(
-            response?.body?.message || "Berhasil Ubah Data Produk"
-          )
-          : message.error(response?.body?.message || "Gagal Ubah Data Produk");
+            ? message.success(
+                response?.body?.message || "Berhasil Ubah Data Produk"
+            )
+            : message.error(response?.body?.message || "Gagal Ubah Data Produk");
       } catch (e) {
         message.error(e.response?.body?.message || "Gagal Ubah Data Produk");
       }
@@ -196,8 +206,8 @@ export const ProductComponent = observer((props) => {
       try {
         const response = await store.product.create(data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success(response?.body?.message || "Berhasil Tambah Produk")
-          : message.error(response?.body?.message || "Gagal Tambah Produk");
+            ? message.success(response?.body?.message || "Berhasil Tambah Produk")
+            : message.error(response?.body?.message || "Gagal Tambah Produk");
       } catch (e) {
         console.log(e, "apa errornya");
         message.error(e.response?.body?.message || "Gagal Tambah Produk");
@@ -217,8 +227,8 @@ export const ProductComponent = observer((props) => {
     setFilterSupplier([]);
     setFilterSubCategories([]);
     store.authentication.userData.role === "Admin Partner"
-      ? await store.product.getProductPartner()
-      : await store.product.getData();
+        ? await store.product.getProductPartner()
+        : await store.product.getData();
     //await store.product.getData();
     modalLoader.setLoading(false);
   };
@@ -235,8 +245,8 @@ export const ProductComponent = observer((props) => {
     store.product.filterSubCategory = filterSubCategories;
     modalLoader.setLoading(true);
     store.authentication.userData.role === "Admin Partner"
-      ? await store.product.getProductPartner(filterSubCategories)
-      : await store.product.getData();
+        ? await store.product.getProductPartner(filterSubCategories)
+        : await store.product.getData();
     //await store.product.getData();
     modalLoader.setLoading(false);
     //store.product.page=1
@@ -244,12 +254,12 @@ export const ProductComponent = observer((props) => {
 
   const footerLayoutFilter = [
     <Button
-      key={"remove"}
-      onClick={handleRemoveFilter}
-      style={{
-        backgroundColor: "#e74e5e",
-        color: "#fff",
-      }}
+        key={"remove"}
+        onClick={handleRemoveFilter}
+        style={{
+          backgroundColor: "#e74e5e",
+          color: "#fff",
+        }}
     >
       Hapus Filter
     </Button>,
@@ -257,12 +267,12 @@ export const ProductComponent = observer((props) => {
       Batal
     </Button>,
     <Button
-      key={"submit"}
-      onClick={handleSubmitFilter}
-      style={{
-        backgroundColor: "#4e79e7",
-        color: "#fff",
-      }}
+        key={"submit"}
+        onClick={handleSubmitFilter}
+        style={{
+          backgroundColor: "#4e79e7",
+          color: "#fff",
+        }}
     >
       Terapkan
     </Button>,
@@ -274,292 +284,293 @@ export const ProductComponent = observer((props) => {
     },
   });
   return (
-    <div>
-      {store.ui.mediaQuery.isDesktop && (
-        <Table
-          style={{
-            cursor: "pointer",
-            textAlign: "center",
-            width: store.ui.mediaQuery.isMobile ? 250 : "",
-          }}
-          columns={columns}
-          dataSource={
-            store.authentication.userData.role === "Admin Partner"
-              ? store.product.dataProductPartner
-              : store.product.data
-          }
-          onRow={handleClickRow}
-          pagination={{
-            pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
-            total:
-              store.authentication.userData.role === "Admin Partner"
-                ? store.product.total_data_partner
-                : store.product.total_data,
-            current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
-            showSizeChanger: true,
-            simple: false,
-          }}
-          onChange={async (page) => {
-            let pageNumber = page.current;
-            store.authentication.userData.role === "Admin" ? store.product.pageSize = page.pageSize : store.product.pageSizeProductPartner = page.pageSize;
-            store.authentication.userData.role === "Admin" ? store.product.page = pageNumber - 1 : store.product.pageProductPartner = pageNumber - 1
-            modalLoader.setLoading(true);
-            store.authentication.userData.role === "Admin Partner"
-              ? await store.product.getProductPartner(
-                // store.authentication.profileData.id
-              )
-              : await store.product.getData();
-            modalLoader.setLoading(false);
-          }}
-        />
-      )}
-      {store.ui.mediaQuery.isMobile && (
-        <List
-          itemLayout="horizontal"
-          position={"top"}
-          pagination={{
-            onChange: async (page, pageSize) => {
-              store.authentication.userData.role === "Admin" ? store.product.pageSize = pageSize : store.product.pageSizeProductPartner = pageSize;
-              store.authentication.userData.role === "Admin" ? store.product.page = page - 1 : store.product.pageProductPartner = page - 1
-              modalLoader.setLoading(true);
-              store.authentication.userData.role === "Admin Partner"
-                ? await store.product.getProductPartner(
-                  // store.authentication.profileData.id
-                )
-                : await store.product.getData();
-              //await store.product.getData();
-              modalLoader.setLoading(false);
-            },
-            pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
-            total: store.authentication.userData.role === "Admin Partner"
-              ? store.product.total_data_partner
-              : store.product.total_data,
-            current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
-          }}
-          dataSource={
-            store.authentication.userData.role === "Admin Partner"
-              ? store.product.dataProductPartner
-              : store.product.data
-          }
-          style={{ padding: 0 }}
-          renderItem={(item) => {
-            return (
-              <div>
-                <List.Item
-                  key={item.id}
-                  style={{
-                    backgroundColor: "#ffffff",
-                    paddingTop: 0,
-                    paddingBottom: 0,
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
-                  <List.Item.Meta
-                    className={[""].join(" ")}
-                    title={item.product_code}
-                    description={
-                      <div style={{}}>
-                        <p>
-                          <small>{item.product_name}</small> <br />
-                          {/* <small>Harga Beli : {item.current_price_price}</small>
-                          <br /> */}
-                          <small>Harga Jual : {item.mark_up_price}</small>
-                          <br />
-                          <Button
-                            onClick={async () => {
-                              history.push(
-                                LINKS.PRODUCT_DETAIL.replace(
-                                  ":id",
-                                  item.product_id
-                                )
-                              );
+      <div>
+        {store.ui.mediaQuery.isDesktop && (
+            <Table
+                style={{
+                  cursor: "pointer",
+                  textAlign: "center",
+                  width: store.ui.mediaQuery.isMobile ? 250 : "",
+                }}
+                columns={columns}
+                dataSource={
+                  store.authentication.userData.role === "Admin Partner"
+                      ? store.product.dataProductPartner
+                      : store.product.data
+                }
+                onRow={handleClickRow}
+                pagination={{
+                  pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
+                  total:
+                      store.authentication.userData.role === "Admin Partner"
+                          ? store.product.total_data_partner
+                          : store.product.total_data,
+                  current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.authentication.userData.role === "Admin" ? store.product.pageSize = page.pageSize : store.product.pageSizeProductPartner = page.pageSize;
+                  store.authentication.userData.role === "Admin" ? store.product.page = pageNumber - 1 : store.product.pageProductPartner = pageNumber - 1
+                  store.product.filterSubCategory = filterSubCategories
+                  modalLoader.setLoading(true);
+                  store.authentication.userData.role === "Admin Partner"
+                      ? await store.product.getProductPartner(
+                          // store.authentication.profileData.id
+                      )
+                      : await store.product.getData();
+                  modalLoader.setLoading(false);
+                }}
+            />
+        )}
+        {store.ui.mediaQuery.isMobile && (
+            <List
+                itemLayout="horizontal"
+                position={"top"}
+                pagination={{
+                  onChange: async (page, pageSize) => {
+                    store.authentication.userData.role === "Admin" ? store.product.pageSize = pageSize : store.product.pageSizeProductPartner = pageSize;
+                    store.authentication.userData.role === "Admin" ? store.product.page = page - 1 : store.product.pageProductPartner = page - 1
+                    modalLoader.setLoading(true);
+                    store.authentication.userData.role === "Admin Partner"
+                        ? await store.product.getProductPartner(
+                            // store.authentication.profileData.id
+                        )
+                        : await store.product.getData();
+                    //await store.product.getData();
+                    modalLoader.setLoading(false);
+                  },
+                  pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
+                  total: store.authentication.userData.role === "Admin Partner"
+                      ? store.product.total_data_partner
+                      : store.product.total_data,
+                  current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
+                  style: { marginBottom: "1rem", marginRight: "1rem" },
+                }}
+                dataSource={
+                  store.authentication.userData.role === "Admin Partner"
+                      ? store.product.dataProductPartner
+                      : store.product.data
+                }
+                style={{ padding: 0 }}
+                renderItem={(item) => {
+                  return (
+                      <div>
+                        <List.Item
+                            key={item.id}
+                            style={{
+                              backgroundColor: "#ffffff",
+                              paddingTop: 0,
+                              paddingBottom: 0,
+                              display: "flex",
+                              flexDirection: "row",
+                              alignItems: "center",
+                              justifyContent: "center",
                             }}
-                          >
-                            Detail
-                          </Button>
-                        </p>
-                        <p></p>
+                        >
+                          <List.Item.Meta
+                              className={[""].join(" ")}
+                              title={item.product_code}
+                              description={
+                                <div style={{}}>
+                                  <p>
+                                    <small>{item.product_name}</small> <br />
+                                    {/* <small>Harga Beli : {item.current_price_price}</small>
+                          <br /> */}
+                                    <small>Harga Jual : {item.mark_up_price}</small>
+                                    <br />
+                                    <Button
+                                        onClick={async () => {
+                                          history.push(
+                                              LINKS.PRODUCT_DETAIL.replace(
+                                                  ":id",
+                                                  item.product_id
+                                              )
+                                          );
+                                        }}
+                                    >
+                                      Detail
+                                    </Button>
+                                  </p>
+                                  <p></p>
+                                </div>
+                              }
+                          />
+                          <div style={{ marginRight: 16 }}>
+                            <p
+                                style={{
+                                  fontSize: 9,
+                                  margin: 0,
+                                }}
+                            >
+                              <Tag
+                                  color={
+                                    item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
+                                  }
+                                  style={{ color: "#4F566B" }}
+                              >
+                                {item?.product_status === "ACTIVE"
+                                    ? " Tersedia"
+                                    : "Tidak"}
+                              </Tag>
+                            </p>
+                          </div>
+                        </List.Item>
+                        <Divider plain style={{ margin: 0 }} />
                       </div>
-                    }
-                  />
-                  <div style={{ marginRight: 16 }}>
-                    <p
-                      style={{
-                        fontSize: 9,
-                        margin: 0,
-                      }}
-                    >
-                      <Tag
-                        color={
-                          item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
-                        }
-                        style={{ color: "#4F566B" }}
-                      >
-                        {item?.product_status === "ACTIVE"
-                          ? " Tersedia"
-                          : "Tidak"}
-                      </Tag>
-                    </p>
-                  </div>
-                </List.Item>
-                <Divider plain style={{ margin: 0 }} />
-              </div>
-            );
-          }}
-        />
-      )}
-      <Modal
-        visible={store.product.visibleModalProduct}
-        title={idData ? "Edit Product" : "Create a new Product"}
-        okText={idData ? "Edit" : "Create"}
-        cancelText="Batal"
-        onCancel={() => {
-          form.resetFields();
-          handleCancel();
-        }}
-        onOk={() => {
-          form
-            .validateFields()
-            .then((values) => {
-              console.log(values, "isi form");
-              handleSubmit(values);
+                  );
+                }}
+            />
+        )}
+        <Modal
+            visible={store.product.visibleModalProduct}
+            title={idData ? "Edit Product" : "Create a new Product"}
+            okText={idData ? "Edit" : "Create"}
+            cancelText="Batal"
+            onCancel={() => {
               form.resetFields();
-            })
-            .catch((info) => {
-              console.error("Validate Failed:", info);
-            });
-        }}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item
-            name="name"
-            label="Name"
-            rules={[{ required: true, message: "Please input name!" }]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            name="price"
-            label="Price"
-            rules={[{ required: true, message: "Please input price!" }]}
-          >
-            <InputNumber
-              style={{ width: "100%" }}
-              formatter={(value) =>
-                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-              }
-              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
-            />
-          </Form.Item>
-          <Form.Item
-            name="markUpPrice"
-            label="Mark Up Price"
-            rules={[{ required: true, message: "Please input mark up price!" }]}
-          >
-            <InputNumber
-              style={{ width: "100%" }}
-              formatter={(value) =>
-                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-              }
-              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
-            />
-          </Form.Item>
-          <Form.Item
-            name="code"
-            label="Code"
-            rules={[{ required: true, message: "Please input code!" }]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            name="status"
-            label="Status"
-            rules={[{ required: true, message: "Please select Status!" }]}
-          >
-            <Select placeholder="Select Sub Category" allowClear>
-              <Option value="ACTIVE">AKTIF</Option>
-              <Option value="INACTIVE">INAKTIF</Option>
-            </Select>
-          </Form.Item>
-          <Form.Item
-            name="subCategoriesId"
-            label="Sub categories"
-            rules={[
-              { required: true, message: "Please select sub categories!" },
-            ]}
-          >
-            <Select placeholder="Select Sub Category" allowClear>
-              {store.category.dataSubCategories.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </Form.Item>
-        </Form>
-      </Modal>
-      <Modal
-        visible={store.product.visibleModalFilterProduct}
-        title={"Filter"}
-        footer={footerLayoutFilter}
-        onCancel={async () => {
-          // setFilterSupplier([]);
-          // setFilterSubCategories([]);
-          store.product.filterSupplier = null;
-          store.product.filterSubCategory = null;
-          store.product.visibleModalFilterProduct = false;
-          await store.product.getData();
-        }}
-      >
-        <Row>
-          {store.authentication.userData.role === "Admin" && (
+              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="name"
+                label="Name"
+                rules={[{ required: true, message: "Please input name!" }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+                name="price"
+                label="Price"
+                rules={[{ required: true, message: "Please input price!" }]}
+            >
+              <InputNumber
+                  style={{ width: "100%" }}
+                  formatter={(value) =>
+                      `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+                  }
+                  parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+              />
+            </Form.Item>
+            <Form.Item
+                name="markUpPrice"
+                label="Mark Up Price"
+                rules={[{ required: true, message: "Please input mark up price!" }]}
+            >
+              <InputNumber
+                  style={{ width: "100%" }}
+                  formatter={(value) =>
+                      `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+                  }
+                  parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+              />
+            </Form.Item>
+            <Form.Item
+                name="code"
+                label="Code"
+                rules={[{ required: true, message: "Please input code!" }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+                name="status"
+                label="Status"
+                rules={[{ required: true, message: "Please select Status!" }]}
+            >
+              <Select placeholder="Select Sub Category" allowClear>
+                <Option value="ACTIVE">AKTIF</Option>
+                <Option value="INACTIVE">INAKTIF</Option>
+              </Select>
+            </Form.Item>
+            <Form.Item
+                name="subCategoriesId"
+                label="Sub categories"
+                rules={[
+                  { required: true, message: "Please select sub categories!" },
+                ]}
+            >
+              <Select placeholder="Select Sub Category" allowClear>
+                {store.category.dataSubCategories.map((item) => (
+                    <Option value={item.id} key={item.id}>
+                      {item.name}
+                    </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </Form>
+        </Modal>
+        <Modal
+            visible={store.product.visibleModalFilterProduct}
+            title={"Filter"}
+            footer={footerLayoutFilter}
+            onCancel={async () => {
+              // setFilterSupplier([]);
+              // setFilterSubCategories([]);
+              store.product.filterSupplier = null;
+              store.product.filterSubCategory = null;
+              store.product.visibleModalFilterProduct = false;
+              await store.product.getData();
+            }}
+        >
+          <Row>
+            {store.authentication.userData.role === "Admin" && (
+                <Col span={24}>
+                  <Title level={5} type={"secondary"} strong>
+                    Filter Supplier
+                  </Title>
+                  <Select
+                      mode={"multiple"}
+                      placeholder="Choose Supplier"
+                      onChange={(val) => {
+                        setFilterSupplier(val);
+                      }}
+                      style={{ marginBottom: "20px", width: "100%" }}
+                      value={filterSupplier}
+                  >
+                    {store.supplier.data.map((item) => (
+                        <Option value={item.id} key={item.id}>
+                          {item.name}
+                        </Option>
+                    ))}
+                  </Select>
+                </Col>
+            )}
             <Col span={24}>
               <Title level={5} type={"secondary"} strong>
-                Filter Supplier
+                Filter Sub-Categories
               </Title>
               <Select
-                mode={"multiple"}
-                placeholder="Choose Supplier"
-                onChange={(val) => {
-                  setFilterSupplier(val);
-                }}
-                style={{ marginBottom: "20px", width: "100%" }}
-                value={filterSupplier}
+                  mode={"multiple"}
+                  placeholder="Choose Sub-Category"
+                  onChange={(val) => {
+                    setFilterSubCategories(val);
+                  }}
+                  style={{ marginBottom: "20px", width: "100%" }}
+                  value={filterSubCategories}
               >
-                {store.supplier.data.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                {store.product.dataSubCategories.map((item) => (
+                    <Option value={item.id} key={item.id}>
+                      {item.name}
+                    </Option>
                 ))}
               </Select>
             </Col>
-          )}
-          <Col span={24}>
-            <Title level={5} type={"secondary"} strong>
-              Filter Sub-Categories
-            </Title>
-            <Select
-              mode={"multiple"}
-              placeholder="Choose Sub-Category"
-              onChange={(val) => {
-                setFilterSubCategories(val);
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
-              value={filterSubCategories}
-            >
-              {store.product.dataSubCategories.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </Col>
-        </Row>
-      </Modal>
-    </div>
+          </Row>
+        </Modal>
+      </div>
   );
 });
diff --git a/src/pages/Product/ProductDetail.js b/src/pages/Product/ProductDetail.js
index 6364f74..caa71a8 100644
--- a/src/pages/Product/ProductDetail.js
+++ b/src/pages/Product/ProductDetail.js
@@ -57,20 +57,30 @@ export const ProductDetail = observer(() => {
       dataIndex: "mark_up_price",
       key: "mark_up_price",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Price",
       dataIndex: "price",
       key: "price",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
+    },
+    {
+      title: "Biaya Admin",
+      dataIndex: "admin_price",
+      key: "admin_price",
+      render: (text) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Tanggal Berlaku",
@@ -78,7 +88,7 @@ export const ProductDetail = observer(() => {
       key: "startDate",
       render: (text) => {
         return (
-          <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
+            <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
         );
       },
     },
@@ -88,174 +98,174 @@ export const ProductDetail = observer(() => {
       key: "endDate",
       render: (text) => {
         return (
-          <Text>
-            {text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}
-          </Text>
+            <Text>
+              {text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}
+            </Text>
         );
       },
     },
   ];
 
   const styleSaldoTitle = store.ui.mediaQuery.isDesktop
-    ? {
+      ? {
         display: "flex",
         justifyContent: "center",
       }
-    : { fontSize: "0.75rem" };
+      : { fontSize: "0.75rem" };
   const styleSaldoContent = store.ui.mediaQuery.isDesktop
-    ? {
+      ? {
         fontSize: "1.25rem",
         display: "flex",
         justifyContent: "center",
       }
-    : null;
+      : null;
 
   return (
-    <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} />
-      <Card>
-        <Title strong>Product Detail</Title>
-        <Row style={{ marginBottom: 20 }}>
-          <Col lg={12} xs={24}>
-            <Row>
-              <Col span={12}>
-                <Text strong>Kode</Text>
-              </Col>
-              <Col span={12}>
-                <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>
-              </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.product?.dataDetailProduct?.status}</Text>
-              </Col>
-            </Row>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24}>
-            <div>
-              <Title strong level={3}>
-                Product Price History
-              </Title>
-              {store.ui.mediaQuery.isDesktop && (
-                <Table
-                  columns={columns}
-                  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);
-                  }}
-                />
-              )}
-              {store.ui.mediaQuery.isMobile && (
-                <List
-                  itemLayout="horizontal"
-                  position={"top"}
-                  pagination={{
-                    onChange: async (page, pageSize) => {
-                      store.product.pageSizePriceHistory = pageSize;
-                      store.product.pagePriceHistory = page - 1;
-                      modalLoader.setLoading(true);
-                      await store.product.getPriceHistoryByProduct(id);
-                      modalLoader.setLoading(false);
-                    },
-                    pageSize: store.product.pageSizePriceHistory,
-                    total: store.product.totalDataPriceHistory,
-                    current: store.product.pagePriceHistory + 1,
-                    style: { marginBottom: "1rem", marginRight: "1rem" },
-                  }}
-                  dataSource={store.product.dataPriceHistory}
-                  style={{ padding: 0 }}
-                  renderItem={(item) => {
-                    return (
-                      <div>
-                        <List.Item
-                          key={item.id}
-                          style={{
-                            backgroundColor: "#ffffff",
-                            paddingTop: 0,
-                            paddingBottom: 0,
-                            display: "flex",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            justifyContent: "center",
-                          }}
-                        >
-                          <List.Item.Meta
-                            className={[""].join(" ")}
-                            //title={item.mark_up_price}
-                            description={
-                              <div style={{}}>
-                                <p>
-                                  <small>
-                                    Markup Price :{" "}
-                                    {new Intl.NumberFormat("id-ID", {
-                                      style: "currency",
-                                      currency: "IDR",
-                                    }).format(item.mark_up_price)}
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    Price:{" "}
-                                    {new Intl.NumberFormat("id-ID", {
-                                      style: "currency",
-                                      currency: "IDR",
-                                    }).format(item.price)}
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    {" "}
-                                    Tanggal Berlaku :
-                                    {item.startDate
-                                      ? format(
-                                          parseISO(item.startDate),
-                                          "dd MMMM yyyy"
-                                        )
-                                      : "-"}
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    Tanggal Berakhir :{" "}
-                                    {item.endDate
-                                      ? format(
-                                          parseISO(item.endDate),
-                                          "dd MMMM yyyy"
-                                        )
-                                      : "Sampai Sekarang"}
-                                  </small>{" "}
-                                  <br />
-                                </p>
-                                <p></p>
-                              </div>
-                            }
-                          />
-                          {/* <div style={{ marginRight: 16 }}>
+      <div className={["ppob-container"].join(" ")}>
+        <BreadcumbComponent data={routeData} />
+        <Card>
+          <Title strong>Product Detail</Title>
+          <Row style={{ marginBottom: 20 }}>
+            <Col lg={12} xs={24}>
+              <Row>
+                <Col span={12}>
+                  <Text strong>Kode</Text>
+                </Col>
+                <Col span={12}>
+                  <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>
+                </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.product?.dataDetailProduct?.status}</Text>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={24}>
+              <div>
+                <Title strong level={3}>
+                  Product Price History
+                </Title>
+                {store.ui.mediaQuery.isDesktop && (
+                    <Table
+                        columns={columns}
+                        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);
+                        }}
+                    />
+                )}
+                {store.ui.mediaQuery.isMobile && (
+                    <List
+                        itemLayout="horizontal"
+                        position={"top"}
+                        pagination={{
+                          onChange: async (page, pageSize) => {
+                            store.product.pageSizePriceHistory = pageSize;
+                            store.product.pagePriceHistory = page - 1;
+                            modalLoader.setLoading(true);
+                            await store.product.getPriceHistoryByProduct(id);
+                            modalLoader.setLoading(false);
+                          },
+                          pageSize: store.product.pageSizePriceHistory,
+                          total: store.product.totalDataPriceHistory,
+                          current: store.product.pagePriceHistory + 1,
+                          style: { marginBottom: "1rem", marginRight: "1rem" },
+                        }}
+                        dataSource={store.product.dataPriceHistory}
+                        style={{ padding: 0 }}
+                        renderItem={(item) => {
+                          return (
+                              <div>
+                                <List.Item
+                                    key={item.id}
+                                    style={{
+                                      backgroundColor: "#ffffff",
+                                      paddingTop: 0,
+                                      paddingBottom: 0,
+                                      display: "flex",
+                                      flexDirection: "row",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                    }}
+                                >
+                                  <List.Item.Meta
+                                      className={[""].join(" ")}
+                                      //title={item.mark_up_price}
+                                      description={
+                                        <div style={{}}>
+                                          <p>
+                                            <small>
+                                              Markup Price :{" "}
+                                              {new Intl.NumberFormat("id-ID", {
+                                                style: "currency",
+                                                currency: "IDR",
+                                              }).format(item.mark_up_price)}
+                                            </small>{" "}
+                                            <br />
+                                            <small>
+                                              Price:{" "}
+                                              {new Intl.NumberFormat("id-ID", {
+                                                style: "currency",
+                                                currency: "IDR",
+                                              }).format(item.price)}
+                                            </small>{" "}
+                                            <br />
+                                            <small>
+                                              {" "}
+                                              Tanggal Berlaku :
+                                              {item.startDate
+                                                  ? format(
+                                                      parseISO(item.startDate),
+                                                      "dd MMMM yyyy"
+                                                  )
+                                                  : "-"}
+                                            </small>{" "}
+                                            <br />
+                                            <small>
+                                              Tanggal Berakhir :{" "}
+                                              {item.endDate
+                                                  ? format(
+                                                      parseISO(item.endDate),
+                                                      "dd MMMM yyyy"
+                                                  )
+                                                  : "Sampai Sekarang"}
+                                            </small>{" "}
+                                            <br />
+                                          </p>
+                                          <p></p>
+                                        </div>
+                                      }
+                                  />
+                                  {/* <div style={{ marginRight: 16 }}>
                             <p
                               style={{
                                 fontSize: 9,
@@ -276,18 +286,18 @@ export const ProductDetail = observer(() => {
                               </Tag>
                             </p>
                           </div> */}
-                        </List.Item>
-                        <Divider plain style={{ margin: 0 }} />
-                      </div>
-                    );
-                  }}
-                />
-              )}
-            </div>
-          </Col>
-        </Row>
-        <div />
-      </Card>
-    </div>
+                                </List.Item>
+                                <Divider plain style={{ margin: 0 }} />
+                              </div>
+                          );
+                        }}
+                    />
+                )}
+              </div>
+            </Col>
+          </Row>
+          <div />
+        </Card>
+      </div>
   );
 });