update public date picker and add autofocus on input form

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -52,17 +52,11 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
     const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
 
     React.useEffect(() => {
-        console.log(minDate)
-        if (minDate != searchCriteria.dateFrom) {
-            setFromDateValue(minDate);
-        }
+        setFromDateValue(minDate);
     }, [minDate]);
 
     React.useEffect(() => {
-        console.log(maxDate)
-        if (maxDate != searchCriteria.dateTo) {
-            setToDateValue(maxDate);
-        }
+        setToDateValue(maxDate);
     }, [maxDate]);
 
     function FormDateInputComponent({ inputRef, ...props }) {
@@ -145,7 +139,9 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
     function resetForm() {
         setType([]);
         // setStatus({ key: 0, label: 'All', type: 'all' });
-        setOrgSelected({});
+        // setOrgSelected({});
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         setIssueSelected({});
         reset();
     }

src/pages/Payment/Search_GLD/DataGrid.js

@@ -62,7 +62,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'Transaction Date',
             flex: 1,
             valueGetter: (params) => {
-                return DateUtils.dateValue(params?.value);
+                return DateUtils.dateStr(params?.value);
             }
         },
         {

src/pages/Payment/Search_Public/DataGrid.js

@@ -74,7 +74,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
-                return DateUtils.dateValue(params?.value);
+                return DateUtils.dateStr(params?.value);
             }
         },
         {

src/pages/Payment/Search_Public/SearchForm.js

@@ -44,17 +44,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
     React.useEffect(() => {
         // console.log(minDate)
-        const dateFrom = DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))
-        if (minDate != dateFrom){
-            setFromDateValue(minDate);
-        }
+        setFromDateValue(minDate);
     }, [minDate]);
     
     React.useEffect(() => {
-        const dateTo = DateUtils.dateValue(new Date())
-        if (maxDate != dateTo){
-            setToDateValue(maxDate);
-        }
+        setToDateValue(maxDate);
     }, [maxDate]);
 
     function FormDateInputComponent({inputRef, ...props }) {
@@ -139,8 +133,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     function resetForm() {
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
-        setFromDateValue("dd / mm / yyyy")
-        setToDateValue("dd / mm / yyyy")
         reset();
     }
 

src/pages/Proof/Search_Public/SearchForm.js

@@ -15,8 +15,24 @@ import * as FormatUtils from "utils/FormatUtils";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
+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"
+    },
+}));
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
 }) => {
@@ -31,6 +47,60 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+
+    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();
+        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 _sx = {
         padding: "4 2 4 2",
@@ -50,20 +120,26 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
 
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
-
         let typeArray = [];
+        let sentDateFrom = "";
+        let sentDateTo = "";
 
         for (let i = 0; i < type.length; i++) {
             typeArray.push(type[i].label);
         }
 
+        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+            sentDateTo = DateUtils.dateValue(toDateValue)
+        }
+        
         const temp = {
             refNo: data.refNo,
             code: data.code,
             issueId: issueSelected?.id,
             gazettGroup: groupSelected?.type,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
             //contact: data.contact,
             replyed: (status?.type && status?.type != 'all') ? status?.type : "",
         };
@@ -82,6 +158,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
         setStatus(ComboData.proofStatus[0]);
         setIssueSelected({});
         setGroupSelected({});
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         reset();
     }
 
@@ -210,9 +288,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                                     type="date"
                                     label={intl.formatMessage({id: 'proofDateFrom'})}
                                     defaultValue={searchCriteria.dateFrom}
-                                    InputProps={{ inputProps: { max: maxDate } }}
+                                    InputProps={{
+                                        inputComponent: FormDateInputComponent,
+                                    }}
                                     onChange={(newValue) => {
-                                        setMinDate(DateUtils.dateValue(newValue));
+                                        setMinDate(newValue.target.value);
                                     }}
                                     InputLabelProps={{
                                         shrink: true
@@ -227,9 +307,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                                         shrink: true
                                     }}
                                     {...register("dateTo")}
-                                    InputProps={{ inputProps: { min: minDate } }}
+                                    InputProps={{
+                                        inputComponent: ToDateInputComponent,
+                                    }}
                                     onChange={(newValue) => {
-                                        setMaxDate(DateUtils.dateValue(newValue));
+                                        setMaxDate(newValue.target.value);
                                     }}
                                     id="dateTo"
                                     type="date"

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -16,8 +16,25 @@ import {
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
+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"
+    },
+}));
 
 const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const intl = useIntl();
@@ -26,23 +43,84 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
     // const [selectedLabelsString, setSelectedLabelsString] = React.useState('');
 
     const { reset, register, handleSubmit } = useForm()
     const marginBottom = 2.5;
 
