diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js
index ffeda10..42adce7 100644
--- a/src/component/CategoryComponent.js
+++ b/src/component/CategoryComponent.js
@@ -1,10 +1,19 @@
-import React, {useContext, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
-import {observer} from "mobx-react-lite";
-import {useHistory} from "react-router-dom";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Select,
+  Space,
+  Table,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const CategoryComponent = observer((props) => {
   const store = useStore();
@@ -69,12 +78,16 @@ export const CategoryComponent = observer((props) => {
     if (idData !== "") {
       modalLoader.setLoading(true);
       try {
-        const response =await store.category.update(idData, data);
+        const response = await store.category.update(idData, data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Ubah Kategori")
-          : message.error("Gagal Ubah Kategori");
+          ? message.success(
+              response?.body?.message || "Berhasil Ubah Data Kategori"
+            )
+          : message.error(
+              response?.body?.message || "Gagal Ubah Data Kategori"
+            );
       } catch (e) {
-        message.error("Gagal Ubah Data Kategori");
+        message.error(e.response?.body?.message || "Gagal Ubah Data Kategori");
       }
       modalLoader.setLoading(false);
       store.category.visibleModalCategory = false;
@@ -83,13 +96,15 @@ export const CategoryComponent = observer((props) => {
     } else {
       modalLoader.setLoading(true);
       try {
-        const response=await store.category.create(data);
+        const response = await store.category.create(data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Tambah Kategori")
-          : message.error("Gagal Tambah Kategori");
+          ? message.success(
+              response?.body?.message || "Berhasil Tambah Kategori"
+            )
+          : message.error(response?.body?.message || "Gagal Tambah Kategori");
       } catch (e) {
         console.log(e, "apa errornya");
-        message.error("Gagal Tambah Kategori");
+        message.error(e.response?.body?.message || "Gagal Tambah Kategori");
       }
       modalLoader.setLoading(false);
       store.category.visibleModalCategory = false;
@@ -101,7 +116,7 @@ export const CategoryComponent = observer((props) => {
   return (
     <div>
       <Table
-        style={{textAlign: "center"}}
+        style={{ textAlign: "center" }}
         columns={columns}
         dataSource={store.category.data}
         bordered
@@ -148,16 +163,16 @@ export const CategoryComponent = observer((props) => {
           <Form.Item
             name="code"
             label="Code"
-            rules={[{required: true, message: "Please input name code!"}]}
+            rules={[{ required: true, message: "Please input name code!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
           <Form.Item
             name="name"
             label="Name"
-            rules={[{required: true, message: "Please input name category!"}]}
+            rules={[{ required: true, message: "Please input name category!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
         </Form>
       </Modal>
diff --git a/src/component/CommissionComponent.js b/src/component/CommissionComponent.js
index 97c7e69..f63f249 100644
--- a/src/component/CommissionComponent.js
+++ b/src/component/CommissionComponent.js
@@ -1,9 +1,9 @@
-import React, {useContext, useState} from "react";
-import {Button, Form, Input, message, Modal, Space, Table,} from "antd";
-import {observer} from "mobx-react-lite";
-import {useHistory} from "react-router-dom";
-import {useStore} from "../utils/useStore";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+import { Button, Form, Input, message, Modal, Space, Table } from "antd";
+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const CommissionComponent = observer((props) => {
   const store = useStore();
@@ -52,12 +52,12 @@ export const CommissionComponent = observer((props) => {
   const handleSubmit = async (data) => {
     modalLoader.setLoading(true);
     try {
-      const response=await store.commission.update(idData, data);
+      const response = await store.commission.update(idData, data);
       response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Ubah Komisi")
-          : message.error("Gagal Ubah Komisi");
+        ? message.success(response?.body?.message || "Berhasil Ubah Komisi")
+        : message.error(response?.body?.message || "Gagal Ubah Komisi");
     } catch (e) {
-      message.error("Gagal Ubah Komisi");
+      message.error(e.response?.body?.message || "Gagal Ubah Komisi");
     }
     modalLoader.setLoading(false);
     store.commission.visibleModalCommission = false;
@@ -68,7 +68,7 @@ export const CommissionComponent = observer((props) => {
   return (
     <div>
       <Table
-        style={{textAlign: "center"}}
+        style={{ textAlign: "center" }}
         columns={columns}
         dataSource={store.commission.data}
         bordered
@@ -115,9 +115,9 @@ export const CommissionComponent = observer((props) => {
           <Form.Item
             name="value"
             label="Commission"
-            rules={[{required: true, message: "Please input commission!"}]}
+            rules={[{ required: true, message: "Please input commission!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
         </Form>
       </Modal>
diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index 7ed747c..73b6491 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -181,11 +181,13 @@ export const PartnerComponent = observer((props) => {
         const response = await store.partner.create(data);
         modalLoader.setLoading(false);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Tambah Partner")
-          : message.error("Gagal Tambah Partner");
+          ? message.success(
+              response?.body?.message || "Berhasil Tambah Partner"
+            )
+          : message.error(response?.body?.message || "Gagal Tambah Partner");
       } catch (e) {
         console.log(e, "apa errornya");
-        message.error("Gagal Tambah Partner");
+        message.error(e.response?.body?.message || "Gagal Tambah Partner");
       }
       modalLoader.setLoading(false);
       store.partner.visibleModalPartner = false;
diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 0087f07..1ddb46a 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -83,7 +83,6 @@ export const ProductComponent = observer((props) => {
       title: "Supplier",
       dataIndex: "supplier_name",
       key: "supplier_name",
-      
     },
     {
       title: "Sub Category",
@@ -108,15 +107,17 @@ export const ProductComponent = observer((props) => {
       key: "action",
       render: (text, record) => (
         <Button
-            onClick={async () => {
-              await store.product.getDetail(record.product_id);
-              await store.product.getDetailProduct(record.product_id);
-              history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id));
-              //console.log(record.product_id);
-            }}
-          >
-            Detail
-          </Button>
+          onClick={async () => {
+            await store.product.getDetail(record.product_id);
+            await store.product.getDetailProduct(record.product_id);
+            history.push(
+              LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
+            );
+            //console.log(record.product_id);
+          }}
+        >
+          Detail
+        </Button>
       ),
     },
   ];
@@ -160,12 +161,14 @@ export const ProductComponent = observer((props) => {
     if (idData !== "") {
       modalLoader.setLoading(true);
       try {
-        const response=await store.product.update(idData, data);
+        const response = await store.product.update(idData, data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Ubah Data Produk")
-          : message.error("Gagal Ubah Data Produk");
+          ? message.success(
+              response?.body?.message || "Berhasil Ubah Data Produk"
+            )
+          : message.error(response?.body?.message || "Gagal Ubah Data Produk");
       } catch (e) {
-        message.error("Gagal Ubah Data Produk");
+        message.error(e.response?.body?.message || "Gagal Ubah Data Produk");
       }
       modalLoader.setLoading(false);
       store.product.visibleModalProduct = false;
@@ -174,13 +177,13 @@ export const ProductComponent = observer((props) => {
     } else {
       modalLoader.setLoading(true);
       try {
-        const response=await store.product.create(data);
+        const response = await store.product.create(data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Tambah Produk")
-          : message.error("Gagal Tambah Produk");
+          ? message.success(response?.body?.message || "Berhasil Tambah Produk")
+          : message.error(response?.body?.message || "Gagal Tambah Produk");
       } catch (e) {
         console.log(e, "apa errornya");
-        message.error("Gagal Tambah Produk");
+        message.error(e.response?.body?.message || "Gagal Tambah Produk");
       }
       modalLoader.setLoading(false);
       store.product.visibleModalProduct = false;
diff --git a/src/component/SubcategoryComponent.js b/src/component/SubcategoryComponent.js
index cec4f97..3cbeb2a 100644
--- a/src/component/SubcategoryComponent.js
+++ b/src/component/SubcategoryComponent.js
@@ -1,19 +1,29 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Divider, Form, Input, List, message, Modal, Select, Space, Table,} from "antd";
-import {observer} from "mobx-react-lite";
-import {useStore} from "../utils/useStore";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  List,
+  message,
+  Modal,
+  Select,
+  Space,
+  Table,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { useStore } from "../utils/useStore";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const SubcategoryComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const {Option} = Select;
+  const { Option } = Select;
   const [idData, setIdData] = useState("");
   const modalLoader = useContext(ModalLoaderContext);
   useEffect(() => {
-
-    getData()
-  }, [])
+    getData();
+  }, []);
   const getData = async () => {
     await store.category.getData();
     await store.subcategory.getData();
@@ -67,13 +77,19 @@ export const SubcategoryComponent = observer((props) => {
     if (idData !== "") {
       modalLoader.setLoading(true);
       try {
-        const response=await store.subcategory.update(idData, data);
+        const response = await store.subcategory.update(idData, data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Ubah Data Sub Kategori")
-          : message.error("Gagal Ubah Data Sub Kategori");
+          ? message.success(
+              response?.body?.message || "Berhasil Ubah Data Sub Kategori"
+            )
+          : message.error(
+              response?.body?.message || "Gagal Ubah Data Sub Kategori"
+            );
         //await getData();
       } catch (e) {
-        message.error("Gagal Ubah Data Sub Kategori");
+        message.error(
+          e.response?.body?.message || "Gagal Ubah Data Sub Kategori"
+        );
       }
       modalLoader.setLoading(false);
       store.subcategory.visibleModalSubcategory = false;
@@ -82,13 +98,17 @@ export const SubcategoryComponent = observer((props) => {
     } else {
       modalLoader.setLoading(true);
       try {
-        const response =await store.subcategory.create(data);
+        const response = await store.subcategory.create(data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Tambah Sub Kategori")
-          : message.error("Gagal Tambah Sub Kategori");
+          ? message.success(
+              response?.body?.message || "Berhasil Tambah Sub Kategori"
+            )
+          : message.error(
+              response?.body?.message || "Gagal Tambah Sub Kategori"
+            );
       } catch (e) {
         console.log(e, "apa errornya");
-        message.error("Gagal Tambah Sub Kategori");
+        message.error(e.response?.body?.message || "Gagal Tambah Sub Kategori");
       }
       modalLoader.setLoading(false);
       store.subcategory.visibleModalSubcategory = false;
@@ -137,7 +157,7 @@ export const SubcategoryComponent = observer((props) => {
             pageSize: store.subcategory.pageSize,
             total: store.subcategory.total_data,
             current: store.subcategory.page + 1,
-            style: {marginBottom: "1rem", marginRight: "1rem"},
+            style: { marginBottom: "1rem", marginRight: "1rem" },
           }}
           dataSource={store.subcategory.data}
           style={{ padding: 0 }}
diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index 331f028..49d2182 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -1,12 +1,23 @@
-import React, {useContext, useState} from "react";
-import {Button, Divider, Form, Input, List, message, Modal, Space, Table, Tag,} from "antd";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
-import {TopupsaldoModal} from "./TopupsaldoModal";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  List,
+  message,
+  Modal,
+  Space,
+  Table,
+  Tag,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { TopupsaldoModal } from "./TopupsaldoModal";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const SupplierComponent = observer((props) => {
   const store = useStore();
@@ -160,13 +171,17 @@ export const SupplierComponent = observer((props) => {
     if (idData !== "") {
       try {
         modalLoader.setLoading(true);
-        const response=await store.supplier.update(idData, data);
+        const response = await store.supplier.update(idData, data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Ubah Data Supplier")
-          : message.error("Gagal Ubah Data Supplier");
+          ? message.success(
+              response?.body?.message || "Berhasil Ubah Data Supplier"
+            )
+          : message.error(
+              response?.body?.message || "Gagal Ubah Data Supplier"
+            );
       } catch (e) {
         modalLoader.setLoading(false);
-        message.error("Gagal Ubah Data Supplie");
+        message.error(e.response?.body?.message || "Gagal Ubah Data Supplie");
       }
 
       modalLoader.setLoading(false);
@@ -176,13 +191,19 @@ export const SupplierComponent = observer((props) => {
     } else {
       try {
         modalLoader.setLoading(true);
-        const response=await store.supplier.create(data);
+        const response = await store.supplier.create(data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Tambah Supplier Baru")
-          : message.error("Gagal Tambah Supplier Baru");
+          ? message.success(
+              response?.body?.message || "Berhasil Tambah Supplier Baru"
+            )
+          : message.error(
+              response?.body?.message || "Gagal Tambah Supplier Baru"
+            );
       } catch (e) {
         console.log(e, "apa errornya");
-        message.error("Gagal Tambah Supplier Baru");
+        message.error(
+          e.response?.body?.message || "Gagal Tambah Supplier Baru"
+        );
       }
 
       modalLoader.setLoading(false);
@@ -232,7 +253,7 @@ export const SupplierComponent = observer((props) => {
             pageSize: store.supplier.pageSize,
             total: store.supplier.total_data,
             current: store.supplier.page + 1,
-            style: {marginBottom: "1rem", marginRight: "1rem"},
+            style: { marginBottom: "1rem", marginRight: "1rem" },
           }}
           dataSource={store.supplier.data}
           style={{ padding: 0 }}
diff --git a/src/component/TopupsaldoModal.js b/src/component/TopupsaldoModal.js
index cd9ff86..f2abe07 100644
--- a/src/component/TopupsaldoModal.js
+++ b/src/component/TopupsaldoModal.js
@@ -16,11 +16,11 @@ export const TopupsaldoModal = observer((props) => {
   const handleSubmitTransaction = async (data) => {
     try {
       modalLoader.setLoading(true);
-      await store.supplier.createTransaction(data);
-      message.success("Success Top Up");
+      const response = await store.supplier.createTransaction(data);
+      message.success(response?.body?.message || "Success Top Up");
     } catch (e) {
       console.log(e, "apa errornya");
-      message.error("Failed Top Up");
+      message.error(e.response?.body?.message || "Failed Top Up");
     }
 
     modalLoader.setLoading(false);
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index fb81a4b..2e3ea61 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -213,12 +213,16 @@ export const Membership = observer(() => {
       try {
         const response = await store.membership.create(data);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
-          ? message.success("Berhasil Tambah Member Baru")
-          : message.error("Gagal Tambah Member Baru");
+          ? message.success(
+              response?.body?.message || "Berhasil Tambah Member Baru"
+            )
+          : message.error(
+              response?.body?.message || "Gagal Tambah Member Baru"
+            );
         await getData();
       } catch (e) {
         console.log(e, "apa errornya");
-        message.error("Gagal Tambah Member Baru");
+        message.error(e.response?.body?.message || "Gagal Tambah Member Baru");
       }
       modalLoader.setLoading(false);
       setConfirmLoading(false);
@@ -333,7 +337,7 @@ export const Membership = observer(() => {
                               </small>{" "}
                               <br />
                               <Button
-                              style={{marginRight:10}}
+                                style={{ marginRight: 10 }}
                                 onClick={() => {
                                   setDestination(item?.id);
                                   console.log(item?.id);
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index 80c0c48..e7b716d 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -176,13 +176,19 @@ export const Payback = observer(() => {
     try {
       const response = await store.payback.confirmPayback(id, type);
       if (response.body.status !== 201) {
-        message.error(`Failed ${capitalize(type)} Payback`);
+        message.error(
+          response?.body?.message || `Failed ${capitalize(type)} Payback`
+        );
       } else {
-        message.success(`Success ${capitalize(type)} Payback`);
+        message.success(
+          response?.body?.message || `Success ${capitalize(type)} Payback`
+        );
       }
     } catch (e) {
       console.error(e, "apa errornya");
-      message.error("Failed Handler Action Payback");
+      message.error(
+        e.response?.body?.message || "Failed Handler Action Payback"
+      );
     }
     modalLoader.setLoading(false);
   };
diff --git a/src/pages/Payback/PaybackModal.js b/src/pages/Payback/PaybackModal.js
index 1cc8127..da2b529 100644
--- a/src/pages/Payback/PaybackModal.js
+++ b/src/pages/Payback/PaybackModal.js
@@ -1,11 +1,11 @@
-import React, {useContext, useState} from "react";
-import {Form, InputNumber, message, Modal, Upload,} from "antd";
-import {useStore} from "../../utils/useStore";
-import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
-import {ModalLoaderContext} from "../../utils/modal";
-import {appConfig} from "../../config/app";
+import React, { useContext, useState } from "react";
+import { Form, InputNumber, message, Modal, Upload } from "antd";
+import { useStore } from "../../utils/useStore";
+import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
+import { ModalLoaderContext } from "../../utils/modal";
+import { appConfig } from "../../config/app";
 
-export const PaybackModal = ({initialData}) => {
+export const PaybackModal = ({ initialData }) => {
   const [form] = Form.useForm();
   const store = useStore();
   const [image, setImage] = useState("");
@@ -34,28 +34,30 @@ export const PaybackModal = ({initialData}) => {
     const res = await store.payback.uploadImages(file);
     setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
     setResponseFilename(res.body.filename);
-    setFileList([{
-      uid: '-1',
-      name: res.body.filename,
-      status: 'done',
-      url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
-    }]);
+    setFileList([
+      {
+        uid: "-1",
+        name: res.body.filename,
+        status: "done",
+        url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
+      },
+    ]);
     setLoading(false);
   };
 
   const handleChange = (info) => {
-    if (info.file.status === 'uploading') {
+    if (info.file.status === "uploading") {
       setLoading(true);
     } else {
-      setLoading(false)
+      setLoading(false);
     }
   };
 
   const uploadButton = (
-      <div>
-        {loading ? <LoadingOutlined/> : <PlusOutlined/>}
-        <div style={{marginTop: 8}}>Click to Upload</div>
-      </div>
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>Click to Upload</div>
+    </div>
   );
 
   const handleSubmit = async (data) => {
@@ -64,10 +66,10 @@ export const PaybackModal = ({initialData}) => {
       const request = {
         ...data,
         destination: store.authentication.profileData.superior?.id,
-        image_prove: responseFilename
-      }
-      await store.payback.create(request);
-      message.success("Success Add Created");
+        image_prove: responseFilename,
+      };
+      const response = await store.payback.create(request);
+      message.success(response?.body?.message || "Success Add Created");
     } catch (e) {
       if (e.response?.body?.message) {
         message.error(e.response.body.message);
@@ -91,77 +93,77 @@ export const PaybackModal = ({initialData}) => {
     setPreviewImage("");
     setResponseFilename("");
     store.payback.visibleModalPayback = false;
-  }
+  };
 
   return (
-      <Modal
-          visible={store.payback.visibleModalPayback}
-          title={"Create a new Created"}
-          okText={"Create"}
-          cancelText="Cancel"
-          onCancel={handleCancel}
-          onOk={() => {
-            form
-                .validateFields()
-                .then((values) => {
-                  handleSubmit(values);
-                  form.resetFields();
-                })
-                .catch((info) => {
-                  console.log("Validate Failed:", info);
-                });
-          }}
+    <Modal
+      visible={store.payback.visibleModalPayback}
+      title={"Create a new Created"}
+      okText={"Create"}
+      cancelText="Cancel"
+      onCancel={handleCancel}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            handleSubmit(values);
+            form.resetFields();
+          })
+          .catch((info) => {
+            console.log("Validate Failed:", info);
+          });
+      }}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        name="form_in_modal"
+        initialValues={initialData}
       >
-        <Form
-            form={form}
-            layout="vertical"
-            name="form_in_modal"
-            initialValues={initialData}
-        >
-          <Form.Item
-              label="Upload Picture"
-              name="image_prove"
-          >
-            <div>
-              <Upload
-                  listType="picture-card"
-                  fileList={fileList}
-                  onPreview={(file) => {
-                    setPreviewImage(file.url || file.filename);
-                  }}
-                  showUploadList={true}
-                  onChange={handleChange}
-                  beforeUpload={(file) => beforeUpload(file)}
-                  customRequest={(args) => uploadHandler(args)}
-                  onRemove={(file) => {
-                    setImage('');
-                    setLoading(false);
-                    setFileList([]);
-                  }}
-              >
-
-                {image === "" ? uploadButton : null}
-              </Upload>
-              <h5 style={{
+        <Form.Item label="Upload Picture" name="image_prove">
+          <div>
+            <Upload
+              listType="picture-card"
+              fileList={fileList}
+              onPreview={(file) => {
+                setPreviewImage(file.url || file.filename);
+              }}
+              showUploadList={true}
+              onChange={handleChange}
+              beforeUpload={(file) => beforeUpload(file)}
+              customRequest={(args) => uploadHandler(args)}
+              onRemove={(file) => {
+                setImage("");
+                setLoading(false);
+                setFileList([]);
+              }}
+            >
+              {image === "" ? uploadButton : null}
+            </Upload>
+            <h5
+              style={{
                 marginTop: 12,
                 color: "rgba(0, 0, 0, 0.45)",
-              }}>
-                Max size of file 2 MB
-              </h5>
-            </div>
-          </Form.Item>
-          <Form.Item
-              name="amount"
-              label="amount"
-              rules={[{required: true, message: "Please input Amount!"}]}
-          >
-            <InputNumber
-                style={{width: "100%"}}
-                formatter={value => `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
-                parser={value => value.replace(/\Rp.\s?|(,*)/g, '')}
-            />
-          </Form.Item>
-        </Form>
-      </Modal>
+              }}
+            >
+              Max size of file 2 MB
+            </h5>
+          </div>
+        </Form.Item>
+        <Form.Item
+          name="amount"
+          label="amount"
+          rules={[{ required: true, message: "Please input Amount!" }]}
+        >
+          <InputNumber
+            style={{ width: "100%" }}
+            formatter={(value) =>
+              `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+            }
+            parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
   );
 };
diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index dffb907..88a4cb6 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -48,9 +48,9 @@ export const Product = observer(() => {
         productCode: data,
       });
       if (response.status === 201) {
-        message.success("Berhasil Beli Produk");
+        message.success(response?.body?.message || "Berhasil Beli Produk");
       } else {
-        message.error("Gagal Beli Produk", 3);
+        message.error(response?.body?.message || "Gagal Beli Produk", 3);
       }
     } catch (e) {
       if (e.response?.body?.message) {
diff --git a/src/store/category.js b/src/store/category.js
index 272bfd9..12e238c 100644
--- a/src/store/category.js
+++ b/src/store/category.js
@@ -22,6 +22,7 @@ export class Category {
     async getData() {
         try {
             const response = await http.get(`/product/categories?page=${this.page}&pageSize=${this.pageSize}`);
+            console.log(response)
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item
diff --git a/src/store/product.js b/src/store/product.js
index 1ccd96a..65b51f2 100644
--- a/src/store/product.js
+++ b/src/store/product.js
@@ -36,7 +36,7 @@ export class Product {
     async getData() {
         try {
             const response = await http.get(`/product/all?supplier=${this.filterSupplier}&sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
-            console.log(response)
+            //console.log(response)
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item