PNSPS-frontend-MaterialUI/src/pages/DemandNote/Details/DnDetailCard.js

// material-ui
import {
    FormControl,
    Button,
    Grid,
    Typography, FormLabel,
} from '@mui/material';

import * as React from "react";
import * as StatusUtils from "utils/statusUtils/DnStatus";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));

import DownloadIcon from '@mui/icons-material/Download';


// ==============================|| DASHBOARD - DEFAULT ||============================== //
const DnDetailCard = ({ data }) => {

    const [dnData, setDnData] = React.useState({});

    React.useEffect(() => {
        if (Object.keys(data).length > 0) {
            setDnData(data)
        }
    }, [data]);

    const onDownloadClick = () => {

    }

    const getDisplayField = (label, value) => {
        return <Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}>
            <Grid container alignItems={"center"}>
                <Grid item xs={12} md={3} lg={3}
                    sx={{ display: 'flex', alignItems: 'center' }}>
                    <FormLabel><Typography variant="h5">{label}:</Typography></FormLabel>
                </Grid>

                <Grid item xs={12} md={9} lg={9}>
                    <Typography variant="h5">
                        {value}
                    </Typography>
                </Grid>
            </Grid>
        </Grid>
    }

    return (

        <MainCard elevation={0}
            border={false}
            content={false}
        >
            <Typography variant="h4" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
                Demand Note
            </Typography>
            <Grid container direction="column">
                <Grid item xs={12} md={12}>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">

                        {getDisplayField("DN No.", dnData.dnNo)}

                        <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={3} lg={3}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Status:</Typography></FormLabel>
                                </Grid>

                                <Grid item xs={12} md={9} lg={9}>
                                    <FormControl variant="outlined">
                                        {StatusUtils.getStatus_Eng(dnData.status)}
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">

                        {getDisplayField("Issue Date", dnData.issueDate)}

                        {getDisplayField("DN Sent", dnData?.sentDate ? dnData.sentDate + " - " + dnData.sentBy : "")}

                    </Grid>
                    <Grid container direction="row" justifyContent="space-between" alignItems="center">
                        <Grid item xs={12} md={6} lg={6} mt={1}>
                            <Grid container direction="row" justifyContent="flex-start">
                                <Grid item xs={12} md={3} lg={3}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">File:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}>
                                    <Typography variant="h5">{dnData.filename} </Typography>
                                </Grid>
                                <Grid item md={4} lg={4}>
                                    <Button
                                        size="small"
                                        variant="contained"
                                        onClick={onDownloadClick()}
                                        sx={{
                                            textTransform: 'capitalize',
                                            alignItems: 'end',
                                        }}>
                                        <DownloadIcon />
                                    </Button>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </MainCard>
    );
};

export default DnDetailCard;