diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 35a5b06..a0fb07b 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -1,1164 +1,426 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import {
   Button,
-  Card,
-  Col,
+  Divider,
+  Form,
+  Input,
+  List,
   message,
-  Row,
+  Modal,
   Space,
   Table,
-  Typography,
-  Tabs,
-  List,
   Tag,
-  Divider,
-  Image,
-  Modal,
-  Form,
-  DatePicker,
 } from "antd";
-import { UserOutlined, FilterOutlined,ExportOutlined } from "@ant-design/icons";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { LINKS } from "../../routes/app";
-import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import { format, parseISO } from "date-fns";
-import { ModalLoaderContext } from "../../utils/modal";
-import { useParams } from "react-router-dom";
-import { appConfig } from "../../config/app";
-import { MembershipModal } from "./MembershipModal";
-import moment from "moment";
-import FileSaver from "file-saver";
+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";
 
-const { Title, Text } = Typography;
-const { TabPane } = Tabs;
-export const DetailUser = observer(() => {
+export const SupplierComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const [formExport] = Form.useForm();
+  const history = useHistory();
+  const [idData, setIdData] = useState("");
   const modalLoader = useContext(ModalLoaderContext);
-  const { id } = useParams();
-  const [visibleModal, setVisibleModal] = useState(false);
-  const [initialData, setInitialData] = useState({});
-  const [confirmLoading, setConfirmLoading] = useState(false);
-  const [filterStart, setFilterStart] = useState([]);
-  const [filterEnd, setFilterEnd] = useState([]);
-  const [visibleHis, setVisibleHis] = useState(true);
-  const [actionFilter, setAction] = useState(false);
-  const [modalExport, setModalExport] = useState(false);
 
-  useEffect(() => {
-    (async () => {
-      modalLoader.setLoading(true);
-      await getData();
-      modalLoader.setLoading(false);
-    })();
-
-    return () => {
-      store.membership.dataDetail = {};
-      store.transaction.dataHistoryTopUp = [];
-      store.authentication.dataProfit = [];
-      store.transaction.dataDetailHistoryTransaction = [];
-    };
-  }, []);
-
-  const getData = async () => {
-    const isAdmin = store.authentication.userData.role === "Admin";
-    await Promise.allSettled([
-      store.transaction.getDataHistoryTopUp(id),
-      store.authentication.getProfit(id),
-      store.authentication.getProfile(),
-      store.transaction.getDetailHistoryTransaction(id),
-      store.membership.getDetail(id),
-      store.role.getData(isAdmin),
-    ]);
+  const handleEditButton = (data) => {
+    console.log(data, "isi data");
+    form.setFieldsValue({
+      name: data.name,
+      code: data.code,
+      status: data.status,
+    });
+    store.supplier.visibleModalSupplier = true;
+    setIdData(data.id);
   };
 
-  const changeStatus = async (id, is_active) => {
-    let status = is_active ? "inactive" : "active";
-    let status2 = is_active ? "Inactivating" : "Activating";
-    console.log(status, "status terbaru");
+  const handleTopup = (data) => {
+    console.log(data, "isi data");
+    form.setFieldsValue({
+      code: data.code,
+    });
+    store.supplier.visibleModalTransaction = true;
+    store.supplier.code = data.code;
+  };
+
+  const changeStatus = async (id, isActive) => {
+    const status = isActive ? "inactive" : "active";
+    const status2 = isActive ? "Inactivating" : "Activating";
     try {
       modalLoader.setLoading(true);
-      const response = await store.membership.changeStatus(id, status);
+      const response = await store.supplier.changeStatus(id, status);
       modalLoader.setLoading(false);
-      response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-        ? message.success(`Success ${status2} Membership`)
-        : message.error(`Failed ${status2} Membership`);
-      await getData();
+      response?.body?.statusCode === 201
+          ? message.success(`Success ${status2} Supplier`)
+          : message.error(`Failed ${status2} Supplier`);
     } catch (err) {
       modalLoader.setLoading(false);
-      message.error(`Failed ${status2} Membership`);
-    }
-  };
-
-  const withdrawProfit = async (id) => {
-    try {
-      modalLoader.setLoading(true);
-      const response = await store.membership.withdrawProfit(id);
-      modalLoader.setLoading(false);
-
-      response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-        ? message.success(`Success Withdraw Profit`)
-        : message.error(`Failed Withdraw Profit`);
-      await getData();
-    } catch (err) {
-      modalLoader.setLoading(false);
-      message.error(`Failed Withdraw Profit`);
-    }
-  };
-
-  const onSubmit = async (data) => {
-    data.superior = true;
-    setConfirmLoading(true);
-    modalLoader.setLoading(true);
-    try {
-      let response;
-      if (initialData.isChangePassword) {
-        response = await store.membership.changePassword(initialData.id, data);
-      } else {
-        response = await store.membership.update(initialData.id, data);
-      }
-
-      setVisibleModal(false);
-
-      if (response?.body?.statusCode === 200) {
-        message.success(
-          initialData.isChangePassword
-            ? "Success Change Member Password"
-            : "Success Update Data Member"
-        );
-      } else {
-        message.error(
-          initialData.isChangePassword
-            ? "Failed Change Member Password"
-            : "Failed Update Data Member"
-        );
-      }
-      await getData();
-    } catch (e) {
-      modalLoader.setLoading(false);
-      message.error(
-        initialData.isChangePassword
-          ? "Failed Update Member Password"
-          : "Failed Update Data Member"
-      );
-    }
-    modalLoader.setLoading(false);
-    setConfirmLoading(false);
-  };
-
-  const handleResend = async (id) => {
-    modalLoader.setLoading(true);
-    try {
-      const response = await store.approval.resendUser(id);
-      console.log(response);
-      response.body.statusCode !== 201 && response.body.statusCode !== 200
-        ? message.error(response?.body?.message || `Failed Approve`)
-        : message.success(response?.body?.message || `Success Approve`);
-      await getData();
-    } catch (e) {
-      console.error(e, "apa errornya");
-      message.error(e.response?.body?.message || "Fail Approve");
-    }
-    modalLoader.setLoading(false);
-  };
-
-  const handleSubmitExport = async () => {
-    const date = formExport.getFieldsValue();
-    const dataDate ={
-      dateStart: moment(date.tanggal_export).format("YYYY-MM-DD")
-    }
-    modalLoader.setLoading(true);
-    try {
-      await store.transaction.exportTransaction(store.membership.dataDetail, dataDate)
-        // console.log('responseiniyak', response);
-        // message.success("Success export");
-        setModalExport(false);
-        modalLoader.setLoading(false);
-     } catch (e) {
-      setModalExport(false);
-      console.error(e, "apa errornya");
-      message.error(e.response?.body?.message || "Failed to export");
-      modalLoader.setLoading(false);
+      console.log("error", err);
+      message.error(`Failed ${status2} Supplier`);
     }
   };
 
   const columns = [
     {
-      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: "Tanggal Transaksi",
-      dataIndex: "transaction_date",
-      key: "transaction_date",
-      render: (text, record) => {
-        return (
-          <Text>
-            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
-          </Text>
-        );
-      },
-    },
-  ];
-
-  const column = [
-    {
-      title: "Nama Produk",
+      title: "Nama",
       dataIndex: "name",
       key: "name",
     },
     {
-      title: "Supplier",
-      dataIndex: "supplier_name",
-      key: "supplier_name",
+      title: "Kode",
+      dataIndex: "code",
+      key: "code",
+      width: "5%",
     },
     {
-      title: "Profit Produk",
-      dataIndex: "mark_up_price",
-      key: "mark_up_price",
+      title: "Saldo di Supplier",
+      dataIndex: ["coa", "amount"],
+      key: ["coa", "amount"],
+      width: "20%",
+      render: (text, record) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
-      title: "Harga",
-      dataIndex: "price",
-      key: "price",
-      render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
-    },
-    {
-      title: "Sisa Saldo",
-      dataIndex: "balance_remaining",
-      key: "balance_remaining",
-      render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
-    },
-    {
-      title: "Pembeli",
-      dataIndex: "buyer",
-      key: "buyer",
-    },
-    {
-      title: "Tujuan",
-      dataIndex: "transaction_destination",
-      key: "transaction_destination",
-    },
-    {
-      title: "Kode Transaksi",
-      dataIndex: "transaction_code",
-      key: "transaction_code",
+      title: "Saldo di System",
+      dataIndex: ["coa_undistribute", "amount"],
+      key: ["coa_undistribute", "amount"],
+      width: "20%",
+      render: (text, record) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Status",
       dataIndex: "status",
       key: "status",
-      render: (text, record) => {
-        return (
+      width: "5%",
+      render: (text, record) => (
           <Tag
-            color={
-              record.status === 1
-                ? "success"
-                : record.status === 0
-                  ? "warning"
-                  : "processing"
-            }
+              color={record?.status === true ? "processing" : "#E3E8EE"}
+              style={{ color: "#4F566B" }}
           >
-            {record.status === 1
-              ? "Success"
-              : record.status === 0
-                ? "Pending"
-                : "Failed"}
+            {record?.status === true ? " ACTIVE" : "INACTIVE"}
           </Tag>
-        );
-      },
+      ),
     },
     {
-      title: "No Seri",
-      dataIndex: "seri_number",
-      key: "seri_number",
-    },
-    {
-      title: "IDTrx Mitra",
-      dataIndex: "partner_transaction_code",
-      key: "partner_transaction_code",
-    },
-    {
-      title: "Tanggal Transaksi",
-      dataIndex: "created_at",
-      key: "created_at",
-      width: "15%",
-      render: (text, record) => {
-        return (
-          <Text>
-            {format(parseISO(record.created_at), "MM-dd-yyyy HH:mm:ss")}
-          </Text>
-        );
-      },
-    },
-    {
-      title: "Alasan Gagal",
-      dataIndex: "failed_reason",
-      key: "failed_reason",
-    },
-  ];
-  if (store.authentication.userData.role !== "Admin") delete column[1];
-  if (store.authentication.userData.role !== "Admin") delete column[2];
-  if (store.authentication.userData.role !== "Admin") delete column[4];
-
-  const routeData = [
-    {
-      route: LINKS.HOME,
-      name: "Beranda",
-    },
-    {
-      route: LINKS.MEMBERSHIP,
-      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
-    },
-    {
-      route: LINKS.USER_DETAIL.replace(":id", id),
-      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
-    },
-  ];
-
-  const dataRoute = [
-    {
-      route: LINKS.MEMBERSHIP,
-      name: "Keanggotaan",
-    },
-    {
-      route: LINKS.USER_DETAIL.replace(":id", id),
-      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
-    },
-  ];
-
-  const styleSaldoTitle = store.ui.mediaQuery.isDesktop
-    ? {
-      display: "flex",
-      justifyContent: "center",
-    }
-    : { fontSize: "0.75rem" };
-  const styleSaldoContent = store.ui.mediaQuery.isDesktop
-    ? {
-      fontSize: "1.25rem",
-      display: "flex",
-      justifyContent: "center",
-    }
-    : null;
-  const data = store.authentication.listImage;
-  console.log(data, "ini data");
-  console.log(
-    store.authentication.dataProfit.userDetail?.image_identity,
-    "detail"
-  );
-
-  const handleRemoveFilter = async () => {
-    store.transaction.filterStart = null;
-    store.transaction.filterEnd = null;
-    form.resetFields();
-    setFilterStart([]);
-    setFilterEnd([]);
-    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;
-    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 () => {
-    const data = form.getFieldsValue();
-    store.transaction.filterStart = moment(data.start_date).format(
-        "YYYY-MM-DD"
-    ) + " 00:00:00";
-    store.transaction.filterEnd = moment(data.end_date).format(
-        "YYYY-MM-DD"
-    ) + " 23:59:59";
-    modalLoader.setLoading(true);
-    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
-      key={"remove"}
-      onClick={handleRemoveFilter}
-      style={{
-        backgroundColor: "#e74e5e",
-        color: "#fff",
-      }}
-    >
-      Hapus Filter
-    </Button>,
-    <Button key={"cancel"} onClick={handleCancelFilter}>
-      Batal
-    </Button>,
-    <Button
-      key={"submit"}
-      onClick={handleSubmitFilter}
-      style={{
-        backgroundColor: "#4e79e7",
-        color: "#fff",
-      }}
-    >
-      Terapkan
-    </Button>,
-  ];
-  return (
-    <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent
-        data={
-          store.authentication.userData.role === "Admin" ? routeData : dataRoute
-        }
-      />
-      <Card>
-        <Row style={{ marginBottom: 10 }}>
-          <Title strong level={2}>
-            Detail User
-          </Title>
-          <Col
-            lg={store.authentication.userData.role === "Admin" ? 18 : 17}
-            xs={store.authentication.userData.role === "Admin" ? 18 : 17}
-            style={{ textAlign: "right" }}
-          >
-            <Space
-              size="small"
-              align={"center"}
-              wrap={true}
-              style={{ textAlign: "center" }}
+      title: "Tindakan",
+      key: "action",
+      width: "20%",
+      render: (text, record) => (
+          <Space size="middle">
+            <Button
+                type={record?.status === true ? "danger" : "primary"}
+                onClick={() => changeStatus(record?.id, record?.status)}
             >
-              {store.authentication.userData.role === "Admin" && (
-                <Space>
-                  <Button
-                    type={
-                      store.membership.dataDetail.is_active === true
-                        ? "danger"
-                        : "primary"
-                    }
-                    onClick={() =>
-                      changeStatus(
-                        store.membership.dataDetail.id,
-                        store.membership.dataDetail.is_active
-                      )
-                    }
-                  >
-                    {store.membership.dataDetail.is_active === true
-                      ? "Inactive"
-                      : "Active"}
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setInitialData({
-                        id: store.membership.dataDetail.id,
-                        code: store.membership.dataDetail.partner.code,
-                        name: store.membership.dataDetail.userDetail.name,
-                        username: store.membership.dataDetail.username,
-                        identity_number:
-                          store.membership.dataDetail.userDetail
-                            .identity_number,
-                        image_identity:
-                          store.membership.dataDetail?.userDetail
-                            .image_identity,
-                        image_store:
-                          store.membership.dataDetail?.userDetail.image_store,
-                        phone_number:
-                          store.membership.dataDetail.userDetail.phone_number,
-                        roleId: store.membership.dataDetail.roles.id,
-                        isChangePassword: false,
-                      });
-                      console.log(
-                        store.membership.dataDetail.userDetail.identity_number
-                      );
-                      console.log(store.membership.dataDetail.userDetail.id);
-                      console.log(
-                        store.membership.dataDetail.userDetail.image_identity
-                      );
-                      console.log(
-                        store.membership.dataDetail.userDetail.image_store,
-                        "ini store"
-                      );
-                      console.log(store.membership.dataDetail.username);
-                      setVisibleModal(true);
-                    }}
-                  >
-                    Edit
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setInitialData({
-                        id: store.membership.dataDetail.id,
-                        name: store.membership.dataDetail.userDetail.name,
-                        username: store.membership.dataDetail.username,
-                        phone_number:
-                          store.membership.dataDetail.userDetail.phone_number,
-                        roleId: store.membership.dataDetail.roles.id,
-                        isChangePassword: true,
-                      });
-                      setVisibleModal(true);
-                    }}
-                  >
-                    Ganti Password
-                  </Button>
-                </Space>
-              )}
-              {((store.authentication.userData.role === "Sales" &&
-                store.membership.dataDetail.is_rejected === true &&
-                store.membership.dataDetail.is_active === false) ||
-                (store.authentication.userData.role === "Supervisor" &&
-                  store.membership.dataDetail.is_rejected === true &&
-                  store.membership.dataDetail.is_active === false)) && (
-                  <Button
-                    style={{
-                      backgroundColor: "#1bb91d",
-                      color: "#fff",
-                    }}
-                    onClick={() => handleResend(store.membership.dataDetail.id)}
-                  >
-                    Resend
-                  </Button>
-                )}
-              {store.authentication.userData.role === "Admin" && (
-                <>
-                <Button
-                  onClick={() => withdrawProfit(store.membership.dataDetail.id)}
-                >
-                  Withdraw Profit
-                </Button>
-                <Button
-                  onClick={() => setModalExport(true)}
-                >
-                  <ExportOutlined /> Export
-                </Button>
-                </>
-              )}
-            </Space>
-          </Col>
-        </Row>
-        <Row style={{ marginBottom: 20 }}>
-          <Col lg={12} xs={24}>
-            <Row>
-              <Col span={12}>
-                <Text strong>Name</Text>
-              </Col>
-              <Col span={12}>
-                <Text>{store.authentication.dataProfit.userDetail?.name}</Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Username</Text>
-              </Col>
-              <Col span={12}>
-                <Text>{store.authentication.dataProfit.username}</Text>
-              </Col>
-              {/* <Col span={12}>
-                <Text strong>Role</Text>
-              </Col>
-              <Col span={12}>
-                <Text>{store.authentication.dataProfit.roles?.name}</Text>
-              </Col> */}
-              <Col span={12}>
-                <Text strong>Phone Number</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {store.authentication.dataProfit.userDetail?.phone_number}
-                </Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Id Number</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {store.authentication.dataProfit.userDetail?.identity_number}
-                </Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Code</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {store.authentication.dataProfit.partner?.code}
-                </Text>
-              </Col>
-              <Col span={12}>
-                <Text strong>Status</Text>
-              </Col>
-              <Col span={12}>
-                <Text>
-                  {store.authentication.dataProfit.is_active === true
-                    ? "Aktif"
-                    : "Inaktif"}
-                </Text>
-              </Col>
-              {store.authentication.userData.role === "Admin" &&
-                store.authentication.dataProfit.roles?.name !==
-                "Admin Partner" && (
-                  <Row>
-                    <Col span={12}>
-                      <Text strong>Foto Identitas</Text>
-                    </Col>
-                    <Col span={12}></Col>
-                    <Col span={12}>
-                      <Text>
-                        <Image
-                          src={
-                            store.authentication.dataProfit.userDetail
-                              ?.image_identity
-                              ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
-                              : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                          }
-                          style={{ width: "8vw" }}
-                        />
-                      </Text>
-                    </Col>
-                    {store.authentication.dataProfit.roles?.name ===
-                      "Retail" && (
-                        <Col span={24}>
-                          <Text strong>Foto Toko</Text>
-                          <Text>
-                            <Row>
-                              {store.authentication.listImage
-                                ? store.authentication.listImage.map(
-                                  (item, index) => (
-                                    <Image
-                                      key={index}
-                                      src={
-                                        item
-                                          ? `${appConfig.apiUrl}/config/image/${item}`
-                                          : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                                      }
-                                      style={{ width: "8vw", marginRight: 10 }}
-                                    />
-                                  )
-                                )
-                                : ""}
-                            </Row>
-                          </Text>
-                        </Col>
-                      )}
-                  </Row>
-                )}
-              {store.authentication.userData.role === "Sales" && (
-                <Row>
-                  <Col span={12}>
-                    <Text strong>Foto Identitas</Text>
-                  </Col>
-                  <Col span={12}></Col>
-                  <Col span={12}>
-                    <Text>
-                      <Image
-                        src={
-                          store.authentication.dataProfit.userDetail
-                            ?.image_identity
-                            ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
-                            : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                        }
-                        style={{ width: "10vw" }}
-                      />
-                    </Text>
-                  </Col>
-                  <Col span={24}>
-                    <Text strong>Foto Toko</Text>
-                    <Text>
-                      <Row>
-                        {store.authentication.listImage
-                          ? store.authentication.listImage.map(
-                            (item, index) => (
-                              <Image
-                                key={index}
-                                src={
-                                  item
-                                    ? `${appConfig.apiUrl}/config/image/${item}`
-                                    : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                                }
-                                style={{ width: "10vw", marginRight: 15 }}
-                              />
-                            )
-                          )
-                          : ""}
-                      </Row>
-                    </Text>
-                  </Col>
-                </Row>
-              )}
-              {store.authentication.userData.role === "Supervisor" && (
-                <Row>
-                  <Col span={12}>
-                    <Text strong>Foto Identitas</Text>
-                  </Col>
-                  <Col span={12}></Col>
-                  <Col span={12}>
-                    <Text>
-                      <Image
-                        src={
-                          store.authentication.dataProfit.userDetail
-                            ?.image_identity
-                            ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
-                            : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                        }
-                        style={{ width: "10vw" }}
-                      />
-                    </Text>
-                  </Col>
-                </Row>
-              )}
-            </Row>
-          </Col>
-          <Col lg={12} xs={24}>
-            <Row>
-              <Col lg={24} xs={24}>
-                <Row>
-                  <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
-                    <Row justify={"center"}>
-                      <Col lg={12} xs={12}>
-                        <Title strong level={3} style={styleSaldoTitle}>
-                          Saldo
-                        </Title>
-                      </Col>
-                      <Col lg={24} xs={12}>
-                        <Text style={styleSaldoContent}>
-                          {new Intl.NumberFormat("id-ID", {
-                            style: "currency",
-                            currency: "IDR",
-                          }).format(
-                            store.authentication.dataProfit.wallet || 0
-                          )}
-                        </Text>
-                      </Col>
-                      <Col></Col>
-                    </Row>
-                  </Col>
-                  <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
-                    <Row justify={"center"}>
-                      <Col lg={12} xs={12}>
-                        <Title strong level={3} style={styleSaldoTitle}>
-                          Keuntungan
-                        </Title>
-                      </Col>
-                      <Col lg={24} xs={12}>
-                        <Text style={styleSaldoContent}>
-                          {new Intl.NumberFormat("id-ID", {
-                            style: "currency",
-                            currency: "IDR",
-                          }).format(
-                            store.authentication.dataProfit?.profit || 0
-                          )}
-                        </Text>
-                      </Col>
-                      <Col></Col>
-                    </Row>
-                  </Col>
-                </Row>
-              </Col>
-            </Row>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24}>
-            <Tabs defaultActiveKey="1">
-              <TabPane tab="Riwayat Top Up" key="1">
-                {store.ui.mediaQuery.isDesktop && (
-                  <div>
-                    <Button
-                      style={{ marginBottom: "1rem", marginLeft: 5 }}
-                      onClick={() => {
-                        store.transaction.visibleModalFilterTransaction = true;
-                        store.transaction.page = 0;
-                        setAction(true);
-                      }}
-                    >
-                      <FilterOutlined />
-                      Filter
-                    </Button>
-                    <Table
-                      key="1"
-                      hasEmpty
-                      columns={columns}
-                      dataSource={store.transaction.dataHistoryTopUp}
-                      bordered
-                      pagination={{
-                        pageSize: store.transaction.pageSizeHistoryTopUp,
-                        total: store.transaction.total_dataHistoryTopUp,
-                        current: store.transaction.pageHistoryTopUp + 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;
-                        store.transaction.page = 0;
-                        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="Riwayat Transaksi" key="2">
-                {store.ui.mediaQuery.isDesktop && (
-                  <div>
-                    <Button
-                      style={{ marginBottom: "1rem", marginLeft: 5 }}
-                      onClick={() => {
-                        store.transaction.visibleModalFilterTransaction = true;
-                        store.transaction.page = 0;
-                      }}
-                    >
-                      <FilterOutlined />
-                      Filter
-                    </Button>
-                    <Table
-                      key="1"
-                      hasEmpty
-                      scroll={{ x: 1300 }}
-                      columns={column}
-                      dataSource={
-                        store.transaction.dataDetailHistoryTransactionDetailUser
-                      }
-                      bordered
-                      pagination={store.transaction.total_data > 1000 ? {
-                        pageSizeOptions : [10, 20, 50, 100, 1000],
-                        pageSize: store.transaction.pageSize,
-                        total: store.transaction.total_data,
-                        current: store.transaction.page + 1,
-                        showSizeChanger: true,
-                        simple: false,
-                          } :
-                          {
-                            pageSize: store.transaction.pageSize,
-                            total: store.transaction.total_data,
-                            current: store.transaction.page + 1,
-                            showSizeChanger: true,
-                            simple: false,
-                          }
+              {record?.status === true ? "INACTIVE" : "ACTIVE"}
+            </Button>
+            <Button onClick={() => handleTopup(record)}> Top Up Saldo</Button>
+            <Button onClick={() => handleEditButton(record)}>Edit</Button>
+          </Space>
+      ),
+    },
+  ];
 
-                    }
-                      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>
-                )}
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
 
-                {store.ui.mediaQuery.isMobile && (
-                  <div>
-                    <Button
-                      style={{ marginBottom: "1rem" }}
-                      onClick={() => {
-                        store.transaction.visibleModalFilterTransaction = true;
-                        store.transaction.page = 0;
-                      }}
-                    >
-                      <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.dataDetailHistoryTransactionDetailUser
-                      }
-                      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={[""].join(" ")}
-                                title={item.name}
-                                description={
-                                  <div style={{}}>
-                                    <p>
-                                      <small>Pembeli : {item.buyer}</small>{" "}
-                                      <br />
-                                      <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 hh:mm:ss"
-                                        )}
-                                      </small>{" "}
-                                      <br />
-                                    </p>
-                                  </div>
-                                }
-                              />
-                            </List.Item>
-                            <Divider plain style={{ margin: 0 }} />
-                          </div>
-                        );
-                      }}
-                    />
-                  </div>
-                )}
-              </TabPane>
-            </Tabs>
-          </Col>
-        </Row>
-        <div />
-      </Card>
-      <MembershipModal
-        visible={visibleModal}
-        confirmLoading={confirmLoading}
-        initialData={initialData}
-        onCreate={async (data) => {
-          onSubmit(data);
-        }}
-        onCancel={() => {
-          setInitialData({});
-          setVisibleModal(false);
-        }}
-      />
-      <Modal
-        visible={store.transaction.visibleModalFilterTransaction}
-        title={"Filter"}
-        footer={footerLayoutFilter}
-        onCancel={async () => {
-          //form.resetFields();
-          store.transaction.filterStart = null;
-          store.transaction.filterEnd = null;
-          store.transaction.visibleModalFilterTransaction = false;
-          actionFilter === true
-            ? await store.transaction.getDataHistoryTopUp(id)
-            : await store.transaction.getDetailHistoryTransaction(
-              store.authentication.dataProfit.id
+  const deleteData = async (id) => {
+    try {
+      console.log(id);
+      modalLoader.setLoading(true);
+      await store.supplier.delete(id);
+      modalLoader.setLoading(false);
+      message.success("Data Berhasil Dihapus");
+      history.push(LINKS.PRODUCT);
+    } catch (err) {
+      modalLoader.setLoading(false);
+      console.log("error", err);
+      message.error("Gagal menghapus");
+    }
+  };
+
+  const handleDelete = (id) => {
+    Modal.confirm({
+      title: "Are you sure delete this record?",
+      icon: <ExclamationCircleOutlined />,
+      okText: "Yes",
+      okType: "primary",
+      cancelText: "Batal",
+      onOk() {
+        return deleteData(id);
+      },
+      onCancel() {
+        console.log("Batal");
+      },
+    });
+  };
+
+  const handleCancel = () => {
+    setIdData("");
+    store.supplier.visibleModalSupplier = false;
+  };
+
+  const handleSubmit = async (data) => {
+    console.log(data, "isi data2");
+    if (idData !== "") {
+      try {
+        modalLoader.setLoading(true);
+        const response = await store.supplier.update(idData, data);
+        response?.body?.statusCode === 201 || response?.body?.statusCode === 200
+            ? message.success(
+                response?.body?.message || "Berhasil Ubah Data Supplier"
+            )
+            : message.error(
+                response?.body?.message || "Gagal Ubah Data Supplier"
             );
-          //await store.transaction.getDetailHistoryTransaction();
-        }}
-      >
-        <Row>
-          <Col span={24}>
-            <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%" }} />
-              </Form.Item>
-              <Form.Item
-                name="end_date"
-                label="Sampai"
-                rules={[{ required: true, message: "Please input Date!" }]}
-              >
-                <DatePicker style={{ width: "100%" }} />
-              </Form.Item>
-            </Form>
-          </Col>
-        </Row>
-      </Modal>
-       <Modal
-        visible={modalExport}
-        title={"Export"}
-				onOk={handleSubmitExport}
-        onCancel={() => {
-          setModalExport(false);
-        }}
-      >
-        <Row>
-          <Col span={24}>
-            <Form layout="vertical" name="filter" form={formExport}>
-              <Form.Item
-                name="tanggal_export"
-                label="Tanggal"
-                rules={[{ required: true, message: "Please input Date!" }]}
-              >
-                <DatePicker style={{ width: "100%" }} />
-              </Form.Item>
-            </Form>
-          </Col>
-        </Row>
-      </Modal>
-    </div>
+      } catch (e) {
+        modalLoader.setLoading(false);
+        message.error(e.response?.body?.message || "Gagal Ubah Data Supplier");
+      }
+
+      modalLoader.setLoading(false);
+      store.supplier.visibleModalSupplier = false;
+      setIdData("");
+      form.resetFields();
+    } else {
+      try {
+        const response = await store.supplier.create(data);
+        if (response.status === 201) {
+          message.success(
+              response?.body?.message || "Berhasil Tambah Supplier"
+          );
+          await store.supplier.getData();
+        } else {
+          message.error(response?.body?.error || "Gagal Tambah Supplier", 3);
+        }
+      } catch (e) {
+        console.log("testingan");
+        console.log(e.response, "testingan");
+        console.log(e.result, "testingan1");
+        if (e.response?.body?.error) {
+          message.error(
+              e.response.body.error
+                  ? "Supplier Tersebut Sudah Terdaftar"
+                  : e.response.body.error
+          );
+          modalLoader.setLoading(false);
+          store.supplier.visibleModalSupplier = false;
+          return;
+        }
+        console.log(e, "apa errornya");
+        message.error("Gagal Tambah Supplier");
+      }
+
+      modalLoader.setLoading(false);
+      store.supplier.visibleModalSupplier = false;
+      setIdData("");
+      form.resetFields();
+      await store.supplier.getData();
+    }
+  };
+
+  return (
+      <div>
+        {store.ui.mediaQuery.isDesktop && (
+            <Table
+                style={{ textAlign: "center" }}
+                columns={columns}
+                dataSource={store.supplier.data}
+                bordered
+                pagination={{
+                  pageSize: store.supplier.pageSize,
+                  total: store.supplier.total_data,
+                  current: store.supplier.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.supplier.pageSize = page.pageSize;
+                  store.supplier.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await store.supplier.getData();
+                  modalLoader.setLoading(false);
+                }}
+            />
+        )}
+        {store.ui.mediaQuery.isMobile && (
+            <List
+                itemLayout="horizontal"
+                position={"top"}
+                pagination={{
+                  onChange: async (page, pageSize) => {
+                    store.supplier.pageSize = pageSize;
+                    store.supplier.page = page - 1;
+                    modalLoader.setLoading(true);
+                    await store.supplier.getData();
+                    modalLoader.setLoading(false);
+                  },
+                  pageSize: store.supplier.pageSize,
+                  total: store.supplier.total_data,
+                  current: store.supplier.page + 1,
+                  style: { marginBottom: "1rem", marginRight: "1rem" },
+                }}
+                dataSource={store.supplier.data}
+                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={[""].join(" ")}
+                              title={item.code}
+                              description={
+                                <div style={{}}>
+                                  <p>
+                                    <small>Name : {item.name}</small> <br />
+                                    <small>Saldo Supplier : {item.coa.amount}</small>
+                                    <br />
+                                    <small>
+                                      Saldo System : {item.coa_undistribute.amount}
+                                    </small>
+                                    <br />
+                                    <Button
+                                        style={{
+                                          marginRight: 10,
+                                        }}
+                                        type={item?.status === true ? "danger" : "primary"}
+                                        onClick={() => changeStatus(item?.id, item?.status)}
+                                    >
+                                      {item?.status === true ? "INACTIVE" : "ACTIVE"}
+                                    </Button>
+                                    <Button
+                                        onClick={() => handleTopup(item)}
+                                        style={{
+                                          marginRight: 10,
+                                        }}
+                                    >
+                                      Top Up Saldo
+                                    </Button>
+                                    <Button
+                                        onClick={() => handleEditButton(item)}
+                                        style={{
+                                          marginBottom: 5,
+                                        }}
+                                    >
+                                      Edit
+                                    </Button>
+                                    <Tag
+                                        color={
+                                          item?.status === true ? "processing" : "#E3E8EE"
+                                        }
+                                        style={{ color: "#4F566B" }}
+                                    >
+                                      {item?.status === true ? " ACTIVE" : "INACTIVE"}
+                                    </Tag>
+                                  </p>
+                                  <p></p>
+                                </div>
+                              }
+                          />
+                        </List.Item>
+                        <Divider plain style={{ margin: 0 }} />
+                      </div>
+                  );
+                }}
+            />
+        )}
+        <Modal
+            visible={store.supplier.visibleModalSupplier}
+            title={idData ? "Edit Supplier" : "Buat Supplier Baru"}
+            okText={idData ? "Edit" : "Buat"}
+            cancelText="Batal"
+            onCancel={() => {
+              form.resetFields();
+              handleCancel();
+            }}
+            onOk={() => {
+              form
+                  .validateFields()
+                  .then((values) => {
+                    console.log(values, "isi form");
+                    handleSubmit(values);
+                    form.resetFields();
+                  })
+                  .catch((info) => {
+                    console.error("Validate Failed:", info);
+                  });
+            }}
+        >
+          <Form form={form} layout="vertical">
+            <Form.Item
+                name="irs_id"
+                label="Id"
+                rules={[{ required: true, message: "Please input name!" }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+                name="name"
+                label="Name"
+                rules={[{ required: true, message: "Please input url!" }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+                name="url"
+                label="Url"
+                rules={[{ required: true, message: "Please input url!" }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+                name="irs_pin"
+                label="Pin"
+                rules={[{ required: true, message: "Please input url!" }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+                name="irs_user"
+                label="User"
+                rules={[{ required: true, message: "Please input url!" }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+                name="irs_pass"
+                label="Password"
+                rules={[{ required: true, message: "Please input url!" }]}
+            >
+              <Input />
+            </Form.Item>
+            {!idData && (
+                <Form.Item
+                    name="code"
+                    label="Kode"
+                    rules={[{ required: true, message: "Please input kode!" }]}
+                >
+                  <Input />
+                </Form.Item>
+            )}
+          </Form>
+        </Modal>
+        <TopupsaldoModal code={store.supplier.code} />
+      </div>
   );
 });