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

// material-ui
import * as React from 'react';
import {
    Button, useMediaQuery,
} from '@mui/material';
import { useNavigate } from "react-router-dom";
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";
// ==============================|| EVENT TABLE ||============================== //

export default function ProofTab({rows}) {
    const intl = useIntl();
    const navigate = useNavigate()
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
    const { locale } = intl;

    const handleEditClick = (params) => () => {
        navigate('/proof/reply/' + params.row.id);
    };

    const columns = [
        {
           
            field: 'actions',
            headerName: intl.formatMessage({id: 'proofId'}),
            width: 200,
            cellClassName: 'actions',
            renderCell: (params) => {
                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
            },
        },
        {
            id: 'actions',
            headerName: intl.formatMessage({id: 'status'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderCell: (params) => {
                return locale === 'en' ? ProofStatus.getStatus_Eng(params) : ProofStatus.getStatus_Cht(params);
            },
        },
        {
            id: 'created',
            field: 'created',
            headerName: intl.formatMessage({id: 'proofDate'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params?.value);
            }
        },
        {
            id: 'replyDate',
            field: 'replyDate',
            headerName: intl.formatMessage({id: 'replyDate'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            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,
            valueGetter: (params) => {
                return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):"";
            }
        },
    ];

    return (
        <div style={{height:'20%', width: '100%'}}>
            <FiDataGrid
                rows={rows}
                columns={columns}
                initialState={{
                    pagination: {
                        paginationModel: {page: 0, pageSize: 5},
                    },
                }}
            />
        </div>
    );
}