From cd3d61d5f5a61cb7fe9dc05f315f99d0a1c34828 Mon Sep 17 00:00:00 2001
From: rahman <ronierahman17@gmail.com>
Date: Tue, 24 May 2022 00:59:01 +0700
Subject: [PATCH] feat: add column partner fee in detail product role admin

---
 src/component/ProductComponent.js  |   2 +
 src/pages/Product/ProductDetail.js | 379 +++++++++++++++--------------
 2 files changed, 196 insertions(+), 185 deletions(-)

diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index a371bf5..550485b 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -136,6 +136,7 @@ export const ProductComponent = observer((props) => {
     {
       title: "Tindakan",
       key: "action",
+      fixed: 'right',
       render: (text, record) => (
         <Button
           onClick={async () => {
@@ -303,6 +304,7 @@ export const ProductComponent = observer((props) => {
             textAlign: "center",
             width: store.ui.mediaQuery.isMobile ? 250 : "",
           }}
+          scroll={role === "Admin Partner" ? false : { x: 1300 }}
           columns={columns}
           dataSource={
             store.authentication.userData.role === "Admin Partner"
diff --git a/src/pages/Product/ProductDetail.js b/src/pages/Product/ProductDetail.js
index caa71a8..17fceea 100644
--- a/src/pages/Product/ProductDetail.js
+++ b/src/pages/Product/ProductDetail.js
@@ -57,30 +57,39 @@ 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),
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    }, {
+      title: "Partner fee",
+      dataIndex: "partner_fee",
+      key: "partner_fee",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
       title: "Tanggal Berlaku",
@@ -88,7 +97,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>
         );
       },
     },
@@ -98,174 +107,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" };
+    ? {
+      display: "flex",
+      justifyContent: "center",
+    }
+    : { fontSize: "0.75rem" };
   const styleSaldoContent = store.ui.mediaQuery.isDesktop
-      ? {
-        fontSize: "1.25rem",
-        display: "flex",
-        justifyContent: "center",
-      }
-      : null;
+    ? {
+      fontSize: "1.25rem",
+      display: "flex",
+      justifyContent: "center",
+    }
+    : 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,
@@ -286,18 +295,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>
   );
 });