update public search criteria save

src/auth/utils.js

@@ -140,6 +140,8 @@ export const getSearchCriteria = (path) =>{
     searchCriteria = JSON.parse(localStorage.getItem("searchCriteria"))
     if (searchCriteria.path === path){
       return searchCriteria.data
+    } else {
+      return ""
     }
   }
 }

src/pages/Announcement/Search_Public/SearchForm.js

@@ -39,6 +39,22 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
         setToDateValue(maxDate);
     }, [maxDate]);
 
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
     const marginBottom = 2.5;
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
@@ -61,6 +77,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
         reset();
+        localStorage.setItem('searchCriteria',"")
     }
 
 
@@ -68,7 +85,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
         <MainCard xs={12} md={12} lg={12}
             border={false}
             content={false}
-            sx={{ backgroundColor: '#fff' }}
+            sx={_sx}
         >
 
             <form onSubmit={handleSubmit(onSubmit)}>
@@ -187,6 +204,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                     variant="contained"
                                     type="submit"
                                     disabled={onGridReady}
+                                    aria-label={intl.formatMessage({id: 'submit'})}
                                 >
                                     <FormattedMessage id="submit"></FormattedMessage>
                                 </Button>

src/pages/Announcement/Search_Public/index.js

@@ -14,6 +14,7 @@ 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";
+import { getSearchCriteria } from "auth/utils";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -29,21 +30,32 @@ const BackgroundHead = {
 
 const UserSearchPage_Individual = () => {
 
-    const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateValue(new Date()),
-        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 90)),
-    });
+    const [searchCriteria, setSearchCriteria] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
     const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
-        setOnReady(true);
+        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)),
+            })
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if(Object.keys(searchCriteria).length>0){
+            setOnReady(true);
+        }
     }, [searchCriteria]);
 
 
     function applySearch(input) {
-        setGridOnReady(true)
         setSearchCriteria(input);
+        localStorage.setItem('searchCriteria', JSON.stringify({path:window.location.pathname,data:input}))
     }
 
     function applyGridOnReady(input) {

src/pages/Message/Search/DataGrid.js

@@ -5,13 +5,21 @@ import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 import {useIntl} from "react-intl";
 import { clickableLink } from 'utils/CommonFunction';
+import {GET_MSG_LIST} from "utils/ApiPathConst";
+
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function MsgTable({ recordList }) {
-    const [rows, setRows] = React.useState(recordList);
+export default function MsgTable({ searchCriteria, applyGridOnReady }) {
+    
     const navigate = useNavigate()
     const intl = useIntl();
 
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
+    
+    React.useEffect(() => {
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
+
     const _sx = {
         padding: "4 2 4 2",
         boxShadow: 1,
@@ -25,25 +33,24 @@ export default function MsgTable({ recordList }) {
         '& .MuiDataGrid-footerContainer': {
             border: 1,
             borderColor: "#EEE"
-        }
+        },
+        "& .MuiDataGrid-columnHeaderTitle": {
+            whiteSpace: "normal",
+            lineHeight: "normal"
+        },
+        "& .MuiDataGrid-columnHeader": {
+            // Forced to use important since overriding inline styles
+            height: "unset !important"
+        },
     }
-
-    React.useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
-
-    const handleEditClick = (params) => () => {
-        navigate('/msg/details/' + params.row.id);
-    };
-
     const columns = [
         {
             id: 'sentDate',
             field: 'sentDate',
             headerName: intl.formatMessage({id: 'date'}),
             width: 170,
-            renderCell: (params) => {
-                return DateUtils.datetimeStr(params.row.sentDate);
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
             },
         },
         {
@@ -57,16 +64,24 @@ export default function MsgTable({ recordList }) {
         },
     ];
 
+    function handleEditClick(params) {
+        navigate('/msg/details/' + params.row.id);
+    }
+
     return (
-        <div style={{ minHeight: 400, width: '100%' }}>
+        <div style={{  width: '100%', overflowX: 'auto'}}>
 
             <FiDataGrid
                 sx={_sx}
-                rowHeight={80}
-                rows={rows}
                 columns={columns}
-                customPageSize={20}
+                customPageSize={10}
+                getRowHeight={() => 'auto'}
                 onRowDoubleClick={handleEditClick}
+                applyGridOnReady={applyGridOnReady}
+                doLoad={React.useMemo(() => ({
+                    url: GET_MSG_LIST,
+                    params: _searchCriteria,
+                }), [_searchCriteria])}
             />
         </div>
     );

src/pages/Message/Search/SearchForm.js

@@ -21,7 +21,7 @@ import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchForm = ({ applySearch, searchCriteria }) => {
+const SearchForm = ({ applySearch, searchCriteria, onGridReady }) => {
     const intl = useIntl();
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
@@ -64,7 +64,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
             sentDateTo = DateUtils.dateValue(toDateValue)
         }
         const temp = {
-            keywork: data.keywork,
+            keyword: data.keyword,
             dateFrom: sentDateFrom,
             dateTo: sentDateTo,
         };
@@ -75,6 +75,8 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
         reset();
+        localStorage.setItem('searchCriteria',"")
+
     }
 
 
@@ -196,6 +198,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                         <Button
                             variant="contained"
                             type="submit"
+                            disabled={onGridReady}
                             aria-label={intl.formatMessage({id: 'submit'})}
                         >
                             <FormattedMessage id="submit"/>

src/pages/Message/Search/index.js

@@ -5,9 +5,9 @@ import {
     Stack
 } from '@mui/material';
 import MainCard from "components/MainCard";
-import * as UrlUtils from "utils/ApiPathConst";
+// import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
-import * as HttpUtils from "utils/HttpUtils";
+// import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
 
 import Loadable from 'components/Loadable';
@@ -16,6 +16,7 @@ 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";
+import { getSearchCriteria } from "auth/utils";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -31,41 +32,58 @@ const BackgroundHead = {
 
 const Index = () => {
 
-    const [record,setRecord] = React.useState([]);
-    const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateValue(new Date()),
-        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
-    });
+    const [searchCriteria, setSearchCriteria] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
-        setOnReady(true);
-    }, [record]);
+        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)),
+            })
+        }
+    }, []);
 
     React.useEffect(() => {
-        loadGrid();
+        if(Object.keys(searchCriteria).length>0){
+            setOnReady(true);
+        }
     }, [searchCriteria]);
 
