diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 38f178f..aff0513 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -275,6 +275,10 @@ export const DetailUser = observer(() => {
     store.authentication.dataProfit.userDetail?.image_identity,
     "detail"
   );
+  console.log(
+    store.authentication.listImage,
+    "detail gambar"
+  );
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -283,8 +287,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 +370,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 +570,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 +592,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 +607,7 @@ export const DetailUser = observer(() => {
                     </Text>
                   </Col>
                 </Row>
-              )}
+              )} */}
               {store.authentication.userData.role === "Admin" && (
                 <Row>
                   <Col span={12}>
@@ -478,11 +631,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..d6fd602 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -255,6 +255,16 @@ export const Membership = observer(() => {
   ];
   const onSubmit = async (data, image, imageStore) => {
     data.superior = true;
+    console.log(imageStore, "Apa imageStore")
+
+    if(!imageStore){
+      imageStore = []
+    }
+
+    if (initialData.id) {
+      data.image_identity = image;
+      data.image_store = imageStore;
+    }
 
     if (initialData.id) {
       setConfirmLoading(true);
@@ -267,6 +277,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..6595ee5 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,7 +36,29 @@ export const MembershipModal = ({
   const [responseFilenameStore, setResponseFilenameStore] = useState("");
   const [loading, setLoading] = useState(false);
   const [loadingStore, setLoadingStore] = useState(false);
-  
+
+  useEffect(() => {
+    if (initialData.id) {
+      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;
     let allowedFile = ["image/jpeg", "image/png"];
@@ -88,12 +110,15 @@ export const MembershipModal = ({
     console.log(res, "ini respon 2");
     setImageStore(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
     setResponseFilenameStore([...responseFilenameStore, res.body.filename]);
-    setFileStore([...fileStore, {
-      uid: "-1",
-      name: res.body.filename,
-      status: "done",
-      url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
-    } ]);
+    setFileStore([
+      ...fileStore,
+      {
+        uid: "-1",
+        name: res.body.filename,
+        status: "done",
+        url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
+      },
+    ]);
 
     setLoadingStore(false);
   };
@@ -156,9 +181,12 @@ export const MembershipModal = ({
         form
           .validateFields()
           .then((values) => {
-            onCreate(values,responseFilename,responseFilenameStore);
+            console.log(values, "apa valuesanya");
+            values.image_identity = responseFilename;
+            values.image_store = responseFilenameStore;
+            onCreate(values, responseFilename, responseFilenameStore);
             form.resetFields();
-            setFileStore([])
+            setFileStore([]);
             setImage("");
             setFileList([]);
             setPreviewImage("");
@@ -272,6 +300,7 @@ export const MembershipModal = ({
                     onChange={handleChange}
                     beforeUpload={(file) => beforeUpload(file)}
                     customRequest={(args) => uploadHandler(args)}
+                    maxCount={1}
                     onRemove={(file) => {
                       setImage("");
                       setLoading(false);
@@ -450,7 +479,7 @@ export const MembershipModal = ({
                       setFileStore([]);
                     }}
                   >
-                    {fileStore.length >= 3 ? null:uploadButtonStore  }
+                    {fileStore.length >= 3 ? null : uploadButtonStore}
                   </Upload>
                   <h5
                     style={{
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..3754135 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,8 @@ 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 +72,9 @@ 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) : [];
+     
+      //this.imageProfil = this.profileData.userDetail?.image_store ? JSON.parse(this.profileData.userDetail?.image_store) : [];
     } catch (e) {
       console.error(e);
     }