Merge branch 'Timebox-9'

src/assets/style/navbarStyles.css

@@ -53,6 +53,7 @@
   left: 0;
   display: none;
   padding-left: 0px;
+  padding-bottom: 7px;
   /* border: 1px solid #0C489E; */
   background-clip: padding-box;
   border: 1px solid rgba(0,0,0,.15);

src/components/AutoLogoutProvider.js

@@ -56,10 +56,10 @@ const AutoLogoutProvider = ({ children }) => {
             //TODO: get auto logout time here
             if(isGLDLoggedIn()){
                 setLogoutInterval(240);
-                console.log("Set Logout Interval: 240")
+                // console.log("Set Logout Interval: 240")
             }else{
                 setLogoutInterval(60);
-                console.log("Set Logout Interval: 60")
+                // console.log("Set Logout Interval: 60")
             }
             // axios.get(`${apiPath}${GET_IDLE_LOGOUT_TIME}`,
             // )

src/index.js

@@ -16,9 +16,9 @@ import 'assets/third-party/apex-chart.css';
 import App from './App';
 import { store } from 'store';
 import reportWebVitals from './reportWebVitals';
-import {I18nProvider} from "./components/I18nProvider";
-import {AutoLogoutProvider} from "./components/AutoLogoutProvider";
-import {RefreshTokenProvider} from "./components/RefreshTokenProvider";
+import {I18nProvider} from "components/I18nProvider";
+import {AutoLogoutProvider} from "components/AutoLogoutProvider";
+import {RefreshTokenProvider} from "components/RefreshTokenProvider";
 
 // ==============================|| MAIN - REACT DOM RENDER  ||============================== //
 

src/layout/MainLayout/Header/index.js

@@ -141,11 +141,23 @@ function Header(props) {
               <Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>My Profile</Typography></Link>
             </li>
             <li>
-              <Link className="emailTemplate" to='/emailTemplate'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Email Template</Typography></Link>
+              <Link className="emailTemplate" to='/setting/emailTemplate'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Email Template</Typography></Link>
             </li>
             <li>
               <Link className="systemSetting" to='/setting/sys'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>System Setting</Typography></Link>
             </li>
+            <li>
+              <Link className="holidaySetting" to='/setting/holiday'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Holiday Setting</Typography></Link>
+            </li>
+            <li>
+              <Link className="holidaySetting" to='/setting/drImport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>DR Import</Typography></Link>
+            </li>
+            <li>
+              <Link className="announcement" to='/setting/announcement'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Announcement</Typography></Link>
+            </li>
+            <li>
+              <Link className="gazetteissueSetting" to='/setting/gazetteissuepage'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Gazette Issue</Typography></Link>
+            </li>
           </ul>
         </li>
         <Box sx={{display: {xs: 'none', sm: 'none', md: 'block'}}}>
@@ -355,7 +367,7 @@ function Header(props) {
                 alignItems="center"
                 spacing={0}
               >
-                <Box sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                <Box mt={0.5} sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
                   <AdminLogo />
                 </Box>
                 <IconButton

src/pages/Announcement/Details/AnnouncementForm.js

@@ -0,0 +1,336 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Button,
+    TextField,
+    Stack, Box
+} from '@mui/material';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import ForwardIcon from '@mui/icons-material/Forward';
+import Divider from '@mui/material/Divider';
+import {useParams} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { notifyActionSuccess } from 'utils/CommonFunction';
+import { useIntl } from "react-intl";
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const AnnouncementForm = ({ loadedData }) => {
+    const intl = useIntl();
+    const params = useParams();
+    const navigate = useNavigate();
+
+    const BackgroundHead = {
+        backgroundImage: `url(${titleBackgroundImg})`,
+        width: 'auto',
+        height: 'auto',
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundColor: '#0C489E',
+        backgroundPosition: 'right'
+    }
+
+
+    const formik = useFormik({
+        enableReinitialize: true,
+        initialValues: loadedData,
+        validationSchema: yup.object().shape({
+            subjectEng: yup.string().max(255).required(),
+            subjectCht: yup.string().max(255).required(),
+            subjectChs: yup.string().max(255).required(),
+            contentEng: yup.string().required(),
+            contentCht: yup.string().required(),
+            contentChs: yup.string().required(),
+        }),
+        onSubmit: values => {
+            doSave(values);
+        }
+    });
+
+    const doSave = (values) => {
+        HttpUtils.post({
+            url: UrlUtils.POST_ANNOUNCE_SAVE,
+            params: {
+                id: params?.id??0,
+                announceDate: values.announceDate,
+                subjectEng: values.subjectEng,
+                subjectCht: values.subjectCht,
+                subjectChs: values.subjectChs,
+
+                contentEng: values.contentEng,
+                contentCht: values.contentCht,
+                contentChs: values.contentChs,
+            },
+            onSuccess: function () {
+                notifyActionSuccess(intl.formatMessage({ id: 'submissionSuccess' }) + '!')
+                navigate("/setting/announcement");
+            }
+        });
+    }
+
+    return (
+        <Grid container sx={{ minHeight: '95vh', backgroundColor: '#ffffff', mb: 3 }} direction="column" alignItems="center">
+            <Grid item xs={12} md={12} width="100%" >
+                <div style={BackgroundHead}>
+                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                            Announcement
+                        </Typography>
+                    </Stack>
+                </div>
+            </Grid>
+            <Grid item xs={12} width={{ xs: "90%", sm: "90%", md: "60%", lg: "60%" }}>
+                <Button
+                    aria-label={intl.formatMessage({ id: 'back' })}
+                    title={intl.formatMessage({ id: 'back' })}
+                    sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
+                >
+                    <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
+                </Button>
+            </Grid>
+
+            <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
+                <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
+                    <form onSubmit={formik.handleSubmit}>
+                        <Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center">
+
+                            <Grid item xs={12} md={12}>
+                                <Button
+                                    size="large"
+                                    variant="contained"
+                                    color="success"
+                                    type="submit"
+                                    sx={{
+                                        textTransform: 'capitalize',
+                                        alignItems: 'end'
+                                    }}>
+                                    <Typography variant="h5">Save</Typography>
+                                </Button>
+                            </Grid>
+
+                            <Grid item xs={12} md={12}>
+                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
+                                    <Grid item xs={12} sm={12} md={2} lg={2}
+                                        sx={{ display: 'flex', alignItems: 'center' }}>
+                                        <Typography variant="h5">Announce Date:</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sm={12} md={9} lg={9}>
+                                        <TextField
+                                            fullWidth
+                                            size="small"
+                                            type="datetime-local"
+                                            onChange={formik.handleChange}
+                                            name="announceDate"
+                                            value={formik.values["announceDate"]}
+                                            variant="outlined"
+                                            sx={
+                                                {
+                                                    "& .MuiInputBase-input.Mui-disabled": {
+                                                        WebkitTextFillColor: "#000000",
+                                                        background: "#f8f8f8",
+                                                    },
+                                                    width: '40%'
+                                                }
+                                            }
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid>
+                            <Grid item xs={12} md={12}><Typography variant="h5">English</Typography></Grid>
+                            <Grid item xs={12} md={12} >
+                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
+                                    <Grid item xs={12} sm={12} md={2} lg={2}
+                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
+                                        <Typography variant="h5">Subject:</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sm={12} md={9} lg={9}>
+                                        <TextField
+                                            fullWidth
+                                            size="small"
+                                            type="text"
+                                            onChange={formik.handleChange}
+                                            name="subjectEng"
+                                            value={formik.values["subjectEng"]}
+                                            variant="outlined"
+                                            error={Boolean(formik.errors["subjectEng"])}
+                                            helperText={formik.errors["subjectEng"] ? formik.errors["subjectEng"] : ''}
+                                            sx={
+                                                {
+                                                    "& .MuiInputBase-input.Mui-disabled": {
+                                                        WebkitTextFillColor: "#000000",
+                                                        background: "#f8f8f8",
+                                                    },
+                                                }
+                                            }
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            <Grid item xs={12} md={12}>
+                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
+                                    <Grid item xs={12} sm={12} md={2} lg={2}
+                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
+                                        <Typography variant="h5">Content:</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sm={12} md={9} lg={9}>
+                                        <TextField
+                                            multiline
+                                            fullWidth
+                                            rows={6}
+                                            onChange={formik.handleChange}
+                                            name="contentEng"
+                                            value={formik.values["contentEng"]}
+                                            error={Boolean(formik.errors["contentEng"])}
+                                            helperText={formik.errors["contentEng"] ? formik.errors["contentEng"] : ''}
+                                            variant="outlined"
+                                            InputProps={
+                                                {
+                                                    style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
+                                                }
+                                            }
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid>
+                            <Grid item xs={12} md={12}><Typography variant="h5">Traditional Chinese</Typography></Grid>
+                            <Grid item xs={12} md={12}>
+                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
+                                    <Grid item xs={12} sm={12} md={2} lg={2}
+                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
+                                        <Typography variant="h5">Subject:</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sm={12} md={9} lg={9}>
+                                        <TextField
+                                            fullWidth
+                                            size="small"
+                                            type="text"
+                                            onChange={formik.handleChange}
+                                            name="subjectCht"
+                                            value={formik.values["subjectCht"]}
+                                            error={Boolean(formik.errors["subjectCht"])}
+                                            helperText={formik.errors["subjectCht"] ? formik.errors["subjectCht"] : ''}
+                                            variant="outlined"
+                                            sx={
+                                                {
+                                                    "& .MuiInputBase-input.Mui-disabled": {
+                                                        WebkitTextFillColor: "#000000",
+                                                        background: "#f8f8f8",
+                                                    },
+                                                }
+                                            }
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                            <Grid item xs={12} md={12}>
+                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
+                                    <Grid item xs={12} sm={12} md={2} lg={2}
+                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
+                                        <Typography variant="h5">Content:</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sm={12} md={9} lg={9}>
+                                        <TextField
+                                            multiline
+                                            fullWidth
+                                            rows={6}
+                                            onChange={formik.handleChange}
+                                            name="contentCht"
+                                            value={formik.values["contentCht"]}
+                                            error={Boolean(formik.errors["contentCht"])}
+                                            helperText={formik.errors["contentCht"] ? formik.errors["contentCht"] : ''}
+                                            variant="outlined"
+                                            InputProps={
+                                                {
+                                                    style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
+                                                }
+                                            }
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+
+
+                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid>
+                            <Grid item xs={12} md={12}><Typography variant="h5">Simplified Chinese</Typography></Grid>
+                            <Grid item xs={12} md={12}>
+                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
+                                    <Grid item xs={12} sm={12} md={2} lg={2}
+                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
+                                        <Typography variant="h5">Subject:</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sm={12} md={9} lg={9}>
+                                        <TextField
+                                            fullWidth
+                                            size="small"
+                                            type="text"
+                                            onChange={formik.handleChange}
+                                            name="subjectChs"
+                                            value={formik.values["subjectChs"]}
+                                            error={Boolean(formik.errors["subjectChs"])}
+                                            helperText={formik.errors["subjectChs"] ? formik.errors["subjectChs"] : ''}
+                                            variant="outlined"
+                                            sx={
+                                                {
+                                                    "& .MuiInputBase-input.Mui-disabled": {
+                                                        WebkitTextFillColor: "#000000",
+                                                        background: "#f8f8f8",
+                                                    },
+                                                }
+                                            }
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+
+                            <Grid item xs={12} md={12}>
+                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
+                                    <Grid item xs={12} sm={12} md={2} lg={2}
+                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
+                                        <Typography variant="h5">Content:</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} sm={12} md={9} lg={9}>
+                                        <TextField
+                                            multiline
+                                            fullWidth
+                                            rows={6}
+                                            onChange={formik.handleChange}
+                                            name="contentChs"
+                                            value={formik.values["contentChs"]}
+                                            error={Boolean(formik.errors["contentChs"])}
+                                            helperText={formik.errors["contentChs"] ? formik.errors["contentChs"] : ''}
+                                            variant="outlined"
+                                            InputProps={
+                                                {
+                                                    style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
+                                                }
+                                            }
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+
+                        </Grid>
+                    </form>
+                </Box>
+            </Grid>
+
+        </Grid>
+    );
+};
+
+
+export default AnnouncementForm;

src/pages/Announcement/Details/index.js

@@ -0,0 +1,64 @@
+// material-ui
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as DateUtils from "utils/DateUtils";
+
+import {
+    Grid,
+} from '@mui/material';
+
+import { useParams } from 'react-router-dom';
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+const AnnouncementForm = Loadable(lazy(() => import('./AnnouncementForm')));
+
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const CreateForm = () => {
+    const params = useParams();
+
+    const [formData, setFormData] = React.useState({});
+    const [isLoading, setLoding] = React.useState(true);
+
+    React.useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = () => {
+        setLoding(true);
+        if (params.id > 0) {
+            HttpUtils.get({
+                url: `${UrlUtils.GET_ANNOUNCE}`+"/"+params.id,
+                onSuccess: function (responseData) {
+                    responseData["announceDate"] = DateUtils.datetimeFieldFormat(responseData.announceDate);
+                    setFormData(responseData);
+                }
+            });
+        }else{
+            setFormData({"announceDate": DateUtils.datetimeFieldFormat(new Date())});   
+        }
+    };
+
+    React.useEffect(() => {
+        if (formData !== null && formData != {}) setLoding(false);
+    }, [formData]);
+
+    return (
+        isLoading ?
+            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
+            :
+            <AnnouncementForm
+                loadedData={formData}
+            />
+    );
+};
+
+
+export default CreateForm;

src/pages/Announcement/Search/DataGrid.js

@@ -0,0 +1,83 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button,
+    Box
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import { useNavigate } from "react-router-dom";
+import { FiDataGrid } from "components/FiDataGrid";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const navigate = useNavigate()
+
+    React.useEffect(() => {
+        setRows(recordList);   
+    }, [recordList]);
+
+    const handleEditClick = (params) => () => {
+        navigate('/setting/announcement/details/' + params.id);
+    };
+
+
+    const columns = [
+        {
+            field: 'announceDate',
+            headerName: 'Announce Date',
+            width: 250,
+            cellClassName: 'announceDate',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{DateUtils.datetimeStr(params?.value)}</u></Button>;
+            },
+        },
+        {
+            id: 'subjec',
+            field: 'subjec',
+            headerName: 'Subjec',
+            minWidth: 400,
+            renderCell: (params) => {
+                return <>
+                    <Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>
+                        <Box component="div" sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.subjectEng}</Box>
+                        <Box component="div" sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.subjectCht}</Box>
+                        <Box component="div" sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.subjectChs}</Box>
+                    </Box>
+                </>
+            },
+        },
+        {
+            id: 'content',
+            field: 'content',
+            headerName: 'Content',
+            flex:1,
+            minWidth: 400,
+            renderCell: (params) => {
+                return <>
+                    <Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>
+                        <Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.contentEng}</Box>
+                        <Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.contentCht}</Box>
+                        <Box sx={{ textOverflow: 'ellipsis', overflow: 'hidden', 'white-space': 'nowrap', }}>{params.row.contentChs}</Box>
+                    </Box >
+                </>
+            }
+        },
+    ];
+
+    function handleRowDoubleClick(params) {
+        navigate('/setting/announcement/details/' + params.id);
+    }
+
+    return (
+        <div style={{ width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                customPageSize={10}
+                getRowHeight={() => 'auto'}
+                onRowDoubleClick={handleRowDoubleClick}
+            />
+        </div>
+    );
+}

src/pages/Announcement/Search/SearchForm.js

@@ -0,0 +1,155 @@
+// material-ui
+import {
+    Button,
+    Grid, TextField,
+    Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+import * as DateUtils from "utils/DateUtils";
+import {ThemeProvider} from "@emotion/react";
+import { useNavigate } from "react-router-dom";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
+    const navigate = useNavigate()
+
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
+    const marginBottom = 2.5;
+    const { reset, register, handleSubmit } = useForm()
+    const onSubmit = (data) => {
+        const temp = {
+            key: data.key,
+            dateFrom: data.dateFrom,
+            dateTo: data.dateTo,
+        };
+        applySearch(temp);
+    };
+
+
+    function resetForm() {
+        reset();
+    }
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            sx={{ backgroundColor: '#fff' }}
+        >
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
+                        <Typography variant="pnspsFormHeader" >
+                            Search
+                        </Typography>
+                    </Grid>
+                    {/*row 2*/}
+                    <Grid container display="flex" alignItems={"center"}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
+                            <TextField
+                                fullWidth
+                                {...register("key")}
+                                id='key'
+                                label={"Key"}
+                                defaultValue={searchCriteria.key}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}>
+                            <Grid container>
+                                <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                    <TextField
+                                        fullWidth
+                                        {...register("dateFrom")}
+                                        id="dateFrom"
+                                        type="date"
+                                        label={"Submit Date(From)"}
+                                        defaultValue={searchCriteria.dateFrom}
+                                        InputProps={{ inputProps: { max: maxDate } }}
+                                        onChange={(newValue) => {
+                                            setMinDate(DateUtils.dateStr(newValue));
+                                        }}
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                </Grid>
+
+                                <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:0.8, display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
+                                    To
+                                </Grid>
+
+                                <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                    <TextField
+                                        fullWidth
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                        {...register("dateTo")}
+                                        InputProps={{ inputProps: { min: minDate } }}
+                                        onChange={(newValue) => {
+                                            setMaxDate(DateUtils.dateStr(newValue));
+                                        }}
+                                        id="dateTo"
+                                        type="date"
+                                        //label={"Submit Date(To)"}
+                                        defaultValue={searchCriteria.dateTo}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                 
+                    </Grid>
+
+                    {/*last row*/}
+                    <Grid container maxWidth justifyContent="flex-end">
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3 }}>
+                            <Button
+                                variant="contained"
+                                color="green"
+                                onClick={()=>{
+                                    navigate('/setting/announcement/details/' + 0);
+                                }}
+                            >
+                                Create
+                            </Button>
+                        </Grid>
+                        <Grid item sx={{ ml: 3 }}>
+                            <Button
+                                variant="contained"
+                                onClick={resetForm}
+                            >
+                                Clear
+                            </Button>
+                        </Grid>
+
+                        <Grid item sx={{ ml: 3 }}>
+                            <Button
+                                variant="contained"
+                                type="submit"
+                            >
+                                Submit
+                            </Button>
+                        </Grid>
+                        </ThemeProvider>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchPublicNoticeForm;

