diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 19649c0..21eb4b2 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -26,14 +26,14 @@ export const ProductComponent = observer((props) => {
         },
         {
             title: "Harga Beli",
-            dataIndex: "price",
-            key: "price",
+            dataIndex: "basePrice",
+            key: "basePrice",
         },
         ,
         {
             title: "Harga Jual",
-            dataIndex: "base_price",
-            key: "base_price",
+            dataIndex: "price",
+            key: "price",
         },
         {
             title: "Gangguan",
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 9e43b81..0f599a5 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,35 +1,49 @@
-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 {format} from "date-fns";
+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 { format } from "date-fns";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Membership = observer(() => {
   const store = useStore();
-  const [visibleModal, setVisibleModal] = useState(false)
-  const [initialData, setInitialData] = useState({})
+  const [visibleModal, setVisibleModal] = useState(false);
+  const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   const init = async () => {
     try {
-      setIsLoading(true)
+      setIsLoading(true);
       await store.membership.getData();
-      setIsLoading(false)
+      setIsLoading(false);
     } catch (e) {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
   useEffect(() => {
-    
-
-    init()
-
+    init();
   }, []);
 
   const columns = [
@@ -49,28 +63,34 @@ export const Membership = observer(() => {
       key: "status",
       render: (text, record) => (
         <Tag
-            color={record?.isActive === true ? "processing" : "#E3E8EE"}
-            style={{color: "#4F566B"}}
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B" }}
         >
-            {record?.status}
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
-    )
+      ),
     },
     {
       title: "Action",
       key: "action",
       render: (text, record) => (
-          <Space size="middle">
-            <Button onClick={() => {
-              setVisibleModal(true)
-              setInitialData(record)
-            }}>Edit</Button>
-            <Button onClick={async () => {
-              handleDelete(record.id)
-
+        <Space size="middle">
+          <Button
+            onClick={() => {
+              setVisibleModal(true);
+              setInitialData(record);
             }}
-            >Delete</Button>
-          </Space>
+          >
+            Edit
+          </Button>
+          <Button
+            onClick={async () => {
+              handleDelete(record.id);
+            }}
+          >
+            Delete
+          </Button>
+        </Space>
       ),
     },
   ];
@@ -82,177 +102,180 @@ export const Membership = observer(() => {
     },
     {
       route: "/app/membership",
-      name: <span style={{fontWeight: "bold"}}>Membership</span>,
+      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
     },
   ];
 
   const onSubmit = async (data) => {
     if (initialData.id) {
-      setInitialData({})
+      setInitialData({});
       setConfirmLoading(true);
       try {
-        await store.membership.update(initialData.id, data)
-        message.success("Success Update Data Member")
+        await store.membership.update(initialData.id, data);
+        message.success("Success Update Data Member");
+        await store.membership.getData();
       } catch (e) {
-        message.error("Failed Update Data Member")
+        message.error("Failed Update Data Member");
       }
       setConfirmLoading(false);
       setVisibleModal(false);
     } else {
-      setInitialData({})
+      setInitialData({});
       setConfirmLoading(true);
       try {
-        await store.membership.create(data)
-        message.success("Success Add New Member")
+        await store.membership.create(data);
+        message.success("Success Add New Member");
+        await store.membership.getData();
       } catch (e) {
-        console.log(e, "apa errornya")
-        message.error("Failed Add Member")
+        console.log(e, "apa errornya");
+        message.error("Failed Add Member");
       }
       setConfirmLoading(false);
       setVisibleModal(false);
     }
-  }
+  };
 
   const handleDelete = (record) => {
     Modal.confirm({
-      title: 'Are you sure reject this record?',
-      icon: <ExclamationCircleOutlined/>,
-      okText: 'Yes',
-      okType: 'primary',
-      cancelText: 'Cancel',
+      title: "Are you sure reject this record?",
+      icon: <ExclamationCircleOutlined />,
+      okText: "Yes",
+      okType: "primary",
+      cancelText: "Cancel",
       onOk() {
         try {
           //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
           // await store.membership.delete(record.id)
-          message.success('Success Delete Data')
+          message.success("Success Delete Data");
         } catch (e) {
-          message.error("Failed Delete Data")
+          message.error("Failed Delete Data");
         }
       },
       onCancel() {
-        console.log('Cancel');
+        console.log("Cancel");
       },
     });
-  }
-
+  };
   return (
-      <div className={["ppob-container"].join(" ")}>
-        <BreadcumbComponent data={routeData}/>
-        <Card>
-          <div>
-            <Row style={{marginBottom: 20}}>
-              <Col span={12}>
-                <Button>
-                  <FilterOutlined/>
-                  Filter
-                </Button>
-              </Col>
-              <Col span={12} style={{textAlign: "right"}}>
-                <Search
-                    placeholder="input search text"
-                    style={{width: 200, marginRight: 10}}
-                />
-                <Button onClick={() => setVisibleModal(true)}>
-                  <PlusSquareOutlined/> New
-                </Button>
-              </Col>
-            </Row>
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData} />
+      <Card>
+        <div>
+          <Row style={{ marginBottom: 20 }}>
+            <Col span={12}>
+              <Button>
+                <FilterOutlined />
+                Filter
+              </Button>
+            </Col>
+            <Col span={12} style={{ textAlign: "right" }}>
+              <Search
+                placeholder="input search text"
+                style={{ width: 200, marginRight: 10 }}
+              />
+              <Button onClick={() => setVisibleModal(true)}>
+                <PlusSquareOutlined /> New
+              </Button>
+            </Col>
+          </Row>
+          {store.ui.mediaQuery.isDesktop && (
+            <Table
+              key="1"
+              hasEmpty
+              size={"small"}
+              columns={columns}
+              dataSource={store.membership.data}
+              bordered
+              // pagination={{
+              //   total: store.membership.total_data,
+              //   current: store.membership.page,
+              //   pageSize: store.membership.pageSize,
+              //   simple: true
+              // }}
+              // onChange={(page) => {
+              //   store.membership.pageSize = page.pageSize;
+              //   store.membership.page = page.current;
+              //   store.membership.getData();
+              // }}
+              // current={store.membership.page}
+              // loading={store.membership.pageSize}
+            />
+          )}
 
-            {store.ui.mediaQuery.isDesktop && (
-                <Table
-                    key="1"
-                    hasEmpty
-                    size={"small"}
-                    columns={columns}
-                    dataSource={store.membership.data[0]}
-                    bordered
-                    // pagination={{
-                    //   total: store.membership.total_data,
-                    //   current: store.membership.page,
-                    //   pageSize: store.membership.pageSize,
-                    //   simple: true
-                    // }}
-                    // onChange={(page) => {
-                    //   store.membership.pageSize = page.pageSize;
-                    //   store.membership.page = page.current;
-                    //   store.membership.getData();
-                    // }}
-                    // current={store.membership.page}
-                    // loading={store.membership.pageSize}
-                />)}
-
-            {store.ui.mediaQuery.isMobile && (
-                <List
-                    itemLayout="horizontal"
-                    position={"top"}
-                    pagination={{
-                      onChange: (page) => {
-                        store.membership.pageSize = page.pageSize;
-                        store.membership.page = page.current;
-                        store.membership.getData();
-                      },
-                      pageSize: store.membership.pageSize,
-                      total: store.membership.total_data,
-                      current: store.membership.page,
-                      style: {marginBottom: '1rem', marginRight: '1rem'}
-                    }}
-                    dataSource={store.membership.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={["cariparkir-container"].join(" ")}
-                                  title={item.name}
-                                  description={
-                                    <div style={{}}>
-                                      <p>
-                                        <small>Email : {item.email}</small> <br/>
-                                      </p>
-                                    </div>
-                                  }
-                              />
-                              <div style={{marginRight: 16}}>
-                                <p
-                                    style={{
-                                      fontSize: 9,
-                                      margin: 0,
-                                    }}
-                                >
-                                  {format(new Date(item.created_at), "dd-MM-yyyy")}
-                                </p>
-                              </div>
-                            </List.Item>
-                            <Divider plain style={{margin: 0}}/>
+          {store.ui.mediaQuery.isMobile && (
+            <List
+              itemLayout="horizontal"
+              position={"top"}
+              pagination={{
+                onChange: (page) => {
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = page.current;
+                  store.membership.getData();
+                },
+                pageSize: store.membership.pageSize,
+                total: store.membership.total_data,
+                current: store.membership.page,
+                style: { marginBottom: "1rem", marginRight: "1rem" },
+              }}
+              dataSource={store.membership.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={["cariparkir-container"].join(" ")}
+                        title={item.username}
+                        description={
+                          <div style={{}}>
+                            <p>
+                              <small>Username : {item.username}</small> <br />
+                            </p>
                           </div>
-                      );
-                    }}
-                />
-            )}
-          </div>
-        </Card>
-        <MembershipModal visible={visibleModal}
-                         confirmLoading={confirmLoading}
-                         initialData={initialData}
-                         onCreate={async (data) => {
-                           onSubmit(data)
-                         }}
-                         onCancel={() => {
-                           setInitialData({})
-                           setVisibleModal(false);
-                         }}/>
-      </div>
+                        }
+                      />
+                      <div style={{ marginRight: 16 }}>
+                        <p
+                          style={{
+                            fontSize: 9,
+                            margin: 0,
+                          }}
+                        >
+                          {item.username}
+                        </p>
+                      </div>
+                    </List.Item>
+                    <Divider plain style={{ margin: 0 }} />
+                  </div>
+                );
+              }}
+            />
+          )}
+        </div>
+      </Card>
+      <MembershipModal
+        visible={visibleModal}
+        confirmLoading={confirmLoading}
+        initialData={initialData}
+        onCreate={async (data) => {
+          onSubmit(data);
+        }}
+        onCancel={() => {
+          setInitialData({});
+          setVisibleModal(false);
+        }}
+      />
+    </div>
   );
 });
diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index bcbece4..b404639 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -9,13 +9,13 @@ export const MembershipModal = ({
                                 }) => {
     const [form] = Form.useForm();
     const {Option} = Select;
-    const dataStatus = ['Active', 'Inactive']
+    const dataStatus = ["true", "false"]
 
 
     return (
         <Modal
             visible={visible}
-            title={initialData.id ? "Edit Member" : "Create a new Member"}
+            title={initialData.id ? "Edit Member" : "Create a new Membership"}
             okText={initialData.id ? "Edit" : "Create"}
             cancelText="Cancel"
             onCancel={() => {
@@ -40,13 +40,7 @@ export const MembershipModal = ({
                 name="form_in_modal"
                 initialValues={initialData}
             >
-                <Form.Item
-                    name="name"
-                    label="Name"
-                    rules={[{required: true, message: 'Please input Name!'}]}
-                >
-                    <Input/>
-                </Form.Item>
+                
                 <Form.Item
                     name="username"
                     label="Username"
@@ -55,10 +49,23 @@ export const MembershipModal = ({
                     <Input/>
                 </Form.Item>
                 <Form.Item
-                    name="status"
-                    label="Status"
-
-                    rules={[{required: true, message: 'Please select Status!'}]}
+                    name="password"
+                    label="Password"
+                    rules={[{required: true, message: 'Please input password!'}]}
+                >
+                    <Input/>
+                </Form.Item>
+                <Form.Item
+                    name="roleId"
+                    label="Role Id"
+                    rules={[{required: true, message: 'Please input role id!'}]}
+                >
+                    <Input/>
+                </Form.Item>
+                <Form.Item
+                    name="superior"
+                    label="Superior"
+                    rules={[{required: true, message: 'Please select superior status!'}]}
                 >
                     <Select
                         showSearch
diff --git a/src/store/membership.js b/src/store/membership.js
index 50280bd..786313f 100644
--- a/src/store/membership.js
+++ b/src/store/membership.js
@@ -23,16 +23,16 @@ export class Membership {
 
     @action
     async create(data) {
-        return await http.post('/user').send(data)
+        return await http.post('/users').send(data)
     }
 
     @action
     async update(id, data) {
-        return await http.put('/user/' + id).send(data);
+        return await http.put('/users/' + id).send(data);
     }
 
     async delete(id) {
-        return await http.del('/user/' + id);
+        return await http.del('/users/' + id);
     }
 }