diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 38f178f..ce7ea45 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -283,8 +283,9 @@ export const DetailUser = observer(() => {
           <Title strong level={2}>
             Detail User
           </Title>
-          <Col lg={20} xs={20} style={{ textAlign: "right" }}>
+         
             {store.authentication.userData.role === "Admin" && (
+               <Col lg={18} xs={18} style={{ textAlign: "right" }}>
               <Space
                 size="middle"
                 align={"center"}
@@ -365,8 +366,157 @@ export const DetailUser = observer(() => {
                   Withdraw Profit
                 </Button>
               </Space>
+              </Col>
             )}
-          </Col>
+            {store.authentication.userData.role === "Supervisor" && (
+               <Col lg={16} xs={16} style={{ textAlign: "right" }}>
+              <Space
+                size="middle"
+                align={"center"}
+                wrap={true}
+                style={{ textAlign: "center" }}
+              >
+                <Button
+                  type={
+                    store.membership.dataDetail.isActive === true
+                      ? "danger"
+                      : "primary"
+                  }
+                  onClick={() =>
+                    changeStatus(
+                      store.membership.dataDetail.id,
+                      store.membership.dataDetail.isActive
+                    )
+                  }
+                >
+                  {store.membership.dataDetail.isActive === true
+                    ? "Inactive"
+                    : "Active"}
+                </Button>
+                <Button
+                  onClick={() => {
+                    setInitialData({
+                      id: store.membership.dataDetail.id,
+                      name: store.membership.dataDetail.userDetail.name,
+                      username: store.membership.dataDetail.username,
+                      identity_number:
+                        store.membership.dataDetail.userDetail.identity_number,
+                      image_identity:
+                        store.membership.dataDetail?.userDetail.image_identity,
+                      image_store:
+                        store.membership.dataDetail?.userDetail.image_store,
+                      phone_number:
+                        store.membership.dataDetail.userDetail.phone_number,
+                      roleId: store.membership.dataDetail.roles.id,
+                      isChangePassword: false,
+                    });
+                    console.log(
+                      store.membership.dataDetail.userDetail.identity_number
+                    );
+                    console.log(store.membership.dataDetail.userDetail.id);
+                    console.log(
+                      store.membership.dataDetail.userDetail.image_identity
+                    );
+                    console.log(store.membership.dataDetail.username);
+                    setVisibleModal(true);
+                  }}
+                >
+                  Edit
+                </Button>
+                <Button
+                  onClick={() => {
+                    setInitialData({
+                      id: store.membership.dataDetail.id,
+                      name: store.membership.dataDetail.userDetail.name,
+                      username: store.membership.dataDetail.username,
+                      phone_number:
+                        store.membership.dataDetail.userDetail.phone_number,
+                      roleId: store.membership.dataDetail.roles.id,
+                      isChangePassword: true,
+                    });
+                    setVisibleModal(true);
+                  }}
+                >
+                  Ganti Password
+                </Button>
+              </Space>
+              </Col>
+            )}
+            {store.authentication.userData.role === "Sales" && (
+               <Col lg={16} xs={16} style={{ textAlign: "right" }}>
+              <Space
+                size="middle"
+                align={"center"}
+                wrap={true}
+                style={{ textAlign: "center" }}
+              >
+                <Button
+                  type={
+                    store.membership.dataDetail.isActive === true
+                      ? "danger"
+                      : "primary"
+                  }
+                  onClick={() =>
+                    changeStatus(
+                      store.membership.dataDetail.id,
+                      store.membership.dataDetail.isActive
+                    )
+                  }
+                >
+                  {store.membership.dataDetail.isActive === true
+                    ? "Inactive"
+                    : "Active"}
+                </Button>
+                <Button
+                  onClick={() => {
+                    setInitialData({
+                      id: store.membership.dataDetail.id,
+                      name: store.membership.dataDetail.userDetail.name,
+                      username: store.membership.dataDetail.username,
+                      identity_number:
+                        store.membership.dataDetail.userDetail.identity_number,
+                      image_identity:
+                        store.membership.dataDetail?.userDetail.image_identity,
+                      image_store:
+                        store.membership.dataDetail?.userDetail.image_store,
+                      phone_number:
+                        store.membership.dataDetail.userDetail.phone_number,
+                      roleId: store.membership.dataDetail.roles.id,
+                      isChangePassword: false,
+                    });
+                    console.log(
+                      store.membership.dataDetail.userDetail.identity_number
+                    );
+                    console.log(store.membership.dataDetail.userDetail.id);
+                    console.log(
+                      store.membership.dataDetail.userDetail.image_identity
+                    );
+                    console.log(store.membership.dataDetail.username);
+                    setVisibleModal(true);
+                  }}
+                >
+                  Edit
+                </Button>
+                <Button
+                  onClick={() => {
+                    setInitialData({
+                      id: store.membership.dataDetail.id,
+                      name: store.membership.dataDetail.userDetail.name,
+                      username: store.membership.dataDetail.username,
+                      phone_number:
+                        store.membership.dataDetail.userDetail.phone_number,
+                      roleId: store.membership.dataDetail.roles.id,
+                      isChangePassword: true,
+                    });
+                    setVisibleModal(true);
+                  }}
+                >
+                  Ganti Password
+                </Button>
+              </Space>
+              </Col>
+            )}
+          
         </Row>
 
         <Row style={{ marginBottom: 20 }}>
@@ -416,7 +566,7 @@ export const DetailUser = observer(() => {
                     : "Inaktif"}
                 </Text>
               </Col>
-              {store.authentication.userData.role === "Sales" && (
+              {/* {store.authentication.userData.role === "Sales" && (
                 <Row>
                   <Col span={12}>
                     <Text strong>Foto Identitas</Text>
@@ -438,12 +588,11 @@ export const DetailUser = observer(() => {
                   <Col span={24}>
                     <Text strong>Foto Toko</Text>
                     <Text>
-                      <Row>
-                        {data.map((item) => (
+                    <Row>
+                        {store.authentication.listImage.map((item) => (
                           <Image
                             src={
-                              store.authentication.dataProfit.userDetail
-                                ?.image_store
+                              item
                                 ? `${appConfig.apiUrl}/config/image/${item}`
                                 : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                             }
@@ -454,7 +603,7 @@ export const DetailUser = observer(() => {
                     </Text>
                   </Col>
                 </Row>
-              )}
+              )} */}
               {store.authentication.userData.role === "Admin" && (
                 <Row>
                   <Col span={12}>
@@ -478,11 +627,48 @@ export const DetailUser = observer(() => {
                     <Text strong>Foto Toko</Text>
                     <Text>
                       <Row>
-                        {data.map((item) => (
+                        {store.authentication.listImage.map((item) => (
                           <Image
                             src={
-                              store.authentication.dataProfit.userDetail
-                                ?.image_store
+                              item
+                                ? `${appConfig.apiUrl}/config/image/${item}`
+                                : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                            }
+                            style={{ width: "10vw",marginRight:15 }}
+                          />
+                        ))}
+                      </Row>
+                    </Text>
+                  </Col>
+                </Row>
+              )}
+              {store.authentication.userData.role === "Sales" && (
+                <Row>
+                  <Col span={12}>
+                    <Text strong>Foto Identitas</Text>
+                  </Col>
+                  <Col span={12}></Col>
+                  <Col span={12}>
+                    <Text>
+                      <Image
+                        src={
+                          store.authentication.dataProfit.userDetail
+                            ?.image_identity
+                            ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
+                            : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                        }
+                        style={{ width: "10vw" }}
+                      />
+                    </Text>
+                  </Col>
+                  <Col span={24}>
+                    <Text strong>Foto Toko</Text>
+                    <Text>
+                      <Row>
+                        {store.authentication.listImage.map((item) => (
+                          <Image
+                            src={
+                              item
                                 ? `${appConfig.apiUrl}/config/image/${item}`
                                 : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                             }
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 2b69f45..d04e6e3 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -267,6 +267,7 @@ export const Membership = observer(() => {
           image_store: imageStore,
         };
         await store.membership.update(initialData.id, request);
+        console.log(data, "edit data");
         message.success(
           initialData.isChangePassword
             ? "Success Change Member Password"
diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index 4981af4..6288ffc 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Form,
   Input,
@@ -36,6 +36,20 @@ export const MembershipModal = ({
   const [responseFilenameStore, setResponseFilenameStore] = useState("");
   const [loading, setLoading] = useState(false);
   const [loadingStore, setLoadingStore] = useState(false);
+
+  useEffect(() => {
+    setFileList([{
+      url : `${appConfig.apiUrl}/config/image/${initialData.image_identity}`
+    }])
+    setFileStore([{
+      url : `${appConfig.apiUrl}/config/image/${initialData.image_store}`
+    }])
+    setImage(`${appConfig.apiUrl}/config/image/${initialData.image_identity}`)
+    setImageStore(`${appConfig.apiUrl}/config/image/${initialData.image_store}`)
+    return () => {
+      
+    }
+  }, [initialData])
   
   const beforeUpload = (file) => {
     let isLt2M;
@@ -156,6 +170,8 @@ export const MembershipModal = ({
         form
           .validateFields()
           .then((values) => {
+            values.image_identity = responseFilename
+            values.image_store = responseFilenameStore
             onCreate(values,responseFilename,responseFilenameStore);
             form.resetFields();
             setFileStore([])
@@ -272,6 +288,7 @@ export const MembershipModal = ({
                     onChange={handleChange}
                     beforeUpload={(file) => beforeUpload(file)}
                     customRequest={(args) => uploadHandler(args)}
+                    maxCount={1}
                     onRemove={(file) => {
                       setImage("");
                       setLoading(false);
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index e5bc13c..fdd510a 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -293,6 +293,46 @@ export const Profile = observer(() => {
                 </Row>
               )} */}
               {store.authentication.userData.role === "Retail" && (
+                // <Row>
+                //   <Col span={12}>
+                //     <Text strong>Foto Identitas</Text>
+                //   </Col>
+                //   <Col span={12}></Col>
+                //   <Col span={12}>
+                //     <Text>
+                //       <Image
+                //         src={
+                //           store.authentication.profileData.userDetail
+                //             ?.image_identity
+                //             ? `${appConfig.apiUrl}/config/image/${store.authentication.profileData.userDetail?.image_identity}`
+                //             : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                //         }
+                //         style={{ width: "10vw" }}
+                //       />
+                //     </Text>
+                //   </Col>
+                //   <Col span={24}>
+                //     <Text strong>Foto Toko</Text>
+                //     <Text>
+                //       <Row>
+                //         {JSON.parse(
+                //           store.authentication.profileData.userDetail
+                //             ?.image_store
+                //         ).map((item) => (
+                //           <Image
+                //             src={
+                //               store.authentication.profileData.userDetail
+                //                 ?.image_store
+                //                 ? `${appConfig.apiUrl}/config/image/${item}`
+                //                 : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
+                //             }
+                //             style={{ width: "10vw", marginRight: 15 }}
+                //           />
+                //         ))}
+                //       </Row>
+                //     </Text>
+                //   </Col>
+                // </Row>
                 <Row>
                   <Col span={12}>
                     <Text strong>Foto Identitas</Text>
@@ -315,18 +355,14 @@ export const Profile = observer(() => {
                     <Text strong>Foto Toko</Text>
                     <Text>
                       <Row>
-                        {JSON.parse(
-                          store.authentication.profileData.userDetail
-                            ?.image_store
-                        ).map((item) => (
+                        {store.authentication.imageProfil.map((item) => (
                           <Image
                             src={
-                              store.authentication.profileData.userDetail
-                                ?.image_store
+                              item
                                 ? `${appConfig.apiUrl}/config/image/${item}`
                                 : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                             }
-                            style={{ width: "10vw", marginRight: 15 }}
+                            style={{ width: "10vw",marginRight:15 }}
                           />
                         ))}
                       </Row>
diff --git a/src/store/authentication.js b/src/store/authentication.js
index eb4121e..7b8a264 100644
--- a/src/store/authentication.js
+++ b/src/store/authentication.js
@@ -10,6 +10,7 @@ export class Authentication {
   profileData = {};
   dataProfit=[];
   listImage=[];
+  imageProfil=[];
 
   constructor(ctx) {
     this.ctx = ctx;
@@ -58,7 +59,7 @@ export class Authentication {
       const response = await http.get(`/auth/profile/${id}`);
       console.log(response)
       this.dataProfit = response.body ?? [];
-      this.listImage = this.dataProfit.userDetail ? JSON.parse(this.dataProfit.userDetail?.image_store) : [];
+      this.listImage = this.dataProfit.userDetail?.image_store ? JSON.parse(this.dataProfit.userDetail?.image_store) : [];
       this.total_data = response?.body?.count ?? 0;
     } catch (e) {
       console.error(e);
@@ -70,6 +71,7 @@ export class Authentication {
       const response = await http.get('/auth/profile');
       console.log(response)
       this.profileData = response.body;
+      this.imageProfil = this.profileData.userDetail?.image_store ? JSON.parse(this.profileData.userDetail?.image_store) : [];
     } catch (e) {
       console.error(e);
     }