diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 990b7d8..5490a1d 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -1,4 +1,4 @@
-import React, {useContext, useState} from "react";
+import React, { useContext, useState } from "react";
 import {
   Button,
   Col,
@@ -15,19 +15,19 @@ import {
   Tag,
   Typography,
 } from "antd";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
-import {ModalLoaderContext} from "../utils/modal";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { ModalLoaderContext } from "../utils/modal";
 
-const {Title, Text} = Typography;
+const { Title, Text } = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const {Option} = Select;
+  const { Option } = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
   const [filterSupplier, setFilterSupplier] = useState([]);
@@ -92,6 +92,11 @@ export const ProductComponent = observer((props) => {
     //         </Tag>
     //     ),
     // },
+    {
+      title: "Supplier",
+      dataIndex: "supplier",
+      key: "supplier",
+    },
     {
       title: "Tersedia",
       dataIndex: "tersedia",
@@ -120,7 +125,7 @@ export const ProductComponent = observer((props) => {
       ),
     },
   ];
-
+  if (store.authentication.userData.role !== "Admin") columns.pop();
   const deleteData = async (id) => {
     try {
       console.log(id);
@@ -289,7 +294,7 @@ export const ProductComponent = observer((props) => {
             pageSize: store.product.pageSize,
             total: store.product.total_data,
             current: store.product.page + 1,
-            style: {marginBottom: "1rem", marginRight: "1rem"},
+            style: { marginBottom: "1rem", marginRight: "1rem" },
           }}
           dataSource={store.product.data}
           style={{ padding: 0 }}
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index 6bd6c96..ce7bf9f 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -52,14 +52,14 @@ export const MenuList = observer((props) => {
       <Menu.Item key="home">
         <Link to={LINKS.HOME}>
           <HomeOutlined />
-          <span>Home</span>
+          <span>Beranda</span>
         </Link>
       </Menu.Item>
       {store.authentication.userData.role !== "Retail" && (
         <Menu.Item key="membership">
           <Link to={LINKS.MEMBERSHIP}>
             <FileProtectOutlined />
-            <span>Membership</span>
+            <span>Keanggotaan</span>
           </Link>
         </Menu.Item>
       )}
@@ -68,13 +68,13 @@ export const MenuList = observer((props) => {
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
               <ProjectOutlined />
-              <span>Partner</span>
+              <span>Rekanan</span>
             </Link>
           </Menu.Item>
           <Menu.Item key="commision">
             <Link to={LINKS.COMMISSION}>
               <MoneyCollectOutlined />
-              <span>Commission</span>
+              <span>Komisi</span>
             </Link>
           </Menu.Item>
           <Menu.Item key="supplier">
@@ -90,14 +90,14 @@ export const MenuList = observer((props) => {
           <Menu.Item key="product">
             <Link to={LINKS.PRODUCT}>
               <DatabaseOutlined />
-              <span>Product</span>
+              <span>Produk</span>
             </Link>
           </Menu.Item>
           {store.authentication.userData.role === "Admin" && (
             <Menu.Item key="category">
               <Link to={LINKS.CATEGORY}>
                 <FileAddOutlined />
-                <span>Category</span>
+                <span>Kategori</span>
               </Link>
             </Menu.Item>
           )}
@@ -105,7 +105,7 @@ export const MenuList = observer((props) => {
             <Menu.Item key="sub-category">
               <Link to={LINKS.SUBCATEGORY}>
                 <FileSyncOutlined />
-                <span>Sub Category</span>
+                <span>Sub Kategori</span>
               </Link>
             </Menu.Item>
           )}
@@ -115,7 +115,7 @@ export const MenuList = observer((props) => {
         <Menu.Item key="retail">
           <Link to={LINKS.PRODUCT}>
             <DatabaseOutlined />
-            <span>Product</span>
+            <span>Produk</span>
           </Link>
         </Menu.Item>
       )}
@@ -123,24 +123,24 @@ export const MenuList = observer((props) => {
         <Menu.Item key="transaction">
           <Link to={LINKS.TRANSACTION}>
             <ShoppingCartOutlined />
-            <span>Transaction</span>
+            <span>Transaksi</span>
           </Link>
         </Menu.Item>
       )}
-      <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback">
+      <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Pembayaran">
         {store.authentication.userData.role !== "Retail" && (
           <Menu.Item key="payback-to-user">
             <Link to={LINKS.PAYBACK}>
-              <PayCircleOutlined/>
-                <span>Confirmation</span>
+              <FileProtectOutlined/>
+                <span>konfirmasi</span>
             </Link>
           </Menu.Item>
         )}
         {store.authentication.userData.role !== "Admin" && (
           <Menu.Item key="payback-from-user">
               <Link to={LINKS.PAYBACK_CREATED}>
-                  <AlipayOutlined/>
-                  <span>Created</span>
+                  <FileProtectOutlined/>
+                  <span>Buat Pembayaran</span>
               </Link>
           </Menu.Item>
         )}
diff --git a/src/pages/Config/Partner.js b/src/pages/Config/Partner.js
index e1e8b41..4b5f5ce 100644
--- a/src/pages/Config/Partner.js
+++ b/src/pages/Config/Partner.js
@@ -56,14 +56,14 @@ export const Partner = observer(() => {
                         </Button> */}
           </Col>
           <Col span={12} style={{textAlign: "right"}}>
-            <Search
+            {/* <Search
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
                 marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
-            />
+            /> */}
             <Button onClick={() => store.partner.visibleModalPartner = true}>
               <PlusSquareOutlined/> New
             </Button>
diff --git a/src/pages/Config/Supplier.js b/src/pages/Config/Supplier.js
index fc088b5..e009362 100644
--- a/src/pages/Config/Supplier.js
+++ b/src/pages/Config/Supplier.js
@@ -71,7 +71,7 @@ export const Supplier = observer(() => {
             </Button>
           </Col> */}
           <Col span={24} style={{ textAlign: "right" }}>
-            <Search
+            {/* <Search
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
@@ -79,7 +79,7 @@ export const Supplier = observer(() => {
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
               onSearch={(value) => console.log(value)}
-            />
+            /> */}
             <Button
               onClick={() => (store.supplier.visibleModalSupplier = true)}
             >
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index ca040f0..d4e84bc 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -1,20 +1,67 @@
-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";
-import {useParams} from "react-router-dom";
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Row,
+  Table,
+  Typography,
+  Tag,
+  Space,
+  message,
+} 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, DownloadOutlined } from "@ant-design/icons";
+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 DetailUser = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
   const { id } = useParams();
+  const [visibleModal, setVisibleModal] = useState(false);
+  const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
+  const [destination, setDestination] = useState(null);
+  const [initialData, setInitialData] = useState({});
+  const [confirmLoading, setConfirmLoading] = useState(false);
+
+  //console.log(id)
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([
+        store.transaction.getDataHistoryTopUp(id),
+        store.membership.getDetail(id),
+      ]);
+      modalLoader.setLoading(false);
+    })();
+  }, []);
+
+  const columns = [
+    {
+      title: "Amount",
+      dataIndex: "amount",
+      key: "amount",
+    },
+    {
+      title: "Transaction Date",
+      dataIndex: "transaction_date",
+      key: "transaction_date",
+      render: (text, record) => {
+        return (
+          <Text>
+            {format(parseISO(record.transaction_date), "dd MMMM yyyy ")}
+          </Text>
+        );
+      },
+    },
+  ];
 
   const routeData = [
     {
@@ -23,129 +70,96 @@ export const DetailUser = observer(() => {
     },
     {
       route: LINKS.USER_DETAIL,
-      name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
+      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
     },
   ];
-console.log(id)
-  useEffect(() => {
-    (async () => {
-      modalLoader.setLoading(true);
-      await Promise.allSettled([
-        store.authentication.getProfile(),
-        store.transaction.getDataHistoryTopUp(id),
-        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}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
         <Title strong>Detail User</Title>
-        <Row style={{marginBottom: 20}}>
+        <Row style={{ marginBottom: 20 }}>
           <Col lg={12} xs={24}>
             <Row>
               <Col span={12}>
                 <Text strong>Name</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.transaction.data.name}</Text>
+                <Text>{store.membership.data.userDetail?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Username</Text>
+              </Col>
+              <Col span={12}>
+                <Text>
+                {store.membership.data.superior?.username}
+                </Text>
               </Col>
               <Col span={12}>
                 <Text strong>Role</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+                <Text>
+                {store.membership.data.roles?.name}
+                </Text>
               </Col>
               <Col span={12}>
-                <Text strong>Saldo Supplier</Text>
+                <Text strong>Phone Number</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>
+                <Text>{store.membership.data.userDetail?.phone_number}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Status</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData.superior?.username}</Text>
+                <Text>
+                  {store.authentication.profileData.superior?.isActive === true ? "Inaktif": "Aktif"}
+                </Text>
               </Col>
             </Row>
           </Col>
-          <Col lg={12} xs={24}>
+          {/* <Col lg={12} xs={24}>
             <Row justify={"center"}>
               <Col lg={24} xs={12}>
-                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+                <Title strong level={3} style={styleSaldoTitle}>
+                  Saldo
+                </Title>
               </Col>
               <Col lg={24} xs={12}>
-                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+                <Text style={styleSaldoContent}>
+                  {store.transaction?.data.amount}
+                </Text>
               </Col>
             </Row>
-          </Col>
+          </Col> */}
         </Row>
         <Row>
           <Col span={24}>
             <div>
-              <Title strong level={3}>History Top Up</Title>
+              <Title strong level={3}>
+                History Top Up
+              </Title>
 
-              <Button style={{marginBottom: '1rem'}} onClick={() => {
-                console.log('clicked filter')
-              }}>
-                <FilterOutlined/>
+              <Button
+                style={{ marginBottom: "1rem" }}
+                onClick={() => {
+                  console.log("clicked filter");
+                }}
+              >
+                <FilterOutlined />
                 Filter
               </Button>
               <Table
                 columns={columns}
-                dataSource={store.transaction.dataHistoryTransaction}
+                dataSource={store.transaction.dataHistoryTopUp}
                 bordered
               />
             </div>
           </Col>
         </Row>
-        <div/>
+        <div />
       </Card>
     </div>
-  )
+  );
 });
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 526f41e..83de9c3 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,32 +1,32 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
-    Button,
-    Card,
-    Col,
-    Divider,
-    Form,
-    Input,
-    InputNumber,
-    List,
-    message,
-    Modal,
-    Row,
-    Select,
-    Space,
-    Table,
-    Tag,
+  Button,
+  Card,
+  Col,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  List,
+  message,
+  Modal,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tag,
 } from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons";
-import {MembershipModal} from "./MembershipModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
-import {useHistory} from "react-router-dom";
-import {ModalLoaderContext} from "../../utils/modal";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import { MembershipModal } from "./MembershipModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { 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();
@@ -71,14 +71,14 @@ export const Membership = observer(() => {
     const status = isActive ? "inactive" : "active";
     const status2 = isActive ? "Inactivating" : "Activating";
     try {
-        modalLoader.setLoading(true);
-        const response = await store.membership.changeStatus(id, status);
-        modalLoader.setLoading(false);
+      modalLoader.setLoading(true);
+      const response = await store.membership.changeStatus(id, status);
+      modalLoader.setLoading(false);
 
-        response?.body?.statusCode === 201
-            ? message.success(`Success ${status2} Membership`)
-            : message.error(`Failed ${status2} Membership`);
-        await getData();
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Membership`)
+        : message.error(`Failed ${status2} Membership`);
+      await getData();
     } catch (err) {
       modalLoader.setLoading(false);
       message.error(`Failed ${status2} Membership`);
@@ -93,26 +93,26 @@ export const Membership = observer(() => {
   const handleSubmitTransaction = async (data) => {
     modalLoader.setLoading(true);
     try {
-        data.destination = destination;
-        if (data.amount) {
-            data = {
-                ...data,
-                amount: Number(data.amount),
-            };
-        }
+      data.destination = destination;
+      if (data.amount) {
+        data = {
+          ...data,
+          amount: Number(data.amount),
+        };
+      }
 
-        let response = null;
+      let response = null;
 
-        (await store.authentication.userData.role) === "Admin"
-            ? (response = await store.transaction.distributeAdmin(data))
-            : (response = await store.transaction.distribute(data));
+      (await store.authentication.userData.role) === "Admin"
+        ? (response = await store.transaction.distributeAdmin(data))
+        : (response = await store.transaction.distribute(data));
 
-        response?.body?.statusCode === 201
-            ? message.success("Success Top Up")
-            : message.error("Failed Top Up");
+      response?.body?.statusCode === 201
+        ? message.success("Success Top Up")
+        : message.error("Failed Top Up");
 
-        modalLoader.setLoading(false);
-        await getData();
+      modalLoader.setLoading(false);
+      await getData();
     } catch (e) {
       console.log(e, "apa errornya");
       modalLoader.setLoading(false);
@@ -142,30 +142,30 @@ export const Membership = observer(() => {
       key: ["coa", "amount"],
       width: "20%",
       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>
-      ),
+        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>
+    //   ),
+    // },
     {
       title: "Action",
       key: "action",
       render: (text, record) => (
-          <Space size="middle">
-              {store.authentication.userData.role === "Admin" && <Button
+        <Space size="middle">
+          {/* {store.authentication.userData.role === "Admin" && <Button
                   type={record?.isActive === true ? "danger" : "primary"}
                   onClick={() => changeStatus(record?.id, record?.isActive)}
               >
@@ -209,12 +209,21 @@ export const Membership = observer(() => {
                   }}
               >
                   Ganti Password
-              </Button>}
+              </Button>} */}
+          <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);
+              await store.transaction.getDataHistoryTopUp(record.id);
+              history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+              console.log(record.id);
             }}
           >
             Detail
@@ -264,9 +273,9 @@ export const Membership = observer(() => {
       setConfirmLoading(true);
       modalLoader.setLoading(true);
       try {
-          await store.membership.create(data);
-          message.success("Success Add New Member");
-          await getData();
+        await store.membership.create(data);
+        message.success("Success Add New Member");
+        await getData();
       } catch (e) {
         console.log(e, "apa errornya");
         message.error("Failed Add Member");
@@ -339,17 +348,17 @@ export const Membership = observer(() => {
               itemLayout="horizontal"
               position={"top"}
               pagination={{
-                  onChange: async (page) => {
-                      store.membership.pageSize = page.pageSize;
-                      store.membership.page = page.current - 1;
-                      modalLoader.setLoading(true);
-                      await getData();
-                      modalLoader.setLoading(false);
-                  },
-                  pageSize: store.membership.pageSize,
-                  total: store.membership.total_data,
-                  current: store.membership.page + 1,
-                  style: {marginBottom: "1rem", marginRight: "1rem"},
+                onChange: async (page) => {
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = page.current - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                },
+                pageSize: store.membership.pageSize,
+                total: store.membership.total_data,
+                current: store.membership.page + 1,
+                style: { marginBottom: "1rem", marginRight: "1rem" },
               }}
               dataSource={store.membership.data}
               style={{ padding: 0 }}
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index bbb5291..79ec6c0 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -1,271 +1,295 @@
-import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
-import {appConfig} from "../../config/app";
-import {capitalize} from "lodash";
-import {PAYBACK_STATUS} from "../../constants/payback";
+import React, { useContext, useEffect } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Image,
+  Input,
+  List,
+  message,
+  Modal,
+  Row,
+  Space,
+  Table,
+  Tag,
+} from "antd";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import {
+  CheckCircleOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  FilterOutlined,
+  StopOutlined,
+} from "@ant-design/icons";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { ModalLoaderContext } from "../../utils/modal";
+import { appConfig } from "../../config/app";
+import { capitalize } from "lodash";
+import { PAYBACK_STATUS } from "../../constants/payback";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Payback = observer(() => {
-    const store = useStore();
-    const modalLoader = useContext(ModalLoaderContext);
+  const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
 
-    useEffect(() => {
-        const init = async () => {
-            try {
-                modalLoader.setLoading(true);
-                await store.payback.getDataConfirmation();
-                modalLoader.setLoading(false);
-            } catch (e) {
-                modalLoader.setLoading(false);
-                if (e.response?.body?.message) {
-                    message.error(e.response.body.message);
-                    return;
-                }
-                message.error(e.message);
+  useEffect(() => {
+    const init = async () => {
+      try {
+        modalLoader.setLoading(true);
+        await store.payback.getDataConfirmation();
+        modalLoader.setLoading(false);
+      } catch (e) {
+        modalLoader.setLoading(false);
+        if (e.response?.body?.message) {
+          message.error(e.response.body.message);
+          return;
+        }
+        message.error(e.message);
+      }
+    };
+
+    init();
+  }, []);
+
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "userData_name",
+      key: "userData_name",
+    },
+    {
+      title: "Picture",
+      dataIndex: "image_prove",
+      key: "image_prove",
+      render: (text, record) => (
+        <Image
+          src={`${appConfig.apiUrl}/config/image/${text}`}
+          style={{ width: "5vw" }}
+          alt={record.id}
+        />
+      ),
+    },
+    {
+      title: "Amount",
+      dataIndex: "amount",
+      key: "amount",
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    {
+      title: "Action",
+      dataIndex: "amount",
+      key: "action",
+      width: "10%",
+      render: (text, record) =>
+        PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ? (
+          <Space size="middle">
+            <Button
+              onClick={async () => {
+                Modal.confirm({
+                  title: `Are you sure Accept this submission?`,
+                  icon: <CheckOutlined />,
+                  okText: "Accept",
+                  cancelText: "Cancel",
+                  okType: "primary",
+                  onOk() {
+                    handleAction(record.id, "accept");
+                  },
+                  onCancel() {
+                    console.log("Cancel");
+                  },
+                });
+              }}
+              icon={<CheckCircleOutlined />}
+              style={{
+                backgroundColor: "#1bb91d",
+                color: "#fff",
+                borderColor: "#1bb91d",
+              }}
+            >
+              Accept
+            </Button>
+            <Button
+              onClick={async () => {
+                Modal.confirm({
+                  title: `Are you sure Reject this submission?`,
+                  icon: <StopOutlined />,
+                  okText: "Reject",
+                  cancelText: "Cancel",
+                  okType: "primary",
+                  onOk() {
+                    handleAction(record.id, "reject");
+                  },
+                  onCancel() {
+                    console.log("Cancel");
+                  },
+                });
+              }}
+              icon={<CloseOutlined />}
+              style={{
+                backgroundColor: "#ff1c1c",
+                color: "#fff",
+                borderColor: "#ff1c1c",
+              }}
+            >
+              Reject
+            </Button>
+          </Space>
+        ) : (
+          <Tag
+            color={
+              PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3]
+                ? "cyan"
+                : "red"
             }
-        };
-
-        init();
-    }, []);
-
-    const columns = [
-        {
-            title: "Name",
-            dataIndex: "userData_name",
-            key: "userData_name",
-        },
-        {
-            title: "Picture",
-            dataIndex: "image_prove",
-            key: "image_prove",
-            render: (text, record) => (
-                <Image
-                    src={`${appConfig.apiUrl}/config/image/${text}`}
-                    style={{width: '5vw'}}
-                    alt={record.id}
-                />
-            ),
-        },
-        {
-            title: "Amount",
-            dataIndex: "amount",
-            key: "amount",
-            width: '20%',
-            render: (text) =>
-                new Intl.NumberFormat("id-ID", {
-                    style: "currency",
-                    currency: "IDR",
-                }).format(text),
-        },
-        {
-            title: "Action",
-            dataIndex: "amount",
-            key: "action",
-            width: '10%',
-            render: (text, record) => (
-                PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ?
-                    <Space size="middle">
-                        <Button
-                            onClick={async () => {
-                                Modal.confirm({
-                                    title: `Are you sure Accept this submission?`,
-                                    icon: <CheckOutlined/>,
-                                    okText: "Accept",
-                                    cancelText: "Cancel",
-                                    okType: "primary",
-                                    onOk() {
-                                        handleAction(record.id, "accept");
-                                    },
-                                    onCancel() {
-                                        console.log("Cancel");
-                                    },
-                                })
-                            }}
-                            icon={<CheckCircleOutlined/>}
-                            style={{
-                                backgroundColor: "#1bb91d",
-                                color: "#fff",
-                                borderColor: "#1bb91d",
-                            }}
-                        >
-                            Accept
-                        </Button>
-                        <Button
-                            onClick={async () => {
-                                Modal.confirm({
-                                    title: `Are you sure Reject this submission?`,
-                                    icon: <StopOutlined/>,
-                                    okText: "Reject",
-                                    cancelText: "Cancel",
-                                    okType: "primary",
-                                    onOk() {
-                                        handleAction(record.id, "reject");
-                                    },
-                                    onCancel() {
-                                        console.log("Cancel");
-                                    },
-                                })
-
-                            }}
-                            icon={<CloseOutlined/>}
-                            style={{
-                                backgroundColor: "#ff1c1c",
-                                color: "#fff",
-                                borderColor: "#ff1c1c",
-                            }}
-                        >
-                            Reject
-                        </Button>
-                    </Space> :
-                    <Tag
-                        color={PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3] ? "cyan" : "red"}
-                        style={{color: "#4F566B"}}
-                    >
-                        {PAYBACK_STATUS[record.status]}
-                    </Tag>
-          ),
-      },
+            style={{ color: "#4F566B" }}
+          >
+            {PAYBACK_STATUS[record.status]}
+          </Tag>
+        ),
+    },
   ];
 
   if (store.authentication.userData.role === "Retail") columns.pop();
 
   const routeData = [
-      {
-          route: LINKS.HOME,
-          name: "Home",
-      },
-      {
-          route: LINKS.PAYBACK,
-          name: <span style={{fontWeight: "bold"}}>Payback Confirmation</span>,
-      },
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.PAYBACK,
+      name: <span style={{ fontWeight: "bold" }}>Payback Confirmation</span>,
+    },
   ];
 
-    const handleAction = async (id, type) => {
-        modalLoader.setLoading(true);
-        try {
-            const response = await store.payback.confirmPayback(id, type);
-            if (response.body.status !== 201) {
-                message.error(`Failed ${capitalize(type)} Payback`);
-            } else {
-                message.success(`Success ${capitalize(type)} Payback`);
-            }
-        } catch (e) {
-            console.error(e, "apa errornya");
-            message.error("Failed Handler Action Payback");
-        }
-        modalLoader.setLoading(false);
-    };
+  const handleAction = async (id, type) => {
+    modalLoader.setLoading(true);
+    try {
+      const response = await store.payback.confirmPayback(id, type);
+      if (response.body.status !== 201) {
+        message.error(`Failed ${capitalize(type)} Payback`);
+      } else {
+        message.success(`Success ${capitalize(type)} Payback`);
+      }
+    } catch (e) {
+      console.error(e, "apa errornya");
+      message.error("Failed Handler Action Payback");
+    }
+    modalLoader.setLoading(false);
+  };
 
-    return (
-        <div className={["ppob-container"].join(" ")}>
-            <BreadcumbComponent data={routeData}/>
-            <Card>
-                <div>
-                    <Row style={{marginBottom: 20}}>
-                        <Col span={12}>
-                            <Button>
-                                <FilterOutlined/>
-                                Filter
-                            </Button>
-                        </Col>
-                        <Col span={12} style={{textAlign: "right"}}>
-                            <Search
-                                placeholder="input search text"
-                                style={{
-                                    width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData} />
+      <Card>
+        <div>
+          <Row style={{ marginBottom: 20 }}>
+            <Col span={12}>
+              <Button>
+                <FilterOutlined />
+                Filter
+              </Button>
+            </Col>
+            <Col span={12} style={{ textAlign: "right" }}>
+              {/* <Search
+                placeholder="input search text"
+                style={{
+                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
-              />
+              /> */}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (
-              <Table
-                  key="1"
-                  hasEmpty
-                  columns={columns}
-                  dataSource={store.payback.dataConfirmation}
-                  bordered
-                  pagination={{
-                      pageSize: store.payback.pageSizeConfirmation,
-                      total: store.payback.totalDataConfirmation,
-                      current: store.payback.pageSizeConfirmation + 1,
-                      showSizeChanger: true,
-                      simple: false
-                  }}
-                  onChange={async (page) => {
-                      let pageNumber = page.current;
-                      store.payback.pageSizeConfirmation = page.pageSize;
-                      store.payback.pageConfirmation = pageNumber - 1;
-                      modalLoader.setLoading(true);
-                      await store.payback.getDataConfirmation();
-                      modalLoader.setLoading(false);
-                  }}
-              />
+            <Table
+              key="1"
+              hasEmpty
+              columns={columns}
+              dataSource={store.payback.dataConfirmation}
+              bordered
+              pagination={{
+                pageSize: store.payback.pageSizeConfirmation,
+                total: store.payback.totalDataConfirmation,
+                current: store.payback.pageSizeConfirmation + 1,
+                showSizeChanger: true,
+                simple: false,
+              }}
+              onChange={async (page) => {
+                let pageNumber = page.current;
+                store.payback.pageSizeConfirmation = page.pageSize;
+                store.payback.pageConfirmation = pageNumber - 1;
+                modalLoader.setLoading(true);
+                await store.payback.getDataConfirmation();
+                modalLoader.setLoading(false);
+              }}
+            />
           )}
 
           {store.ui.mediaQuery.isMobile && (
-              <List
-                  itemLayout="horizontal"
-                  position={"top"}
-                  pagination={{
-                      onChange: async (page) => {
-                          store.payback.pageSizeConfirmation = page.pageSize;
-                          store.payback.pageConfirmation = page.current - 1;
-                          modalLoader.setLoading(true);
-                          await store.payback.getDataConfirmation();
-                          modalLoader.setLoading(false);
-                      },
-                      pageSize: store.payback.pageSizeConfirmation,
-                      total: store.payback.totalDataConfirmation,
-                      current: store.payback.pageConfirmation + 1,
-                      style: {marginBottom: "1rem", marginRight: "1rem"},
-                  }}
-                  dataSource={store.payback.dataConfirmation}
-                  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={["cariparkir-container"].join(" ")}
-                                title={item.name}
-                                description={
-                                  <div style={{}}>
-                                    <Image src={item.picture} preview={false}/>
-                                  </div>
-                                }
-                            />
-                            <div style={{marginRight: 16}}>
-                              <p
-                                  style={{
-                                    fontSize: 9,
-                                    margin: 0,
-                                  }}
-                              >
-                                {item.amount}
-                              </p>
-                            </div>
-                          </List.Item>
-                          <Divider plain style={{margin: 0}}/>
+            <List
+              itemLayout="horizontal"
+              position={"top"}
+              pagination={{
+                onChange: async (page) => {
+                  store.payback.pageSizeConfirmation = page.pageSize;
+                  store.payback.pageConfirmation = page.current - 1;
+                  modalLoader.setLoading(true);
+                  await store.payback.getDataConfirmation();
+                  modalLoader.setLoading(false);
+                },
+                pageSize: store.payback.pageSizeConfirmation,
+                total: store.payback.totalDataConfirmation,
+                current: store.payback.pageConfirmation + 1,
+                style: { marginBottom: "1rem", marginRight: "1rem" },
+              }}
+              dataSource={store.payback.dataConfirmation}
+              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={["cariparkir-container"].join(" ")}
+                        title={item.name}
+                        description={
+                          <div style={{}}>
+                            <Image src={item.picture} preview={false} />
+                          </div>
+                        }
+                      />
+                      <div style={{ marginRight: 16 }}>
+                        <p
+                          style={{
+                            fontSize: 9,
+                            margin: 0,
+                          }}
+                        >
+                          {item.amount}
+                        </p>
+                      </div>
+                    </List.Item>
+                    <Divider plain style={{ margin: 0 }} />
                   </div>
                 );
               }}
diff --git a/src/pages/Payback/PaybackCreated.js b/src/pages/Payback/PaybackCreated.js
index 54005ef..ee53c93 100644
--- a/src/pages/Payback/PaybackCreated.js
+++ b/src/pages/Payback/PaybackCreated.js
@@ -101,14 +101,14 @@ export const PaybackCreated = observer(() => {
               </Button>
             </Col>
             <Col span={12} style={{textAlign: "right"}}>
-              <Search
+              {/* <Search
                 placeholder="input search text"
                 style={{
                   width: store.ui.mediaQuery.isMobile ? 160 : 200,
                   marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
-              />
+              /> */}
               {store.authentication.userData.role !== "Admin" && (
                 <Button
                   onClick={() => {
diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js
index 67728e8..409b32b 100644
--- a/src/pages/Product/Category.js
+++ b/src/pages/Product/Category.js
@@ -57,14 +57,14 @@ export const Category = observer(() => {
             </Button>
           </Col>
           <Col span={12} style={{ textAlign: "right" }}>
-            <Search
+            {/* <Search
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
                 marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
-            />
+            /> */}
             <Button
               onClick={() => (store.category.visibleModalCategory = true)}
             >
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 72a9940..8319da3 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -57,34 +57,20 @@ export const Product = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
-        <Row style={{ marginBottom: 20 }}>
-          <Col span={12}>
-            <Button
-              onClick={() => {
-                store.product.visibleModalFilterProduct = true;
-              }}
-            >
-              <FilterOutlined />
-              Filter
-            </Button>
-          </Col>
-          <Col span={12}>
-            <div
-              style={{
-                display: store.ui.mediaQuery.isMobile ? "" : "flex",
-                justifyContent: "flex-end",
-                textAlign: "right",
-              }}
-            >
-              <Search
-                placeholder="input search text"
-                style={{
-                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                }}
-              />
-              {store.authentication.userData.role === "Admin" && (
+        {store.authentication.userData.role !== "Admin" && (
+          <div>
+            <Row style={{ marginBottom: 20 }}>
+              <Col span={12}>
+                <Button
+                  onClick={() => {
+                    store.product.visibleModalFilterProduct = true;
+                  }}
+                >
+                  <FilterOutlined />
+                  Filter
+                </Button>
+              </Col>
+              <Col span={12}>
                 <div
                   style={{
                     display: store.ui.mediaQuery.isMobile ? "" : "flex",
@@ -92,28 +78,45 @@ export const Product = observer(() => {
                     textAlign: "right",
                   }}
                 >
-                  <Upload>
-                    <Button
-                      disabled={store.product.uploadBtnProduct}
-                      style={{
-                        marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                        marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
-                      }}
-                      icon={<UploadOutlined />}
-                    >
-                      Upload Product
-                    </Button>
-                  </Upload>
-                  <Button
-                    onClick={() => (store.product.visibleModalProduct = true)}
+                  {/* <Search
+                    placeholder="input search text"
+                    style={{
+                      width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                      marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                      marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                    }}
+                  /> */}
+
+                  <div
+                    style={{
+                      display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                      justifyContent: "flex-end",
+                      textAlign: "right",
+                    }}
                   >
-                    <PlusSquareOutlined /> New
-                  </Button>
+                    <Upload>
+                      <Button
+                        disabled={store.product.uploadBtnProduct}
+                        style={{
+                          marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                          marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
+                        }}
+                        icon={<UploadOutlined />}
+                      >
+                        Upload Product
+                      </Button>
+                    </Upload>
+                    {/* <Button
+                      onClick={() => (store.product.visibleModalProduct = true)}
+                    >
+                      <PlusSquareOutlined /> New
+                    </Button> */}
+                  </div>
                 </div>
-              )}
-            </div>
-          </Col>
-        </Row>
+              </Col>
+            </Row>
+          </div>
+        )}
         <ProductComponent />
       </Card>
     </div>
diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js
index 0ffa767..cc99349 100644
--- a/src/pages/Product/Subcategory.js
+++ b/src/pages/Product/Subcategory.js
@@ -61,14 +61,14 @@ export const Subcategory = observer(() => {
             </Button> */}
           </Col>
           <Col span={12} style={{textAlign: "right"}}>
-            <Search
+            {/* <Search
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
                 marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
-            />
+            /> */}
             <Button
               onClick={() => (store.subcategory.visibleModalSubcategory = true)}
             >
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 450afb1..8147a9f 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -60,7 +60,7 @@ export const Profile = observer(() => {
       key: 'created_at',
       render: (text, record) => {
         return (
-          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+          <Text>{format(parseISO(record.created_at), 'mm:HH dd MM YYYY')}</Text>
         )
       },
     },
diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index 73a96e4..c62b12d 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -117,7 +117,7 @@ export const Product = observer(() => {
                           },
                         });
                       }}
-                      style={{cursor: "pointer"}}
+                      style={{cursor: "pointer",marginLeft:10}}
                   >
                     <span style={{color: "black"}}>{item.product_name}</span>
                     <br/>
@@ -132,13 +132,13 @@ export const Product = observer(() => {
             ))}
           </Row>
       )}
-      {store.transaction.data.length !== 0 && (
+      {/* {store.transaction.data.length !== 0 && (
           <Col style={{textAlign: "right", marginTop: "1em"}}>
             <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
               Beli Sekarang
             </Button>
           </Col>
-      )}
+      )} */}
     </div>
   );
 });
diff --git a/src/routes/app.js b/src/routes/app.js
index 00ee1cf..9bc009f 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -29,7 +29,7 @@ export const LINKS = {
     PAYBACK: "/app/payback",
     PAYBACK_CREATED: "/app/payback-created",
     SUBCATEGORY: "/app/subcategory",
-    USER_DETAIL: "/app/user-detail",
+    USER_DETAIL: "/app/user-detail/:id",
     PRODUCT_DETAIL: "/app/product-detail",
 };
 
diff --git a/src/store/membership.js b/src/store/membership.js
index 7b2d44b..8edbee2 100644
--- a/src/store/membership.js
+++ b/src/store/membership.js
@@ -28,6 +28,16 @@ export class Membership {
             console.error(e);
         }
     }
+    async getDetail(id) {
+        try {
+            const response = await http.get(`/users/`+id);
+            console.log(response,'Data Detail')
+            this.data = response.body.data
+            this.total_data = response?.body?.count ?? 0
+        } catch (e) {
+            console.error(e);
+        }
+    }
     
     async getDataBySuperior() {
         try {
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 307f4bd..390b91d 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -84,7 +84,7 @@ export class Transaction {
         try {
             console.log("Top up")
             const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
-            
+            console.log(response,"data")
             this.dataHistoryTopUp = response.body.data ?? []
             this.total_dataHistoryTopUp = response?.body?.count ?? 0
         } catch (e) {