add report pages

src/layout/MainLayout/Header/index.js

@@ -265,13 +265,24 @@ function Header(props) {
                 <></>
             }
             <li>
-              <Link className="report" to='/setting/report'>
-                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} >
-                  Report
-                </Typography>
-              </Link>
+              <Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Report</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
+              <ul className='dropdown'>
+                <li>
+                  <Link className="report" to='/setting/report/summary'>
+                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} >
+                      Summary of Gazette Notice
+                    </Typography>
+                  </Link>
+                </li>
+                <li>
+                  <Link className="report" to='/setting/report/fullList'>
+                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} >
+                      Gazette Notice Full List
+                    </Typography>
+                  </Link>
+                </li>
+              </ul>
             </li>
-
             <li>
               <Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
               <ul className='dropdown'>

src/pages/Report/FullListForm.js → src/pages/Report/FullList/FullListForm.js

@@ -10,7 +10,7 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
 import {ThemeProvider} from "@emotion/react";
-import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import * as FormatUtils from "utils/FormatUtils";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";

src/pages/Report/index.js → src/pages/Report/FullList/index.js

@@ -14,7 +14,6 @@ import * as UrlUtils from "utils/ApiPathConst";
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 const FullListForm = Loadable(React.lazy(() => import('./FullListForm')));
-const SummaryForm = Loadable(React.lazy(() => import('./SummaryForm')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
 const BackgroundHead = {
@@ -75,30 +74,17 @@ const ReportSearchPage = () => {
                 <Grid item xs={12} mb={2}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Report</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Gazette Notice Full List</Typography>
                         </Stack>
                     </div>
                 </Grid>
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12} sx={{mb: 2}}>
-                    <Typography variant="pnspsFormHeader" ml={2}>
-                        Gazette Notice Full List
-                    </Typography>
-                    
                     <FullListForm
                         searchCriteria={searchCriteria}
                         issueComboData={issueCombo}
                     />
                 </Grid>
-                <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
-                    <Typography variant="pnspsFormHeader" ml={2}>
-                        Summary of Gazette Notice
-                    </Typography>
-                    <SummaryForm
-                        searchCriteria={searchCriteria}
-                        issueComboData={issueCombo}
-                    />
-                </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
                     <MainCard elevation={0}

src/pages/Report/SummaryForm.js → src/pages/Report/Summary/SummaryForm.js

@@ -11,7 +11,7 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
 import {ThemeProvider} from "@emotion/react";
-import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as FormatUtils from "utils/FormatUtils";

src/pages/Report/Summary/index.js

@@ -0,0 +1,100 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as React from "react";
+import * as DateUtils from "utils/DateUtils";
+import { getSearchCriteria } from "auth/utils";
+import * as HttpUtils from "utils/HttpUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const SummaryForm = Loadable(React.lazy(() => import('./SummaryForm')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const ReportSearchPage = () => {
+
+    const [searchCriteria, setSearchCriteria] = React.useState({});
+    const [onReady, setOnReady] = React.useState(false);
+    const [issueCombo, setIssueCombo] = React.useState([]);
+
+    React.useEffect(() => {
+        getIssueCombo();
+        if (Object.keys(getSearchCriteria(window.location.pathname)).length>0){
+            setSearchCriteria(getSearchCriteria(window.location.pathname))
+        }else{
+            localStorage.setItem('searchCriteria',"")
+            setSearchCriteria({
+                dateTo: DateUtils.dateValue(new Date()),
+                dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
+            })
+        }
+    }, []);
+
+    function getIssueCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ISSUE_COMBO,
+            onSuccess: function (responseData) {
+                let combo = responseData;
+                setIssueCombo(combo);
+            }
+        });
+    }
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [searchCriteria]);
+
+
+    return (
+        !onReady ?
+            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
+            :
+            <Grid container sx={{ minHeight: '95vh',backgroundColor: 'backgroundColor.default' }} direction="column">
+                <Grid item xs={12} mb={2}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Summary of Gazette Notice</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/} 
+                <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
+                    <SummaryForm
+                        searchCriteria={searchCriteria}
+                        issueComboData={issueCombo}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                        sx={{ backgroundColor: '#fff' }}
+                    >
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+}
+export default ReportSearchPage;

src/routes/GLDUserRoutes.js

@@ -34,7 +34,8 @@ const AuditLogPage = Loadable(lazy(() => import('pages/AuditLog/index')));
 const ReconReportPage = Loadable(lazy(() => import('pages/Recon')));
 const ChangePasswordPage = Loadable(lazy(() => import('pages/User/ChangePasswordPage')));
 const JVMDefault = Loadable(lazy(() => import('pages/JVM')));
-const ReportPage = Loadable(lazy(() => import('pages/Report')));
+const FullListReportPage = Loadable(lazy(() => import('pages/Report/FullList')));
+const SummaryReportPage = Loadable(lazy(() => import('pages/Report/Summary')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -205,8 +206,12 @@ const GLDUserRoutes = {
           element: <ChangePasswordPage />
         },
         {
-            path: '/setting/report',
-            element: <ReportPage />
+            path: '/setting/report/fullList',
+            element: <FullListReportPage />
+        },
+        {
+            path: '/setting/report/summary',
+            element: <SummaryReportPage/>
         },
       ]
     }