diff --git a/package.json b/package.json
index 31c20a8..644ea67 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,9 @@
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@babel/core": "7.14.5",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
diff --git a/src/component/BreadcumbComponent.js b/src/component/BreadcumbComponent.js
index 75b4494..58708ea 100644
--- a/src/component/BreadcumbComponent.js
+++ b/src/component/BreadcumbComponent.js
@@ -5,7 +5,7 @@ import {Link} from "react-router-dom";
 export const BreadcumbComponent = (props) => {
     return (
         <div>
-            <Breadcrumb style={{marginBottom: 10}}>
+            <Breadcrumb>
                 {props.data.map((e, index) => (
                     <Breadcrumb.Item key={index}>
                         <Link to={e.route}>
diff --git a/src/component/CommisionComponent.js b/src/component/CommissionComponent.js
similarity index 88%
rename from src/component/CommisionComponent.js
rename to src/component/CommissionComponent.js
index 98a5cc0..a569aaa 100644
--- a/src/component/CommisionComponent.js
+++ b/src/component/CommissionComponent.js
@@ -7,7 +7,7 @@ import {capitalize} from "lodash";
 import {useStore} from "../utils/useStore";
 import {LINKS} from "../routes/app";
 
-export const CommisionComponent = observer((props) => {
+export const CommissionComponent = observer((props) => {
     const store = useStore();
     const [form] = Form.useForm();
     const {Option} = Select;
@@ -20,7 +20,7 @@ export const CommisionComponent = observer((props) => {
         const init = async () => {
             try {
                 setIsLoading(true);
-                await store.product.getDataSubCategories();
+                //await store.product.getDataSubCategories();
                 setIsLoading(false);
             } catch (e) {
                 setIsLoading(false);
@@ -38,7 +38,7 @@ export const CommisionComponent = observer((props) => {
             address: data.address,
             
         });
-        store.product.visibleModalProduct = true;
+        store.commission.visibleModalCommission = true;
         setIdData(data.id);
     }
 
@@ -92,7 +92,7 @@ export const CommisionComponent = observer((props) => {
     const deleteData = async (id) => {
         try {
             console.log(id);
-            await store.product.delete(id);
+            await store.commission.delete(id);
             message.success("Data Berhasil Dihapus");
             history.push(LINKS.PRODUCT);
         } catch (err) {
@@ -119,7 +119,7 @@ export const CommisionComponent = observer((props) => {
 
     const handleCancel = () => {
         setIdData('')
-        store.product.visibleModalProduct = false;
+        store.commission.visibleModalCommission = false;
     }
 
     const handleSubmit = async (data) => {
@@ -127,26 +127,26 @@ export const CommisionComponent = observer((props) => {
         if (idData !== '') {
             setConfirmLoading(true);
             try {
-                await store.product.update(idData, data)
+                await store.commission.update(idData, data)
                 message.success("Success Update Data Member")
             } catch (e) {
                 message.error("Failed Update Data Member")
             }
             setConfirmLoading(false);
-            store.product.visibleModalProduct = false;
+            store.commission.visibleModalCommission = false;
             setIdData('');
             form.resetFields();
         } else {
             setConfirmLoading(true);
             try {
-                await store.partner.create(data)
+                await store.commission.create(data)
                 message.success("Success Add New Member")
             } catch (e) {
                 console.log(e, "apa errornya")
                 message.error("Failed Add Member")
             }
             setConfirmLoading(false);
-            store.product.visibleModalProduct = false;
+            store.commission.visibleModalCommission = false;
             setIdData('');
             form.resetFields();
         }
@@ -157,7 +157,7 @@ export const CommisionComponent = observer((props) => {
             <Table
                 style={{textAlign: "center"}}
                 columns={columns}
-                dataSource={store.partner.data}
+                dataSource={store.commission.data}
                 bordered
                 pagination={{
                     pageSize: store.product.pageSize,
@@ -168,17 +168,17 @@ export const CommisionComponent = observer((props) => {
                 }}
                 onChange={async (page) => {
                     let pageNumber = page.current;
-                    store.product.pageSize = page.pageSize;
-                    store.product.page = pageNumber - 1;
+                    store.commission.pageSize = page.pageSize;
+                    store.commission.page = pageNumber - 1;
                     // store.membership.isLoading = true;
-                    await store.product.getData();
+                    await store.commission.getData();
                     // store.membership.isLoading = false;
                 }}
             />
 
             <Modal
-                visible={store.product.visibleModalProduct}
-                title={idData ? "Edit Product" : "Create a new Product"}
+                visible={store.commission.visibleModalCommission}
+                title={idData ? "Edit Commission" : "Create a new commission"}
                 okText={idData ? "Edit" : "Create"}
                 cancelText="Cancel"
                 onCancel={() => {
diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index f91e120..64f27ee 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -1,244 +1,274 @@
-import React, {useEffect, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-import {capitalize} from "lodash";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Select,
+  Space,
+  Table,
+  Tag,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { capitalize } from "lodash";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
 
 export const PartnerComponent = observer((props) => {
-    const store = useStore();
-    const [form] = Form.useForm();
-    const {Option} = Select;
-    const history = useHistory();
-    const [idData, setIdData] = useState('');
-    const [confirmLoading, setConfirmLoading] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
+  const store = useStore();
+  const [form] = Form.useForm();
+  const { Option } = Select;
+  const history = useHistory();
+  const [idData, setIdData] = useState("");
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-    useEffect(() => {
-        const init = async () => {
-            try {
-                setIsLoading(true);
-                await store.partner.getDataSubCategories();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
-
-        init();
-    }, []);
-
-    const handleEditButton = (data) => {
-        console.log(data, "isi data")
-        form.setFieldsValue({
-            name: data.name,
-            npwp: data.npwp,
-            address: data.address,
-            
-        });
-        store.partner.visibleModalPartner = true;
-        setIdData(data.id);
-    }
-
-    const columns = [
-        {
-          title: "Name",
-          dataIndex: "name",
-          key: "name",
-        },
-        {
-          title: "Npwp",
-          dataIndex: "npwp",
-          key: "npwp",
-        },
-        {
-          title: "Address",
-          dataIndex: "address",
-          key: "address",
-        },
-        {
-          title: "Status",
-          dataIndex: "status",
-          key: "status",
-          render: (text, record) => (
-            <Tag
-              color={record?.status === true ? "processing" : "#E3E8EE"}
-              style={{ color: "#4F566B" }}
-            >
-              {record?.status === true ? " ACTIVE" : "INACTIVE"}
-            </Tag>
-          ),
-        },
-        {
-            title: "Action",
-            key: "action",
-            render: (text, record) => (
-                <Space size="middle">
-                    <Button
-                        onClick={() => handleEditButton(record)}
-                    >Edit</Button>
-                    <Button
-                        onClick={() => handleDelete(record.id)}
-                    >
-                        Delete
-                    </Button>
-                </Space>
-            ),
-        },
-      ];
-
-    const deleteData = async (id) => {
-        try {
-            console.log(id);
-            await store.product.delete(id);
-            message.success("Data Berhasil Dihapus");
-            history.push(LINKS.PRODUCT);
-        } catch (err) {
-            console.log("error", err);
-            message.error("Gagal menghapus");
-        }
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        await store.partner.getData();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
     };
 
-    const handleDelete = (id) => {
-        Modal.confirm({
-            title: "Are you sure delete this record?",
-            icon: <ExclamationCircleOutlined/>,
-            okText: "Yes",
-            okType: "primary",
-            cancelText: "Cancel",
-            onOk() {
-                return deleteData(id);
-            },
-            onCancel() {
-                console.log("Cancel");
-            },
-        });
-    };
+    init();
+  }, []);
 
-    const handleCancel = () => {
-        setIdData('')
-        store.partner.visibleModalPartner = false;
+  const handleEditButton = (data) => {
+    console.log(data, "isi data");
+    form.setFieldsValue({
+      name: data.name,
+      npwp: data.npwp,
+      address: data.address,
+    });
+    store.partner.visibleModalPartner = true;
+    setIdData(data.id);
+  };
+
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "Npwp",
+      dataIndex: "npwp",
+      key: "npwp",
+    },
+    {
+      title: "Address",
+      dataIndex: "address",
+      key: "address",
+    },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+      render: (text, record) => (
+        <Button type={record?.status === true ? "primary" : "danger"}>
+          {record?.status === true ? " ACTIVE" : "INACTIVE"} 
+        </Button>
+      ),
+    },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+        <Space size="middle">
+          <Button onClick={() => handleEditButton(record)}>Edit</Button>
+          <Button onClick={() => handleDelete(record.id)}>Delete</Button>
+        </Space>
+      ),
+    },
+  ];
+
+//   const handleEditStatus = async (id)=>{
+//     try {
+//         console.log(id);
+//         await store.partner.delete(id);
+//         message.success("Data Berhasil Dihapus");
+//         history.push(LINKS.PARTNER);
+//       } catch (err) {
+//         console.log("error", err);
+//         message.error("Gagal menghapus");
+//       }
+//   }
+
+  const deleteData = async (id) => {
+    try {
+      console.log(id);
+      await store.partner.delete(id);
+      message.success("Data Berhasil Dihapus");
+      history.push(LINKS.PARTNER);
+    } catch (err) {
+      console.log("error", err);
+      message.error("Gagal menghapus");
     }
+  };
 
-    const handleSubmit = async (data) => {
-        console.log(data, "isi data2")
-        if (idData !== '') {
-            setConfirmLoading(true);
-            try {
-                await store.partner.update(idData, data)
-                message.success("Success Update Data Member")
-            } catch (e) {
-                message.error("Failed Update Data Member")
-            }
-            setConfirmLoading(false);
-            store.partner.visibleModalPartner = false;
-            setIdData('');
-            form.resetFields();
-        } else {
-            setConfirmLoading(true);
-            try {
-                await store.partner.create(data)
-                message.success("Success Add New Member")
-            } catch (e) {
-                console.log(e, "apa errornya")
-                message.error("Failed Add Member")
-            }
-            setConfirmLoading(false);
-            store.partner.visibleModalPartner = false;
-            setIdData('');
-            form.resetFields();
-        }
+
+  const handleDelete = (id) => {
+    Modal.confirm({
+      title: "Are you sure delete this record?",
+      icon: <ExclamationCircleOutlined />,
+      okText: "Yes",
+      okType: "primary",
+      cancelText: "Cancel",
+      onOk() {
+        return deleteData(id);
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
+  };
+
+  const handleCancel = () => {
+    setIdData("");
+    store.partner.visibleModalPartner = false;
+  };
+
+  const handleSubmit = async (data) => {
+    console.log(data, "isi data2");
+    if (idData !== "") {
+      setConfirmLoading(true);
+      try {
+        await store.partner.update(idData, data);
+        message.success("Success Update Data Partner");
+        //await store.partner.getData()
+      } catch (e) {
+        message.error("Failed Update Data Partner");
+      }
+      setConfirmLoading(false);
+      store.partner.visibleModalPartner = false;
+      setIdData("");
+      form.resetFields();
+    } else {
+      setConfirmLoading(true);
+      try {
+        await store.partner.create(data);
+        message.success("Success Add New Partner");
+        //await store.partner.getData()
+      } catch (e) {
+        console.log(e, "apa errornya");
+        message.error("Failed Add Partner");
+      }
+      setConfirmLoading(false);
+      store.partner.visibleModalPartner = false;
+      setIdData("");
+      form.resetFields();
     }
+  };
+  return (
+    <div>
+      <Table
+        style={{ textAlign: "center" }}
+        columns={columns}
+        dataSource={store.partner.data}
+        bordered
+        pagination={{
+          pageSize: store.partner.pageSize,
+          total: store.partner.total_data,
+          current: store.partner.page + 1,
+          showSizeChanger: true,
+          simple: false,
+        }}
+        onChange={async (page) => {
+          let pageNumber = page.current;
+          store.partner.pageSize = page.pageSize;
+          store.partner.page = pageNumber - 1;
+          //store.membership.isLoading = true;
+          await store.partner.getData();
+          // store.membership.isLoading = false;
+        }}
+      />
 
-    return (
-        <div>
-            <Table
-                style={{textAlign: "center"}}
-                columns={columns}
-                dataSource={store.partner.data}
-                bordered
-                pagination={{
-                    pageSize: store.partner.pageSize,
-                    total: store.partner.total_data,
-                    current: store.partner.page + 1,
-                    showSizeChanger: true,
-                    simple: false
-                }}
-                onChange={async (page) => {
-                    let pageNumber = page.current;
-                    store.partner.pageSize = page.pageSize;
-                    store.partner.page = pageNumber - 1;
-                    // store.membership.isLoading = true;
-                    await store.partner.getData();
-                    // store.membership.isLoading = false;
-                }}
-            />
-
-            <Modal
-                visible={store.partner.visibleModalPartner}
-                title={idData ? "Edit Product" : "Create a new Product"}
-                okText={idData ? "Edit" : "Create"}
-                cancelText="Cancel"
-                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="name"
-                    label="Name"
-                    rules={[{required: true, message: 'Please input name!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="owner"
-                    label="Owner"
-                    rules={[{required: true, message: 'Please input owner!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="password_account"
-                    label="Password Account"
-                    rules={[{required: true, message: 'Please input password account!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="npwp"
-                    label="Npwp"
-                    rules={[{required: true, message: 'Please input npwp!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="address"
-                    label="address"
-                    rules={[{required: true, message: 'Please input password!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                </Form>
-            </Modal>
-        </div>
-    );
+      <Modal
+        visible={store.partner.visibleModalPartner}
+        title={idData ? "Edit Partner" : "Create a new partner"}
+        okText={idData ? "Edit" : "Create"}
+        cancelText="Cancel"
+        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="name"
+            label="Name"
+            rules={[
+                idData
+                  ? { required: false }
+                  : { required: true, message: "Please input password name!" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="owner"
+            label="Owner"
+            rules={[
+              idData
+                ? { required: false }
+                : { required: true, message: "Please input name!" }
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="password_account"
+            label="Password Account"
+            rules={[
+              idData
+                ? { required: false }
+                : { required: true, message: "Please input password account!" }
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="npwp"
+            label="Npwp"
+            rules={[
+              idData
+                ? { required: false }
+                : { required: true, message: "Please input npwp!" }
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="address"
+            label="address"
+            rules={[
+              idData
+                ? { required: false }
+                : { required: true, message: "Please input password address!" }
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
 });
diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index c3c5454..f12cc45 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -30,7 +30,7 @@ export const SupplierComponent = observer((props) => {
     const init = async () => {
       try {
         setIsLoading(true);
-        await store.product.getDataSubCategories();
+        await store.supplier.getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -90,7 +90,7 @@ export const SupplierComponent = observer((props) => {
   const deleteData = async (id) => {
     try {
       console.log(id);
-      await store.product.delete(id);
+      await store.supplier.delete(id);
       message.success("Data Berhasil Dihapus");
       history.push(LINKS.PRODUCT);
     } catch (err) {
diff --git a/src/index.css b/src/index.css
index 47e2225..8911c18 100644
--- a/src/index.css
+++ b/src/index.css
@@ -63,3 +63,6 @@ code {
 .ant-menu-submenu-arrow{
     padding-right: 40px !important; 
 }
+.ant-breadcrumb{
+    margin-bottom: 10px !important;
+}
\ No newline at end of file
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index b1bb129..56a4e1c 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -133,13 +133,13 @@ export const DesktopLayout = observer(() => {
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="commision">
-                    <Link to={LINKS.PARTNER}>
+                    <Link to={LINKS.COMMISION}>
                       <HomeOutlined />
                       <span>Commision</span>
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="supplier">
-                    <Link to={LINKS.PARTNER}>
+                    <Link to={LINKS.SUPPLIER}>
                       <HomeOutlined />
                       <span>Supplier</span>
                     </Link>
@@ -168,12 +168,6 @@ export const DesktopLayout = observer(() => {
                   <span>Profile</span>
                 </Link>
               </Menu.Item>
-              {/*<Menu.Item key="about">*/}
-              {/*    <Link to={'/app/about'}>*/}
-              {/*        <CalendarOutlined/>*/}
-              {/*        <span>About</span>*/}
-              {/*    </Link>*/}
-              {/*</Menu.Item>*/}
               <Menu.Divider
                 style={{ background: "transparent", paddingTop: 15 }}
               />
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index 19e699d..c56da91 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -9,7 +9,7 @@ import {
   DatabaseOutlined,
   MoneyCollectOutlined,
   ProjectOutlined,
-  FileProtectOutlined 
+  FileProtectOutlined,
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../utils/useStore";
@@ -51,28 +51,32 @@ export const MenuList = observer((props) => {
       {store.authentication.userData.role !== "Retail" && (
         <Menu.Item key="membership">
           <Link to={LINKS.MEMBERSHIP}>
-		  <FileProtectOutlined />
+            <FileProtectOutlined />
             <span>Membership</span>
           </Link>
         </Menu.Item>
       )}
       {store.authentication.userData.role !== "Retail" && (
-        <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config" style={{backgroundColor:'#e3e8ee'}}>
+        <SubMenu
+          key="config"
+          icon={<MenuUnfoldOutlined />}
+          title="Config"
+        >
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
-              <ProjectOutlined/>
+              <ProjectOutlined />
               <span>Partner</span>
             </Link>
           </Menu.Item>
           <Menu.Item key="commision">
-            <Link to={LINKS.COMMISION}>
-			<MoneyCollectOutlined />
-              <span>Commision</span>
+            <Link to={LINKS.COMMISSION}>
+              <MoneyCollectOutlined />
+              <span>Commission</span>
             </Link>
           </Menu.Item>
           <Menu.Item key="supplier">
             <Link to={LINKS.SUPPLIER}>
-              <AppstoreOutlined/>
+              <AppstoreOutlined />
               <span>Supplier</span>
             </Link>
           </Menu.Item>
diff --git a/src/pages/Config/Commision.js b/src/pages/Config/Commission.js
similarity index 70%
rename from src/pages/Config/Commision.js
rename to src/pages/Config/Commission.js
index 099f158..50a669a 100644
--- a/src/pages/Config/Commision.js
+++ b/src/pages/Config/Commission.js
@@ -4,13 +4,13 @@ import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
-import {CommisionComponent} from "../../component/CommisionComponent";
+import {CommissionComponent} from "../../component/CommissionComponent";
 import {LINKS} from "../../routes/app";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
 
-export const Commision = observer(() => {
+export const Commission = observer(() => {
     const [isLoading, setIsLoading] = useState(false);
     const store = useStore();
 
@@ -18,8 +18,8 @@ export const Commision = observer(() => {
         const init = async () => {
             try {
                 setIsLoading(true);
-                await store.partner.getDataCategories();
-                await store.partner.getData();
+                //await store.commission.getDataCategories();
+                await store.commission.getData();
                 setIsLoading(false);
             } catch (e) {
                 setIsLoading(false);
@@ -29,10 +29,10 @@ export const Commision = observer(() => {
         init();
     }, []);
 
-    const handleChangeTabPane = async (key) => {
-        store.product.filterCategory = key;
-        console.log(key);
-    };
+    // const handleChangeTabPane = async (key) => {
+    //     store.product.filterCategory = key;
+    //     console.log(key);
+    // };
 
     const routeData = [
         {
@@ -40,8 +40,8 @@ export const Commision = observer(() => {
             name: "Home",
         },
         {
-            route: LINKS.PARTNER,
-            name: <span style={{fontWeight: 'bold'}}>Partner</span>,
+            route: LINKS.COMMISSION,
+            name: <span style={{fontWeight: 'bold'}}>Commission</span>,
         },
     ];
 
@@ -59,7 +59,11 @@ export const Commision = observer(() => {
                     <Col span={12} style={{textAlign: "right"}}>
                         <Search
                             placeholder="input search text"
-                            style={{width: 200, marginRight: 10}}
+                            style={{
+                                width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                              }}
                         />
                         <Button onClick={() => store.partner.visibleModalPartner = true}>
                             <PlusSquareOutlined/> New
@@ -67,7 +71,7 @@ export const Commision = observer(() => {
                     </Col>
                 </Row>
                 <Tabs
-                    onChange={handleChangeTabPane}
+                    //onChange={handleChangeTabPane}
                     size="default"
                     tabBarGutter="50"
                 >
@@ -76,7 +80,7 @@ export const Commision = observer(() => {
                             tab="Commision"
                             key="1"
                         >
-                            <CommisionComponent/>
+                            <CommissionComponent/>
                         </TabPane>
                     ))
                 </Tabs>
diff --git a/src/pages/Config/Partner.js b/src/pages/Config/Partner.js
index 2f95ab2..f6ca7c3 100644
--- a/src/pages/Config/Partner.js
+++ b/src/pages/Config/Partner.js
@@ -18,7 +18,7 @@ export const Partner = observer(() => {
         const init = async () => {
             try {
                 setIsLoading(true);
-                await store.partner.getDataCategories();
+                //await store.partner.getDataCategories();
                 await store.partner.getData();
                 setIsLoading(false);
             } catch (e) {
@@ -29,10 +29,10 @@ export const Partner = observer(() => {
         init();
     }, []);
 
-    const handleChangeTabPane = async (key) => {
-        store.product.filterCategory = key;
-        console.log(key);
-    };
+    // const handleChangeTabPane = async (key) => {
+    //     store.partner.filterCategory = key;
+    //     console.log(key);
+    // };
 
     const routeData = [
         {
@@ -59,7 +59,11 @@ export const Partner = observer(() => {
                     <Col span={12} style={{textAlign: "right"}}>
                         <Search
                             placeholder="input search text"
-                            style={{width: 200, marginRight: 10}}
+                            style={{
+                                width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                              }}
                         />
                         <Button onClick={() => store.partner.visibleModalPartner = true}>
                             <PlusSquareOutlined/> New
@@ -67,7 +71,7 @@ export const Partner = observer(() => {
                     </Col>
                 </Row>
                 <Tabs
-                    onChange={handleChangeTabPane}
+                    //onChange={handleChangeTabPane}
                     size="default"
                     tabBarGutter="50"
                 >
diff --git a/src/pages/Config/Supplier.js b/src/pages/Config/Supplier.js
index 7f86231..0e5474b 100644
--- a/src/pages/Config/Supplier.js
+++ b/src/pages/Config/Supplier.js
@@ -18,7 +18,7 @@ export const Supplier = observer(() => {
         const init = async () => {
             try {
                 setIsLoading(true);
-                await store.supplier.getDataCategories();
+                //await store.supplier.getDataCategories();
                 await store.supplier.getData();
                 setIsLoading(false);
             } catch (e) {
@@ -29,10 +29,10 @@ export const Supplier = observer(() => {
         init();
     }, []);
 
-    const handleChangeTabPane = async (key) => {
-        store.product.filterCategory = key;
-        console.log(key);
-    };
+    // const handleChangeTabPane = async (key) => {
+    //     store.product.filterCategory = key;
+    //     console.log(key);
+    // };
 
     const routeData = [
         {
@@ -44,7 +44,7 @@ export const Supplier = observer(() => {
             name: <span style={{fontWeight: 'bold'}}>Supplier</span>,
         },
     ];
-
+   
     return (
         <div className={["ppob-container"].join(" ")}>
             <BreadcumbComponent data={routeData}/>
@@ -59,7 +59,12 @@ export const Supplier = observer(() => {
                     <Col span={12} style={{textAlign: "right"}}>
                         <Search
                             placeholder="input search text"
-                            style={{width: 200, marginRight: 10}}
+                            style={{
+                                width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                              }}
+                            onSearch={value => console.log(value)}
                         />
                         <Button onClick={() =>  store.supplier.visibleModalSupplier = true}>
                             <PlusSquareOutlined/> New
@@ -67,7 +72,7 @@ export const Supplier = observer(() => {
                     </Col>
                 </Row>
                 <Tabs
-                    onChange={handleChangeTabPane}
+                    //onChange={handleChangeTabPane}
                     size="default"
                     tabBarGutter="50"
                 >
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index f7471f1..8beee01 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -59,7 +59,11 @@ export const Product = observer(() => {
                     <Col span={12} style={{textAlign: "right"}}>
                         <Search
                             placeholder="input search text"
-                            style={{width: 200, marginRight: 10}}
+                            style={{
+                                width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                              }}
                         />
                         <Button onClick={() => store.product.visibleModalProduct = true}>
                             <PlusSquareOutlined/> New
diff --git a/src/routes/app.js b/src/routes/app.js
index 098edde..5e2aa7d 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -5,7 +5,7 @@ import {Membership} from "../pages/Membership/Membership";
 import {Product} from "../pages/Product/Product";
 import {Transaction} from "../pages/Transaction/Transaction";
 import {Profile} from "../pages/Profile/Profile";
-import {Commision} from "../pages/Config/Commision";
+import {Commission} from "../pages/Config/Commission";
 import {Partner} from "../pages/Config/Partner";
 import {Supplier} from "../pages/Config/Supplier";
 
@@ -18,7 +18,7 @@ export const LINKS = {
     TRANSACTION: "/app/transaction",
     PROFILE: "/app/profile",
     PARTNER: "/app/partner",
-    COMMISION: "/app/commision",
+    COMMISSION: "/app/commission",
     SUPPLIER: "/app/supplier",
    
 };
@@ -28,8 +28,8 @@ export const AppRoute = () => {
         <Route path={LINKS.HOME}>
             <Home/>
         </Route>
-        <Route path={LINKS.COMMISION}>
-            <Commision/>
+        <Route path={LINKS.COMMISSION}>
+            <Commission/>
         </Route>
         <Route path={LINKS.SUPPLIER}>
             <Supplier/>
diff --git a/src/store/commision.js b/src/store/commision.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/store/commission.js b/src/store/commission.js
new file mode 100644
index 0000000..c53ca87
--- /dev/null
+++ b/src/store/commission.js
@@ -0,0 +1,52 @@
+import {makeAutoObservable} from "mobx";
+import {http} from "../utils/http";
+
+export class Commission {
+    page = 0;
+    pageSize = 10
+    data = [];
+    total_data = 0;
+    filterCategory = null;
+    visibleModalSupplier = false;
+
+    pageCategories = 0;
+    pageSizeCategories = 10
+    dataCategories = [];
+    total_dataCategories = 0;
+
+    pageSubCategories = 0;
+    pageSizeSubCategories = 10
+    dataSubCategories = [];
+    total_dataSubCategories = 0;
+
+    constructor(ctx) {
+        this.ctx = ctx;
+        makeAutoObservable(this);
+    }
+
+    async getData() {
+        const response = await http.get(`/config/commission?page=${this.page}&pageSize=${this.pageSize}`);
+        console.log(response)
+        this.data = response.body.data ?? []
+        this.total_data = response.body.total_data ?? 0
+    }
+    async create(data) {
+        const response = await http.post('/users/supplier').send(data);
+        await this.getData();
+        return response;
+    }
+
+    async update(id, data) {
+        const response = await http.put(`/product/${id}`).send(data);
+        await this.getData();
+        return response;
+    }
+
+    async delete(id) {
+        const response = await http.del(`/product/${id}`);
+        await this.getData();
+        return response;
+    }
+}
+
+
diff --git a/src/store/index.js b/src/store/index.js
index d938e7f..26a144f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,7 +5,7 @@ import { Membership } from "./membership";
 import { Product } from "./product";
 import { Partner } from "./partner";
 import { Supplier } from "./supplier";
-//import { Commision } from "./commision";
+import { Commission } from "./commission";
 import { Transaction } from "./transaction";
 import { TokenUtil } from "../utils/token";
 import { Role } from "./role";
@@ -18,7 +18,7 @@ export class Store {
     product = new Product(this);
     partner = new Partner(this);
     supplier = new Supplier(this);
-    //commision = new Commision(this);
+    commission = new Commission(this);
     transaction = new Transaction(this);
     role = new Role(this);
 
diff --git a/src/store/partner.js b/src/store/partner.js
index f48929e..6b136a1 100644
--- a/src/store/partner.js
+++ b/src/store/partner.js
@@ -25,26 +25,10 @@ export class Partner {
     }
 
     async getData() {
-        const response = await http.get(`/users/partner?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
-
+        const response = await http.get(`/users/partner?page=${this.page}&pageSize=${this.pageSize}`);
         this.data = response.body.data ?? []
-        this.total_data = response.body.total_data ?? 0
-    }
-
-    async getDataSubCategories() {
-        const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
-        this.dataSubCategories = response.body.data ?? []
-        this.total_dataSubCategories = response.body.count ?? 0
-    }
-
-    async getDataCategories() {
-        const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
-
-        this.dataCategories = response.body.data ?? []
-        this.total_dataCategories = response.body.total_data ?? 0
-        if (this.dataCategories.length > 0) {
-            this.filterCategory = this.dataCategories[0].id
-        }
+        //console.log(response.body,"ini dari store")
+        this.total_data = response.body.count ?? 0
     }
 
     async create(data) {
@@ -54,16 +38,24 @@ export class Partner {
     }
 
     async update(id, data) {
-        const response = await http.put(`/product/${id}`).send(data);
+        const response = await http.put(`/users/partner/${id}`).send(data);
         await this.getData();
         return response;
     }
 
+    // async updateStatus(id, data) {
+    //     const response = await http.put(`/users/partner/${id}`).send(data);
+    //     await this.getData();
+    //     return response;
+    // }
+
     async delete(id) {
         const response = await http.del(`/product/${id}`);
         await this.getData();
         return response;
     }
+
+
 }
 
 
diff --git a/src/store/supplier.js b/src/store/supplier.js
index e9ebaa7..9da2048 100644
--- a/src/store/supplier.js
+++ b/src/store/supplier.js
@@ -25,28 +25,12 @@ export class Supplier {
     }
 
     async getData() {
-        const response = await http.get(`/users/supplier?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
-
+        const response = await http.get(`/users/supplier?page=${this.page}&pageSize=${this.pageSize}`);
+        //console.log(response)
         this.data = response.body.data ?? []
-        this.total_data = response.body.total_data ?? 0
+        this.total_data = response.body.count ?? 0
     }
-
-    async getDataSubCategories() {
-        const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
-        this.dataSubCategories = response.body.data ?? []
-        this.total_dataSubCategories = response.body.count ?? 0
-    }
-
-    async getDataCategories() {
-        const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
-
-        this.dataCategories = response.body.data ?? []
-        this.total_dataCategories = response.body.total_data ?? 0
-        if (this.dataCategories.length > 0) {
-            this.filterCategory = this.dataCategories[0].id
-        }
-    }
-
+    
     async create(data) {
         const response = await http.post('/users/supplier').send(data);
         await this.getData();