-    function loadGrid(){
-        HttpUtils.get({
-            url: UrlUtils.GET_MSG_LIST,
-            params: searchCriteria,
-            onSuccess: function(responseData){
-                setRecord(responseData);
-            }
-        });
-    }
+    // function loadGrid(){
+    //     HttpUtils.get({
+    //         url: UrlUtils.GET_MSG_LIST,
+    //         params: searchCriteria,
+    //         onSuccess: function(responseData){
+    //             setRecord(responseData);
+    //         }
+    //     });
+    // }
 
 
     function applySearch(input) {
+        setGridOnReady(true)
         setSearchCriteria(input);
+        localStorage.setItem('searchCriteria', JSON.stringify({path:window.location.pathname,data:input}))
+    }
+
+    function applyGridOnReady(input) {
+        setGridOnReady(input);
     }
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
             :
-            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+            <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">
@@ -78,8 +96,9 @@ const Index = () => {
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12}>
                     <SearchForm 
-                    applySearch={applySearch}
-                    searchCriteria={searchCriteria}
+                        applySearch={applySearch}
+                        searchCriteria={searchCriteria}
+                        onGridReady={onGridReady}
                     />
                 </Grid>
                 {/*row 2*/}
@@ -90,7 +109,9 @@ const Index = () => {
                             sx={{width: "-webkit-fill-available"}}
                     >
                         <EventTable
-                            recordList={record}
+                            // recordList={record}
+                            searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
                         />
                     </MainCard>
                 </Grid>

src/pages/Payment/Search_Public/SearchForm.js

@@ -25,7 +25,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
     const intl = useIntl();
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
-    const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
+    const [status, setStatus] = React.useState(searchCriteria.status!=undefined?ComboData.paymentStatus.find(item => item.type === searchCriteria.status):ComboData.paymentStatus[0]);
 
     const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
     const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
@@ -79,6 +79,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
         reset();
+        localStorage.setItem('searchCriteria',"")
     }
 
 

