PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_Public/tabTableDetail/PaymentTab.js

// material-ui
import {useMemo} from 'react';
import {
     useMediaQuery
} from '@mui/material';
import {FiDataGrid} from "components/FiDataGrid";
import * as FormatUtils from "utils/FormatUtils"
import * as DateUtils from "utils/DateUtils"
import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
import {useTheme} from "@emotion/react";
import {useIntl} from "react-intl";
import { clickableLink } from 'utils/CommonFunction';
import {GET_PUBLIC_NOTICE_APPLY_DETAIL_PAYMENT } from "utils/ApiPathConst"
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({ appId, setCount }) {

    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
    const intl = useIntl();
    
  const { locale } = intl;

    const renderHeaderWithAria = (params) => (
        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
    );

    const columns = [
        {
            field: 'actions',
            headerName: intl.formatMessage({id: 'payId'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            cellClassName: 'actions',
            renderHeader: renderHeaderWithAria,
            renderCell: (params) => {
                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
            },
        },
        {
            id: 'transDateTime',
            field: 'transDateTime',
            headerName: intl.formatMessage({id: 'payDate'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params.value);
            }
        },
        {
            id: 'status',
            field: 'status',
            headerName: intl.formatMessage({id: 'payStatus'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            renderCell: (params) => {
                return locale === 'en' ? PaymentStatus.getStatus_Eng(params):PaymentStatus.getStatus_Cht(params);
            }
        },
        {
            id: 'payAmount',
            field: 'payAmount',
            headerName: intl.formatMessage({id: 'fee'}),
            width: 150,
            renderHeader: renderHeaderWithAria,
            valueGetter: (params) => {
                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
            }
        },
    ];

    return (
        <>
            <div style={{ height:'20%', width: '100%' }}>
                <FiDataGrid
                    columns={columns}
                    customPageSize={10}
                    doLoad={useMemo(() => ({
                        url: GET_PUBLIC_NOTICE_APPLY_DETAIL_PAYMENT+"/"+appId,
                        params: {},
                        callback: function (responseData) {
                            setCount(responseData?.count);
                        }
                    }), [appId])}
                />
            </div>
        </>
    );



}