various changes

src/components/@extended/AnimateButton.js

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 
 // ==============================|| ANIMATION BUTTON ||============================== //
 
-export default function AnimateButton({ children, type }) {
+export default function AnimateButton({ children, type = 'scale' }) {
   switch (type) {
     case 'rotate': // only available in paid version
     case 'slide': // only available in paid version
@@ -23,7 +23,3 @@ AnimateButton.propTypes = {
   children: PropTypes.node,
   type: PropTypes.oneOf(['slide', 'scale', 'rotate'])
 };
-
-AnimateButton.defaultProps = {
-  type: 'scale'
-};

src/components/FiDataGrid.js

@@ -279,6 +279,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight = true,
                     ? {
                         Pagination: () => (
                             <TablePagination
+                                component="div"
                                 count={rowCount || 0}
                                 page={page}
                                 rowsPerPage={pageSize}

src/components/MainCard.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
+import omit from 'lodash/omit';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
@@ -8,6 +9,29 @@ import { Card, CardContent, CardHeader, Divider, Typography, Grid } from '@mui/m
 // project import
 import Highlighter from './third-party/Highlighter';
 
+/** Props often mistaken for Card / Grid / sx — must not reach the underlying DOM node via `{...others}`. */
+const PROPS_OMIT_FROM_CARD = [
+  'backgroundColor',
+  'bgcolor',
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  'item',
+  'container',
+  'spacing',
+  'direction',
+  'justify',
+  'alignItems',
+  'alignContent',
+  'flexWrap',
+  'wrap',
+  'zeroMinWidth',
+  'rowSpacing',
+  'columnSpacing'
+];
+
 // header style
 const headerSX = {
   p: 2.5,
@@ -38,6 +62,8 @@ const MainCard = forwardRef(
     const theme = useTheme();
     boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow;
 
+    const cardProps = omit(others, PROPS_OMIT_FROM_CARD);
+
     return (
       <Grid container direction="column"
         // alignItems="center"
@@ -46,7 +72,7 @@ const MainCard = forwardRef(
         <Card
           elevation={elevation || 0}
           ref={ref}
-          {...others}
+          {...cardProps}
           sx={{
             alignItems: "center",
             border: border ? '1px solid' : 'none',

src/pages/Announcement/Details/AnnouncementForm.js

@@ -143,7 +143,7 @@ const AnnouncementForm = ({ loadedData }) => {
                                 </Grid>
                             </Grid>
 
-                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid>
+                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider sx={{ width: '100%' }} /></Grid>
                             <Grid item xs={12} md={12}><Typography variant="h5">English</Typography></Grid>
                             <Grid item xs={12} md={12} >
                                 <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
@@ -202,7 +202,7 @@ const AnnouncementForm = ({ loadedData }) => {
                                 </Grid>
                             </Grid>
 
-                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid>
+                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider sx={{ width: '100%' }} /></Grid>
                             <Grid item xs={12} md={12}><Typography variant="h5">Traditional Chinese</Typography></Grid>
                             <Grid item xs={12} md={12}>
                                 <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
@@ -263,7 +263,7 @@ const AnnouncementForm = ({ loadedData }) => {
 
 
 
-                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider fullWidth></Divider></Grid>
+                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider sx={{ width: '100%' }} /></Grid>
                             <Grid item xs={12} md={12}><Typography variant="h5">Simplified Chinese</Typography></Grid>
                             <Grid item xs={12} md={12}>
                                 <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>

src/pages/DemandNote/Create/SearchForm.js

@@ -201,7 +201,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                                 variant="contained"
                                 onClick={onSubmit}
                                 color="success"
-                                minWidth={150}
+                                sx={{ minWidth: 150 }}
                             >
                                 Create
                             </Button>

src/pages/DemandNote/Export/SearchForm.js

@@ -201,7 +201,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
                                 onClick={onSubmit}
                                 color="success"
                                 disabled={waitDownload}
-                                minWidth={150}
+                                sx={{ minWidth: 150 }}
                             >
                                 Export
                             </Button>

src/pages/DemandNote/Search/SearchForm.js

@@ -443,7 +443,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                     '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                                     '& .MuiOutlinedInput-root': { height: 40 }
                                 }}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}

src/pages/DemandNote/Search_Public/DataGrid.js

@@ -66,8 +66,7 @@ export default function SearchDemandNote({ searchCriteria, applyGridOnReady,appl
             width: isMdOrLg ? 'auto' : 175,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
-
-                return [StatusUtils.getStatus_i18n(params, locale) ]
+                return StatusUtils.getStatus_i18n(params, locale);
             },
         },
         {

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -292,11 +292,9 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData, onG
                                     <TextField
                                         {...params}
                                         label={intl.formatMessage({ id: 'status' })}
+                                        InputLabelProps={{ shrink: true }}
                                     />
                                 )}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
                                 clearText={intl.formatMessage({ id: "muiClear" })}
                                 closeText={intl.formatMessage({ id: "muiClose" })}
                                 openText={intl.formatMessage({ id: "muiOpen" })}

src/pages/GFMIS/SearchForm.js

@@ -180,7 +180,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr
                                     filterOptions={(options) => options}
                                     options={ComboData.payMethod}
                                     value={payMethod}
-                                    getOptionLabel={(option) => option.label}
+                                    getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                     inputValue={payMethod?.label ? payMethod?.label : ""}
                                     onChange={(event, newValue) => {
                                         if(newValue==null){
@@ -197,11 +197,9 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr
                                     renderInput={(params) => (
                                         <TextField {...params}
                                             label="Payment Method"
+                                            InputLabelProps={{ shrink: true }}
                                         />
                                     )}
-                                    InputLabelProps={{
-                                        shrink: true
-                                    }}
                                 />
                         </Grid>
 

src/pages/GazetteIssue/ExportForm.js

@@ -76,7 +76,11 @@ const SearchGazetteIssueForm = ({ applyExport, comboData, waitDownload}) => {
                             // defaultValue={selectedYear}
                             options={comboList}
                             // disabled={checkCountry}
-                            getOptionLabel={(option) => option.label ? option.label : ""}
+                            getOptionLabel={(option) =>
+                                option != null && typeof option === "object" && option.label != null
+                                    ? String(option.label)
+                                    : ""
+                            }
                             onChange={(event, newValue) => {
                                 setSelectedYear(newValue);
                             }}

src/pages/GazetteIssue/SearchForm.js

@@ -74,7 +74,11 @@ const SearchGazetteIssueForm = ({ applySearch, comboData, onGridReady}) => {
                             // defaultValue={selectedYear}
                             options={comboList}
                             // disabled={checkCountry}
-                            getOptionLabel={(option) => option.label ? option.label : ""}
+                            getOptionLabel={(option) =>
+                                option != null && typeof option === "object" && option.label != null
+                                    ? String(option.label)
+                                    : ""
+                            }
                             onChange={(event, newValue) => {
                                 setSelectedYear(newValue);
                             }}

src/pages/Holiday/DataGrid.js

@@ -9,14 +9,19 @@ import { dateStr } from "utils/DateUtils";
 
 // ==============================|| EVENT TABLE ||============================== //
 
+function holidayRowsFromResponse(recordList) {
+    if (Array.isArray(recordList)) return recordList;
+    if (recordList && Array.isArray(recordList.records)) return recordList.records;
+    return [];
+}
+
 export default function HolidayTable({ recordList, applyGridOnReady }) {
-    const [rows, setRows] = React.useState(recordList);
+    const [rows, setRows] = React.useState(() => holidayRowsFromResponse(recordList));
 
     // const navigate = useNavigate()
 
     useEffect(() => {
-        // console.log(recordList)
-        setRows(recordList.records);
+        setRows(holidayRowsFromResponse(recordList));
     }, [recordList]);
 
     const columns = [

src/pages/Holiday/SearchForm.js

@@ -17,7 +17,7 @@ import {ThemeProvider} from "@emotion/react";
 
 
 const SearchHolidayForm = ({ applySearch, comboData, onGridReady}) => {
-    const [selectedYear, setSelectedYear] = React.useState([]);
+    const [selectedYear, setSelectedYear] = React.useState(null);
     // const [defaultYear, setDefaultYear] = React.useState(searchCriteria.year);
     const [comboList, setComboList] = React.useState([]);
     // const [onReady, setOnReady] = React.useState(false);
@@ -27,7 +27,7 @@ const SearchHolidayForm = ({ applySearch, comboData, onGridReady}) => {
         handleSubmit } = useForm()
 
     const onSubmit = () => {
-        if (selectedYear !=null){
+        if (selectedYear != null) {
             const temp = {
                 year: selectedYear.label,
             };
@@ -40,8 +40,8 @@ const SearchHolidayForm = ({ applySearch, comboData, onGridReady}) => {
             // console.log(comboData)
             // const labelValue = comboData.find(obj => obj.label === searchCriteria.year);
             // console.log(labelValue)
-            if(selectedYear.length == 0){
-                setSelectedYear(comboData[0])
+            if (!selectedYear) {
+                setSelectedYear(comboData[0]);
             }
             setComboList(comboData)
             // setSelectedYear(searchCriteria.dateFrom)
@@ -74,7 +74,11 @@ const SearchHolidayForm = ({ applySearch, comboData, onGridReady}) => {
                             // defaultValue={selectedYear}
                             options={comboList}
                             // disabled={checkCountry}
-                            getOptionLabel={(option) => option.label ? option.label : ""}
+                            getOptionLabel={(option) =>
+                                option != null && typeof option === "object" && option.label != null
+                                    ? String(option.label)
+                                    : ""
+                            }
                             onChange={(event, newValue) => {
                                 setSelectedYear(newValue);
                             }}

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -2,7 +2,7 @@
 import {
     Grid, Button, Checkbox, FormControlLabel, Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
-    FormHelperText, TextField,
+    FormHelperText, TextField, CircularProgress,
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
 import MainCard from "components/MainCard";
@@ -111,56 +111,58 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         onSubmit: (values) => {
             if (values.country == null) {
                 setErrorMsg(intl.formatMessage({ id: 'pleaseFillInCountry' }))
-            } else {
-                if (values.country.type == "hongKong" && values.district == null) {
-                    setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
-                } else {
-                    let sentDateFrom = "";
-                    if (fromDateValue == null) {
-                        setErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }))
-                    } else {
-                        sentDateFrom = DateUtils.dateValue(fromDateValue)
-                        HttpUtils.post({
-                            url: UrlUtils.POST_ORG_SAVE_PATH,
-                            params: {
-                                id: id > 0 ? id : null,
-                                enCompanyName: values.enCompanyName,
-                                chCompanyName: values.chCompanyName,
-                                orgShortName: values.orgShortName === "N/A" ? "" : values.orgShortName,
-                                brNo: values.brNo,
-                                // brExpiryDate: values.brExpiryDate,
-                                brExpiryDate: sentDateFrom,
-                                enCompanyNameTemp: values.enCompanyNameTemp,
-                                chCompanyNameTemp: values.chCompanyNameTemp,
-                                brExpiryDateTemp: values.brExpiryDateTemp,
-                                contactPerson: values.contactPerson,
-                                contactTel: {
-                                    countryCode: values.tel_countryCode,
-                                    phoneNumber: values.phoneNumber
-                                },
-                                faxNo: {
-                                    countryCode: values.fax_countryCode,
-                                    faxNumber: values.faxNumber
-                                },
-                                addressTemp: {
-                                    country: values.country.type,
-                                    district: values.district?.type,
-                                    addressLine1: values.addressLine1,
-                                    addressLine2: values.addressLine2,
-                                    addressLine3: values.addressLine3,
-                                },
-                                creditor: values.creditor,
-                            },
-                            onSuccess: function () {
-                                notifySaveSuccess()
-                                loadDataFun();
-                                setEditMode(false);
-                            }
-                        });
-                    }
-
-                }
+                return;
+            }
+            if (values.country.type == "hongKong" && values.district == null) {
+                setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
+                return;
+            }
+            if (fromDateValue == null) {
+                setErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }))
+                return;
             }
+            const sentDateFrom = DateUtils.dateValue(fromDateValue);
+            return new Promise((resolve, reject) => {
+                HttpUtils.post({
+                    url: UrlUtils.POST_ORG_SAVE_PATH,
+                    params: {
+                        id: id > 0 ? id : null,
+                        enCompanyName: values.enCompanyName,
+                        chCompanyName: values.chCompanyName,
+                        orgShortName: values.orgShortName === "N/A" ? "" : values.orgShortName,
+                        brNo: values.brNo,
+                        brExpiryDate: sentDateFrom,
+                        enCompanyNameTemp: values.enCompanyNameTemp,
+                        chCompanyNameTemp: values.chCompanyNameTemp,
+                        brExpiryDateTemp: values.brExpiryDateTemp,
+                        contactPerson: values.contactPerson,
+                        contactTel: {
+                            countryCode: values.tel_countryCode,
+                            phoneNumber: values.phoneNumber
+                        },
+                        faxNo: {
+                            countryCode: values.fax_countryCode,
+                            faxNumber: values.faxNumber
+                        },
+                        addressTemp: {
+                            country: values.country.type,
+                            district: values.district?.type,
+                            addressLine1: values.addressLine1,
+                            addressLine2: values.addressLine2,
+                            addressLine3: values.addressLine3,
+                        },
+                        creditor: values.creditor,
+                    },
+                    onSuccess: function () {
+                        notifySaveSuccess()
+                        loadDataFun();
+                        setEditMode(false);
+                        resolve();
+                    },
+                    onFail: () => reject(),
+                    onError: () => reject(),
+                });
+            });
         }
     });
 
@@ -267,6 +269,8 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                                         variant="contained"
                                                         type="submit"
                                                         color="success"
+                                                        disabled={formik.isSubmitting}
+                                                        startIcon={formik.isSubmitting ? <CircularProgress color="inherit" size={18} /> : null}
                                                     >
                                                         Create
                                                     </Button>
@@ -289,6 +293,8 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                                         variant="contained"
                                                         type="submit"
                                                         color="success"
+                                                        disabled={formik.isSubmitting}
+                                                        startIcon={formik.isSubmitting ? <CircularProgress color="inherit" size={18} /> : null}
                                                     >
                                                         Save
                                                     </Button>

src/pages/Organization/DetailPage/OrganizationPubCard.js

@@ -4,7 +4,7 @@ import {
     // Checkbox, FormControlLabel,
     Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
-    FormHelperText
+    FormHelperText, CircularProgress,
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
 import MainCard from "components/MainCard";
@@ -61,42 +61,46 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
             phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requiredValidNumber' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
             faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'require8Number' }))).nullable(),
         }),
-        onSubmit: values => {
+        onSubmit: (values) => {
             if (values.country == null) {
                 setErrorMsg(intl.formatMessage({ id: 'pleaseFillInCountry' }))
-            } else {
-                if (values.country.type == "hongKong" && values.district == null) {
-                    setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
-                } else {
-                    HttpUtils.post({
-                        url: UrlUtils.POST_PUB_ORG_SAVE_PATH,
-                        params: {
-                            contactPerson: values.contactPerson,
-                            contactTel: {
-                                countryCode: values.tel_countryCode,
-                                phoneNumber: values.phoneNumber
-                            },
-                            faxNo: {
-                                countryCode: values.fax_countryCode,
-                                faxNumber: values.faxNumber
-                            },
-                            addressTemp: {
-                                country: values.country.type,
-                                district: values.district?.type,
-                                addressLine1: values.addressLine1,
-                                addressLine2: values.addressLine2,
-                                addressLine3: values.addressLine3,
-                            },
-                            //creditor: values.creditor,
-                        },
-                        onSuccess: function () {
-                            notifySaveSuccess()
-                            loadDataFun();
-                            setEditMode(false);
-                        }
-                    });
-                }
+                return;
+            }
+            if (values.country.type == "hongKong" && values.district == null) {
+                setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
+                return;
             }
+            return new Promise((resolve, reject) => {
+                HttpUtils.post({
+                    url: UrlUtils.POST_PUB_ORG_SAVE_PATH,
+                    params: {
+                        contactPerson: values.contactPerson,
+                        contactTel: {
+                            countryCode: values.tel_countryCode,
+                            phoneNumber: values.phoneNumber
+                        },
+                        faxNo: {
+                            countryCode: values.fax_countryCode,
+                            faxNumber: values.faxNumber
+                        },
+                        addressTemp: {
+                            country: values.country.type,
+                            district: values.district?.type,
+                            addressLine1: values.addressLine1,
+                            addressLine2: values.addressLine2,
+                            addressLine3: values.addressLine3,
+                        },
+                    },
+                    onSuccess: function () {
+                        notifySaveSuccess()
+                        loadDataFun();
+                        setEditMode(false);
+                        resolve();
+                    },
+                    onFail: () => reject(),
+                    onError: () => reject(),
+                });
+            });
         }
     });
 
@@ -147,6 +151,8 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                                     variant="contained"
                                                     type="submit"
                                                     color="success"
+                                                    disabled={formik.isSubmitting}
+                                                    startIcon={formik.isSubmitting ? <CircularProgress color="inherit" size={18} /> : null}
                                                 >
                                                     <FormattedMessage id="create" />
                                                 </Button>
@@ -171,6 +177,8 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                                     variant="contained"
                                                     type="submit"
                                                     color="success"
+                                                    disabled={formik.isSubmitting}
+                                                    startIcon={formik.isSubmitting ? <CircularProgress color="inherit" size={18} /> : null}
                                                 >
                                                     <FormattedMessage id="save" />
                                                 </Button>

src/pages/Organization/SearchPage/OrganizationSearchForm.js

@@ -154,7 +154,7 @@ const OrganizationSearchForm = ({ applySearch, onGridReady, searchCriteria }) =>
                                         '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                                         '& .MuiOutlinedInput-root': { height: 40 }
                                     }}
-                                    getOptionLabel={(option) => option.label}
+                                    getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                     renderInput={(params) => (
                                         <TextField
                                             {...params}

src/pages/Payment/Details_Public/index.js

@@ -163,7 +163,7 @@ const Index = () => {
                             </Button>
                         </Grid>
                         {/*row 1*/}
-                        <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
+                        <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
                             <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
                                 <Grid item className="printOrder" xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
                                     <Box xs={12} md={12} sx={{ border: '3px solid #eee', borderRadius: '10px' }} >

src/pages/Payment/Search_GLD/SearchForm.js

@@ -222,7 +222,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                 filterOptions={(options) => options}
                                 options={ComboData.paymentStatus}
                                 value={status}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 inputValue={status?.label ? status?.label : ""}
                                 onChange={(event, newValue) => {
                                     if(newValue==null){
@@ -239,11 +239,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                 renderInput={(params) => (
                                     <TextField {...params}
                                         label="Status"
+                                        InputLabelProps={{ shrink: true }}
                                     />
                                 )}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
                             />
                         </Grid>
                         
@@ -256,7 +254,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                 filterOptions={(options) => options}
                                 options={ComboData.payMethod}
                                 value={payMethod}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 inputValue={payMethod?.label ? payMethod?.label : ""}
                                 onChange={(event, newValue) => {
                                     if(newValue==null){
@@ -273,11 +271,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                 renderInput={(params) => (
                                     <TextField {...params}
                                         label="Payment Method"
+                                        InputLabelProps={{ shrink: true }}
                                     />
                                 )}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
                             />
                         </Grid>
                     </Grid>

src/pages/Payment/Search_Public/SearchForm.js

@@ -206,13 +206,12 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                 '& .MuiOutlinedInput-root': { height: 40 }
                             }}
                             renderInput={(params) => (
-                                <TextField {...params}
+                                <TextField
+                                    {...params}
                                     label={intl.formatMessage({id: 'status'})}
+                                    InputLabelProps={{ ...params.InputLabelProps, shrink: true }}
                                 />
                             )}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
                             clearText={intl.formatMessage({ id: "muiClear" })}
                             closeText={intl.formatMessage({ id: "muiClose" })}
                             openText={intl.formatMessage({ id: "muiOpen" })}

src/pages/Proof/Create_FromApp/ProofForm.js

@@ -24,6 +24,16 @@ import Loadable from 'components/Loadable';
 import { notifySaveSuccess } from 'utils/CommonFunction';
 const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
 
+/** Keeps Formik fields defined so inputs stay controlled before API data loads. */
+const proofFormInitialValues = {
+    reviseDeadline: '',
+    proofPaymentDeadline: '',
+    length: '',
+    noOfPages: '',
+    fee: '',
+    groupType: ''
+};
+
 const FormPanel = ({ formData }) => {
     const intl = useIntl();
     const [data, setData] = React.useState({});
@@ -123,7 +133,7 @@ const FormPanel = ({ formData }) => {
 
     const formik = useFormik({
         enableReinitialize: true,
-        initialValues: data,
+        initialValues: { ...proofFormInitialValues, ...data },
         onSubmit: values => {
             setSaving(true);
             if (!attachments || attachments.length <= 0) {
@@ -207,7 +217,7 @@ const FormPanel = ({ formData }) => {
     }
 
     return (
-        <MainCard xs={12} md={12} lg={12}
+        <MainCard
             border={false}
             content={false}>
 
@@ -425,7 +435,9 @@ const FormPanel = ({ formData }) => {
                                         options={ComboData.proofPrice}
                                         value={columnPrice}
                                         inputValue={(columnPrice?.label) ? columnPrice?.label : ""}
-                                        getOptionLabel={(option) => option.label ? option.label : ""}
+                                        getOptionLabel={(option) =>
+                                            option != null && option.label != null ? String(option.label) : ""
+                                        }
                                         onChange={(event, newValue) => {
                                             setColumnPrice(newValue)
                                             formik.values["fee"] = newValue.value * formik.values.length;

src/pages/Proof/Create_FromApp/index.js

@@ -75,7 +75,7 @@ const Index = () => {
                 </Grid>
             </Grid>
             :
-            <Grid container sx={{ minHeight: '85vh', backgroundColor: "backgroundColor.default" }} direction="column" spacing={1} >
+            <Grid container sx={{ minHeight: '85vh', bgcolor: 'background.default' }} direction="column" spacing={1} >
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -88,7 +88,7 @@ const Index = () => {
                     border={false}
                     content={false}
                     sx={{
-                        backgroundColor: "backgroundColor.default"
+                        bgcolor: 'background.default'
                     }}
                 >
 
@@ -126,7 +126,7 @@ const Index = () => {
                         <MainCard elevation={0}
                             border={false}
                             content={false}
-                            backgroundColor={"backgroundColor.default"}
+                            sx={{ bgcolor: 'background.default' }}
                         >
                             <Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: "#fff" }}>
                                 <ProofForm

src/pages/Proof/Reply_Public/index.js

@@ -114,12 +114,10 @@ const Index = () => {
                     <Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'100%', mt:2, mb: -3}}>
                         <MainCard
                             sx={{
-                                mr:2,
+                                mr: 2,
                                 boxShadow: 1,
-                                border: 1,
-                                borderColor: '#DDD',
+                                border: '1px groove #DDD',
                             }}
-                            border= '1px groove grey'
                         >
                             <ApplicationDetails
                                 formData={record}
@@ -132,11 +130,8 @@ const Index = () => {
                         <MainCard
                             sx={{
                                 boxShadow: 1,
-                                border: 1,
-                                borderColor: '#DDD',
+                                border: '1px groove #DDD',
                             }}
-                            border= '1px groove grey'
-                            // sx={..._sx}
                         >
                             <ProofForm
                                 formData={record}

src/pages/Proof/Search_GLD/DataGrid.js

@@ -46,10 +46,14 @@ export default function SearchPublicNoticeTable({searchCriteria, applyGridOnRead
             },
         },
         {
-            id: 'actions',
+            id: 'proofStatus',
+            field: 'proofStatus',
             headerName: 'Status',
             flex: 1,
             minWidth: 150,
+            sortable: false,
+            filterable: false,
+            valueGetter: () => '',
             renderCell: (params) => {
                 return ProofStatus.getStatus_Eng(params);
             },

src/pages/Proof/Search_GLD/SearchForm.js

@@ -26,11 +26,15 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
     const [type, setType] = React.useState([]);
     const [status, setStatus] = React.useState(searchCriteria.statusKey!=undefined?ComboData.proofStatus_GLD[searchCriteria.statusKey]:ComboData.proofStatus_GLD[0]);
-    const [orgSelected, setOrgSelected] = React.useState({});
+    const [orgSelected, setOrgSelected] = React.useState(null);
     const [orgCombo, setOrgCombo] = React.useState();
-    const [issueSelected, setIssueSelected] = React.useState({});
+    const [issueSelected, setIssueSelected] = React.useState(null);
     const [issueCombo, setIssueCombo] = React.useState([]);
-    const [groupSelected, setGroupSelected] = React.useState(searchCriteria.gazettGroup!=undefined?ComboData.groupTitle.find(item => item.code === searchCriteria.gazettGroup):{});
+    const [groupSelected, setGroupSelected] = React.useState(
+        searchCriteria.gazettGroup != undefined
+            ? ComboData.groupTitle.find(item => item.code === searchCriteria.gazettGroup) ?? null
+            : null
+    );
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
@@ -136,9 +140,9 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     function resetForm() {
         setType([]);
         setStatus(ComboData.proofStatus[0]);
-        setOrgSelected({});
-        setIssueSelected({});
-        setGroupSelected({});
+        setOrgSelected(null);
+        setIssueSelected(null);
+        setGroupSelected(null);
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
         reset({
@@ -257,7 +261,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                 options={ComboData.groupTitle}
                                 value={groupSelected}
                                 inputValue={(groupSelected?.label) ? groupSelected?.label : ""}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 onChange={(event, newValue) => {
                                     setGroupSelected(newValue);
                                 }}
@@ -371,13 +375,12 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                     '& .MuiOutlinedInput-root': { height: 40 }
                                 }}
                                 renderInput={(params) => (
-                                    <TextField {...params}
+                                    <TextField
+                                        {...params}
                                         label="Status"
+                                        InputLabelProps={{ shrink: true }}
                                     />
                                 )}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
                             />
                         </Grid>
 
@@ -396,11 +399,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         inputValue={orgSelected ? orgSelected.name!=undefined?orgSelected.name:"" : ""}
 
                                         onChange={(event, newValue) => {
-                                            if (newValue !== null) {
-                                                setOrgSelected(newValue);
-                                            }else{
-                                                setOrgSelected({});
-                                            }
+                                            setOrgSelected(newValue ?? null);
                                         }}
                                         sx={{
                                             '& .MuiInputBase-root': { alignItems: 'center' },

src/pages/Proof/Search_Public/DataGrid.js

@@ -170,7 +170,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             }
         },
         {
-            id: 'actions',
+            field: 'proofStatus',
             headerName: intl.formatMessage({ id: 'status' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,

src/pages/Proof/Search_Public/SearchForm.js

@@ -29,7 +29,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
     
     const [type, setType] = React.useState([]);
     const [status, setStatus] = React.useState(searchCriteria.statusKey!=undefined?ComboData.proofStatusFull[searchCriteria.statusKey]:ComboData.proofStatusFull[0]);
-    const [issueSelected, setIssueSelected] = React.useState({});
+    const [issueSelected, setIssueSelected] = React.useState(null);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [groupSelected, setGroupSelected] = React.useState(searchCriteria.gazettGroup!=undefined?ComboData.groupTitle.find(item => item.code === searchCriteria.gazettGroup):{});
 
@@ -110,7 +110,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
         if (issueComboData && issueComboData.length > 0) {
             setIssueCombo(issueComboData);
             if(searchCriteria.issueId!=undefined){
-                setIssueSelected(issueComboData.find(item => item.id === searchCriteria.issueId))
+                setIssueSelected(issueComboData.find(item => item.id === searchCriteria.issueId) ?? null)
             }
         }
     }, [issueComboData]);
@@ -118,7 +118,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
     function resetForm() {
         setType([]);
         setStatus(ComboData.proofStatusFull[0]);
-        setIssueSelected({});
+        setIssueSelected(null);
         setGroupSelected({});
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
@@ -205,8 +205,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
                             id="issueId"
                             options={issueCombo}
                             value={issueSelected}
+                            isOptionEqualToValue={(option, value) => option?.id === value?.id}
                             inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
-                            getOptionLabel={(option) => getIssueLabel(option)}
+                            getOptionLabel={(option) => (option?.id ? getIssueLabel(option) : "")}
                             onChange={(event, newValue) => {
                                 setIssueSelected(newValue);
                             }}
@@ -352,11 +353,12 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData, o
                             renderInput={(params) => (
                                 <TextField {...params}
                                     label={intl.formatMessage({id: 'status'})}
+                                    InputLabelProps={{
+                                        ...params.InputLabelProps,
+                                        shrink: true
+                                    }}
                                 />
                             )}
-                            InputLabelProps={{
-                                shrink: true
-                            }}
                             clearText={intl.formatMessage({ id: "muiClear" })}
                             closeText={intl.formatMessage({ id: "muiClose" })}
                             openText={intl.formatMessage({ id: "muiOpen" })}

src/pages/PublicNotice/ApplyForm/index.js

@@ -64,7 +64,7 @@ const ApplyForm = () => {
                 for (var i = 0; i < response?.gazetteIssueList?.length; i++) {
                     let data = response.gazetteIssueList[i];
                     //let label = getIssueLabel(data);
-                    selection.push(<FormControlLabel value={data.id} control={<Radio />} label={getIssueLabel(data)} />);
+                    selection.push(<FormControlLabel key={data.id} value={data.id} control={<Radio />} label={getIssueLabel(data)} />);
                 }
                 setGazetteIssueList(response?.gazetteIssueList);
                 setSelection(selection);
@@ -80,7 +80,7 @@ const ApplyForm = () => {
             for (var i = 0; i < gazetteIssueList?.length; i++) {
                 let data = gazetteIssueList[i];
                 let label = getIssueLabel(data);
-                selection.push(<FormControlLabel value={data.id} control={<Radio />} label={label} />);
+                selection.push(<FormControlLabel key={data.id} value={data.id} control={<Radio />} label={label} />);
             }
             setSelection(selection);
         }

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -855,7 +855,7 @@ const ApplicationDetailCard = (
                             }
                         }}
                     >
-                        <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
+                        <DialogTitle component="div"><Typography variant="h3">Warning</Typography></DialogTitle>
                         <DialogContent style={{ display: 'flex', }}>
                             <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                         </DialogContent>
@@ -877,7 +877,7 @@ const ApplicationDetailCard = (
                         }}
                     >
                         <form onSubmit={handleSubmit(onSubmit)}>
-                            <DialogTitle><Typography variant="h3">Remarks</Typography></DialogTitle>
+                            <DialogTitle component="div"><Typography variant="h3">Remarks</Typography></DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Grid container direction="column">
                                     <Grid item sx={{ padding: '16px' }}>
@@ -928,7 +928,7 @@ const ApplicationDetailCard = (
                                         filterOptions={(options) => options}
                                         options={ComboData.paymentMeans}
                                         value={paymentMeans}
-                                        getOptionLabel={(option) => option.label}
+                                        getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                         inputValue={paymentMeans?.label ? paymentMeans?.label : ""}
                                         onChange={(event, newValue) => {
                                             setPaymentMeans(newValue);
@@ -941,11 +941,9 @@ const ApplicationDetailCard = (
                                         renderInput={(params) => (
                                             <TextField {...params}
                                                 label=""
+                                                InputLabelProps={{ shrink: true }}
                                             />
                                         )}
-                                        InputLabelProps={{
-                                            shrink: true,
-                                        }}
                                         disableClearable={true}
                                     />
                                 </Grid> 

src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js

@@ -53,11 +53,11 @@ const GazetteDetailCard = (
             setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.issueYear
                 + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
-            setGazetteCode(applicationDetailData.data.groupNo)
+            setGazetteCode(applicationDetailData.data.groupNo ?? '')
             // console.log(applicationDetailData)
             setSysType(applicationDetailData.userData.sysType)
-            setCareOf(applicationDetailData.data.careOf)
-            setGroupTitle(applicationDetailData.data.groupTitle)
+            setCareOf(applicationDetailData.data.careOf ?? '')
+            setGroupTitle(applicationDetailData.data.groupTitle ?? '')
             if (applicationDetailData.data.mode != null){
                 setMode(applicationDetailData.data.mode);
             }
@@ -73,7 +73,11 @@ const GazetteDetailCard = (
     }, [issueNum]);
 
     const groupDetailClick = () => () => {
-        if (gazetteCode == null) {
+        // groupNo is normalized to '' when absent, so check empty string — not only null
+        const hasGazetteCode =
+            gazetteCode != null &&
+            String(gazetteCode).trim() !== "";
+        if (!hasGazetteCode) {
             setStatus("genGazetteCode");
             return;
         }
@@ -306,7 +310,9 @@ const GazetteDetailCard = (
                                 maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                             }
                         }}>
-                        <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
+                        <DialogTitle component="div">
+                            <Typography variant="h3" component="h2">Warning</Typography>
+                        </DialogTitle>
                         <DialogContent style={{ display: 'flex', }}>
                             <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                         </DialogContent>

src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js

@@ -147,6 +147,11 @@ const StatusChangeDialog = (props) => {
               id="gazetteGroup"
               options={groupTitleComboList}
               filterOptions={(options) => options}
+              getOptionLabel={(option) => {
+                if (option == null) return "";
+                if (typeof option === "string") return option;
+                return option.label != null ? String(option.label) : "";
+              }}
               inputValue={comboInputValue.label}
               onChange={(event, newValue) => {
                 if (newValue != null && newValue != {}) {
@@ -156,7 +161,6 @@ const StatusChangeDialog = (props) => {
                   props.setSelectedGazetteGroup(newValue);
                   formik.setFieldValue("", "")
                 } else {
-                  gazetteGroup
                   props.setSelectedGazetteGroupInputType("");
                 }
               }}
@@ -195,7 +199,7 @@ const StatusChangeDialog = (props) => {
       <FormikProvider value={formik}>
         <form>
           <DialogContent>
-            <DialogContentText>
+            <DialogContentText component="div">
               {content}
             </DialogContentText>
           </DialogContent>

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

@@ -86,6 +86,7 @@ export default function ProofTab({appId, setCount}) {
             }
         },
         {
+            field: 'actions',
             type: 'actions',
             headerName: 'Proof Slip',
             width: 100,

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

@@ -46,7 +46,7 @@ export default function StatusHistoryTab({appId, setCount}) {
             flex: isMdOrLg ? 1 : undefined,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [StatusUtils.getStatusEng(params)]
+                return StatusUtils.getStatusEng(params);
             },
         },
     ];

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

@@ -43,9 +43,9 @@ const PublicNotice = ({ appId, proofCount, paymentCount, statusHistoryCount, set
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto' }}>
                             <TabList onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}>
-                                <Tab renderActiveOnly={false} label={"Proof (" + proofCount + ") "} value="1" />
-                                <Tab renderActiveOnly={false} label={"Online Payment (" + paymentCount + ") "} value="2" />
-                                <Tab renderActiveOnly={false} label={"Status History (" + statusHistoryCount + ") "} value="3" />
+                                <Tab label={"Proof (" + proofCount + ") "} value="1" />
+                                <Tab label={"Online Payment (" + paymentCount + ") "} value="2" />
+                                <Tab label={"Status History (" + statusHistoryCount + ") "} value="3" />
                             </TabList>
                         </Box>
                         <TabPanel value="1" sx={{ p: 0 }}>

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -655,9 +655,9 @@ const ApplicationDetailCard = (
                                                     <Grid container direction="row" alignItems="center" justifyContent="flex-start">
                                                         <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word', }}>
                                                             <Typography
-                                                                fullWidth
                                                                 id='fileName'
                                                                 variant="pnspsFormParagraph"
+                                                                sx={{ width: '100%' }}
                                                             >
                                                                 {fileDetail?.filename}
                                                             </Typography>

src/pages/PublicNotice/Details_Public/StatusChangeDialog.js

@@ -5,6 +5,7 @@ import {
 
 // material-ui
 import {
+  Box,
   Button,
   // Link,
   Stack,
@@ -14,7 +15,6 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-  FormLabel,
 } from '@mui/material';
 import { useFormik,FormikProvider } from 'formik';
 import * as yup from 'yup';
@@ -60,19 +60,20 @@ const StatusChangeDialog = (props) => {
         fullWidth={true}
         maxWidth={'xs'}
       >
-        <DialogTitle >
-          <Typography variant="h4">
+        <DialogTitle component="div">
+          <Typography variant="h4" component="h2">
             {status} {intl.formatMessage({id: 'publicNotice'})}
           </Typography>
         </DialogTitle>
         <FormikProvider value={formik}>
             <form>
               <DialogContent>
-                <DialogContentText>
-                  <FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}>
-                    <Typography variant="h5">
-                      {intl.formatMessage({id: 'confirmTo'})}{status} {intl.formatMessage({id: 'publicNoticeApp'})}?</Typography>
-                  </FormLabel>
+                <DialogContentText component="div">
+                  <Box sx={{ fontSize: '18px', color: '#000000', textAlign: 'center' }}>
+                    <Typography variant="h5" component="p" sx={{ m: 0 }}>
+                      {intl.formatMessage({id: 'confirmTo'})}{status} {intl.formatMessage({id: 'publicNoticeApp'})}?
+                    </Typography>
+                  </Box>
                 </DialogContentText>
               </DialogContent>
             </form>

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

@@ -25,8 +25,7 @@ export default function ProofTab({appId, setCount}) {
 
     const columns = [
         {
-           
-            field: 'actions',
+            field: 'refNo',
             headerName: intl.formatMessage({id: 'proofId'}),
             width: 200,
             cellClassName: 'actions',
@@ -36,7 +35,7 @@ export default function ProofTab({appId, setCount}) {
             },
         },
         {
-            id: 'actions',
+            field: 'status',
             headerName: intl.formatMessage({id: 'status'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,

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

@@ -55,7 +55,7 @@ export default function StatusHistoryTab({appId, setCount}) {
             flex: isMdOrLg ? 1 : undefined,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [StatusUtils.getStatusEng(params)]
+                return StatusUtils.getStatusEng(params);
             },
         },
     ];

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -41,7 +41,7 @@ export default function BaseGrid({setCount, url}) {
             flex: isMdOrLg ? 1 : undefined,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [params.row.appNo+getModeIntl(params,intl)]
+                return params.row.appNo + getModeIntl(params, intl);
             },
         },
         {
@@ -96,7 +96,7 @@ export default function BaseGrid({setCount, url}) {
             flex: isMdOrLg ? 1 : undefined,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [getStatusIntl(params,intl)]
+                return getStatusIntl(params, intl);
             },
         },
         {

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -298,7 +298,7 @@ export default function SubmittedTab({ setCount, url }) {
             flex: isMdOrLg ? 1 : undefined,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [StatusUtils.getStatusIntl(params, intl)]
+                return StatusUtils.getStatusIntl(params, intl);
             },
         },
         {
@@ -324,23 +324,27 @@ export default function SubmittedTab({ setCount, url }) {
             selectedRowItems.includes(row.id)
         );
         for (var i = 0; i < datas?.length; i++) {
-            content.push(<>
-                <Stack direction="row" justifyContent="space-between">
-                    <Typography variant="h5">
-                        <FormattedMessage id="applicationId" />: {datas[i].appNo}
-                    </Typography>
-                    ({DateUtils.datetimeStr(datas[i].created)})
-                </Stack>
-                <FormattedMessage id="extraMark" />: {datas[i].remarks}
-                <br /><br />
-            </>);
+            content.push(
+                <React.Fragment key={datas[i].id}>
+                    <Stack direction="row" justifyContent="space-between">
+                        <Typography variant="h5">
+                            <FormattedMessage id="applicationId" />: {datas[i].appNo}
+                        </Typography>
+                        ({DateUtils.datetimeStr(datas[i].created)})
+                    </Stack>
+                    <FormattedMessage id="extraMark" />: {datas[i].remarks}
+                    <br /><br />
+                </React.Fragment>
+            );
 
             totalAmount += datas[i].fee;
         }
-        content.push(<Typography variant="h5">
-            <FormattedMessage id="totalAmount" /> ($): {FormatUtils.currencyFormat(totalAmount)}
-            <br /><br />
-        </Typography>);
+        content.push(
+            <Typography key="payment-total" variant="h5">
+                <FormattedMessage id="totalAmount" /> ($): {FormatUtils.currencyFormat(totalAmount)}
+                <br /><br />
+            </Typography>
+        );
         return content;
     }
 
@@ -402,6 +406,11 @@ export default function SubmittedTab({ setCount, url }) {
                                 id="careOfCombo"
                                 value={selectedCareOf === null ? null : selectedCareOf}
                                 options={careOfComboList}
+                                getOptionLabel={(option) => {
+                                    if (option == null) return "";
+                                    if (typeof option === "string") return option;
+                                    return option.label != null ? String(option.label) : "";
+                                }}
                                 onChange={(event, newValue) => {
                                     // console.log(newValue)
                                     setSelectedCareOf(newValue);

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -234,7 +234,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                             }
                             value={status}
                             // inputValue={status?.labelCht}
-                            getOptionLabel={(option) => intl.formatMessage({id: option.label})}
+                            getOptionLabel={(option) => {
+                                if (option == null || option.label == null) return "";
+                                const s = intl.formatMessage({ id: option.label });
+                                return typeof s === "string" ? s : String(s ?? "");
+                            }}
                             onChange={(event, newValue) => {
                                 if(newValue ==null){
                                     setStatus(localStorage.getItem('userData').creditor?ComboData.publicNoticeStatic_Creditor[0]:ComboData.publicNoticeStatic[0]);
@@ -280,7 +284,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                             }
                             value={status}
                             // inputValue={status?.labelCht}
-                            getOptionLabel={(option) => intl.formatMessage({id: option.label})}
+                            getOptionLabel={(option) => {
+                                if (option == null || option.label == null) return "";
+                                const s = intl.formatMessage({ id: option.label });
+                                return typeof s === "string" ? s : String(s ?? "");
+                            }}
                             onChange={(event, newValue) => {
                                 console.log(newValue)
                                 const findAllIndex = newValue.findIndex((ele) => {

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -48,7 +48,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             flex: isMdOrLg ? 1 : undefined,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [params.row.appNo+getModeIntl(params,intl)]
+                return params.row.appNo + getModeIntl(params, intl);
             },
         },
         {
@@ -126,7 +126,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             width: 200,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [StatusUtils.getStatusIntl(params, intl)]
+                return StatusUtils.getStatusIntl(params, intl);
             },
         },
         {

src/pages/PublicNotice/Search_GLD/DataGrid.js

@@ -77,7 +77,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             width: 100,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [StatusUtils.getModeEng(params)]
+                return StatusUtils.getModeEng(params);
             },
         },
         {
@@ -88,7 +88,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             width: 240,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [StatusUtils.getStatusEng(params)]
+                return StatusUtils.getStatusEng(params);
             },
         },
         {
@@ -99,7 +99,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             width: 120,
             renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
-                return [params.row.proofId != null ? "Yes" : ""]
+                return params.row.proofId != null ? "Yes" : "";
             },
         },
         {

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -279,7 +279,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         setSelectedStatus(newValue);
                                     }
                                 }}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 sx={{
                                     '& .MuiInputBase-root': { alignItems: 'center' },
                                     '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
@@ -317,7 +317,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         setSelectedLabelsString(selectedLabelsString);
                                     }
                                 }}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}
@@ -419,7 +419,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                 options={ComboData.groupTitle}
                                 value={groupSelected}
                                 inputValue={(groupSelected?.label) ? groupSelected?.label : ""}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 onChange={(event, newValue) => {
                                     setGroupSelected(newValue);
                                 }}
@@ -470,7 +470,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                     '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                                     '& .MuiOutlinedInput-root': { height: 40 }
                                 }}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}

src/pages/PublicNotice/Search_Mark_As_Paid_GLD/SearchForm.js

@@ -266,7 +266,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         setSelectedStatus(newValue);
                                     }
                                 }}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 sx={{
                                     '& .MuiInputBase-root': { alignItems: 'center' },
                                     '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
@@ -304,7 +304,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         setSelectedLabelsString(selectedLabelsString);
                                     }
                                 }}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 renderInput={(params) => (
                                     <TextField
                                         {...params}

src/pages/Recon/SearchForm.js

@@ -185,7 +185,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, onLoad }) => {
                                 filterOptions={(options) => options}
                                 options={ComboData.paymentMethod}
                                 value={method}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 inputValue={method?.label ? method?.label : ""}
                                 onChange={(event, newValue) => {
                                     if (newValue !== null) {
@@ -200,11 +200,9 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, onLoad }) => {
                                 renderInput={(params) => (
                                     <TextField {...params}
                                         label="Payment Method"
+                                        InputLabelProps={{ shrink: true }}
                                     />
                                 )}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
                             />
                         </Grid>
 
@@ -217,7 +215,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, onLoad }) => {
                                 filterOptions={(options) => options}
                                 options={ComboData.paymentStatus}
                                 value={status}
-                                getOptionLabel={(option) => option.label}
+                                getOptionLabel={(option) => (option?.label != null ? String(option.label) : "")}
                                 inputValue={status?.label ? status?.label : ""}
                                 onChange={(event, newValue) => {
                                     if (newValue !== null) {
@@ -232,11 +230,9 @@ const SearchPublicNoticeForm = ({ applySearch, generateReport, onLoad }) => {
                                 renderInput={(params) => (
                                     <TextField {...params}
                                         label="Payment Status"
+                                        InputLabelProps={{ shrink: true }}
                                     />
                                 )}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
                             />
                         </Grid>
                        

src/pages/Setting/SystemSetting/index.js

@@ -135,7 +135,7 @@ const SystemSetting = () => {
                             </Grid>
                         </Grid>
                         <Grid item xs={12} sm={4} md={4} lg={4}>
-                            <Grid container spacing>
+                            <Grid container spacing={1}>
                                 <Grid item xs={12} md={12}>
                                     <MainCard elevation={0}
                                         border={false}

src/pages/User/ChangePasswordPage/index.js

@@ -17,6 +17,7 @@ import {
     FormHelperText,
     TextField,
     IconButton, InputAdornment,
+    CircularProgress,
     // Box,
     // FormControl
 } from '@mui/material';
@@ -78,6 +79,10 @@ const Index = () => {
                 changePwdInFlightRef.current = false;
                 setIsChangingPassword(false);
             },
+            onFail: function () {
+                changePwdInFlightRef.current = false;
+                setIsChangingPassword(false);
+            },
             onError:function (error) {
                 // console.log(error.response.data);
                 setExpiryErrText(intl.formatMessage({ id: error.response.data.error }))
@@ -439,7 +444,11 @@ const Index = () => {
                                                     <FormattedMessage id="close"/>
                                                 </Typography>
                                             </Button>
-                                            <Button disabled={isChangingPassword} onClick={() => goLogin(changePasswordValues)}>
+                                            <Button
+                                                disabled={isChangingPassword}
+                                                onClick={() => goLogin(changePasswordValues)}
+                                                startIcon={isChangingPassword ? <CircularProgress color="inherit" size={18} /> : null}
+                                            >
                                                 <Typography variant="h5">
                                                     <FormattedMessage id="confirm"/>
                                                 </Typography>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -578,7 +578,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                     label: intl.formatMessage({ id: 'language' }) + ":",
                                     valueName: "preferLocale",
                                     dataList: ComboData.Locale,
-                                    getOptionLabel: (option) => option.label ? option.label : "",
+                                    getOptionLabel: (option) => (option?.label != null ? String(option.label) : ""),
                                     disabled: (!editMode),
                                     form: formik
                                 })}

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js

@@ -242,7 +242,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid xs={12} sm={12} md={12} lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 <Grid container alignItems={"center"} spacing={1} sx={{mb:2}} >
                                     <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="pnspsFormParagraphBold">
@@ -345,7 +345,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                     label: intl.formatMessage({id: 'language'}) + ":",
                                     valueName: "preferLocale",
                                     dataList: ComboData.Locale,
-                                    getOptionLabel: (option) => option.label? option.label: "",
+                                    getOptionLabel: (option) => (option?.label != null ? String(option.label) : ""),
                                     disabled: (!editMode),
                                     form: formik
                                 })}

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -2,6 +2,7 @@
 import {
     Grid, Typography, Button,
     Dialog, DialogTitle, DialogContent, DialogActions,
+    CircularProgress,
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import { useState, useEffect, lazy } from 'react';
@@ -73,8 +74,8 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                     }
                 }),
         }),
-        onSubmit: (values, { setSubmitting }) => {
-            return new Promise((resolve) => {
+        onSubmit: (values) => {
+            return new Promise((resolve, reject) => {
                 HttpUtils.post({
                     url: POST_ORG_USER + "/" + userData.id,
                     params: {
@@ -86,25 +87,18 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                             countryCode: values.fax_countryCode,
                             faxNumber: values.faxNumber
                         },
-                        // identification: values.identification,
                         emailBus: values.emailBus,
                         contactPerson: values.contactPerson,
                         orgId: values.orgId?.id,
                         preferLocale: values.preferLocale?.type
                     },
                     onSuccess: function () {
-                        resolve();
                         notifySaveSuccess();
                         loadDataFun();
-                    },
-                    onFail: function () {
-                        setSubmitting(false);
                         resolve();
                     },
-                    onError: function () {
-                        setSubmitting(false);
-                        resolve();
-                    }
+                    onFail: () => reject(),
+                    onError: () => reject(),
                 });
             });
         }
@@ -222,6 +216,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                     type="submit"
                                                     color="success"
                                                     disabled={formik.isSubmitting}
+                                                    startIcon={formik.isSubmitting ? <CircularProgress color="inherit" size={18} /> : null}
                                                 >
                                                     Save
                                                 </Button>
@@ -394,7 +389,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                     label: intl.formatMessage({ id: 'language' }) + ":",
                                     valueName: "preferLocale",
                                     dataList: ComboData.Locale,
-                                    getOptionLabel: (option) => option.label ? option.label : "",
+                                    getOptionLabel: (option) => (option?.label != null ? String(option.label) : ""),
                                     disabled: (!editMode),
                                     form: formik
                                 })}

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js

@@ -1,6 +1,7 @@
 // material-ui
 import {
     Grid, Typography, Button,
+    CircularProgress,
     // Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
 import MainCard from "components/MainCard";
@@ -59,8 +60,8 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
             tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'require3Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
             phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
         }),
-        onSubmit: (values, { setSubmitting }) => {
-            return new Promise((resolve) => {
+        onSubmit: (values) => {
+            return new Promise((resolve, reject) => {
                 HttpUtils.post({
                     url: UrlUtils.POST_PUB_ORG_USER,
                     params: {
@@ -75,18 +76,12 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                         preferLocale: values.preferLocale.type
                     },
                     onSuccess: function () {
-                        resolve();
                         notifySaveSuccess();
                         loadDataFun();
-                    },
-                    onFail: function () {
-                        setSubmitting(false);
                         resolve();
                     },
-                    onError: function () {
-                        setSubmitting(false);
-                        resolve();
-                    }
+                    onFail: () => reject(),
+                    onError: () => reject(),
                 });
             });
         }
@@ -149,6 +144,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                                 type="submit"
                                                 color="success"
                                                 disabled={formik.isSubmitting}
+                                                startIcon={formik.isSubmitting ? <CircularProgress color="inherit" size={18} /> : null}
                                             >
                                                 <FormattedMessage id="save" />
 
@@ -244,7 +240,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                     label: intl.formatMessage({id: 'language'}) + ":",
                                     valueName: "preferLocale",
                                     dataList: ComboData.Locale,
-                                    getOptionLabel: (option) => option.label? option.label: "",
+                                    getOptionLabel: (option) => (option?.label != null ? String(option.label) : ""),
                                     disabled: (!editMode),
                                     form: formik
                                 })}

src/pages/User/ManagePage_OrgPublic/index.js

@@ -78,9 +78,10 @@ const ManageOrgUserPage = () => {
         });
     }
 
-    function getHeader(headerStr) {
-        return <Typography variant="h5" >{headerStr}</Typography>;
-    }
+    /** DataGrid `headerName` must be a string; use `renderHeader` for styled markup. */
+    const renderStyledHeader = (params) => (
+        <Typography variant="h5">{params.colDef.headerName}</Typography>
+    );
 
     function getStatus(params) {
         if (params.row.locked) {
@@ -125,7 +126,8 @@ const ManageOrgUserPage = () => {
         {
             id: 'username',
             field: 'username',
-            headerName: getHeader(intl.formatMessage({ id: 'loginName' })),
+            headerName: intl.formatMessage({ id: 'loginName' }),
+            renderHeader: renderStyledHeader,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
@@ -133,7 +135,8 @@ const ManageOrgUserPage = () => {
         {
             id: 'contactPerson',
             field: 'contactPerson',
-            headerName: getHeader(intl.formatMessage({ id: 'userName' })),
+            headerName: intl.formatMessage({ id: 'userName' }),
+            renderHeader: renderStyledHeader,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
@@ -141,7 +144,8 @@ const ManageOrgUserPage = () => {
         {
             id: 'contactTel',
             field: 'contactTel',
-            headerName: getHeader(intl.formatMessage({ id: 'userContactNumber' })),
+            headerName: intl.formatMessage({ id: 'userContactNumber' }),
+            renderHeader: renderStyledHeader,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -152,14 +156,16 @@ const ManageOrgUserPage = () => {
         {
             id: 'emailBus',
             field: 'emailBus',
-            headerName: getHeader(intl.formatMessage({ id: 'userContactEmail' })),
+            headerName: intl.formatMessage({ id: 'userContactEmail' }),
+            renderHeader: renderStyledHeader,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'lastLogin',
             field: 'lastLogin',
-            headerName: getHeader(intl.formatMessage({ id: 'lastLoginDate' })),
+            headerName: intl.formatMessage({ id: 'lastLoginDate' }),
+            renderHeader: renderStyledHeader,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -169,7 +175,8 @@ const ManageOrgUserPage = () => {
         {
             id: 'lastApply',
             field: 'lastApply',
-            headerName: getHeader(intl.formatMessage({ id: 'lastSubmissionDate' })),
+            headerName: intl.formatMessage({ id: 'lastSubmissionDate' }),
+            renderHeader: renderStyledHeader,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: () => {
@@ -178,20 +185,21 @@ const ManageOrgUserPage = () => {
         },
         {
             field: 'actions',
-            type: 'actions',
-            headerName: getHeader(intl.formatMessage({ id: 'status' })),
+            headerName: intl.formatMessage({ id: 'status' }),
+            renderHeader: renderStyledHeader,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
-            getActions: (params) => {
-                return [getStatus(params)]
-            },
+            sortable: false,
+            filterable: false,
+            renderCell: (params) => getStatus(params),
         },
         {
             id: 'primaryUser',
             field: 'primaryUser',
             type: 'bool',
-            headerName: getHeader(intl.formatMessage({ id: 'primary' })),
+            headerName: intl.formatMessage({ id: 'primary' }),
+            renderHeader: renderStyledHeader,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {

src/pages/User/SearchPage_Individual/UserTable_Individual.js

@@ -129,14 +129,16 @@ export default function UserTable_Individual({ searchCriteria, applyGridOnReady,
                 if (params.row.verifiedDate)
                     return [
                         <GridActionsCellItem
-                            key=""
+                            key="verified"
                             icon={<CheckCircleOutline />}
+                            label="Verified"
                             color="success"
                         />];
                 return [
                     <GridActionsCellItem
-                        key=""
+                        key="unverified"
                         icon={<HighlightOff />}
+                        label="Not verified"
                         color="error"
                     />];
             },

src/pages/User/SearchPage_Organization/UserTable_Organization.js

@@ -123,14 +123,16 @@ export default function UserTable_Organization({searchCriteria, applyGridOnReady
                 if(params.row.verifiedDate)
                 return [
                     <GridActionsCellItem
-                        key=""
+                        key="verified"
                         icon={<CheckCircleOutline/>}
+                        label="Verified"
                         color="success"
                     />];
                 return [
                     <GridActionsCellItem 
-                        key=""
+                        key="not-verified"
                         icon={<HighlightOff/>}
+                        label="Not verified"
                         color="error"
                     />];
             },

src/pages/authentication/AuthWrapper.js

@@ -175,9 +175,11 @@ const AuthWrapper = ({ children }) => {
             '& p': { marginBottom: '12px', lineHeight: 1.7 }
           }}
         >
-          <Typography component="div" sx={{ fontSize: 18, lineHeight: 1.8 }}>
-            <div dangerouslySetInnerHTML={{ __html: popupHtml }} />
-          </Typography>
+          <Typography
+            component="div"
+            sx={{ fontSize: 18, lineHeight: 1.8 }}
+            dangerouslySetInnerHTML={{ __html: popupHtml }}
+          />
         </DialogContent>
       </Dialog>
 
@@ -205,26 +207,24 @@ const AuthWrapper = ({ children }) => {
             >
               <Grid item xs={12} sx={{ px: { xs: 2 }, pl: { md: 4 }, pt: { xs: 4, sm: 2, md: 1.5 }, pb: { xs: 4, sm: 0 } }}>
                 {checkPaymentSuspension() ? (
-                  <Typography style={{ color: 'red', textAlign: 'flex-start' }}>
-                    <div
-                      style={{ padding: 12 }}
-                      dangerouslySetInnerHTML={{
-                        __html: intl.formatMessage({ id: 'suspensionMessageText', defaultMessage: '' })
-                      }}
-                    />
-                  </Typography>
+                  <Typography
+                    component="div"
+                    sx={{ color: 'error.main', textAlign: 'start', p: 1.5 }}
+                    dangerouslySetInnerHTML={{
+                      __html: intl.formatMessage({ id: 'suspensionMessageText', defaultMessage: '' })
+                    }}
+                  />
                 ) : (
-                  <Typography style={{ textAlign: 'flex-start' }}>
-                    <div
-                      style={{ padding: 12 }}
-                      dangerouslySetInnerHTML={{
-                        __html: intl.formatMessage({
-                          id: isOnlyOnline ? 'landingMessage' : 'homePageHeaderMessage',
-                          defaultMessage: ''
-                        })
-                      }}
-                    />
-                  </Typography>
+                  <Typography
+                    component="div"
+                    sx={{ textAlign: 'start', p: 1.5 }}
+                    dangerouslySetInnerHTML={{
+                      __html: intl.formatMessage({
+                        id: isOnlyOnline ? 'landingMessage' : 'homePageHeaderMessage',
+                        defaultMessage: ''
+                      })
+                    }}
+                  />
                 )}
               </Grid>
 

src/pages/dashboard/Public/Notice.js

@@ -29,13 +29,13 @@ const SearchDemandNoteForm = (props) => {
     React.useEffect(() => {
         let list = []
         if(listData == []) return;
-        listData.map((item) => {
+        listData.map((item, index) => {
             list.push(
-                <Stack direction="column">
+                <Stack key={item.id != null ? item.id : `announce-${index}`} 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.dateValue(item.announceDate)}</Typography>
                     <Typography sx={{pt: 1}} align="justify">{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography>
-                    <Divider fullWidth sx={{ pt: 1 }}></Divider>
+                    <Divider sx={{ pt: 1 }} />
                 </Stack>
             )
         });

src/pages/dashboard/Public/index.js

@@ -92,10 +92,9 @@ const DashboardDefault = () => {
     HttpUtils.get({
         url: UrlUtils.GET_MSG_DASHBOARD,
         onSuccess: function (response) {
-            let list = []
-            response.map((item) => {
-                list.push(
+            const list = response.map((item) => (
                     <Button
+                      key={item.id}
                       onClick={() => navigate("/msg/details/" + item.id)}
                       sx={{
                         p: 2,
@@ -119,8 +118,7 @@ const DashboardDefault = () => {
                             <Typography align="justify">{DateUtils.datetimeStr(item.sentDate)}</Typography>
                         </Stack>
                     </Button>
-                )
-            });
+            ));
 
             setItemList(list);
             setMessageOnReady(true);

src/pages/pnspsUserGroupDetailPage/UserAddCard.js

@@ -124,6 +124,12 @@ const UserAddCard = ({ isCollectData, updateGroupMember, userGroupData, isNewRec
                                         id="user-combo"
                                         value={selectedUser === null ? null : selectedUser}
                                         options={userComboList}
+                                        getOptionLabel={(option) => {
+                                            if (option == null) return "";
+                                            if (typeof option === "string") return option;
+                                            const s = option.label ?? option.name ?? option.username ?? option.fullName ?? option.enName;
+                                            return s != null ? String(s) : "";
+                                        }}
                                         onChange={(event, newValue) => {
                                             // console.log(newValue)
                                             setSelectedUser(newValue);

src/routes/index.js

@@ -39,10 +39,10 @@ export default function ThemeRoutes() {
         return () => window.removeEventListener('storage', onStorage)
     }, [dispatch])
 
-    if (isUserLoggedIn()) {
-        //auto logout if token not valid
-        SetupAxiosInterceptors();
-    }
+    // Must run every render: SetupAxiosInterceptors uses useNavigate/useDispatch. Wrapping it in
+    // isUserLoggedIn() caused fewer hooks after logout (e.g. Change Password → Back to Login).
+    // Interceptor registration is still guarded inside by axiosInterceptorsSetup.
+    SetupAxiosInterceptors();
     // console.log();
     return useRoutes([{
         path: '',

src/utils/Combo.js

@@ -12,6 +12,9 @@ export default function Combo({
   isOptionEqualToValue,
   onInputChange,
   onChange,
+  /** TextField-only: must not be spread onto Autocomplete (root is a div). */
+  error,
+  helperText,
   ...props
 }) {
   const formValue = form.values[valueName] ?? null;
@@ -24,7 +27,7 @@ export default function Combo({
     if (!formValue) return;
     try {
       const label = getOptionLabel ? getOptionLabel(formValue) : "";
-      if (typeof label === "string") setInputValue(label);
+      if (label != null) setInputValue(typeof label === "string" ? label : String(label));
     } catch {
       // ignore label errors
     }
@@ -49,9 +52,15 @@ export default function Combo({
       inputValue={inputValue}
       filterOptions={filterOptions}
       getOptionLabel={(opt) => {
-        if (!opt) return "";
-        const v = getOptionLabel ? getOptionLabel(opt) : String(opt);
-        return typeof v === "string" ? v : "";
+        if (opt == null) return "";
+        let v;
+        try {
+          v = getOptionLabel ? getOptionLabel(opt) : String(opt);
+        } catch {
+          v = "";
+        }
+        if (v == null) return "";
+        return typeof v === "string" ? v : String(v);
       }}
       isOptionEqualToValue={(option, value) => {
         return isOptionEqualToValue
@@ -78,6 +87,8 @@ export default function Combo({
       renderInput={(params) => (
         <TextField
           {...params}
+          error={error}
+          helperText={helperText}
           sx={{
             "& .MuiInputBase-input.Mui-disabled": {
               WebkitTextFillColor: "#000000",

src/utils/SelectBase.js

@@ -22,7 +22,17 @@ export default function Combo ({valueName, disabled, form, dataList, filterOptio
             inputValue={inputValue}
             filterOptions={filterOptions}
             options={dataList}
-            getOptionLabel={getOptionLabel}
+            getOptionLabel={(opt) => {
+                if (opt == null) return "";
+                let v;
+                try {
+                    v = getOptionLabel ? getOptionLabel(opt) : String(opt);
+                } catch {
+                    v = "";
+                }
+                if (v == null) return "";
+                return typeof v === "string" ? v : String(v);
+            }}
             isOptionEqualToValue={(option, newValue)=>{
                 if(isOptionEqualToValue)
                     isOptionEqualToValue(option,newValue, setValue,setInputValue )