src/pages/Announcement/Search/index.js

@@ -0,0 +1,104 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
+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 UserSearchPage_Individual = () => {
+
+    const [record, setRecord] = React.useState([]);
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        dateTo: DateUtils.dateStr(new Date()),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 90)),
+    });
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        getDataList();
+    }, []);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+    React.useEffect(() => {
+        getDataList();
+    }, [searchCriteria]);
+
+    function getDataList() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ANNOUNCE_LIST,
+            params: searchCriteria,
+            onSuccess: function (responseData) {
+                setRecord(responseData);
+            }
+        });
+    }
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    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}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">Announcement</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
+                    <SearchForm
+                        applySearch={applySearch}
+                        searchCriteria={searchCriteria}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                        sx={{ backgroundColor: '#fff' }}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+}
+export default UserSearchPage_Individual;

src/pages/Announcement/Search_Public/DataGrid.js

@@ -0,0 +1,62 @@
+// material-ui
+import * as React from 'react';
+import * as DateUtils from "utils/DateUtils";
+import { FiDataGrid } from "components/FiDataGrid";
+import { FormattedMessage, useIntl } from "react-intl";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const intl = useIntl();
+    const { locale } = intl;
+
+    React.useEffect(() => {
+        setRows(recordList);   
+    }, [recordList]);
+
+    const columns = [
+        {
+            field: 'announceDate',
+            headerName: <FormattedMessage id="date"></FormattedMessage>,
+            width: 250,
+            cellClassName: 'announceDate',
+            renderCell: (params) => {
+                return DateUtils.dateStr(params?.value);
+            },
+        },
+        {
+            id: 'subject',
+            field: 'subject',
+            headerName: <FormattedMessage id="subject"></FormattedMessage>,
+            minWidth: 400,
+            renderCell: (params) => {
+                return <>
+                {locale === 'en' ?params.row.subjectEng:locale === 'zh-HK' ?params.row.subjectCht:params.row.subjectChs}
+                </>
+            },
+        },
+        {
+            id: 'content',
+            field: 'content',
+            headerName: <FormattedMessage id="content"></FormattedMessage>,
+            flex:1,
+            minWidth: 400,
+            renderCell: (params) => {
+                return <>
+                {locale === 'en' ?params.row.contentEng:locale === 'zh-HK' ?params.row.contentCht:params.row.contentChs}
+                </>
+            }
+        },
+    ];
+
+    return (
+        <div style={{ width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                customPageSize={10}
+                getRowHeight={() => 'auto'}
+            />
+        </div>
+    );
+}

src/pages/Announcement/Search_Public/SearchForm.js

@@ -0,0 +1,158 @@
+// material-ui
+import {
+    Button,
+    Grid, TextField,
+    Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+import * as DateUtils from "utils/DateUtils";
+import { ThemeProvider } from "@emotion/react";
+import { useNavigate } from "react-router-dom";
+import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
+import { FormattedMessage, useIntl } from "react-intl";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
+    const navigate = useNavigate()
+
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
+    const intl = useIntl();
+
+    const marginBottom = 2.5;
+    const { reset, register, handleSubmit } = useForm()
+    const onSubmit = (data) => {
+        const temp = {
+            key: data.key,
+            dateFrom: data.dateFrom,
+            dateTo: data.dateTo,
+        };
+        applySearch(temp);
+    };
+
+
+    function resetForm() {
+        reset();
+    }
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            sx={{ backgroundColor: '#fff' }}
+        >
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom }} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{ mt: 1, ml: 3, mb: marginBottom }}>
+                        <Typography variant="pnspsFormHeader" >
+                            <FormattedMessage id="search"></FormattedMessage>
+                        </Typography>
+                    </Grid>
+                    {/*row 2*/}
+                    <Grid container display="flex" alignItems={"center"}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
+                            <TextField
+                                fullWidth
+                                {...register("key")}
+                                id='key'
+                                label={intl.formatMessage({ id: 'keyword' }) + ":"}
+                                defaultValue={searchCriteria.key}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
+                            <Grid container>
+                                <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                    <TextField
+                                        fullWidth
+                                        {...register("dateFrom")}
+                                        id="dateFrom"
+                                        type="date"
+                                        label={intl.formatMessage({ id: 'dateFrom' }) + ":"}
+                                        defaultValue={searchCriteria.dateFrom}
+                                        InputProps={{ inputProps: { max: maxDate } }}
+                                        onChange={(newValue) => {
+                                            setMinDate(DateUtils.dateStr(newValue));
+                                        }}
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                </Grid>
+
+                                <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{ mt: 0.8, display: 'flex', justifyContent: "center", alignItems: 'flex-start' }}>
+                                    <FormattedMessage id="to"></FormattedMessage>
+                                </Grid>
+
+                                <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
+                                    <TextField
+                                        fullWidth
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                        {...register("dateTo")}
+                                        InputProps={{ inputProps: { min: minDate } }}
+                                        onChange={(newValue) => {
+                                            setMaxDate(DateUtils.dateStr(newValue));
+                                        }}
+                                        id="dateTo"
+                                        type="date"
+                                        //label={"Submit Date(To)"}
+                                        defaultValue={searchCriteria.dateTo}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                    </Grid>
+
+                    {/*last row*/}
+                    <Grid container maxWidth justifyContent="flex-end">
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                            <Grid item sx={{ ml: 3 }}>
+                                <Button
+                                    variant="contained"
+                                    color="green"
+                                    onClick={() => {
+                                        navigate('/setting/announcement/details/' + 0);
+                                    }}
+                                >
+                                    <FormattedMessage id="create"></FormattedMessage>
+                                </Button>
+                            </Grid>
+                            <Grid item sx={{ ml: 3 }}>
+                                <Button
+                                    variant="contained"
+                                    onClick={resetForm}
+                                >
+                                    <FormattedMessage id="reset"></FormattedMessage>
+                                </Button>
+                            </Grid>
+
+                            <Grid item sx={{ ml: 3 }}>
+                                <Button
+                                    variant="contained"
+                                    type="submit"
+                                >
+                                    <FormattedMessage id="submit"></FormattedMessage>
+                                </Button>
+                            </Grid>
+                        </ThemeProvider>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchPublicNoticeForm;

src/pages/Announcement/Search_Public/index.js

