PNSPS-frontend-MaterialUI/src/pages/ProofCreate_FromApp/ApplicationDetails.js

// material-ui
import {
    CardContent,
    Grid,
    Stack,
    TextField,
    FormLabel,
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import { useFormik } from 'formik';
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const SearchPublicNoticeForm = ({formData}) => {

    const [data, setData] = React.useState({});

    React.useEffect(() => {
        if(formData)
            setData(formData);
    }, [formData]);

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: data,
    });

    const DisplayField = ({ name, width }) => {
        return <TextField
            fullWidth
            disabled
            size="small"
            onChange={formik.handleChange}
            id={name}
            name={name}
            value={formik.values[name]}
            variant="outlined"
            sx={
                {
                    "& .MuiInputBase-input.Mui-disabled": {
                        WebkitTextFillColor: "#000000",
                        background: "#f8f8f8",
                    },
                    width: width ? width : '100%'
                }
            }
        />;
    }


    return (
        <MainCard xs={12} md={12} lg={12}
            border={false}
            content={false}>

            <form>
                {/*row 1*/}
                <CardContent sx={{ px: 2.5, pt: 3 }}>
                    <Grid item justifyContent="space-between" alignItems="center">
                        Application Details
                    </Grid>
                </CardContent>

                {/*row 2*/}
                <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }}>
                    <Grid item xs={12} md={12}>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Application No:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField
                                            name='appNo'
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>

                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Applicant:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField
                                            name={formik.values?.orgId ? 'enCompanyName' : 'contactPerson'}
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={4} lg={4}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Contact Phone:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={8} lg={8}>
                                        <Stack direction="row">
                                            <DisplayField
                                                name='tel_countryCode'
                                                width='25%'
                                            />
                                            <DisplayField
                                                name='phoneNumber'
                                                width='75%'
                                            />
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Contect Person:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <DisplayField
                                            name='contactPerson'
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={4} lg={4}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel>Contact Fax:</FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={8} lg={8}>
                                        <Stack direction="row">
                                            <DisplayField
                                                name='fax_countryCode'
                                                width='25%'
                                            />
                                            <DisplayField
                                                name='faxNumber'
                                                width='75%'
                                            />
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>


            </form>
        </MainCard>
    );
};

export default SearchPublicNoticeForm;