diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 4b0b143..cff586e 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -96,6 +96,20 @@ export const ProductComponent = observer((props) => {
         </Tag>
       ),
     },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+          <Button
+            onClick={async () => {
+              history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+              //console.log(record.id)
+            }}
+            >
+              Detail
+            </Button>
+      ),
+    },
   ];
 
   const deleteData = async (id) => {
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index 0651668..6e2c27a 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -215,12 +215,14 @@ export const DesktopLayout = observer(() => {
                     <span>Payback To</span>
                   </Link>
                 </Menu.Item>
+                {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="payback-from-user">
                   <Link to={LINKS.PAYBACKFROMUSER}>
                     <AlipayOutlined />
                     <span>Payback</span>
                   </Link>
                 </Menu.Item>
+                )}
               </SubMenu>
               {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="profile">
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
new file mode 100644
index 0000000..c1eac3e
--- /dev/null
+++ b/src/pages/Membership/DetailUser.js
@@ -0,0 +1,148 @@
+import React, {useContext, useEffect} from "react";
+import {Button, Card, Col, Row, Table, Typography} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {FilterOutlined} from "@ant-design/icons";
+import {format, parseISO} from "date-fns";
+import {ModalLoaderContext} from "../../utils/modal";
+
+const {Title, Text} = Typography;
+
+export const DetailUser = observer(() => {
+  const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.DETAILUSER,
+      name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([
+        store.authentication.getProfile(),
+        store.transaction.getDataHistoryTransaction(),
+      ]);
+      modalLoader.setLoading(false);
+    })()
+  }, []);
+
+  const columns = [
+    {
+      title: 'Markup Price',
+      dataIndex: 'mark_up_price',
+      key: 'mark_up_price',
+      width: '20%',
+    },
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      width: '50%',
+    },
+    {
+      title: 'Transaction Date',
+      dataIndex: 'created_at',
+      key: 'created_at',
+      render: (text, record) => {
+        return (
+          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+        )
+      },
+    },
+  ]
+
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+    display: "flex",
+    justifyContent: "center"
+  } : {fontSize: "0.75rem"};
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+    fontSize: '1.25rem',
+    display: "flex",
+    justifyContent: "center"
+  } : null;
+
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData}/>
+      <Card>
+        <Title strong>Detail User</Title>
+        <Row style={{marginBottom: 20}}>
+          <Col lg={12} xs={24}>
+            <Row>
+              <Col span={12}>
+                <Text strong>Name</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Role</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Saldo Supplier</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.username}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Saldo System</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.roles?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Status</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.superior?.username}</Text>
+              </Col>
+            </Row>
+          </Col>
+          <Col lg={12} xs={24}>\
+            <Row justify={"center"}>
+              <Col lg={24} xs={12}>
+                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+              </Col>
+              <Col lg={24} xs={12}>
+                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <div>
+              <Title strong level={3}>History User Transaction</Title>
+
+              <Button style={{marginBottom: '1rem'}} onClick={() => {
+                console.log('clicked filter')
+              }}>
+                <FilterOutlined/>
+                Filter
+              </Button>
+              <Table
+                columns={columns}
+                dataSource={store.transaction.dataHistoryTransaction}
+                bordered
+              />
+            </div>
+          </Col>
+        </Row>
+        <div/>
+      </Card>
+    </div>
+  )
+});
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index f241859..8a4cd62 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,16 +1,37 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Divider, Form, Input, List, message, Modal, Row, Select, Space, Table, Tag,} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {DownloadOutlined, ExclamationCircleOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-import {MembershipModal} from "./MembershipModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Form,
+  Input,
+  List,
+  message,
+  Modal,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tag,
+} from "antd";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import {
+  DownloadOutlined,
+  ExclamationCircleOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
+import { MembershipModal } from "./MembershipModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { Link,useHistory } from "react-router-dom";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
-const {Option} = Select;
+const { Search } = Input;
+const { Option } = Select;
 export const Membership = observer(() => {
+  const history = useHistory();
   const [form] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
@@ -117,36 +138,34 @@ export const Membership = observer(() => {
       dataIndex: ["coa", "amount"],
       key: ["coa", "amount"],
       width: "20%",
-      render: (text) => (
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text)
-      )
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
       title: "Saldo di System",
       dataIndex: ["coa_undistribute", "amount"],
       key: ["coa_undistribute", "amount"],
       width: "20%",
-      render: (text) => (
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text)
-      )
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
       title: "Status",
       dataIndex: "isActive",
       key: "isActive",
       render: (text, record) => (
-          <Tag
-              color={record?.isActive === true ? "processing" : "#E3E8EE"}
-              style={{color: "#4F566B"}}
-          >
-            {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
-          </Tag>
+        <Tag
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B" }}
+        >
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+        </Tag>
       ),
     },
     {
@@ -167,7 +186,7 @@ export const Membership = observer(() => {
               setIsVisibleTopUpModal(true);
             }}
           >
-            <DownloadOutlined/> Top Up Saldo
+            <DownloadOutlined /> Top Up Saldo
           </Button>
           <Button
             onClick={() => {
@@ -199,13 +218,14 @@ export const Membership = observer(() => {
           >
             Ganti Password
           </Button>
-          {/* <Button
+          <Button
             onClick={async () => {
-              handleDelete(record.id);
+              history.push(LINKS.DETAILUSER.replace(":id", record.id));
+              //console.log(record.id)
             }}
-          >
-            Delete
-          </Button> */}
+            >
+              Detail
+            </Button>
         </Space>
       ),
     },
@@ -218,7 +238,7 @@ export const Membership = observer(() => {
     },
     {
       route: "/app/membership",
-      name: <span style={{fontWeight: "bold"}}>Membership</span>,
+      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
     },
   ];
 
@@ -264,42 +284,42 @@ export const Membership = observer(() => {
     }
   };
 
-  const handleDelete = (record) => {
-    Modal.confirm({
-      title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined/>,
-      okText: "Yes",
-      okType: "primary",
-      cancelText: "Cancel",
-      async onOk() {
-        try {
-          //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
-          await store.membership.delete(record);
-          message.success("Success Delete Data");
-          await getData();
-        } catch (e) {
-          message.error("Failed Delete Data");
-        }
-      },
-      onCancel() {
-        console.log("Cancel");
-      },
-    });
+  const handleDetail = (record) => {
+    // Modal.confirm({
+    //   title: "Are you sure delete this record?",
+    //   icon: <ExclamationCircleOutlined/>,
+    //   okText: "Yes",
+    //   okType: "primary",
+    //   cancelText: "Cancel",
+    //   async onOk() {
+    //     try {
+    //       //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
+    //       await store.membership.delete(record);
+    //       message.success("Success Delete Data");
+    //       await getData();
+    //     } catch (e) {
+    //       message.error("Failed Delete Data");
+    //     }
+    //   },
+    //   onCancel() {
+    //     console.log("Cancel");
+    //   },
+    // });
   };
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
         <div>
-          <Row style={{marginBottom: 20}}>
+          <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
               {/* <Button>
                 <FilterOutlined />
                 Filter
               </Button> */}
             </Col>
-            <Col span={12} style={{textAlign: "right"}}>
+            <Col span={12} style={{ textAlign: "right" }}>
               <Search
                 placeholder="input search text"
                 style={{
@@ -314,7 +334,7 @@ export const Membership = observer(() => {
                   setVisibleModal(true);
                 }}
               >
-                <PlusSquareOutlined/> New
+                <PlusSquareOutlined /> New
               </Button>
             </Col>
           </Row>
@@ -358,10 +378,10 @@ export const Membership = observer(() => {
                 pageSize: store.membership.pageSize,
                 total: store.membership.total_data,
                 current: store.membership.page,
-                style: {marginBottom: "1rem", marginRight: "1rem"},
+                style: { marginBottom: "1rem", marginRight: "1rem" },
               }}
               dataSource={store.membership.data}
-              style={{padding: 0}}
+              style={{ padding: 0 }}
               renderItem={(item) => {
                 return (
                   <div>
@@ -383,12 +403,12 @@ export const Membership = observer(() => {
                         description={
                           <div style={{}}>
                             <p>
-                              <small>Username : {item.username}</small> <br/>
+                              <small>Username : {item.username}</small> <br />
                             </p>
                           </div>
                         }
                       />
-                      <div style={{marginRight: 16}}>
+                      <div style={{ marginRight: 16 }}>
                         <p
                           style={{
                             fontSize: 9,
@@ -399,7 +419,7 @@ export const Membership = observer(() => {
                         </p>
                       </div>
                     </List.Item>
-                    <Divider plain style={{margin: 0}}/>
+                    <Divider plain style={{ margin: 0 }} />
                   </div>
                 );
               }}
@@ -433,7 +453,7 @@ export const Membership = observer(() => {
           <Form.Item
             name="supplier"
             label="Supplier"
-            rules={[{required: true, message: "Please input supplier!"}]}
+            rules={[{ required: true, message: "Please input supplier!" }]}
           >
             <Select placeholder="Select Code Supplier" allowClear>
               {store.supplier.data.map((item) => (
@@ -446,9 +466,9 @@ export const Membership = observer(() => {
           <Form.Item
             name="amount"
             label="Amount"
-            rules={[{required: true, message: "Please input amount!"}]}
+            rules={[{ required: true, message: "Please input amount!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
         </Form>
       </Modal>
diff --git a/src/pages/Product/DetailProduct.js b/src/pages/Product/DetailProduct.js
new file mode 100644
index 0000000..40640e4
--- /dev/null
+++ b/src/pages/Product/DetailProduct.js
@@ -0,0 +1,148 @@
+import React, {useContext, useEffect} from "react";
+import {Button, Card, Col, Row, Table, Typography} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {FilterOutlined} from "@ant-design/icons";
+import {format, parseISO} from "date-fns";
+import {ModalLoaderContext} from "../../utils/modal";
+
+const {Title, Text} = Typography;
+
+export const DetailProduct = observer(() => {
+  const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.DETAILPRODUCT,
+      name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([
+        store.authentication.getProfile(),
+        store.transaction.getDataHistoryTransaction(),
+      ]);
+      modalLoader.setLoading(false);
+    })()
+  }, []);
+
+  const columns = [
+    {
+      title: 'Markup Price',
+      dataIndex: 'mark_up_price',
+      key: 'mark_up_price',
+      width: '20%',
+    },
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      width: '50%',
+    },
+    {
+      title: 'Transaction Date',
+      dataIndex: 'created_at',
+      key: 'created_at',
+      render: (text, record) => {
+        return (
+          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+        )
+      },
+    },
+  ]
+
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+    display: "flex",
+    justifyContent: "center"
+  } : {fontSize: "0.75rem"};
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+    fontSize: '1.25rem',
+    display: "flex",
+    justifyContent: "center"
+  } : null;
+
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData}/>
+      <Card>
+        <Title strong>Detail Product</Title>
+        <Row style={{marginBottom: 20}}>
+          <Col lg={12} xs={24}>
+            <Row>
+              <Col span={12}>
+                <Text strong>Kode</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Produk</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Harga Beli</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.username}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Harga Jual</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.roles?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Status</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.superior?.username}</Text>
+              </Col>
+            </Row>
+          </Col>
+          <Col lg={12} xs={24}>
+            <Row justify={"center"}>
+              <Col lg={24} xs={12}>
+                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+              </Col>
+              <Col lg={24} xs={12}>
+                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <div>
+              <Title strong level={3}>History User Transaction</Title>
+
+              <Button style={{marginBottom: '1rem'}} onClick={() => {
+                console.log('clicked filter')
+              }}>
+                <FilterOutlined/>
+                Filter
+              </Button>
+              <Table
+                columns={columns}
+                dataSource={store.transaction.dataHistoryTransaction}
+                bordered
+              />
+            </div>
+          </Col>
+        </Row>
+        <div/>
+      </Card>
+    </div>
+  )
+});
diff --git a/src/routes/app.js b/src/routes/app.js
index 1667fd2..04bc5ab 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -2,7 +2,9 @@ import {Redirect, Route, Switch} from "react-router-dom";
 import {Home} from "../pages/Home/Home";
 import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
+import {DetailUser} from "../pages/Membership/DetailUser";
 import {Product} from "../pages/Product/Product";
+import {DetailProduct} from "../pages/Product/DetailProduct";
 import {Transaction} from "../pages/Transaction/Transaction";
 import {Profile} from "../pages/Profile/Profile";
 import {Commission} from "../pages/Config/Commission";
@@ -27,7 +29,8 @@ export const LINKS = {
     PAYBACK: "/app/payback",
     PAYBACKFROMUSER: "/app/payback-from-user",
     SUBCATEGORY: "/app/subcategory",
-
+    DETAILUSER: "/app/detail-user",
+    DETAILPRODUCT: "/app/detail-product",
 };
 
 export const AppRoute = () => {
@@ -35,6 +38,12 @@ export const AppRoute = () => {
         <Route path={LINKS.HOME}>
             <Home/>
         </Route>
+        <Route path={LINKS.DETAILUSER}>
+            <DetailUser/>
+        </Route>
+        <Route path={LINKS.DETAILPRODUCT}>
+            <DetailProduct/>
+        </Route>
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>