diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 58b9970..fee5ac2 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -10,6 +10,7 @@ import {
   Typography,
   Tabs,
   List,
+  Tag,
   Divider,
 } from "antd";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -172,7 +173,23 @@ export const DetailUser = observer(() => {
       dataIndex: "status",
       key: "status",
       render: (text, record) => {
-        return <Text>{record.status === 1 ? "Success" : "Pending"}</Text>;
+        return (
+          <Tag
+            color={
+              record.status === 1
+                ? "success"
+                : record.status === 0
+                ? "warning"
+                : "processing"
+            }
+          >
+            {record.status === 1
+              ? "Success"
+              : record.status === 0
+              ? "Pending"
+              : "Failed"}
+          </Tag>
+        );
       },
     },
     {
@@ -434,6 +451,27 @@ export const DetailUser = observer(() => {
               </TabPane>
               <TabPane tab="History Transaction" key="2">
                 {store.ui.mediaQuery.isDesktop && (
+                  //   <Table
+                  //   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);
+                  //   }}
+                  // />
                   <Table
                     key="1"
                     hasEmpty
@@ -443,13 +481,9 @@ export const DetailUser = observer(() => {
                     }
                     bordered
                     pagination={{
-                      pageSize:
-                        store.transaction.pageSizeHistoryTransactionDetailUser,
-                      total:
-                        store.transaction
-                          .total_dataDetailHistoryTransactionDetailUser,
-                      current:
-                        store.transaction.pageHistoryTransactionDetailUser + 1,
+                      pageSize: store.transaction.pageSize,
+                      total: store.transaction.total_data,
+                      current: store.transaction.page + 1,
                       showSizeChanger: true,
                       simple: false,
                     }}
@@ -477,11 +511,13 @@ export const DetailUser = observer(() => {
                         modalLoader.setLoading(false);
                       },
                       pageSize: store.transaction.pageSize,
-                      total: store.transaction.totalData,
+                      total: store.transaction.total_data,
                       current: store.transaction.page + 1,
                       style: { marginBottom: "1rem", marginRight: "1rem" },
                     }}
-                    dataSource={store.membership.data}
+                    dataSource={
+                      store.transaction.dataDetailHistoryTransactionDetailUser
+                    }
                     style={{ padding: 0 }}
                     renderItem={(item) => {
                       return (
@@ -500,66 +536,61 @@ export const DetailUser = observer(() => {
                           >
                             <List.Item.Meta
                               className={["cariparkir-container"].join(" ")}
-                              title={item.name}
+                              title={item.buyer}
                               description={
                                 <div style={{}}>
                                   <p>
-                                    <small>Saldo System : {item.name}</small>{" "}
-                                    <br />
-                                    <small>Role : {item.roleName}</small> <br />
+                                    <small>Price : {item.price}</small> <br />
                                     <small>
-                                      Saldo Supplier : {item.coa?.amount}
+                                      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
+                                            ? "Success"
+                                            : item.status === 0
+                                            ? "Pending"
+                                            : "Failed"}
+                                        </Tag>
+                                      }
+                                    </small>{" "}
+                                    <br />
+                                    <small>
+                                      No.Seri : {item.seri_number}
+                                    </small>{" "}
+                                    <br />
+                                    <small>
+                                      IDTrx Mitra :{" "}
+                                      {item.partner_transaction_code}
+                                    </small>{" "}
+                                    <br />
+                                    <small>
+                                      Transaction Date :{" "}
+                                      {format(
+                                        parseISO(item.created_at),
+                                        "dd-MM-yyyy"
+                                      )}
                                     </small>{" "}
                                     <br />
-                                    {/* <Button
-                                      style={{ marginRight: 10 }}
-                                      onClick={() => {
-                                        setDestination(item?.id);
-                                        console.log(item?.id);
-                                        setIsVisibleTopUpModal(true);
-                                      }}
-                                    >
-                                      <DownloadOutlined /> Top Up Saldo
-                                    </Button>
-                                    <Button
-                                      onClick={async () => {
-                                        await store.transaction.getDataHistoryTopUp(
-                                          item.id
-                                        );
-                                        history.push(
-                                          LINKS.USER_DETAIL.replace(
-                                            ":id",
-                                            item.id
-                                          )
-                                        );
-                                        console.log(item.id);
-                                      }}
-                                    >
-                                      Detail
-                                    </Button> */}
                                   </p>
                                 </div>
                               }
                             />
-                            <div style={{ marginRight: 16 }}>
-                              <p
-                                style={{
-                                  fontSize: 9,
-                                  margin: 0,
-                                }}
-                              >
-                                {/* <Button
-                            type={
-                              item?.isActive === true ? "danger" : "primary"
-                            }
-                            onClick={() =>
-                              changeStatus(item?.id, item?.isActive)
-                            }
-                          >
-                            {item?.isActive === true ? "Inactive" : "Active"}
-                          </Button> */}
-                              </p>
-                            </div>
                           </List.Item>
                           <Divider plain style={{ margin: 0 }} />
                         </div>
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index a368fff..8c9f3fa 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -11,7 +11,8 @@ import {
   Form,
   Input,
   Divider,
-  List
+  List,
+  Tag,
 } from "antd";
 import moment from "moment";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -138,7 +139,23 @@ export const Profile = observer(() => {
       dataIndex: "status",
       key: "status",
       render: (text, record) => {
-        return <Text>{record.status === 1 ? "Success" : "Pending"}</Text>;
+        return (
+          <Tag
+            color={
+              record.status === 1
+                ? "success"
+                : record.status === 0
+                ? "warning"
+                : "processing"
+            }
+          >
+            {record.status === 1
+              ? "Success"
+              : record.status === 0
+              ? "Pending"
+              : "Failed"}
+          </Tag>
+        );
       },
     },
     {
@@ -300,66 +317,106 @@ export const Profile = observer(() => {
                 />
               )}
               {store.ui.mediaQuery.isMobile && (
-            <List
-              itemLayout="horizontal"
-              position={"top"}
-              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);
-              }}
-              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 : {item.status === 1 ? "Success" : "Pending"}</small> <br />
-                              <small>No.Seri : {item.seri_number}</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>
-                );
-              }}
-            />
-          )}
+                <List
+                  itemLayout="horizontal"
+                  position={"top"}
+                  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);
+                  }}
+                  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
+                                          ? "Success"
+                                          : item.status === 0
+                                          ? "Pending"
+                                          : "Failed"}
+                                      </Tag>
+                                    }
+                                  </small>{" "}
+                                  <br />
+                                  <small>
+                                    No.Seri : {item.seri_number}
+                                  </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>
           </Col>
         </Row>
