update ui request

src/pages/DemandNote/Search/DataGrid.js

@@ -170,7 +170,7 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
         {
             id: 'contactPerson',
             field: 'contactPerson',
-            headerName: 'Client',
+            headerName: 'Organisation',
             minWidth: 300,
             flex:1,
             renderCell: (params) => {
@@ -233,8 +233,8 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
             width: 300,
             renderCell: (params) => {
                 return (<table>
-                    <tr><td>Issue:</td><td>{DateUtils.dateValue(params?.row.issueDate)}</td></tr>
-                    <tr><td>Due:</td><td>{params?.value? DateUtils.dateValue(params?.value):"--"}</td></tr>
+                    <tr><td>Issue:</td><td>{DateUtils.dateStr(params?.row.issueDate)}</td></tr>
+                    <tr><td>Due:</td><td>{params?.value? DateUtils.dateStr(params?.value):"--"}</td></tr>
                     <tr><td>Sent:</td><td>{params.row.sentDate ? <> {DateUtils.datetimeStr(params.row.sentDate)}  -  {params.row.sentBy} </>: <> To be sent</>}</td></tr>
                 </table>);
             }

src/pages/DemandNote/Search/SearchForm.js

@@ -14,8 +14,25 @@ import * as FormatUtils from "utils/FormatUtils";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import { 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 SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
 }) => {
@@ -29,12 +46,120 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
     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 [minDueDate, setMinDueDate] = React.useState(searchCriteria.dueDateFrom);
     const [maxDueDate, setMaxDueDate] = React.useState(searchCriteria.dueDateTo);
+    const [fromDueDateValue, setFromDueDateValue] = React.useState("dd / mm / yyyy");
+    const [toDueDateValue, setToDueDateValue] = React.useState("dd / mm / yyyy");
 
     const intl = useIntl();
     const { locale } = intl;
+    
+    React.useEffect(() => {
+        setFromDateValue(minDate);
+    }, [minDate]);
+
+    React.useEffect(() => {
+        setToDateValue(maxDate);
+    }, [maxDate]);
+
+    React.useEffect(() => {
+        setFromDueDateValue(minDueDate);
+    }, [minDueDate]);
+
+    React.useEffect(() => {
+        setToDueDateValue(maxDueDate);
+    }, [maxDueDate]);
+
+    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}
+                />
+            </>
+        );
+    }
+
+    function FormDueDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(fromDueDateValue) == "Invalid Date" ?
+                        fromDueDateValue
+                        :
+                        DateUtils.dateStr(fromDueDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={fromDueDateValue}
+                    max={maxDueDate}
+                />
+            </>
+        );
+    }
+
+    function ToDueDateInputComponent({ inputRef, ...props }) {
+        const classes = useStyles();
+        return (
+            <>
+                <div className={classes.display}>
+                    {DateUtils.dateStr(toDueDateValue) == "Invalid Date" ?
+                        toDueDateValue
+                        :
+                        DateUtils.dateStr(toDueDateValue)}
+                </div>
+                <input
+                    // className={classes.input}
+                    ref={inputRef}
+                    {...props}
+                    // onChange={handleChange}
+                    value={toDueDateValue}
+                    min={minDueDate}
+                />
+            </>
+        );
+    }
 
 
     const { reset, register, handleSubmit } = useForm()
@@ -167,16 +292,21 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         {...register("orgId")}
                                         disablePortal
                                         id="orgId"
-                                        size="small"
                                         options={orgCombo}
+                                        size="small"
                                         value={orgSelected}
-                                        inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
+                                        getOptionLabel={(option) => option.name? option.name : ""}
+                                        inputValue={orgSelected ? orgSelected.name : ""}                                        
                                         onChange={(event, newValue) => {
+                                            if (newValue !== null) {
                                                 setOrgSelected(newValue);
+                                            }else{
+                                                setOrgSelected({});
+                                            }
                                         }}
                                         renderInput={(params) => (
                                             <TextField {...params}
-                                                label="BR No./ Organisation"
+                                                label="Organisation"
                                                 InputLabelProps={{
                                                     shrink: true
                                                 }}
@@ -209,11 +339,13 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         {...register("dateFrom")}
                                         id="dateFrom"
                                         type="date"
-                                        label={"Issue Date(From)"}
+                                        label={"Issue Date (From)"}
                                         defaultValue={searchCriteria.dateFrom}
-                                        InputProps={{ inputProps: { max: maxDate } }}
+                                        InputProps={{
+                                            inputComponent: FormDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateValue(newValue));
+                                            setMinDate(newValue.target.value);
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -228,9 +360,11 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                             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"
@@ -251,9 +385,11 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         type="date"
                                         label={"Due Date (From)"}
                                         defaultValue={searchCriteria.dueDateFrom}
-                                        InputProps={{ inputProps: { max: maxDueDate } }}
+                                        InputProps={{
+                                            inputComponent: FormDueDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMinDueDate(DateUtils.dateValue(newValue));
+                                            setMinDueDate(newValue.target.value);
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -269,9 +405,11 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                             shrink: true
                                         }}
                                         {...register("dueDateTo")}
-                                        InputProps={{ inputProps: { min: minDueDate } }}
+                                        InputProps={{
+                                            inputComponent: ToDueDateInputComponent,
+                                        }}
                                         onChange={(newValue) => {
-                                            setMaxDueDate(DateUtils.dateValue(newValue));
+                                            setMaxDueDate(newValue.target.value);
                                         }}
                                         id="dueDateTo"
                                         type="date"

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -30,7 +30,10 @@ const useStyles = makeStyles(() => ({
         pointerEvents: "none",
         right: 50,
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        md:{
+            width: "130px"
+        }
     },
 }));
 

src/pages/User/SearchPage_Individual/UserTable_Individual.js

@@ -45,7 +45,7 @@ export default function UserTable_Individual({ recordList }) {
         {
             id: 'username',
             field: 'username',
-            headerName: 'User Name',
+            headerName: 'Username',
             flex: 1,
             minWidth: 150,
         },

src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js

@@ -69,7 +69,7 @@ const UserSearchForm_Organization = ({applySearch}) => {
                                 fullWidth
                                 {...register("orgName")}
                                 id="orgName"
-                                label="Organisation Name"
+                                label="Organisation"
                                 InputLabelProps={{
                                     shrink: true
                                 }}

src/pages/User/SearchPage_Organization/UserTable_Organization.js

@@ -63,14 +63,14 @@ export default function UserTable_Organization({recordList}) {
         {
             id: 'enCompanyName',
             field: 'enCompanyName',
-            headerName: 'Company (Eng)',
+            headerName: 'Organisation (Eng)',
             flex: 1,
             minWidth: 200,
         },
         {
             id: 'chCompanyName',
             field: 'chCompanyName',
-            headerName: 'Company (Ch)',
+            headerName: 'Organisation (Ch)',
             flex: 1,
             minWidth: 150,
         },