Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

package.json

@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.14.1",
     "@mui/lab": "^5.0.0-alpha.139",
     "@mui/material": "^5.10.6",
+    "@mui/styles": "^5.15.14",
     "@mui/x-data-grid": "^6.11.1",
     "@mui/x-date-pickers": "^6.12.0",
     "@reduxjs/toolkit": "^1.8.5",

src/pages/Announcement/Search/DataGrid.js

@@ -1,12 +1,12 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button,
     Box
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -17,11 +17,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         setRows(recordList);   
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/setting/announcement/details/' + params.id);
-    };
-
-
     const columns = [
         {
             field: 'announceDate',
@@ -29,7 +24,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: 250,
             cellClassName: 'announceDate',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{DateUtils.datetimeStr(params?.value)}</u></Button>;
+                return clickableLink('/setting/announcement/details/' + params.id, DateUtils.datetimeStr(params?.value));
             },
         },
         {

src/pages/Announcement/Search/SearchForm.js

@@ -79,7 +79,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                                         defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: maxDate } }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateStr(newValue));
+                                            setMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -96,7 +96,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                                         {...register("dateTo")}
                                         InputProps={{ inputProps: { min: minDate } }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateStr(newValue));
+                                            setMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="dateTo"
                                         type="date"
@@ -126,9 +126,10 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                         <Grid item sx={{ ml: 3 }}>
                             <Button
                                 variant="contained"
+                                color="cancel"
                                 onClick={resetForm}
                             >
-                                Clear
+                                Reset
                             </Button>
                         </Grid>
 

src/pages/Announcement/Search/index.js

@@ -32,8 +32,8 @@ const UserSearchPage_Individual = () => {
 
     const [record, setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 90)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 90)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/Announcement/Search_Public/DataGrid.js

@@ -21,7 +21,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: 250,
             cellClassName: 'announceDate',
             renderCell: (params) => {
-                return DateUtils.dateStr(params?.value);
+                return DateUtils.dateValue(params?.value);
             },
         },
         {

src/pages/Announcement/Search_Public/SearchForm.js

@@ -82,7 +82,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: maxDate } }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateStr(newValue));
+                                            setMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -103,7 +103,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         {...register("dateTo")}
                                         InputProps={{ inputProps: { min: minDate } }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateStr(newValue));
+                                            setMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="dateTo"
                                         type="date"

src/pages/Announcement/Search_Public/index.js

