ppob-frontend/src/pages/Profile/Profile.js

import React, { useContext, useEffect, useState } from "react";
import {
  Button,
  Card,
  Col,
  Row,
  Table,
  Typography,
  DatePicker,
  Modal,
  Form,
  Input,
} from "antd";
import moment from "moment";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined } from "@ant-design/icons";
import { format, parseISO } from "date-fns";
import { ModalLoaderContext } from "../../utils/modal";

const { Title, Text } = Typography;
const { RangePicker } = DatePicker;
export const Profile = observer(() => {
  const store = useStore();
  const [form] = Form.useForm();
  const modalLoader = useContext(ModalLoaderContext);
  const [filterStart, setFilterStart] = useState([]);
  const [filterEnd, setFilterEnd] = useState([]);

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Home",
    },
    {
      route: LINKS.PROFILE,
      name: <span style={{ fontWeight: "bold" }}>Profil</span>,
    },
  ];

  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
      await Promise.allSettled([
        store.authentication.getProfile(),
        store.transaction.getDataHistoryTransaction(),
      ]);
      modalLoader.setLoading(false);
    })();
  }, []);

  const handleRemoveFilter = async () => {
    store.transaction.filterStart = null;
    store.transaction.filterEnd = null;
    form.resetFields();
    setFilterStart([]);
    setFilterEnd([]);
    await store.transaction.getDataHistoryTransaction();
    store.transaction.visibleModalFilterTransaction = false;
  };

  const handleCancelFilter = () => {
    store.transaction.filterStart = null;
    form.resetFields();
    store.transaction.filterEnd = null;
    store.transaction.visibleModalFilterTransaction = false;
  };

  const handleSubmitFilter = async () => {
    const data = form.getFieldsValue();
    store.transaction.filterStart = data.start_date;
    store.transaction.filterEnd = data.end_date;
    modalLoader.setLoading(true);
    await store.transaction.getDataHistoryTransaction();
    modalLoader.setLoading(false);
    form.resetFields();
    store.transaction.visibleModalFilterTransaction = false;
  };

  const footerLayoutFilter = [
    <Button
      key={"remove"}
      onClick={handleRemoveFilter}
      style={{
        backgroundColor: "#e74e5e",
        color: "#fff",
      }}
    >
      Remove Filter
    </Button>,
    <Button key={"cancel"} onClick={handleCancelFilter}>
      Cancel
    </Button>,
    <Button
      key={"submit"}
      onClick={handleSubmitFilter}
      style={{
        backgroundColor: "#4e79e7",
        color: "#fff",
      }}
    >
      Apply
    </Button>,
  ];
  const columns = [
    {
      title: "Price",
      dataIndex: "price",
      key: "price",

      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
        }).format(text),
    },
    {
      title: "Pembeli",
      dataIndex: "buyer",
      key: "buyer",
    },
    {
      title: "Tujuan",
      dataIndex: "transaction_destination",
      key: "transaction_destination",
    },
    {
      title: "Kode Transaksi",
      dataIndex: "transaction_code",
      key: "transaction_code",
    },
    {
      title: "Status",
      dataIndex: "status",
      key: "status",
    },
    {
      title: "No Seri",
      dataIndex: "seri_number",
      key: "seri_number",
    },
    {
      title: "IDTrx Mitra",
      dataIndex: "partner_transaction_code",
      key: "partner_transaction_code",
    },
    {
      title: "Transaction Date",
      dataIndex: "created_at",
      key: "created_at",
      render: (text, record) => {
        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
      },
    },
  ];

  const styleSaldoTitle = store.ui.mediaQuery.isDesktop
    ? {
        display: "flex",
        justifyContent: "center",
      }
    : { fontSize: "0.75rem" };
  const styleSaldoContent = store.ui.mediaQuery.isDesktop
    ? {
        fontSize: "1.25rem",
        display: "flex",
        justifyContent: "center",
      }
    : null;

  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData} />
      <Card>
        <Title strong>Profile</Title>
        <Row style={{ marginBottom: 20 }}>
          <Col lg={12} xs={24}>
            <Row>
              <Col span={12}>
                <Text strong>Name</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.authentication.profileData?.userDetail?.name}
                </Text>
              </Col>
              <Col span={12}>
                <Text strong>Phone Number</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.authentication.profileData?.userDetail?.phone_number}
                </Text>
              </Col>
              <Col span={12}>
                <Text strong>Username</Text>
              </Col>
              <Col span={12}>
                <Text>{store.authentication.profileData?.username}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Role</Text>
              </Col>
              <Col span={12}>
                <Text>{store.authentication.profileData.roles?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Superior</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.authentication.profileData.superior?.username}
                </Text>
              </Col>
            </Row>
          </Col>
          <Col span={store.ui.mediaQuery.isMobile ? 10 : 5}>
            <Row justify={"center"}>
              <Col lg={12} xs={12}>
                <Title strong level={3} style={styleSaldoTitle}>
                  Saldo
                </Title>
              </Col>
              <Col lg={24} xs={12}>
                <Text style={styleSaldoContent}>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(store.authentication.profileData?.wallet || 0)}
                </Text>
              </Col>
              <Col></Col>
            </Row>
          </Col>
          {store.authentication.userData.role === "Admin" ||
            (store.authentication.userData.role === "Supervisor" && (
              <Col span={store.ui.mediaQuery.isMobile ? 8 : 5}>
                <Row justify={"center"}>
                  <Col lg={12} xs={12}>
                    <Title strong level={3} style={styleSaldoTitle}>
                      Profit
                    </Title>
                  </Col>
                  <Col lg={24} xs={12}>
                    <Text style={styleSaldoContent}>
                      {new Intl.NumberFormat("id-ID", {
                        style: "currency",
                        currency: "IDR",
                      }).format(store.authentication.profileData?.profit || 0)}
                    </Text>
                  </Col>
                  <Col></Col>
                </Row>
              </Col>
            ))}
        </Row>
        <Row>
          <Col span={24}>
            <div>
              <Title strong level={3}>
                History Transaction
              </Title>
              <Button
                style={{ marginBottom: "1rem" }}
                onClick={() => {
                  store.transaction.visibleModalFilterTransaction = true;
                }}
              >
                <FilterOutlined />
                Filter
              </Button>
              <Table
                columns={columns}
                bordered
                dataSource={store.transaction.dataHistoryTransaction}
                pagination={{
                  pageSize: store.transaction.pageSizeHistoryTransaction,
                  total: store.transaction.total_dataHistoryTransaction,
                  current: store.transaction.pageHistoryTransaction + 1,
                  showSizeChanger: true,
                  simple: false,
                }}
                onChange={async (page) => {
                  let pageNumber = page.current;
                  store.transaction.pageSizeHistoryTransaction = page.pageSize;
                  store.transaction.pageHistoryTransaction = pageNumber - 1;
                  modalLoader.setLoading(true);
                  await store.transaction.getDataHistoryTransaction();
                  modalLoader.setLoading(false);
                }}
              />
            </div>
          </Col>
        </Row>
        <div />
      </Card>
      <Modal
        visible={store.transaction.visibleModalFilterTransaction}
        title={"Filter"}
        footer={footerLayoutFilter}
        onCancel={() => {
          form.resetFields();
          store.transaction.visibleModalFilterTransaction = false;
        }}
      >
        <Row>
          <Col span={24}>
            <Form layout="vertical" name="filter" form={form}>
              <Form.Item
                name="start_date"
                label="Dari"
                rules={[{ required: true, message: "Please input Date!" }]}
              >
                <DatePicker style={{ width: "100%" }} />
              </Form.Item>
              <Form.Item
                name="end_date"
                label="Sampai"
                rules={[{ required: true, message: "Please input Date!" }]}
              >
                <DatePicker style={{ width: "100%" }} />
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </Modal>
    </div>
  );
});