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

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

export default function ProofTab({appId, setCount}) {
    const intl = useIntl();
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
    const { locale } = intl;

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

    const columns = [
        {
            field: 'refNo',
            headerName: intl.formatMessage({id: 'proofId'}),
            width: 200,
            cellClassName: 'actions',
            renderHeader: renderHeaderWithAria,
            renderCell: (params) => {
                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
            },
        },
        {
            field: 'status',
            headerName: intl.formatMessage({id: 'status'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            renderCell: (params) => {
                return locale === 'en' ? ProofStatus.getStatus_Eng(params) : ProofStatus.getStatus_Cht(params);
            },
        },
        {
            id: 'reviseDeadline',
            field: 'reviseDeadline',
            headerName: intl.formatMessage({id: 'proofDate'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params?.value);
            }
        },
        {
            id: 'replyDate',
            field: 'replyDate',
            headerName: intl.formatMessage({id: 'replyDate'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            valueGetter: (params) => {
                return params?.value?DateUtils.datetimeStr(params?.value):"";
            }
        },
        {
            id: 'fee',
            field: 'fee',
            headerName: intl.formatMessage({id: 'fee'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            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_PROOF+"/"+appId,
                    params: {},
                    callback: function (responseData) {
                        setCount(responseData?.count);
                    }
                }), [appId])}
            />
        </div>
    );
}