diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js
index 70fc4f1..62ce17b 100644
--- a/src/component/CategoryComponent.js
+++ b/src/component/CategoryComponent.js
@@ -195,9 +195,11 @@ export const CategoryComponent = observer((props) => {
                         margin: 0,
                       }}
                     >
-                      <Button onClick={() => handleEditButton(item)}>
-                        Edit
-                      </Button>
+                      {store.authentication.userData.role === "Admin" && (
+                        <Button onClick={() => handleEditButton(item)}>
+                          Edit
+                        </Button>
+                      )}
                     </p>
                   </div>
                 </List.Item>
diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index df8ddf6..e6d68dd 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -213,7 +213,12 @@ export const ProductComponent = observer((props) => {
     store.product.filterSubCategory = null;
     setFilterSupplier([]);
     setFilterSubCategories([]);
-    await store.product.getData();
+    store.authentication.userData.role === "Admin Partner"
+      ? await store.product.getProductPartner(
+          store.authentication.profileData.id
+        )
+      : await store.product.getData();
+    //await store.product.getData();
     store.product.visibleModalFilterProduct = false;
   };
 
@@ -221,17 +226,24 @@ export const ProductComponent = observer((props) => {
     store.product.filterSubCategory = null;
     store.product.filterSupplier = null;
     store.product.visibleModalFilterProduct = false;
-    await store.product.getData();
+    store.authentication.userData.role === "Admin Partner"
+      ? await store.product.getProductPartner(
+          store.authentication.profileData.id
+        )
+      : await store.product.getData();
+    //await store.product.getData();
   };
 
   const handleSubmitFilter = async () => {
     store.product.filterSupplier = filterSupplier;
     store.product.filterSubCategory = filterSubCategories;
     modalLoader.setLoading(true);
-    // store.authentication.userData.role === "Admin Partner"
-    //             ? await store.product.getData()
-    //             : await store.product.getData()
-    await store.product.getData();
+    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);
     store.product.visibleModalFilterProduct = false;
     //store.product.page=1
@@ -273,16 +285,19 @@ export const ProductComponent = observer((props) => {
       {store.ui.mediaQuery.isDesktop && (
         <Table
           style={
-            store.authentication.userData.role === "Admin"
-              ? {
-                  cursor: "pointer",
-                  textAlign: "center",
-                  width: store.ui.mediaQuery.isMobile ? 250 : "",
-                }
-              : {
-                  textAlign: "center",
-                  width: store.ui.mediaQuery.isMobile ? 250 : "",
-                }
+            // store.authentication.userData.role === "Admin"
+            //   ? {
+            {
+              cursor: "pointer",
+              textAlign: "center",
+              width: store.ui.mediaQuery.isMobile ? 250 : "",
+            }
+
+            //   }
+            // : {
+            //     textAlign: "center",
+            //     width: store.ui.mediaQuery.isMobile ? 250 : "",
+            //   }
           }
           columns={columns}
           dataSource={
@@ -290,9 +305,7 @@ export const ProductComponent = observer((props) => {
               ? store.product.dataProductPartner
               : store.product.data
           }
-          onRow={
-            store.authentication.userData.role === "Admin" ? handleClickRow : ""
-          }
+          onRow={handleClickRow}
           pagination={{
             pageSize: store.product.pageSize,
             total:
@@ -322,7 +335,12 @@ export const ProductComponent = observer((props) => {
               store.product.pageSize = pageSize;
               store.product.page = page - 1;
               modalLoader.setLoading(true);
-              await store.product.getData();
+              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.product.pageSize,
@@ -357,6 +375,19 @@ export const ProductComponent = observer((props) => {
                           {/* <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>
@@ -457,8 +488,8 @@ export const ProductComponent = observer((props) => {
             rules={[{ required: true, message: "Please select Status!" }]}
           >
             <Select placeholder="Select Sub Category" allowClear>
-              <Option value="ACTIVE">ACTIVE</Option>
-              <Option value="INACTIVE">INACTIVE</Option>
+              <Option value="ACTIVE">AKTIF</Option>
+              <Option value="INACTIVE">INAKTIF</Option>
             </Select>
           </Form.Item>
           <Form.Item
@@ -482,7 +513,6 @@ export const ProductComponent = observer((props) => {
         visible={store.product.visibleModalFilterProduct}
         title={"Filter"}
         footer={footerLayoutFilter}
-        
         onCancel={async () => {
           // setFilterSupplier([]);
           // setFilterSubCategories([]);
diff --git a/src/component/SubcategoryComponent.js b/src/component/SubcategoryComponent.js
index 1abbf07..5434bcd 100644
--- a/src/component/SubcategoryComponent.js
+++ b/src/component/SubcategoryComponent.js
@@ -68,7 +68,7 @@ export const SubcategoryComponent = observer((props) => {
   ];
 
   if (store.authentication.userData.role === "Customer Service") columns.pop();
-  
+
   const handleCancel = () => {
     setIdData("");
     store.subcategory.visibleModalSubcategory = false;
@@ -150,7 +150,7 @@ export const SubcategoryComponent = observer((props) => {
           itemLayout="horizontal"
           position={"top"}
           pagination={{
-            onChange: async (page,pageSize) => {
+            onChange: async (page, pageSize) => {
               store.subcategory.pageSize = pageSize;
               store.subcategory.page = page - 1;
               modalLoader.setLoading(true);
@@ -200,9 +200,11 @@ export const SubcategoryComponent = observer((props) => {
                         margin: 0,
                       }}
                     >
-                      <Button onClick={() => handleEditButton(item)}>
-                        Edit
-                      </Button>
+                      {store.authentication.userData.role === "Admin" && (
+                        <Button onClick={() => handleEditButton(item)}>
+                          Edit
+                        </Button>
+                      )}
                     </p>
                   </div>
                 </List.Item>
@@ -254,19 +256,19 @@ export const SubcategoryComponent = observer((props) => {
             <Input />
           </Form.Item>
           {/* {!idData && ( */}
-            <Form.Item
-              name="categoryId"
-              label="Categories"
-              rules={[{ required: true, message: "Please input category id!" }]}
-            >
-              <Select placeholder="Select Category" allowClear>
-                {store.category.data.map((item) => (
-                  <Option value={item.id} key={item.id} defaultValue={item.name}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
+          <Form.Item
+            name="categoryId"
+            label="Categories"
+            rules={[{ required: true, message: "Please input category id!" }]}
+          >
+            <Select placeholder="Select Category" allowClear>
+              {store.category.data.map((item) => (
+                <Option value={item.id} key={item.id} defaultValue={item.name}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
           {/* )} */}
         </Form>
       </Modal>
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 642ae26..b5bc83f 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -938,7 +938,7 @@ export const DetailUser = observer(() => {
                               }}
                             >
                               <List.Item.Meta
-                                className={["cariparkir-container"].join(" ")}
+                                className={[""].join(" ")}
                                 title={item.name}
                                 description={
                                   <div style={{}}>
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index d843581..8bb2407 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -448,16 +448,19 @@ export const Membership = observer(() => {
                               <small>Username : {item.username}</small> <br />
                               <small>Role : {item.roles?.name}</small> <br />
                               <small>Saldo : {item.coa?.amount}</small> <br />
-                              <Button
-                                style={{ marginRight: 10, marginTop: 7 }}
-                                onClick={() => {
-                                  setDestination(item?.id);
-                                  console.log(item?.id);
-                                  setIsVisibleTopUpModal(true);
-                                }}
-                              >
-                                <DownloadOutlined /> Top Up Saldo
-                              </Button>
+                              {store.authentication.userData.role ===
+                                "Admin" && (
+                                <Button
+                                  style={{ marginRight: 10, marginTop: 7 }}
+                                  onClick={() => {
+                                    setDestination(item?.id);
+                                    console.log(item?.id);
+                                    setIsVisibleTopUpModal(true);
+                                  }}
+                                >
+                                  <DownloadOutlined /> Top Up Saldo
+                                </Button>
+                              )}
                               <Button
                                 onClick={async () => {
                                   await store.transaction.getDataHistoryTopUp(
diff --git a/src/pages/Product/ProductDetail.js b/src/pages/Product/ProductDetail.js
index de8aa00..6364f74 100644
--- a/src/pages/Product/ProductDetail.js
+++ b/src/pages/Product/ProductDetail.js
@@ -1,5 +1,15 @@
 import React, { useContext, useEffect } from "react";
-import { Card, Col, Row, Table, Typography, Tag } from "antd";
+import {
+  Card,
+  Col,
+  Row,
+  Table,
+  Typography,
+  Tag,
+  List,
+  Button,
+  Divider,
+} from "antd";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -101,7 +111,7 @@ export const ProductDetail = observer(() => {
     : null;
 
   return (
-    <div className={[""].join(" ")}>
+    <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
         <Title strong>Product Detail</Title>
@@ -141,26 +151,138 @@ export const ProductDetail = observer(() => {
               <Title strong level={3}>
                 Product Price History
               </Title>
-              <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.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,
+                                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>
           </Col>
         </Row>