diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js
index 9377b1f..c9f6a3e 100644
--- a/src/component/CategoryComponent.js
+++ b/src/component/CategoryComponent.js
@@ -8,7 +8,7 @@ import {
   Space,
   Table,
   List,
-  Divider
+  Divider,
 } from "antd";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
@@ -55,6 +55,8 @@ export const CategoryComponent = observer((props) => {
     },
   ];
 
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
+
   const deleteData = async (id) => {
     try {
       console.log(id);
diff --git a/src/component/SubcategoryComponent.js b/src/component/SubcategoryComponent.js
index 3400dba..1feca78 100644
--- a/src/component/SubcategoryComponent.js
+++ b/src/component/SubcategoryComponent.js
@@ -67,6 +67,8 @@ export const SubcategoryComponent = observer((props) => {
     },
   ];
 
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
+  
   const handleCancel = () => {
     setIdData("");
     store.subcategory.visibleModalSubcategory = false;
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index d3eed8f..49882b5 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -42,6 +42,7 @@ export const DetailUser = observer(() => {
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
   const [visibleHis, setVisibleHis] = useState(true);
+  const [actionFilter, setAction] = useState(false);
 
   useEffect(() => {
     (async () => {
@@ -326,19 +327,31 @@ export const DetailUser = observer(() => {
     form.resetFields();
     setFilterStart([]);
     setFilterEnd([]);
-    await store.transaction.getDetailHistoryTransaction(
-      store.authentication.dataProfit.id
-    );
+    actionFilter === true
+      ? await store.transaction.getDataHistoryTopUp(id)
+      : await store.transaction.getDetailHistoryTransaction(
+          store.authentication.dataProfit.id
+        );
+    // await store.transaction.getDetailHistoryTransaction(
+    //   store.authentication.dataProfit.id
+    // );
     store.transaction.visibleModalFilterTransaction = false;
+    setAction(false);
   };
 
   const handleCancelFilter = async () => {
     store.transaction.filterStart = null;
     store.transaction.filterEnd = null;
     store.transaction.visibleModalFilterTransaction = false;
-    await store.transaction.getDetailHistoryTransaction(
-      store.authentication.dataProfit.id
-    );
+    actionFilter === true
+      ? await store.transaction.getDataHistoryTopUp(id)
+      : await store.transaction.getDetailHistoryTransaction(
+          store.authentication.dataProfit.id
+        );
+    // await store.transaction.getDetailHistoryTransaction(
+    //   store.authentication.dataProfit.id
+    // );
+    setAction(false);
   };
 
   const handleSubmitFilter = async () => {
@@ -350,13 +363,16 @@ export const DetailUser = observer(() => {
       "YYYY-MM-DD HH:mm:ss"
     );
     modalLoader.setLoading(true);
-    await store.transaction.getDetailHistoryTransaction(
-      store.authentication.dataProfit.id
-    );
+    actionFilter === true
+      ? await store.transaction.getDataHistoryTopUp(id)
+      : await store.transaction.getDetailHistoryTransaction(
+          store.authentication.dataProfit.id
+        );
     modalLoader.setLoading(false);
     store.transaction.filterStart = null;
     store.transaction.filterEnd = null;
     store.transaction.visibleModalFilterTransaction = false;
+    setAction(false);
   };
   const footerLayoutFilter = [
     <Button
@@ -719,28 +735,121 @@ export const DetailUser = observer(() => {
           <Col span={24}>
             <Tabs defaultActiveKey="1">
               <TabPane tab="History Top Up" key="1">
-                <Table
-                  key="1"
-                  hasEmpty
-                  columns={columns}
-                  dataSource={store.transaction.dataHistoryTopUp}
-                  bordered
-                  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.pageSize = page.pageSize;
-                    store.transaction.page = pageNumber - 1;
-                    modalLoader.setLoading(true);
-                    await getData();
-                    modalLoader.setLoading(false);
-                  }}
-                />
+                {store.ui.mediaQuery.isDesktop && (
+                  <div>
+                    <Button
+                      style={{ marginBottom: "1rem", marginLeft: 5 }}
+                      onClick={() => {
+                        store.transaction.visibleModalFilterTransaction = true;
+                        setAction(true);
+                      }}
+                    >
+                      <FilterOutlined />
+                      Filter
+                    </Button>
+                    <Table
+                      key="1"
+                      hasEmpty
+                      columns={columns}
+                      dataSource={store.transaction.dataHistoryTopUp}
+                      bordered
+                      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.pageSize = page.pageSize;
+                        store.transaction.page = pageNumber - 1;
+                        modalLoader.setLoading(true);
+                        await getData();
+                        modalLoader.setLoading(false);
+                      }}
+                    />
+                  </div>
+                )}
+                {store.ui.mediaQuery.isMobile && (
+                  <div>
+                    <Button
+                      style={{ marginBottom: "1rem" }}
+                      onClick={() => {
+                        store.transaction.visibleModalFilterTransaction = true;
+                        setAction(true);
+                      }}
+                    >
+                      <FilterOutlined />
+                      Filter
+                    </Button>
+                    <List
+                      itemLayout="horizontal"
+                      position={"top"}
+                      pagination={{
+                        onChange: async (page, pageSize) => {
+                          store.transaction.pageSize = pageSize;
+                          store.transaction.page = page - 1;
+                          modalLoader.setLoading(true);
+                          await getData();
+                          modalLoader.setLoading(false);
+                        },
+                        pageSize: store.transaction.pageSize,
+                        total: store.transaction.total_data,
+                        current: store.transaction.page + 1,
+                        style: { marginBottom: "1rem", marginRight: "1rem" },
+                      }}
+                      dataSource={store.transaction.dataHistoryTopUp}
+                      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.sender_name}
+                                description={
+                                  <div style={{}}>
+                                    <p>
+                                      <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 hh:mm:ss"
+                                        )}
+                                      </small>{" "}
+                                      <br />
+                                    </p>
+                                  </div>
+                                }
+                              />
+                            </List.Item>
+                            <Divider plain style={{ margin: 0 }} />
+                          </div>
+                        );
+                      }}
+                    />
+                  </div>
+                )}
               </TabPane>
               <TabPane tab="History Transaction" key="2">
                 {store.ui.mediaQuery.isDesktop && (
@@ -922,7 +1031,12 @@ export const DetailUser = observer(() => {
           store.transaction.filterStart = null;
           store.transaction.filterEnd = null;
           store.transaction.visibleModalFilterTransaction = false;
-          await store.transaction.getDetailHistoryTransaction();
+          actionFilter === true
+            ? await store.transaction.getDataHistoryTopUp(id)
+            : await store.transaction.getDetailHistoryTransaction(
+                store.authentication.dataProfit.id
+              );
+          //await store.transaction.getDetailHistoryTransaction();
         }}
       >
         <Row>
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 13f13fa..219449d 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -168,7 +168,7 @@ export const Membership = observer(() => {
 
   const columns = [
     {
-      title: "Name",
+      title: "Nama",
       dataIndex: "name",
       key: "name",
       render: (text, record) => record?.name ?? record?.username,
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index cf8f514..1791a57 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -36,7 +36,7 @@ export const Profile = observer(() => {
   const modalLoader = useContext(ModalLoaderContext);
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
-  const [action, setAction] = useState(false);
+  const [actionFilter, setAction] = useState(false);
 
   const routeData = [
     {
@@ -77,8 +77,14 @@ export const Profile = observer(() => {
     form.resetFields();
     setFilterStart([]);
     setFilterEnd([]);
-    await store.transaction.getDataHistoryTransaction();
+    //await store.transaction.getDataHistoryTransaction();
+    actionFilter === true
+      ? await store.transaction.getDataHistoryTopUpProfile(
+          store.authentication.profileData?.id
+        )
+      : await store.transaction.getDataHistoryTransaction();
     store.transaction.visibleModalFilterTransaction = false;
+    setAction(false)
   };
 
   const handleCancelFilter = async () => {
@@ -86,7 +92,13 @@ export const Profile = observer(() => {
     //form.resetFields();
     store.transaction.filterEnd = null;
     store.transaction.visibleModalFilterTransaction = false;
-    await store.transaction.getDataHistoryTransaction();
+    actionFilter === true
+      ? await store.transaction.getDataHistoryTopUpProfile(
+          store.authentication.profileData?.id
+        )
+      : await store.transaction.getDataHistoryTransaction();
+      setAction(false)
+    //await store.transaction.getDataHistoryTransaction();
   };
 
   const handleSubmitFilter = async () => {
@@ -98,12 +110,17 @@ export const Profile = observer(() => {
       "YYYY-MM-DD HH:mm:ss"
     ));
     modalLoader.setLoading(true);
-    await store.transaction.getDataHistoryTransaction();
+    actionFilter === true
+      ? await store.transaction.getDataHistoryTopUpProfile(
+          store.authentication.profileData?.id
+        )
+      : await store.transaction.getDataHistoryTransaction();
     modalLoader.setLoading(false);
     store.transaction.filterStart = null;
     store.transaction.filterEnd = null;
     //form.resetFields();
     store.transaction.visibleModalFilterTransaction = false;
+    setAction(false)
   };
 
   const footerLayoutFilter = [
@@ -665,7 +682,11 @@ export const Profile = observer(() => {
           store.transaction.filterStart = null;
           store.transaction.filterEnd = null;
           store.transaction.visibleModalFilterTransaction = false;
-          await store.transaction.getDataHistoryTransaction();
+          actionFilter === true
+            ? await store.transaction.getDataHistoryTopUpProfile(
+                store.authentication.profileData?.id
+              )
+            : await store.transaction.getDataHistoryTransaction();
         }}
       >
         <Row>
diff --git a/src/store/transaction.js b/src/store/transaction.js
index a934936..62eefd4 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -158,7 +158,7 @@ export class Transaction {
   async getDataHistoryTopUp(id) {
     try {
       const response = await http.get(
-        `/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`
+        `/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}&start=${this.filterStart}&end=${this.filterEnd}`
       );
       console.log(response,'get data history')
       this.dataHistoryTopUp = response.body.data ?? [];