diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index 87636a0..d08a8e5 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -40,6 +40,21 @@ export const PartnerComponent = observer((props) => {
     init();
   }, []);
 
+  const changeStatus = async (id, isActive) => {
+    const status = isActive ? "inactive" : "active";
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      const response = await store.partner.changeStatus(id, status);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Partner`)
+        : message.error(`Failed ${status2} Partner`);
+    } catch (err) {
+      console.log("error", err);
+      message.error(`Failed ${status2} Partner`);
+    }
+  };
+
   const handleEditButton = (data) => {
     console.log(data, "isi data");
     form.setFieldsValue({
@@ -72,9 +87,13 @@ export const PartnerComponent = observer((props) => {
       dataIndex: "status",
       key: "status",
       render: (text, record) => (
-        <Button size="small" type={record?.status === true ? "primary" : "danger"}>
-          {record?.status === true ? " ACTIVE" : "INACTIVE"} 
-        </Button>
+        <Tag
+          color={record?.status === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B", cursor: 'pointer' }}
+          onClick={() => changeStatus(record?.id, record?.status)}
+        >
+          {record?.status === true ? " ACTIVE" : "INACTIVE"}
+        </Tag>
       ),
     },
     {
diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index 05f0592..3b096b4 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -52,9 +52,19 @@ export const SupplierComponent = observer((props) => {
     setIdData(data.id);
   };
 
-  const changeStatus = (id, isActive) => {
+  const changeStatus = async (id, isActive) => {
     const status = isActive ? "inactive" : "active";
-    store.supplier.changeStatus(id, status);
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      const response = await store.supplier.changeStatus(id, status);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Supplier`)
+        : message.error(`Failed ${status2} Supplier`);
+    } catch (err) {
+      console.log("error", err);
+      message.error(`Failed ${status2} Supplier`);
+    }
   };
 
   const columns = [
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 44b1186..0e621a2 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,13 +1,30 @@
-import React, {useEffect, useState} from "react";
-import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-import {MembershipModal} from "./MembershipModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Input,
+  List,
+  message,
+  Modal,
+  Row,
+  Space,
+  Table,
+  Tag,
+} from "antd";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import {
+  ExclamationCircleOutlined,
+  FilterOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
+import { MembershipModal } from "./MembershipModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Membership = observer(() => {
   const store = useStore();
@@ -31,6 +48,21 @@ export const Membership = observer(() => {
     init();
   }, []);
 
+  const changeStatus = async (id, isActive) => {
+    const status = isActive ? "inactive" : "active";
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      const response = await store.membership.changeStatus(id, status);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Membership`)
+        : message.error(`Failed ${status2} Membership`);
+    } catch (err) {
+      console.log("error", err);
+      message.error(`Failed ${status2} Membership`);
+    }
+  };
+
   const columns = [
     {
       title: "Name",
@@ -48,10 +80,11 @@ export const Membership = observer(() => {
       key: "status",
       render: (text, record) => (
         <Tag
-          color={record?.isActive === true ? "blue" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
+          color={record?.status === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B", cursor: "pointer" }}
+          onClick={() => changeStatus(record?.id, record?.status)}
         >
-          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+          {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
       ),
     },
@@ -188,26 +221,26 @@ export const Membership = observer(() => {
           </Row>
           {store.ui.mediaQuery.isDesktop && (
             <Table
-                key="1"
-                hasEmpty
-                columns={columns}
-                dataSource={store.membership.data}
-                bordered
-                pagination={{
-                  pageSize: store.membership.pageSize,
-                  total: store.membership.total_data,
-                  current: store.membership.page + 1,
-                  showSizeChanger: true,
-                  simple: false
-                }}
-                onChange={async (page) => {
-                  let pageNumber = page.current;
-                  store.membership.pageSize = page.pageSize;
-                  store.membership.page = pageNumber - 1;
-                  // store.membership.isLoading = true;
-                  await store.membership.getData();
-                  // store.membership.isLoading = false;
-                }}
+              key="1"
+              hasEmpty
+              columns={columns}
+              dataSource={store.membership.data}
+              bordered
+              pagination={{
+                pageSize: store.membership.pageSize,
+                total: store.membership.total_data,
+                current: store.membership.page + 1,
+                showSizeChanger: true,
+                simple: false,
+              }}
+              onChange={async (page) => {
+                let pageNumber = page.current;
+                store.membership.pageSize = page.pageSize;
+                store.membership.page = pageNumber - 1;
+                // store.membership.isLoading = true;
+                await store.membership.getData();
+                // store.membership.isLoading = false;
+              }}
             />
           )}
 
diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index 4aca734..c3c9796 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -1,96 +1,100 @@
-import React from 'react';
-import {Form, Input, Modal, Select,} from 'antd';
-import {capitalize} from "lodash";
-import {useStore} from "../../utils/useStore";
+import React from "react";
+import { Form, Input, Modal, Select } from "antd";
+import { capitalize } from "lodash";
+import { useStore } from "../../utils/useStore";
 
 export const MembershipModal = ({
-                                    visible,
-                                    onCreate,
-                                    onCancel,
-                                    initialData,
-                                }) => {
-    const [form] = Form.useForm();
-    const {Option} = Select;
-    const dataStatus = ["true", "false"]
-    const store = useStore();
+  visible,
+  onCreate,
+  onCancel,
+  initialData,
+}) => {
+  const [form] = Form.useForm();
+  const { Option } = Select;
+  const dataStatus = ["true", "false"];
+  const store = useStore();
 
-
-    return (
-        <Modal
-            visible={visible}
-            title={initialData.id ? "Edit Member" : "Create a new Membership"}
-            okText={initialData.id ? "Edit" : "Create"}
-            cancelText="Cancel"
-            onCancel={() => {
-                form.resetFields()
-                onCancel()
-            }}
-            onOk={() => {
-                form
-                    .validateFields()
-                    .then(values => {
-                        onCreate(values);
-                        form.resetFields()
-                    })
-                    .catch(info => {
-                        console.log('Validate Failed:', info);
-                    });
-            }}
+  return (
+    <Modal
+      visible={visible}
+      title={initialData.id ? "Edit Member" : "Create a new Membership"}
+      okText={initialData.id ? "Edit" : "Create"}
+      cancelText="Cancel"
+      onCancel={() => {
+        form.resetFields();
+        onCancel();
+      }}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            onCreate(values);
+            form.resetFields();
+          })
+          .catch((info) => {
+            console.log("Validate Failed:", info);
+          });
+      }}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        name="form_in_modal"
+        initialValues={initialData}
+      >
+        <Form.Item
+          name="username"
+          label="Username"
+          rules={[{ required: true, message: "Please input Username!" }]}
         >
-            <Form
-                form={form}
-                layout="vertical"
-                name="form_in_modal"
-                initialValues={initialData}
-            >
-                
-                <Form.Item
-                    name="username"
-                    label="Username"
-                    rules={[{required: true, message: 'Please input Username!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="password"
-                    label="Password"
-                    rules={[{required: false, message: 'Please input password!'}]}
-                >
-                    <Input/>
-                </Form.Item>
-                <Form.Item
-                    name="roleId"
-                    label="Role"
-                    rules={[{required: true, message: 'Please input role id!'}]}
-                >
-                    <Select>
-                        {store.role.data.map(item => (
-                            <Option key={item.id} value={item.id}>{item.name}</Option>
-                        ))}
-                    </Select>
-                </Form.Item>
-                <Form.Item
-                    name="superior"
-                    label="Superior"
-                    rules={[{required: true, message: 'Please select superior status!'}]}
-                >
-                    <Select
-                        showSearch
-                        placeholder="Select Status"
-                        optionFilterProp="children"
-                        filterOption={(input, option) =>
-                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                        }
-                        filterSort={(optionA, optionB) =>
-                            optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
-                        }
-                    >
-                        {dataStatus.map(it => {
-                            return <Option value={it}>{capitalize(it)}</Option>
-                        })}
-                    </Select>
-                </Form.Item>
-            </Form>
-        </Modal>
-    );
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="Password"
+          rules={[{ required: false, message: "Please input password!" }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="roleId"
+          label="Role"
+          rules={[{ required: true, message: "Please input role id!" }]}
+        >
+          <Select>
+            {store.role.data.map((item) => (
+              <Option key={item.id} value={item.id}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="superior"
+          label="Superior"
+          rules={[
+            { required: true, message: "Please select superior status!" },
+          ]}
+        >
+          <Select
+            showSearch
+            placeholder="Select Status"
+            optionFilterProp="children"
+            filterOption={(input, option) =>
+              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }
+            filterSort={(optionA, optionB) =>
+              optionA.children
+                .toLowerCase()
+                .localeCompare(optionB.children.toLowerCase())
+            }
+          >
+            {dataStatus.map((it, idx) => {
+              return <Option value={it} key={idx}>{capitalize(it)}</Option>;
+            })}
+          </Select>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
 };
diff --git a/src/store/membership.js b/src/store/membership.js
index e8830c8..fcbea6b 100644
--- a/src/store/membership.js
+++ b/src/store/membership.js
@@ -12,11 +12,14 @@ export class Membership {
         makeAutoObservable(this);
     }
 
-    @action
     async getData() {
         const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
-        console.log(response)
-        this.data = response.body.data ?? []
+        
+        this.data = response.body.data.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
+        
         this.total_data = response.body.total_data ?? 0
     }
     // async getData() {
@@ -25,12 +28,10 @@ export class Membership {
     //     this.total_data = response.body.total_data ?? 0
     // }
 
-    @action
     async create(data) {
         return await http.post('/users').send(data)
     }
 
-    @action
     async update(id, data) {
         // console.log(data)
         // console.log(id)
@@ -44,6 +45,12 @@ export class Membership {
         return await http.del('/users/' + id);
         
     }
+
+    async changeStatus(id, status) {
+        const response = await http.get(`/users/${id}/${status}`);
+        await this.getData();
+        return response;
+    }
 }
 
 
diff --git a/src/store/partner.js b/src/store/partner.js
index 6b136a1..0e94a36 100644
--- a/src/store/partner.js
+++ b/src/store/partner.js
@@ -26,8 +26,12 @@ export class Partner {
 
     async getData() {
         const response = await http.get(`/users/partner?page=${this.page}&pageSize=${this.pageSize}`);
-        this.data = response.body.data ?? []
-        //console.log(response.body,"ini dari store")
+        
+        this.data = response.body.data.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
+
         this.total_data = response.body.count ?? 0
     }
 
@@ -55,6 +59,11 @@ export class Partner {
         return response;
     }
 
+    async changeStatus(id, status) {
+        const response = await http.get(`/users/partner/${id}/${status}`);
+        await this.getData();
+        return response;
+    }
 
 }
 
diff --git a/src/store/product.js b/src/store/product.js
index 81df70c..e04edd1 100644
--- a/src/store/product.js
+++ b/src/store/product.js
@@ -37,7 +37,10 @@ export class Product {
 
     async getDataSubCategories() {
         const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
-        this.dataSubCategories = response.body.data ?? []
+        this.dataSubCategories = response.body.data.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
         this.total_dataSubCategories = response.body.count ?? 0
     }
 
@@ -46,9 +49,15 @@ export class Product {
 
         this.dataCategories = response.body.data ?? []
         this.total_dataCategories = response.body.total_data ?? 0
+
         if (this.dataCategories.length > 0) {
             this.filterCategory = this.dataCategories[0].id
         }
+
+        this.dataCategories = this.dataCategories.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
     }
 
     async create(data) {