@@ -0,0 +1,104 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import { FormattedMessage } from "react-intl";
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const UserSearchPage_Individual = () => {
+    const [record, setRecord] = React.useState([]);
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        dateTo: DateUtils.dateStr(new Date()),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 90)),
+    });
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        getDataList();
+    }, []);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+    React.useEffect(() => {
+        getDataList();
+    }, [searchCriteria]);
+
+    function getDataList() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ANNOUNCE_LIST,
+            params: searchCriteria,
+            onSuccess: function (responseData) {
+                setRecord(responseData);
+            }
+        });
+    }
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    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}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4"><FormattedMessage id="announcement" /></Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
+                    <SearchForm
+                        applySearch={applySearch}
+                        searchCriteria={searchCriteria}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                        sx={{ backgroundColor: '#fff' }}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+}
+export default UserSearchPage_Individual;

src/pages/DemandNote/Create/SearchForm.js

@@ -56,7 +56,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
 
     function getIssueLabel(data) {
         if (data == {}) return "";
-        return data.year
+        return data.issueYear
             + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
             + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");

src/pages/DemandNote/Create/index.js

@@ -80,7 +80,7 @@ const Index = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container sx={{backgroundColor: 'backgroundColor.default'}} direction="column">
+            <Grid container sx={{minHeight: '87vh', backgroundColor: 'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/DemandNote/Search/DataGrid.js

@@ -220,9 +220,9 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
         {
             field: 'dnNo',
             headerName: 'DN No.',
-            width: 200,
+            width: 220,
             renderCell: (params) => {
-                return <Button onClick={handleDnClick(params)}><u>{params.row.dnNo}</u></Button>;
+                return <Button sx={{fontSize: '8px'}} onClick={handleDnClick(params)}><u>{params.row.dnNo}</u></Button>;
             },
         },
         {

src/pages/DemandNote/Search/SearchForm.js

@@ -75,7 +75,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
     function getIssueLabel(data) {
         if (data == {}) return "";
-        return data.year
+        return data.issueYear
             + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
             + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");

src/pages/DemandNote/Search/index.js

@@ -92,13 +92,13 @@ const UserSearchPage_Individual = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh', backgroundColor: 'backgroundColor.default' }} direction="column">
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -64,7 +64,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
 
     function getIssueLabel(data) {
         if (data == {}) return "";
-        return data.year
+        return data.issueYear
             + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
             + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");

src/pages/DemandNote/Search_Public/index.js

@@ -92,7 +92,7 @@ const UserSearchPage_Individual = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/EmailTemplate/Detail_GLD/index.js

@@ -117,7 +117,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/EmailTemplate/Search_GLD/index.js

@@ -55,7 +55,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/GFMIS/index.js

@@ -123,7 +123,7 @@ const Index = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container sx={{minHeight: '95vh', backgroundColor: 'backgroundColor.default'}} direction="column">
+            <Grid container sx={{minHeight: '87vh', backgroundColor: 'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/GazetteIssue/DataGrid.js

@@ -0,0 +1,93 @@
+// material-ui
+import * as React from 'react';
+// import { GridActionsCellItem, } from "@mui/x-data-grid";
+import { FiDataGrid } from "components/FiDataGrid";
+// import EditIcon from '@mui/icons-material/Edit';
+import { useEffect } from "react";
+import { dateStr } from "utils/DateUtils";
+// import { useNavigate } from "react-router-dom";
+
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function GazetteIssueTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+
+    // const navigate = useNavigate()
+
+    useEffect(() => {
+        // console.log(recordList)
+        setRows(recordList);
+    }, [recordList]);
+
+    const columns = [
+        {
+            id: 'issueYear',
+            field: 'issueYear',
+            headerName: 'Year',
+            flex: 1,
+            renderCell: (params) => {
+                return <div style={{ margin: 4 }}>{params.row.issueYear}</div>
+            },
+        },
+        {
+            id: 'volume',
+            field: 'volume',
+            headerName: 'Volume',
+            flex: 1,
+            renderCell: (params) => {
+                return <div style={{ margin: 4 }}>{params.row.volume}</div>
+            },
+        },
+        {
+            id: 'issueNo',
+            field: 'issueNo',
+            headerName: 'Issue No',
+            flex: 1,
+            renderCell: (params) => {
+                return <div style={{ margin: 4 }}>{params.row.issueNo}</div>
+            },
+        },
+        {
+            id: 'issueDate',
+            field: 'issueDate',
+            headerName: 'Issue Date',
+            flex: 2,
+            renderCell: (params) => {
+                let issueDate = params.row.issueDate;
+                return <div style={{ margin: 4 }}>{dateStr(issueDate)}</div>
+            },
+        },
+        {
+            id: 'closingDate',
+            field: 'closingDate',
+            headerName: 'Closing Date',
+            flex: 2,
+            renderCell: (params) => {
+                let closingDate = params.row.closingDate;
+                return <div style={{ margin: 4 }}>{dateStr(closingDate)}</div>
+            },
+        },
+        {
+            id: 'issueDesc',
+            field: 'issueDesc',
+            headerName: 'Description',
+            flex: 2,
+        },
+    ];
+
+    // function handleRowDoubleClick(params) {
+    //     navigate('/emailTemplate/' + params.id);
+    // }
+
+    return (
+        <div style={{ height: "fit-content", width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                customPageSize={20}
+                // onRowDoubleClick={handleRowDoubleClick}
+                getRowHeight={() => 'auto'}
+            />
+        </div>
+    );
+}

src/pages/GazetteIssue/ExportForm.js

@@ -0,0 +1,133 @@
+// material-ui
+import {
+    Button,
+    Grid, 
+    TextField,
+    Autocomplete,
+    Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+// import * as DateUtils from "utils/DateUtils";
+import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
+// import * as ComboData from "utils/ComboData";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchGazetteIssueForm = ({ applyExport, comboData, waitDownload}) => {
+    const [selectedYear, setSelectedYear] = React.useState([]);
+    // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
+    const [comboList, setComboList] = React.useState([]);
+    // const [onReady, setOnReady] = React.useState(false);
+
+    const { 
+        // register, 
+        handleSubmit } = useForm()
+
+    const onSubmit = () => {
+        console.log(selectedYear)
+        if (selectedYear !=null && Object.keys(selectedYear).length>0){
+            console.log("okkkkkkkkkkkkkkkk")
+            const temp = {
+                year: selectedYear.label,
+            };
+            applyExport(temp);
+        }
+    };
+
+    React.useEffect(() => {
+        if (comboData && comboData.length > 0) {
+            // console.log(comboData)
+            // const labelValue = comboData.find(obj => obj.label === searchCriteria.year);
+            // console.log(labelValue)
+            // if(selectedYear.length == 0){
+            //     setSelectedYear(comboData[0])
+            // }
+            setComboList(comboData)
+            // setSelectedYear(searchCriteria.dateFrom)
+        }
+    }, [comboData]);
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            >
+
+            <form onSubmit={handleSubmit(onSubmit)} >
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:1}}>
+                        <Typography variant="h5" >
+                            Export Preliminary Gazette Issue From Holiday Year
+                        </Typography>
+                    </Grid>
+                    {/*row 2*/}
+
+                    <Grid container display="flex" alignItems={"center"}>
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                       <Autocomplete
+                            disablePortal
+                            id="year-combo"
+                            value={selectedYear}
+                            // defaultValue={selectedYear}
+                            options={comboList}
+                            // disabled={checkCountry}
+                            getOptionLabel={(option) => option.label ? option.label : ""}
+                            onChange={(event, newValue) => {
+                                setSelectedYear(newValue);
+                            }}
+                            sx={{
+                                "& .MuiInputBase-root": { height: "41px" },
+                                "#year-combo": { padding: "0px 0px 0px 0px" },
+                                "& .MuiAutocomplete-endAdornment": { top: "auto" },
+                            }}
+                            renderInput={(params) => <TextField {...params} placeholder={""}/>}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        {/* <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            InputProps={{ inputProps: { min: minDate } }}
+                            onChange={(newValue) => {
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
+                            id="dateTo"
+                            type="date"
+                            label="To"
+                            defaultValue={searchCriteria.dateTo}
+                        /> */}
+                    </Grid>
+
+                    {/* <Grid item xs={9} s={6} md={4} lg={3}>
+                    </Grid> */}
+                </Grid>
+                <Grid container justifyContent="center" direction="row"  alignItems="center" spacing={3}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb: 3, }} >
+                            <Button
+                                variant="contained"
+                                type="submit"
+                                size="large"
+                                disabled={waitDownload}
+                            >
+                                Export
+                            </Button>
+                        </Grid>
+                    </ThemeProvider>
+                </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchGazetteIssueForm;

src/pages/GazetteIssue/SearchForm.js

@@ -0,0 +1,129 @@
+// material-ui
+import {
+    Button,
+    Grid, 
+    TextField,
+    Autocomplete,
+    Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+// import * as DateUtils from "utils/DateUtils";
+import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
+// import * as ComboData from "utils/ComboData";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchGazetteIssueForm = ({ applySearch, comboData}) => {
+    const [selectedYear, setSelectedYear] = React.useState([]);
+    // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
+    const [comboList, setComboList] = React.useState([]);
+    // const [onReady, setOnReady] = React.useState(false);
+
+    const { 
+        // register, 
+        handleSubmit } = useForm()
+
+    const onSubmit = () => {
+        if (selectedYear !=null){
+            const temp = {
+                year: selectedYear.label,
+            };
+            applySearch(temp);
+        }
+    };
+
+    React.useEffect(() => {
+        if (comboData && comboData.length > 0) {
+            // console.log(comboData)
+            // const labelValue = comboData.find(obj => obj.label === searchCriteria.year);
+            // console.log(labelValue)
+            if(selectedYear.length == 0){
+                setSelectedYear(comboData[0])
+            }
+            setComboList(comboData)
+            // setSelectedYear(searchCriteria.dateFrom)
+        }
+    }, [comboData]);
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            >
+
+            <form onSubmit={handleSubmit(onSubmit)} >
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:1}}>
+                        <Typography variant="h5" >
+                            Search
+                        </Typography>
+                    </Grid>
+                    {/*row 2*/}
+
+                    <Grid container display="flex" alignItems={"center"}>
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                       <Autocomplete
+                            disablePortal
+                            id="year-combo"
+                            value={selectedYear}
+                            // defaultValue={selectedYear}
+                            options={comboList}
+                            // disabled={checkCountry}
+                            getOptionLabel={(option) => option.label ? option.label : ""}
+                            onChange={(event, newValue) => {
+                                setSelectedYear(newValue);
+                            }}
+                            sx={{
+                                "& .MuiInputBase-root": { height: "41px" },
+                                "#year-combo": { padding: "0px 0px 0px 0px" },
+                                "& .MuiAutocomplete-endAdornment": { top: "auto" },
+                            }}
+                            renderInput={(params) => <TextField {...params} placeholder={""}/>}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        {/* <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            InputProps={{ inputProps: { min: minDate } }}
+                            onChange={(newValue) => {
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
+                            id="dateTo"
+                            type="date"
+                            label="To"
+                            defaultValue={searchCriteria.dateTo}
+                        /> */}
+                    </Grid>
+
+                    {/* <Grid item xs={9} s={6} md={4} lg={3}>
+                    </Grid> */}
+                </Grid>
+                <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb: 3, }} >
+                            <Button
+                                variant="contained"
+                                type="submit"
+                            >
+                                Search
+                            </Button>
+                        </Grid>
+                    </ThemeProvider>
+                </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchGazetteIssueForm;

src/pages/GazetteIssue/index.js

@@ -0,0 +1,280 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack,
+    Button,
+    Dialog, DialogTitle, DialogContent, DialogActions,
+} from '@mui/material';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+import MainCard from 'components/MainCard';
+
+const ExportForm = Loadable(React.lazy(() => import('./ExportForm')));
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+const GazetteIssueTable = Loadable(React.lazy(() => import('./DataGrid')))
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
+import { dateStr_Year } from "utils/DateUtils";
+import { notifySaveSuccess } from 'utils/CommonFunction';
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+    const [record, setRecord] = React.useState([]);
+    const [comboData, setComboData] = React.useState([]);
+    const [holidayComboData, setHolidayComboData] = React.useState([]);
+    const [onReady, setOnReady] = React.useState(false);
+    const [onSearchReady, setOnSearchReady] = React.useState(false);
+    const [onExportReady, setOnExportReady] = React.useState(false);
+    // const navigate = useNavigate()
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        year: dateStr_Year(new Date()),
+        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
+    
+    const [exportCriteria, setExportCriteria] = React.useState({
+        // year: dateStr_Year(new Date()),
+        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
+
+    const [attachments, setAttachments] = React.useState([]);
+    const [waitImport, setWaitImport] = React.useState(false);
+    const [waitDownload, setWaitDownload] = React.useState(false);
+    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
+    const [warningText, setWarningText] = React.useState("");
+
+    React.useEffect(() => {
+        // console.log(searchCriteria)
+        setOnSearchReady(false)
+        loadForm();
+    }, [searchCriteria]);
+    
+    function loadForm() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ISSUE,
+            params: searchCriteria,
+            onSuccess: (responseData) => {
+                // console.log(comboData)
+                setRecord(responseData);
+                if (comboData.length == 0) {
+                    loadCombo();
+                }else{
+                    setOnSearchReady(true)
+                }
+            }
+        });
+    }
+
+    function loadCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ISSUE_YEAR_COMBO,
+            onSuccess: (responseData) => {
+                let combo = responseData;
+                setComboData(combo);
+                setOnSearchReady(true)
+                loadHolidayCombo(true)
+                // setOnReady(true);
+            }
+        });
+    }
+
+    function loadHolidayCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_HOLIDAY_COMBO,
+            onSuccess: (responseData) => {
+                let combo = responseData
+                setHolidayComboData(combo)
+                setOnExportReady(true)
+                setOnReady(true)
+            }
+        });
+    }
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+    
+    function applyExport(input) {
+        setExportCriteria(input);
+    }
+
+    React.useEffect(() => {
+        if (Object.keys(exportCriteria).length  > 0) {
+            // console.log(exportCriteria)
+            doExport();
+        }
+    }, [exportCriteria]);
+
+    React.useEffect(() => {
+        if (attachments.length > 0) {
+            importHoliday();
+        }
+    }, [attachments]);
+
+    const readFile = (event) => {
+        let file = event.target.files[0];
+        if (file) {
+            if (!file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")) {
+                setWarningText("Please upload a valid file (File format: .xlsx).");
+                setIsWarningPopUp(true);
+                document.getElementById("uploadFileBtn").value = "";
+                return;
+            }
+            file['id'] = attachments.length;
+            setAttachments([
+                ...attachments,
+                file
+            ]);
+            document.getElementById("uploadFileBtn").value = "";
+        }
+    }
+
+    const doExport=()=>{
+        setWaitDownload(true)
+        HttpUtils.fileDownload({
+            url: UrlUtils.GET_ISSUE_LIST,
+            params: exportCriteria,
+            onResponse: () => {
+                setTimeout(()=> setWaitDownload(false), 500)
+            }
+        });
+    }
+
+    const importHoliday = () => {
+        setWaitImport(true);
+        if (!attachments || attachments.length <= 0) {
+            setWarningText("Please upload file.");
+            setSaving(false);
+            return;
+        }
+        HttpUtils.postWithFiles({
+            url: UrlUtils.POST_ISSUE_FILE,
+            files: attachments,
+            onSuccess: () => {
+                notifySaveSuccess()
+                setWaitImport(false);
+                setAttachments([]);
+                loadForm();
+            }
+        });
+    }
+
+    return (
+        !onReady ?
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
+            :
+            (
+                <Grid container sx={{minHeight: '87vh', backgroundColor: 'backgroundColor.default'}} direction="column" justifyContent="flex-start" alignItems="center" >
+                    <Grid item xs={12} width="100%">
+                        <div style={BackgroundHead} width="100%">
+                            <Stack direction="row" height='70px'>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Gazette Issue</Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+                    {!onExportReady?
+                        <LoadingComponent />:
+                        <Grid item xs={12} md={12} lg={12} width="100%">
+                            <ExportForm 
+                                applyExport={applyExport}
+                                comboData={holidayComboData}
+                                waitDownload={waitDownload}
+                            />
+                        </Grid>
+                    }
+                    <Grid item xs={12} md={12} lg={6} width="100%">
+                        <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ml:2,mt:1}} >
+                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
+                                <input
+                                    id="uploadFileBtn"
+                                    name="file"
+                                    type="file"
+                                    accept=".xlsx"
+                                    style={{ display: 'none' }}
+                                    disabled={waitImport}
+                                    onChange={(event) => {
+                                        readFile(event)
+                                    }}
+                                />
+                                <label htmlFor="uploadFileBtn">
+                                    <Button
+                                        component="span"
+                                        variant="contained"
+                                        size="large"
+                                        disabled={waitImport}
+                                    >
+                                        <Typography variant="h5">Upload Files</Typography>
+                                    </Button>
+                                </label>
+                            </ThemeProvider>
+                            
+                        </Stack>
+                    </Grid>
+                  
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} lg={12} width="100%">
+                        <SearchForm 
+                            applySearch={applySearch}
+                            comboData={comboData}
+                        />
+                    </Grid>
+                    {/*row 2*/}
+                    {!onSearchReady?
+                        <LoadingComponent/>:
+                        <Grid item xs={12} md={12} lg={12} width="100%">
+                            <MainCard elevation={0}
+                                border={false}
+                                content={false}
+                            >
+                                <GazetteIssueTable
+                                    recordList={record}
+                                />
+                            </MainCard>
+                        </Grid>
+                    }
+                    <div>
+                        <Dialog
+                            open={isWarningPopUp}
+                            onClose={() => setIsWarningPopUp(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                                }
+                            }}
+                        >
+                            <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
+                            <DialogContent style={{ display: 'flex', }}>
+                                <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
+                            </DialogContent>
+                            <DialogActions>
+                                <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button>
+                            </DialogActions>
+                        </Dialog>
+                    </div>
+                </Grid >
+            )
+    );
+};
+
+export default Index;

