diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index b3b80d6..696969b 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -1,14 +1,96 @@
-import React from "react";
-import { Button, PageHeader, Card, Row, Col } from "antd";
-import { store } from "../../utils/useStore";
+import React, { useContext, useEffect } from "react";
+import { Button, PageHeader, Card, Row, Col, message, Table } from "antd";
+import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
 import {
   DropboxOutlined,
   DollarCircleOutlined,
   BarChartOutlined,
 } from "@ant-design/icons";
+import { ModalLoaderContext } from "../../utils/modal";
 
 export const Home = observer(() => {
+  const modalLoader = useContext(ModalLoaderContext);
+  const store = useStore();
+  useEffect(() => {
+    const init = async () => {
+      try {
+        modalLoader.setLoading(true);
+        const isAdmin = store.authentication.userData.role === "Admin";
+        await getData();
+        await store.membership.getDataBySuperior();
+        await store.partner.getData();
+        await store.transaction.getDataTransaction();
+        await store.role.getData(isAdmin);
+        modalLoader.setLoading(false);
+      } catch (e) {
+        console.error(e);
+        modalLoader.setLoading(false);
+        if (e.response?.body?.message) {
+          message.error(e.response.body.message);
+          return;
+        }
+        message.error(e.message);
+      }
+    };
+
+    init();
+  }, []);
+  const getData = async () => {
+    store.authentication.userData.role === "Admin"
+      ? await store.membership.getData()
+      : await store.membership.getDataBySuperior();
+  };
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      render: (text, record) => record?.name ?? record?.username,
+    },
+    {
+      title: "Role",
+      dataIndex: "roleName",
+      key: "role",
+    },
+    {
+      title: "Saldo",
+      dataIndex: ["coa", "amount"],
+      key: ["coa", "amount"],
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    // {
+    //   title: "Action",
+    //   key: "action",
+    //   render: (text, record) => (
+    //     <Space size="middle">
+    //       <Button
+    //         onClick={() => {
+    //           setDestination(record?.id);
+    //           console.log(record?.id);
+    //           setIsVisibleTopUpModal(true);
+    //         }}
+    //       >
+    //         <DownloadOutlined /> Top Up Saldo
+    //       </Button>
+    //       <Button
+    //         onClick={async () => {
+    //           await store.transaction.getDataHistoryTopUp(record.id);
+    //           history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+    //           console.log(record.id);
+    //         }}
+    //       >
+    //         Detail
+    //       </Button>
+    //     </Space>
+    //   ),
+    // },
+  ];
   return (
     <div>
       {store.ui.mediaQuery.isDesktop && (
@@ -32,7 +114,9 @@ export const Home = observer(() => {
             <Row>
               <BarChartOutlined style={{ fontSize: 30 }} />
               <PageHeader title={<span>Total Transaksi</span>}>
-                <span>Total Transaksi : 25 Transaksi</span>
+                <p>
+                  <h4>{store.transaction.dataTransaction} Transaksi</h4>
+                </p>
               </PageHeader>
             </Row>
           </Card>
@@ -84,6 +168,78 @@ export const Home = observer(() => {
           </Card>
         </Row>
       )}
+      {store.authentication.userData.role === "Admin" &&
+        store.ui.mediaQuery.isDesktop && (
+          <Row style={{ marginLeft: 50, marginTop: 10 }}>
+            <Card
+              className={"shadow"}
+              title="Card title"
+              style={{
+                marginBottom: 30,
+                marginRight: 20,
+                borderColor: "salmon",
+                width: "47%",
+              }}
+            >
+              <Table
+                key="1"
+                hasEmpty
+                size="large"
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                }}
+              />
+            </Card>
+            <Card
+              className={"shadow"}
+              title="Card title"
+              style={{
+                marginBottom: 30,
+                borderColor: "salmon",
+                width: "47%",
+              }}
+            >
+              <Table
+                key="1"
+                hasEmpty
+                size="large"
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                }}
+              />
+            </Card>
+          </Row>
+        )}
       {store.ui.mediaQuery.isMobile && (
         <div style={{ marginTop: 10 }}>
           <Card
@@ -100,7 +256,9 @@ export const Home = observer(() => {
             <Row>
               <BarChartOutlined style={{ fontSize: 30 }} />
               <PageHeader title={<span>Total Transaksi</span>}>
-                <span>Total Transaksi : 25 Transaksi</span>
+                <p>
+                  <h4>{store.transaction.dataTransaction} Transaksi</h4>
+                </p>
               </PageHeader>
             </Row>
           </Card>
@@ -152,6 +310,75 @@ export const Home = observer(() => {
           </Card>
         </div>
       )}
+      {store.authentication.userData.role === "Admin" &&
+        store.ui.mediaQuery.isMobile && (
+          <Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}>
+            <Card
+              className={"shadow"}
+              title="Card title"
+              style={{
+                marginBottom: 10,
+                borderColor: "salmon",
+              }}
+            >
+              <Table
+                key="1"
+                hasEmpty
+                size="small"
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                }}
+              />
+            </Card>
+            <Card
+              className={"shadow"}
+              title="Card title"
+              style={{
+                marginBottom: 30,
+                borderColor: "salmon",
+              }}
+            >
+              <Table
+                key="1"
+                hasEmpty
+                size="small"
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                }}
+              />
+            </Card>
+          </Row>
+        )}
     </div>
   );
 });
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 58017d7..f079a0b 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -120,9 +120,9 @@ export const Profile = observer(() => {
   ];
   const columns = [
     {
-      title: "Markup Price",
-      dataIndex: "mark_up_price",
-      key: "mark_up_price",
+      title: "Price",
+      dataIndex: "price",
+      key: "price",
       width: "20%",
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
@@ -131,9 +131,9 @@ export const Profile = observer(() => {
         }).format(text),
     },
     {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
+      title: "Buyer",
+      dataIndex: "buyer",
+      key: "buyer",
       width: "50%",
     },
     {
@@ -141,9 +141,7 @@ export const Profile = observer(() => {
       dataIndex: "created_at",
       key: "created_at",
       render: (text, record) => {
-        return (
-          <Text>{format(parseISO(record.created_at), "mm:HH dd-MM-yyyy")}</Text>
-        );
+        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
       },
     },
   ];
@@ -208,7 +206,7 @@ export const Profile = observer(() => {
               </Col>
             </Row>
           </Col>
-          <Col>
+          <Col span={store.ui.mediaQuery.isMobile ? 10 : 5}>
             <Row justify={"center"}>
               <Col lg={12} xs={12}>
                 <Title strong level={3} style={styleSaldoTitle}>
@@ -226,7 +224,7 @@ export const Profile = observer(() => {
               <Col></Col>
             </Row>
           </Col>
-          <Col>
+          <Col span={store.ui.mediaQuery.isMobile ? 8 : 5}>
             <Row justify={"center"}>
               <Col lg={12} xs={12}>
                 <Title strong level={3} style={styleSaldoTitle}>
@@ -292,17 +290,13 @@ export const Profile = observer(() => {
       >
         <Row>
           <Col span={24}>
-            <Form
-              layout="vertical"
-              name="filter"
-              form={form}
-            >
+            <Form layout="vertical" name="filter" form={form}>
               <Form.Item
                 name="start_date"
                 label="Dari"
                 rules={[{ required: true, message: "Please input Date!" }]}
               >
-                <DatePicker style={{ width: "100%" }}/>
+                <DatePicker style={{ width: "100%" }} />
               </Form.Item>
               <Form.Item
                 name="end_date"
diff --git a/src/store/authentication.js b/src/store/authentication.js
index 2d2ee4d..6cde95a 100644
--- a/src/store/authentication.js
+++ b/src/store/authentication.js
@@ -2,6 +2,7 @@ import {makeAutoObservable, runInAction} from "mobx";
 import {TokenUtil} from "../utils/token";
 import {http} from "../utils/http";
 
+
 export class Authentication {
   isLoggedIn = false;
   isLoginLoading = false;
@@ -53,6 +54,7 @@ export class Authentication {
   async getProfile() {
     try {
       const response = await http.get('/auth/profile');
+      console.log(response)
       this.profileData = response.body;
     } catch (e) {
       console.error(e);
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 47cba84..32be61d 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -30,6 +30,7 @@ export class Transaction {
   pageSizeHistoryTopUp = 10;
   dataHistoryTopUp = [];
   total_dataHistoryTopUp = 0;
+  dataTransaction=[]
 
   //filter
   visibleModalFilterTransaction = false;
@@ -52,6 +53,19 @@ export class Transaction {
     }
   }
 
+  async getDataTransaction() {
+    try {
+      const response = await http.get(
+        `/transaction/total-order`
+      );
+      //console.log(response)
+      this.dataTransaction = response.body.data ?? [];
+      this.total_data = response?.body?.count ?? 0;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   async getDataSubCategories() {
     try {
       const response = await http.get(