diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js
index 627881e..76b164a 100644
--- a/src/component/CategoryComponent.js
+++ b/src/component/CategoryComponent.js
@@ -175,7 +175,7 @@ export const CategoryComponent = observer((props) => {
                   }}
                 >
                   <List.Item.Meta
-                    className={["cariparkir-container"].join(" ")}
+                    className={[""].join(" ")}
                     title={item.code}
                     description={
                       <div style={{}}>
diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index afeec2e..a9ca3c1 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -265,7 +265,7 @@ export const PartnerComponent = observer((props) => {
                   }}
                 >
                   <List.Item.Meta
-                    className={["cariparkir-container"].join(" ")}
+                    className={[""].join(" ")}
                     title={item.code}
                     description={
                       <div style={{}}>
@@ -275,7 +275,7 @@ export const PartnerComponent = observer((props) => {
                             <small>Npwp : {item.npwp}</small> <br />
                             <small>Address : {item.address}</small>
                           </div>
-                          <Space size="middle">
+                          <Space size="small">
                             <Button
                               type={
                                 item?.status === true ? "danger" : "primary"
@@ -359,7 +359,7 @@ export const PartnerComponent = observer((props) => {
               rules={[
                 idData
                   ? { required: false }
-                  : { required: true, message: "Please input password name!" },
+                  : { required: true, message: "Please input name!" },
               ]}
             >
               <Input />
diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index ec75eb0..c654360 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -343,7 +343,7 @@ export const ProductComponent = observer((props) => {
                   }}
                 >
                   <List.Item.Meta
-                    className={["cariparkir-container"].join(" ")}
+                    className={[""].join(" ")}
                     title={item.product_code}
                     description={
                       <div style={{}}>
diff --git a/src/component/SubcategoryComponent.js b/src/component/SubcategoryComponent.js
index e7ae6eb..7074c20 100644
--- a/src/component/SubcategoryComponent.js
+++ b/src/component/SubcategoryComponent.js
@@ -178,7 +178,7 @@ export const SubcategoryComponent = observer((props) => {
                   }}
                 >
                   <List.Item.Meta
-                    className={["cariparkir-container"].join(" ")}
+                    className={[""].join(" ")}
                     title={item.code}
                     description={
                       <div style={{}}>
diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index 194b3a8..c193caa 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -281,7 +281,7 @@ export const SupplierComponent = observer((props) => {
                   }}
                 >
                   <List.Item.Meta
-                    className={["cariparkir-container"].join(" ")}
+                    className={[""].join(" ")}
                     title={item.code}
                     description={
                       <div style={{}}>
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index a42cd97..4d41f87 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -48,56 +48,7 @@ export const Home = observer(() => {
       ? await store.membership.getData()
       : await store.membership.getDataBySuperior();
   };
-  const columns = [
-    {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
-      render: (text, record) => record?.name ?? record?.username,
-    },
-    {
-      title: "Role",
-      dataIndex: "roleName",
-      key: "role",
-    },
-    {
-      title: "Saldo",
-      dataIndex: ["coa", "amount"],
-      key: ["coa", "amount"],
-      width: "20%",
-      render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
-    },
-    // {
-    //   title: "Action",
-    //   key: "action",
-    //   render: (text, record) => (
-    //     <Space size="middle">
-    //       <Button
-    //         onClick={() => {
-    //           setDestination(record?.id);
-    //           console.log(record?.id);
-    //           setIsVisibleTopUpModal(true);
-    //         }}
-    //       >
-    //         <DownloadOutlined /> Top Up Saldo
-    //       </Button>
-    //       <Button
-    //         onClick={async () => {
-    //           await store.transaction.getDataHistoryTopUp(record.id);
-    //           history.push(LINKS.USER_DETAIL.replace(":id", record.id));
-    //           console.log(record.id);
-    //         }}
-    //       >
-    //         Detail
-    //       </Button>
-    //     </Space>
-    //   ),
-    // },
-  ];
+  
   return (
     <div>
       {store.ui.mediaQuery.isDesktop &&
@@ -328,28 +279,6 @@ export const Home = observer(() => {
                 </PageHeader>
               </Row>
             </Card>
-            {/*<Card*/}
-            {/*  className={"shadow"}*/}
-            {/*  hoverable*/}
-            {/*  style={{*/}
-            {/*    marginLeft: 20,*/}
-            {/*    height: 200,*/}
-            {/*    marginBottom: 10,*/}
-            {/*    borderColor: "salmon",*/}
-            {/*    width: "30%",*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <Row>*/}
-            {/*    <PageHeader title={<span>Total Keuntungan B2C</span>}>*/}
-            {/*      <span>*/}
-            {/*        {new Intl.NumberFormat("id-ID", {*/}
-            {/*          style: "currency",*/}
-            {/*          currency: "IDR",*/}
-            {/*        }).format(store.authentication.profileData?.wallet || 0)}*/}
-            {/*      </span>*/}
-            {/*    </PageHeader>*/}
-            {/*  </Row>*/}
-            {/*</Card>*/}
           </Row>
         )}
         {store.ui.mediaQuery.isMobile &&
@@ -497,28 +426,6 @@ export const Home = observer(() => {
                 </Row>
               </Row>
             </Card>
-            {/*<Card*/}
-            {/*  className={"shadow"}*/}
-            {/*  hoverable*/}
-            {/*  style={{*/}
-            {/*    marginLeft: 20,*/}
-            {/*    height: 200,*/}
-            {/*    marginBottom: 10,*/}
-            {/*    borderColor: "salmon",*/}
-            {/*    width: "30%",*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <Row>*/}
-            {/*    <PageHeader title={<span>Total Keuntungan B2C</span>}>*/}
-            {/*      <span>*/}
-            {/*        {new Intl.NumberFormat("id-ID", {*/}
-            {/*          style: "currency",*/}
-            {/*          currency: "IDR",*/}
-            {/*        }).format(store.authentication.profileData?.wallet || 0)}*/}
-            {/*      </span>*/}
-            {/*    </PageHeader>*/}
-            {/*  </Row>*/}
-            {/*</Card>*/}
           </Row>
         )}
       {store.ui.mediaQuery.isMobile &&
@@ -579,241 +486,8 @@ export const Home = observer(() => {
                 </PageHeader>
               </Row>
             </Card>
-            {/*<Card*/}
-            {/*  className={"shadow"}*/}
-            {/*  hoverable*/}
-            {/*  style={{*/}
-            {/*    marginLeft: 20,*/}
-            {/*    height: 200,*/}
-            {/*    marginBottom: 10,*/}
-            {/*    borderColor: "salmon",*/}
-            {/*    width: "30%",*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <Row>*/}
-            {/*    <PageHeader title={<span>Total Keuntungan B2C</span>}>*/}
-            {/*      <span>*/}
-            {/*        {new Intl.NumberFormat("id-ID", {*/}
-            {/*          style: "currency",*/}
-            {/*          currency: "IDR",*/}
-            {/*        }).format(store.authentication.profileData?.wallet || 0)}*/}
-            {/*      </span>*/}
-            {/*    </PageHeader>*/}
-            {/*  </Row>*/}
-            {/*</Card>*/}
           </Row>
         )}
-      {/*{store.authentication.userData.role === "Admin" &&*/}
-      {/*  store.ui.mediaQuery.isDesktop && (*/}
-      {/*    <Row style={{ marginLeft: 50, marginTop: 10 }}>*/}
-      {/*      <Card*/}
-      {/*        className={"shadow"}*/}
-      {/*        title="List Transaksi B2B"*/}
-      {/*        style={{*/}
-      {/*          marginBottom: 30,*/}
-      {/*          marginRight: 20,*/}
-      {/*          borderColor: "salmon",*/}
-      {/*          width: "47%",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <Table*/}
-      {/*          key="1"*/}
-      {/*          hasEmpty*/}
-      {/*          size="large"*/}
-      {/*          columns={columns}*/}
-      {/*          dataSource={store.membership.data}*/}
-      {/*          bordered*/}
-      {/*          pagination={{*/}
-      {/*            pageSize: store.membership.pageSize,*/}
-      {/*            total: store.membership.totalData,*/}
-      {/*            current: store.membership.page + 1,*/}
-      {/*            showSizeChanger: true,*/}
-      {/*            simple: false,*/}
-      {/*          }}*/}
-      {/*          onChange={async (page) => {*/}
-      {/*            let pageNumber = page.current;*/}
-      {/*            store.membership.pageSize = page.pageSize;*/}
-      {/*            store.membership.page = pageNumber - 1;*/}
-      {/*            modalLoader.setLoading(true);*/}
-      {/*            await getData();*/}
-      {/*            modalLoader.setLoading(false);*/}
-      {/*          }}*/}
-      {/*        />*/}
-      {/*      </Card>*/}
-      {/*      <Card*/}
-      {/*        className={"shadow"}*/}
-      {/*        title="List Transaksi B2C"*/}
-      {/*        style={{*/}
-      {/*          marginBottom: 30,*/}
-      {/*          borderColor: "salmon",*/}
-      {/*          width: "47%",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <Table*/}
-      {/*          key="1"*/}
-      {/*          hasEmpty*/}
-      {/*          size="large"*/}
-      {/*          columns={columns}*/}
-      {/*          dataSource={store.membership.data}*/}
-      {/*          bordered*/}
-      {/*          pagination={{*/}
-      {/*            pageSize: store.membership.pageSize,*/}
-      {/*            total: store.membership.totalData,*/}
-      {/*            current: store.membership.page + 1,*/}
-      {/*            showSizeChanger: true,*/}
-      {/*            simple: false,*/}
-      {/*          }}*/}
-      {/*          onChange={async (page) => {*/}
-      {/*            let pageNumber = page.current;*/}
-      {/*            store.membership.pageSize = page.pageSize;*/}
-      {/*            store.membership.page = pageNumber - 1;*/}
-      {/*            modalLoader.setLoading(true);*/}
-      {/*            await getData();*/}
-      {/*            modalLoader.setLoading(false);*/}
-      {/*          }}*/}
-      {/*        />*/}
-      {/*      </Card>*/}
-      {/*    </Row>*/}
-      {/*  )}*/}
-      {/*{store.ui.mediaQuery.isMobile && (*/}
-      {/*  <div style={{ marginTop: 10 }}>*/}
-      {/*    <Card*/}
-      {/*      className={"shadow"}*/}
-      {/*      hoverable*/}
-      {/*      style={{*/}
-      {/*        marginLeft: 20,*/}
-      {/*        height: 200,*/}
-      {/*        marginBottom: 10,*/}
-      {/*        marginRight: 20,*/}
-      {/*        borderColor: "salmon",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <Row>*/}
-      {/*        <BarChartOutlined style={{ fontSize: 25,marginRight:80 }} />*/}
-      {/*        <PageHeader title={<span>Total Transaksi</span>}>*/}
-      {/*          <p>*/}
-      {/*            <h4>{store.transaction.dataTransaction} Transaksi</h4>*/}
-      {/*          </p>*/}
-      {/*        </PageHeader>*/}
-      {/*      </Row>*/}
-      {/*    </Card>*/}
-      {/*    <Card*/}
-      {/*      className={"shadow"}*/}
-      {/*      hoverable*/}
-      {/*      style={{*/}
-      {/*        marginLeft: 20,*/}
-      {/*        height: 200,*/}
-      {/*        marginBottom: 10,*/}
-      {/*        marginRight: 20,*/}
-      {/*        borderColor: "salmon",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <Row>*/}
-      {/*        <DropboxOutlined style={{ fontSize: 25 }} />*/}
-      {/*        <PageHeader title={<span>Total Keuntungan B2B</span>}>*/}
-      {/*          <span>*/}
-      {/*            {new Intl.NumberFormat("id-ID", {*/}
-      {/*              style: "currency",*/}
-      {/*              currency: "IDR",*/}
-      {/*            }).format(store.authentication.profileData?.wallet || 0)}*/}
-      {/*          </span>*/}
-      {/*        </PageHeader>*/}
-      {/*      </Row>*/}
-      {/*    </Card>*/}
-      {/*    <Card*/}
-      {/*      className={"shadow"}*/}
-      {/*      hoverable*/}
-      {/*      style={{*/}
-      {/*        marginLeft: 20,*/}
-      {/*        height: 200,*/}
-      {/*        marginBottom: 10,*/}
-      {/*        marginRight: 20,*/}
-      {/*        borderColor: "salmon",*/}
-      {/*      }}*/}
-      {/*    >*/}
-      {/*      <Row>*/}
-      {/*        <DollarCircleOutlined style={{ fontSize: 25 }} />*/}
-      {/*        <PageHeader title={<span>Total Keuntungan B2C</span>}>*/}
-      {/*          <span>*/}
-      {/*            {new Intl.NumberFormat("id-ID", {*/}
-      {/*              style: "currency",*/}
-      {/*              currency: "IDR",*/}
-      {/*            }).format(store.authentication.profileData?.wallet || 0)}*/}
-      {/*          </span>*/}
-      {/*        </PageHeader>*/}
-      {/*      </Row>*/}
-      {/*    </Card>*/}
-      {/*  </div>*/}
-      {/*)}*/}
-      {/*{store.authentication.userData.role === "Admin" &&*/}
-      {/*  store.ui.mediaQuery.isMobile && (*/}
-      {/*    <Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}>*/}
-      {/*      <Card*/}
-      {/*        className={"shadow"}*/}
-      {/*        title="List Transaksi B2B"*/}
-      {/*        style={{*/}
-      {/*          marginBottom: 10,*/}
-      {/*          borderColor: "salmon",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <Table*/}
-      {/*          key="1"*/}
-      {/*          hasEmpty*/}
-      {/*          size="small"*/}
-      {/*          columns={columns}*/}
-      {/*          dataSource={store.membership.data}*/}
-      {/*          bordered*/}
-      {/*          pagination={{*/}
-      {/*            pageSize: store.membership.pageSize,*/}
-      {/*            total: store.membership.totalData,*/}
-      {/*            current: store.membership.page + 1,*/}
-      {/*            showSizeChanger: true,*/}
-      {/*            simple: false,*/}
-      {/*          }}*/}
-      {/*          onChange={async (page) => {*/}
-      {/*            let pageNumber = page.current;*/}
-      {/*            store.membership.pageSize = page.pageSize;*/}
-      {/*            store.membership.page = pageNumber - 1;*/}
-      {/*            modalLoader.setLoading(true);*/}
-      {/*            await getData();*/}
-      {/*            modalLoader.setLoading(false);*/}
-      {/*          }}*/}
-      {/*        />*/}
-      {/*      </Card>*/}
-      {/*      <Card*/}
-      {/*        className={"shadow"}*/}
-      {/*        title="List Transaksi B2C"*/}
-      {/*        style={{*/}
-      {/*          marginBottom: 30,*/}
-      {/*          borderColor: "salmon",*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <Table*/}
-      {/*          key="1"*/}
-      {/*          hasEmpty*/}
-      {/*          size="small"*/}
-      {/*          columns={columns}*/}
-      {/*          dataSource={store.membership.data}*/}
-      {/*          bordered*/}
-      {/*          pagination={{*/}
-      {/*            pageSize: store.membership.pageSize,*/}
-      {/*            total: store.membership.totalData,*/}
-      {/*            current: store.membership.page + 1,*/}
-      {/*            showSizeChanger: true,*/}
-      {/*            simple: false,*/}
-      {/*          }}*/}
-      {/*          onChange={async (page) => {*/}
-      {/*            let pageNumber = page.current;*/}
-      {/*            store.membership.pageSize = page.pageSize;*/}
-      {/*            store.membership.page = pageNumber - 1;*/}
-      {/*            modalLoader.setLoading(true);*/}
-      {/*            await getData();*/}
-      {/*            modalLoader.setLoading(false);*/}
-      {/*          }}*/}
-      {/*        />*/}
-      {/*      </Card>*/}
-      {/*    </Row>*/}
-      {/*  )}*/}
     </div>
   );
 });
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index aff0513..749a86b 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -280,7 +280,7 @@ export const DetailUser = observer(() => {
     "detail gambar"
   );
   return (
-    <div className={["ppob-container"].join(" ")}>
+    <div className={[""].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
         <Row style={{ marginBottom: 10 }}>
@@ -337,6 +337,9 @@ export const DetailUser = observer(() => {
                     console.log(
                       store.membership.dataDetail.userDetail.image_identity
                     );
+                    console.log(
+                      store.membership.dataDetail.userDetail.image_store,"ini store"
+                    );
                     console.log(store.membership.dataDetail.username);
                     setVisibleModal(true);
                   }}
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index d6fd602..b708b47 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -442,7 +442,7 @@ export const Membership = observer(() => {
                               <small>Role : {item.roles?.name}</small> <br />
                               <small>Saldo : {item.coa?.amount}</small> <br />
                               <Button
-                                style={{ marginRight: 10 }}
+                                style={{ marginRight: 10,marginTop:7 }}
                                 onClick={() => {
                                   setDestination(item?.id);
                                   console.log(item?.id);
diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index 6595ee5..f51c11b 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -15,7 +15,6 @@ import { useStore } from "../../utils/useStore";
 import { appConfig } from "../../config/app";
 import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
 
-const { Title, Text } = Typography;
 export const MembershipModal = ({
   visible,
   onCreate,
diff --git a/src/pages/Membership/Picture.js b/src/pages/Membership/Picture.js
deleted file mode 100644
index c959da7..0000000
--- a/src/pages/Membership/Picture.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from 'react';
-import { Image, Modal, Upload, message } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
-import { http } from "../utils/http";
-
-function getBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
-  });
-}
-
-export class PicturesWall extends React.Component {
-  state = {
-    previewVisible: false,
-    previewImage: '',
-    previewTitle: '',
-    fileList: [],
-  };
-
-  handleCancel = () => this.setState({ previewVisible: false });
-
-  handlePreview = async file => {
-    if (!file.url && !file.preview) {
-      file.preview = await getBase64(file.originFileObj);
-    }
-
-    this.setState({
-      previewImage: file.url || file.preview,
-      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
-      previewVisible: true,
-    });
-  };
-
-  handlePreviewCancel = () => {
-    this.setState({
-      previewVisible: false,
-    });
-  };
-
-  handleChange = ({ fileList }, info) => {
-
-    // if (this.props.maxUpload) {
-    //   if (fileList.length > this.props.maxUpload) {
-    //     fileList.splice(0, 1)
-    //   }
-    // }
-
-    // if (info.file.status !== 'uploading') {
-    //   console.log(info.file, info.fileList);
-    // }
-    // if (info.file.status === 'done') {
-    //   message.success(`${info.file.name} file uploaded successfully`);
-    // } else if (info.file.status === 'error') {
-    //   message.error(`${info.file.name} file upload failed.`);
-    // }
-
-    this.setState({ fileList })
-  };
-
-  render() {
-    const { previewVisible, previewImage, fileList, previewTitle, handlePreviewCancel } = this.state;
-    const uploadButton = (
-      <div>
-        <PlusOutlined />
-        <div style={{ marginTop: 8 }}>Upload</div>
-      </div>
-    );
-
-    return (
-      <>
-        <Upload
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          listType="picture-card"
-          fileList={fileList}
-          accept={'.png, .jpg, .jpeg, .PNG, .JPG, .JPEG'}
-          onPreview={this.handlePreview}
-          onChange={this.handleChange}
-          beforeUpload={(file) => {
-            console.log({ file })
-            http.uploadAntd({
-              file,
-              onError() {
-
-              },
-              onProgress(event) {
-                console.log({ event })
-              },
-              onSuccess: (res) => {
-                if (this.props.onUpload) {
-                  const { fileList } = this.state
-                  const index = fileList.findIndex(d => d.uid === file.uid)
-
-                  if (fileList.length > this.props.maxUpload) {
-                    this.setState({
-                      fileList: []
-                    }) && this.props.onUpload()
-                    message.error('Upload foto tidak boleh melebihi batas maksimal!');
-                  } else {
-                    fileList[index].path = res.body.path
-                    this.setState({
-                      ...fileList
-                    })
-                    this.props.onUpload(fileList)
-
-                  }
-                }
-              }
-            })
-            return false;
-          }}
-          {...(this.props.uploadProps || {})}
-        >
-          {/* {fileList.length > this.props.maxUpload ?
-            this.setState({
-              fileList: []
-            }) && this.props.onUpload() && null
-            :
-            ''} */}
-          {fileList.length >= this.props.maxUpload ? '' : uploadButton}
-        </Upload>
-
-        <Modal
-          visible={previewVisible}
-          title={previewTitle}
-          footer={null}
-          onCancel={this.handleCancel}
-        >
-          <Image
-            onClick={this.handleCancel}
-            src={previewImage}
-          />
-        </Modal>
-      </>
-    );
-  }
-}
-
-export default PicturesWall;
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index 7575b04..167e9ca 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -366,7 +366,7 @@ export const Payback = observer(() => {
                       }}
                     >
                       <List.Item.Meta
-                        className={["cariparkir-container"].join(" ")}
+                        className={[""].join(" ")}
                         title={item.userData_name}
                         description={
                           <div style={{}}>
diff --git a/src/pages/Payback/PaybackCreated.js b/src/pages/Payback/PaybackCreated.js
index bdc2aa8..a4ef6cf 100644
--- a/src/pages/Payback/PaybackCreated.js
+++ b/src/pages/Payback/PaybackCreated.js
@@ -304,11 +304,39 @@ export const PaybackCreated = observer(() => {
                       }}
                     >
                       <List.Item.Meta
-                        className={["cariparkir-container"].join(" ")}
+                        className={[""].join(" ")}
                         title={item.name}
                         description={
-                          <div style={{}}>
+                          <div style={{marginBottom:10}}>
                             <small>Amount: {item.amount}</small>
+                            <br/>
+                            <div style={{marginTop:5}}>
+                            <small>Status  : </small>
+                            <Tag
+                              color={
+                                item.status === 0
+                                  ? "purple"
+                                  : item.status === 1
+                                  ? "blue"
+                                  : item.status === 2
+                                  ? "warning"
+                                  : item.status === 3
+                                  ? "success"
+                                  : "red"
+                              }
+                            >
+                              {item.status === 0
+                                ? "Pending"
+                                : item.status === 1
+                                ? "Success"
+                                : item.status === 2
+                                ? "Failed"
+                                : item.status === 3
+                                ? "Approved"
+                                : "Rejected"}
+                            </Tag>
+                            </div>
+                            
                           </div>
                         }
                       />
diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js
index ca64fd7..68fd2cd 100644
--- a/src/pages/Product/Category.js
+++ b/src/pages/Product/Category.js
@@ -46,7 +46,7 @@ export const Category = observer(() => {
   ];
 
   return (
-    <div className={["ppob-container"].join(" ")}>
+    <div className={[""].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
         <Row style={{ marginBottom: 20 }}>
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index d9bb8d5..4421368 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -152,7 +152,7 @@ export const Product = observer(() => {
   };
 
   return (
-      <div className={["ppob-container"].join(" ")}>
+      <div className={[""].join(" ")}>
         <BreadcumbComponent data={routeData}/>
         <Card>
               <div>
diff --git a/src/pages/Product/ProductDetail.js b/src/pages/Product/ProductDetail.js
index 0d6e884..22cb5f9 100644
--- a/src/pages/Product/ProductDetail.js
+++ b/src/pages/Product/ProductDetail.js
@@ -1,18 +1,18 @@
-import React, {useContext, useEffect} from "react";
-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 {format, parseISO} from "date-fns";
-import {ModalLoaderContext} from "../../utils/modal";
-import {useParams} from "react-router-dom";
+import React, { useContext, useEffect } from "react";
+import { Card, Col, Row, Table, Typography, Tag } from "antd";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { format, parseISO } from "date-fns";
+import { ModalLoaderContext } from "../../utils/modal";
+import { useParams } from "react-router-dom";
 
-const {Title, Text} = Typography;
+const { Title, Text } = Typography;
 
 export const ProductDetail = observer(() => {
   const store = useStore();
-  const {id} = useParams();
+  const { id } = useParams();
   const modalLoader = useContext(ModalLoaderContext);
 
   const routeData = [
@@ -25,8 +25,8 @@ export const ProductDetail = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Produk</span>,
     },
     {
-      route: LINKS.PRODUCT_DETAIL.replace(':id', `${id}`),
-      name: <span style={{fontWeight: "bold"}}>Detail Produk</span>,
+      route: LINKS.PRODUCT_DETAIL.replace(":id", `${id}`),
+      name: <span style={{ fontWeight: "bold" }}>Detail Produk</span>,
     },
   ];
 
@@ -68,7 +68,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>
         );
       },
     },
@@ -78,7 +78,9 @@ 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>
         );
       },
     },
@@ -99,7 +101,7 @@ export const ProductDetail = observer(() => {
     : null;
 
   return (
-    <div className={["ppob-container"].join(" ")}>
+    <div className={[""].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
         <Title strong>Product Detail</Title>
@@ -157,24 +159,24 @@ export const ProductDetail = observer(() => {
                 Filter
               </Button> */}
               <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);
-                  }}
+                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);
+                }}
               />
             </div>
           </Col>