diff --git a/src/component/CommissionComponent.js b/src/component/CommissionComponent.js
index d8ac7d6..94d7abf 100644
--- a/src/component/CommissionComponent.js
+++ b/src/component/CommissionComponent.js
@@ -44,6 +44,8 @@ export const CommissionComponent = observer((props) => {
     },
   ];
 
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
+  
   const handleCancel = () => {
     setIdData("");
     store.commission.visibleModalCommission = false;
diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index 4f34369..ed31f0a 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -123,6 +123,8 @@ export const PartnerComponent = observer((props) => {
       ),
     },
   ];
+  
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
 
   const deleteData = async (id) => {
     try {
diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index 81f5478..874539d 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -130,6 +130,8 @@ export const SupplierComponent = observer((props) => {
     },
   ];
 
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
+  
   const deleteData = async (id) => {
     try {
       console.log(id);
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index 5d55b25..884d31b 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -25,7 +25,7 @@ import {
   DollarCircleOutlined,
   UsergroupAddOutlined,
   UnorderedListOutlined,
-  FormOutlined
+  FormOutlined,
 } from "@ant-design/icons";
 import { AppRoute, LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -129,7 +129,8 @@ export const DesktopLayout = observer(() => {
             }}
           >
             <Menu>
-              {store.authentication.userData.role === "Admin" && (
+              {(store.authentication.userData.role === "Admin" ||
+                store.authentication.userData.role === "Customer Service") && (
                 <Menu.Item key="home">
                   <Link to={LINKS.HOME}>
                     <HomeOutlined />
@@ -145,7 +146,8 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
-              {store.authentication.userData.role === "Admin" && (
+              {(store.authentication.userData.role === "Admin" ||
+                store.authentication.userData.role === "Customer Service") && (
                 <SubMenu
                   key="keanggotaan"
                   icon={<UsergroupAddOutlined />}
@@ -201,7 +203,8 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )} */}
-              {store.authentication.userData.role === "Admin" && (
+              {(store.authentication.userData.role === "Admin" ||
+                store.authentication.userData.role === "Customer Service") && (
                 <SubMenu
                   key="config"
                   icon={<SettingOutlined />}
@@ -228,7 +231,8 @@ export const DesktopLayout = observer(() => {
                   </Menu.Item>
                 </SubMenu>
               )}
-              {store.authentication.userData.role === "Admin" && (
+              {(store.authentication.userData.role === "Admin" ||
+                store.authentication.userData.role === "Customer Service") && (
                 <SubMenu
                   key="product-main"
                   icon={<PieChartOutlined />}
@@ -308,14 +312,16 @@ export const DesktopLayout = observer(() => {
                       </Link>
                     </Menu.Item>
                   )}
-                  {store.authentication.userData.role !== "Admin" && (
-                    <Menu.Item key="payback-from-user">
-                      <Link to={LINKS.PAYBACK_CREATED}>
-                        <AlipayOutlined />
-                        <span>Dibuat oleh Saya</span>
-                      </Link>
-                    </Menu.Item>
-                  )}
+                  {store.authentication.userData.role !== "Admin" ||
+                    (store.authentication.userData.role !==
+                      "Customer Service" && (
+                      <Menu.Item key="payback-from-user">
+                        <Link to={LINKS.PAYBACK_CREATED}>
+                          <AlipayOutlined />
+                          <span>Dibuat oleh Saya</span>
+                        </Link>
+                      </Menu.Item>
+                    ))}
                 </SubMenu>
               )}
               {store.authentication.userData.role !== "Admin" && (
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index 4c21761..031d504 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -56,7 +56,8 @@ export const MenuList = observer((props) => {
       overflowedIndicator={0}
       forceSubMenuRender={true}
     >
-      {store.authentication.userData.role === "Admin" && (
+      {(store.authentication.userData.role === "Admin" ||
+        store.authentication.userData.role === "Customer Service") && (
         <Menu.Item key="home">
           <Link to={LINKS.HOME}>
             <HomeOutlined />
@@ -72,47 +73,48 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role === "Admin" && (
-          <SubMenu
-            key="keanggotaan"
-            icon={<UsergroupAddOutlined />}
-            title="Keanggotaan"
-          >
-            <Menu.Item key="membership">
-              <Link to={LINKS.MEMBERSHIP}>
-                <UnorderedListOutlined />
-                <span>Daftar Anggota</span>
-              </Link>
-            </Menu.Item>
-            <Menu.Item key="konfirmasi">
-              <Link to={LINKS.KONFIRMASI}>
-                <FormOutlined />
-                <span>Konfirm Retail</span>
-              </Link>
-            </Menu.Item>
-          </SubMenu>
-        )}
-        {store.authentication.userData.role === "Supervisor" && (
-          <SubMenu
-            key="keanggotaan"
-            icon={<UsergroupAddOutlined />}
-            title="Keanggotaan"
-          >
-            <Menu.Item key="membership">
-              <Link to={LINKS.MEMBERSHIP}>
-                <UnorderedListOutlined />
-                <span>Daftar Anggota</span>
-              </Link>
-            </Menu.Item>
-            <Menu.Item key="konfirmasi">
-              <Link to={LINKS.KONFIRMASI}>
-                <FormOutlined />
-                <span>Konfirm Retail</span>
-              </Link>
-            </Menu.Item>
-          </SubMenu>
-        )}
-        {/* {store.authentication.userData.role === "Sales" && (
+      {(store.authentication.userData.role === "Admin" ||
+        store.authentication.userData.role === "Customer Service") && (
+        <SubMenu
+          key="keanggotaan"
+          icon={<UsergroupAddOutlined />}
+          title="Keanggotaan"
+        >
+          <Menu.Item key="membership">
+            <Link to={LINKS.MEMBERSHIP}>
+              <UnorderedListOutlined />
+              <span>Daftar Anggota</span>
+            </Link>
+          </Menu.Item>
+          <Menu.Item key="konfirmasi">
+            <Link to={LINKS.KONFIRMASI}>
+              <FormOutlined />
+              <span>Konfirm Retail</span>
+            </Link>
+          </Menu.Item>
+        </SubMenu>
+      )}
+      {store.authentication.userData.role === "Supervisor" && (
+        <SubMenu
+          key="keanggotaan"
+          icon={<UsergroupAddOutlined />}
+          title="Keanggotaan"
+        >
+          <Menu.Item key="membership">
+            <Link to={LINKS.MEMBERSHIP}>
+              <UnorderedListOutlined />
+              <span>Daftar Anggota</span>
+            </Link>
+          </Menu.Item>
+          <Menu.Item key="konfirmasi">
+            <Link to={LINKS.KONFIRMASI}>
+              <FormOutlined />
+              <span>Konfirm Retail</span>
+            </Link>
+          </Menu.Item>
+        </SubMenu>
+      )}
+      {/* {store.authentication.userData.role === "Sales" && (
           <SubMenu
             key="keanggotaan"
             icon={<UsergroupAddOutlined />}
@@ -142,7 +144,8 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role === "Admin" && (
+      {(store.authentication.userData.role === "Admin" ||
+        store.authentication.userData.role === "Customer Service") && (
         <SubMenu key="config" icon={<SettingOutlined />} title="Config">
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
@@ -164,7 +167,8 @@ export const MenuList = observer((props) => {
           </Menu.Item>
         </SubMenu>
       )}
-      {store.authentication.userData.role === "Admin" && (
+      {(store.authentication.userData.role === "Admin" ||
+        store.authentication.userData.role === "Customer Service") && (
         <SubMenu
           key="product-main"
           icon={<AppstoreAddOutlined />}
@@ -176,22 +180,20 @@ export const MenuList = observer((props) => {
               <span>Produk</span>
             </Link>
           </Menu.Item>
-          {store.authentication.userData.role === "Admin" && (
-            <Menu.Item key="sub-category">
-              <Link to={LINKS.SUBCATEGORY}>
-                <FileSyncOutlined />
-                <span>Sub Kategori</span>
-              </Link>
-            </Menu.Item>
-          )}
-          {store.authentication.userData.role === "Admin" && (
-            <Menu.Item key="category">
-              <Link to={LINKS.CATEGORY}>
-                <FileAddOutlined />
-                <span>Kategori</span>
-              </Link>
-            </Menu.Item>
-          )}
+
+          <Menu.Item key="sub-category">
+            <Link to={LINKS.SUBCATEGORY}>
+              <FileSyncOutlined />
+              <span>Sub Kategori</span>
+            </Link>
+          </Menu.Item>
+
+          <Menu.Item key="category">
+            <Link to={LINKS.CATEGORY}>
+              <FileAddOutlined />
+              <span>Kategori</span>
+            </Link>
+          </Menu.Item>
         </SubMenu>
       )}
       {store.authentication.userData.role === "Admin Partner" && (
@@ -240,14 +242,15 @@ export const MenuList = observer((props) => {
               </Link>
             </Menu.Item>
           )}
-          {store.authentication.userData.role !== "Admin" && (
-            <Menu.Item key="payback-from-user">
-              <Link to={LINKS.PAYBACK_CREATED}>
-                <FileProtectOutlined />
-                <span>Dibuat oleh Saya</span>
-              </Link>
-            </Menu.Item>
-          )}
+          {store.authentication.userData.role !== "Admin" ||
+            (store.authentication.userData.role !== "Customer Service" && (
+              <Menu.Item key="payback-from-user">
+                <Link to={LINKS.PAYBACK_CREATED}>
+                  <FileProtectOutlined />
+                  <span>Dibuat oleh Saya</span>
+                </Link>
+              </Menu.Item>
+            ))}
         </SubMenu>
       )}
       {store.authentication.userData.role !== "Admin" && (
diff --git a/src/pages/Config/Partner.js b/src/pages/Config/Partner.js
index 9e85a1d..279c0b3 100644
--- a/src/pages/Config/Partner.js
+++ b/src/pages/Config/Partner.js
@@ -1,14 +1,14 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Input, Row, Tabs,message} from "antd";
-import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {PartnerComponent} from "../../component/PartnerComponent";
-import {LINKS} from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
+import React, { useContext, useEffect, useState } from "react";
+import { Button, Card, Col, Input, Row, Tabs, message } from "antd";
+import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { PartnerComponent } from "../../component/PartnerComponent";
+import { LINKS } from "../../routes/app";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Partner = observer(() => {
   const store = useStore();
@@ -40,22 +40,22 @@ export const Partner = observer(() => {
     },
     {
       route: LINKS.PARTNER,
-      name: <span style={{fontWeight: 'bold'}}>Rekanan</span>,
+      name: <span style={{ fontWeight: "bold" }}>Rekanan</span>,
     },
   ];
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
-        <Row style={{marginBottom: 20}}>
+        <Row style={{ marginBottom: 20 }}>
           {/* <Col span={12}>
             <Button>
                             <FilterOutlined/>
                             Filter
                         </Button>
           </Col> */}
-          <Col span={24} style={{textAlign: "right"}}>
+          <Col span={24} style={{ textAlign: "right" }}>
             {/* <Search
               placeholder="input search text"
               style={{
@@ -64,12 +64,16 @@ export const Partner = observer(() => {
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
             /> */}
-            <Button onClick={() => store.partner.visibleModalPartner = true}>
-              <PlusSquareOutlined/> New
-            </Button>
+            {store.authentication.userData.role !== "Customer Service" && (
+              <Button
+                onClick={() => (store.partner.visibleModalPartner = true)}
+              >
+                <PlusSquareOutlined /> New
+              </Button>
+            )}
           </Col>
         </Row>
-        <PartnerComponent/>
+        <PartnerComponent />
       </Card>
     </div>
   );
diff --git a/src/pages/Config/Supplier.js b/src/pages/Config/Supplier.js
index 3cd403b..773dcb8 100644
--- a/src/pages/Config/Supplier.js
+++ b/src/pages/Config/Supplier.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
   Button,
   Card,
@@ -21,7 +21,7 @@ import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
 import { SupplierComponent } from "../../component/SupplierComponent";
 import { LINKS } from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
+import { ModalLoaderContext } from "../../utils/modal";
 
 const { Search } = Input;
 
@@ -80,11 +80,13 @@ export const Supplier = observer(() => {
               }}
               onSearch={(value) => console.log(value)}
             /> */}
-            <Button
-              onClick={() => (store.supplier.visibleModalSupplier = true)}
-            >
-              <PlusSquareOutlined /> New
-            </Button>
+            {store.authentication.userData.role !== "Customer Service" && (
+              <Button
+                onClick={() => (store.supplier.visibleModalSupplier = true)}
+              >
+                <PlusSquareOutlined /> New
+              </Button>
+            )}
           </Col>
         </Row>
         <SupplierComponent />
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 4d41f87..3d0eea6 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -48,11 +48,12 @@ export const Home = observer(() => {
       ? await store.membership.getData()
       : await store.membership.getDataBySuperior();
   };
-  
+
   return (
     <div>
       {store.ui.mediaQuery.isDesktop &&
-        store.authentication.userData.role === "Admin" && (
+        (store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Customer Service") && (
           <Row
             style={{
               marginTop: 30,
@@ -281,8 +282,9 @@ export const Home = observer(() => {
             </Card>
           </Row>
         )}
-        {store.ui.mediaQuery.isMobile &&
-        store.authentication.userData.role === "Admin" && (
+      {store.ui.mediaQuery.isMobile &&
+        (store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Customer Service") && (
           <Row
             style={{
               marginTop: 20,
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 42851b3..13f13fa 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -344,14 +344,17 @@ export const Membership = observer(() => {
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
               /> */}
-              <Button
-                onClick={() => {
-                  setInitialData({});
-                  setVisibleModal(true);
-                }}
-              >
-                <PlusSquareOutlined /> New
-              </Button>
+
+              {store.authentication.userData.role !== "Customer Service" && (
+                <Button
+                  onClick={() => {
+                    setInitialData({});
+                    setVisibleModal(true);
+                  }}
+                >
+                  <PlusSquareOutlined /> New
+                </Button>
+              )}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (
diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js
index d1ef4ba..5bc0cb6 100644
--- a/src/pages/Product/Category.js
+++ b/src/pages/Product/Category.js
@@ -1,13 +1,12 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Input, Row, Tabs,message} from "antd";
-import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {LINKS} from "../../routes/app";
-import {CategoryComponent} from "../../component/CategoryComponent";
-import {ModalLoaderContext} from "../../utils/modal";
-
+import React, { useContext, useEffect, useState } from "react";
+import { Button, Card, Col, Input, Row, Tabs, message } from "antd";
+import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { LINKS } from "../../routes/app";
+import { CategoryComponent } from "../../component/CategoryComponent";
+import { ModalLoaderContext } from "../../utils/modal";
 
 export const Category = observer(() => {
   const store = useStore();
@@ -49,11 +48,13 @@ export const Category = observer(() => {
       <Card>
         <Row style={{ marginBottom: 20 }}>
           <Col span={24} style={{ textAlign: "right" }}>
-            <Button
-              onClick={() => (store.category.visibleModalCategory = true)}
-            >
-              <PlusSquareOutlined /> New
-            </Button>
+            {store.authentication.userData.role !== "Customer Service" && (
+              <Button
+                onClick={() => (store.category.visibleModalCategory = true)}
+              >
+                <PlusSquareOutlined /> New
+              </Button>
+            )}
           </Col>
         </Row>
 
diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js
index b17dcb1..d435bd5 100644
--- a/src/pages/Product/Subcategory.js
+++ b/src/pages/Product/Subcategory.js
@@ -55,11 +55,15 @@ export const Subcategory = observer(() => {
       <Card>
         <Row style={{ marginBottom: 20 }}>
           <Col span={24} style={{ textAlign: "right" }}>
-            <Button
-              onClick={() => (store.subcategory.visibleModalSubcategory = true)}
-            >
-              <PlusSquareOutlined /> New
-            </Button>
+            {store.authentication.userData.role !== "Customer Service" && (
+              <Button
+                onClick={() =>
+                  (store.subcategory.visibleModalSubcategory = true)
+                }
+              >
+                <PlusSquareOutlined /> New
+              </Button>
+            )}
           </Col>
         </Row>
         <SubcategoryComponent />
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 600130d..c5e0e32 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -14,6 +14,7 @@ import {
   List,
   Image,
   Tag,
+  Tabs,
 } from "antd";
 import moment from "moment";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -23,14 +24,15 @@ import { observer } from "mobx-react-lite";
 import { FilterOutlined } from "@ant-design/icons";
 import { format, parseISO } from "date-fns";
 import { appConfig } from "../../config/app";
-
 import { ModalLoaderContext } from "../../utils/modal";
-
+import { useParams } from "react-router-dom";
+const { TabPane } = Tabs;
 const { Title, Text } = Typography;
 const { RangePicker } = DatePicker;
 export const Profile = observer(() => {
   const store = useStore();
   const [form] = Form.useForm();
+  const { id } = useParams();
   const modalLoader = useContext(ModalLoaderContext);
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
@@ -59,11 +61,16 @@ export const Profile = observer(() => {
       await Promise.allSettled([
         store.authentication.getProfile(),
         store.transaction.getDataHistoryTransaction(),
+        store.transaction.getDataHistoryTopUpProfile(
+          store.authentication.profileData?.id
+          
+        ),
       ]);
       modalLoader.setLoading(false);
     })();
   }, []);
 
+  
   const handleRemoveFilter = async () => {
     store.transaction.filterStart = null;
     store.transaction.filterEnd = null;
@@ -210,6 +217,35 @@ export const Profile = observer(() => {
     },
   ];
 
+  const column = [
+    {
+      title: "Pengirim",
+      dataIndex: "sender_name",
+      key: "sender_name",
+    },
+    {
+      title: "Nominal",
+      dataIndex: "amount",
+      key: "amount",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    {
+      title: "Transaction Date",
+      dataIndex: "transaction_date",
+      key: "transaction_date",
+      render: (text, record) => {
+        return (
+          <Text>
+            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
+          </Text>
+        );
+      },
+    },
+  ];
   const styleSaldoTitle = store.ui.mediaQuery.isDesktop
     ? {
         display: "flex",
@@ -357,152 +393,267 @@ export const Profile = observer(() => {
         </Row>
         <Row>
           <Col span={24}>
-            <div>
-              <Title strong level={3}>
-                Riwayat Transaksi
-              </Title>
-              <Button
-                style={{ marginBottom: "1rem" }}
-                onClick={() => {
-                  store.transaction.visibleModalFilterTransaction = true;
-                }}
-              >
-                <FilterOutlined />
-                Filter
-              </Button>
-              {store.ui.mediaQuery.isDesktop && (
-                <Table
-                  columns={columns}
-                  bordered
-                  scroll={{ x: 1300 }}
-                  //scroll={{ x: 1500, y: 300 }}
-                  dataSource={store.transaction.dataHistoryTransaction}
-                  pagination={{
-                    pageSize: store.transaction.pageSizeHistoryTransaction,
-                    total: store.transaction.total_dataHistoryTransaction,
-                    current: store.transaction.pageHistoryTransaction + 1,
-                    showSizeChanger: true,
-                    simple: false,
+            <Tabs defaultActiveKey="1">
+              <TabPane tab="History Top Up" key="1">
+                <Button
+                  style={{ marginBottom: "1rem", marginLeft: 5 }}
+                  onClick={() => {
+                    store.transaction.visibleModalFilterTransaction = true;
                   }}
-                  onChange={async (page) => {
-                    let pageNumber = page.current;
-                    store.transaction.pageSizeHistoryTransaction =
-                      page.pageSize;
-                    store.transaction.pageHistoryTransaction = pageNumber - 1;
-                    modalLoader.setLoading(true);
-                    await store.transaction.getDataHistoryTransaction();
-                    modalLoader.setLoading(false);
+                >
+                  <FilterOutlined />
+                  Filter
+                </Button>
+                {store.ui.mediaQuery.isDesktop && (
+                  <Table
+                    key="1"
+                    hasEmpty
+                    columns={column}
+                    dataSource={store.transaction.dataHistoryTopUpProfile}
+                    bordered
+                    pagination={{
+                      pageSize: store.transaction.pageSize,
+                      total: store.transaction.total_dataHistoryTopUpProfile,
+                      current: store.transaction.page + 1,
+                      showSizeChanger: true,
+                      simple: false,
+                    }}
+                    onChange={async (page) => {
+                      let pageNumber = page.current;
+                      store.transaction.pageSize = page.pageSize;
+                      store.transaction.page = pageNumber - 1;
+                      modalLoader.setLoading(true);
+                      await store.transaction.getDataHistoryTopUpProfile(
+                        store.authentication.profileData?.id
+                      );
+                      modalLoader.setLoading(false);
+                    }}
+                  />
+                )}
+                {store.ui.mediaQuery.isMobile && (
+                  <div>
+                    <List
+                      itemLayout="horizontal"
+                      position={"top"}
+                      dataSource={store.transaction.dataHistoryTopUpProfile}
+                      pagination={{
+                        onChange: async (page, pageSize) => {
+                          console.log(page, "Page");
+                          console.log(pageSize, "Page size");
+                          store.transaction.pageSize = pageSize;
+                          store.transaction.page = page - 1;
+                          modalLoader.setLoading(true);
+                          await store.transaction.getDataHistoryTopUpProfile(
+                            store.authentication.profileData?.id
+                          );
+                          modalLoader.setLoading(false);
+                        },
+                        pageSize: store.transaction.pageSize,
+                        total: store.transaction.total_dataHistoryTopUpProfile,
+                        current: store.transaction.page + 1,
+                        style: { marginBottom: "1rem", marginRight: "1rem" },
+                      }}
+                      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.id}
+                                description={
+                                  <div style={{}}>
+                                    <p>
+                                      <small>
+                                        Pengirim : {item.sender_name}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Amount :{" "}
+                                        {new Intl.NumberFormat("id-ID", {
+                                          style: "currency",
+                                          currency: "IDR",
+                                        }).format(item.amount || 0)}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Transaction Date :{" "}
+                                        {format(
+                                          parseISO(item.transaction_date),
+                                          "dd-MM-yyyy"
+                                        )}
+                                      </small>{" "}
+                                      <br />
+                                    </p>
+                                  </div>
+                                }
+                              />
+                            </List.Item>
+                            <Divider plain style={{ margin: 0 }} />
+                          </div>
+                        );
+                      }}
+                    />
+                  </div>
+                )}
+              </TabPane>
+              <TabPane tab="History Transaction" key="2">
+                <Button
+                  style={{ marginBottom: "1rem", marginLeft: 5 }}
+                  onClick={() => {
+                    store.transaction.visibleModalFilterTransaction = true;
                   }}
-                />
-              )}
-              {store.ui.mediaQuery.isMobile && (
-                <List
-                  itemLayout="horizontal"
-                  position={"top"}
-                  dataSource={store.transaction.dataHistoryTransaction}
-                  pagination={{
-                    onChange: async (page, pageSize) => {
-                      console.log(page, "Page");
-                      console.log(pageSize, "Page size");
-                      store.transaction.pageSizeHistoryTransaction = pageSize;
-                      store.transaction.pageHistoryTransaction = page - 1;
+                >
+                  <FilterOutlined />
+                  Filter
+                </Button>
+                {store.ui.mediaQuery.isDesktop && (
+                  <Table
+                    columns={columns}
+                    bordered
+                    scroll={{ x: 1300 }}
+                    //scroll={{ x: 1500, y: 300 }}
+                    dataSource={store.transaction.dataHistoryTransaction}
+                    pagination={{
+                      pageSize: store.transaction.pageSizeHistoryTransaction,
+                      total: store.transaction.total_dataHistoryTransaction,
+                      current: store.transaction.pageHistoryTransaction + 1,
+                      showSizeChanger: true,
+                      simple: false,
+                    }}
+                    onChange={async (page) => {
+                      let pageNumber = page.current;
+                      store.transaction.pageSizeHistoryTransaction =
+                        page.pageSize;
+                      store.transaction.pageHistoryTransaction = pageNumber - 1;
                       modalLoader.setLoading(true);
                       await store.transaction.getDataHistoryTransaction();
                       modalLoader.setLoading(false);
-                    },
-                    pageSize: store.transaction.pageSizeHistoryTransaction,
-                    total: store.transaction.total_dataHistoryTransaction,
-                    current: store.transaction.pageHistoryTransaction + 1,
-                    style: { marginBottom: "1rem", marginRight: "1rem" },
-                  }}
-                  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.buyer}
-                            description={
-                              <div style={{}}>
-                                <p>
-                                  <small>Price : {item.price}</small> <br />
-                                  <small>
-                                    Tujuan : {item.transaction_destination}
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    Kode Transaksi : {item.transaction_code}
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    Status :{" "}
-                                    {
-                                      <Tag
-                                        color={
-                                          item.status === 1
-                                            ? "success"
-                                            : item.status === 0
-                                            ? "warning"
-                                            : "processing"
+                    }}
+                  />
+                )}
+                {store.ui.mediaQuery.isMobile && (
+                  <div>
+                    <List
+                      itemLayout="horizontal"
+                      position={"top"}
+                      dataSource={store.transaction.dataHistoryTransaction}
+                      pagination={{
+                        onChange: async (page, pageSize) => {
+                          console.log(page, "Page");
+                          console.log(pageSize, "Page size");
+                          store.transaction.pageSizeHistoryTransaction =
+                            pageSize;
+                          store.transaction.pageHistoryTransaction = page - 1;
+                          modalLoader.setLoading(true);
+                          await store.transaction.getDataHistoryTransaction();
+                          modalLoader.setLoading(false);
+                        },
+                        pageSize: store.transaction.pageSizeHistoryTransaction,
+                        total: store.transaction.total_dataHistoryTransaction,
+                        current: store.transaction.pageHistoryTransaction + 1,
+                        style: { marginBottom: "1rem", marginRight: "1rem" },
+                      }}
+                      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.buyer}
+                                description={
+                                  <div style={{}}>
+                                    <p>
+                                      <small>Price : {item.price}</small> <br />
+                                      <small>
+                                        Tujuan : {item.transaction_destination}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Kode Transaksi : {item.transaction_code}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Status :{" "}
+                                        {
+                                          <Tag
+                                            color={
+                                              item.status === 1
+                                                ? "success"
+                                                : item.status === 0
+                                                ? "warning"
+                                                : "processing"
+                                            }
+                                          >
+                                            {item.status === 1
+                                              ? "Sukses"
+                                              : item.status === 0
+                                              ? "Dalam Proses"
+                                              : "Gagal"}
+                                          </Tag>
                                         }
-                                      >
-                                        {item.status === 1
-                                          ? "Sukses"
-                                          : item.status === 0
-                                          ? "Dalam Proses"
-                                          : "Gagal"}
-                                      </Tag>
-                                    }
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    No.Seri : {item.seri_number}
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    Alasan Gagal : {item.failed_reason}
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    IDTrx Mitra :{" "}
-                                    {item.partner_transaction_code}
-                                  </small>{" "}
-                                  <br />
-                                  <small>
-                                    Transaction Date :{" "}
-                                    {format(
-                                      parseISO(item.created_at),
-                                      "dd-MM-yyyy"
-                                    )}
-                                  </small>{" "}
-                                  <br />
-                                </p>
-                              </div>
-                            }
-                          />
-                        </List.Item>
-                        <Divider plain style={{ margin: 0 }} />
-                      </div>
-                    );
-                  }}
-                />
-              )}
-            </div>
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        No.Seri : {item.seri_number}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Alasan Gagal : {item.failed_reason}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        IDTrx Mitra :{" "}
+                                        {item.partner_transaction_code}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Transaction Date :{" "}
+                                        {format(
+                                          parseISO(item.created_at),
+                                          "dd-MM-yyyy"
+                                        )}
+                                      </small>{" "}
+                                      <br />
+                                    </p>
+                                  </div>
+                                }
+                              />
+                            </List.Item>
+                            <Divider plain style={{ margin: 0 }} />
+                          </div>
+                        );
+                      }}
+                    />
+                  </div>
+                )}
+              </TabPane>
+            </Tabs>
           </Col>
         </Row>
-        <div />
       </Card>
       <Modal
         visible={store.transaction.visibleModalFilterTransaction}
diff --git a/src/store/transaction.js b/src/store/transaction.js
index d212316..145b6c8 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -40,6 +40,9 @@ export class Transaction {
   dataHistoryTopUp = [];
   total_dataHistoryTopUp = 0;
 
+  dataHistoryTopUpProfile = [];
+  total_dataHistoryTopUpProfile = 0;
+
   dataTransaction = [];
   dataTransactionB2B = [];
   dataTransactionPartner = [];
@@ -165,6 +168,19 @@ export class Transaction {
     }
   }
 
+  async getDataHistoryTopUpProfile(id) {
+    try {
+      const response = await http.get(
+        `/transaction/history-deposit-profile?page=${this.page}&pageSize=${this.pageSize}&user-destination=${id}`
+      );
+      console.log(response,'get data history Profile')
+      this.dataHistoryTopUpProfile = response.body.data ?? [];
+      this.total_dataHistoryTopUpProfile = response?.body?.count ?? 0;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   async create(data) {
     try {
       const response = await http.post("/product").send(data);