ppob-frontend/src/pages/Product/ProductDetail.js

import React, { useContext, useEffect } from "react";
import { Card, Col, Row, Table, Typography, Tag } 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";

const { Title, Text } = Typography;

export const ProductDetail = observer(() => {
  const store = useStore();
  const { id } = useParams();
  const modalLoader = useContext(ModalLoaderContext);

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Beranda",
    },
    {
      route: LINKS.PRODUCT,
      name: <span style={{ fontWeight: "bold" }}>Produk</span>,
    },
    {
      route: LINKS.PRODUCT_DETAIL.replace(":id", `${id}`),
      name: <span style={{ fontWeight: "bold" }}>Detail Produk</span>,
    },
  ];

  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
      await Promise.allSettled([
        store.product.getPriceHistoryByProduct(id),
        store.product.getDetailProduct(id),
      ]);
      modalLoader.setLoading(false);
    })();
  }, []);

  const columns = [
    {
      title: "Markup Price",
      dataIndex: "mark_up_price",
      key: "mark_up_price",
      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
        }).format(text),
    },
    {
      title: "Price",
      dataIndex: "price",
      key: "price",
      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
        }).format(text),
    },
    {
      title: "Tanggal Berlaku",
      dataIndex: "startDate",
      key: "startDate",
      render: (text) => {
        return (
          <Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
        );
      },
    },
    {
      title: "Tanggal Berakhir",
      dataIndex: "endDate",
      key: "endDate",
      render: (text) => {
        return (
          <Text>
            {text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}
          </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={[""].join(" ")}>
      <BreadcumbComponent data={routeData} />
      <Card>
        <Title strong>Product Detail</Title>
        <Row style={{ marginBottom: 20 }}>
          <Col lg={12} xs={24}>
            <Row>
              <Col span={12}>
                <Text strong>Kode</Text>
              </Col>
              <Col span={12}>
                <Text>{store.product?.dataDetailProduct?.code}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Nama Produk</Text>
              </Col>
              <Col span={10}>
                <Text>{store.product?.dataDetailProduct?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Supplier</Text>
              </Col>
              <Col span={12}>
                <Text>{store.product?.dataDetailProduct?.supplier?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Status</Text>
              </Col>
              <Col span={12}>
                <Text>{store.product?.dataDetailProduct?.status}</Text>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <div>
              <Title strong level={3}>
                Product Price History
              </Title>
              <Table
                columns={columns}
                dataSource={store.product.dataPriceHistory}
                bordered
                pagination={{
                  pageSize: store.product.pageSizePriceHistory,
                  total: store.product.totalDataPriceHistory,
                  current: store.product.pagePriceHistory + 1,
                  showSizeChanger: true,
                  simple: false,
                }}
                onChange={async (page) => {
                  let pageNumber = page.current;
                  store.product.pageSizePriceHistory = page.pageSize;
                  store.product.pagePriceHistory = pageNumber - 1;
                  modalLoader.setLoading(true);
                  await store.product.getPriceHistoryByProduct(id);
                  modalLoader.setLoading(false);
                }}
              />
            </div>
          </Col>
        </Row>
        <div />
      </Card>
    </div>
  );
});