PNSPS-frontend-MaterialUI/src/pages/Report/Summary/index.js

// material-ui
import {
    Grid,
    Typography,
    Stack
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import * as DateUtils from "utils/DateUtils";
import { getSearchCriteria } from "auth/utils";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const SummaryForm = Loadable(React.lazy(() => import('./SummaryForm')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const ReportSearchPage = () => {

    const [searchCriteria, setSearchCriteria] = React.useState({});
    const [onReady, setOnReady] = React.useState(false);
    const [issueCombo, setIssueCombo] = React.useState([]);

    React.useEffect(() => {
        getIssueCombo();
        if (Object.keys(getSearchCriteria(window.location.pathname)).length>0){
            setSearchCriteria(getSearchCriteria(window.location.pathname))
        }else{
            localStorage.setItem('searchCriteria',"")
            setSearchCriteria({
                dateTo: DateUtils.dateValue(new Date()),
                dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
            })
        }
    }, []);

    function getIssueCombo() {
        HttpUtils.get({
            url: UrlUtils.GET_ISSUE_COMBO,
            onSuccess: function (responseData) {
                let combo = responseData;
                setIssueCombo(combo);
            }
        });
    }

    React.useEffect(() => {
        setOnReady(true);
    }, [searchCriteria]);


    return (
        !onReady ?
            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <Grid container sx={{ minHeight: '95vh',backgroundColor: 'backgroundColor.default' }} direction="column">
                <Grid item xs={12} mb={2}>
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Summary of Gazette Notice</Typography>
                        </Stack>
                    </div>
                </Grid>
                {/*row 1*/} 
                <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
                    <SummaryForm
                        searchCriteria={searchCriteria}
                        issueComboData={issueCombo}
                    />
                </Grid>
                {/*row 2*/}
                <Grid item xs={12} md={12} lg={12}>
                    <MainCard elevation={0}
                        border={false}
                        content={false}
                        sx={{ backgroundColor: '#fff' }}
                    >
                    </MainCard>
                </Grid>
            </Grid>
    );
}
export default ReportSearchPage;