src/pages/Holiday/DataGrid.js

@@ -0,0 +1,56 @@
+// material-ui
+import * as React from 'react';
+// import { GridActionsCellItem, } from "@mui/x-data-grid";
+import { FiDataGrid } from "components/FiDataGrid";
+// import EditIcon from '@mui/icons-material/Edit';
+import { useEffect } from "react";
+import { dateStr } from "utils/DateUtils";
+// import { useNavigate } from "react-router-dom";
+
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function HolidayTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+
+    // const navigate = useNavigate()
+
+    useEffect(() => {
+        // console.log(recordList)
+        setRows(recordList);
+    }, [recordList]);
+
+    const columns = [
+        {
+            id: 'HOLIDAY_DAY',
+            field: 'HOLIDAY_DAY',
+            headerName: 'Date',
+            flex: 4,
+            renderCell: (params) => {
+                let HOLIDAY_DAY = params.row.HOLIDAY_DAY;
+                return <div style={{ margin: 4 }}>{dateStr(HOLIDAY_DAY)}</div>
+            },
+        },
+        {
+            id: 'DESCRIPTION',
+            field: 'DESCRIPTION',
+            headerName: 'Description',
+            flex: 5,
+        },
+    ];
+
+    // function handleRowDoubleClick(params) {
+    //     navigate('/emailTemplate/' + params.id);
+    // }
+
+    return (
+        <div style={{ height: "fit-content", width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                customPageSize={20}
+                // onRowDoubleClick={handleRowDoubleClick}
+                getRowHeight={() => 'auto'}
+            />
+        </div>
+    );
+}

src/pages/Holiday/SearchForm.js

@@ -0,0 +1,129 @@
+// material-ui
+import {
+    Button,
+    Grid, 
+    TextField,
+    Autocomplete,
+    Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+// import * as DateUtils from "utils/DateUtils";
+import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
+// import * as ComboData from "utils/ComboData";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchHolidayForm = ({ applySearch, comboData}) => {
+    const [selectedYear, setSelectedYear] = React.useState([]);
+    // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
+    const [comboList, setComboList] = React.useState([]);
+    // const [onReady, setOnReady] = React.useState(false);
+
+    const { 
+        // register, 
+        handleSubmit } = useForm()
+
+    const onSubmit = () => {
+        if (selectedYear !=null){
+            const temp = {
+                year: selectedYear.label,
+            };
+            applySearch(temp);
+        }
+    };
+
+    React.useEffect(() => {
+        if (comboData && comboData.length > 0) {
+            // console.log(comboData)
+            // const labelValue = comboData.find(obj => obj.label === searchCriteria.year);
+            // console.log(labelValue)
+            if(selectedYear.length == 0){
+                setSelectedYear(comboData[0])
+            }
+            setComboList(comboData)
+            // setSelectedYear(searchCriteria.dateFrom)
+        }
+    }, [comboData]);
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            >
+
+            <form onSubmit={handleSubmit(onSubmit)} >
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:1}}>
+                        <Typography variant="h5" >
+                            Year
+                        </Typography>
+                    </Grid>
+                    {/*row 2*/}
+
+                    <Grid container display="flex" alignItems={"center"}>
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                       <Autocomplete
+                            disablePortal
+                            id="year-combo"
+                            value={selectedYear}
+                            // defaultValue={selectedYear}
+                            options={comboList}
+                            // disabled={checkCountry}
+                            getOptionLabel={(option) => option.label ? option.label : ""}
+                            onChange={(event, newValue) => {
+                                setSelectedYear(newValue);
+                            }}
+                            sx={{
+                                "& .MuiInputBase-root": { height: "41px" },
+                                "#year-combo": { padding: "0px 0px 0px 0px" },
+                                "& .MuiAutocomplete-endAdornment": { top: "auto" },
+                            }}
+                            renderInput={(params) => <TextField {...params} placeholder={""}/>}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        {/* <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            InputProps={{ inputProps: { min: minDate } }}
+                            onChange={(newValue) => {
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
+                            id="dateTo"
+                            type="date"
+                            label="To"
+                            defaultValue={searchCriteria.dateTo}
+                        /> */}
+                    </Grid>
+
+                    {/* <Grid item xs={9} s={6} md={4} lg={3}>
+                    </Grid> */}
+                </Grid>
+                <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb: 3, }} >
+                            <Button
+                                variant="contained"
+                                type="submit"
+                            >
+                                Search
+                            </Button>
+                        </Grid>
+                    </ThemeProvider>
+                </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchHolidayForm;

src/pages/Holiday/index.js

