update date update

src/pages/AuditLog/AuditLogSearchForm.js

@@ -24,26 +24,106 @@ import * as HttpUtils from "utils/HttpUtils";
 import Loadable from 'components/Loadable';
 
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+import { makeStyles } from '@mui/styles';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-
+const useStyles = makeStyles(() => ({
+    root: {
+        position: "relative"
+    },
+    display: {
+        position: "absolute",
+        top: 2,
+        left: 12,
+        bottom: 2,
+        background: "white",
+        pointerEvents: "none",
+        right: 50,
+        display: "flex",
+        alignItems: "center",
+        width:"70%"
+    },
+}));
 
 const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
     // const navigate = useNavigate();
 
-    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
-    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+    const [minDate, setMinDate] = React.useState(searchCriteria.modifiedFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.modifiedTo);
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
     const [onDownload, setOnDownload] = React.useState(false);
     
     const marginBottom = 2.5;
 
     const { reset, register, handleSubmit } = useForm()
+
+    React.useEffect(() => {
+        setFromDateValue(minDate);
+    }, [minDate]);
+
+    React.useEffect(() => {
+        setToDateValue(maxDate);
+    }, [maxDate]);
+
+    function FormDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(fromDateValue) == "Invalid Date" ?
+                        fromDateValue
+                        :
+                        DateUtils.dateStr(fromDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={fromDateValue}
+                    max={maxDate}
+                />
+            </>
+        );
+    }
+
+    function ToDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        // console.log(minDate)
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(toDateValue) == "Invalid Date" ?
+                        toDateValue
+                        :
+                        DateUtils.dateStr(toDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={toDateValue}
+                    min={minDate}
+                />
+            </>
+        );
+    }
+
     const onSubmit = (data) => {
+        let sentDateFrom = "";
+        let sentDateTo = "";
+
+        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+            sentDateTo = DateUtils.dateValue(toDateValue)
+        }
 
         const temp = {
             username: data.userName,
-            modifiedTo: data.modifiedTo,
-            modifiedFrom: data.modifiedFrom,
+            modifiedTo: sentDateTo,
+            modifiedFrom: sentDateFrom,
         };
         applySearch(temp);
     };
@@ -105,13 +185,16 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                                     type="date"
                                     label="Modified From"
                                     defaultValue={searchCriteria.modifiedFrom}
-                                    InputProps={{ inputProps: { max: maxDate } }}
+                                    InputProps={{
+                                        inputComponent: FormDateInputComponent,
+                                    }}
                                     onChange={(newValue) => {
-                                        setMinDate(DateUtils.dateValue(newValue));
+                                        setMinDate(newValue.target.value);
                                     }}
                                     InputLabelProps={{
                                         shrink: true
                                     }}
+                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                 />
                             </Grid>
 
@@ -126,15 +209,17 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                                         shrink: true
                                     }}
                                     {...register("modifiedTo")}
-                                    InputProps={{ inputProps: { min: minDate } }}
+                                    InputProps={{
+                                        inputComponent: ToDateInputComponent,
+                                    }}
                                     onChange={(newValue) => {
-                                        console.log(newValue)
-                                        setMaxDate(DateUtils.dateValue(newValue));
+                                        setMaxDate(newValue.target.value);
                                     }}
                                     id="modifiedTo"
                                     type="date"
                                     label="Modified To"
                                     defaultValue={searchCriteria.modifiedTo}
+                                    sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                 />
                             </Grid>
                         </Grid>

src/pages/DemandNote/Search/SearchForm.js

