Config Page

src/pages/Membership/DetailUser.js

@@ -18,6 +18,7 @@ import { FilterOutlined, DownloadOutlined } from "@ant-design/icons";
 import { format, parseISO } from "date-fns";
 import { ModalLoaderContext } from "../../utils/modal";
 import { useParams } from "react-router-dom";
+import { MembershipModal } from "./MembershipModal";
 
 const { Title, Text } = Typography;
 
@@ -35,6 +36,7 @@ export const DetailUser = observer(() => {
   useEffect(() => {
     (async () => {
       modalLoader.setLoading(true);
+      await getData();
       await Promise.allSettled([
         store.transaction.getDataHistoryTopUp(id),
         store.membership.getDetail(id),
@@ -43,6 +45,71 @@ export const DetailUser = observer(() => {
     })();
   }, []);
 
+  const getData = async () => {
+    store.authentication.userData.role === "Admin"
+      ? await store.membership.getData()
+      : await store.membership.getDataBySuperior();
+  };
+  const changeStatus = async (id, isActive) => {
+    const status = isActive ? "inactive" : "active";
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      modalLoader.setLoading(true);
+      const response = await store.membership.changeStatus(id, status);
+      modalLoader.setLoading(false);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Membership`)
+        : message.error(`Failed ${status2} Membership`);
+      await getData();
+    } catch (err) {
+      modalLoader.setLoading(false);
+      message.error(`Failed ${status2} Membership`);
+    }
+  };
+
+  const onSubmit = async (data) => {
+    data.superior = true;
+
+    if (initialData.id) {
+      setConfirmLoading(true);
+      modalLoader.setLoading(true);
+      try {
+        await store.membership.update(initialData.id, data);
+        message.success(
+          initialData.isChangePassword
+            ? "Success Change Member Password"
+            : "Success Update Data Member"
+        );
+        await getData();
+        modalLoader.setLoading(false);
+      } catch (e) {
+        modalLoader.setLoading(true);
+        message.error(
+          initialData.isChangePassword
+            ? "Failed Update Member Password"
+            : "Failed Update Data Member"
+        );
+      }
+      setConfirmLoading(false);
+      setVisibleModal(false);
+    } else {
+      setConfirmLoading(true);
+      modalLoader.setLoading(true);
+      try {
+        await store.membership.create(data);
+        message.success("Success Add New Member");
+        await getData();
+      } catch (e) {
+        console.log(e, "apa errornya");
+        message.error("Failed Add Member");
+      }
+      modalLoader.setLoading(false);
+      setConfirmLoading(false);
+      setVisibleModal(false);
+      setInitialData({});
+    }
+  };
   const columns = [
     {
       title: "Amount",
@@ -61,6 +128,69 @@ export const DetailUser = observer(() => {
         );
       },
     },
+    {
+      title: "Status",
+      dataIndex: "isActive",
+      key: "isActive",
+      render: (text, record) => (
+        <Tag
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B" }}
+        >
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+        </Tag>
+      ),
+    },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+        <Space size="middle">
+          {/* {store.authentication.userData.role === "Admin" &&  */}
+          <Button
+            type={record?.isActive === true ? "danger" : "primary"}
+            onClick={() => changeStatus(record?.id, record?.isActive)}
+          >
+            {record?.isActive === true ? "Inactive" : "Active"}
+          </Button>
+          {/* } */}
+          {/* {store.authentication.userData.role === "Admin" &&  */}
+          <Button
+            onClick={() => {
+              let record2 = record;
+              delete record2.password;
+              record2.isChangePassword = false;
+
+              setInitialData({
+                ...record2,
+                // roleId: record.roles.id,
+              });
+              setVisibleModal(true);
+            }}
+          >
+            Edit
+          </Button>
+          {/* }
+              {store.authentication.userData.role === "Admin" &&  */}
+          <Button
+            onClick={() => {
+              let record2 = record;
+              delete record2.password;
+              record2.isChangePassword = true;
+
+              setInitialData({
+                ...record2,
+                // roleId: record.roles.id,
+              });
+              setVisibleModal(true);
+            }}
+          >
+            Ganti Password
+          </Button>
+          {/* } */}
+        </Space>
+      ),
+    },
   ];
 
   const routeData = [
@@ -68,6 +198,10 @@ export const DetailUser = observer(() => {
       route: LINKS.HOME,
       name: "Home",
     },
+    {
+      route: LINKS.MEMBERSHIP,
+      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
+    },
     {
       route: LINKS.USER_DETAIL,
       name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
@@ -91,30 +225,30 @@ export const DetailUser = observer(() => {
                 <Text strong>Username</Text>
               </Col>
               <Col span={12}>
-                <Text>
-                {store.membership.dataDetail.superior?.username}
-                </Text>
+                <Text>{store.membership.dataDetail.superior?.username}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Role</Text>
               </Col>
               <Col span={12}>
-                <Text>
-                {store.membership.dataDetail.roles?.name}
-                </Text>
+                <Text>{store.membership.dataDetail.roles?.name}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Phone Number</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.membership.dataDetail.userDetail?.phone_number}</Text>
+                <Text>
+                  {store.membership.dataDetail.userDetail?.phone_number}
+                </Text>
               </Col>
               <Col span={12}>
                 <Text strong>Status</Text>
               </Col>
               <Col span={12}>
                 <Text>
-                  {store.membership.dataDetail.isActive === true ? "Aktif": "Inaktif"}
+                  {store.membership.dataDetail.isActive === true
+                    ? "Aktif"
+                    : "Inaktif"}
                 </Text>
               </Col>
             </Row>
@@ -141,7 +275,7 @@ export const DetailUser = observer(() => {
                 History Top Up
               </Title>
 
-              <Button
+              {/* <Button
                 style={{ marginBottom: "1rem" }}
                 onClick={() => {
                   console.log("clicked filter");
@@ -149,7 +283,7 @@ export const DetailUser = observer(() => {
               >
                 <FilterOutlined />
                 Filter
-              </Button>
+              </Button> */}
               <Table
                 columns={columns}
                 dataSource={store.transaction.dataHistoryTopUp}
@@ -160,6 +294,56 @@ export const DetailUser = observer(() => {
         </Row>
         <div />
       </Card>
+      {/* <Modal
+        visible={isVisibleTopUpModal}
+        title="Top Up Saldo"
+        okText="Top Up"
+        cancelText="Cancel"
+        onCancel={() => {
+          form.resetFields();
+          handleCancelTransaction();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmitTransaction(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="amount"
+            label="Amount"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <InputNumber
+              style={{ width: "100%" }}
+              formatter={(value) =>
+                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+              }
+              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+            />
+          </Form.Item>
+        </Form>
+      </Modal> */}
+      <MembershipModal
+        visible={visibleModal}
+        confirmLoading={confirmLoading}
+        initialData={initialData}
+        onCreate={async (data) => {
+          onSubmit(data);
+        }}
+        onCancel={() => {
+          setInitialData({});
+          setVisibleModal(false);
+        }}
+      />
     </div>
   );
 });

src/pages/Membership/Membership.js

@@ -147,31 +147,33 @@ export const Membership = observer(() => {
           currency: "IDR",
         }).format(text),
     },
-    // {
-    //   title: "Status",
-    //   dataIndex: "isActive",
-    //   key: "isActive",
-    //   render: (text, record) => (
-    //     <Tag
-    //       color={record?.isActive === true ? "processing" : "#E3E8EE"}
-    //       style={{ color: "#4F566B" }}
-    //     >
-    //       {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
-    //     </Tag>
-    //   ),
-    // },
+    {
+      title: "Status",
+      dataIndex: "isActive",
+      key: "isActive",
+      render: (text, record) => (
+        <Tag
+          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B" }}
+        >
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+        </Tag>
+      ),
+    },
     {
       title: "Action",
       key: "action",
       render: (text, record) => (
         <Space size="middle">
-          {/* {store.authentication.userData.role === "Admin" && <Button
+          {/* {store.authentication.userData.role === "Admin" && */}
+           <Button
                   type={record?.isActive === true ? "danger" : "primary"}
                   onClick={() => changeStatus(record?.id, record?.isActive)}
               >
                   {record?.isActive === true ? "Inactive" : "Active"}
-              </Button>}
-              <Button
+              </Button>
+              {/* } */}
+              {/* <Button
                   onClick={() => {
                       setDestination(record?.id);
                       console.log(record?.id);
@@ -179,8 +181,9 @@ export const Membership = observer(() => {
                   }}
               >
                   <DownloadOutlined/> Top Up Saldo
-              </Button>
-              {store.authentication.userData.role === "Admin" && <Button
+              </Button> */}
+              {/* {store.authentication.userData.role === "Admin" &&  */}
+              <Button
                   onClick={() => {
                       let record2 = record;
                       delete record2.password;
@@ -194,8 +197,10 @@ export const Membership = observer(() => {
                   }}
               >
                   Edit
-              </Button>}
-              {store.authentication.userData.role === "Admin" && <Button
+              </Button>
+              {/* }
+              {store.authentication.userData.role === "Admin" && */}
+               <Button
                   onClick={() => {
                       let record2 = record;
                       delete record2.password;
@@ -209,7 +214,8 @@ export const Membership = observer(() => {
                   }}
               >
                   Ganti Password
-              </Button>} */}
+              </Button>
+              {/* } */}
           <Button
             onClick={() => {
               setDestination(record?.id);
@@ -219,15 +225,18 @@ export const Membership = observer(() => {
           >
             <DownloadOutlined /> Top Up Saldo
           </Button>
-          <Button
-            onClick={async () => {
-              await store.transaction.getDataHistoryTopUp(record.id);
-              history.push(LINKS.USER_DETAIL.replace(":id", record.id));
-              console.log(record.id);
-            }}
-          >
-            Detail
-          </Button>
+          {/* {store.authentication.userData.role === "Admin" && ( */}
+            <Button
+              onClick={async () => {
+                await store.transaction.getDataHistoryTopUp(record.id);
+                history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+                console.log(record.id);
+              }}
+            >
+              Detail
+            </Button>
+          {/* ) */}
+          {/* } */}
         </Space>
       ),
     },
@@ -239,8 +248,8 @@ export const Membership = observer(() => {
       name: "Home",
     },
     {
-      route: "/app/membership",
-      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
+      route: LINKS.MEMBERSHIP,
+      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
     },
   ];
 
@@ -300,14 +309,14 @@ export const Membership = observer(() => {
               </Button> */}
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
-              <Search
+              {/* <Search
                 placeholder="input search text"
                 style={{
                   width: store.ui.mediaQuery.isMobile ? 160 : 200,
                   marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
-              />
+              /> */}
               <Button
                 onClick={() => {
                   setInitialData({});