diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index 7a3afd0..cc2e6b6 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -1,23 +1,11 @@
-import React, { useContext, useEffect, useState } from "react";
-import {
-  Button,
-  Form,
-  Input,
-  message,
-  Modal,
-  Select,
-  Space,
-  Table,
-  Tag,
-  List,
-  Divider,
-} 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 React, {useContext, useState} from "react";
+import {Button, Divider, Form, Input, List, message, Modal, Space, Table, Tag,} 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";
 
 export const PartnerComponent = observer((props) => {
   const store = useStore();
@@ -223,15 +211,15 @@ export const PartnerComponent = observer((props) => {
           pagination={{
             onChange: async (page) => {
               store.partner.pageSize = page.pageSize;
-              store.partner.page = page.current;
+              store.partner.page = page.current - 1;
               modalLoader.setLoading(true);
               await store.partner.getData();
               modalLoader.setLoading(false);
             },
             pageSize: store.partner.pageSize,
             total: store.partner.total_data,
-            current: store.partner.page,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
+            current: store.partner.page + 1,
+            style: {marginBottom: "1rem", marginRight: "1rem"},
           }}
           dataSource={store.partner.data}
           style={{ padding: 0 }}
diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 47aadb3..990b7d8 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -281,15 +281,15 @@ export const ProductComponent = observer((props) => {
           pagination={{
             onChange: async (page) => {
               store.product.pageSize = page.pageSize;
-              store.product.page = page.current;
+              store.product.page = page.current - 1;
               modalLoader.setLoading(true);
               await store.product.getData();
               modalLoader.setLoading(false);
             },
             pageSize: store.product.pageSize,
             total: store.product.total_data,
-            current: store.product.page,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
+            current: store.product.page + 1,
+            style: {marginBottom: "1rem", marginRight: "1rem"},
           }}
           dataSource={store.product.data}
           style={{ padding: 0 }}
diff --git a/src/component/SubcategoryComponent.js b/src/component/SubcategoryComponent.js
index 0b01a76..db1a7e5 100644
--- a/src/component/SubcategoryComponent.js
+++ b/src/component/SubcategoryComponent.js
@@ -125,15 +125,15 @@ export const SubcategoryComponent = observer((props) => {
           pagination={{
             onChange: async (page) => {
               store.subcategory.pageSize = page.pageSize;
-              store.subcategory.page = page.current;
+              store.subcategory.page = page.current - 1;
               modalLoader.setLoading(true);
               await store.subcategory.getData();
               modalLoader.setLoading(false);
             },
             pageSize: store.subcategory.pageSize,
             total: store.subcategory.total_data,
-            current: store.subcategory.page,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
+            current: store.subcategory.page + 1,
+            style: {marginBottom: "1rem", marginRight: "1rem"},
           }}
           dataSource={store.subcategory.data}
           style={{ padding: 0 }}
diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index af6b6e4..7efd50e 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -1,23 +1,12 @@
-import React, { useContext, useState } from "react";
-import {
-  Button,
-  Form,
-  Input,
-  message,
-  Modal,
-  Space,
-  Table,
-  Tag,
-  List,
-  Divider,
-} 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 { TopupsaldoModal } from "./TopupsaldoModal";
-import { ModalLoaderContext } from "../utils/modal";
+import React, {useContext, useState} from "react";
+import {Button, Divider, Form, Input, List, message, Modal, Space, Table, Tag,} 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 {TopupsaldoModal} from "./TopupsaldoModal";
+import {ModalLoaderContext} from "../utils/modal";
 
 export const SupplierComponent = observer((props) => {
   const store = useStore();
@@ -231,15 +220,15 @@ export const SupplierComponent = observer((props) => {
           pagination={{
             onChange: async (page) => {
               store.supplier.pageSize = page.pageSize;
-              store.supplier.page = page.current;
+              store.supplier.page = page.current - 1;
               modalLoader.setLoading(true);
               await store.supplier.getData();
               modalLoader.setLoading(false);
             },
             pageSize: store.supplier.pageSize,
             total: store.supplier.total_data,
-            current: store.supplier.page,
-            style: { marginBottom: "1rem", marginRight: "1rem" },
+            current: store.supplier.page + 1,
+            style: {marginBottom: "1rem", marginRight: "1rem"},
           }}
           dataSource={store.supplier.data}
           style={{ padding: 0 }}
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index 0769e58..8e1edd0 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -206,24 +206,24 @@ export const DesktopLayout = observer(() => {
                 </Menu.Item>
               )}
               <SubMenu
-                key="payback-main"
-                icon={<ProfileOutlined />}
-                title="Payback"
+                  key="payback-main"
+                  icon={<ProfileOutlined/>}
+                  title="Created"
               >
                 {store.authentication.userData.role !== "Retail" && (
                 <Menu.Item key="payback-to-user">
                   <Link to={LINKS.PAYBACK}>
-                    <PayCircleOutlined />
-                    <span>Payback To</span>
+                      <PayCircleOutlined/>
+                      <span>Confirmation</span>
                   </Link>
                 </Menu.Item>
                 )}
                 {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="payback-from-user">
-                  <Link to={LINKS.PAYBACK_FROM_USER}>
-                      <AlipayOutlined/>
-                      <span>Payback</span>
-                  </Link>
+                    <Link to={LINKS.PAYBACK_CREATED}>
+                        <AlipayOutlined/>
+                        <span>Created</span>
+                    </Link>
                 </Menu.Item>
                 )}
               </SubMenu>
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index 5ece71d..6bd6c96 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -131,16 +131,16 @@ export const MenuList = observer((props) => {
         {store.authentication.userData.role !== "Retail" && (
           <Menu.Item key="payback-to-user">
             <Link to={LINKS.PAYBACK}>
-              <PayCircleOutlined />
-              <span>Payback To</span>
+              <PayCircleOutlined/>
+                <span>Confirmation</span>
             </Link>
           </Menu.Item>
         )}
         {store.authentication.userData.role !== "Admin" && (
           <Menu.Item key="payback-from-user">
-              <Link to={LINKS.PAYBACK_FROM_USER}>
+              <Link to={LINKS.PAYBACK_CREATED}>
                   <AlipayOutlined/>
-                  <span>Payback</span>
+                  <span>Created</span>
               </Link>
           </Menu.Item>
         )}
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index b7fd1e5..28a278b 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -338,17 +338,17 @@ export const Membership = observer(() => {
               itemLayout="horizontal"
               position={"top"}
               pagination={{
-                onChange: async (page) => {
-                  store.membership.pageSize = page.pageSize;
-                  store.membership.page = page.current;
-                  modalLoader.setLoading(true);
-                  await getData();
-                  modalLoader.setLoading(false);
-                },
-                pageSize: store.membership.pageSize,
-                total: store.membership.total_data,
-                current: store.membership.page,
-                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 3423829..2b77216 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -1,45 +1,45 @@
 import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd";
+import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
-import {CheckCircleOutlined, CloseOutlined, FilterOutlined,} from "@ant-design/icons";
+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";
 
 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.getData();
-        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();
-  }, []);
+        init();
+    }, []);
 
-
-  const columns = [
-    {
-      title: "Picture",
-      dataIndex: "image_prove",
-      key: "image_prove",
-      render: (text, record) => (
+    const columns = [
+        {
+            title: "Picture",
+            dataIndex: "image_prove",
+            key: "image_prove",
+            render: (text, record) => (
           <Image
               src={`${appConfig.apiUrl}/config/image/${text}`}
               style={{width: '5vw'}}
@@ -67,7 +67,19 @@ export const Payback = observer(() => {
               <Space size="middle">
                   <Button
                       onClick={async () => {
-                          await handleAction(record, "accept");
+                          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={{
@@ -80,82 +92,84 @@ export const Payback = observer(() => {
                   </Button>
                   <Button
                       onClick={async () => {
-                          await handleAction(record, "reject");
+                          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>
-      ),
-    },
+                      style={{
+                          backgroundColor: "#ff1c1c",
+                          color: "#fff",
+                          borderColor: "#ff1c1c",
+                      }}
+                  >
+                      Reject
+                  </Button>
+              </Space>
+          ),
+      },
   ];
 
   if (store.authentication.userData.role === "Retail") columns.pop();
 
   const routeData = [
-    {
-      route: LINKS.HOME,
-      name: "Home",
-    },
-    {
-      route: LINKS.PAYBACK,
-      name: <span style={{fontWeight: "bold"}}>Payback</span>,
-    },
+      {
+          route: LINKS.HOME,
+          name: "Home",
+      },
+      {
+          route: LINKS.PAYBACK,
+          name: <span style={{fontWeight: "bold"}}>Payback Confirmation</span>,
+      },
   ];
 
-  const onSubmit = async (data) => {
-    modalLoader.setLoading(true);
-    try {
-      // await store.payback.create(data);
-      // message.success("Success Add New Member");
-      // await store.payback.getData();
-    } catch (e) {
-      console.error(e, "apa errornya");
-      message.error("Failed Add Member");
-    }
-    modalLoader.setLoading(false);
-  };
+    const handleAction = async (id, type) => {
+        modalLoader.setLoading(true);
+        try {
+            const response = await store.payback.confirmPayback(id, {status: capitalize(type)});
+            if (response.body.status !== 201) {
+                message.error(`Failed ${capitalize(type)} Payback`);
+            }
+            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 (record, type) => {
-  };
-
-  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,
                 }}
               />
-              {/* {store.authentication.userData.role !== "Admin" && (
-                <Button
-                  onClick={() => {
-                    setInitialData({});
-                    setVisibleModal(true);
-                  }}
-                >
-                  <PlusSquareOutlined /> New
-                </Button>
-              )} */}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (
@@ -163,23 +177,23 @@ export const Payback = observer(() => {
                   key="1"
                   hasEmpty
                   columns={columns}
-                  dataSource={store.payback.data}
+                  dataSource={store.payback.dataConfirmation}
                   bordered
-                  // pagination={{
-                  //   pageSize: store.payback.page,
-                  //   total: store.payback.total_data,
-                  //   current: store.payback.pageSize + 1,
-                  //   showSizeChanger: true,
-                  //   simple: false
-                  // }}
-                  // onChange={async (page) => {
-                  //   let pageNumber = page.current;
-                  //   store.payback.pageSize = page.pageSize;
-                  //   store.payback.page = pageNumber - 1;
-                  //   modalLoader.setLoading(true);
-                  //   await store.payback.getData();
-                  //   modalLoader.setLoading(false);
-                  // }}
+                  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);
+                  }}
               />
           )}
 
@@ -187,30 +201,30 @@ export const Payback = observer(() => {
               <List
                   itemLayout="horizontal"
                   position={"top"}
-                  // pagination={{
-                  //   onChange: async (page) => {
-                  //     store.payback.pageSize = page.pageSize;
-                  //     store.payback.page = page.current;
-                  //     modalLoader.setLoading(true);
-                  //     await store.payback.getData();
-                  //     modalLoader.setLoading(false);
-                  //   },
-                  //   pageSize: store.payback.pageSize,
-                  //   total: store.payback.total_data,
-                  //   current: store.payback.page,
-                  //   style: {marginBottom: "1rem", marginRight: "1rem"},
-                  // }}
-                  dataSource={store.payback.data}
+                  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,
+                      return (
+                          <div>
+                              <List.Item
+                                  key={item.id}
+                                  style={{
+                                      backgroundColor: "#ffffff",
+                                      paddingTop: 0,
+                                      paddingBottom: 0,
                                 display: "flex",
                                 flexDirection: "row",
                                 alignItems: "center",
diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackCreated.js
similarity index 80%
rename from src/pages/Payback/PaybackFromUser.js
rename to src/pages/Payback/PaybackCreated.js
index 3cca08e..70dd3e6 100644
--- a/src/pages/Payback/PaybackFromUser.js
+++ b/src/pages/Payback/PaybackCreated.js
@@ -7,10 +7,11 @@ import {PaybackModal} from "./PaybackModal";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";
+import {appConfig} from "../../config/app";
 
 const {Search} = Input;
 
-export const PaybackFromUser = observer(() => {
+export const PaybackCreated = observer(() => {
   const store = useStore();
   const [initialData, setInitialData] = useState({});
   const modalLoader = useContext(ModalLoaderContext);
@@ -20,8 +21,8 @@ export const PaybackFromUser = observer(() => {
       try {
         modalLoader.setLoading(true);
         await Promise.allSettled([
-          store.payback.getDataUser(),
-          store.authentication.getProfile()
+          store.payback.getDataCreated(),
+          store.authentication.getProfile(),
         ]);
         modalLoader.setLoading(false);
       } catch (e) {
@@ -37,19 +38,17 @@ export const PaybackFromUser = observer(() => {
     init();
   }, []);
 
-
   const columns = [
     {
       title: "Picture",
       dataIndex: "image_prove",
       key: "image_prove",
       render: (text, record) => (
-        <Image
-          src={record.image_prove}
-          style={{width: 50, height: 50}}
-          shape="circle"
-          alt="avatar"
-        />
+          <Image
+              src={`${appConfig.apiUrl}/config/image/${text}`}
+              style={{width: '5vw'}}
+              alt={record.id}
+          />
       ),
     },
     {
@@ -70,8 +69,8 @@ export const PaybackFromUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.PAYBACK_FROM_USER,
-      name: <span style={{fontWeight: "bold"}}>Payback User</span>,
+      route: LINKS.PAYBACK_CREATED,
+      name: <span style={{fontWeight: "bold"}}>Payback Created</span>,
     },
   ];
 
@@ -113,21 +112,21 @@ export const PaybackFromUser = observer(() => {
                 key="1"
                 hasEmpty
                 columns={columns}
-                dataSource={store.payback.dataPaybackUser}
+                dataSource={store.payback.dataCreated}
                 bordered
                 pagination={{
-                  pageSize: store.payback.pageSizePaybackUser,
-                  total: store.payback.total_dataPaybackUser,
-                  current: store.payback.pageSizePaybackUser + 1,
+                  pageSize: store.payback.pageSizeCreated,
+                  total: store.payback.totalDataCreated,
+                  current: store.payback.pageCreated + 1,
                   showSizeChanger: true,
                   simple: false
                 }}
                 onChange={async (page) => {
                   let pageNumber = page.current;
-                  store.payback.pageSizePaybackUser = page.pageSize;
-                  store.payback.pageSizePaybackUser = pageNumber - 1;
+                  store.payback.pageSizeCreated = page.pageSize;
+                  store.payback.pageCreated = pageNumber - 1;
                   modalLoader.setLoading(true);
-                  //await store.payback.getDataUser();
+                  await store.payback.getDataCreated();
                   modalLoader.setLoading(false);
                 }}
             />
@@ -139,18 +138,18 @@ export const PaybackFromUser = observer(() => {
               position={"top"}
               pagination={{
                 onChange: async (page) => {
-                  store.payback.pageSizePaybackUser = page.pageSize;
-                  store.payback.pageSizePaybackUser = page.current;
+                  store.payback.pageSizeCreated = page.pageSize;
+                  store.payback.pageCreated = page.current - 1;
                   modalLoader.setLoading(true);
-                  await store.payback.getDataUser();
+                  await store.payback.getDataCreated();
                   modalLoader.setLoading(false);
                 },
-                pageSize: store.payback.pageSizePaybackUser,
-                total: store.payback.total_dataPaybackUser,
-                current: store.payback.pageSizePaybackUser,
+                pageSize: store.payback.pageSizeCreated,
+                total: store.payback.totalDataCreated,
+                current: store.payback.pageCreated + 1,
                 style: {marginBottom: "1rem", marginRight: "1rem"},
               }}
-              dataSource={store.payback.dataPaybackUser}
+              dataSource={store.payback.dataCreated}
               style={{padding: 0}}
               renderItem={(item) => {
                 return (
diff --git a/src/pages/Payback/PaybackModal.js b/src/pages/Payback/PaybackModal.js
index 34683ec..39ae6b9 100644
--- a/src/pages/Payback/PaybackModal.js
+++ b/src/pages/Payback/PaybackModal.js
@@ -45,7 +45,6 @@ export const PaybackModal = ({initialData}) => {
   };
 
   const handleChange = (info) => {
-    console.log(info, "apa isi onchange")
     if (info.file.status === 'uploading') {
       setLoading(true);
     } else {
@@ -69,7 +68,7 @@ export const PaybackModal = ({initialData}) => {
         image_prove: responseFilename
       }
       await store.payback.create(request);
-      message.success("Success Add Payback");
+      message.success("Success Add Created");
     } catch (e) {
       if (e.response?.body?.message) {
         message.error(e.response.body.message);
@@ -98,7 +97,7 @@ export const PaybackModal = ({initialData}) => {
   return (
       <Modal
           visible={store.payback.visibleModalPayback}
-          title={"Create a new Payback"}
+          title={"Create a new Created"}
           okText={"Create"}
           cancelText="Cancel"
           onCancel={handleCancel}
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index f6ec408..450afb1 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -122,7 +122,13 @@ export const Profile = observer(() => {
                 <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}>{
+                  new Intl.NumberFormat("id-ID", {
+                    style: "currency",
+                    currency: "IDR"
+                  })
+                      .format(store.authentication.profileData?.wallet || 0)}
+                </Text>
               </Col>
             </Row>
           </Col>
@@ -139,9 +145,24 @@ export const Profile = observer(() => {
                 Filter
               </Button>
               <Table
-                columns={columns}
-                dataSource={store.transaction.dataHistoryTransaction}
-                bordered
+                  columns={columns}
+                  bordered
+                  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);
+                  }}
               />
             </div>
           </Col>
diff --git a/src/routes/app.js b/src/routes/app.js
index 9f2d29c..00ee1cf 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -12,7 +12,7 @@ import {Partner} from "../pages/Config/Partner";
 import {Supplier} from "../pages/Config/Supplier";
 import {Category} from "../pages/Product/Category";
 import {Payback} from "../pages/Payback/Payback";
-import {PaybackFromUser} from "../pages/Payback/PaybackFromUser";
+import {PaybackCreated} from "../pages/Payback/PaybackCreated";
 import {Subcategory} from "../pages/Product/Subcategory";
 
 export const LINKS = {
@@ -27,7 +27,7 @@ export const LINKS = {
     SUPPLIER: "/app/supplier",
     CATEGORY: "/app/category",
     PAYBACK: "/app/payback",
-    PAYBACK_FROM_USER: "/app/payback-from-user",
+    PAYBACK_CREATED: "/app/payback-created",
     SUBCATEGORY: "/app/subcategory",
     USER_DETAIL: "/app/user-detail",
     PRODUCT_DETAIL: "/app/product-detail",
@@ -47,8 +47,8 @@ export const AppRoute = () => {
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>
-        <Route path={LINKS.PAYBACK_FROM_USER}>
-            <PaybackFromUser/>
+        <Route path={LINKS.PAYBACK_CREATED}>
+            <PaybackCreated/>
         </Route>
         <Route path={LINKS.CATEGORY}>
             <Category/>
diff --git a/src/store/payback.js b/src/store/payback.js
index 366f530..592c673 100644
--- a/src/store/payback.js
+++ b/src/store/payback.js
@@ -2,50 +2,50 @@ import {makeAutoObservable} from "mobx";
 import {http} from "../utils/http";
 
 export class Payback {
-  page = 0;
-  pageSize = 10;
-  data = [];
-  total_data = 0;
+  pageCreated = 0;
+  pageSizeCreated = 10;
+  dataCreated = [];
+  totalDataCreated = 0;
   filterCategory = null;
   visibleModalPayback = false;
 
-  pagePaybackUser = 0;
-  pageSizePaybackUser = 10;
-  dataPaybackUser = [];
-  total_dataPaybackUser = 0;
+  pageConfirmation = 0;
+  pageSizeConfirmation = 10;
+  dataConfirmation = [];
+  totalDataConfirmation = 0;
 
   constructor(ctx) {
     this.ctx = ctx;
     makeAutoObservable(this);
   }
 
-  async getData() {
+  async getDataCreated() {
     try {
       const response = await http.get(
-          `/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}`
+          `/transaction/deposit-return?page=${this.pageCreated}&pageSize=${this.pageSizeCreated}`
       );
-      this.data = response.body.data.map((item, idx) => {
+      this.dataCreated = response.body.data.map((item, idx) => {
         item.key = idx;
         return item;
       }) ?? [];
 
-      this.total_data = response.body.count ?? 0;
+      this.totalDataCreated = response.body.count ?? 0;
     } catch (e) {
       console.error(e);
     }
   }
 
-  async getDataUser() {
+  async getDataConfirmation() {
     try {
       const response = await http.get(
-          `/transaction/deposit-return/confirmation?page=${this.pagePaybackUser}&pageSize=${this.pageSizePaybackUser}`
+          `/transaction/deposit-return/confirmation?page=${this.pageConfirmation}&pageSize=${this.pageSizeConfirmation}`
       );
-      this.dataPaybackUser = response.body.data.map((item, idx) => {
+      this.dataConfirmation = response.body.data.map((item, idx) => {
         item.key = idx;
         return item;
       }) ?? [];
 
-      this.total_dataPaybackUser = response.body.count ?? 0;
+      this.totalDataConfirmation = response.body.count ?? 0;
     } catch (e) {
       console.error(e);
     }
@@ -54,7 +54,7 @@ export class Payback {
   async update(id, data) {
     try {
       const response = await http.put(`/config/commission/${id}`).send(data);
-      await this.getData();
+      await this.getDataCreated();
       return response;
     } catch (e) {
       console.error(e);
@@ -64,7 +64,7 @@ export class Payback {
   async delete(id) {
     try {
       const response = await http.del(`/product/${id}`);
-      await this.getData();
+      await this.getDataCreated();
       return response;
     } catch (e) {
       console.error(e);
@@ -74,7 +74,20 @@ export class Payback {
   async create(data) {
     try {
       const response = await http.post("/transaction/deposit-return").send(data);
-      await this.getData();
+      await this.getDataCreated();
+      return response;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  async confirmPayback(id, data) {
+    try {
+      const response = await http.put(`/transaction/deposit-return/confirmation/${id}`).send(data);
+      await Promise.all([
+        this.getDataConfirmation(),
+        this.getDataCreated()
+      ])
       return response;
     } catch (e) {
       console.error(e);
diff --git a/src/store/transaction.js b/src/store/transaction.js
index cad1219..307f4bd 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -23,7 +23,7 @@ export class Transaction {
 
     pageHistoryTransaction = 0;
     pageHistoryTopUp = 0;
-    // pageSizeHistoryTransaction = 10
+    pageSizeHistoryTransaction = 10
     dataHistoryTransaction = [];
     total_dataHistoryTransaction = 0;
 
@@ -71,7 +71,7 @@ export class Transaction {
 
     async getDataHistoryTransaction() {
         try {
-            const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}`);
+            const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}`);
 
             this.dataHistoryTransaction = response.body.data ?? []
             this.total_dataHistoryTransaction = response?.body?.count ?? 0