+    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();
+        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) => {
         data.status = status.type;
         let typeArray = [];
+        let sentDateFrom = "";
+        let sentDateTo = "";
 
         for (let i = 0; i < type.length; i++) {
             typeArray.push(type[i].label);
         }
 
+        if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") {
+            sentDateFrom = DateUtils.dateValue(fromDateValue)
+            sentDateTo = DateUtils.dateValue(toDateValue)
+        }
+
         const temp = {
             appNo: data.appNo,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
             contact: data.contact,
             careOf: data.careOf?data.careOf:"",
             status: (data.status === "" || data.status.includes('all')) ? "" : data.status,
@@ -53,6 +131,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     function resetForm() {
         setType([]);
         setStatus(localStorage.getItem('userData').creditor?ComboData.publicNoticeStatic_Creditor[0]:ComboData.publicNoticeStatic[0]);
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         reset();
     }
 
@@ -94,9 +174,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             aria-label={intl.formatMessage({id: 'submitDateFrom'})}
                             label={intl.formatMessage({id: 'submitDateFrom'})}
                             defaultValue={searchCriteria.dateFrom}
-                            InputProps={{ inputProps: { max: maxDate } }}
+                            InputProps={{
+                                inputComponent: FormDateInputComponent,
+                            }}
                             onChange={(newValue) => {
-                                setMinDate(DateUtils.dateValue(newValue));
+                                setMinDate(newValue.target.value);
                             }}
                             InputLabelProps={{
                                 shrink: true
@@ -117,9 +199,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             aria-label={intl.formatMessage({id: 'submitDateTo'})}
                             label={intl.formatMessage({id: 'submitDateTo'})}
                             defaultValue={searchCriteria.dateTo}
-                            InputProps={{ inputProps: { min: minDate } }}
+                            InputProps={{
+                                inputComponent: ToDateInputComponent,
+                            }}
                             onChange={(newValue) => {
-                                setMaxDate(DateUtils.dateValue(newValue));
+                                setMaxDate(newValue.target.value);
                             }}
                         />
                     </Grid>

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

@@ -302,6 +302,7 @@ const Index = () => {
                                             <Grid item xs={12} md={12} lg={12}>
                                                 <TextField
                                                     fullWidth
+                                                    autoFocus
                                                     onChange={(e) => {
                                                         formik.handleChange(e);
                                                         changePassword(e.target.value);

src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js

@@ -148,6 +148,7 @@ const ForgotPasswordApplyForm = () => {
                                             value={formik.values.username}
                                             error={Boolean(formik.touched.username && formik.errors.username)}
                                             onBlur={formik.handleBlur}
+                                            autoFocus
                                             inputProps={{
                                                 maxLength: 50,
                                                 onKeyDown: (e) => {

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

@@ -309,6 +309,7 @@ const Index = () => {
                                             <Grid item xs={12} md={12} lg={12}>
                                                 <TextField
                                                     fullWidth
+                                                    autoFocus
                                                     onChange={(e) => {
                                                         formik.handleChange(e);
                                                         changePassword(e.target.value);

src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js

@@ -141,6 +141,7 @@ const ForgotUsernameApplyForm = () => {
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 3}} >
                                         <TextField
                                             fullWidth
+                                            autoFocus
                                             onChange={formik.handleChange}
                                             id="emailAddress"
                                             name="emailAddress"

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

@@ -274,6 +274,7 @@ const AuthLoginCustom = () => {
                 onChange={formik.handleChange}
                 placeholder=""
                 fullWidth
+                autoFocus
                 value={formik.values.username}
                 error={Boolean(formik.touched.username && formik.errors.username)}
                 onBlur={formik.handleBlur}

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

@@ -624,6 +624,7 @@ const BusCustomFormWizard = (props) => {
                                             }}
                                             placeholder={intl.formatMessage({id: 'userLoginName'})}
                                             fullWidth
+                                            autoFocus
                                             error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                             onBlur={formik.handleBlur}
                                             inputProps={{

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

@@ -722,6 +722,7 @@ const CustomFormWizard = (props) => {
                                             }}
                                             placeholder={intl.formatMessage({ id: 'userLoginName' })}
                                             fullWidth
+                                            autoFocus
                                             error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                             onBlur={formik.handleBlur}
                                             inputProps={{

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

@@ -463,6 +463,7 @@ const CustomFormWizard = (props) => {
                                         </InputLabel>
                                         <OutlinedInput
                                             fullWidth
+                                            autoFocus
                                             error={Boolean(formik.touched.address1 && formik.errors.address1)}
                                             id="address1-signup"
                                             value={formik.values.address1}

src/utils/FieldUtils.js

@@ -31,7 +31,7 @@ export const getTextField = ({ label, valueName, form, disabled }) => {
         <Grid item xs={12} sm={12} md={12} lg={12}>
             <Grid container>
                 <Grid item xs={12} sm={12} md={3} lg={3}
-                    sx={{ display: 'flex', alignItems: 'center' }} mb={2} >
+                    sx={{ display: 'flex', alignItems: 'center' }} >
                     <Typography variant="pnspsFormParagraphBold">{label}</Typography>
                 </Grid>
                 <Grid item xs={12} sm={12} md={6} lg={6}>
@@ -49,7 +49,7 @@ export const getTextField = ({ label, valueName, form, disabled }) => {
 
 export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...props }) => {
     return <Grid container alignItems={"center"}>
-        <Grid item xs={12} md={3} lg={3} mb={2}
+        <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>
@@ -77,7 +77,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p
 export const getPhoneField = ({ label, valueName, form, disabled }) => {
 
     return <Grid container alignItems={"center"} sx={{mb:2}}>
-        <Grid item xs={12} md={3} lg={3} mb={2}
+        <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>
@@ -122,7 +122,7 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => {
 
 export const getAddressField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"top"}>
-        <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'top' }}>
+        <Grid item xs={12} md={3} lg={3} mt={1} sx={{ display: 'flex', alignItems: 'top' }}>
             <Grid item lg={12} sx={{ alignItems: 'center' }}>
                 <Typography variant="pnspsFormParagraphBold">{label}</Typography>
             </Grid>