@@ -0,0 +1,267 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack,
+    Button,
+    Dialog, DialogTitle, DialogContent, DialogActions,
+} from '@mui/material';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const HolidayTable = Loadable(React.lazy(() => import('pages/Holiday/DataGrid')))
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+// import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import MainCard from 'components/MainCard';
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+// import { useNavigate } from "react-router";
+import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
+import { dateStr_Year } from "utils/DateUtils";
+import { notifySaveSuccess } from 'utils/CommonFunction';
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+
+    const [record, setRecord] = React.useState([]);
+    const [comboData, setComboData] = React.useState([]);
+    const [onReady, setOnReady] = React.useState(false);
+    const [onSearchReady, setOnSearchReady] = React.useState(false);
+    // const navigate = useNavigate()
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        year: dateStr_Year(new Date()),
+        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
+    const [attachments, setAttachments] = React.useState([]);
+    const [waitImport, setWaitImport] = React.useState(false);
+    const [waitDownload, setWaitDownload] = React.useState(false);
+    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
+    const [warningText, setWarningText] = React.useState("");
+
+    // React.useLayoutEffect(() => {
+    //     loadForm();
+    // }, []);
+
+    // React.useLayoutEffect(() => {
+    //     if (comboData) {
+    //         setOnReady(true);
+    //     }
+    // }, [comboData]);
+
+    React.useEffect(() => {
+        // console.log(searchCriteria)
+        setOnSearchReady(false)
+        loadForm();
+    }, [searchCriteria]);
+    
+    function loadForm() {
+        HttpUtils.get({
+            url: UrlUtils.GET_HOLIDAY,
+            params: searchCriteria,
+            onSuccess: (responseData) => {
+                // console.log(comboData)
+                setRecord(responseData);
+                if (comboData.length == 0) {
+                    loadCombo();
+                }else{
+                    setOnSearchReady(true)
+                }
+            }
+        });
+    }
+
+    function loadCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_HOLIDAY_COMBO,
+            onSuccess: (responseData) => {
+                let combo = responseData;
+                setComboData(combo);
+                setOnReady(true);
+                setOnSearchReady(true)
+            }
+        });
+    }
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    React.useEffect(() => {
+        if (attachments.length > 0) {
+            importHoliday();
+        }
+    }, [attachments]);
+
+    const readFile = (event) => {
+        let file = event.target.files[0];
+        if (file) {
+            if (!file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")) {
+                setWarningText("Please upload a valid file (File format: .xlsx).");
+                setIsWarningPopUp(true);
+                document.getElementById("uploadFileBtn").value = "";
+                return;
+            }
+            file['id'] = attachments.length;
+            setAttachments([
+                ...attachments,
+                file
+            ]);
+            document.getElementById("uploadFileBtn").value = "";
+        }
+    }
+
+    const doExport=()=>{
+        setWaitDownload(true)
+        HttpUtils.fileDownload({
+            url: UrlUtils.GET_HOLIDAY_TEMPLATE,
+            onResponse: () => {
+                setTimeout(()=> setWaitDownload(false), 500)
+            }
+        });
+    }
+
+    const importHoliday = () => {
+        setWaitImport(true);
+        setOnSearchReady(false);
+        if (!attachments || attachments.length <= 0) {
+            setWarningText("Please upload file.");
+            setSaving(false);
+            return;
+        }
+        HttpUtils.postWithFiles({
+            url: UrlUtils.POST_HOLIDAY,
+            files: attachments,
+            onSuccess: () => {
+                notifySaveSuccess()
+                setWaitImport(false);
+                setAttachments([]);
+                loadForm();
+            }
+        });
+    }
+
+    return (
+        !onReady ?
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
+            :
+            (
+                <Grid container sx={{minHeight: '87vh', backgroundColor: 'backgroundColor.default'}} direction="column" justifyContent="flex-start" alignItems="center" >
+                    <Grid item xs={12} width="100%">
+                        <div style={BackgroundHead} width="100%">
+                            <Stack direction="row" height='70px'>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Holiday Setting</Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+                    <Grid item xs={12} md={12} lg={6} width="100%">
+                        <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ml:2,mt:1}} >
+                        
+                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
+                                <label htmlFor="downloadFileBtn">
+                                    <Button
+                                        component="span"
+                                        variant="contained"
+                                        size="large"
+                                        disabled={waitDownload}
+                                        onClick={doExport}
+                                    >
+                                        <Typography variant="h5">Export</Typography>
+                                    </Button>
+                                </label>
+                            </ThemeProvider>
+                            
+                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
+                                <input
+                                    id="uploadFileBtn"
+                                    name="file"
+                                    type="file"
+                                    accept=".xlsx"
+                                    style={{ display: 'none' }}
+                                    disabled={waitImport}
+                                    onChange={(event) => {
+                                        readFile(event)
+                                    }}
+                                />
+                                <label htmlFor="uploadFileBtn">
+                                    <Button
+                                        component="span"
+                                        variant="contained"
+                                        size="large"
+                                        disabled={waitImport}
+                                    >
+                                        <Typography variant="h5">Upload Files</Typography>
+                                    </Button>
+                                </label>
+                            </ThemeProvider>
+                            
+                        </Stack>
+                    </Grid>
+
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} lg={12} width="100%">
+                        <SearchForm 
+                            applySearch={applySearch}
+                            // generateXML={generateXML}
+                            searchCriteria={searchCriteria}
+                            comboData={comboData}
+                        />
+                    </Grid>
+                    {/*row 2*/}
+                    {!onSearchReady?
+                        <LoadingComponent/>:
+                        <Grid item xs={12} md={12} lg={12} width="100%">
+                            <MainCard elevation={0}
+                                border={false}
+                                content={false}
+                            >
+                                <HolidayTable
+                                    recordList={record}
+                                />
+                            </MainCard>
+                        </Grid>
+                    }
+                    <div>
+                        <Dialog
+                            open={isWarningPopUp}
+                            onClose={() => setIsWarningPopUp(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                                }
+                            }}
+                        >
+                            <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
+                            <DialogContent style={{ display: 'flex', }}>
+                                <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
+                            </DialogContent>
+                            <DialogActions>
+                                <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button>
+                            </DialogActions>
+                        </Dialog>
+                    </div>
+                </Grid >
+            )
+    );
+};
+
+export default Index;

src/pages/Message/Details/index.js

@@ -61,7 +61,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Organization/DetailPage/index.js