@@ -32,8 +32,8 @@ const BackgroundHead = {
 const UserSearchPage_Individual = () => {
     const [record, setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 90)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 90)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/AuditLog/AuditLogSearchForm.js

@@ -107,7 +107,7 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                                     defaultValue={searchCriteria.modifiedFrom}
                                     InputProps={{ inputProps: { max: maxDate } }}
                                     onChange={(newValue) => {
-                                        setMinDate(DateUtils.dateStr(newValue));
+                                        setMinDate(DateUtils.dateValue(newValue));
                                     }}
                                     InputLabelProps={{
                                         shrink: true
@@ -129,7 +129,7 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                                     InputProps={{ inputProps: { min: minDate } }}
                                     onChange={(newValue) => {
                                         console.log(newValue)
-                                        setMaxDate(DateUtils.dateStr(newValue));
+                                        setMaxDate(DateUtils.dateValue(newValue));
                                     }}
                                     id="modifiedTo"
                                     type="date"
@@ -163,9 +163,10 @@ const AuditLogSearchForm = ({ applySearch, searchCriteria}) => {
                                     <Grid item sx={{ ml: 3, mr: 3, mb: 3,}}>
                                         <Button
                                             variant="contained"
+                                            color="cancel"
                                             onClick={resetForm}
                                         >
-                                        Clear
+                                        Reset
                                         </Button>
                                     </Grid>
                                     <Grid item sx={{ ml: 3, mb: 3 }}>

src/pages/AuditLog/AuditLogTable.js

@@ -27,6 +27,7 @@ export default function AuditLogTable({recordList}) {
             field: 'modified',
             headerName: 'Date',
             flex: isMdOrLg ? 1 : undefined,
+            minWidth: 200,
             valueGetter:(params)=>{
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -36,36 +37,42 @@ export default function AuditLogTable({recordList}) {
             field: 'modifiedByName',
             headerName: 'Username',
             flex: isMdOrLg ? 1 : undefined,
+            minWidth: 80,
         },
         {
             id: 'tableName',
             field: 'tableName',
             headerName: 'Table Name',
             flex: isMdOrLg ? 1 : undefined,
+            minWidth: 80,
         },
         {
             id: 'ref',
             field: 'ref',
             headerName: 'Ref',
             flex: isMdOrLg ? 1 : undefined,
+            minWidth: 80,
         },
         {
             id: 'actionType',
             field: 'actionType',
             headerName: 'Action',
             flex: isMdOrLg ? 1 : undefined,
+            minWidth: 80,
         },
         {
             id: 'oldData',
             field: 'oldData',
             headerName: 'Old Data',
-            flex: isMdOrLg ? 2 : undefined,
+            flex: isMdOrLg ? 5 : undefined,
+            minWidth: 300,
         },
         {
             id: 'newData',
             field: 'newData',
             headerName: 'New Data',
-            flex: isMdOrLg ? 2 : undefined,
+            flex: isMdOrLg ? 5 : undefined,
+            minWidth: 300,
         },
     ];
 

src/pages/AuditLog/index.js

@@ -33,8 +33,8 @@ const BackgroundHead = {
 const AuditLogPage = () => {
     const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        modifiedTo: DateUtils.dateStr(new Date()),
-        modifiedFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        modifiedTo: DateUtils.dateValue(new Date()),
+        modifiedFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = useState(false);
     const [changelocked, setChangeLocked] = React.useState(false);

src/pages/DemandNote/Create/DataGrid.js

@@ -1,12 +1,10 @@
 // material-ui
 import * as React from 'react';
-import {
-    Button
-} from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import * as PublicNoteStatusUtils from "utils/statusUtils/PublicNoteStatusUtils"
 import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -42,14 +40,16 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'appNo',
             headerName: 'App No.',
             flex: 1,
+            minWidth: 150,
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.appNo}</u></Button>;
+                return clickableLink('/application/' + params.row.id, params.row.appNo)
             },
         },
         {
             field: 'status',
             headerName: 'Status',
             flex: 1,
+            minWidth: 200,
             renderCell: (params) => {
                 return PublicNoteStatusUtils.getStatusByTextEng(params.row.status, params.row.creditor);
             }
@@ -58,6 +58,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'date',
             headerName: 'Submit Date',
             flex: 1,
+            minWidth: 200,
             renderCell: (params) => {
                 return DateUtils.datetimeStr(params.row.created);
             }
@@ -67,6 +68,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'contactPerson',
             headerName: 'Contact Person',
             flex: 1,
+            minWidth: 200,
             renderCell: (params) => {
                 let company = params.row.enCompanyName != null?params.row.enCompanyName: params.row.chCompanyName;
                 company = company != null ? company : "";
@@ -97,6 +99,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'groupNo',
             headerName: 'Gazette Group',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 return (params?.value) ? (params?.value) : "";
             }
@@ -106,6 +109,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'fee',
             headerName: 'Amount($)',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 return FormatUtils.currencyFormat(params?.value);
             }

src/pages/DemandNote/Create/SearchForm.js

@@ -14,8 +14,8 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import { useNavigate } from "react-router-dom";
 import { notifyDownloadSuccess } from 'utils/CommonFunction';
-import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
-import {ThemeProvider} from "@emotion/react";
+import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
+import { ThemeProvider } from "@emotion/react";
 import { useIntl } from "react-intl";
 
 
@@ -28,7 +28,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
     const [failText, setFailText] = React.useState("");
 
     const [confirmPopUp, setConfirmPopUp] = React.useState(false);
-    const [dueDate, setDueDate] = React.useState(DateUtils.dateStr(DateUtils.dateStr((new Date().setDate(new Date().getDate() +1)))));
+    const [dueDate, setDueDate] = React.useState(DateUtils.dateValue(DateUtils.dateValue((new Date().setDate(new Date().getDate() + 1)))));
 
     const [isSuccessPopUp, setIsSuccessPopUp] = React.useState(false);
     const [resultCount, setResultCount] = React.useState(0);
@@ -91,16 +91,16 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
             setIsFailPopUp(true);
             return;
         } else {
-            setDueDate(DateUtils.dateStr((new Date().setDate(new Date().getDate() +1))));
+            setDueDate(DateUtils.dateValue((new Date().setDate(new Date().getDate() + 1))));
             setConfirmPopUp(true);
         }
     };
 
-    const doDnCreate=()=>{
+    const doDnCreate = () => {
         setConfirmPopUp(false);
         HttpUtils.post({
             url: UrlUtils.DEMAND_NOTE_CREATE + "/" + issueSelected.id,
-            params:{
+            params: {
                 dueDate: dueDate
             },
             onSuccess: function (responseData) {
@@ -113,7 +113,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
 
     const fileDownload = () => {
         HttpUtils.fileDownload({
-            method:'post',
+            method: 'post',
             url: UrlUtils.DEMAND_NOTE_EXPORT,
             params: {
                 "dnIdList": dnIdList
@@ -126,7 +126,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
 
     const onNavigate = () => {
         setIsSuccessPopUp(false);
-        if(resultCount > 0)
+        if (resultCount > 0)
             navigate('/paymentPage/demandNote');
     };
 
@@ -148,17 +148,16 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
 
             <form>
                 {/*row 1*/}
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff', pt:4, pl:4, pb:4 }} width="98%" spacing={3} >
                     {/*row 1*/}
-                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                    <Grid item justifyContent="space-between" alignItems="center" >
                         <Typography variant="h5" >
                             Please Select Gazette Issue :
                         </Typography>
                     </Grid>
                     {/*row 2*/}
 
-                    <Grid container display="flex" alignItems={"center"} sx={{mb:3}}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3 }}>
+                    <Grid item xs={9} s={6} md={5} lg={3}>
                         <Autocomplete
                             disablePortal
                             size="small"
@@ -182,39 +181,31 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                             )}
                         />
                     </Grid>
-                    {/* <Grid item sx={{ ml: 3, mr: 3}} >
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={onPreView}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Preview</Typography>
-                        </Button>
-                    </Grid> */}
-                    <Grid item sx={{ ml: 3, mr: 3 }} >
+                    <Grid item >
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                        <Button
-                            variant="contained"
-                            onClick={onSubmit}
-                            color="success"
-                        >
-                            Create
-                        </Button>
+                            <Button
+                                variant="contained"
+                                onClick={onSubmit}
+                                color="success"
+                                minWidth={150}
+                            >
+                                Create
+                            </Button>
                         </ThemeProvider>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3 }} >
-                        <Typography variant="h5">Pending Payment: {paymentCount}</Typography>
-                    </Grid>
+                    <Grid item >
+                        <Grid container display="flex" alignItems={"center"} spacing={3}>
+                            <Grid item  >
+                                <Typography variant="h5">Pending Payment: {paymentCount}</Typography>
+                            </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3 }} >
-                        <Typography variant="h5">Pending Publish: {publishCount}</Typography>
+                            <Grid item  >
+                                <Typography variant="h5">Pending Publish: {publishCount}</Typography>
+                            </Grid>
+                        </Grid>
                     </Grid>
                 </Grid>
-                </Grid>
             </form>
             <div>
                 <Dialog
@@ -254,22 +245,22 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                         <Grid container alignItems={"center"}>
                             <Grid item md={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                                 <Typography variant="h4" style={{ padding: '16px' }}>Due Date: </Typography>
-                          
+
                             </Grid>
                             <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                            <TextField
-                                fullWidth
-                                type="date"
-                                defaultValue={dueDate}
-                                InputProps={{ inputProps: { min: DateUtils.dateStr(new Date()) } }}
-                                onChange={(newValue) => {
-                                    setDueDate(newValue.currentTarget.value)
-                                }}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
-                            />
-                        </Grid>
+                                <TextField
+                                    fullWidth
+                                    type="date"
+                                    defaultValue={dueDate}
+                                    InputProps={{ inputProps: { min: DateUtils.dateValue(new Date()) } }}
+                                    onChange={(newValue) => {
+                                        setDueDate(newValue.currentTarget.value)
+                                    }}
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
+                                />
+                            </Grid>
                         </Grid>
                     </DialogContent>
                     <DialogActions>
@@ -300,7 +291,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                                 <Grid item md={12}>
                                     <Button
                                         size="large"
-                                        onClick={()=>fileDownload()}
+                                        onClick={() => fileDownload()}
                                         sx={{
                                             textTransform: 'capitalize',
                                             alignItems: 'end'

src/pages/DemandNote/Details/DnDetailCard.js

@@ -127,24 +127,24 @@ const DnDetailCard = ({ data }) => {
                         {getDisplayField("Sent on", "")}
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder 1", DateUtils.dateStr(dnData.expectReminder1))}
+                        {getDisplayField("Reminder 1", dnData?.expectReminder1 ? DateUtils.dateValue(dnData.expectReminder1):"--")}
                         {getDisplayField("Reminder 1", dnData?.reminder1 ? DateUtils.datetimeStr(dnData.reminder1) : "--")}
                     </Grid>
 
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder 2",  DateUtils.dateStr(dnData.expectReminder2))}
+                        {getDisplayField("Reminder 2", dnData?.expectReminder2 ? DateUtils.dateValue(dnData.expectReminder2):"--")}
                         {getDisplayField("Reminder 2", dnData?.reminder2 ? DateUtils.datetimeStr(dnData.reminder2) : "--")}
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder 3",  DateUtils.dateStr(dnData.expectReminder3))}
+                        {getDisplayField("Reminder 3", dnData?.expectReminder3 ? DateUtils.dateValue(dnData.expectReminder3):"--")}
                         {getDisplayField("Reminder 3", dnData?.reminder3 ? DateUtils.datetimeStr(dnData.reminder3) : "--")}
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder 4",  DateUtils.dateStr(dnData.expectReminder4))}
+                        {getDisplayField("Reminder 4", dnData?.expectReminder4 ? DateUtils.dateValue(dnData.expectReminder4):"--")}
                         {getDisplayField("Reminder 4", dnData?.reminder4 ? DateUtils.datetimeStr(dnData.reminder4) : "--")}
                     </Grid>
                     <Grid container direction="row" justifyContent="space-between" alignItems="center">
-                        {getDisplayField("Reminder Final",  DateUtils.dateStr(dnData.expectReminderFinal))}
+                        {getDisplayField("Reminder Final", dnData?.expectReminderFinal ? DateUtils.dateValue(dnData.expectReminderFinal):"--")}
                         {getDisplayField("Reminder Final", dnData?.reminderFinal ? DateUtils.datetimeStr(dnData.reminderFinal) : "--")}
                     </Grid>
 

src/pages/DemandNote/Details/index.js

@@ -49,7 +49,7 @@ const DemandNote_index = () => {
         url: `${DEMAND_NOTE_LOAD}/${params.id}`,
         onSuccess: (response) => {
          
-            response["issueDate"] = DateUtils.dateStr(response["issueDate"]);
+            response["issueDate"] = DateUtils.dateValue(response["issueDate"]);
             response["sentDate"] = response["sentDate"]?DateUtils.datetimeStr(response["sentDate"]):"";
             response["gazetteIssueDate"] = DateUtils.datetimeStr(response["gazetteIssueDate"]);
             response["contactFaxNo"] =JSON.parse(response["contactFaxNo"]);

src/pages/DemandNote/Search/DataGrid.js

@@ -233,8 +233,8 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
             width: 300,
             renderCell: (params) => {
                 return (<table>
-                    <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>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>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

@@ -21,13 +21,11 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 }) => {
 
     const [type, setType] = React.useState([]);
-    // const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' });
     const [orgSelected, setOrgSelected] = React.useState({});
     const [orgCombo, setOrgCombo] = React.useState();
     const [issueSelected, setIssueSelected] = React.useState({});
     const [issueCombo, setIssueCombo] = React.useState([]);
-    const [selectedStatus, setSelectedStatus] = React.useState([]);
-    const [selectedLabelsString, setSelectedLabelsString] = React.useState('');
+    const [selectedStatus, setSelectedStatus] = React.useState(ComboData.denmandNoteStatus[0]);
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
@@ -41,7 +39,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
-        data.status = selectedLabelsString
+        data.status = selectedStatus?.type;
         let typeArray = [];
 
         for (let i = 0; i < type.length; i++) {
@@ -57,7 +55,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
             dateTo: data.dateTo,
             dueDateFrom: data.dueDateFrom,
             dueDateTo: data.dueDateTo,
-            status: (data.status === '' || data.status.includes("all")) ? "" : data.status,
+            status: (data?.status === '' || data?.status?.includes("all")) ? "" : data.status,
         };
         applySearch(temp);
     };
@@ -77,9 +75,9 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
     function resetForm() {
         setType([]);
-        // setStatus({ key: 0, label: 'All', type: 'all' });
         setOrgSelected({});
         setIssueSelected({});
+        setSelectedStatus(ComboData.denmandNoteStatus[0]);
         reset();
     }
 
@@ -136,9 +134,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                 inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
                                 getOptionLabel={(option) => getIssueLabel(option)}
                                 onChange={(event, newValue) => {
-                                    if (newValue !== null) {
-                                        setIssueSelected(newValue);
-                                    }
+                                    setIssueSelected(newValue);
                                 }}
                                 renderInput={(params) => (
                                     <TextField {...params}
@@ -176,9 +172,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         value={orgSelected}
                                         inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
                                         onChange={(event, newValue) => {
-                                            if (newValue !== null) {
                                                 setOrgSelected(newValue);
-                                            }
                                         }}
                                         renderInput={(params) => (
                                             <TextField {...params}
@@ -219,7 +213,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: maxDate } }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateStr(newValue));
+                                            setMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -236,7 +230,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         {...register("dateTo")}
                                         InputProps={{ inputProps: { min: minDate } }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateStr(newValue));
+                                            setMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="dateTo"
                                         type="date"
@@ -259,7 +253,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         defaultValue={searchCriteria.dueDateFrom}
                                         InputProps={{ inputProps: { max: maxDueDate } }}
                                         onChange={(newValue) => {
-                                            setMinDueDate(DateUtils.dateStr(newValue));
+                                            setMinDueDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -277,7 +271,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         {...register("dueDateTo")}
                                         InputProps={{ inputProps: { min: minDueDate } }}
                                         onChange={(newValue) => {
-                                            setMaxDueDate(DateUtils.dateStr(newValue));
+                                            setMaxDueDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="dueDateTo"
                                         type="date"
@@ -291,25 +285,16 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Autocomplete
-                                multiple
                                 size="small"
                                 {...register("status")}
                                 id="status"
                                 options={ComboData.denmandNoteStatus}
                                 value={selectedStatus}
                                 onChange={(event, newValue) => {
-                                    const findAllIndex = newValue.findIndex((ele) => {
-                                        return ele.type === "all"
-                                    })
-
-                                    if (findAllIndex > -1) {
-                                        setSelectedStatus([newValue[findAllIndex]]);
-                                        setSelectedLabelsString('all')
-                                    } else {
-                                        const selectedLabels = newValue.map(option => option.type);
-                                        const selectedLabelsString = `${selectedLabels.join(',')}`;
+                                    if(newValue==null){
+                                        setSelectedStatus(ComboData.denmandNoteStatus[0]);
+                                    }else{
                                         setSelectedStatus(newValue);
-                                        setSelectedLabelsString(selectedLabelsString);
                                     }
                                 }}
                                 getOptionLabel={(option) => option.label}
@@ -335,9 +320,10 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                         <Grid item sx={{ ml: 3, mb:3 }}>
                             <Button
                                 variant="contained"
+                                color="cancel"
                                 onClick={resetForm}
                                 >
-                                Clear
+                                Reset
                             </Button>
                         </Grid>
 

src/pages/DemandNote/Search/index.js

@@ -36,10 +36,10 @@ const UserSearchPage_Individual = () => {
     const [orgCombo, setOrgCombo] = React.useState([]);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
-        dueDateTo: DateUtils.dateStr(new Date()),
-        dueDateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)),
+        dueDateTo: DateUtils.dateValue(new Date()),
+        dueDateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/DemandNote/Search_Public/DataGrid.js

@@ -3,10 +3,12 @@ import * as React from 'react';
 import {
     Button,
     Box,
+    useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as StatusUtils from "utils/statusUtils/DnStatus";
 import { FiDataGrid } from "components/FiDataGrid";
+import {useTheme} from "@emotion/react";
 
 import * as HttpUtils from "utils/HttpUtils";
 import {useIntl} from "react-intl";
@@ -15,6 +17,8 @@ import {useIntl} from "react-intl";
 export default function SearchDemandNote({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
     const intl = useIntl();
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     React.useEffect(() => {
         setRows(recordList);
@@ -32,26 +36,30 @@ export default function SearchDemandNote({ recordList }) {
         {
             field: 'dnNo',
             headerName: intl.formatMessage({id: 'paymentRecordId'}),
-            width: 200,
+            width: isMdOrLg ? 'auto' : 200,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             field: 'appNo',
             headerName: intl.formatMessage({id: 'applicationId'}),
-            width: 150,
+            width: isMdOrLg ? 'auto' : 150,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'issueDate',
             field: 'issueDate',
             headerName: intl.formatMessage({id: 'receiptDate'}),
-            width: 175,
+            width: isMdOrLg ? 'auto' : 175,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
-                return DateUtils.dateStr(params?.value);
+                return DateUtils.dateValue(params?.value);
             }
         },
         {
             field: 'status',
             headerName: intl.formatMessage({id: 'status'}),
-            width: 175,
+            width: isMdOrLg ? 'auto' : 175,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return [StatusUtils.getStatus_Cht(params)]
             },
@@ -59,15 +67,17 @@ export default function SearchDemandNote({ recordList }) {
         {
             field: 'sentDate',
             headerName: intl.formatMessage({id: 'sendDate'}),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 200,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
-                return params?.value ? DateUtils.datetimeStr(params?.value) + " - " + params.row.sentBy : "";
+                return params?.value ? DateUtils.datetimeStr(params?.value):"";
             }
         },
         {
             field: 'filename',
             headerName: intl.formatMessage({id: 'files'}),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 300,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return <Button onClick={onDownloadClick(params)}><u>{params.row.filename}</u></Button>;
             },

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -12,42 +12,121 @@ import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
-import {FormattedMessage, useIntl} from "react-intl";
-import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
-import {ThemeProvider} from "@emotion/react";
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
+import { FormattedMessage, 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"
+    },
+}));
 
 const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
 }) => {
 
     const intl = useIntl();
     const { locale } = intl;
-    
+
     const [type, setType] = React.useState([]);
-    const [issueSelected, setIssueSelected] = React.useState({ key: 0, i18nLabel: 'all', labelCht: '全部', label: 'All',  type: 'all' });
+    const [issueSelected, setIssueSelected] = React.useState({ key: 0, i18nLabel: 'all', labelCht: '全部', label: 'All', type: 'all' });
     const [issueCombo, setIssueCombo] = React.useState([]);
-    const [selectedStatus, setSelectedStatus] = React.useState({});
+    const [selectedStatus, setSelectedStatus] = React.useState(ComboData.denmandNoteStatus_Public[0]);
 
     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 { 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 = {
             appNo: data.appNo,
             issueId: issueSelected?.id,
             dnNo: data.dnNo,
-            sentDateFrom: data.dateFrom,
-            sentDateTo: data.dateTo,
+            sentDateFrom: sentDateFrom,
+            sentDateTo: sentDateTo,
             status: (selectedStatus?.type && selectedStatus?.type != 'all') ? selectedStatus?.type : "",
         };
+        // console.log(temp)
         applySearch(temp);
     };
 
@@ -60,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();
     }
@@ -88,6 +169,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
             + ", No. " + FormatUtils.zeroPad(issueNo, 2)
             + ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)");
     }
+
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
@@ -102,7 +184,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                         <CardContent sx={{ px: 2.5, pt: 3 }}>
                             <Grid item justifyContent="space-between" alignItems="center" >
                                 <Typography variant="pnspsFormHeader">
-                                    <FormattedMessage id="searchForm"/>
+                                    <FormattedMessage id="searchForm" />
                                 </Typography>
                             </Grid>
                         </CardContent>
@@ -126,7 +208,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 }}
                                 renderInput={(params) => (
                                     <TextField {...params}
-                                        label={intl.formatMessage({id: 'gazetteCount'})}
+                                        label={intl.formatMessage({ id: 'gazetteCount' })}
                                         InputLabelProps={{
                                             shrink: true
                                         }}
@@ -140,7 +222,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 fullWidth
                                 {...register("appNo")}
                                 id='appNo'
-                                label={intl.formatMessage({id: 'applicationId'})}
+                                label={intl.formatMessage({ id: 'applicationId' })}
                                 defaultValue={searchCriteria.appNo}
                                 InputLabelProps={{
                                     shrink: true
@@ -153,7 +235,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 fullWidth
                                 {...register("dnNo")}
                                 id='dnNo'
-                                label={intl.formatMessage({id: 'paymentRecordId'})}
+                                label={intl.formatMessage({ id: 'paymentRecordId' })}
                                 defaultValue={searchCriteria.dnNo}
                                 InputLabelProps={{
                                     shrink: true
@@ -167,11 +249,14 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 {...register("dateFrom")}
                                 id="dateFrom"
                                 type="date"
-                                label={intl.formatMessage({id: 'sendDateFrom'})}
+                                label={intl.formatMessage({ id: 'sendDateFrom' })}
                                 defaultValue={searchCriteria.dateFrom}
-                                InputProps={{ inputProps: { max: maxDate } }}
+                                // InputProps={{ inputProps: { max: maxDate } }}
+                                InputProps={{
+                                    inputComponent: FormDateInputComponent,
+                                }}
                                 onChange={(newValue) => {
-                                    setMinDate(DateUtils.dateStr(newValue));
+                                    setMinDate(newValue.target.value);
                                 }}
                                 InputLabelProps={{
                                     shrink: true
@@ -186,13 +271,15 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                     shrink: true
                                 }}
                                 {...register("dateTo")}
-                                InputProps={{ inputProps: { min: minDate } }}
+                                InputProps={{
+                                    inputComponent: ToDateInputComponent,
+                                }}
                                 onChange={(newValue) => {
-                                    setMaxDate(DateUtils.dateStr(newValue));
+                                    setMaxDate(newValue.target.value);
                                 }}
                                 id="dateTo"
                                 type="date"
-                                label={intl.formatMessage({id: 'sendDateTo'})}
+                                label={intl.formatMessage({ id: 'sendDateTo' })}
                                 defaultValue={searchCriteria.dateTo}
                             />
                         </Grid>
@@ -204,8 +291,8 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 id="status"
                                 size="small"
                                 options={ComboData.denmandNoteStatus_Public}
-                                getOptionLabel={(option) => option?.i18nLabel? intl.formatMessage({ id: option.i18nLabel }) : ""}
-                                inputValue={selectedStatus?.i18nLabel? intl.formatMessage({ id: selectedStatus.i18nLabel }) : ""}
+                                getOptionLabel={(option) => option?.i18nLabel ? intl.formatMessage({ id: option.i18nLabel }) : ""}
+                                inputValue={selectedStatus?.i18nLabel ? intl.formatMessage({ id: selectedStatus.i18nLabel }) : ""}
                                 value={selectedStatus}
                                 onChange={(event, newValue) => {
                                     if (newValue !== null) {
@@ -215,7 +302,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}
-                                        label={intl.formatMessage({id: 'status'})}
+                                        label={intl.formatMessage({ id: 'status' })}
                                     />
                                 )}
                                 InputLabelProps={{
@@ -231,13 +318,13 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                            <Grid item sx={{mr: 3, mb: 3}}>
+                            <Grid item sx={{ mr: 3, mb: 3 }}>
                                 <Button
                                     color="cancel"
                                     variant="contained"
                                     onClick={resetForm}
                                 >
-                                    <FormattedMessage id="reset"/>
+                                    <FormattedMessage id="reset" />
                                 </Button>
                             </Grid>
 

src/pages/DemandNote/Search_Public/index.js

@@ -36,8 +36,8 @@ const UserSearchPage_Individual = () => {
     const [orgCombo, setOrgCombo] = React.useState([]);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/EmailTemplate/Search_GLD/DataGrid.js

@@ -45,36 +45,42 @@ export default function EmailTemplateTable({ recordList }) {
             field: 'tempKey',
             headerName: 'Key',
             flex: 1,
+            minWidth: 250,
         },
         {
             id: 'description',
             field: 'description',
             headerName: 'Description',
             flex: 1,
+            minWidth: 350,
         },
         {
             id: 'params',
             field: 'params',
             headerName: 'Parameters',
             flex: 1,
+            minWidth: 250,
         },
         {
             id: 'subjectCht',
             field: 'subjectCht',
             headerName: 'Subject (Cht)',
             flex: 1,
+            minWidth: 400,
         },
         {
             id: 'subjectChs',
             field: 'subjectChs',
             headerName: 'Subject (Chs)',
             flex: 1,
+            minWidth: 350,
         },
         {
             id: 'subjectEng',
             field: 'subjectEng',
             headerName: 'Subject (Eng)',
             flex: 1,
+            minWidth: 350,
         },
     ];
 

src/pages/GFMIS/DataGrid.js

@@ -37,15 +37,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
     };
 
     const columns = [
-        // {
-        //     field: 'actions',
-        //     headerName: 'Trans. No.',
-        //     flex: 1,
-        //     cellClassName: 'actions',
-        //     renderCell: (params) => {
-        //         return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
-        //     },
-        // },
         {
             id: 'paymentMethod',
             field: 'paymentMethod',

src/pages/GFMIS/SearchForm.js

@@ -78,7 +78,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                                 max: maxDate,
                              } }}
                             // onChange={(newValue) => {
-                            //     setMinDate(DateUtils.dateStr(newValue));
+                            //     setMinDate(DateUtils.dateValue(newValue));
                             // }}
                             InputLabelProps={{
                                 shrink: true
@@ -95,7 +95,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                             {...register("dateTo")}
                             InputProps={{ inputProps: { min: minDate } }}
                             onChange={(newValue) => {
-                                setMaxDate(DateUtils.dateStr(newValue));
+                                setMaxDate(DateUtils.dateValue(newValue));
                             }}
                             id="dateTo"
                             type="date"

src/pages/GFMIS/index.js

@@ -32,8 +32,8 @@ const Index = () => {
 
     const [record,setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateFrom: DateUtils.dateStr(new Date()),
-        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        dateFrom: DateUtils.dateValue(new Date()),
+        // dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/GazetteIssue/DataGrid.js

@@ -25,6 +25,7 @@ export default function GazetteIssueTable({ recordList }) {
             field: 'issueYear',
             headerName: 'Year',
             flex: 1,
+            minWidth: 100,
             renderCell: (params) => {
                 return <div style={{ margin: 4 }}>{params.row.issueYear}</div>
             },
@@ -34,6 +35,7 @@ export default function GazetteIssueTable({ recordList }) {
             field: 'volume',
             headerName: 'Volume',
             flex: 1,
+            minWidth: 100,
             renderCell: (params) => {
                 return <div style={{ margin: 4 }}>{params.row.volume}</div>
             },
@@ -43,6 +45,7 @@ export default function GazetteIssueTable({ recordList }) {
             field: 'issueNo',
             headerName: 'Issue No',
             flex: 1,
+            minWidth: 100,
             renderCell: (params) => {
                 return <div style={{ margin: 4 }}>{params.row.issueNo}</div>
             },
@@ -52,6 +55,7 @@ export default function GazetteIssueTable({ recordList }) {
             field: 'issueDate',
             headerName: 'Issue Date',
             flex: 2,
+            minWidth: 150,
             renderCell: (params) => {
                 let issueDate = params.row.issueDate;
                 return <div style={{ margin: 4 }}>{dateStr(issueDate)}</div>
@@ -62,6 +66,7 @@ export default function GazetteIssueTable({ recordList }) {
             field: 'closingDate',
             headerName: 'Closing Date',
             flex: 2,
+            minWidth: 150,
             renderCell: (params) => {
                 let closingDate = params.row.closingDate;
                 return <div style={{ margin: 4 }}>{dateStr(closingDate)}</div>
@@ -72,6 +77,7 @@ export default function GazetteIssueTable({ recordList }) {
             field: 'issueDesc',
             headerName: 'Description',
             flex: 2,
+            minWidth: 200,
         },
     ];
 

src/pages/GazetteIssue/ExportForm.js

@@ -98,7 +98,7 @@ const SearchGazetteIssueForm = ({ applyExport, comboData, waitDownload}) => {
                             {...register("dateTo")}
                             InputProps={{ inputProps: { min: minDate } }}
                             onChange={(newValue) => {
-                                setMaxDate(DateUtils.dateStr(newValue));
+                                setMaxDate(DateUtils.dateValue(newValue));
                             }}
                             id="dateTo"
                             type="date"

src/pages/GazetteIssue/SearchForm.js

@@ -96,7 +96,7 @@ const SearchGazetteIssueForm = ({ applySearch, comboData}) => {
                             {...register("dateTo")}
                             InputProps={{ inputProps: { min: minDate } }}
                             onChange={(newValue) => {
-                                setMaxDate(DateUtils.dateStr(newValue));
+                                setMaxDate(DateUtils.dateValue(newValue));
                             }}
                             id="dateTo"
                             type="date"

src/pages/GazetteIssue/index.js

@@ -44,12 +44,12 @@ const Index = () => {
     // const navigate = useNavigate()
     const [searchCriteria, setSearchCriteria] = React.useState({
         year: dateStr_Year(new Date()),
-        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        // dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     
     const [exportCriteria, setExportCriteria] = React.useState({
         // year: dateStr_Year(new Date()),
-        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        // dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
 
     const [attachments, setAttachments] = React.useState([]);

src/pages/Holiday/SearchForm.js

@@ -96,7 +96,7 @@ const SearchHolidayForm = ({ applySearch, comboData}) => {
                             {...register("dateTo")}
                             InputProps={{ inputProps: { min: minDate } }}
                             onChange={(newValue) => {
-                                setMaxDate(DateUtils.dateStr(newValue));
+                                setMaxDate(DateUtils.dateValue(newValue));
                             }}
                             id="dateTo"
                             type="date"

src/pages/Holiday/index.js

@@ -44,7 +44,7 @@ const Index = () => {
     // const navigate = useNavigate()
     const [searchCriteria, setSearchCriteria] = React.useState({
         year: dateStr_Year(new Date()),
-        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        // dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [attachments, setAttachments] = React.useState([]);
     const [waitImport, setWaitImport] = React.useState(false);

src/pages/Message/Search/DataGrid.js

@@ -1,11 +1,10 @@
 // material-ui
 import * as React from 'react';
-import {
-    Button} from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function MsgTable({ recordList }) {
@@ -53,7 +52,7 @@ export default function MsgTable({ recordList }) {
             flex: 1 ,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.subject}</u></Button>;
+                return clickableLink('/msg/details/' + params.row.id, params.row.subject);
             },
         },
     ];

src/pages/Message/Search/SearchForm.js

@@ -99,7 +99,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                                     defaultValue={searchCriteria.dateFrom}
                                     InputProps={{ inputProps: { max: maxDate } }}
                                     onChange={(newValue) => {
-                                        setMinDate(DateUtils.dateStr(newValue));
+                                        setMinDate(DateUtils.dateValue(newValue));
                                     }}
                                     InputLabelProps={{
                                         shrink: true
@@ -120,7 +120,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                                     {...register("dateTo")}
                                     InputProps={{ inputProps: { min: minDate } }}
                                     onChange={(newValue) => {
-                                        setMaxDate(DateUtils.dateStr(newValue));
+                                        setMaxDate(DateUtils.dateValue(newValue));
                                     }}
                                     aria-label={intl.formatMessage({id: 'dateTo'})}
                                     id="dateTo"

src/pages/Message/Search/index.js

@@ -33,8 +33,8 @@ const Index = () => {
 
     const [record,setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -342,7 +342,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                         id="brExpiryDate"
                                         name="brExpiryDate"
                                         type="date"
-                                        inputProps={{ min: DateUtils.dateStr(new Date()) }}
+                                        inputProps={{ min: DateUtils.dateValue(new Date()) }}
                                         error={Boolean(formik.errors["brExpiryDate"])}
                                         helperText={formik.errors["brExpiryDate"] ? formik.errors["brExpiryDate"] : ''}
                                         onChange={formik.handleChange}

src/pages/Organization/DetailPage/index.js

@@ -84,7 +84,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.dateStr(response.data.brExpiryDate) : "";
+                        response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateValue(response.data.brExpiryDate) : "";
                         setFormData(response.data)
                         setList(response.historyList)
                     }
@@ -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.dateStr(response.data.brExpiryDate) : "";
+                    response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateValue(response.data.brExpiryDate) : "";
                     setFormData(response.data)
                     setList(response.historyList)
                 }

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -212,7 +212,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                             id="brExpiryDate"
                                             name="brExpiryDate"
                                             type="date"
-                                            inputProps={{ min: DateUtils.dateStr(new Date()) }}
+                                            inputProps={{ min: DateUtils.dateValue(new Date()) }}
                                             error={Boolean(formik.errors["brExpiryDate"])}
                                             helperText={formik.errors["brExpiryDate"] ? formik.errors["brExpiryDate"] : ''}
                                             onChange={formik.handleChange}

src/pages/Organization/DetailPage_FromUser/index.js

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

src/pages/Organization/SearchPage/OrganizationSearchForm.js

@@ -22,7 +22,7 @@ import {ThemeProvider} from "@emotion/react";
 const OrganizationSearchForm = ({ applySearch }) => {
 
     const [type, setType] = useState([]);
-    const [creditorSelected, setCreditorSelected] = React.useState({ key: 0, labelCht: '全部', label: 'All',  type: 'all' });
+    const [creditorSelected, setCreditorSelected] = React.useState(ComboData.CreditorStatus[0]);
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
 
@@ -47,6 +47,7 @@ const OrganizationSearchForm = ({ applySearch }) => {
 
     function resetForm() {
         setType([]);
+        setCreditorSelected(ComboData.CreditorStatus[0]);
         reset();
     }
 
@@ -117,7 +118,12 @@ const OrganizationSearchForm = ({ applySearch }) => {
                                     options={ComboData.CreditorStatus}
                                     value={creditorSelected}
                                     onChange={(event, newValue) => {
-                                        setCreditorSelected(newValue);
+                                        if(newValue == null){
+                                            setCreditorSelected(ComboData.CreditorStatus[0]);
+                                        }else{
+                                            setCreditorSelected(newValue);
+                                        }
+                                        
                                     }}
                                     getOptionLabel={(option) => option.label}
                                     renderInput={(params) => (
@@ -150,9 +156,10 @@ const OrganizationSearchForm = ({ applySearch }) => {
                         <Grid item sx={{ mr: 3, mb: 3}}>
                             <Button
                                 variant="contained"
+                                color="cancel"
                                 onClick={resetForm}
                             >
-                                Clear
+                                Reset
                             </Button>
                         </Grid>
 

src/pages/Organization/SearchPage/OrganizationTable.js

@@ -46,24 +46,28 @@ export default function OrganizationTable({ recordList }) {
             field: 'brNo',
             headerName: 'BR No.',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'enCompanyName',
             field: 'enCompanyName',
             headerName: 'Name (Eng)',
             flex: 1,
+            minWidth: 200,
         },
         {
             id: 'chCompanyName',
             field: 'chCompanyName',
             headerName: 'Name (Ch)',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'contactTel',
             field: 'contactTel',
             headerName: 'Phone',
             flex: 1,
+            minWidth: 150,
             renderCell: (params) => {
                 let phone = JSON.parse(params.value);
                 let contact = "";
@@ -78,8 +82,9 @@ export default function OrganizationTable({ recordList }) {
             field: 'brExpiryDate',
             headerName: 'BR Expiry Date',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
-                return DateUtils.dateStr(params?.value);
+                return DateUtils.dateValue(params?.value);
             }
         },
         {
@@ -87,6 +92,7 @@ export default function OrganizationTable({ recordList }) {
             field: 'creditor',
             headerName: 'Credit Client',
             width: 150,
+            minWidth: 150,
             valueGetter: (params) => {
                 return params?.value?"Yes":"";
             }

src/pages/Payment/Details_GLD/DataGrid.js

@@ -43,11 +43,11 @@ export default function SearchPublicNoticeTable({ recordList }) {
             flex: 1,
             renderCell: (params) => {
                 let appNo = params.row.appNo;
-                // console.log(params)
+                console.log(params.row)
                 return <div style={{ margin: 4, textAlign:"left"}}>Gazette Supplement No. 6 <br/>
                     {isORGLoggedIn()?<>Care Of: {params.row.careOf}<br /></>:null}
                     App No: {appNo}<br/>
-                    Issue Date: {DateUtils.dateStr(params.row.issueDate)}<br/>
+                    Issue Date: {DateUtils.dateValue(params.row.issueDate)}<br/>
                     Length: {params.row.length+ " cm"}</div>
             },
         },

src/pages/Payment/Details_Public/DataGrid.js

@@ -74,7 +74,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                     <FormattedMessage id="gazetteSampleName"/><br/>
                     {isORGLoggedIn()?<><FormattedMessage id="careOf"/>: {params.row.careOf}<br /></>:null}
                     <FormattedMessage id="applicationId"/>: {appNo}<br/>
-                    <FormattedMessage id="gazetteDate"/>: {locale === 'en' ? DateUtils.dateStr(params.row.issueDate) : DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
+                    <FormattedMessage id="gazetteDate"/>: {locale === 'en' ? DateUtils.dateValue(params.row.issueDate) : DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
                     <FormattedMessage id="gazetteLength"/>: {params.row.length+ " cm"}</div>
             },
         },

src/pages/Payment/Search_GLD/DataGrid.js

@@ -1,13 +1,11 @@
 // material-ui
 import * as React from 'react';
-import {
-    Button
-} from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -44,18 +42,20 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'appNos',
             headerName: 'Application No.',
             flex: 1,
+            minWidth: 150,
             renderCell: (params) => {
                 let appNo = params.row.appNos;
-                return <div style={{ margin: 4 }}>{appNo}</div>
+                return <div style={{ marginTop: 2, marginBottom: 2 }}>{appNo}</div>
             },
         },
         {
             field: 'actions',
             headerName: 'Transaction No.',
             flex: 1,
+            minWidth: 200,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
         {
@@ -63,6 +63,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'transDateTime',
             headerName: 'Transaction Date',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 return DateUtils.dateStr(params?.value);
             }

src/pages/Payment/Search_GLD/SearchForm.js

@@ -36,6 +36,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     };
 
     function resetForm() {
+        setStatus(ComboData.paymentStatus[0]);
         reset();
     }
 
@@ -82,7 +83,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: maxDate } }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateStr(newValue));
+                                            setMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -98,7 +99,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         {...register("dateTo")}
                                         InputProps={{ inputProps: { min: minDate } }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateStr(newValue));
+                                            setMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="dateTo"
                                         type="date"
@@ -134,7 +135,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                 getOptionLabel={(option) => option.label}
                                 inputValue={status?.label ? status?.label : ""}
                                 onChange={(event, newValue) => {
-                                    if (newValue !== null) {
+                                    if(newValue==null){
+                                        setStatus(ComboData.paymentStatus[0]);
+                                    }else{
                                         setStatus(newValue);
                                     }
                                 }}

src/pages/Payment/Search_GLD/index.js

@@ -32,8 +32,8 @@ const Index = () => {
 
     const [record,setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/Payment/Search_Public/DataGrid.js

@@ -1,7 +1,7 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery
+    useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
@@ -10,6 +10,7 @@ import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -40,10 +41,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/paymentPage/details/' + params.row.id);
-    };
-
     const handleEditDoubleClick = (params) =>{
         navigate('/paymentPage/details/' + params.row.id);
     };
@@ -56,7 +53,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
         {

src/pages/Payment/Search_Public/SearchForm.js

@@ -14,8 +14,24 @@ import * as ComboData from "utils/ComboData";
 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 }) => {
     const intl = useIntl();
@@ -23,6 +39,62 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
     const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
 
+    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
+    const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+
+    React.useEffect(() => {
+        // console.log(minDate)
+        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",
         boxShadow: 1,
@@ -42,17 +114,25 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const { reset, register, handleSubmit } = useForm()
 
     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 = {
             code: data.code,
             transNo: data.transNo,
-            dateFrom: data.dateFrom,
-            dateTo: data.dateTo,
+            dateFrom: sentDateFrom,
+            dateTo: sentDateTo,
             status : (status?.type && status?.type != 'all') ? status?.type : "",
         };
         applySearch(temp);
     };
 
     function resetForm() {
+        setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
+        setMaxDate(DateUtils.dateValue(new Date()))
         reset();
     }
 
@@ -100,9 +180,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                     type="date"
                                     label={intl.formatMessage({id: 'payDateFrom'})}
                                     defaultValue={searchCriteria.dateFrom}
-                                    InputProps={{ inputProps: { max: maxDate } }}
+                                    InputProps={{
+                                        inputComponent: FormDateInputComponent,
+                                    }}
                                     onChange={(newValue) => {
-                                        setMinDate(DateUtils.dateStr(newValue));
+                                        setMinDate(newValue.target.value);
                                     }}
                                     InputLabelProps={{
                                         shrink: true
@@ -117,9 +199,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                         shrink: true
                                     }}
                                     {...register("dateTo")}
-                                    InputProps={{ inputProps: { min: minDate } }}
+                                    InputProps={{
+                                        inputComponent: ToDateInputComponent,
+                                    }}
                                     onChange={(newValue) => {
-                                        setMaxDate(DateUtils.dateStr(newValue));
+                                        setMaxDate(newValue.target.value);
                                     }}
                                     id="dateTo"
                                     type="date"
@@ -144,6 +228,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             onChange={(event, newValue) => {
                                 if (newValue !== null) {
                                     setStatus(newValue);
+                                }else{
+                                    setStatus(ComboData.paymentStatus[0]);
                                 }
                             }}
                             renderInput={(params) => (

src/pages/Payment/Search_Public/index.js

@@ -33,8 +33,8 @@ const Index = () => {
 
     const [record,setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/Proof/Create_FromApp/index.js

@@ -55,7 +55,7 @@ const Index = () => {
                     responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;
 
                     responseData.data["issueNoStr"] = responseData.data.issueVolume + "/" + responseData.data.issueYear + " No. " + responseData.data.issueNo
-                    responseData.data["issueDate"] = DateUtils.dateStr(responseData.data.issueDate);
+                    responseData.data["issueDate"] = DateUtils.dateValue(responseData.data.issueDate);
 
                     responseData.data["groupType"] = responseData.data.groupTitle;
 

src/pages/Proof/Payment/Pay.js

@@ -100,7 +100,7 @@ const Index = () => {
                 });
                 const latestDataObjects = Object.values(latestData);
                 
-                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 && item.status !== "APPR");
+                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
                 const filteredAppIds = filteredData.map(item => item.appId);
                 
                 const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));

src/pages/Proof/Payment/Pay_Creditor.js

@@ -88,10 +88,17 @@ const Index = () => {
 
 
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
-                                    我們已收到你已確定申請編號: {record?.appNo} 的稿件校對確定及可付印的指示，並將安排刊登於憲報
-                                    期數 {record?.appNo} 年 {record?.issueVolume} 卷 第 {record?.issueNo} 期內。
+                                    <FormattedMessage 
+                                        id='MSG.pay_credity1'
+                                        values={{
+                                            appNo: record?.appNo,
+                                            year: record?.issueYear,
+                                            issueVolume: record?.issueVolume, 
+                                            issueNo: record?.issueNo
+                                        }}
+                                    />
                                     <br/><br/>
-                                    此公共啟事申請的費用將於下期發出的繳費發票時收取，請依時繳費。
+                                    <FormattedMessage id="MSG.pay_credity2"/>
                                 </Typography>
 
                                     <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>

src/pages/Proof/Reply_Public/ProofForm.js

@@ -67,7 +67,7 @@ const FormPanel = ({ formData }) => {
             }
 
             if (isOverTime()) {
-                setWarningText("回覆逾時，請重新申請。");
+                setWarningText(intl.formatMessage({id: 'MSG.proofOutOfTime'}));
                 setIsWarningPopUp(true);
                 return;
             }
@@ -80,7 +80,12 @@ const FormPanel = ({ formData }) => {
                     vaild: values.vaild,
                 },
                 files: attachments ? attachments : [],
-                onSuccess: function () {
+                onSuccess: function (responseData) {
+                    if(responseData.msg){
+                        setWarningText(intl.formatMessage({id: 'MSG.proofOutOfTime'}));
+                        setIsWarningPopUp(true);
+                        return;
+                    }
                     notifyActionSuccess("提交成功!")
                     if (actionValue) {
                         navigate("/proof/pay/" + params.id);
@@ -127,10 +132,10 @@ const FormPanel = ({ formData }) => {
     }
 
     const isOverTime = () => {
-        let proofPaymentDeadline = DateUtils.convertToDate(formik.values?.proofPaymentDeadline);
-        if (!proofPaymentDeadline) return true;
+        let reviseDeadline = DateUtils.convertToDate(formik.values?.reviseDeadline);
+        if (!reviseDeadline) return true;
         let current = new Date();
-        return current.getTime() > proofPaymentDeadline;
+        return current.getTime() > reviseDeadline;
     }
 
 
@@ -154,7 +159,7 @@ const FormPanel = ({ formData }) => {
                                     <FormattedMessage id="proofReplyDate" /> :&nbsp;
                                     {
                                         locale === 'en' ?
-                                            DateUtils.dateStr(formik.values.replyDate)
+                                            DateUtils.dateValue(formik.values.replyDate)
                                             :
                                             DateUtils.datetimeStr_Cht(formik.values.replyDate)
                                     }

src/pages/Proof/Search_GLD/DataGrid.js

@@ -1,13 +1,11 @@
 // material-ui
 import * as React from 'react';
-import {
-    Button,
-} from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
 import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -18,10 +16,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
-    };
-
     const columns = [
         {
             field: 'actions',
@@ -29,7 +23,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: 170,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
         },
         {
@@ -52,6 +46,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'actions',
             headerName: 'Status',
             flex: 1,
+            minWidth: 100,
             renderCell: (params) => {
                 return ProofStatus.getStatus_Eng(params);
             },
@@ -61,6 +56,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'created',
             headerName: 'Proof Issue Date',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -70,6 +66,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'replyDate',
             headerName: 'Confirmed/ Return Date',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return params?.value ? DateUtils.datetimeStr(params?.value) : "";
             }
@@ -79,6 +76,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'contactPerson',
             headerName: 'Client',
             flex: 1,
+            minWidth: 200,
             renderCell: (params) => {
                 let company = params.row.enCompanyName != null?params.row.enCompanyName: params.row.chCompanyName;
                 company = company != null ? company : "";
@@ -109,6 +107,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'groupTitle',
             headerName: 'Gazette Group',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return (params?.value) ? (params?.value) : "";
             }
@@ -118,6 +117,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'fee',
             headerName: 'Amount ($)',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }

src/pages/Proof/Search_GLD/SearchForm.js

@@ -210,7 +210,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: maxDate } }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateStr(newValue));
+                                            setMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -227,7 +227,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         {...register("dateTo")}
                                         InputProps={{ inputProps: { min: minDate } }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateStr(newValue));
+                                            setMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="dateTo"
                                         type="date"
@@ -315,9 +315,10 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                         <Grid item sx={{ ml: 3, mb: 3 }}>
                             <Button
                                 variant="contained"
+                                color="cancel"
                                 onClick={resetForm}
                                 >
-                                Clear
+                                Reset
                             </Button>
                         </Grid>
 

src/pages/Proof/Search_GLD/index.js

@@ -34,8 +34,8 @@ const UserSearchPage_Individual = () => {
     const [orgCombo, setOrgCombo] = React.useState([]);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/Proof/Search_Public/DataGrid.js

@@ -1,7 +1,7 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery
+    useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
@@ -13,6 +13,7 @@ import {
   } from "utils/Utils";
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -43,9 +44,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
-    };
 
     /*eslint no-irregular-whitespace: ["error", { "skipComments": true }]*/
     /*const getGroupTitle = (title) => {
@@ -94,19 +92,19 @@ export default function SearchPublicNoticeTable({ recordList }) {
         {
             field: 'actions',
             headerName: intl.formatMessage({id: 'proofId'}),
-            width: isMdOrLg ? 'auto' : 250,
+            width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return clickableLink('/proof/reply/' + params.row.id,params.row.refNo);
             },
         },
         {
             id: 'appId',
             field: 'appId',
             headerName: isORGLoggedIn()?intl.formatMessage({id: 'gazetteCount3'}):intl.formatMessage({id: 'gazetteCount2'}),
-            width: isMdOrLg ? 'auto' : 160,
-            flex: isMdOrLg ? 1 : undefined,
+            width: isMdOrLg ? 'auto' : 330,
+            flex: isMdOrLg ? 2 : undefined,
             renderCell: (params) => {
                 // let appNo = params.row.appNo;
                 // let code = params.row.groupNo;
@@ -120,7 +118,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'created',
             field: 'created',
             headerName: intl.formatMessage({id: 'proofDate'}),
-            width: isMdOrLg ? 'auto' : 250,
+            width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
@@ -130,7 +128,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'proofPaymentDeadline',
             field: 'proofPaymentDeadline',
             headerName: intl.formatMessage({id: 'replyBefore'}),
-            width: isMdOrLg ? 'auto' : 250,
+            width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
                 let proofPaymentDeadline = DateUtils.convertToDate(params?.value);
@@ -142,7 +140,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'replyDate',
             field: 'replyDate',
             headerName: intl.formatMessage({id: 'replyDate'}),
-            width: isMdOrLg ? 'auto' : 250,
+            width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             valueGetter: (params) => {
                 return params?.value ? DateUtils.datetimeStr(params?.value) : "";
@@ -161,8 +159,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'fee',
             field: 'fee',
             headerName: intl.formatMessage({id: 'fee'}),
-            width: isMdOrLg ? 'auto' : 250,
-            flex: isMdOrLg ? 1.5 : undefined,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }

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.dateStr(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.dateStr(newValue));
+                                        setMaxDate(newValue.target.value);
                                     }}
                                     id="dateTo"
                                     type="date"
@@ -268,6 +350,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                             onChange={(event, newValue) => {
                                 if (newValue !== null) {
                                     setStatus(newValue);
+                                }else{
+                                    setStatus(ComboData.proofStatus[0]);
                                 }
                             }}
                             renderInput={(params) => (

src/pages/Proof/Search_Public/index.js

@@ -34,8 +34,8 @@ const UserSearchPage_Individual = () => {
     const [record,setRecord] = React.useState([]);
     const [issueCombo,setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -374,7 +374,7 @@ const ApplicationDetailCard = (
 
                                         <Grid item xs={12} md={8} lg={8}>
                                             <Stack direction="row">
-                                                <FormControl variant="outlined" sx={{ width: '25%' }} disabled >
+                                                <FormControl variant="outlined" sx={{ width: '25%', minWidth: 100, }} disabled >
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("contactTelNo.countryCode",
@@ -459,7 +459,7 @@ const ApplicationDetailCard = (
 
                                         <Grid item xs={12} md={8} lg={8}>
                                             <Stack direction="row">
-                                                <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
+                                                <FormControl variant="outlined" sx={{ width: '25%', minWidth: 100, }} disabled>
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("contactFaxNo.countryCode",

src/pages/PublicNotice/Details_GLD/ClientDetailCard.js

@@ -24,6 +24,7 @@ import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch';
 import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
 import HighlightOff from '@mui/icons-material/HighlightOff';
 // import {useNavigate} from "react-router-dom";
+import * as DateUtils from "utils/DateUtils";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ClientDetailCard = (
@@ -35,6 +36,9 @@ const ClientDetailCard = (
 ) => {
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
+    const [orgDetailData, setOrgDetailData] = useState({});
+    const [brExpiryDate,setBrExpiryDate] = useState("");
+    const [brNo,setBrNo] = useState("");
     const [onReady, setOnReady] = useState(false);
     const [companyName, setCompanyName] = useState({ enCompanyName: "", chCompanyName: "" });
     const { register,
@@ -46,6 +50,9 @@ const ClientDetailCard = (
         //if user data from parent are not null
         if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) {
             setCurrentApplicationDetailData(applicationDetailData.userData);
+            if (!applicationDetailData.orgDetail == null){
+                setOrgDetailData(applicationDetailData.orgDetail.data);
+            }
             if (!applicationDetailData.companyName1 == null) {
                 setCompanyName(applicationDetailData.companyName);
             } else {
@@ -62,9 +69,42 @@ const ClientDetailCard = (
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentApplicationDetailData).length > 0) {
-            setOnReady(true);
+            if( currentApplicationDetailData.orgId!=null){
+                if (Object.keys(orgDetailData).length > 0) {
+                    setBrExpiryDate(DateUtils.dateValue(orgDetailData.brExpiryDate));
+                    setBrNo(orgDetailData.brNo);
+                    setOnReady(true);
+                }else{
+                    setBrExpiryDate(DateUtils.dateValue(currentApplicationDetailData.brExpiryDate));
+                    setBrNo(currentApplicationDetailData.brNo);
+                    setOnReady(true);
+                }
+            }else{
+                setOnReady(true);
+            }
         }
     }, [currentApplicationDetailData]);
+    
+    useEffect(() => {
+        if (brNo != undefined && brNo.length > 0) {
+            console.log(brExpiryDate)
+            var currentDate = new Date();  // Current date
+            var targetDate = new Date(brExpiryDate);  // Target date
+
+            if (targetDate < currentDate) {
+                alert("The BR is expired.")
+            } else {
+                var timeDiff = Math.abs(currentDate.getTime()-targetDate.getTime());
+                console.log(timeDiff)
+                var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
+                console.log(diffDays)
+                if (diffDays <= 7&&diffDays > 0){
+                    alert("The BR is expiring.")
+                }
+            }
+            setOnReady(true);
+        }
+    }, [brNo]);
 
     const handleViewClick = () => () => {
         console.log(currentApplicationDetailData)
@@ -244,6 +284,56 @@ const ClientDetailCard = (
                                     </FormControl>
                                 </Grid>
                             </Grid>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">BR No:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
+                                        <OutlinedInput
+                                            size="small"
+                                            {...register("brNo",
+                                                {
+                                                    value: brNo,
+                                                })}
+                                            id='brNo'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
+                                        />
+                                    </FormControl>
+                                </Grid>
+                            </Grid>
+                            <Grid container direction="column" justifyContent="flex-start"
+                                alignItems="flex-start">
+                                <Grid item xs={12} md={12} lg={12} mb={1}
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
+                                    <FormLabel><Typography variant="h5">BR Expiry Date:</Typography></FormLabel>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
+                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
+                                        <OutlinedInput
+                                            size="small"
+                                            {...register("brExpiryDate",
+                                                {
+                                                    value: brExpiryDate,
+                                                })}
+                                            id='brExpiryDate'
+                                            sx={{
+                                                "& .MuiInputBase-input.Mui-disabled": {
+                                                    WebkitTextFillColor: "#000000",
+                                                    background: "#f8f8f8",
+                                                },
+                                            }}
+                                        />
+                                    </FormControl>
+                                </Grid>
+                            </Grid>
                             <Grid container direction="column" justifyContent="flex-start"
                                 alignItems="flex-start">
                                 <Grid item xs={12} md={12} lg={12} mb={1}

src/pages/PublicNotice/Details_GLD/index.js

@@ -410,7 +410,7 @@ const PublicNoticeDetail_GLD = () => {
           <Grid item xs={12} md={12} lg={3} xl={3} sx={{ mt: { xs: -3, sm: -3 } }}>
             <Grid container>
               <Grid item xs={12} md={12}>
-                <Box xs={12} md={12} height='800px' sx={{ ml: 2, mt: 3, mb: 3, mr: { xs: 2, sm: 2 }, borderRadius: '10px', backgroundColor: '#ffffff' }}>
+                <Box xs={12} md={12} sx={{ ml: 2, mt: 3, mb: 3, mr: { xs: 2, sm: 2 }, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                   <ClientDetailCard
                     // updateUserObject={updateUserObject}
                     applicationDetailData={applicationDetailData}

src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js

@@ -1,27 +1,22 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery
+    useMediaQuery
 } from '@mui/material';
-import { useNavigate } from "react-router-dom";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import * as DateUtils from "utils/DateUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import {useTheme} from "@emotion/react";
+import { clickableLink } from 'utils/CommonFunction';
 // import * as StatusUtils from "./PublicNoteStatusUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
 
-    const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
-    const handleEditClick = (params) => () => {
-        navigate('/paymentPage/details/' + params.row.id);
-    };
-
     const columns = [
         {
             field: 'actions',
@@ -30,7 +25,7 @@ export default function SubmittedTab({ rows }) {
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
         {

src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js

@@ -1,13 +1,12 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery,
+ useMediaQuery,
 } from '@mui/material';
 import {
     GridActionsCellItem,
 } from "@mui/x-data-grid";
 import * as Icon from 'utils/IconUtils';
-import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
 import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import {FiDataGrid} from "components/FiDataGrid";
@@ -15,18 +14,14 @@ import * as FormatUtils from "utils/FormatUtils"
 import * as HttpUtils from "utils/HttpUtils"
 import * as UrlUtils from "utils/ApiPathConst"
 import {useTheme} from "@emotion/react";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
 
-    const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
-    const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
-    };
-
     const onDownloadClick = (params) => () => {
         HttpUtils.fileDownload({
             url: UrlUtils.GEN_GAZETTE_PROOF+"/"+params.row.id,
@@ -42,7 +37,7 @@ export default function ProofTab({rows}) {
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
         },
         {

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -149,7 +149,7 @@ const ApplicationDetailCard = (
                 });
                 const latestDataObjects = Object.values(latestData);
                 
-                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 && item.status !== "APPR");
+                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
                 const filteredAppIds = filteredData.map(item => item.appId);
                 
                 const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));

src/pages/PublicNotice/Details_Public/tabTableDetail/PaymentTab.js

@@ -1,31 +1,26 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery
+     useMediaQuery
 } from '@mui/material';
-import { useNavigate } from "react-router-dom";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import * as DateUtils from "utils/DateUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // import * as StatusUtils from "./PublicNoteStatusUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
 
-    const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const intl = useIntl();
     
   const { locale } = intl;
 
-    const handleEditClick = (params) => () => {
-        navigate('/paymentPage/details/' + params.row.id);
-    };
-
     const columns = [
         {
             field: 'actions',
@@ -34,7 +29,7 @@ export default function SubmittedTab({ rows }) {
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
         {

src/pages/PublicNotice/Details_Public/tabTableDetail/ProofTab.js

@@ -1,27 +1,23 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery,
+ useMediaQuery,
 } from '@mui/material';
-import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
 import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
     const intl = useIntl();
-    const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const { locale } = intl;
 
-    const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
-    };
 
     const columns = [
         {
@@ -31,7 +27,7 @@ export default function ProofTab({rows}) {
             width: 200,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
         },
         {

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -138,7 +138,7 @@ export default function SubmittedTab({ rows }) {
                 });
                 const latestDataObjects = Object.values(latestData);
                 
-                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 && item.status !== "APPR");
+                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
                 const filteredAppIds = filteredData.map(item => item.appId);
                 
                 const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -1,4 +1,4 @@
-// material-ui
+// material-uistatus
 import {
     Button,
     Grid, TextField,
@@ -16,33 +16,111 @@ 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();
     const [type, setType] = React.useState([]);
-    const [status, setStatus] = React.useState([{ key: 0, label: 'all', type: 'all' }]);
+    const [status, setStatus] = React.useState(localStorage.getItem('userData').creditor?ComboData.publicNoticeStatic_Creditor[0]:ComboData.publicNoticeStatic[0]);
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
-    const [selectedLabelsString, setSelectedLabelsString] = React.useState('');
+    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 = selectedLabelsString
+        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,
@@ -52,7 +130,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
     function resetForm() {
         setType([]);
-        setStatus([{ key: 0, label: 'All', labelCht: "全部", type: 'all' }]);
+        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();
     }
 
@@ -90,12 +170,15 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("dateFrom")}
                             id="dateFrom"
                             type="date"
+                            format="DD/MM/YYYY"
                             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.dateStr(newValue));
+                                setMinDate(newValue.target.value);
                             }}
                             InputLabelProps={{
                                 shrink: true
@@ -112,12 +195,15 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("dateTo")}
                             id="dateTo"
                             type="date"
+                            // format="DD/MM/YYYY"
                             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.dateStr(newValue));
+                                setMaxDate(newValue.target.value);
                             }}
                         />
                     </Grid>
@@ -137,7 +223,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         </Grid>:null                    
                     }
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                    {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("contact")}
@@ -149,9 +235,44 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                 shrink: true
                             }}
                         />
+                    </Grid> */}
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Autocomplete
+                            {...register("status")}
+                            id="status"
+                            size="small"
+                            // filterOptions={(options)=>options}
+                            options={
+                                localStorage.getItem('userData').creditor ?
+                                    ComboData.publicNoticeStatic_Creditor :
+                                    ComboData.publicNoticeStatic
+                            }
+                            value={status}
+                            // inputValue={status?.labelCht}
+                            getOptionLabel={(option) => intl.formatMessage({id: option.label})}
+                            onChange={(event, newValue) => {
+                                if(newValue ==null){
+                                    setStatus(localStorage.getItem('userData').creditor?ComboData.publicNoticeStatic_Creditor[0]:ComboData.publicNoticeStatic[0]);
+                                }else{
+                                    setStatus(newValue);
+                                }
+                            }}
+                            renderInput={(params) => (
+                                <TextField {...params}
+                                    label={intl.formatMessage({id: 'status'})}
+                                    aria-label={intl.formatMessage({id: 'status'})}
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
+                                />
+                            )}
+                        // InputLabelProps={{
+                        //     shrink: true
+                        // }}
+                        />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                    {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Autocomplete
                             multiple
                             {...register("status")}
@@ -198,15 +319,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         //     shrink: true
                         // }}
                         />
-                    </Grid>
-                    {/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/}
-                    {/*    <TextField*/}
-                    {/*        fullWidth*/}
-                    {/*        {...register("subDivisionId")}*/}
-                    {/*        id="subDivision"*/}
-                    {/*        label="Sub-Division"*/}
-                    {/*    />*/}
-                    {/*</Grid>*/}
+                    </Grid> */}
+                
 
                 </Grid>
 

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js

@@ -18,8 +18,8 @@ const UserSearchPage_Individual = () => {
 
     const [record,setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
 
     React.useEffect(() => {

src/pages/PublicNotice/Search_GLD/DataGrid.js

@@ -1,6 +1,7 @@
 // material-ui
 import * as React from 'react';
 import {
+    //Link,
     Button,
     Grid,
     Typography,
@@ -14,7 +15,7 @@ import * as FormatUtils from "utils/FormatUtils";
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
-import { notifyActionSuccess } from 'utils/CommonFunction';
+import { notifyActionSuccess, clickableLink } from 'utils/CommonFunction';
 import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -34,9 +35,6 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/application/' + params.id);
-    };
 
 
     const columns = [
@@ -46,7 +44,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.appNo}</u></Button>;
+                return clickableLink('/application/' + params.id, params.row.appNo);
             },
         },
         {
@@ -63,6 +61,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             field: 'created',
             headerName: 'Submit Date',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -71,6 +70,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             id: 'contactPerson',
             field: 'contactPerson',
             headerName: 'Client',
+            minWidth: 250,
             flex: 2,
             renderCell: (params) => {
                 let company = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName;
@@ -102,6 +102,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             field: 'groupNo',
             headerName: 'Gazette Code',
             flex: 0.5,
+            minWidth: 150,
             valueGetter: (params) => {
                 return (params?.value) ? (params?.value) : "";
             }
@@ -111,6 +112,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             field: 'issueId',
             headerName: 'Gazette Issue No.',
             flex: 1.5,
+            minWidth: 350,
             valueGetter: (params) => {
                 return params.row.issueYear
                     + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -26,8 +26,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     const [orgCombo, setOrgCombo] = React.useState();
     const [issueSelected, setIssueSelected] = React.useState({});
     const [issueCombo, setIssueCombo] = React.useState([]);
-    const [selectedStatus, setSelectedStatus] = React.useState([]);
-    const [selectedLabelsString, setSelectedLabelsString] = React.useState('');
+    const [selectedStatus, setSelectedStatus] = React.useState({key: 0, label: 'All', type: 'all'});
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
@@ -38,7 +37,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     const marginBottom = 2.5;
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
-        data.status = selectedLabelsString
+        data.status = selectedStatus?.type
         let typeArray = [];
 
         for (let i = 0; i < type.length; i++) {
@@ -50,7 +49,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
             dateFrom: data.dateFrom,
             dateTo: data.dateTo,
             contact: data.contact,
-            status: (data.status === '' || data.status.includes("all")) ? "" : data.status,
+            status: (data.status === '' || data.status?.includes("all")) ? "" : data.status,
             orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "",
             issueId: issueSelected?.id,
             groupNo: data.groupNo,
@@ -75,7 +74,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
         // setStatus({ key: 0, label: 'All', type: 'all' });
         setOrgSelected({});
         setIssueSelected({});
-        setSelectedStatus([]);
+        setSelectedStatus({key: 0, label: 'All', type: 'all'});
         reset();
     }
 
@@ -145,7 +144,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: maxDate } }}
                                         onChange={(newValue) => {
-                                            setMinDate(DateUtils.dateStr(newValue));
+                                            setMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -162,7 +161,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         {...register("dateTo")}
                                         InputProps={{ inputProps: { min: minDate } }}
                                         onChange={(newValue) => {
-                                            setMaxDate(DateUtils.dateStr(newValue));
+                                            setMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="dateTo"
                                         type="date"
@@ -188,29 +187,31 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                         </Grid>
 
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
+                        <Autocomplete
+                                {...register("status")}
+                                id="status"
+                                size="small"
+                                options={ComboData.publicNoticeStatic_GLD}
+                                value={selectedStatus}
+                                onChange={(event, newValue) => {
+                                    if(newValue==null){
+                                        setSelectedStatus(ComboData.publicNoticeStatic_GLD[0]);
+                                    }else{
+                                        setSelectedStatus(newValue);
+                                    }
+                                }}
+                                getOptionLabel={(option) => option.label}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Status"
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                )}
+                            />
                             {/* <Autocomplete
-                            {...register("status")}
-                            disablePortal
-                            id="status"
-                            filterOptions={(options) => options}
-                            options={ComboData.publicNoticeStatic_GLD}
-                            value={status}
-                            inputValue={status?.label}
-                            onChange={(event, newValue) => {
-                                if (newValue !== null) {
-                                    setStatus(newValue);
-                                }
-                            }}
-                            renderInput={(params) => (
-                                <TextField {...params}
-                                    label="Status"
-                                />
-                            )}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        /> */}
-                            <Autocomplete
                                 multiple
                                 {...register("status")}
                                 id="status"
@@ -242,7 +243,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         }}
                                     />
                                 )}
-                            />
+                            /> */}
                         </Grid>
 
                         {
@@ -257,9 +258,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         value={orgSelected}
                                         inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
                                         onChange={(event, newValue) => {
-                                            if (newValue !== null) {
                                                 setOrgSelected(newValue);
-                                            }
                                         }}
                                         renderInput={(params) => (
                                             <TextField {...params}
@@ -285,9 +284,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                 inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
                                 getOptionLabel={(option) => getIssueLabel(option)}
                                 onChange={(event, newValue) => {
-                                    if (newValue !== null) {
                                         setIssueSelected(newValue);
-                                    }
                                 }}
                                 renderInput={(params) => (
                                     <TextField {...params}
@@ -320,9 +317,10 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             <Grid item sx={{ ml: 3 }}>
                                 <Button
                                     variant="contained"
+                                    color="cancel"
                                     onClick={resetForm}
                                 >
-                                    Clear
+                                    Reset
                                 </Button>
                             </Grid>
 

src/pages/PublicNotice/Search_GLD/index.js

@@ -34,8 +34,8 @@ const UserSearchPage_Individual = () => {
     const [orgCombo, setOrgCombo] = React.useState([]);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        dateTo: DateUtils.dateStr(new Date()),
-        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate() - 14)),
+        dateTo: DateUtils.dateValue(new Date()),
+        dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)),
     });
     const [onReady, setOnReady] = React.useState(false);
 

src/pages/Recon/SearchForm.js

@@ -188,7 +188,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         ////defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: sysTxnMaxDate } }}
                                         onChange={(newValue) => {
-                                            setSysTxnMinDate(DateUtils.dateStr(newValue));
+                                            setSysTxnMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -204,7 +204,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         {...register("sysTxnDateTo")}
                                         InputProps={{ inputProps: { min: sysTxnMinDate } }}
                                         onChange={(newValue) => {
-                                            setsysTxnMaxDate(DateUtils.dateStr(newValue));
+                                            setsysTxnMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="sysTxnDateTo"
                                         type="date"
@@ -230,7 +230,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         //defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: txnMaxDate } }}
                                         onChange={(newValue) => {
-                                            setTxnMaxDate(DateUtils.dateStr(newValue));
+                                            setTxnMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -246,7 +246,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         {...register("txnDateTo")}
                                         InputProps={{ inputProps: { min: txnMinDate } }}
                                         onChange={(newValue) => {
-                                            setTxnMinDate(DateUtils.dateStr(newValue));
+                                            setTxnMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="txnDateTo"
                                         type="date"
@@ -272,7 +272,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         //defaultValue={searchCriteria.dateFrom}
                                         InputProps={{ inputProps: { max: collMaxDate } }}
                                         onChange={(newValue) => {
-                                            setCollMinDate(DateUtils.dateStr(newValue));
+                                            setCollMinDate(DateUtils.dateValue(newValue));
                                         }}
                                         InputLabelProps={{
                                             shrink: true
@@ -288,7 +288,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria, o
                                         {...register("collDateTo")}
                                         InputProps={{ inputProps: { min: collMinDate } }}
                                         onChange={(newValue) => {
-                                            setCollMaxDate(DateUtils.dateStr(newValue));
+                                            setCollMaxDate(DateUtils.dateValue(newValue));
                                         }}
                                         id="collDateTo"
                                         type="date"

src/pages/Recon/index.js

@@ -33,8 +33,8 @@ const Index = () => {
 
     // const [record,setRecord] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
-        // dateTo: DateUtils.dateStr(new Date()),
-        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+        // dateTo: DateUtils.dateValue(new Date()),
+        // dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
     });
     const [onReady] = React.useState(true);
     const [onDownload, setOnDownload] = React.useState(false);

src/pages/Setting/SystemSetting/Table.js

@@ -42,6 +42,7 @@ const Table = ({onRowClick, dataList}) => {
             field: 'value',
             headerName: 'Value',
             flex: 1,
+            minWidth: 400,
             renderCell:(params)=>{
                 return <div dangerouslySetInnerHTML={{__html: params.value}} />
             }

src/pages/User/DetailsPage_Individual/index.js

@@ -118,6 +118,7 @@ const UserMaintainPage_Individual = () => {
                     response.data["preferLocale"] = getObjectByType(ComboData.Locale, "type", response.data?.preferLocale);
                     // console.log(response.data)
                     setFormData(response.data);
+                    setLoding(false);
                 }
             });
         }

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -98,7 +98,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                     contactPerson: values.contactPerson,
                     // enCompanyName: values.enCompanyName,
                     // chCompanyName: values.chCompanyName,
-                    orgId: values.orgId,
+                    orgId: values.orgId?.id,
                     // brNo: values.brNo,
                     // brExpiryDate: values.brExpiryDate,
                     preferLocale: values.preferLocale.type
@@ -303,6 +303,14 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
 
                             <Grid item lg={4}>
                                 {FieldUtils.getComboField({
+                                    label: "Organisation:",
+                                    valueName: "orgId",
+                                    getOptionLabel: (option) => option.brNo? option.brNo : "",
+                                    dataList: orgData,
+                                    disabled:  (!editMode),
+                                    form: formik
+                                })}
+                                {/* {FieldUtils.getComboField({
                                     label: "Organisation:",
                                     valueName: "orgId",
                                     disabled: (!editMode),
@@ -343,7 +351,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                         formik.setFieldValue("orgId", newValue.id);
                                     },
                                     form: formik
-                                })}
+                                })} */}
                             </Grid>
 
                             <Grid item lg={4}>

src/pages/User/DetailsPage_Organization/index.js

@@ -90,6 +90,12 @@ const UserMaintainPage_Organization = () => {
             loadData();
         }
     }, []);
+
+    useEffect(() => {
+        if (orgData.length > 0  && userData["orgId"] != null){
+            userData["orgId"] = getObjectByType(orgData, "id", userData["orgId"]);
+        }
+    }, [orgData, userData]);
     
     useEffect(() => {
         // console.log(userData);
@@ -113,7 +119,7 @@ const UserMaintainPage_Organization = () => {
                         response.data["contactTel"] = response.orgDetail.data["contactTel"];
                         response.data["faxNo"] = response.orgDetail.data["faxNo"];
     
-                        response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate ? DateUtils.dateStr(response.orgDetail.data.brExpiryDate) : "";
+                        response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate ? DateUtils.dateValue(response.orgDetail.data.brExpiryDate) : "";
                         response.data["brNo"] = response.orgDetail.data.brNo;
                         response.data["enCompanyName"] = response.orgDetail.data.enCompanyName;
                         response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
@@ -123,7 +129,7 @@ const UserMaintainPage_Organization = () => {
                         response.data["addressBus"] = JSON.parse(response.data["addressBus"]);
                         response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
                         response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
-                        response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
+                        response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateValue(response.data.brExpiryDate) : "";
                     }
                     // console.log("2")
                     // console.log(response.data)
@@ -149,7 +155,7 @@ const UserMaintainPage_Organization = () => {
                     // response.data["status"] = response.data?.locked?"locked":response.data?.status;
                     response.data["preferLocale"] = getObjectByType(ComboData.Locale, "type", response.data?.preferLocale);
     
-                    //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
+                    //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateValue(response.data.brExpiryDate):"";
     
                     // console.log("3")
                     // console.log(response.data)
@@ -174,9 +180,10 @@ const UserMaintainPage_Organization = () => {
                     response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
                     response.data["preferLocale"] = getObjectByType(ComboData.Locale, "type", response.data?.preferLocale);
     
-                    //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
+                    //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateValue(response.data.brExpiryDate):"";
                     setUserData(response.data);
                     setOrgData(response.orgList);
+                    setLoding(false);
                     // console.log(response.data)
                 }
             });

src/pages/User/SearchPage/UserSearchForm.js

@@ -171,9 +171,10 @@ const UserSearchForm = ({ applySearch }) => {
                                 <Grid item sx={{ ml: 3, mr: 3, mb: 3,}}>
                                     <Button
                                         variant="contained"
+                                        color="cancel"
                                         onClick={resetForm}
                                     >
-                                       Clear
+                                       Reset
                                     </Button>
                                 </Grid>
 

src/pages/User/SearchPage/UserTable.js

@@ -1,15 +1,13 @@
 // material-ui
 import * as React from 'react';
-import { GridActionsCellItem,} from "@mui/x-data-grid";
 import {FiDataGrid} from "components/FiDataGrid";
-import EditIcon from '@mui/icons-material/Edit';
 import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
 import { useTheme } from '@mui/material/styles';
 import Checkbox from '@mui/material/Checkbox';
 import * as UrlUtils from "../../../utils/ApiPathConst";
 import * as HttpUtils from '../../../utils/HttpUtils';
-import { notifyLockSuccess, notifyUnlockSuccess } from 'utils/CommonFunction';
+import { notifyLockSuccess, notifyUnlockSuccess , clickableLink} from 'utils/CommonFunction';
 
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -23,10 +21,6 @@ export default function UserTable({recordList,setChangeLocked}) {
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (id) => () => {
-        navigate('/user/'+ id);
-    };
-
     const handleLock = (params) => () => {
         setChangeLocked(false)
         if (params.row.locked==true){
@@ -60,29 +54,32 @@ export default function UserTable({recordList,setChangeLocked}) {
     };
 
     const columns = [
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: 'Actions',
-            width: 100,
-            cellClassName: 'actions',
-            getActions: ({id}) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<EditIcon/>}
-                        label="Edit"
-                        className="textPrimary"
-                        onClick={handleEditClick(id)}
-                        color="primary"
-                    />]
-            },
-        },
+        // {
+        //     field: 'actions',
+        //     type: 'actions',
+        //     headerName: 'Actions',
+        //     width: 100,
+        //     cellClassName: 'actions',
+        //     getActions: ({id}) => {
+        //         return [
+        //             <GridActionsCellItem
+        //                 key="OutSave"
+        //                 icon={<EditIcon/>}
+        //                 label="Edit"
+        //                 className="textPrimary"
+        //                 onClick={handleEditClick(id)}
+        //                 color="primary"
+        //             />]
+        //     },
+        // },
         {
             id: 'username',
             field: 'username',
             headerName: 'Username',
             flex: 1,
+            renderCell: (params) => {
+                return clickableLink('/user/'+ params.row.id, params.row.username);
+            },
         },
         {
             id: 'enName',

src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js

@@ -17,7 +17,7 @@ import {ThemeProvider} from "@emotion/react";
 const UserSearchForm_Individual = ({ applySearch }) => {
 
     const [type, setType] = useState([]);
-    const [accountFilter, setAccountFilter] = useState("Active");
+    const [accountFilter, setAccountFilter] = useState("All");
 
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
@@ -42,6 +42,7 @@ const UserSearchForm_Individual = ({ applySearch }) => {
 
     function resetForm() {
         setType([]);
+        setAccountFilter("All");
         reset();
     }
 
@@ -120,6 +121,8 @@ const UserSearchForm_Individual = ({ applySearch }) => {
                             onChange={(event, newValue) => {
                                 if (newValue !== null) {
                                     setAccountFilter(newValue);
+                                }else{
+                                    setAccountFilter("All");
                                 }
                             }}
                             renderInput={(params) => (
@@ -150,9 +153,10 @@ const UserSearchForm_Individual = ({ applySearch }) => {
                     <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                             >
-                            Clear
+                            Reset
                         </Button>
                     </Grid>
 

src/pages/User/SearchPage_Individual/UserTable_Individual.js

@@ -47,24 +47,28 @@ export default function UserTable_Individual({ recordList }) {
             field: 'username',
             headerName: 'User Name',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'enName',
             field: 'enName',
             headerName: 'Name (Eng)',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'chName',
             field: 'chName',
             headerName: 'Name (Ch)',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'mobileNumber',
             field: 'mobileNumber',
             headerName: 'Phone',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 if (params.value) {
                     let tel = JSON.parse(params.value);
@@ -80,12 +84,14 @@ export default function UserTable_Individual({ recordList }) {
             field: 'emailAddress',
             headerName: 'Email',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'lastLogin',
             field: 'lastLogin',
             headerName: 'Last Login',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 if (params.value) {
                     return DateUtils.datetimeStr(params.value);
@@ -98,6 +104,7 @@ export default function UserTable_Individual({ recordList }) {
             field: 'locked',
             headerName: 'Status',
             flex: 1,
+            minWidth: 100,
             valueGetter: (params) => {
                 if (params.value) {
                     return "Locked";

src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js

@@ -147,6 +147,8 @@ const UserSearchForm_Organization = ({applySearch}) => {
                                         onChange={(event, newValue) => {
                                         if (newValue !== null){
                                             setAccountFilter(newValue);
+                                        }else{
+                                            setAccountFilter("All");
                                         }
                                     }}
                                         renderInput={(params) => (
@@ -177,9 +179,10 @@ const UserSearchForm_Organization = ({applySearch}) => {
                         <Grid item sx={{ml:3, mr:3, mb:3}}>
                             <Button
                                 variant="contained"
+                                color="cancel"
                                 onClick={resetForm}
                                 >
-                                Clear
+                                Reset
                             </Button>
                         </Grid>
 

src/pages/User/SearchPage_Organization/UserTable_Organization.js

@@ -51,36 +51,42 @@ export default function UserTable_Organization({recordList}) {
             field: 'username',
             headerName: 'Username',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'contactPerson',
             field: 'contactPerson',
             headerName: 'Name',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'enCompanyName',
             field: 'enCompanyName',
             headerName: 'Company (Eng)',
             flex: 1,
+            minWidth: 200,
         },
         {
             id: 'chCompanyName',
             field: 'chCompanyName',
             headerName: 'Company (Ch)',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'brNo',
             field: 'brNo',
             headerName: 'BR No.',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'lastLogin',
             field: 'lastLogin',
             headerName: 'Last Login',
             flex: 1,
+            minWidth: 200,
             valueGetter:(params)=>{
                 if(params.value){
                     return DateUtils.datetimeStr(params.value);
@@ -93,6 +99,7 @@ export default function UserTable_Organization({recordList}) {
             field: 'locked',
             headerName: 'Status',
             flex: 1,
+            minWidth: 100,
             valueGetter:(params)=>{
                 if(params.value){
                     return "Locked";

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/pages/dashboard/Public/Notice.js

@@ -33,7 +33,7 @@ const SearchDemandNoteForm = () => {
             list.push(
                 <Stack direction="column"  >
                     <Typography variant='h4' align="justify"><b>{locale === 'en' ?item.subjectEng:locale === 'zh-HK' ?item.subjectCht:item.subjectChs}</b></Typography>
-                    <Typography align="justify">{DateUtils.dateStr(item.announceDate)}</Typography>
+                    <Typography align="justify">{DateUtils.dateValue(item.announceDate)}</Typography>
                     <Typography align="justify"sx={{ pt: 1 }}>{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography>
                     <Divider fullWidth sx={{ pt: 1 }}></Divider>
                 </Stack>

src/pages/pnspsNotifyTest/index.js

@@ -1,58 +0,0 @@
-import { Grid, Button, TextField } from '@mui/material';
-import { useState } from 'react';
-import axios from 'axios';
-import { apiPath } from 'auth/utils';
-
-const TestMailPage = () => {
-  const [host, setHost] = useState(apiPath+'/test');
-  const [mail, setMail] = useState('');
-  const [tempKey, setTempKey] = useState('');
-
-  const hostChange = (event) => {
-    setHost(event.target.value);
-  };
-
-  const mailChange = (event) => {
-    setMail(event.target.value);
-  };
-
-  const tempKeyChange = (event) => {
-    setTempKey(event.target.value);
-  };
-
-  const doMailTest = () => {
-    axios.post(host, {
-      email: mail,
-      tempKey: tempKey,
-    })
-    .then((response) => {
-    console.log(response.data);
-        // Handle data
-    })
-    .catch((error) => {
-    console.log(error);
-    })
-  };
-    
-  return (
-    <Grid 
-        container  
-        alignItems='center'
-        sx={{
-          maxWidth: { xs: 1, lg: 1000 },
-          margin: { xs: 2.5, md: 3 },
-          '& > *': {
-            flexGrow: 1,
-            flexBasis: '100%'
-          }
-        }}
-        spacing={3}>
-            <Grid item xs={12}><TextField id='hostField' label='Email Api' variant='filled' onChange={hostChange} value={host} fullWidth /></Grid>
-            <Grid item xs={12}><TextField id='mailField' label='Target Email' variant='filled' onChange={mailChange} value={mail} fullWidth /></Grid>
-            <Grid item xs={12}><TextField id='mailField' label='Email Template Key' variant='filled' onChange={tempKeyChange} value={tempKey} fullWidth /></Grid>
-            <Grid item xs={12}><Button variant='contained' onClick={doMailTest}>Test</Button></Grid>
-        </Grid>
-    );
-};
-
-export default TestMailPage;

src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js

@@ -94,9 +94,10 @@ const UserGroupSearchForm = ({ applySearch }) => {
                                 <Grid item sx={{mr:3}}>
                                     <Button
                                         variant="contained"
+                                        color="cancel"
                                         onClick={resetForm}
                                     >
-                                        Clear
+                                        Reset
                                     </Button>
                                 </Grid>
 

src/routes/LoginRoutes.js

@@ -31,7 +31,6 @@ const IAmSmart_AuthCallback = Loadable(lazy(() => import('pages/iAmSmart/AuthCal
 const IAmSmart_RegistryCallback = Loadable(lazy(() => import('pages/iAmSmart/RegistryCallback')));
 
 //TODO: this page for testing only, please remove at prod
-const TestMailPage = Loadable(lazy(() => import('pages/pnspsNotifyTest')));
 const VerifyPage = Loadable(lazy(() => import('pages/authentication/Verify')));
 const Testfps = Loadable(lazy(() => import('pages/Payment/FPS/FPSTest')));
 const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback')));
@@ -42,10 +41,6 @@ const LoginRoutes = {
   path: '/',
   element: <MainLayout />,
   children: [
-    {//TODO: this page for testing only, please remove at prod
-      path: 'testMailPage',
-      element: <TestMailPage/>
-    },
     {
       path: 'login',
       element: <AuthLogin />
@@ -94,10 +89,6 @@ const LoginRoutes = {
       path: 'iamsmart/loginSucess',
       element: <IAmSmart_SuccessCallback/>
     },
-    {
-      path: 'testMailPage',
-      element: <TestMailPage/>
-    },
     {
       path: 'verify/:verifyCode/:email',
       element: <VerifyPage/>

src/translations/en.json

@@ -71,6 +71,8 @@
   "MSG.plzSelectApp": "Please select application",
   "MSG.actionFail": "Action failed",
   "MSG.paymentHolded": "Application number {appNo} is currently in the process of payment. If the payment is unsuccessful, please try again after 20 minutes. We apologise for any inconvenience caused.",
+  "MSG.pay_credity1": "We have received your confirmed application for proofreading and printing instructions regarding application number {appNo}. We will arrange for its publication with in the Year {year},  Volume {issueVolume}, Issue {issueNo} of the Official Gazette.",
+  "MSG.pay_credity2": "The fee for this public notice will be consolidated in the next Payment Notice. Please ensure timely payment.",
 
   "registerTitle1": "Become",
   "registerTitle2": "Gazette Notice",
@@ -357,8 +359,8 @@
   "paymentHistory": "Payment History",
   "proofId": "Proof Code",
   "proofDate": "Proofing Date",
-  "proofDateFrom": "Proofing Date (From)",
-  "proofDateTo": "Proofing Date (To)",
+  "proofDateFrom": "Proof Date (From)",
+  "proofDateTo": "Proof Date (To)",
   "replyDate": "Reply Date",
   "fee": "Amount ($)",
   "payFeeFor": "Pay for",
@@ -393,7 +395,7 @@
   "paymentRefCode": "Payment Reference Number",
 
   "paymentInfoRecord": "Payment Notice Record",
-  "paymentRecordId": "Payment Record Number",
+  "paymentRecordId": "Payment Record No.",
   "receiptDate": "Issuance Date",
   "sendDate": "Send Date",
   "sendDateFrom": "Send Date (From)",

src/translations/zh-CN.json

@@ -2,7 +2,7 @@
   "en": "English",
   "zh-HK": "繁體中文",
   "zh-CN": "简体中文",
-  "language":"語言",
+  "language":"语言",
 
   "PNSPS": "公共启事提交及缴费系统",
   "HKSARGOV": "香港特别行政区政府",
@@ -70,6 +70,8 @@
   "MSG.plzSelectApp": "请选择公共启事。",
   "MSG.actionFail": "行动失败",
   "MSG.paymentHolded": "申请编号 {appNo} 已正在付款的流程中，如相关付款没有成功，请于20分钟后再尝试付款，不便之处，请见谅！",
+  "MSG.pay_credity1": "我们已收到你已确定申请编号: {appNo} 的稿件校对确定及可付印的指示，并将安排刊登于宪报期数{year} 年{issueVolume} 卷第{issueNo } 期内。",
+  "MSG.pay_credity2": "此公共启事申请的费用将于下期发出的缴费发票时收取，请依时缴费。",
   
   "registerTitle1": "立即成为",
   "registerTitle2": "宪报刊登公共启事",

src/translations/zh-HK.json

@@ -70,6 +70,8 @@
   "MSG.plzSelectApp": "請選擇公共啟事。",
   "MSG.actionFail": "行動失敗",
   "MSG.paymentHolded": "申請編號 {appNo} 已正在付款的流程中，如相關付款沒有成功，請於20分鐘後再嘗試付款，不便之處，請見諒！",
+  "MSG.pay_credity1": "我們已收到你已確定申請編號: {appNo} 的稿件校對確定及可付印的指示，並將安排刊登於憲報 期數 {year} 年 {issueVolume} 卷 第 {issueNo} 期內。",
+  "MSG.pay_credity2": "此公共啟事申請的費用將於下期發出的繳費發票時收取，請依時繳費。",
 
   "registerTitle1": "立即成為",
   "registerTitle2": "憲報刊登公共啟事",

src/utils/ComboData.js

@@ -61,14 +61,12 @@ export const publicNoticeStatic_Creditor = [
     { key: 8, label: 'withdrawn',  type: 'withdrawn' },
 ];
 
-
 export const publicNoticeStatic_GLD = [
     { key: 0, label: 'All',  type: 'all' }, 
     { key: 1, label: 'Submitted',  type: 'submitted' },
     { key: 2, label: 'Reviewed',  type: 'reviewed' },
-    { key: 3, label: 'Confirmed',  type: 'confirmed' }, 
-    { key: 3, label: 'Paid',  type: 'paid' }, 
-    { key: 4, label: 'Published',  type: 'published' }, 
+    { key: 3, label: 'Pending Publish',  type: 'pendingPublish' },
+    { key: 4, label: 'Pending Payment',  type: 'pendingPayment' },
     { key: 5, label: 'Completed',  type: 'completed' },
     { key: 6, label: 'Not Accepted',  type: 'notAccepted' },
     { key: 7, label: 'Re-Submit Required',  type: 'resubmit' },
@@ -77,6 +75,21 @@ export const publicNoticeStatic_GLD = [
 ];
 
 
+// export const publicNoticeStatic_GLD = [
+//     { key: 0, label: 'All',  type: 'all' }, 
+//     { key: 1, label: 'Submitted',  type: 'submitted' },
+//     { key: 2, label: 'Reviewed',  type: 'reviewed' },
+//     { key: 3, label: 'Confirmed',  type: 'confirmed' }, 
+//     { key: 3, label: 'Paid',  type: 'paid' }, 
+//     { key: 4, label: 'Published',  type: 'published' }, 
+//     { key: 5, label: 'Completed',  type: 'completed' },
+//     { key: 6, label: 'Not Accepted',  type: 'notAccepted' },
+//     { key: 7, label: 'Re-Submit Required',  type: 'resubmit' },
+//     { key: 8, label: 'Cancelled',  type: 'cancelled' },
+//     { key: 9, label: 'Withdrawn',  type: 'withdrawn' },
+// ];
+
+
 export const groupTitle = [
     { key: 1, labelCht: 'A1 - 私人帳單', label: 'A1 - Private Bill', title: 'Private Bill',  type: 'A'}, 
     { key: 2, labelCht: 'A2 - ???', label: 'A2 - Stock Shares', title: 'Stock Shares',  type: 'A'},