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

import React, {useContext, useEffect} from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table,} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
import {appConfig} from "../../config/app";
import {capitalize} from "lodash";

const {Search} = Input;

export const Payback = observer(() => {
    const store = useStore();
    const modalLoader = useContext(ModalLoaderContext);

    useEffect(() => {
        const init = async () => {
            try {
                modalLoader.setLoading(true);
                await store.payback.getDataConfirmation();
                modalLoader.setLoading(false);
            } catch (e) {
                modalLoader.setLoading(false);
                if (e.response?.body?.message) {
                    message.error(e.response.body.message);
                    return;
                }
                message.error(e.message);
            }
        };

        init();
    }, []);

    const columns = [
        {
            title: "Picture",
            dataIndex: "image_prove",
            key: "image_prove",
            render: (text, record) => (
          <Image
              src={`${appConfig.apiUrl}/config/image/${text}`}
              style={{width: '5vw'}}
              alt={record.id}
          />
      ),
    },
    {
        title: "Amount",
        dataIndex: "amount",
        key: "amount",
        width: '20%',
        render: (text) =>
            new Intl.NumberFormat("id-ID", {
                style: "currency",
                currency: "IDR",
            }).format(text),
    },
      {
          title: "Action",
          dataIndex: "amount",
          key: "action",
          width: '10%',
          render: (text, record) => (
              <Space size="middle">
                  <Button
                      onClick={async () => {
                          Modal.confirm({
                              title: `Are you sure Accept this submission?`,
                              icon: <CheckOutlined/>,
                              okText: "Accept",
                              cancelText: "Cancel",
                              okType: "primary",
                              onOk() {
                                  handleAction(record.id, "accept");
                              },
                              onCancel() {
                                  console.log("Cancel");
                              },
                          })
                      }}
                      icon={<CheckCircleOutlined/>}
                      style={{
                          backgroundColor: "#1bb91d",
                          color: "#fff",
                          borderColor: "#1bb91d",
                      }}
                  >
                      Accept
                  </Button>
                  <Button
                      onClick={async () => {
                          Modal.confirm({
                              title: `Are you sure Reject this submission?`,
                              icon: <StopOutlined/>,
                              okText: "Reject",
                              cancelText: "Cancel",
                              okType: "primary",
                              onOk() {
                                  handleAction(record.id, "reject");
                              },
                              onCancel() {
                                  console.log("Cancel");
                              },
                          })

                      }}
                      icon={<CloseOutlined/>}
                      style={{
                          backgroundColor: "#ff1c1c",
                          color: "#fff",
                          borderColor: "#ff1c1c",
                      }}
                  >
                      Reject
                  </Button>
              </Space>
          ),
      },
  ];

  if (store.authentication.userData.role === "Retail") columns.pop();

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

    const handleAction = async (id, type) => {
        modalLoader.setLoading(true);
        try {
            const response = await store.payback.confirmPayback(id, type);
            if (response.body.status !== 201) {
                message.error(`Failed ${capitalize(type)} Payback`);
            }
            message.success(`Success ${capitalize(type)} Payback`);
        } catch (e) {
            console.error(e, "apa errornya");
            message.error("Failed Handler Action Payback");
        }
        modalLoader.setLoading(false);
    };

    return (
        <div className={["ppob-container"].join(" ")}>
            <BreadcumbComponent data={routeData}/>
            <Card>
                <div>
                    <Row style={{marginBottom: 20}}>
                        <Col span={12}>
                            <Button>
                                <FilterOutlined/>
                                Filter
                            </Button>
                        </Col>
                        <Col span={12} style={{textAlign: "right"}}>
                            <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,
                }}
              />
            </Col>
          </Row>
          {store.ui.mediaQuery.isDesktop && (
              <Table
                  key="1"
                  hasEmpty
                  columns={columns}
                  dataSource={store.payback.dataConfirmation}
                  bordered
                  pagination={{
                      pageSize: store.payback.pageSizeConfirmation,
                      total: store.payback.totalDataConfirmation,
                      current: store.payback.pageSizeConfirmation + 1,
                      showSizeChanger: true,
                      simple: false
                  }}
                  onChange={async (page) => {
                      let pageNumber = page.current;
                      store.payback.pageSizeConfirmation = page.pageSize;
                      store.payback.pageConfirmation = pageNumber - 1;
                      modalLoader.setLoading(true);
                      await store.payback.getDataConfirmation();
                      modalLoader.setLoading(false);
                  }}
              />
          )}

          {store.ui.mediaQuery.isMobile && (
              <List
                  itemLayout="horizontal"
                  position={"top"}
                  pagination={{
                      onChange: async (page) => {
                          store.payback.pageSizeConfirmation = page.pageSize;
                          store.payback.pageConfirmation = page.current - 1;
                          modalLoader.setLoading(true);
                          await store.payback.getDataConfirmation();
                          modalLoader.setLoading(false);
                      },
                      pageSize: store.payback.pageSizeConfirmation,
                      total: store.payback.totalDataConfirmation,
                      current: store.payback.pageConfirmation + 1,
                      style: {marginBottom: "1rem", marginRight: "1rem"},
                  }}
                  dataSource={store.payback.dataConfirmation}
                  style={{padding: 0}}
                  renderItem={(item) => {
                      return (
                          <div>
                              <List.Item
                                  key={item.id}
                                  style={{
                                      backgroundColor: "#ffffff",
                                      paddingTop: 0,
                                      paddingBottom: 0,
                                display: "flex",
                                flexDirection: "row",
                                alignItems: "center",
                                justifyContent: "center",
                              }}
                          >
                            <List.Item.Meta
                                className={["cariparkir-container"].join(" ")}
                                title={item.name}
                                description={
                                  <div style={{}}>
                                    <Image src={item.picture} preview={false}/>
                                  </div>
                                }
                            />
                            <div style={{marginRight: 16}}>
                              <p
                                  style={{
                                    fontSize: 9,
                                    margin: 0,
                                  }}
                              >
                                {item.amount}
                              </p>
                            </div>
                          </List.Item>
                          <Divider plain style={{margin: 0}}/>
                  </div>
                );
              }}
            />
          )}
        </div>
      </Card>
    </div>
  );
});