@@ -124,13 +124,13 @@ const OrganizationDetailPage = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container direction="column" sx={{minHeight: '90vh',backgroundColor:isGLDLoggedIn()?'backgroundColor.default':'#ffffff' }}>
+            <Grid container direction="column" sx={{minHeight: '87vh',backgroundColor:isGLDLoggedIn()?'backgroundColor.default':'#ffffff' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/Organization/SearchPage/OrganizationSearchForm.js

@@ -123,7 +123,7 @@ const OrganizationSearchForm = ({ applySearch }) => {
                                     renderInput={(params) => (
                                         <TextField
                                             {...params}
-                                            label="Status"
+                                            label="Creditor/Non-creditor"
                                             InputLabelProps={{
                                                 shrink: true
                                             }}

src/pages/Organization/SearchPage/index.js

@@ -65,13 +65,13 @@ const OrganizationSearchPage = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{minHeight: '95vh', backgroundColor:"backgroundColor.default"}} direction="column">
+            <Grid container sx={{minHeight: '87vh', backgroundColor:"backgroundColor.default"}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/Payment/Card/index.js

@@ -125,7 +125,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Payment/Details_GLD/index.js

@@ -79,7 +79,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Payment/Details_Public/index.js

@@ -92,7 +92,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Payment/FPS/AckPage.js

@@ -156,7 +156,7 @@ const AckPage = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Payment/FPS/FPS.js

@@ -273,7 +273,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Payment/FPS/fpscallback.js

@@ -139,7 +139,7 @@ const Fpscallback = () => {
     }
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Payment/PaymentCallback.js

@@ -159,7 +159,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Payment/Search_GLD/index.js

@@ -64,7 +64,7 @@ const Index = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container sx={{backgroundColor: 'backgroundColor.default'}} direction="column">
+            <Grid container sx={{minHeight: '87vh', backgroundColor: 'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/Proof/Create_FromApp/ProofForm.js

@@ -91,11 +91,11 @@ const FormPanel = ({ formData }) => {
                 }));
                 formik.setFieldValue("noOfPages", responseData.data.total_no_of_page);
                 formik.setFieldValue("fee", (data.groupType == "Private Bill" ? 6552 * responseData.data.total_no_of_page : responseData.data.length * colValue));
-                if(data.groupType == "Private Bill" && responseData.data.file.length>0){
+                if (data.groupType == "Private Bill" && responseData.data.file.length > 0) {
                     let attachmentList = attachments;
-                    for(let i=0; i<responseData.data.file.length; i++){
+                    for (let i = 0; i < responseData.data.file.length; i++) {
                         let file = responseData.data.file[i];
-                        attachmentList.find(item=> item.name == file.filename)["no_of_page"] = file.no_of_page;
+                        attachmentList.find(item => item.name == file.filename)["no_of_page"] = file.no_of_page;
                     }
                     setAttachments(attachmentList);
                 }
@@ -129,7 +129,8 @@ const FormPanel = ({ formData }) => {
                     length: values.length,
                     colCount: columnPrice.colCount,
                     noOfPages: values.noOfPages,
-                    returnBeforeDate: DateUtils.convertToDate(values.beforeDate).getTime()
+                    reviseDeadline: DateUtils.convertToDate(values.reviseDeadline).getTime(),
+                    proofPaymentDeadline: DateUtils.convertToDate(values.proofPaymentDeadline).getTime()
                 },
                 files: attachments,
                 onSuccess: function (responeData) {
@@ -196,15 +197,41 @@ const FormPanel = ({ formData }) => {
                     <Grid item xs={12} md={12}>
                         <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>
                             <FormLabel sx={{ paddingRight: 2, textAlign: "center" }}>
-                                <Typography variant="h5">Return Before Date:</Typography>
+                                <Typography variant="h5">Deadline for proof with revison:</Typography>
                             </FormLabel>
                             <TextField
                                 fullWidth
                                 size="small"
                                 type="datetime-local"
                                 onChange={formik.handleChange}
-                                name="beforeDate"
-                                value={formik.values["beforeDate"]}
+                                name="reviseDeadline"
+                                value={formik.values["reviseDeadline"]}
+                                variant="outlined"
+                                sx={
+                                    {
+                                        "& .MuiInputBase-input.Mui-disabled": {
+                                            WebkitTextFillColor: "#000000",
+                                            background: "#f8f8f8",
+                                        },
+                                        width: '30%'
+                                    }
+                                }
+                            />
+                        </Stack>
+                    </Grid>
+
+                    <Grid item xs={12} md={12}>
+                        <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>
+                            <FormLabel sx={{ paddingRight: 2, textAlign: "center" }}>
+                                <Typography variant="h5">Deadline for confirm proof and payment:</Typography>
+                            </FormLabel>
+                            <TextField
+                                fullWidth
+                                size="small"
+                                type="datetime-local"
+                                onChange={formik.handleChange}
+                                name="proofPaymentDeadline"
+                                value={formik.values["proofPaymentDeadline"]}
                                 variant="outlined"
                                 sx={
                                     {
@@ -245,12 +272,12 @@ const FormPanel = ({ formData }) => {
 
 
                     <Grid item xs={12} md={12}>
-                        <UploadFileTable 
-                        key="uploadTable" 
-                        recordList={attachments} 
-                        setRecordList={setAttachments}
-                        showPageColumn = {formik.values.groupType == "Private Bill"}
-                         />
+                        <UploadFileTable
+                            key="uploadTable"
+                            recordList={attachments}
+                            setRecordList={setAttachments}
+                            showPageColumn={formik.values.groupType == "Private Bill"}
+                        />
                     </Grid>
 
                     {
@@ -414,7 +441,7 @@ const FormPanel = ({ formData }) => {
                             variant="contained"
                             color="success"
                             type="submit"
-                            disabled = {saving}
+                            disabled={saving}
                             sx={{
                                 textTransform: 'capitalize',
                                 alignItems: 'end'

src/pages/Proof/Create_FromApp/index.js

@@ -59,7 +59,8 @@ const Index = () => {
 
                     responseData.data["groupType"] = responseData.data.groupTitle;
 
-                    responseData.data["beforeDate"] = DateUtils.datetimeFieldFormat(responseData.data.returnBeforeDate);
+                    responseData.data["reviseDeadline"] = DateUtils.datetimeFieldFormat(responseData.data.reviseDeadline);
+                    responseData.data["proofPaymentDeadline"] = DateUtils.datetimeFieldFormat(responseData.data.proofPaymentDeadline);
                     setRecord(responseData.data);
                 }
             });
@@ -68,7 +69,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Proof/Payment/Pay.js

@@ -82,7 +82,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
@@ -113,7 +113,7 @@ const Index = () => {
                                         <br />
                                         <FormattedMessage id="MSG.payMsg2_1" />
                                         <span style={{ color: "red" }}>
-                                            {DateUtils.datetimeStr(record?.returnBeforeDate)}
+                                            {DateUtils.datetimeStr(record?.proofPaymentDeadline)}
                                         </span>
                                         <FormattedMessage id="MSG.payMsg2_2" />
                                         <br />

src/pages/Proof/Payment/Pay_Creditor.js

@@ -60,7 +60,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Proof/Reply_GLD/ApplicationDetails.js

@@ -266,10 +266,17 @@ const ApplicationDetailCard = ({
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">Deadline for payment and reply：</Typography>
+                                        <Typography variant="h5">Deadline for proof with revison：</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">Before {DateUtils.datetimeStr(data.returnBeforeDate)}</Typography>
+                                        <Typography variant="h5">Before {DateUtils.datetimeStr(data.reviseDeadline)}</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} md={12} lg={12}
+                                        sx={{ display: 'flex', alignItems: 'center' }}>
+                                        <Typography variant="h5">Deadline for confirm proof and payment</Typography>
+                                    </Grid>
+                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
+                                        <Typography variant="h5">Before {DateUtils.datetimeStr(data.proofPaymentDeadline)}</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>

src/pages/Proof/Reply_GLD/index.js

@@ -76,10 +76,10 @@ const Index = () => {
                     responseData.data["groupType"] = responseData.data.groupTitle;
                     responseData.data["action"] = responseData.data.replyDate ? responseData.data.action : true;
 
-                    let returnBeforeDate = DateUtils.convertToDate(responseData.data.returnBeforeDate);
+                    let proofPaymentDeadline = DateUtils.convertToDate(responseData.data.proofPaymentDeadline);
                     let current = new Date();
-                    setIsOverTime(current.getTime() > returnBeforeDate.getTime());
-                    setShowCancelBtn(responseData.data.cancelled || responseData.data.replyDate || current.getTime() > returnBeforeDate.getTime())
+                    setIsOverTime(current.getTime() > proofPaymentDeadline.getTime());
+                    setShowCancelBtn(responseData.data.cancelled || responseData.data.replyDate || current.getTime() > proofPaymentDeadline.getTime())
 
 
 
@@ -112,7 +112,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -231,21 +231,38 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     <Grid item xs={12} md={12} lg={12}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5" display="inline">
-                                            <Typography variant="h5" style={{color:'red'}} display="inline">
+                                            {/* <Typography variant="h5" style={{color:'red'}} display="inline">
                                                 <FormattedMessage id="payAnd" />
-                                            </Typography>
+                                            </Typography> */}
                                             <FormattedMessage id="commentDeadline" />：
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">&emsp;
                                             {locale === 'en' ?
-                                            `${intl.formatMessage({id: 'before'})} ${DateUtils.datetimeStr(data.returnBeforeDate)} `
+                                            `${intl.formatMessage({id: 'before'})} ${DateUtils.datetimeStr(data.reviseDeadline)} `
                                             :
-                                            `${DateUtils.datetimeStr_Cht(data.returnBeforeDate)} ${intl.formatMessage({id: 'before'})}`
+                                            `${DateUtils.datetimeStr_Cht(data.reviseDeadline)} ${intl.formatMessage({id: 'before'})}`
                                         }
                                         </Typography>
                                     </Grid>
+
+                                    <Grid item xs={12} md={12} lg={12}
+                                        sx={{ display: 'flex', alignItems: 'center' }}>
+                                        <Typography variant="h5" display="inline">
+                                            <FormattedMessage id="paymentDeadline" />：
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
+                                        <Typography variant="h5">&emsp;
+                                            {locale === 'en' ?
+                                            `${intl.formatMessage({id: 'before'})} ${DateUtils.datetimeStr(data.proofPaymentDeadline)} `
+                                            :
+                                            `${DateUtils.datetimeStr_Cht(data.proofPaymentDeadline)} ${intl.formatMessage({id: 'before'})}`
+                                        }
+                                        </Typography>
+                                    </Grid>
+
                                     <Grid item xs={12} sm={3} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="pnspsFormParagraph">

src/pages/Proof/Reply_Public/ProofForm.js

@@ -131,10 +131,10 @@ const FormPanel = ({ formData }) => {
     }
 
     const isOverTime = () => {
-        let returnBeforeDate = DateUtils.convertToDate(formik.values?.returnBeforeDate);
-        if (!returnBeforeDate) return true;
+        let proofPaymentDeadline = DateUtils.convertToDate(formik.values?.proofPaymentDeadline);
+        if (!proofPaymentDeadline) return true;
         let current = new Date();
-        return current.getTime() > returnBeforeDate;
+        return current.getTime() > proofPaymentDeadline;
     }
 
 

src/pages/Proof/Reply_Public/index.js

@@ -81,7 +81,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/Proof/Search_GLD/SearchForm.js

@@ -78,7 +78,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
     function getIssueLabel(data) {
         if (data == {}) return "";
-        return data.year
+        return data.issueYear
             + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
             + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");

src/pages/Proof/Search_GLD/index.js

@@ -90,13 +90,13 @@ const UserSearchPage_Individual = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh', backgroundColor: 'backgroundColor.default' }} direction="column"
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column"
             >
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>

src/pages/Proof/Search_Public/DataGrid.js

@@ -105,15 +105,15 @@ export default function SearchPublicNoticeTable({ recordList }) {
             }
         },
         {
-            id: 'returnBeforeDate',
-            field: 'returnBeforeDate',
+            id: 'proofPaymentDeadline',
+            field: 'proofPaymentDeadline',
             headerName: intl.formatMessage({id: 'replyBefore'}),
             width: isMdOrLg ? 'auto' : 250,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
-                let returnBeforeDate = DateUtils.convertToDate(params?.value);
-                returnBeforeDate = returnBeforeDate.setHours(14, 0, 0, 0);
-                return locale === 'en' ? DateUtils.datetimeStr(returnBeforeDate) : DateUtils.datetimeStr_Cht(returnBeforeDate);
+                let proofPaymentDeadline = DateUtils.convertToDate(params?.value);
+                proofPaymentDeadline = proofPaymentDeadline.setHours(14, 0, 0, 0);
+                return locale === 'en' ? DateUtils.datetimeStr(proofPaymentDeadline) : DateUtils.datetimeStr_Cht(proofPaymentDeadline);
             }
         },
         {

src/pages/Proof/Search_Public/SearchForm.js

@@ -85,7 +85,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
 
     function getIssueLabel(data) {
         if (data == {}) return "";
-        return data.year
+        return data.issueYear
             + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
             + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -34,6 +34,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
     const intl = useIntl();
 
     const [val, setVal] = React.useState({});
+    const [reloadPage, setReloadPage] = React.useState(false);
 
     const [issueId, setIssueId] = React.useState(loadedData.issueId);
     const navigate = useNavigate();
@@ -126,7 +127,14 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                 remarks: values.remarks ? values.remarks : "",
             },
             files: [attachment],
-            onSuccess: function () {
+            onSuccess: function (responData) {
+                if(responData.msg){
+                    setVal({});
+                    setReloadPage(true);
+                    setWarningText(intl.formatMessage({id: responData.msg}));
+                    setIsWarningPopUp(true);
+                    return;
+                }
                 notifyActionSuccess(intl.formatMessage({id: 'submissionSuccess'}) + '!')
                 navigate("/publicNotice");
                 // location.reload(); 
@@ -155,7 +163,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
 
 
     return (
-        <Grid container sx={{ minHeight: '95vh', backgroundColor: '#ffffff', mb: 3 }} direction="column" alignItems="center">
+        <Grid container sx={{ minHeight: '87vh', backgroundColor: '#ffffff', mb: 3 }} direction="column" alignItems="center">
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -350,6 +358,9 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                     setIsWarningPopUp(false);
                                 }else{
                                     setIsWarningPopUp(false);
+                                    if(reloadPage){
+                                        location.reload();
+                                    }
                                 }
                             }}
                         >

src/pages/PublicNotice/ApplyForm/index.js

@@ -53,7 +53,7 @@ const ApplyForm = () => {
     };
 
     function getIssueLabel(data) {
-        return data.year
+        return data.issueYear
             + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
             + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
@@ -65,7 +65,7 @@ const ApplyForm = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -75,9 +75,9 @@ const ApplicationDetailCard = (
 
     const onDownloadClick = () => () => {
         HttpUtils.fileDownload({
-            fileId: fileDetail.id,
-            skey: fileDetail.skey,
-            filename: fileDetail.filename,
+            fileId: fileDetail?.id,
+            skey: fileDetail?.skey,
+            filename: fileDetail?.filename,
         });
         notifyDownloadSuccess()
         setUploadStatus(true)
@@ -510,7 +510,7 @@ const ApplicationDetailCard = (
                                                                     variant="h5"
                                                                     sx={{ wordBreak: 'break-word' }}
                                                                 >
-                                                                    {fileDetail.filename}
+                                                                    {fileDetail?.filename}
                                                                 </Typography>
                                                             </FormControl>
                                                         </Grid>
@@ -519,6 +519,7 @@ const ApplicationDetailCard = (
                                                                 size="small"
                                                                 variant="contained"
                                                                 onClick={onDownloadClick()}
+                                                                disabled={!fileDetail?.filename}
                                                                 sx={{
                                                                     textTransform: 'capitalize',
                                                                     alignItems: 'end',

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -95,9 +95,9 @@ const ApplicationDetailCard = (
 
     const onDownloadClick = () => () => {
         HttpUtils.fileDownload({
-            fileId: fileDetail.id,
-            skey: fileDetail.skey,
-            filename: fileDetail.filename,
+            fileId: fileDetail?.id,
+            skey: fileDetail?.skey,
+            filename: fileDetail?.filename,
         });
     };
 
@@ -537,7 +537,7 @@ const ApplicationDetailCard = (
                                                                 id='fileName'
                                                                 variant="pnspsFormParagraph"
                                                             >
-                                                                {fileDetail.filename}
+                                                                {fileDetail?.filename}
                                                             </Typography>
                                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                 <Button
@@ -547,6 +547,7 @@ const ApplicationDetailCard = (
                                                                     aria-label={intl.formatMessage({ id: 'download' })}
                                                                     title={intl.formatMessage({ id: 'download' })}
                                                                     color="save"
+                                                                    disabled={!fileDetail?.filename}
                                                                     startIcon={<DownloadIcon sx={{ alignItems: "center" }} />}
                                                                 >
                                                                     <FormattedMessage id="download" />

src/pages/PublicNotice/ListPanel/index.js

@@ -102,13 +102,13 @@ const PublicNotice = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh', backgroundColor:'backgroundColor.default'}} direction="column">
+            <Grid container sx={{ minHeight: '87vh', backgroundColor:'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -77,7 +77,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
     function getIssueLabel(data) {
         if (data == {}) return "";
-        return data.year
+        return data.issueYear
             + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
             + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
             + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");

src/pages/PublicNotice/Search_GLD/index.js

@@ -90,13 +90,13 @@ const UserSearchPage_Individual = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh',backgroundColor: 'backgroundColor.default' }} direction="column">
+            <Grid container sx={{ minHeight: '87vh',backgroundColor: 'backgroundColor.default' }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/Setting/DrImport/index.js

@@ -0,0 +1,204 @@
+
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+
+import {
+    Grid, Typography, Button,
+    Stack, Box,
+    Dialog, DialogTitle, DialogContent, DialogActions,
+} from '@mui/material';
+import { notifyDownloadSuccess } from 'utils/CommonFunction';
+
+import { FormattedMessage, useIntl } from "react-intl";
+
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
+    const [warningText, setWarningText] = React.useState("");
+    const [resultStr, setResultStr] = React.useState("");
+    const [wait, setWait] = React.useState(false);
+
+    const intl = useIntl();
+
+
+    const BackgroundHead = {
+        backgroundImage: `url(${titleBackgroundImg})`,
+        width: 'auto',
+        height: 'auto',
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundColor: '#0C489E',
+        backgroundPosition: 'right'
+    }
+
+
+    const readFile = (event) => {
+        let file = event.target.files[0];
+        setWait(true);
+        if (file) {
+            
+            if (file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")
+            ) {
+                HttpUtils.postWithFiles({
+                    url: UrlUtils.DR_IMPORT,
+                    params:null,
+                    files: [event.target.files[0]],
+                    onSuccess: function (responData) {
+                        setWait(false);
+                        if(responData?.msg){
+                            setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "red"}}>Error</span><br/><span style={{"whiteSpace": "pre-line"}}>{responData?.msg}</span></>)
+                        }else if(responData?.success){
+                            setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "green"}}>Success</span><br/>Record Count: {responData.recordCount}</>)
+                        }
+                    },
+                    onError: function(){
+                        setWait(false);
+                        setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "red"}}>Error</span><br/>Action Fail: Please import valid file.</>)
+                    }
+                });
+            } else {
+                setWait(false);
+                setWarningText("Please upload a valid file (file format: .xlsx)");
+                setIsWarningPopUp(true);
+                document.getElementById("uploadFileBtn").value = "";
+                return;
+            }
+        }else{
+            setWait(false);
+        }
+        document.getElementById("uploadFileBtn").value = "";
+    }
+
+    return (
+        <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" alignItems="center">
+            <Grid item xs={12} md={12} width="100%" >
+                <div style={BackgroundHead}>
+                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                            DR Import
+                        </Typography>
+                    </Stack>
+                </div>
+            </Grid>
+
+            <Grid item xs={12} md={12} sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, }} width="98%">
+                <Box xs={12} md={12} sx={{ borderRadius: '10px', backgroundColor: '#fff', p: 4 }}>
+                    <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+
+                        <Button
+                            aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
+                            component="span"
+                            variant="outlined"
+                            size="large"
+                            onClick={()=>{
+                                HttpUtils.fileDownload({
+                                    url: UrlUtils.DR_EXPORT,
+                                    onSuccess: ()=>{
+                                        notifyDownloadSuccess();
+                                    }
+                                });
+                            }}
+                        >Export DR Excel</Button>
+                            <Grid item sx={{ pl: 4 }}>
+                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                    <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
+                                        <input
+                                            id="uploadFileBtn"
+                                            name="file"
+                                            type="file"
+                                            accept=".xlsx"
+                                            style={{ display: 'none' }}
+                                            onChange={(event) => {
+                                                readFile(event)
+                                            }}
+                                        />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                            <Grid item >
+                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                    <Grid item xs={12} >
+                                        <label htmlFor="uploadFileBtn">
+                                            <Button
+                                                aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
+                                                component="span"
+                                                variant="outlined"
+                                                size="large"
+                                            >Import DR Excel</Button>
+                                        </label>
+                                    </Grid>
+                                    
+                                </Grid>
+                            </Grid>
+                     
+                    </Stack>
+                </Box>
+            </Grid>
+
+            <Grid item xs={12} md={12} sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, }} width="98%" >
+                <Box xs={12} md={12} sx={{ borderRadius: '10px', backgroundColor: '#fff', p: 4 }}>
+
+                    <Typography variant="h4">Result:</Typography>
+                    <Box xs={12} md={12} sx={{ pl: 4 }}>
+                        {resultStr}
+                    </Box>
+
+
+                </Box>
+            </Grid>
+
+            <div>
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
+                    <DialogTitle>
+                        Action Fail
+                    </DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button
+                            aria-label={intl.formatMessage({ id: 'ok' })}
+                            onClick={() => { setIsWarningPopUp(false); }}
+                        >
+                            <FormattedMessage id="ok" />
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
+            <div>
+                <Dialog
+                    open={wait}
+                    onClose={() => setWait(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>Please wait ...</Typography>
+                    </DialogContent>
+                </Dialog>
+            </div>
+        </Grid>
+    );
+};
+
+export default Index;

src/pages/Setting/SystemSetting/index.js

@@ -69,7 +69,7 @@ const SystemSetting = () => {
 
     return (
        
-            <Grid container sx={{ minHeight: '90vh', backgroundColor: 'backgroundColor.default' }} direction="column"
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column"
                 justifyContent="flex-start">
                 <>
                     <Grid item xs={12}>

src/pages/User/DetailPage/index.js

@@ -202,13 +202,13 @@ const UserMaintainPage = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '90vh', backgroundColor: 'backgroundColor.default' }}>
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/User/DetailsPage_Individual/index.js

@@ -118,13 +118,13 @@ const UserMaintainPage_Individual = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container direction="column" sx={{minHeight: '90vh', backgroundColor: isGLDLoggedIn()?'backgroundColor.default':'#ffffff', maxWidth:'100%' }}>
+            <Grid container direction="column" sx={{minHeight: '87vh', backgroundColor: isGLDLoggedIn()?'backgroundColor.default':'#ffffff', maxWidth:'100%' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js

@@ -43,7 +43,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
             setOnReady(true);
-            console.log(currentUserData)
+            // console.log(currentUserData)
         }
     }, [currentUserData]);
 
@@ -59,7 +59,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
             phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
         }),
         onSubmit: (values) => {
-            console.log(values);
+            // console.log(values);
             HttpUtils.post({
                 url: UrlUtils.POST_PUB_ORG_USER,
                 params: {
@@ -105,50 +105,48 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                 <form onSubmit={formik.handleSubmit}>
 
                     {/*top button*/}
-                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3, mt: 2 }} alignItems={"start"} justifyContent="center">
-                        <Grid container maxWidth justifyContent="flex-start">
-                            {editMode ?
-                                <>
-                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                        <Button
-                                            variant="contained"
-                                            onClick={loadDataFun}
-                                            color="cancel"
-                                        >
-                                            <FormattedMessage id="resetAndBack" />
-
-                                        </Button>
-                                    </Grid>
-                                    <Grid item sx={{ ml: 3, mr: 3 }}>
-                                        <Button
-                                            variant="contained"
-                                            type="submit"
-                                            color="success"
-                                        >
-                                            <FormattedMessage id="save" />
-
-                                        </Button>
-                                    </Grid>
-                                </ThemeProvider>
-                                </>
-                                :
-                                <>
-                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                        <Button
-                                            variant="contained"
-                                            onClick={onEditClick}
-                                        >
-                                            <FormattedMessage id="edit" />
-
-                                        </Button>
-                                    </Grid>
-                                </ThemeProvider>
-                                </>
-                            }
+                    <Grid container alignItems="center" justifyContent="flex-start">
+                        <Grid item s={12} md={12} lg={12} sx={{ lg:{mb: 3}, mt: 2 }}>
+                            <Grid container direction="row" justifyContent="flex-start">
+                                {editMode ?
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                        <Grid item xs={4} sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                variant="contained"
+                                                onClick={loadDataFun}
+                                                color="cancel"
+                                            >
+                                                <FormattedMessage id="resetAndBack" />
+
+                                            </Button>
+                                        </Grid>
+                                        <Grid item xs={4} sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                variant="contained"
+                                                type="submit"
+                                                color="success"
+                                            >
+                                                <FormattedMessage id="save" />
+
+                                            </Button>
+                                        </Grid>
+                                    </ThemeProvider>
+                                    :
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                        <Grid item sx={{ ml:3, mr: 3 }}>
+                                            <Button
+                                                variant="contained"
+                                                onClick={onEditClick}
+                                            >
+                                                <FormattedMessage id="edit" />
+
+                                            </Button>
+                                        </Grid>
+                                    </ThemeProvider>
+                                }
 
 
+                            </Grid>
                         </Grid>
                     </Grid>
                     {/*end top button*/}
@@ -157,7 +155,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                             <FormattedMessage id="userDetail" />
                         </Typography>
                         <Grid container spacing={1}>
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'userLoginName'}) + ":",
                                     valueName: "username",
@@ -166,7 +164,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'userContactName'}) + ":",
                                     valueName: "contactPerson",
@@ -175,7 +173,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'userContactEmail'}) + ":",
                                     valueName: "emailBus",
@@ -184,7 +182,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getPhoneField({
                                     label: intl.formatMessage({id: 'userContactNumber'}) + ":",
                                     valueName: {
@@ -196,7 +194,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={12}>
+                            <Grid item xs={12} lg={12}>
                                 {FieldUtils.getTextField({
                                     label: intl.formatMessage({id: 'primaryUser'}) + ":",
                                     valueName: "primaryUser",

src/pages/User/DetailsPage_Organization/index.js

@@ -166,7 +166,7 @@ const UserMaintainPage_Organization = () => {
                     //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
                     setUserData(response.data);
                     setOrgData(response.orgList);
-                    console.log(response.data)
+                    // console.log(response.data)
                 }
             });
         }
@@ -179,13 +179,13 @@ const UserMaintainPage_Organization = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh', backgroundColor: isGLDLoggedIn()?'backgroundColor.default':'#ffffff' }} direction="column">
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: isGLDLoggedIn()?'backgroundColor.default':'#ffffff' }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/User/GLDUserProfile/index.js

@@ -75,13 +75,13 @@ const UserMaintainPage = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{minHeight: '90vh',  backgroundColor: 'backgroundColor.default' }}direction="column"
+            <Grid container sx={{minHeight: '87vh',  backgroundColor: 'backgroundColor.default' }}direction="column"
             justifyContent="flex-start">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>

src/pages/User/SearchPage/index.js

@@ -70,13 +70,13 @@ const UserSettingPage = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '90vh', backgroundColor: "backgroundColor.default" }} direction="column">
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: "backgroundColor.default" }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/User/SearchPage_Individual/index.js

@@ -65,13 +65,13 @@ const UserSearchPage_Individual = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '90vh', backgroundColor: "backgroundColor.default" }} direction="column">
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: "backgroundColor.default" }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/User/SearchPage_Organization/index.js

@@ -66,13 +66,13 @@ const UserSearchPage_Organization = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{minHeight: '95vh',backgroundColor:"backgroundColor.default"}} direction="column">
+            <Grid container sx={{minHeight: '87vh',backgroundColor:"backgroundColor.default"}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/AuthWrapper.js

@@ -26,7 +26,7 @@ const BackgroundHead = {
 // ==============================|| AUTHENTICATION - WRAPPER ||============================== //
 
 const AuthWrapper = ({ children }) => (
-  <Box sx={{ minHeight: '90vh' }}>
+  <Box sx={{ minHeight: '87vh' }}>
     {/* <AuthBackground /> */}
     {/* <img src={banner} alt="banner" width="100%" /> */}
     <div style={BackgroundHead}>
@@ -36,7 +36,7 @@ const AuthWrapper = ({ children }) => (
         justifyContent="space-between"
         alignItems="center"
         sx={{
-          minHeight: '90vh'
+          minHeight: '87vh'
         }}
       >
         <Grid item xs={11}>

src/pages/authentication/AuthWrapperCustom.js

@@ -24,7 +24,7 @@ const AuthWrapperCustom = ({ children }) => (
       justifyContent="center"
       alignItems="flex-start"
       sx={{
-        minHeight: '90vh',
+        minHeight: '87vh',
       }}
     >
       {/* <Grid item xs={12} sx={{ ml: 3, mt: 3 }}>

src/pages/authentication/ForgotPassword/AfterForgotPasswordPage.js

@@ -41,7 +41,7 @@ const AfterForgotPasswordPage = () => {
     };
 
     return (
-        <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
+        <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/ForgotPassword/AuthCallback/ResetPasswordSuccess.js

@@ -65,13 +65,13 @@ const ResetPasswordSuccess = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
                 <Grid item xs={12} md={12} width="100%" >
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/ForgotPassword/AuthCallback/index.js

@@ -188,13 +188,13 @@ const Index = () => {
 
     return (
         isLoading || verifyState == null ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
                 <Grid item xs={12} md={12} width="100%" >
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js

@@ -79,7 +79,7 @@ const ForgotPasswordApplyForm = () => {
     });
 
     return (
-        <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
+        <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/ForgotPassword/index.js

@@ -32,7 +32,7 @@ const ApplyForm = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/authentication/ForgotUsername/AfterForgotPasswordPage.js

@@ -41,7 +41,7 @@ const AfterForgotPasswordPage = () => {
     };
 
     return (
-        <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
+        <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/ForgotUsername/AuthCallback/ResetPasswordSuccess.js

@@ -77,13 +77,13 @@ const ResetPasswordSuccess = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
                 <Grid item xs={12} md={12} width="100%" >
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/ForgotUsername/AuthCallback/index.js

@@ -195,13 +195,13 @@ const Index = () => {
 
     return (
         isLoading || verifyState == null ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
                 <Grid item xs={12} md={12} width="100%" >
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js

@@ -81,7 +81,7 @@ const ForgotUsernameApplyForm = () => {
     });
 
     return (
-        <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
+        <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/authentication/ForgotUsername/index.js

@@ -32,7 +32,7 @@ const ApplyForm = () => {
 
     return (
         isLoading ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/authentication/Verify.js

@@ -56,7 +56,7 @@ export default function Verify() {
         <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '65px' }} alignItems="center">
             <AuthWrapper>
                 {isLoading || verifyState == null ?
-                    <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                    <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                         <Grid item>
                             <LoadingComponent />
                         </Grid>

src/pages/authentication/auth-forms/AuthLogin.js

@@ -1,4 +1,6 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {
+  // useContext,
+  useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 
 // material-ui
@@ -34,9 +36,9 @@ import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import axios from "axios";
 import {useDispatch} from "react-redux";
 import {handleLogin} from "auth/index";
-import { notifyActionSuccess } from 'utils/CommonFunction';
+// import { notifyActionSuccess } from 'utils/CommonFunction';
 import {FormattedMessage} from "react-intl";
-import LocaleContext from "../../../components/I18nProvider";
+// import LocaleContext from "../../../components/I18nProvider";
 // ============================|| FIREBASE - LOGIN ||============================ //
 
 const AuthLogin = () => {

src/pages/authentication/auth-forms/AuthLoginCustom.js

@@ -47,6 +47,8 @@ import useJwt from "auth/jwt/useJwt";
 import { handleLogoutFunction } from 'auth/index';
 import {FormattedMessage, useIntl} from "react-intl";
 // import LocaleContext from "components/I18nProvider";
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+
 // ============================|| FIREBASE - LOGIN ||============================ //
 
 const AuthLoginCustom = () => {
@@ -66,6 +68,7 @@ const AuthLoginCustom = () => {
   const [open, setOpen] = React.useState(false);
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   const [errorMassage, setErrorMassage] = useState('');
+  const [onLogin, setOnLogin] = useState(false);
 
   const handleMouseDownPassword = (event) => {
     event.preventDefault();
@@ -74,7 +77,7 @@ const AuthLoginCustom = () => {
   const tryLogin = () => {
     if (isValid) {
       dispatch(handleLogoutFunction());
-      // setSumitting(true)
+      setOnLogin(true)
       useJwt
         .login({ username: values.username, password: values.password })
         .then((response) => {
@@ -114,8 +117,7 @@ const AuthLoginCustom = () => {
         })
         .catch((error) => {
           // setSuccess(false)
-          console.error(error)
-          console.error(error.response.data.error)
+          setOnLogin(false)
           setErrorMassage(error.response.data.error)
           setOpen(true)
         });
@@ -323,20 +325,24 @@ const AuthLoginCustom = () => {
             <Grid container>
               <Grid item xs={12}>
                 <AnimateButton>
-                  <Button disableElevation disabled={isButtonDisabled}
-                    fullWidth size="large" type="submit" variant="contained" color="primary"
-                    sx={{
-                      "&.Mui-disabled": {
-                        background: "#bbdefb",
-                        color: "#fff",
-                        border: "2px solid",
-                        borderColor: "#e7e7e7"
-                      }
-                    }}>
-                    <Typography variant="h5">
-                      <FormattedMessage id="login"/>
-                    </Typography>
-                  </Button>
+                  {onLogin?
+                    <LoadingComponent disableText={true} alignItems="center"/>
+                  :
+                    <Button disableElevation disabled={isButtonDisabled}
+                      fullWidth size="large" type="submit" variant="contained" color="primary"
+                      sx={{
+                        "&.Mui-disabled": {
+                          background: "#bbdefb",
+                          color: "#fff",
+                          border: "2px solid",
+                          borderColor: "#e7e7e7"
+                        }
+                      }}>
+                      <Typography variant="h5">
+                        <FormattedMessage id="login"/>
+                      </Typography>
+                    </Button>
+                  }
                 </AnimateButton>
               </Grid>
               <Grid item xs={12}>

src/pages/dashboard/GLD/index.js

@@ -21,7 +21,7 @@ const DashboardDefault = () => {
     backgroundPosition: 'right'
   }
   return (
-    <Grid container sx={{minHeight: '90vh', backgroundColor: "backgroundColor.default"}} direction="column">
+    <Grid container sx={{minHeight: '87vh', backgroundColor: "backgroundColor.default"}} direction="column">
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row"  height='70px' justifyContent="flex-start" alignItems="center">

src/pages/dashboard/Public/Message.js

@@ -26,7 +26,7 @@ const SearchDemandNoteForm = () => {
     const loadData = () => {
 
         HttpUtils.get({
-            url: UrlUtils.GET_MSG_DESHBOARD,
+            url: UrlUtils.GET_MSG_DASHBOARD,
             onSuccess: function (response) {
                 let list = []
                 response.map((item) => {

src/pages/dashboard/Public/Notice.js

@@ -1,29 +1,67 @@
 // material-ui
 import {
+    Stack,
     Typography,
-    Stack
+    Divider
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as DateUtils from "utils/DateUtils";
+import { useIntl} from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const SearchDemandNoteForm = () => {
 
+    const [itemList, setItemList] = React.useState([]);
+    const [listData, setListData] = React.useState([]);
+    const intl = useIntl();
+    const { locale } = intl;
+
+
+    React.useEffect(() => {
+        loadData();
+    }, []);
+
+    React.useEffect(() => {
+        let list = []
+        if(listData == []) return;
+        listData.map((item) => {
+            list.push(
+                <Stack direction="column"  >
+                    <Typography variant='h4' align="justify"><b>{locale === 'en' ?item.subjectEng:locale === 'zh-HK' ?item.subjectCht:item.subjectChs}</b></Typography>
+                    <Typography align="justify">{DateUtils.dateStr(item.announceDate)}</Typography>
+                    <Typography align="justify"sx={{ pt: 1 }}>{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography>
+                    <Divider fullWidth sx={{ pt: 1 }}></Divider>
+                </Stack>
+            )
+        });
+        setItemList(list);
+    }, [listData,intl]);
+
+    const loadData = () => {
+
+        HttpUtils.get({
+            url: UrlUtils.GET_ANNOUNCE_DASHBOARD,
+            onSuccess: function (response) {
+                setListData(response);
+            }
+        });
+    };
+
+
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
             content={false}
-            spacing={2}
+            sx={{ backgroundColor: '#fff' }}
         >
-            <Stack direction="column" spacing={3}>
-            <Stack direction="row" spacing={3}>
-                <Typography></Typography>
-                <Typography align="justify"></Typography>
+            <Stack direction="column" spacing={4}>
+                {itemList}
             </Stack>
-            </Stack>
-
         </MainCard>
     );
 };

src/pages/dashboard/Public/index.js

@@ -10,7 +10,7 @@ import {
 } from '@mui/material';
 import { isORGLoggedIn, } from "utils/Utils";
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
-import {FormattedMessage, useIntl} from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
 import * as React from "react";
 import Loadable from 'components/Loadable';
@@ -36,7 +36,7 @@ const DashboardDefault = () => {
     backgroundPosition: 'right'
   }
   return (
-    <Grid container sx={{ minHeight: '90vh' }} direction="column">
+    <Grid container sx={{ minHeight: '87vh' }} direction="column">
       <Grid item xs={12} >
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -51,10 +51,10 @@ const DashboardDefault = () => {
         <Grid container justifyContent="center" spacing={2} sx={{ pt: 2 }} alignitems="stretch" >
           <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
             <Button
-                xs={12} onClick={()=>{ navigate("/publicNotice/apply");}}
-                style={{ justifyContent: "flex-start" }}
-                aria-label={intl.formatMessage({id: 'submitApplication'})}
-                sx={{ width: "100%", p: 4, border: '3px solid #e1edfc', borderRadius: '10px', backgroundColor: "#e1edfc" }}
+              xs={12} onClick={() => { navigate("/publicNotice/apply"); }}
+              style={{ justifyContent: "flex-start" }}
+              aria-label={intl.formatMessage({ id: 'submitApplication' })}
+              sx={{ width: "100%", p: 4, border: '3px solid #e1edfc', borderRadius: '10px', backgroundColor: "#e1edfc" }}
             >
               <Stack direction="row" spacing={2}>
                 <AdsClickRoundedIcon />
@@ -73,11 +73,12 @@ const DashboardDefault = () => {
                 <FormattedMessage id="announcement" />
               </Typography>
               <Button
-                  color="gray"
-                  aria-label={intl.formatMessage({id: 'viewAllAnnouncement'})}
+                color="gray"
+                aria-label={intl.formatMessage({ id: 'viewAllAnnouncement' })}
+                onClick={()=>{navigate("/announcement/search")}}
               ><u>
-                <FormattedMessage id="viewAllAnnouncement" />
-              </u></Button>
+                  <FormattedMessage id="viewAllAnnouncement" />
+                </u></Button>
             </Stack>
             <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
               <Notice
@@ -90,11 +91,12 @@ const DashboardDefault = () => {
                 <FormattedMessage id="systemMessage" />
               </Typography>
               <Button
-                  aria-label={intl.formatMessage({id: 'viewAllSystemMessage'})}
-                  onClick={()=>{navigate("/msg/search");}} color="gray"
+                aria-label={intl.formatMessage({ id: 'viewAllSystemMessage' })}
+                onClick={() => { navigate("/msg/search"); }}
+                color="gray"
               ><u>
-                <FormattedMessage id="viewAllSystemMessage" />
-              </u></Button>
+                  <FormattedMessage id="viewAllSystemMessage" />
+                </u></Button>
             </Stack>
             <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
               <Message

src/pages/iAmSmart/AuthCallback/index.js

@@ -81,7 +81,7 @@ const Index = () => {
     }
 
     return (
-        <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+        <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
             <Grid item>
                 <LoadingComponent />
             </Grid>

src/pages/iAmSmart/DirectLoginCallback/index.js

@@ -66,7 +66,7 @@ const Index = () => {
     }
 
     return (
-        <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+        <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
             <Grid item>
                 <LoadingComponent />
             </Grid>

src/pages/iAmSmart/FailCallback/index.js

@@ -24,7 +24,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/iAmSmart/RegistryCallback/index.js

@@ -46,7 +46,7 @@ const Index = () => {
     }
 
     return (
-        <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+        <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
             <Grid item>
                 <LoadingComponent />
             </Grid>

src/pages/iAmSmart/SuccessCallback/index.js

@@ -32,7 +32,7 @@ const Index = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/pnspsUserGroupDetailPage/index.js

@@ -167,7 +167,7 @@ const UserMaintainPage = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>

src/pages/pnspsUserGroupSearchPage/index.js

@@ -73,13 +73,13 @@ const UserGroupSearchPanel = () => {
 
     return (
         !onReady ?
-            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '90vh', backgroundColor: "backgroundColor.default"}} direction="column">
+            <Grid container sx={{ minHeight: '87vh', backgroundColor: "backgroundColor.default"}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/routes/GLDUserRoutes.js

@@ -20,6 +20,13 @@ const DemandNote_Details = Loadable(lazy(() => import('pages/DemandNote/Details'
 const GFMIS_Search = Loadable(lazy(() => import('pages/GFMIS')));
 const UserMaintainPage = Loadable(lazy(() => import('pages/User/GLDUserProfile')));
 const SystemSetting = Loadable(lazy(() => import('pages/Setting/SystemSetting')));
+const AnnouncementDetails = Loadable(lazy(() => import('pages/Announcement/Details')));
+const AnnouncementSearch = Loadable(lazy(() => import('pages/Announcement/Search')));
+const EmailTemplatePage = Loadable(lazy(() => import('pages/EmailTemplate/Search_GLD')));
+const EmailTemplateDetailPage = Loadable(lazy(() => import('pages/EmailTemplate/Detail_GLD')));
+const HolidayPage = Loadable(lazy(() => import('pages/Holiday')));
+const GazetteIssuePage = Loadable(lazy(() => import('pages/GazetteIssue/index')));
+const DrImport = Loadable(lazy(() => import('pages/Setting/DrImport')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -90,6 +97,34 @@ const GLDUserRoutes = {
           path: '/setting/sys',
           element: <SystemSetting />
         },
+        {
+          path: '/setting/announcement',
+          element: <AnnouncementSearch />
+        },
+        {
+          path: '/setting/announcement/details/:id',
+          element: <AnnouncementDetails />
+        },
+        {
+          path: '/setting/emailTemplate',
+          element: <EmailTemplatePage/>
+        },
+        {
+            path: '/setting/emailTemplate/:id',
+            element: <EmailTemplateDetailPage/>
+        },
+        {
+            path: '/setting/holiday',
+            element: <HolidayPage/>
+        },
+        {
+            path: '/setting/gazetteissuepage',
+            element: <GazetteIssuePage/>
+        },
+        {
+          path: '/setting/drImport',
+          element: <DrImport />
+        },
       ]
     },
   ]

src/routes/PublicUserRoutes.js

@@ -28,6 +28,8 @@ const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/User/Det
 const OrganizationDetailPage = Loadable(lazy(() => import('pages/Organization/DetailPage')));
 const Msg_Details = Loadable(lazy(() => import('pages/Message/Details')));
 const Msg_Search = Loadable(lazy(() => import('pages/Message/Search')));
+const AnnouncementSearch = Loadable(lazy(() => import('pages/Announcement/Search_Public')));
+
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -130,6 +132,10 @@ const PublicDashboard = {
           path: '/msg/search',
           element: <Msg_Search />
         },
+        {
+          path: '/announcement/search',
+          element: <AnnouncementSearch />
+        },
       ]
     },
   ]

src/routes/SettingRoutes.js

@@ -20,8 +20,6 @@ const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDeta
 const OrganizationSearchPage = Loadable(lazy(() => import('pages/Organization/SearchPage')));
 const OrganizationDetailPage = Loadable(lazy(() => import('pages/Organization/DetailPage')));
 const OrganizationDetailPage_fromUser = Loadable(lazy(() => import('pages/Organization/DetailPage_FromUser')));
-const EmailTemplatePage = Loadable(lazy(() => import('pages/EmailTemplate/Search_GLD')));
-const EmailTemplateDetailPage = Loadable(lazy(() => import('pages/EmailTemplate/Detail_GLD')));
 
 
 // ==============================|| AUTH ROUTING ||============================== //
@@ -82,14 +80,7 @@ const SettingRoutes = {
             path: 'passwordpolicy',
             element: <PasswordPolicyPage />
         },
-        {
-            path: 'emailTemplate',
-            element: <EmailTemplatePage/>
-        },
-        {
-            path: '/emailTemplate/:id',
-            element: <EmailTemplateDetailPage/>
-        },
+       
     ]
 };