ppob-frontend/src/pages/Membership/DetailUser.js

import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, message, Row, Space, Table, Typography,} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
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;

export const DetailUser = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);
  const {id} = useParams();
  const [visibleModal, setVisibleModal] = useState(false);
  const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
  const [destination, setDestination] = useState(null);
  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);

  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
      await getData();
      modalLoader.setLoading(false);
    })();

    return () => {
      store.membership.dataDetail = {};
      store.transaction.dataHistoryTopUp = [];
    };
  }, []);

  const getData = async () => {
    const isAdmin = store.authentication.userData.role === "Admin";
    await Promise.allSettled([
      store.transaction.getDataHistoryTopUp(id),
      store.membership.getDetail(id),
      store.role.getData(isAdmin)
    ]);
  };

  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 || response?.body?.statusCode === 200
        ? 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;
    setConfirmLoading(true);
    modalLoader.setLoading(true);
    try {
      let response;
      if (initialData.isChangePassword) {
        response = await store.membership.changePassword(initialData.id, data);
      } else {
        response = await store.membership.update(initialData.id, data);
      }

      setVisibleModal(false);

      if (response?.body?.statusCode === 200) {
        message.success(
            initialData.isChangePassword
                ? "Success Change Member Password"
                : "Success Update Data Member");
      } else {
        message.error(
            initialData.isChangePassword
                ? "Failed Change Member Password"
                : "Failed Update Data Member");
      }
      await getData();
    } catch (e) {
      modalLoader.setLoading(false);
      message.error(
          initialData.isChangePassword
              ? "Failed Update Member Password"
              : "Failed Update Data Member"
      );
    }
    modalLoader.setLoading(false);
    setConfirmLoading(false);
  };

  const columns = [
    {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
      render: (text) =>
          new Intl.NumberFormat("id-ID", {
            style: "currency",
            currency: "IDR",
          }).format(text),
    },
    {
      title: "Transaction Date",
      dataIndex: "transaction_date",
      key: "transaction_date",
      render: (text, record) => {
        return (
          <Text>
            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
          </Text>
        );
      },
    },
  ];

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Beranda",
    },
    {
      route: LINKS.MEMBERSHIP,
      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
    },
    {
      route: LINKS.USER_DETAIL.replace(":id", id),
      name: <span style={{fontWeight: "bold"}}>Detail User</span>,
    },
  ];

  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData} />
      <Card>
        <Title strong>Detail User</Title>
        <Row style={{ marginBottom: 20 }}>
          <Col lg={12} xs={24}>
            <Row>
              <Col span={12}>
                <Text strong>Name</Text>
              </Col>
              <Col span={12}>
                <Text>{store.membership.dataDetail.userDetail?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Username</Text>
              </Col>
              <Col span={12}>
                <Text>{store.membership.dataDetail.username}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Role</Text>
              </Col>
              <Col span={12}>
                <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>
              </Col>
              <Col span={12}>
                <Text strong>Status</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.membership.dataDetail.isActive === true
                      ? "Aktif"
                      : "Inaktif"}
                </Text>
              </Col>
            </Row>
          </Col>
          <Col lg={12} xs={24}>
            {store.authentication.userData.role === "Admin" && <Title strong level={3}>Action User Detail</Title>}
            {store.authentication.userData.role === "Admin" && <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,
                      phone_number: store.membership.dataDetail.userDetail.phone_number,
                      roleId: store.membership.dataDetail.roles.id,
                      isChangePassword: false,
                    });
                    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>
          <Col span={24}>
            <div>
              <Title strong level={3}>
                History Top Up
              </Title>
              <Table
                  columns={columns}
                  dataSource={store.transaction.dataHistoryTopUp}
                  bordered
              />
            </div>
          </Col>
        </Row>
        <div />
      </Card>
      <MembershipModal
        visible={visibleModal}
        confirmLoading={confirmLoading}
        initialData={initialData}
        onCreate={async (data) => {
          onSubmit(data);
        }}
        onCancel={() => {
          setInitialData({});
          setVisibleModal(false);
        }}
      />
    </div>
  );
});