src/pages/Payment/Search_Public/index.js

@@ -14,6 +14,7 @@ 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";
+import { getSearchCriteria } from "auth/utils";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -36,12 +37,27 @@ const Index = () => {
     const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
-        setOnReady(true);
+        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)),
+            })
+        }
+    }, []);
+    
+    React.useEffect(() => {
+        if(Object.keys(searchCriteria).length>0){
+            setOnReady(true);
+        }
     }, [searchCriteria]);
 
     function applySearch(input) {
         setGridOnReady(true)
         setSearchCriteria(input);
+        localStorage.setItem('searchCriteria', JSON.stringify({path:window.location.pathname,data:input}))
     }
 
     function applyGridOnReady(input) {

src/pages/Proof/Search_GLD/SearchForm.js

@@ -26,9 +26,9 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
     const [type, setType] = React.useState([]);
     const [status, setStatus] = React.useState(searchCriteria.statusKey!=undefined?ComboData.proofStatus_GLD[searchCriteria.statusKey]:ComboData.proofStatus_GLD[0]);
-    const [orgSelected, setOrgSelected] = React.useState(searchCriteria.orgId!=undefined?orgComboData && orgComboData.length > 0?orgComboData.find(item => item.key === searchCriteria.orgId):{}:{});
+    const [orgSelected, setOrgSelected] = React.useState({});
     const [orgCombo, setOrgCombo] = React.useState();
-    const [issueSelected, setIssueSelected] = React.useState(searchCriteria.issueId!=undefined?issueComboData && issueComboData.length > 0?issueComboData.find(item => item.id === searchCriteria.issueId):{}:{});
+    const [issueSelected, setIssueSelected] = React.useState({});
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [groupSelected, setGroupSelected] = React.useState(searchCriteria.gazettGroup!=undefined?ComboData.groupTitle.find(item => item.code === searchCriteria.gazettGroup):{});
 
@@ -106,12 +106,18 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     React.useEffect(() => {
         if (orgComboData && orgComboData.length > 0) {
             setOrgCombo(orgComboData);
+            if(searchCriteria.orgId!=undefined){
+                setOrgSelected(orgComboData.find(item => item.key === searchCriteria.orgId))
+            }
         }
     }, [orgComboData]);
 
     React.useEffect(() => {
         if (issueComboData && issueComboData.length > 0) {
             setIssueCombo(issueComboData);
+            if(searchCriteria.issueId!=undefined){
+                setIssueSelected(issueComboData.find(item => item.id === searchCriteria.issueId))
+            }
         }
     }, [issueComboData]);
 

src/pages/Proof/Search_Public/SearchForm.js

@@ -28,10 +28,10 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
     const { locale } = intl;
     
     const [type, setType] = React.useState([]);
-    const [status, setStatus] = React.useState(ComboData.proofStatus[0]);
+    const [status, setStatus] = React.useState(searchCriteria.statusKey!=undefined?ComboData.proofStatusFull[searchCriteria.statusKey]:ComboData.proofStatusFull[0]);
     const [issueSelected, setIssueSelected] = React.useState({});
     const [issueCombo, setIssueCombo] = React.useState([]);
-    const [groupSelected, setGroupSelected] = React.useState({});
+    const [groupSelected, setGroupSelected] = React.useState(searchCriteria.gazettGroup!=undefined?ComboData.groupTitle.find(item => item.code === searchCriteria.gazettGroup):{});
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
@@ -84,6 +84,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
             gazettGroup: groupSelected?.type,
             dateFrom: sentDateFrom,
             dateTo: sentDateTo,
+            statusKey:status?.key,
         };
         if(status?.type && status?.type != 'all'){
             if (status?.type == "Confirmed"){
@@ -108,6 +109,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
     React.useEffect(() => {
         if (issueComboData && issueComboData.length > 0) {
             setIssueCombo(issueComboData);
+            if(searchCriteria.issueId!=undefined){
+                setIssueSelected(issueComboData.find(item => item.id === searchCriteria.issueId))
+            }
         }
     }, [issueComboData]);
 
@@ -119,6 +123,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
         reset();
+        localStorage.setItem('searchCriteria',"")
     }
 
     function getIssueLabel(data) {

src/pages/Proof/Search_Public/index.js

@@ -9,6 +9,7 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
+import { getSearchCriteria } from "auth/utils";
 
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
@@ -41,6 +42,11 @@ const UserSearchPage_Individual = () => {
 
     React.useEffect(() => {
         getIssueCombo();
+        if (Object.keys(getSearchCriteria(window.location.pathname)).length>0){
+            setSearchCriteria(getSearchCriteria(window.location.pathname))
+        }else{
+            localStorage.setItem('searchCriteria',"")
+        }
     }, []);
 
     React.useEffect(() => {
@@ -62,6 +68,7 @@ const UserSearchPage_Individual = () => {
     function applySearch(input) {
         setGridOnReady(true)
         setSearchCriteria(input);
+        localStorage.setItem('searchCriteria', JSON.stringify({path:window.location.pathname,data:input}))
     }
 
     function applyGridOnReady(input) {

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -38,6 +38,22 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const { reset, register, handleSubmit } = useForm()
     const marginBottom = 2.5;
 
+    React.useEffect(() => {
+        if(searchCriteria.status!=undefined){
+            if(localStorage.getItem('userData').creditor){
+                setStatus(ComboData.publicNoticeStatic_Creditor.find(item => item.type === searchCriteria.status))
+            }else{
+                setStatus(ComboData.publicNoticeStatic.find(item => item.type === searchCriteria.status))
+            }
+        }else{
+            if(localStorage.getItem('userData').creditor){
+                setStatus(ComboData.publicNoticeStatic_Creditor[0])
+            }else{
+                setStatus(ComboData.publicNoticeStatic[0])
+            }
+        }
+    }, [searchCriteria]);
+
     React.useEffect(() => {
         setFromDateValue(minDate);
     }, [minDate]);

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js

@@ -5,50 +5,76 @@ import {
 import MainCard from "components/MainCard";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
+import { getSearchCriteria } from "auth/utils";
 
 import Loadable from 'components/Loadable';
 const SearchForm = Loadable(React.lazy(() => import('./SearchPublicNoticeForm')));
 const EventTable = Loadable(React.lazy(() => import('./SearchPublicNoticeTable')));
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Individual = () => {
 
-    const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateValue(new Date()),
-        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
-    });
+    const [searchCriteria, setSearchCriteria] = React.useState({});
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        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)),
+            })
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if(Object.keys(searchCriteria).length>0){
+            setOnReady(true);
+        }
+    }, [searchCriteria]);
 
     function applySearch(input) {
         setSearchCriteria(input);
+        localStorage.setItem('searchCriteria', JSON.stringify({path:window.location.pathname,data:input}))
     }
 
     return (
-        <Grid container sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-            {/*row 1*/}
-            <Grid item xs={12} md={12} lg={12} sx={{mb:-3}}>
-                <SearchForm 
-                applySearch={applySearch}
-                searchCriteria={searchCriteria}
-                />
-            </Grid>
-            {/*row 2*/}
-            <Grid item xs={12} md={12} lg={12} >
-                <MainCard elevation={0}
-                          border={false}
-                          content={false}
-                          sx={{width: "-webkit-fill-available",height: "100%", minHeight:'100%'}}
-                >
-                    <div style={{height: '100%', width: '100%' }}>
-                        <EventTable
-                            autoHeight
-                            searchCriteria={searchCriteria}
-                        />
-                    </div>
-                </MainCard>
+         !onReady ?
+            <Grid container sx={{ height: '100%' }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
             </Grid>
+            :
+            <Grid container sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-3}}>
+                    <SearchForm 
+                    applySearch={applySearch}
+                    searchCriteria={searchCriteria}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12} >
+                    <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                            sx={{width: "-webkit-fill-available",height: "100%", minHeight:'100%'}}
+                    >
+                        <div style={{height: '100%', width: '100%' }}>
+                            <EventTable
+                                autoHeight
+                                searchCriteria={searchCriteria}
+                            />
+                        </div>
+                    </MainCard>
+                </Grid>
 
-        </Grid>
+            </Grid>
 
     );
 };