diff --git a/src/store/transaction.js b/src/store/transaction.js
index d3095cd..343dfb3 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -6,9 +6,13 @@ export class Transaction {
   pageSize = 10;
   data = [];
   total_data = 0;
+
+
   filterSubCategory = null;
   visibleModalProduct = false;
   visibleModalTransaction = false;
+  pageSizeDetail=10;
+  pageDetail=0
 
   pageCategories = 0;
   pageSizeCategories = 10;
@@ -39,6 +43,7 @@ export class Transaction {
   dataTransaction = [];
   dataTransactionB2B = [];
   dataTransactionPartner = [];
+  total_dataDetailHistoryTransactionDetailUser=0;
 
   
   //filter
@@ -137,10 +142,10 @@ export class Transaction {
 
   async getDetailHistoryTransaction(id) {
     try {
-      const response = await http.get(`/transaction/history-user/${id}?page=${this.pageHistoryTransactionDetailUser}&pageSize=${this.pageSizeHistoryTransactionDetailUser}&start=${this.filterStartDetailUser}&end=${this.filterEndDetailUser}`);
+      const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStartDetailUser}&end=${this.filterEndDetailUser}`);
       console.log(response,'Data Trans');
       this.dataDetailHistoryTransactionDetailUser = response.body.data ?? [];
-      this.total_dataDetailHistoryTransactionDetailUser = response?.body?.count ?? 0;
+      this.total_data = response?.body?.count ?? 0;
     } catch (e) {
       console.error(e);
     }