diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index cc6a0cf..763111f 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -15,6 +15,8 @@ import {
   Image,
   Tag,
   Tabs,
+  Space,
+  message,
 } from "antd";
 import moment from "moment";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -37,6 +39,7 @@ export const Profile = observer(() => {
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
   const [actionFilter, setAction] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   const routeData = [
     {
@@ -257,7 +260,7 @@ export const Profile = observer(() => {
       render: (text, record) => {
         return (
           <Text>
-            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
+            {format(parseISO(record.transaction_date), "dd MMMM yyyy HH:mm:ss")}
           </Text>
         );
       },
@@ -277,6 +280,22 @@ export const Profile = observer(() => {
       }
     : null;
 
+  const handleSubmit = async (id, data) => {
+    try {
+      modalLoader.setLoading(true);
+      const response = await store.membership.update(id, data);
+      console.log(id,"id yang masuk")
+      console.log(data,"data yang masuk")
+      message.success(response?.body?.message || "Berhasil Ganti Password");
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error(e.response?.body?.message || "Gagal Ganti Password");
+    }
+
+    modalLoader.setLoading(false);
+    setVisible(false);
+    form.resetFields();
+  };
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
@@ -289,6 +308,7 @@ export const Profile = observer(() => {
       />
       <Card>
         <Title strong>Profile</Title>
+
         <Row style={{ marginBottom: 20 }}>
           <Col lg={12} xs={24}>
             <Row>
@@ -407,6 +427,25 @@ export const Profile = observer(() => {
                 </Row>
               </Col>
             )}
+          {store.authentication.userData.role === "Retail" && (
+            <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,
+                console.log(store.authentication.profileData?.id,"id nya")
+                console.log(store.authentication.profileData?.userDetail.id,"id member")
+                setVisible(true);
+              }}
+            >
+              Ganti Password
+            </Button>
+          )}
         </Row>
         <Row>
           <Col span={24}>
@@ -710,6 +749,46 @@ export const Profile = observer(() => {
           </Col>
         </Row>
       </Modal>
+
+      <Modal
+        visible={visible}
+        title={"Ganti Password"}
+        okText={"Ganti"}
+        cancelText="Batal"
+        onCancel={() => {
+          form.resetFields();
+          //handleCancelTransaction();
+          setVisible(false);
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(store.authentication.profileData?.id, "id pass");
+              console.log(values, "id data");
+              console.log(store.membership.dataDetail.id, "id member");
+              handleSubmit(store.authentication.profileData?.id, values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          // initialValues={{ supplier: store.supplier.code }}
+        >
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[{ required: false, message: "Please input password!" }]}
+          >
+            <Input.Password />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 });