@@ -98,6 +98,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
     function ToDateInputComponent({ inputRef, ...props }) {
         const classes = useStyles();
+        console.log(minDate)
         return (
             <>
                 <div className={classes.display}>
@@ -179,6 +180,9 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
         if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
             sentDateFrom = DateUtils.dateValue(fromDateValue)
             sentDateTo = DateUtils.dateValue(toDateValue)
+        }
+
+        if (fromDueDateValue != "dd / mm / yyyy" && toDueDateValue != "dd / mm / yyyy") {
             sentDueDateFrom = DateUtils.dateValue(fromDueDateValue)
             sentDueDateTo = DateUtils.dateValue(toDueDateValue)
         }

src/pages/EmailTemplate/Search_GLD/index.js

@@ -62,7 +62,7 @@ const Index = () => {
             </Grid>
             :
             (
-                <Grid container sx={{ backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <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'>

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -22,9 +22,26 @@ import { notifySaveSuccess } from 'utils/CommonFunction';
 import { useIntl } from "react-intl";
 import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
+import { makeStyles } from '@mui/styles';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-
+const useStyles = makeStyles(() => ({
+    root: {
+        position: "relative"
+    },
+    display: {
+        position: "absolute",
+        top: 2,
+        left: 12,
+        bottom: 2,
+        background: "white",
+        pointerEvents: "none",
+        right: 50,
+        display: "flex",
+        alignItems: "center",
+        width:"70%"
+    },
+}));
 
 const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
     const intl = useIntl();
@@ -36,15 +53,45 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
     const [createMode, setCreateMode] = useState(false);
     const [onReady, setOnReady] = useState(false);
     const [errorMsg, setErrorMsg] = useState("");
+    const [minDate] = React.useState(new Date());
+    const [fromDate, setFromDate] = React.useState("dd / mm / yyyy");
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+
+    React.useEffect(() => {
+        setFromDateValue(fromDate);
+    }, [fromDate]);
 
     useEffect(() => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
+            setFromDate(currentUserData.brExpiryDate)
             setOnReady(true);
         }
     }, [currentUserData]);
 
+    function FormDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(fromDateValue) == "Invalid Date" ?
+                        fromDateValue
+                        :
+                        DateUtils.dateStr(fromDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={fromDateValue}
+                    min={minDate}
+                />
+            </>
+        );
+    }
+
     function displayErrorMsg(errorMsg) {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
@@ -90,6 +137,11 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 if (values.country.type == "hongKong" && values.district == null) {
                     setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
                 } else {
+                    let sentDateFrom = "";
+                    if (fromDateValue != "dd / mm / yyyy") {
+                        sentDateFrom = DateUtils.dateValue(fromDateValue)
+                    }
+
                     HttpUtils.post({
                         url: UrlUtils.POST_ORG_SAVE_PATH,
                         params: {
@@ -97,7 +149,8 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             enCompanyName: values.enCompanyName,
                             chCompanyName: values.chCompanyName,
                             brNo: values.brNo,
-                            brExpiryDate: values.brExpiryDate,
+                            // brExpiryDate: values.brExpiryDate,
+                            brExpiryDate: sentDateFrom,
                             enCompanyNameTemp: values.enCompanyNameTemp,
                             chCompanyNameTemp: values.chCompanyNameTemp,
                             brExpiryDateTemp: values.brExpiryDateTemp,
@@ -340,17 +393,26 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                     <TextField
                                         fullWidth
                                         id="brExpiryDate"
-                                        name="brExpiryDate"
                                         type="date"
-                                        inputProps={{ min: DateUtils.dateValue(new Date()) }}
+                                        name="brExpiryDate"
                                         error={Boolean(formik.errors["brExpiryDate"])}
                                         helperText={formik.errors["brExpiryDate"] ? formik.errors["brExpiryDate"] : ''}
-                                        onChange={formik.handleChange}
-                                        value={formik.values["brExpiryDate"]}
-                                        disabled={(!editMode && !createMode)}
-                                        sx={{
-                                            width:'100%'
+                                        defaultValue={fromDate}
+                                        InputProps={{
+                                            inputComponent: FormDateInputComponent,
                                         }}
+                                        onChange={(newValue) => {
+                                            if (newValue.target.value>DateUtils.dateValue(minDate)){
+                                                setFromDate(newValue.target.value);
+                                            }else{
+                                                alert("Please select a date after today.")
+                                            }
+                                        }}
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                        disabled={(!editMode && !createMode)}
+                                        sx={{ "& .MuiInputBase-input": {display:"block"} }}
                                     />
                                 </Grid>
                             </Grid>

src/pages/Organization/DetailPage/OrganizationPubCard.js

@@ -253,7 +253,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                         </Grid>
 
                         <Grid item xs={12} lg={4} >
-                            {FieldUtils.getDateField({
+                            {FieldUtils.getTextField({
                                 label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'expiryDate'}) + ":"),
                                 valueName: "brExpiryDate",
                                 disabled: true,

src/pages/Organization/DetailPage/index.js

@@ -109,7 +109,7 @@ const OrganizationDetailPage = () => {
                     response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                     response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
 
-                    response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateValue(response.data.brExpiryDate) : "";
+                    response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
                     setFormData(response.data)
                     setList(response.historyList)
                 }

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -32,7 +32,8 @@ const useStyles = makeStyles(() => ({
         pointerEvents: "none",
         right: 50,
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        width:"70%"
     },
 }));
 
@@ -183,6 +184,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             InputLabelProps={{
                                 shrink: true
                             }}
+                            sx={{ "& .MuiInputBase-input": {display:"block"} }}
                         />
                     </Grid>
 
@@ -205,6 +207,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             onChange={(newValue) => {
                                 setMaxDate(newValue.target.value);
                             }}
+                            sx={{ "& .MuiInputBase-input": {display:"block"} }}
                         />
                     </Grid>
                     {isORGLoggedIn()?

src/pages/Recon/SearchForm.js

@@ -36,7 +36,7 @@ const useStyles = makeStyles(() => ({
     },
 }));
 
-const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, onDownload, onView }) => {
+const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, onLoad }) => {
 
     const [sysTxnMinDate, setSysTxnMinDate] = React.useState(searchCriteria.dateFrom);
     const [sysTxnMaxDate, setsysTxnMaxDate] = React.useState(searchCriteria.dateTo);
@@ -56,7 +56,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
     const [method, setMethod] = React.useState(ComboData.paymentMethod[0]);
     const marginBottom = 2.5;
 
-    const { register, handleSubmit, getValues } = useForm()
+    const { register, handleSubmit } = useForm()
 
     React.useEffect(() => {
         setSysTxnFromDateValue(sysTxnMinDate);
@@ -223,11 +223,15 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
         let sentCollDateFrom = "";
         let sentCollDateTo = "";
 
-        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+        if (sysTxnFromDateValue != "dd / mm / yyyy" && sysTxnToDateValue != "dd / mm / yyyy") {
             sentSysTxnDateFrom = DateUtils.dateValue(sysTxnFromDateValue)
             sentSysTxnDateTo = DateUtils.dateValue(sysTxnToDateValue)
+        }
+        if (txnFromDateValue != "dd / mm / yyyy" && txnToDateValue != "dd / mm / yyyy") {
             sentTxnDateFrom = DateUtils.dateValue(txnFromDateValue)
             sentTxnDateTo = DateUtils.dateValue(txnToDateValue)
+        }
+        if (collFromDateValue != "dd / mm / yyyy" && collToDateValue != "dd / mm / yyyy") {
             sentCollDateFrom = DateUtils.dateValue(collFromDateValue)
             sentCollDateTo = DateUtils.dateValue(collToDateValue)
         }
@@ -245,51 +249,41 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
         applySearch(temp);
     };
 
-    const generatePDFHandler = () => {
-        const sysTxnDateFrom = getValues("sysTxnDateFrom")
-        const sysTxnDateTo = getValues("sysTxnDateTo")
-        const txnDateFrom = getValues("txnDateFrom")
-        const txnDateTo = getValues("txnDateTo")
-        const collDateFrom = getValues("collDateFrom")
-        const collDateTo = getValues("collDateTo")
-
-        const temp = {
-            PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "",
-            PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "",
-            SysTxnDateFrom:sysTxnDateFrom,
-            SysTxnDateTo:sysTxnDateTo,
-            TxnDateFrom:txnDateFrom,
-            TxnDateTo:txnDateTo,
-            CollDateFrom:collDateFrom,
-            CollDateTo:collDateTo,
-            ReportFormat:"pdf"
-        };
-        generateReport(temp);
-    }
+    const generateFileHandler = (fileFormart) => () => {
+        let sentSysTxnDateFrom = "";
+        let sentSysTxnDateTo = "";
+        let sentTxnDateFrom = "";
+        let sentTxnDateTo = "";
+        let sentCollDateFrom = "";
+        let sentCollDateTo = "";
 
-    const generateCSVHandler = () => {
-        const sysTxnDateFrom = getValues("sysTxnDateFrom")
-        const sysTxnDateTo = getValues("sysTxnDateTo")
-        const txnDateFrom = getValues("txnDateFrom")
-        const txnDateTo = getValues("txnDateTo")
-        const collDateFrom = getValues("collDateFrom")
-        const collDateTo = getValues("collDateTo")
+        if (sysTxnFromDateValue != "dd / mm / yyyy" && sysTxnToDateValue != "dd / mm / yyyy") {
+            sentSysTxnDateFrom = DateUtils.dateValue(sysTxnFromDateValue)
+            sentSysTxnDateTo = DateUtils.dateValue(sysTxnToDateValue)
+        }
+        if (txnFromDateValue != "dd / mm / yyyy" && txnToDateValue != "dd / mm / yyyy") {
+            sentTxnDateFrom = DateUtils.dateValue(txnFromDateValue)
+            sentTxnDateTo = DateUtils.dateValue(txnToDateValue)
+        }
+        if (collFromDateValue != "dd / mm / yyyy" && collToDateValue != "dd / mm / yyyy") {
+            sentCollDateFrom = DateUtils.dateValue(collFromDateValue)
+            sentCollDateTo = DateUtils.dateValue(collToDateValue)
+        }
 
         const temp = {
             PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "",
             PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "",
-            SysTxnDateFrom:sysTxnDateFrom,
-            SysTxnDateTo:sysTxnDateTo,
-            TxnDateFrom:txnDateFrom,
-            TxnDateTo:txnDateTo,
-            CollDateFrom:collDateFrom,
-            CollDateTo:collDateTo,
-            ReportFormat:"csv"
+            SysTxnDateFrom: sentSysTxnDateFrom,
+            SysTxnDateTo: sentSysTxnDateTo,
+            TxnDateFrom: sentTxnDateFrom,
+            TxnDateTo: sentTxnDateTo,
+            CollDateFrom: sentCollDateFrom,
+            CollDateTo: sentCollDateTo,
+            ReportFormat:fileFormart
         };
         generateReport(temp);
     }
 
-
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
@@ -510,29 +504,27 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                     </Grid>
 
                     <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
-                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                            <Grid item sx={{ ml: 3, mb: 3, }} >
-                                {onView?
-                                    <LoadingComponent disableText={true} alignItems="flex-start"/>
-                                    :
-                                    <Button
-                                        variant="contained"
-                                        type="submit"
-                                    >
-                                        View
-                                    </Button>
-                                }
+                        {onLoad?
+                            <Grid item sx={{ ml: 3, mb: 3, mr:6 }} >
+                                <LoadingComponent disableText={true} alignItems="flex-start"/>
                             </Grid>
+                            :
+                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                <Grid item sx={{ ml: 3, mb: 3, }} >
+                                        <Button
+                                            variant="contained"
+                                            type="submit"
+                                        >
+                                            View
+                                        </Button>
+                                </Grid>
 
-                            <Grid item sx={{ ml: 3, mb: 3, }} >
-                                {onDownload?
-                                    <LoadingComponent disableText={true} alignItems="flex-start"/>
-                                :
+                                <Grid item sx={{ ml: 3, mb: 3, }} >
                                     <Grid container spacing={3}>
                                         <Grid item sx={{ ml: 3, mr:3 }} >
                                             <Button
                                                 variant="contained"
-                                                onClick={generateCSVHandler}
+                                                onClick={generateFileHandler("csv")}
                                             >
                                                 Generate CSV
                                             </Button>
@@ -541,28 +533,28 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         <Grid item sx={{ ml: 3, }} >
                                             <Button
                                                 variant="contained"
-                                                onClick={generatePDFHandler}
+                                                onClick={generateFileHandler("pdf")}
                                             >
                                                 Generate PDF
                                             </Button>
                                         </Grid>
                                     </Grid>
-                                }
-                            </Grid>
-                            
-                            {/* <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
-                                {onDownload?
-                                    <LoadingComponent disableText={true} alignItems="flex-start"/>
-                                :
-                                    <Button
-                                        variant="contained"
-                                        onClick={generatePDFHandler}
-                                    >
-                                        Generate PDF
-                                    </Button>
-                                }
-                            </Grid> */}
-                        </ThemeProvider>
+                                </Grid>
+                                
+                                {/* <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
+                                    {onDownload?
+                                        <LoadingComponent disableText={true} alignItems="flex-start"/>
+                                    :
+                                        <Button
+                                            variant="contained"
+                                            onClick={generatePDFHandler}
+                                        >
+                                            Generate PDF
+                                        </Button>
+                                    }
+                                </Grid> */}
+                            </ThemeProvider>
+                        }
                     </Grid>
                 </Grid>
             </form>

src/pages/Recon/index.js

@@ -37,8 +37,8 @@ const Index = () => {
         // dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady] = React.useState(true);
-    const [onDownload, setOnDownload] = React.useState(false);
-    const [onView, setOnView] = React.useState(false);
+    // const [onDownload, setOnDownload] = React.useState(false);
+    const [onLoad, setonLoad] = React.useState(false);
 
     // React.useEffect(() => {
     //     setOnReady(true);
@@ -46,13 +46,13 @@ const Index = () => {
 
     React.useEffect(() => {
         if (Object.keys(searchCriteria).length > 0){
-            console.log(searchCriteria)
+            // console.log(searchCriteria)
             loadGrid();
         }
     }, [searchCriteria]);
 
     function loadGrid(){
-        setOnView(true)
+        setonLoad(true)
         HttpUtils.get({
             url: UrlUtils.VIEW_RECON_REPORT,
             params: searchCriteria,
@@ -60,22 +60,22 @@ const Index = () => {
                 // console.log(responseData)
                 if(responseData.status != 200){
                     alert(responseData.content)
-                    setOnView(false)
+                    setonLoad(false)
                 } else {
                     var myWindow = window.open();
                     myWindow.document.write(responseData.content);
-                    setOnView(false)
+                    setonLoad(false)
                 }
             },
             onError:()=>{
-                setOnView(false)
+                setonLoad(false)
 
             }
         });
     }
 
     function downloadXML(input) {
-        console.log(input)
+        // console.log(input)
         const hasCollRange = input.CollDateFrom!="" && input.CollDateTo!="";
         const hasTxnRange = input.TxnDateFrom!="" && input.TxnDateTo!="";
         const hasSysTxnRange = input.SysTxnDateFrom!="" && input.SysTxnDateTo!="";
@@ -92,16 +92,16 @@ const Index = () => {
             alert("Must have a date range")
             // return "<div>must have a date range</div>";
         }else{
-            setOnDownload(true)
+            setonLoad(true)
             HttpUtils.fileDownload({
                 url: UrlUtils.GEN_RECON_REPORT,
                 params:input,
                 onResponse:(response)=>{
                     console.log(response)
-                    setOnDownload(false)
+                    setonLoad(false)
                 },
                 onError:()=>{
-                    setOnDownload(false)
+                    setonLoad(false)
                 }
               });
         }
@@ -137,8 +137,7 @@ const Index = () => {
                     applySearch={applySearch}
                     generateReport={generateReport}
                     searchCriteria={searchCriteria}
-                    onDownload={onDownload}
-                    onView={onView}
+                    onLoad={onLoad}
                     />
                 </Grid>
                 {/*row 2*/}