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

src/assets/style/styles.css

@@ -46,4 +46,6 @@ img
 .huerotate {-webkit-filter: hue-rotate(180deg);}
 .rss.opacity {-webkit-filter: opacity(50%);}
 
-img:hover{-webkit-filter:none;}
+img:hover{-webkit-filter:none;}
+
+/* iframe#webpack-dev-server-client-overlay{display:none!important} */

src/auth/index.js

@@ -12,6 +12,7 @@ export const predictUsageCount = 'predictUsageCount'
 export const windowCount = 'windowCount'
 import {useNavigate} from "react-router-dom";
 import {useDispatch} from "react-redux";
+import { REFRESH_TOKEN } from 'utils/ApiPathConst';
 
 // ** Handle User Login
 export const handleLogin = data => {
@@ -25,7 +26,7 @@ export const handleLogin = data => {
             refreshToken: data['refreshToken']
         })
 
-        console.log(data)
+        // console.log(data)
         // ** Add to user, accessToken & refreshToken to localStorage
         localStorage.setItem('userData', JSON.stringify(data))
         localStorage.setItem('accessToken', data.accessToken)
@@ -104,6 +105,8 @@ export const SetupAxiosInterceptors = () => {
     const navigate = useNavigate()
     const dispatch = useDispatch();
     //const updateLastRequestTime = useContext(TimerContext);
+    let isRefreshToken= false;
+    
     axios.interceptors.request.use(
         config => {
             // ** Get token from localStorage
@@ -126,39 +129,77 @@ export const SetupAxiosInterceptors = () => {
             //updateLastRequestTime(Date.now());
             return response;
         },
-        error => {
+        async (error) => {
             // ** const { config, response: { status } } = error
-            const {response} = error
-            if (error.response.status === 401) {
-                if (localStorage.getItem("expiredAlertShown") === null) {
-                    localStorage.setItem("expiredAlertShown", true)
-                    alert("登入驗證已過期，請重新登入。")
-                }
-                
-            }
-
-            // ** if (status === 401) {
-            if (response.status === 401) {
-                if (localStorage.getItem("expiredAlertShown") === null) {
-                    localStorage.setItem("expiredAlertShown", true)
-                    alert("登入驗證已過期，請重新登入。")
+            if (error.response.status === 401 && error.config.url !== apiPath + REFRESH_TOKEN) {
+                // Make a request to refresh the access token
+                const refreshToken = localStorage.getItem('refreshToken');
+                if (isRefreshToken) {
+                  return;
                 }
-            }
-
-            if (response && response.status === 401) {
-                if (localStorage.getItem("expiredAlertShown") === null) {
-                    localStorage.setItem("expiredAlertShown", true)
-                    alert("登入驗證已過期，請重新登入。")
+                isRefreshToken = true;
+                return axios
+                    .post(`${apiPath}${REFRESH_TOKEN}`, {
+                      refreshToken: refreshToken // Replace with your refresh token
+                    })
+                    .then((response) => {
+                      if (response.status === 200) {
+                        const newAccessToken = response.data.accessToken;
+                        const newRefreshToken = response.data.refreshToken;
+                        localStorage.setItem('accessToken', newAccessToken);
+                        localStorage.setItem('refreshToken', newRefreshToken);
+                        isRefreshToken = false;
+                        window.location.reload();
+                      }
+                    })
+                    .catch((refreshError) => {
+                      dispatch(handleLogoutFunction());
+                      navigate('/login');
+                      isRefreshToken = false;
+                      window.location.reload();
+                      throw refreshError;
+                    });
+            } else {
+                if (isUserLoggedIn()){
+                    if (error.response.status === 401) {
+                        if (localStorage.getItem("expiredAlertShown") === null) {
+                            localStorage.setItem("expiredAlertShown", true)
+                            alert("登入驗證已過期，請重新登入。")
+                        }
+                        
+                    }
+        
+                    // ** if (status === 401) {
+                    if (response.status === 401) {
+                        if (localStorage.getItem("expiredAlertShown") === null) {
+                            localStorage.setItem("expiredAlertShown", true)
+                            alert("登入驗證已過期，請重新登入。")
+                        }
+                    }
+        
+                    if (response && response.status === 401) {
+                        if (localStorage.getItem("expiredAlertShown") === null) {
+                            localStorage.setItem("expiredAlertShown", true)
+                            alert("登入驗證已過期，請重新登入。")
+                        }
+                    }
+        
+                    if (localStorage.getItem("expiredAlertShown")) {
+                        await dispatch(handleLogoutFunction());
+                        await navigate('/login');
+                        await window.location.reload();
+                    }
+                } else {
+                    if (error.response.status === 401) {
+                        await dispatch(handleLogoutFunction());
+                        await navigate('/login');
+                        // await window.location.reload();
+                    }
                 }
             }
 
-            if (localStorage.getItem("expiredAlertShown")) {
-                dispatch(handleLogoutFunction());
-                navigate('/login');
-            }
-
             return Promise.reject(error)
-        },
+        }
         
     )
 }

src/auth/utils.js

@@ -44,7 +44,7 @@ export const getNonce = () => {
 };
 
 export const getBowserType = () => {
-  console.log(navigator.userAgent)
+  // console.log(navigator.userAgent)
   // const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Mi|huawei|Opera Mini|SAMSUNG|Samsung|SGH-[I|N|T]|GT-[I|N]|SM-[A|N|P|T|Z]|SHV-E|SCH-[I|J|R|S]|SPH-L/i;
   // if(!regex.test(navigator.userAgent)) 
   if (navigator.userAgent.indexOf("Edg") != -1) {

src/components/AutoLogoutProvider.js

@@ -1,17 +1,29 @@
 import React, { createContext, useState, useEffect } from 'react';
-//import {useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 //import axios from "axios";
-import {getUserData} from "../auth/utils";
-import {isObjEmpty} from "../utils/Utils";
+// import {getUserData} from "auth/utils";
+// import {isObjEmpty} from "../utils/Utils";
 import {useIdleTimer} from "react-idle-timer";
+import { handleLogoutFunction } from 'auth/index';
+import { useDispatch } from "react-redux";
+import { 
+    isUserLoggedIn, 
+    isGLDLoggedIn, 
+    // isPrimaryLoggedIn, 
+    // isCreditorLoggedIn,
+    // isINDLoggedIn,
+    // isORGLoggedIn,
+    // getUserId
+} from "utils/Utils";
 
 const TimerContext = createContext();
 
 const AutoLogoutProvider = ({ children }) => {
     const [lastRequestTime, setLastRequestTime] = useState(Date.now());
-    //const navigate = useNavigate();
-    const [logoutInterval /*, setLogoutInterval*/] = useState(1);
+    const navigate = useNavigate();
+    const [logoutInterval, setLogoutInterval] = useState(1);
     const [state, setState] = useState('Active');
+    const dispatch = useDispatch()
 
     const onIdle = () => {
         setLastRequestTime(Date.now());
@@ -30,7 +42,7 @@ const AutoLogoutProvider = ({ children }) => {
     } = useIdleTimer({
         onIdle,
         onActive,
-        timeout: 10_000,
+        timeout: 1_000,
         throttle: 500,
         crossTab: true,
         syncTimers: 200,
@@ -39,42 +51,55 @@ const AutoLogoutProvider = ({ children }) => {
     const lastActiveTab = isLastActiveTab() === null ? 'loading' : isLastActiveTab()
     //const tabId = getTabId() === null ? 'loading' : getTabId().toString()
 
-    useEffect(() => {
-        const userData = getUserData();
-        if(!isObjEmpty(userData)){
+    const getLogoutInterval = () =>{
+        if(isUserLoggedIn()&&logoutInterval===1){
             //TODO: get auto logout time here
-
+            if(isGLDLoggedIn()){
+                setLogoutInterval(240);
+                console.log("Set Logout Interval: 240")
+            }else{
+                setLogoutInterval(60);
+                console.log("Set Logout Interval: 60")
+            }
             // axios.get(`${apiPath}${GET_IDLE_LOGOUT_TIME}`,
             // )
-            //     .then((response) => {
-            //         if (response.status === 200) {
-            //             setLastRequestTime(Date.now());
-            //             setLogoutInterval(parseInt(response.data.data));
-            //         }
-            //     })
-            //     .catch(error => {
-            //         console.log(error);
-            //         return false;
-            //     });
+            // .then((response) => {
+            //     if (response.status === 200) {
+            //         setLastRequestTime(Date.now());
+            //         setLogoutInterval(parseInt(response.data.data));
+            //     }
+            // })
+            // .catch(error => {
+            //     console.log(error);
+            //     return false;
+            // });
         }
         else{
+            if(!isUserLoggedIn()&&logoutInterval>1){
+                setLogoutInterval(1);
+            }
             //navigate('/login');
         }
-    }, []);
+    }
 
     useEffect(() => {
+        getLogoutInterval()
+        // console.log("AutoLogoutProvider Start")
+        // console.log(logoutInterval)
         const interval = setInterval(async () => {
             const currentTime = Date.now();
             getRemainingTime();
             if(state !== "Active" && lastActiveTab){
                 const timeElapsed = currentTime - lastRequestTime;
-                // console.log(timeElapsed);
+                // console.log(parseInt(timeElapsed/1000));
+                // console.log(logoutInterval* 60);
                 if (timeElapsed >= logoutInterval * 60 * 1000) {
-                    //TODO: auto logout here
-                    // console.log("logout");
-                    //await dispatch(handleLogoutFunction());
-                    //await navigate('/login');
-                    //await window.location.reload();
+                    if(isUserLoggedIn()){
+                        alert("登入驗證已過期，請重新登入。")
+                        dispatch(handleLogoutFunction());
+                        navigate('/login');
+                        window.location.reload();
+                    }
                 }
             }
             else if(state === "Active"){

src/components/FiDataGrid.js

@@ -1,15 +1,17 @@
 // material-ui
 import * as React from 'react';
 import {
-    DataGrid,
+    DataGrid, GridOverlay,
 } from "@mui/x-data-grid";
+import {FormattedMessage, useIntl} from "react-intl";
+import {TablePagination, Typography} from '@mui/material';
 
 // ==============================|| EVENT TABLE ||============================== //
 
 export function FiDataGrid({ rows, columns, sx, autoHeight,
-    hideFooterSelectedRowCount, rowModesModel, editMode, 
-    pageSizeOptions, filterItems,
-    ...props }) {
+                               hideFooterSelectedRowCount, rowModesModel, editMode,
+                               pageSizeOptions, filterItems, customPageSize, ...props }) {
+    const intl = useIntl();
     const [_rows, set_rows] = React.useState([]);
     const [_columns, set_columns] = React.useState([]);
     const [_rowModesModel, set_rowModesModel] = React.useState({});
@@ -17,13 +19,12 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     const [_pageSizeOptions, set_pageSizeOptions] = React.useState([10, 25, 50]);
     const [_filterItems, set_filterItems] = React.useState([]);
 
+    const [page, setPage] = React.useState(0);
+    const [pageSize, setPageSize] = React.useState(10);
     const [_autoHeight, set_autoHeight] = React.useState(true);
     const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true);
     const [_sx, set_sx] = React.useState({
         padding: "4 2 4 2",
-        // boxShadow: 1,
-        // border: 1,
-        // borderColor: '#DDD',
         '& .MuiDataGrid-cell': {
             borderTop: 1,
             borderBottom: 1,
@@ -35,7 +36,6 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         },
     });
 
-
     React.useEffect(() => {
         if (sx) {
             set_sx(sx);
@@ -55,80 +55,74 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         if (pageSizeOptions) {
             set_pageSizeOptions(pageSizeOptions)
         }
-        if(autoHeight != undefined){
+        if(autoHeight !== undefined){
             set_autoHeight(autoHeight)
         }
         if(editMode){
             set_editMode(editMode);
         }
-    }, []);
-
-    React.useEffect(() => {
-        if (sx) {
-            set_sx(sx);
-        }
-    }, [sx]);
-
-    React.useEffect(() => {
-        if (hideFooterSelectedRowCount) {
-            setMyHideFooterSelectedRowCount(hideFooterSelectedRowCount);
+        if(filterItems){
+            set_filterItems(filterItems);
         }
-    }, [hideFooterSelectedRowCount]);
 
-    React.useEffect(() => {
-        if (rowModesModel) {
-            set_rowModesModel(rowModesModel)
+        if(customPageSize){
+            setPageSize(customPageSize);
         }
-    }, [rowModesModel]);
+    }, [sx, hideFooterSelectedRowCount, rowModesModel, rows, columns, pageSizeOptions, autoHeight, editMode, filterItems, customPageSize]);
 
-    React.useEffect(() => {
-        if (rows) {
-            set_rows(rows)
-        }
-    }, [rows]);
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
 
-    React.useEffect(() => {
-        if (columns) {
-            set_columns(columns)
-        }
-    }, [columns]);
+    const handleChangePageSize = (event) => {
+        setPageSize(parseInt(event.target.value, 10));
+        setPage(0);
+    };
 
-    React.useEffect(() => {
-        if (pageSizeOptions) {
-            set_pageSizeOptions(pageSizeOptions)
-        }
-    }, [pageSizeOptions]);
+    const startIndex = page * pageSize;
+    const endIndex = (page + 1) * pageSize;
+    const slicedRows = _rows.slice(startIndex, endIndex);
 
-    React.useEffect(() => {
-        if(autoHeight != undefined){
-            set_autoHeight(autoHeight)
-        }
-    }, [autoHeight]);
+    function CustomNoRowsOverlay() {
+        return (
+            <GridOverlay>
+                <Typography variant="body1">
+                    <FormattedMessage id="noRecordFound" />
+                </Typography>
+            </GridOverlay>
+        );
+    }
 
-    React.useEffect(() => {
-        if(editMode){
-            set_editMode(editMode);
-        }
-    }, [editMode]);
-    
-    React.useEffect(() => {
-        if(filterItems){
-            set_filterItems(filterItems);
-        }
-    }, [filterItems]);
-    
     return (
         <DataGrid
             {...props}
-            rows={_rows}
+            rows={slicedRows}
             columns={_columns}
+            disableColumnMenu
             rowModesModel={_rowModesModel}
             pageSizeOptions={_pageSizeOptions}
             editMode={_editMode}
             autoHeight={_autoHeight}
             hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
-            filterModel={{items:_filterItems}}
+            filterModel={{ items: _filterItems }}
             sx={_sx}
+            components={{
+                noRowsOverlay: CustomNoRowsOverlay,
+                Pagination: () => (
+                    <TablePagination
+                        count={_rows.length}
+                        page={page}
+                        rowsPerPage={pageSize}
+                        rowsPerPageOptions={[5,10,20,100]}
+                        labelDisplayedRows={({ from, to, count }) =>
+                            `${from}-${to} ${intl.formatMessage({ id: "of" })} ${count}`
+                        }
+                        labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"}
+                        onPageChange={handleChangePage}
+                        onRowsPerPageChange={handleChangePageSize}
+                    />
+                ),
+            }}
         />
     );
 }

src/components/RefreshTokenProvider.js

@@ -0,0 +1,72 @@
+import { createContext, useEffect, useRef, useCallback } from 'react';
+import { apiPath } from 'auth/utils';
+import { REFRESH_TOKEN } from 'utils/ApiPathConst';
+import axios from 'axios';
+
+const RefreshTokenContext = createContext();
+
+const RefreshTokenProvider = ({ children }) => {
+  const token = useRef(localStorage.getItem('accessToken'));
+  const isRefresh = useRef(false);
+
+  // handle Refresh Token Logic
+  const handleRefreshToken = useCallback(() => {
+    if (!isRefresh.current) {
+      const refreshToken = localStorage.getItem('refreshToken');
+      isRefresh.current = true;
+      axios
+        .post(`${apiPath}${REFRESH_TOKEN}`, {
+          refreshToken: refreshToken
+        })
+        .then((response) => {
+          if (response.status === 200) {
+            const newAccessToken = response.data.accessToken;
+            const newRefreshToken = response.data.refreshToken;
+            localStorage.setItem('accessToken', newAccessToken);
+            localStorage.setItem('refreshToken', newRefreshToken);
+            token.current = newAccessToken;
+            isRefresh.current = false;
+          } else {
+            token.current = null;
+            isRefresh.current = false;
+          }
+        })
+        .catch((refreshError) => {
+          console.log('Failed to refresh token');
+          console.log(refreshError)
+          token.current = null
+          isRefresh.current = false;
+        });
+    }
+  }, []);
+
+  // Function to check token expiry
+  const checkTokenExpiry = useCallback(() => {
+    // Check if token is present and its expiry time
+    if (token.current) {
+      const tokenExp = JSON.parse(atob(token.current.split('.')[1])).exp;
+      const currentTime = Math.floor(Date.now() / 1000);
+      const expiryTime = tokenExp - 30; // Refresh 30 seconds before expiry
+    //   console.log("check refresh Token");      
+    //   console.log(currentTime);      
+    //   console.log(new Date(currentTime*1000).toLocaleString());      
+    //   console.log(expiryTime);
+    //   console.log(new Date(expiryTime*1000).toLocaleString());      
+    //   console.log('accessToken: ' + localStorage.getItem('accessToken'));
+    //   console.log('refreshToken: ' + localStorage.getItem('refreshToken'));
+      if (currentTime >= expiryTime) {
+        handleRefreshToken();
+      }
+    }
+  }, [token]);
+
+  // Start the timer on component mount
+  useEffect(() => {
+    const timer = setInterval(checkTokenExpiry, 10000); // Check every 10 second
+    return () => clearInterval(timer); // Cleanup timer on unmount
+  }, [checkTokenExpiry]);
+
+  return <RefreshTokenContext.Provider value={{}}>{children}</RefreshTokenContext.Provider>;
+};
+
+export { RefreshTokenContext, RefreshTokenProvider };

src/index.js

@@ -18,6 +18,7 @@ import { store } from 'store';
 import reportWebVitals from './reportWebVitals';
 import {I18nProvider} from "./components/I18nProvider";
 import {AutoLogoutProvider} from "./components/AutoLogoutProvider";
+import {RefreshTokenProvider} from "./components/RefreshTokenProvider";
 
 // ==============================|| MAIN - REACT DOM RENDER  ||============================== //
 
@@ -29,11 +30,13 @@ root.render(
   <StrictMode>
     <ReduxProvider store={store}>
         <I18nProvider>
-        <BrowserRouter basename="/">
-            <AutoLogoutProvider>
-                <App />
-            </AutoLogoutProvider>
-        </BrowserRouter>
+          <BrowserRouter basename="/">
+            <RefreshTokenProvider>
+              <AutoLogoutProvider>
+                  <App />
+              </AutoLogoutProvider>
+            </RefreshTokenProvider>
+          </BrowserRouter>
         </I18nProvider>
     </ReduxProvider>
   </StrictMode>

src/layout/MainLayout/Header/index.js

@@ -137,6 +137,17 @@ function Header(props) {
         <li>
           <Link className="emailTemplate" to='/emailTemplate'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Email Template</Typography></Link>
         </li>
+        <li>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Setting</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
+          <ul className='dropdown'>
+            <li>
+              <Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users Profile</Typography></Link>
+            </li>
+            <li>
+              <Link className="systemSetting" to='/setting/sys'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>System Setting</Typography></Link>
+            </li>
+          </ul>
+        </li>
         <li>
           <Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Logout</Typography></Link>
         </li>
@@ -216,7 +227,7 @@ function Header(props) {
                   <Link className="manageUser" to={'/org'}>
                     <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                       {/* <FormattedMessage id="companyOrUserRecord" /> */}
-                      Organisation Profile
+                      <FormattedMessage id="organizationProfile" />
                     </Typography>
                   </Link>
                 </li>
@@ -252,8 +263,7 @@ function Header(props) {
                 <li>
                   <Link className="manageUser" to={'/orgUser'}>
                     <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
-                      {/* <FormattedMessage id="companyOrUserRecord" /> */}
-                      User Profile
+                      <FormattedMessage id="userProfile" />
                     </Typography>
                   </Link>
                 </li>

src/pages/DemandNote/Create/DataGrid.js

@@ -103,18 +103,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
     ];
 
     return (
-        <div style={{ minHeight:400, width: '100%' }}>
+        <div style={{ width: '100%' }}>
 
             <FiDataGrid
                 sx={_sx}
                 rowHeight={80}
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
+                customPageSize={5}
                 onRowDoubleClick={handleEditClick}
             />
         </div>

src/pages/DemandNote/Create/SearchForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography,
@@ -15,6 +14,8 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import { useNavigate } from "react-router-dom";
 import { notifyDownloadSuccess } from 'utils/CommonFunction';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -35,22 +36,6 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
     const [issueCombo, setIssueCombo] = React.useState([]);
     const navigate = useNavigate()
 
-    const _sx = {
-        padding: "4 2 4 2",
-        boxShadow: 1,
-        border: 1,
-        borderColor: '#DDD',
-        '& .MuiDataGrid-cell': {
-            borderTop: 1,
-            borderBottom: 1,
-            borderColor: "#EEE"
-        },
-        '& .MuiDataGrid-footerContainer': {
-            border: 1,
-            borderColor: "#EEE"
-        }
-    }
-
     React.useEffect(() => {
         if (issueComboData && issueComboData.length > 0) {
             setIssueCombo(issueComboData);
@@ -128,22 +113,24 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
         <MainCard xs={12} md={12} lg={12}
             border={false}
             content={false}
-            sx={_sx}
         >
 
             <form>
                 {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h5">Please Select Gazette Issue :</Typography>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Please Select Gazette Issue :
+                        </Typography>
                     </Grid>
-                </CardContent>
+                    {/*row 2*/}
 
-                {/*row 2*/}
-                <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 1 }}>
+                    <Grid container display="flex" alignItems={"center"} sx={{mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3 }}>
                         <Autocomplete
                             disablePortal
+                            size="small"
                             id="issueId"
                             options={issueCombo}
                             value={issueSelected}
@@ -177,17 +164,15 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                         </Button>
                     </Grid> */}
                     <Grid item sx={{ ml: 3, mr: 3 }} >
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={onSubmit}
                             color="success"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Create</Typography>
+                        >
+                            Create
                         </Button>
+                        </ThemeProvider>
                     </Grid>
 
                     <Grid item sx={{ ml: 3, mr: 3 }} >
@@ -198,9 +183,20 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                         <Typography variant="h5">Pending Publish: {publishCount}</Typography>
                     </Grid>
                 </Grid>
+                </Grid>
             </form>
             <div>
-                <Dialog open={isFailPopUp} onClose={() => setIsFailPopUp(false)}  >
+                <Dialog
+                    open={isFailPopUp}
+                    onClose={() => setIsFailPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{failText}</Typography>
@@ -211,7 +207,17 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                 </Dialog>
             </div>
             <div>
-                <Dialog open={isSuccessPopUp} onClose={() => setIsSuccessPopUp(false)}  >
+                <Dialog
+                    open={isSuccessPopUp}
+                    onClose={() => setIsSuccessPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Create Result</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Grid container alignItems={"center"}>

src/pages/DemandNote/Create/index.js

@@ -80,16 +80,18 @@ const Index = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+            <Grid container sx={{backgroundColor: 'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Create Demand Note</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                Create Demand Note
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm 
                     applySearch={applySearch}
                     issueComboData={issueCombo}

src/pages/DemandNote/Search/DataGrid.js

@@ -18,6 +18,8 @@ import { notifyDownloadSuccess } from 'utils/CommonFunction';
 
 import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchDemandNote({ recordList, reloadFun, applySearch }) {
@@ -270,8 +272,9 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
     ];
 
     return (
-        <div style={{ height: '100%', width: '100%' }}>
+        <div style={{ width: '100%' }}>
             <Grid container maxWidth justifyContent="flex-start">
+                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <input
                         id="uploadFileBtn"
@@ -295,62 +298,45 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                         <Button
                             component="span"
                             variant="contained"
-                            size="large"
                         >
-                            <Typography variant="h5">Attach DN</Typography>
+                            Attach DN
                         </Button>
                     </label>
                 </Grid>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={findReadyToSend}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Ready Send</Typography>
+                    >
+                        Ready Send
                     </Button>
                 </Grid>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={() => setSendPopUp(true)}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Send DN</Typography>
+                    >
+                        Send DN
                     </Button>
                 </Grid>
 
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
-                        onClick={() => exportXml()}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Export XML</Typography>
+                        onClick={() => exportXml()}>
+                        Export GDNS
                     </Button>
                 </Grid>
 
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={() => setConfirmPopUp(true)}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Mark as Paid</Typography>
+                        >
+                        Mark as Paid
                     </Button>
                 </Grid>
+                </ThemeProvider>
             </Grid>
             <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
                 <FiDataGrid
@@ -361,17 +347,23 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                     }}
                     rows={rows}
                     columns={columns}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 100 },
-                        },
-                    }}
+                    customPageSize={100}
                     getRowHeight={() => 'auto'}
                     onRowDoubleClick={handleRowDoubleClick}
                 />
             </Box>
             <div>
-                <Dialog open={isErrorPopUp} onClose={() => setIsErrorPopUp(false)}  >
+                <Dialog
+                    open={isErrorPopUp}
+                    onClose={() => setIsErrorPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Number of DN record must less than 100.<br />Please edit search form.</Typography>
@@ -382,7 +374,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 </Dialog>
             </div>
             <div>
-                <Dialog open={selectonWarning} onClose={() => setSelectonWarning(false)}  >
+                <Dialog
+                    open={selectonWarning}
+                    onClose={() => setSelectonWarning(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Please Select DN.</Typography>
@@ -393,7 +395,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 </Dialog>
             </div>
             <div>
-                <Dialog open={isConfirmPopUp} onClose={() => setConfirmPopUp(false)}  >
+                <Dialog
+                    open={isConfirmPopUp}
+                    onClose={() => setConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure to mark DN paid?</Typography>
@@ -405,7 +417,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 </Dialog>
             </div>
             <div>
-                <Dialog open={isSendPopUp} onClose={() => setSendPopUp(false)}  >
+                <Dialog
+                    open={isSendPopUp}
+                    onClose={() => setSendPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure to send DN?</Typography>
@@ -417,7 +439,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 </Dialog>
             </div>
             <div>
-                <Dialog open={wait} onClose={() => setWait(false)}  >
+                <Dialog
+                    open={wait}
+                    onClose={() => setWait(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Calculating, please wait ...</Typography>
                     </DialogContent>

src/pages/DemandNote/Search/SearchForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography
@@ -12,6 +11,8 @@ import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -88,14 +89,12 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
         >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3 }} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1 }} width="98%">
                     {/*row 1*/}
-                    <Grid item xs={12}>
-                        <CardContent sx={{ px: 2.5, pt: 3 }}>
-                            <Grid item justifyContent="space-between" alignItems="center">
-                                <Typography variant="h5">Search Form</Typography>
-                            </Grid>
-                        </CardContent>
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1, ml:3,mb:2.5}}>
+                        <Typography variant="pnspsFormHeader" >
+                            Search Form
+                        </Typography>
                     </Grid>
                     {/*row 2*/}
                     <Grid container display="flex" alignItems={"center"}>
@@ -105,6 +104,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                 {...register("issueId")}
                                 disablePortal
                                 id="issueId"
+                                size="small"
                                 options={issueCombo}
                                 value={issueSelected}
                                 inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
@@ -145,6 +145,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                                         {...register("orgId")}
                                         disablePortal
                                         id="orgId"
+                                        size="small"
                                         options={orgCombo}
                                         value={orgSelected}
                                         inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
@@ -220,6 +221,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Autocomplete
                                 multiple
+                                size="small"
                                 {...register("status")}
                                 id="status"
                                 options={ComboData.denmandNoteStatus}
@@ -258,31 +260,25 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
-                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb:3 }}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 onClick={resetForm}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">Clear</Typography>
+                                >
+                                Clear
                             </Button>
                         </Grid>
 
-                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Grid item sx={{ ml: 3, mr: 3, mb:3}}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 type="submit"
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">Submit</Typography>
+                            >
+                                Submit
                             </Button>
                         </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>

src/pages/DemandNote/Search/index.js

@@ -94,16 +94,18 @@ const UserSearchPage_Individual = () => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{ minHeight: '85vh', backgroundColor: 'backgroundColor.default' }} direction="column">
+            <Grid container sx={{ backgroundColor: 'backgroundColor.default' }} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Demand Note</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                Demand Note
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
                     <SearchForm
                         applySearch={applySearch}
                         orgComboData={orgCombo}

src/pages/DemandNote/Search_Public/DataGrid.js

@@ -80,11 +80,7 @@ export default function SearchDemandNote({ recordList }) {
                 <FiDataGrid
                     rows={rows}
                     columns={columns}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 100 },
-                        },
-                    }}
+                    customPageSize={100}
                     getRowHeight={() => 'auto'}
                 />
             </Box>

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -13,6 +13,8 @@ import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import {FormattedMessage, useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -76,13 +78,13 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
         >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3 }} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff' }} width="98%">
                     {/*row 1*/}
                     <Grid item xs={12}>
                         <CardContent sx={{ px: 2.5, pt: 3 }}>
-                            <Grid item justifyContent="space-between" alignItems="center">
-                                <Typography variant="h5">
-                                    <FormattedMessage id="search"/>
+                            <Grid item justifyContent="space-between" alignItems="center" >
+                                <Typography variant="pnspsFormHeader">
+                                    <FormattedMessage id="searchForm"/>
                                 </Typography>
                             </Grid>
                         </CardContent>
@@ -210,35 +212,26 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
 
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
-                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                            <Button
-                                size="large"
-                                variant="contained"
-                                onClick={resetForm}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                            <Grid item sx={{mr: 3, mb: 3}}>
+                                <Button
+                                    color="cancel"
+                                    variant="contained"
+                                    onClick={resetForm}
+                                >
                                     <FormattedMessage id="reset"/>
-                                </Typography>
-                            </Button>
-                        </Grid>
+                                </Button>
+                            </Grid>
 
-                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                            <Button
-                                size="large"
-                                variant="contained"
-                                type="submit"
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">
+                            <Grid item sx={{ mb: 3 }}>
+                                <Button
+                                    variant="contained"
+                                    type="submit"
+                                >
                                     <FormattedMessage id="submit" />
-                                </Typography>
-                            </Button>
-                        </Grid>
+                                </Button>
+                            </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>

src/pages/DemandNote/Search_Public/index.js

@@ -98,14 +98,14 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentInfoRecord" />
                             </Typography>
                         </Stack>
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm
                         applySearch={applySearch}
                         orgComboData={orgCombo}

src/pages/EmailTemplate/Detail_GLD/EmailTemplateDetails.js

@@ -4,8 +4,7 @@ import {
     Grid,
     Typography,
     FormLabel,
-    OutlinedInput,
-    Button,
+    Button, TextField,
     // TextField,
     // Autocomplete,
 } from '@mui/material';
@@ -15,6 +14,8 @@ import * as React from "react";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import { useForm } from 'react-hook-form';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = ({
     formData,
@@ -35,59 +36,30 @@ const ApplicationDetailCard = ({
     //     initialValues: data,
     // });
 
-    const DisplayField = ({ name, width, value, rows = 1, disabled = false }) => {
-        return <OutlinedInput
+    const DisplayField = ({ name, rows, value, disabled = false }) => {
+        return <TextField
             fullWidth
-            multiline
             disabled={disabled}
-            size="small"
-            // onChange={formik.handleChange}
+            inputProps={{ style: {fontSize: '1.1rem'}}}
+            InputProps={{
+                style: {
+                    minHeight:'42.5px',
+                    maxHeight: '50vh',
+                    padding: '0 0 0 0',
+                    height: 'fit-content',
+                    boxSizing: "inherit"},
+            }}
+            sx={{ padding: '10.5px 14px 10.5px 12px'}}
             {...register(name,
                 {
                     value: value,
                 })}
-            id={name}
-            name={name}
-            variant="outlined"
+            multiline
+            minRows={rows}
             maxRows={6}
-            rows={rows}
-            sx={
-                {
-                    "& .Mui-disabled": {
-                        WebkitTextFillColor: "#000000",
-                        background: "#f8f8f8",
-                    },
-                    // "& .MuiInputBase-input.Mui-disabled": {
-                    //     WebkitTextFillColor: "#000000",
-                    //     background: "#f8f8f8",
-                    // },
-                    width: width ? width : '100%'
-                }
-            }
         />;
     }
-
     const { register, handleSubmit } = useForm()
-
-    
-
-    // const DisplaySelection = ({ name = "test", value = "", onChange }) => {
-    //     return <Autocomplete
-    //         {...register(name)}
-    //         disablePortal
-    //         id={name}
-    //         options={formData}
-    //         vale={value}
-    //         onChange={onChange}
-    //         renderInput={(params) => (
-    //             <TextField {...params}
-    //                 InputLabelProps={{
-    //                     shrink: true
-    //                 }}
-    //             />
-    //         )}
-    //     />
-    // }
     return (
         <MainCard
             id={"emailTemplateMainCard"}
@@ -141,6 +113,7 @@ const ApplicationDetailCard = ({
                                             <DisplayField
                                                 name="description"
                                                 value={formData?.description}
+                                                rows={2}
                                             />
                                         </FormControl>
                                     </Grid>
@@ -168,14 +141,14 @@ const ApplicationDetailCard = ({
 
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Cht):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectCht"
                                             value={formData?.subjectCht}
@@ -202,18 +175,18 @@ const ApplicationDetailCard = ({
                         </Grid>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Chs):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectChs"
                                             value={formData?.subjectChs}
-                                            rows={2}
+                                            rows={1}
                                         />
                                     </Grid>
                                 </Grid>
@@ -236,18 +209,18 @@ const ApplicationDetailCard = ({
                         </Grid>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Eng):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectEng"
                                             value={formData?.subjectEng}
-                                            rows={2}
+                                            rows={1}
                                         />
                                     </Grid>
                                 </Grid>
@@ -273,33 +246,25 @@ const ApplicationDetailCard = ({
                     {/*bottom button*/}
                     <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"end"} justifyContent="center">
                         <Grid container maxWidth justifyContent="flex-end">
+                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                             <Grid item sx={{ ml: 3, mr: 3 }}>
                                 <Button
-                                    size="large"
-                                    color="error"
+                                    color="delete"
                                     variant="contained"
                                     onClick={handleDelete}
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}
                                 >
-                                    <Typography variant="h5">Delete</Typography>
+                                    Delete
                                 </Button>
                             </Grid>
                             <Grid item sx={{ ml: 3, mr: 3 }}>
                                 <Button
-                                    size="large"
                                     variant="contained"
                                     type="submit"
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}
                                 >
-                                    <Typography variant="h5">Save</Typography>
+                                    Save
                                 </Button>
                             </Grid>
+                            </ThemeProvider>
                         </Grid>
                     </Grid>
                 </Grid>

src/pages/EmailTemplate/Detail_GLD/index.js

@@ -129,7 +129,7 @@ const Index = () => {
                         </div>
                     </Grid>
                     <Grid item xs={12} width="100%">
-                        <Button title="Back" sx={{ ml: 6, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/emailTemplate") }}>
+                        <Button title="Back" sx={{ ml: 6, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}>
                             <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                         </Button>
                     </Grid>

src/pages/EmailTemplate/Search_GLD/DataGrid.js

@@ -87,11 +87,7 @@ export default function EmailTemplateTable({ recordList }) {
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
+                customPageSize={5}
                 onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
             />

src/pages/EmailTemplate/Search_GLD/index.js

@@ -25,6 +25,8 @@ const BackgroundHead = {
     backgroundPosition: 'right'
 }
 import { useNavigate } from "react-router";
+import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -56,7 +58,7 @@ const Index = () => {
             <LoadingComponent />
             :
             (
-                <Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid container sx={{ backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
@@ -78,18 +80,18 @@ const Index = () => {
                     <Grid container direction="row"
                         justifyContent="space-between"
                         alignItems="center">
-                        <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
+                        <Grid item xs={3} md={3} sx={{ mb:3, ml: 3, mr: 1 }}>
+                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 onClick={()=>{navigate('/emailTemplate/-1')}}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <AddCircleOutlineIcon sx={{ mb: 0.5 }} />
-                                <Typography sx={{ ml: 1 }} variant="h5">New Email Template</Typography>
+                                startIcon={<AddCircleOutlineIcon/>}
+                            >
+
+                                New Email Template
+
                             </Button>
+                            </ThemeProvider>
                         </Grid>
                     </Grid>
                 </Grid >

src/pages/GFMIS/DataGrid.js

@@ -69,18 +69,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
     
 
     return (
-        <div style={{ minHeight:400, width: '100%' }}>
+        <div style={{ width: '100%' }}>
 
             <FiDataGrid
                 sx={_sx}
                 rowHeight={80}
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
+                customPageSize={10}
                 onRowDoubleClick={handleEditClick}
             />
         </div>

src/pages/GFMIS/SearchForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     // Autocomplete,
     Typography
@@ -10,6 +9,8 @@ import MainCard from "components/MainCard";
 import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
+import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // import * as ComboData from "utils/ComboData";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -20,22 +21,6 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
     // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
 
-    const _sx = {
-        padding: "4 2 4 2",
-        boxShadow: 1,
-        border: 1,
-        borderColor: '#DDD',
-        '& .MuiDataGrid-cell': {
-            borderTop: 1,
-            borderBottom: 1,
-            borderColor: "#EEE"
-        },
-        '& .MuiDataGrid-footerContainer': {
-            border: 1,
-            borderColor: "#EEE"
-        }
-    }
-
     const { register, handleSubmit, getValues } = useForm()
 
     const onSubmit = (data) => {
@@ -67,20 +52,19 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
         <MainCard xs={12} md={12} lg={12}
             border={false}
             content={false}
-            sx={_sx}
             >
 
-            <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h5">Credit Date</Typography>
+            <form onSubmit={handleSubmit(onSubmit)} >
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Credit Date
+                        </Typography>
                     </Grid>
-                </CardContent>
-
-                {/*row 2*/}
-                <Grid container  alignItems="center">
+                    {/*row 2*/}
 
+                    <Grid container display="flex" alignItems={"center"}>
                     <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
@@ -121,31 +105,26 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) =>
                     </Grid> */}
                 </Grid>
                 <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{ ml: 3, mb: 3, }} >
                         <Button
-                            size="large"
                             variant="contained"
                             type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Preview</Typography>
+                        >
+                            Preview
                         </Button>
                     </Grid>
 
                     <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={generateHandler}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Generate</Typography>
+                        >
+                            Generate
                         </Button>
                     </Grid>
+                    </ThemeProvider>
+                </Grid>
                 </Grid>
             </form>
         </MainCard>

src/pages/GFMIS/index.js

@@ -42,7 +42,7 @@ const Index = () => {
     }, [record]);
 
     React.useEffect(() => {
-        console.log(searchCriteria)
+        // console.log(searchCriteria)
         loadGrid();
     }, [searchCriteria]);
 
@@ -57,14 +57,14 @@ const Index = () => {
     }
 
     function downloadXML(input) {
-        console.log(input)
+        // console.log(input)
         HttpUtils.get({
             url: UrlUtils.GEN_GFMIS_XML + "/today",
             params:{dateTo: input.dateTo,
                 dateFrom: input.dateFrom,
             },
             onSuccess: (responseData) => {
-              console.log(responseData)
+            //   console.log(responseData)
               const parser = new DOMParser();
               const xmlDoc = parser.parseFromString(responseData, 'application/xml');
               const filename = xmlDoc.querySelector('FileHeader').getAttribute('H_Filename');
@@ -100,7 +100,7 @@ const Index = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+            <Grid container sx={{ backgroundColor: 'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -109,7 +109,7 @@ const Index = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm 
                     applySearch={applySearch}
                     generateXML={generateXML}

src/pages/Message/Details/index.js

@@ -79,7 +79,7 @@ const Index = () => {
                         <Grid container justifyContent="flex-start" alignItems="center" >
                             <center>
                                 <Grid item xs={12} md={12} sx={{p:2}} >
-                                    <Typography variant="h2" sx={{ textAlign: "left", borderBottom: "1px solid black" }}>
+                                    <Typography variant="h3" sx={{ textAlign: "left", borderBottom: "1px solid black" }}>
                                     {record?.subject}
                                     </Typography>
                                     <Typography sx={{p:1}} align="justify">{DateUtils.datetimeStr(record?.sentDate)}</Typography>
@@ -87,7 +87,7 @@ const Index = () => {
                                         <div  dangerouslySetInnerHTML={{__html: record?.content}}></div>
                                     </Typography>
 
-                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         <Button
                                             component="span"
                                             variant="contained"

src/pages/Message/Search/DataGrid.js

@@ -66,11 +66,7 @@ export default function MsgTable({ recordList }) {
                 rowHeight={80}
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 20 },
-                    },
-                }}
+                customPageSize={20}
                 onRowDoubleClick={handleEditClick}
             />
         </div>

src/pages/Message/Search/SearchForm.js

@@ -63,8 +63,8 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h4">
-                            <FormattedMessage id="search"/>
+                        <Typography variant="pnspsFormHeader">
+                            <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
                 </CardContent>
@@ -77,6 +77,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("keyword")}
                             id='keyword'
+                            aria-label={intl.formatMessage({id: 'keyword'})}
                             label={intl.formatMessage({id: 'keyword'}) + ":"}
                             defaultValue={searchCriteria.code}
                             InputLabelProps={{
@@ -93,6 +94,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                                     {...register("dateFrom")}
                                     id="dateFrom"
                                     type="date"
+                                    aria-label={intl.formatMessage({id: 'dateFrom'})}
                                     label={intl.formatMessage({id: 'dateFrom'})}
                                     defaultValue={searchCriteria.dateFrom}
                                     InputProps={{ inputProps: { max: maxDate } }}
@@ -120,6 +122,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                                     onChange={(newValue) => {
                                         setMaxDate(DateUtils.dateStr(newValue));
                                     }}
+                                    aria-label={intl.formatMessage({id: 'dateTo'})}
                                     id="dateTo"
                                     type="date"
                                     //label="付款日期(到)"
@@ -138,7 +141,9 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                     <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
+                            aria-label={intl.formatMessage({id: 'reset'})}
                         >
                             <FormattedMessage id="reset"/>
                         </Button>
@@ -148,6 +153,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                         <Button
                             variant="contained"
                             type="submit"
+                            aria-label={intl.formatMessage({id: 'submit'})}
                         >
                             <FormattedMessage id="submit"/>
                         </Button>

src/pages/Message/Search/index.js

@@ -69,7 +69,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentHistory"/>
                             </Typography>
                         </Stack>

src/pages/Organization/DetailPage/CreditorHistoryTable.js

@@ -42,11 +42,7 @@ export default function CreditorHistoryTable({ recordList }) {
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 100 },
-                    },
-                }}
+                customPageSize={100}
             />
         </div>
     );

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -4,20 +4,22 @@ import {
     Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
-import MainCard from "../../../components/MainCard";
+import MainCard from "components/MainCard";
 import * as React from "react";
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 import { useEffect, useState } from "react";
-import * as HttpUtils from '../../../utils/HttpUtils';
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as FieldUtils from "../../../utils/FieldUtils";
-import * as ComboData from "../../../utils/ComboData";
+import * as HttpUtils from 'utils/HttpUtils';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as FieldUtils from "utils/FieldUtils";
+import * as ComboData from "utils/ComboData";
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
 import { useIntl } from "react-intl";
+import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -92,8 +94,8 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                         faxNumber: vaule.faxNumber
                     },
                     addressTemp: {
-                        country: vaule.country,
-                        district: vaule.district,
+                        country: vaule.country.id,
+                        district: vaule.district.id,
                         addressLine1: vaule.addressLine1,
                         addressLine2: vaule.addressLine2,
                         addressLine3: vaule.addressLine3,
@@ -170,97 +172,80 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             <>
                                 {createMode ?
                                     <>
-                                        <Grid item sx={{ ml: 0, mr: 3 }}>
-                                            <Button
-                                                size="large"
-                                                variant="contained"
-                                                type="submit"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
-                                            >
-                                                <Typography variant="h5">Create</Typography>
-                                            </Button>
-                                        </Grid>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                            <Grid item sx={{ ml: 0, mr: 3 }}>
+                                                <Button
+                                                    variant="contained"
+                                                    type="submit"
+                                                    color="success"
+                                                >
+                                                    Create
+                                                </Button>
+                                            </Grid>
+                                        </ThemeProvider>
                                     </> :
                                     <>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 onClick={loadDataFun}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
+                                                color="cancel"
                                             >
-                                                <Typography variant="h5">Reset & Back</Typography>
+                                                    Reset & Back
                                             </Button>
                                         </Grid>
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 type="submit"
                                                 color="success"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Save</Typography>
+                                                Save
                                             </Button>
                                         </Grid>
+                                        </ThemeProvider>
                                     </>
                                 }
                             </>
                             :
                             <>
                                 <Grid item sx={{ ml: 0, mr: 3 }}>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                        onClick={onEditClick}
-                                    >
-                                        <Typography variant="h5">Edit</Typography>
-                                    </Button>
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                        <Button
+                                            variant="contained"
+                                            onClick={onEditClick}
+                                            color="success"
+                                        >
+                                            Edit
+                                        </Button>
+                                    </ThemeProvider>
                                 </Grid>
 
                                 {
                                     currentUserData.creditor ?
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 color="error"
                                                 onClick={() => setNonCreditorConfirmPopUp(true)}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Mark as Non-Creditor</Typography>
+                                                Mark as Non-Creditor
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         :
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
-                                            <Button
-                                                size="large"
-                                                variant="contained"
-                                                color="orange"
-                                                onClick={() => setCreditorConfirmPopUp(true)}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
-                                            >
-                                                <Typography variant="h5">Mark as Creditor</Typography>
-                                            </Button>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                                <Button
+                                                    variant="contained"
+                                                    color="orange"
+                                                    onClick={() => setCreditorConfirmPopUp(true)}
+                                                >
+                                                    Mark as Creditor
+                                                </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                 }
                             </>
@@ -275,7 +260,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                     <Grid container spacing={1}>
                         <Grid item xs={12}>
                             <Typography variant="h4" sx={{ mb: 2, mr: 3, borderBottom: "1px solid black" }}>
-                                Organisation Details
+                                Organization Details
                             </Typography>
                         </Grid>
                         <Grid item lg={4} >
@@ -400,7 +385,17 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 }
             </form>
             <div>
-                <Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)}  >
+                <Dialog
+                    open={creditorConfirmPopUp}
+                    onClose={() => setCreditorConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
@@ -412,7 +407,17 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 </Dialog>
             </div>
             <div>
-                <Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)}  >
+                <Dialog
+                    open={nonCreditorConfirmPopUp}
+                    onClose={() => setNonCreditorConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>

src/pages/Organization/DetailPage/OrganizationPubCard.js

@@ -1,23 +1,27 @@
 // material-ui
 import {
-    Grid, Button, Checkbox, FormControlLabel, Typography,
+    Grid, Button, 
+    // Checkbox, FormControlLabel,
+    Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
-import MainCard from "../../../components/MainCard";
+import MainCard from "components/MainCard";
 import * as React from "react";
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 import { useEffect, useState } from "react";
-import * as HttpUtils from '../../../utils/HttpUtils';
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as FieldUtils from "../../../utils/FieldUtils";
-import * as ComboData from "../../../utils/ComboData";
+import * as HttpUtils from 'utils/HttpUtils';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as FieldUtils from "utils/FieldUtils";
+import * as ComboData from "utils/ComboData";
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
-import {useIntl} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -48,52 +52,25 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         enableReinitialize: true,
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
-            enCompanyName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
-            chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))).nullable(),
             addressLine1: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
             addressLine2: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'noMoreThen255Words'}))),
             addressLine3: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'noMoreThen255Words'}))),
-            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))).nullable(),
             tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
             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(),
-            brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
-            brNo: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'}))), function (value) {
-                var brNo_pattern = /[0-9]{8}/
-                if (value !== undefined) {
-                    if (value.match(brNo_pattern)) {
-                        return true
-                    } else {
-                        return false
-                    }
-                }
-            }),
         }),
         onSubmit: vaule => {
             console.log(vaule)
             HttpUtils.post({
-                url: UrlUtils.POST_ORG_SAVE_PATH,
+                url: UrlUtils.POST_PUB_ORG_SAVE_PATH,
                 params: {
-                    id: id > 0 ? id : null,
-                    enCompanyName: vaule.enCompanyName,
-                    chCompanyName: vaule.chCompanyName,
-                    brNo: vaule.brNo,
-                    brExpiryDate: vaule.brExpiryDate,
-                    enCompanyNameTemp: vaule.enCompanyNameTemp,
-                    chCompanyNameTemp: vaule.chCompanyNameTemp,
-                    brExpiryDateTemp: vaule.brExpiryDateTemp,
                     contactPerson: vaule.contactPerson,
                     contactTel: {
                         countryCode: vaule.tel_countryCode,
                         phoneNumber: vaule.phoneNumber
                     },
-                    faxNo: {
-                        countryCode: vaule.fax_countryCode,
-                        faxNumber: vaule.faxNumber
-                    },
                     addressTemp: {
-                        country: vaule.country,
-                        district: vaule.district,
+                        country: vaule.country.id,
+                        district: vaule.district.id,
                         addressLine1: vaule.addressLine1,
                         addressLine2: vaule.addressLine2,
                         addressLine3: vaule.addressLine3,
@@ -134,26 +111,6 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         setEditMode(true);
     };
 
-    const markAsCreditor = () => {
-        setCreditorConfirmPopUp(false);
-        HttpUtils.get({
-            url: UrlUtils.GET_ORG_MARK_AS_CREDITOR + "/" + id,
-            onSuccess: () => {
-                loadDataFun();
-            }
-        });
-    }
-
-    const markAsNonCreditor = () => {
-        setNonCreditorConfirmPopUp(false);
-        HttpUtils.get({
-            url: UrlUtils.GET_ORG_MARK_AS_NON_CREDITOR + "/" + id,
-            onSuccess: () => {
-                loadDataFun();
-            }
-        });
-    }
-
     return (
         <MainCard elevation={0}
             border={false}
@@ -171,46 +128,39 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 {createMode ?
                                     <>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
-                                            <Button
-                                                size="large"
-                                                variant="contained"
-                                                type="submit"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
-                                            >
-                                                <Typography variant="h5">Create</Typography>
-                                            </Button>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                                <Button
+                                                    variant="contained"
+                                                    type="submit"
+                                                    color="success"
+                                                >
+                                                    <FormattedMessage id="create" />
+                                                </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                     </> :
                                     <>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
-                                            <Button
-                                                size="large"
-                                                variant="contained"
-                                                onClick={loadDataFun}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
-                                            >
-                                                <Typography variant="h5">Reset & Back</Typography>
-                                            </Button>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                                <Button
+                                                    variant="contained"
+                                                    color="cancel"
+                                                    onClick={loadDataFun}
+                                                >
+                                                    <FormattedMessage id="resetAndBack" />
+                                                </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
-                                            <Button
-                                                size="large"
-                                                variant="contained"
-                                                type="submit"
-                                                color="success"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
-                                            >
-                                                <Typography variant="h5">Save</Typography>
-                                            </Button>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                                <Button
+                                                    variant="contained"
+                                                    type="submit"
+                                                    color="success"
+                                                >
+                                                    <FormattedMessage id="save" />
+                                                </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                     </>
                                 }
@@ -218,45 +168,15 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             :
                             <>
                                 <Grid item sx={{ ml: 0, mr: 3 }}>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                        onClick={onEditClick}
-                                    >
-                                        <Typography variant="h5">Edit</Typography>
-                                    </Button>
-                                </Grid>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        color="orange"
-                                        onClick={()=>setCreditorConfirmPopUp(true)}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                    >
-                                        <Typography variant="h5">Mark as Creditor</Typography>
-                                    </Button>
-                                </Grid>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        color="error"
-                                        onClick={()=>setNonCreditorConfirmPopUp(true)}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                    >
-                                        <Typography variant="h5">Mark as Non-Creditor</Typography>
-                                    </Button>
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                        <Button
+                                            variant="contained"
+                                            onClick={onEditClick}
+                                            color="success"
+                                        >
+                                        <   FormattedMessage id="edit" />
+                                        </Button>
+                                    </ThemeProvider>
                                 </Grid>
                             </>
                         }
@@ -270,20 +190,25 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                     <Grid container spacing={1}>
                         <Grid item xs={12}>
                             <Typography variant="h4" sx={{ mb: 2, mr: 3, borderBottom: "1px solid black" }}>
-                                Organisation Details
+                                <FormattedMessage id="organizationDetails" />
                             </Typography>
                         </Grid>
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                label: FieldUtils.notNullFieldLabel("BR No.:"),
+                                label: intl.formatMessage({id: 'brNo'}) + ":",
                                 valueName: "brNo",
-                                disabled: (!editMode && !createMode),
+                                disabled: true,
                                 form: formik
                             })}
                         </Grid>
-
                         <Grid item lg={4} >
-                            <FormControlLabel
+                            {FieldUtils.getTextField({
+                                    label: intl.formatMessage({id: 'creditorAccount'}) + ":",
+                                    valueName: "creditor",
+                                    disabled: true,
+                                    form: formik
+                            })}
+                            {/* <FormControlLabel
                                 control={<Checkbox checked={formik.values.creditor} />}
                                 label="is Creditor"
                                 name="creditor"
@@ -292,41 +217,41 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 }}
                                 disabled={true}
                             //disabled={!editMode && !createMode}
-                            />
+                            /> */}
                         </Grid>
 
                         <Grid item lg={4} ></Grid>
 
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                label: FieldUtils.notNullFieldLabel("Name (Eng):"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'nameEng'}) + ":"),
                                 valueName: "enCompanyName",
-                                disabled: (!editMode && !createMode),
+                                disabled: true,
                                 form: formik
                             })}
                         </Grid>
 
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                label: "Name (Ch):",
+                                label: intl.formatMessage({id: 'nameChi'}) + ":",
                                 valueName: "chCompanyName",
-                                disabled: (!editMode && !createMode),
+                                disabled: true,
                                 form: formik
                             })}
                         </Grid>
 
                         <Grid item lg={4} >
                             {FieldUtils.getDateField({
-                                label: FieldUtils.notNullFieldLabel("Expiry Date:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'expiryDate'}) + ":"),
                                 valueName: "brExpiryDate",
-                                disabled: (!editMode && !createMode),
+                                disabled: true,
                                 form: formik
                             })}
                         </Grid>
 
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                label: FieldUtils.notNullFieldLabel("Contact Person:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'contactPerson'}) + ":"),
                                 valueName: "contactPerson",
                                 disabled: (!editMode && !createMode),
                                 form: formik
@@ -335,7 +260,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getPhoneField({
-                                label: FieldUtils.notNullFieldLabel("Contact Tel:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'userContactNumber'}) + ":"),
                                 valueName: {
                                     code: "tel_countryCode",
                                     num: "phoneNumber"
@@ -347,19 +272,19 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getPhoneField({
-                                label: "Fax No:",
+                                label: intl.formatMessage({id: 'contactFaxNumber'}) + ":",
                                 valueName: {
                                     code: "fax_countryCode",
                                     num: "faxNumber"
                                 },
-                                disabled: (!editMode && !createMode),
+                                disabled: true,
                                 form: formik
                             })}
                         </Grid>
 
                         <Grid item lg={4} >
                             {FieldUtils.getComboField({
-                                label: FieldUtils.notNullFieldLabel("Country:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'country'}) + ":"),
                                 valueName: "country",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.country,
@@ -370,7 +295,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getComboField({
-                                label: FieldUtils.notNullFieldLabel("District:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'district'}) + ":"),
                                 valueName: "district",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.district,
@@ -382,7 +307,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getAddressField({
-                                label: FieldUtils.notNullFieldLabel("Address:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'formAddress'}) + ":"),
                                 valueName: ["addressLine1", "addressLine2", "addressLine3"],
                                 disabled: (!editMode && !createMode),
                                 form: formik
@@ -395,7 +320,17 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 }
             </form>
             <div>
-                <Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)}  >
+                <Dialog
+                    open={creditorConfirmPopUp}
+                    onClose={() => setCreditorConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
@@ -407,7 +342,17 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 </Dialog>
             </div>
             <div>
-                <Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)}  >
+                <Dialog
+                    open={nonCreditorConfirmPopUp}
+                    onClose={() => setNonCreditorConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>

src/pages/Organization/DetailPage/index.js

@@ -32,6 +32,11 @@ const BackgroundHead = {
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
 }
+import {
+    FormattedMessage,
+    // FormattedMessage,
+    useIntl
+} from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -43,9 +48,14 @@ const OrganizationDetailPage = () => {
     const [isLoading, setLoding] = React.useState(true);
     const [isEditMode, setEditMode] = React.useState(false);
     const navigate = useNavigate();
+    const intl = useIntl();
+    const { locale } = intl;
+
+    const isCreditor = locale === 'en' ?"Yes":locale === 'zh-HK' ?"是":"是";
+    const notCreditor = locale === 'en' ?"No":locale === 'zh-HK' ?"否":"否";
 
     React.useEffect(() => {
-        console.log(formData);
+        // console.log(formData);
         if (isINDLoggedIn()||isORGLoggedIn()&&!isPrimaryLoggedIn()){
             navigate('/dashboard');
         }else{
@@ -61,9 +71,9 @@ const OrganizationDetailPage = () => {
                 HttpUtils.get({
                     url: UrlUtils.GET_ORG_PATH + "/" + params.id,
                     onSuccess: function (response) {
-                        console.log(response)
-                        response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
-                        response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
+                        // console.log(response)
+                        response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.addressTemp?.country);
+                        response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.addressTemp?.district);
                         response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                         response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                         response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
@@ -85,9 +95,10 @@ const OrganizationDetailPage = () => {
             HttpUtils.get({
                 url: UrlUtils.GET_PUB_ORG_PATH,
                 onSuccess: function (response) {
-                    console.log(response)
-                    response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
-                    response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
+                    // console.log(response)
+                    response.data["creditor"] = response.data.creditor!=null?response.data.creditor?isCreditor:notCreditor:notCreditor;
+                    response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.addressTemp?.country);
+                    response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.addressTemp?.district);
                     response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                     response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                     response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
@@ -115,16 +126,24 @@ const OrganizationDetailPage = () => {
         isLoading ?
             <LoadingComponent />
             :
-            <Grid container sx={{ backgroundColor: "backgroundColor.default" }}>
+            <Grid container direction="column" sx={{minHeight: '90vh',backgroundColor:isGLDLoggedIn()?'backgroundColor.default':'#ffffff' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organisation</Typography>
+                        {isGLDLoggedIn()?
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                                Maintain Organization
+                            </Typography>
+                        :
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                                <FormattedMessage id="organizationProfile" />
+                            </Typography>
+                        }
                         </Stack>
                     </div>
                 </Grid>
                 <Grid item xs={12}>
-                    <Button title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/org") }}>
+                    <Button aria-label={intl.formatMessage({id: 'back'})} title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1)}}>
                         <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                     </Button>
                 </Grid>
@@ -133,7 +152,7 @@ const OrganizationDetailPage = () => {
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
                             <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
-                                {isGLDLoggedIn?
+                                {isGLDLoggedIn()?
                                     <InfoCard
                                         userData={formData}
                                         loadDataFun={loadData}

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -256,7 +256,17 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
             </div>
 
             <div>
-                <Dialog open={isFailPopUp} onClose={() => setIsFailPopUp(false)}  >
+                <Dialog
+                    open={isFailPopUp}
+                    onClose={() => setIsFailPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{failText}</Typography>

src/pages/Organization/DetailPage_FromUser/index.js

@@ -24,7 +24,7 @@ const OrganizationDetailPage_FromUser = () => {
 
 
     useEffect(()=>{
-        console.log(formData);
+        // console.log(formData);
         loadData();
     },[]);
 

src/pages/Organization/SearchPage/OrganizationSearchForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Typography,
     Autocomplete,
@@ -15,6 +14,8 @@ import * as React from "react";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import * as ComboData from "utils/ComboData";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -62,119 +63,109 @@ const OrganizationSearchForm = ({ applySearch }) => {
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h4">Search Form</Typography>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="pnspsFormHeader" >
+                            Search Form
+                        </Typography>
                     </Grid>
-                </CardContent>
-
-                {/*row 2*/}
-                <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("brNo")}
-                            id='brNo'
-                            label="BR No."
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("enCompanyName")}
-                            id="enCompanyName"
-                            label="Name (English)"
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("chCompanyName")}
-                            id="chCompanyName"
-                            label="Name (Chinese)"
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3}}>
-                        <Autocomplete
-                                {...register("searchCreditor")}
-                                id="searchCreditor"
-                                size="small"
-                                options={ComboData.CreditorStatus}
-                                value={creditorSelected}
-                                onChange={(event, newValue) => {
-                                    setCreditorSelected(newValue);
+                    {/*row 2*/}
+
+                    <Grid container display="flex" alignItems={"center"}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("brNo")}
+                                id='brNo'
+                                label="BR No."
+                                InputLabelProps={{
+                                    shrink: true
                                 }}
-                                getOptionLabel={(option) => option.label}
-                                renderInput={(params) => (
-                                    <TextField
-                                        {...params}
-                                        label="Status"
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                    />
-                                )}
                             />
-                    </Grid>
-
-                </Grid>
-
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("enCompanyName")}
+                                id="enCompanyName"
+                                label="Name (English)"
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("chCompanyName")}
+                                id="chCompanyName"
+                                label="Name (Chinese)"
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3}}>
+                            <Autocomplete
+                                    {...register("searchCreditor")}
+                                    id="searchCreditor"
+                                    size="small"
+                                    options={ComboData.CreditorStatus}
+                                    value={creditorSelected}
+                                    onChange={(event, newValue) => {
+                                        setCreditorSelected(newValue);
+                                    }}
+                                    getOptionLabel={(option) => option.label}
+                                    renderInput={(params) => (
+                                        <TextField
+                                            {...params}
+                                            label="Status"
+                                            InputLabelProps={{
+                                                shrink: true
+                                            }}
+                                        />
+                                    )}
+                                />
+                        </Grid>
 
-                {/*last row*/}
-                <Grid container maxWidth justifyContent="flex-end">
-
-                <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={doExport}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Export</Typography>
-                        </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Clear</Typography>
-                        </Button>
-                    </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Submit</Typography>
-                        </Button>
+                    {/*last row*/}
+                    <Grid container maxWidth justifyContent="flex-end">
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{mr: 3, mb: 3 }}>
+                            <Button
+                                variant="contained"
+                                onClick={doExport}
+                            >
+                                Export
+                            </Button>
+                        </Grid>
+
+                        <Grid item sx={{ mr: 3, mb: 3}}>
+                            <Button
+                                variant="contained"
+                                onClick={resetForm}
+                            >
+                                Clear
+                            </Button>
+                        </Grid>
+
+                        <Grid item sx={{ mb: 3}}>
+                            <Button
+                                variant="contained"
+                                type="submit"
+                            >
+                                Submit
+                            </Button>
+                        </Grid>
+                        </ThemeProvider>
                     </Grid>
-                    
-
                 </Grid>
             </form>
         </MainCard>

src/pages/Organization/SearchPage/OrganizationTable.js

@@ -102,11 +102,7 @@ export default function OrganizationTable({ recordList }) {
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
+                customPageSize={5}
                 onRowDoubleClick={handleRowDoubleClick}
             />
         </div>

src/pages/Organization/SearchPage/index.js

@@ -76,7 +76,7 @@ const OrganizationSearchPage = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}

src/pages/Payment/Details_GLD/DataGrid.js

@@ -69,11 +69,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 rowHeight={150}
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
+                customPageSize={5}
             />
 
             <Typography align="right" variant= "h3">Total Amount: <span style={{ color: "blue", fontWeight: "bold", }}> HK$ {FormatUtils.currencyFormat(total)}</span></Typography>

src/pages/Payment/Details_Public/DataGrid.js

@@ -79,11 +79,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 rowHeight={150}
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
+                customPageSize={5}
             />
             <Typography align="right" variant="h4" sx={{mr:2}}>
                 <FormattedMessage id="payTotal"/>:

src/pages/Payment/Details_Public/index.js

@@ -4,7 +4,7 @@ import {
     Typography,
     Stack,
     Box,
-    // Button
+    Button
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
@@ -17,8 +17,9 @@ import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
 const PaymentDetails = Loadable(React.lazy(() => import('./PaymentDetails')));
 const DataGrid = Loadable(React.lazy(() => import('./DataGrid')));
+import ForwardIcon from '@mui/icons-material/Forward';
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
-import {FormattedMessage} from "react-intl";
+import {FormattedMessage,useIntl} from "react-intl";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -34,6 +35,7 @@ const BackgroundHead = {
 const Index = () => {
     const params = useParams();
     const navigate = useNavigate()
+    const intl = useIntl();
 
     const [record, setRecord] = React.useState();
     const [itemList, setItemList] = React.useState([]);
@@ -99,6 +101,15 @@ const Index = () => {
                                 </Stack>
                             </div>
                         </Grid>
+                        <Grid item xs={12} width={{xs:"90%", sm:"90%", md:"90%", lg:"80%"}}>
+                            <Button
+                                aria-label={intl.formatMessage({id: 'back'})}
+                                title={intl.formatMessage({id: 'back'})}
+                                sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
+                            >
+                                <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
+                            </Button>
+                        </Grid>
                         {/*row 1*/}
                         <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
                             <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >

src/pages/Payment/MultiPaymentWindow.js

@@ -89,7 +89,7 @@ const MultiPaymentWindow = (props) => {
   // }, [availableMethodData]);
 
   useEffect(() => {
-    console.log(paymentMethod)
+    // console.log(paymentMethod)
     // const subtype = (paymentMethod === "Visa" || paymentMethod === "MasterCard" || paymentMethod === "JCB" || paymentMethod === "UnionPay") ? "CreditCard" : paymentMethod; 
     // const filteredPaymentMethod = availableMethodData.filter(obj => obj.subtype === subtype);
     const filteredPaymentMethod = availableMethodData.filter(obj => {
@@ -98,7 +98,7 @@ const MultiPaymentWindow = (props) => {
       }
       return obj.subtype === paymentMethod;
     });
-    console.log(filteredPaymentMethod)
+    // console.log(filteredPaymentMethod)
     setFilteredPaymentMethod(filteredPaymentMethod);
 
     setFpsClass(paymentMethod == "FPS" || paymentMethod == "" ? "" : "grayscale")
@@ -237,12 +237,12 @@ const MultiPaymentWindow = (props) => {
                         <Grid item xs={12} md={12}>
                             <Grid container >
                                 <Grid item>
-                                    <Typography sx={{fontSize: "20px", color: "#000000", textAlign: "left" }}>
+                                    <Typography variant="pnspsFormParagraphBold" sx={{ color: "#000000", textAlign: "left" }}>
                                       <FormattedMessage id="payTotal"/>(HK$):&nbsp;
                                     </Typography>
                                 </Grid>
                                 <Grid item>
-                                    <Typography sx={{fontSize: "20px", color: "#000000", textAlign: "left" }}>
+                                    <Typography variant="pnspsFormParagraphBold" sx={{color: "#000000", textAlign: "left" }}>
                                         {" HK$ " + FormatUtils.currencyFormat(props.totalAmount)}
                                     </Typography>
                                 </Grid>

src/pages/Payment/Search_GLD/DataGrid.js

@@ -87,18 +87,13 @@ export default function SearchPublicNoticeTable({ recordList }) {
     ];
 
     return (
-        <div style={{ minHeight:400, width: '100%' }}>
-
+        <div style={{ width: '100%' }}>
             <FiDataGrid
                 sx={_sx}
                 rowHeight={80}
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
+                customPageSize={5}
                 onRowDoubleClick={handleEditClick}
             />
         </div>

src/pages/Payment/Search_GLD/SearchForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography
@@ -11,6 +10,8 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
 import * as ComboData from "utils/ComboData";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -20,22 +21,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
     const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
 
-    const _sx = {
-        padding: "4 2 4 2",
-        boxShadow: 1,
-        border: 1,
-        borderColor: '#DDD',
-        '& .MuiDataGrid-cell': {
-            borderTop: 1,
-            borderBottom: 1,
-            borderColor: "#EEE"
-        },
-        '& .MuiDataGrid-footerContainer': {
-            border: 1,
-            borderColor: "#EEE"
-        }
-    }
-
     const { reset, register, handleSubmit } = useForm()
 
     const onSubmit = (data) => {
@@ -58,20 +43,19 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
         <MainCard xs={12} md={12} lg={12}
             border={false}
             content={false}
-            sx={_sx}
             >
 
-            <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h4">Search</Typography>
+            <form onSubmit={handleSubmit(onSubmit)} >
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="pnspsFormHeader" >
+                            Search Form
+                        </Typography>
                     </Grid>
-                </CardContent>
-
-                {/*row 2*/}
-                <Grid container alignItems={"center"}>
+                    {/*row 2*/}
 
+                    <Grid container display="flex" alignItems={"center"}>
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
@@ -138,6 +122,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         <Autocomplete
                             {...register("status")}
                             disablePortal={false}
+                            size="small"
                             id="status"
                             filterOptions={(options) => options}
                             options={ComboData.paymentStatus}
@@ -159,39 +144,32 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             }}
                         />
                     </Grid>
-
-
+                    </Grid>
                 </Grid>
 
 
                 {/*last row*/}
                 <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{ ml: 3, mb: 3}}>
                         <Button
-                            size="large"
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Reset</Typography>
+                        >
+                            Reset
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Button
-                            size="large"
                             variant="contained"
                             type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Submit</Typography>
+                        >
+                            Submit
                         </Button>
                     </Grid>
+                    </ThemeProvider>
                 </Grid>
             </form>
         </MainCard>

src/pages/Payment/Search_GLD/index.js

@@ -64,16 +64,18 @@ const Index = () => {
         !onReady ?
             <LoadingComponent/>
             :
-            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+            <Grid container sx={{backgroundColor: 'backgroundColor.default'}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">Online Payment Record</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                Payment Record
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm 
                     applySearch={applySearch}
                     searchCriteria={searchCriteria}

src/pages/Payment/Search_Public/DataGrid.js

@@ -106,11 +106,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 rowHeight={80}
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 5 },
-                    },
-                }}
+                customPageSize={5}
                 onRowDoubleClick={handleEditClick}
             />
         </div>

src/pages/Payment/Search_Public/SearchForm.js

@@ -68,8 +68,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h4">
-                            <FormattedMessage id="search"/>
+                        <Typography variant="pnspsFormHeader">
+                            <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
                 </CardContent>
@@ -182,17 +182,20 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                     <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
+                            color="cancel"
                             variant="contained"
                             onClick={resetForm}
+                            aria-label={intl.formatMessage({id: 'reset'})}
                         >
                             <FormattedMessage id="reset"/>
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
+                    <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
                             type="submit"
+                            aria-label={intl.formatMessage({id: 'submit'})}
                         >
                             <FormattedMessage id="submit"/>
                         </Button>

src/pages/Payment/Search_Public/index.js

@@ -69,7 +69,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentHistory"/>
                             </Typography>
                         </Stack>

src/pages/Payment/index.js

@@ -301,7 +301,7 @@ const Index = () => {
     }
 
     useEffect(() => {
-        console.log(availableMethods)
+        // console.log(availableMethods)
         if (availableMethods.length > 0) {
             availableMethods.forEach((method) => {
                 if (method.subtype === "FPS") {
@@ -433,7 +433,17 @@ const Index = () => {
             </Grid>
             {/*row 2*/}
             <div>
-                <Dialog open={expiryDateErr} onClose={() => setExpiryDateErr(false)}  >
+                <Dialog
+                    open={expiryDateErr}
+                    onClose={() => setExpiryDateErr(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle></DialogTitle>
                     <Typography variant="h2" style={{ padding: '16px' }}>行動失敗</Typography>
                     <DialogContent style={{ display: 'flex', }}>

src/pages/Proof/Create_FromApp/ProofForm.js

@@ -428,7 +428,17 @@ const FormPanel = ({ formData }) => {
 
             </form>
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
@@ -439,7 +449,17 @@ const FormPanel = ({ formData }) => {
                 </Dialog>
             </div>
             <div>
-                <Dialog open={wait} onClose={() => setWait(false)}  >
+                <Dialog
+                    open={wait}
+                    onClose={() => setWait(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Calculating, please wait ...</Typography>
                     </DialogContent>

src/pages/Proof/Payment/Pay.js

@@ -85,9 +85,9 @@ const Index = () => {
             (
                 <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
-                        <div style={BackgroundHead} width="100%">
+                        <div style={BackgroundHead} width="100%" >
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>
@@ -166,7 +166,7 @@ const Index = () => {
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">
-                                        <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)}
+                                        <FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(fee)}
                                     </Typography>
                                 </Stack>
                             </DialogContent>

src/pages/Proof/Payment/Pay_Creditor.js

@@ -65,9 +65,9 @@ const Index = () => {
             (
                 <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
-                        <div style={BackgroundHead} width="100%">
-                            <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                        <div style={BackgroundHead} width="100%" >
+                            <Stack direction="row" height='70px' >
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}} >
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>

src/pages/Proof/Reply_GLD/ApplicationDetails.js

@@ -294,7 +294,10 @@ const ApplicationDetailCard = ({
                     </Grid>
                 </Grid>
                 <div>
-                    <Dialog open={cancelPopUp} onClose={() => setCancelPopUp(false)}  >
+                    <Dialog
+                        open={cancelPopUp}
+                        onClose={() => setCancelPopUp(false)}
+                    >
                         <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                         <DialogContent style={{ display: 'flex', }}>
                             <Typography variant="h4" style={{ padding: '16px' }}>Are you sure you want to cancel this proof?</Typography>

src/pages/Proof/Reply_GLD/index.js

@@ -119,7 +119,9 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Proof Record</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                    Proof Record
+                                </Typography>
                             </Stack>
                         </div>
                     </Grid>

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -79,7 +79,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="applicationId"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -93,7 +93,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"left"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="applyStatus"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -112,7 +112,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="applyPerson"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -132,7 +132,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="gazetteCount"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -149,7 +149,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="contactPerson"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -164,7 +164,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="applicationPublishDate" />:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -181,7 +181,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems="left">
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="myRemarks"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -205,7 +205,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                             <Grid item xs={12} sm={12} md={6} lg={6} sx={{mb: 1}}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} sm={12} md={12} lg={12} sx={{ alignItems: 'center',wordBreak: 'break-word' }}>
-                                        <Typography><Typography variant="h5">
+                                        <Typography><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="pleaseCheckReminder" />：
                                         </Typography></Typography>
                                     </Grid>
@@ -248,7 +248,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </Grid>
                                     <Grid item xs={12} sm={3} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">
+                                        <Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="payFeeFor"/>:
                                         </Typography>
                                     </Grid>
@@ -259,9 +259,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                         {
                                             formik.values.groupType === "Private Bill"
                                                 ?
-                                                <Typography variant="h5">( {data.noOfPages} {intl.formatMessage({id: 'page'})} x $6,552 )</Typography>
+                                                <Typography variant="pnspsFormParagraph">( {data.noOfPages} {intl.formatMessage({id: 'page'})} x $6,552 )</Typography>
                                                 :
-                                                <Typography variant="h5">( {data.length} cm x {data.colCount === 2 ? "$364 二格位" : "$182 一格位"} )</Typography>
+                                                <Typography variant="pnspsFormParagraph">( {data.length} cm x {data.colCount === 2 ? "$364 二格位" : "$182 一格位"} )</Typography>
                                         }
                                     </Grid>
                                 </Grid>

src/pages/Proof/Reply_Public/ProofForm.js

@@ -251,6 +251,7 @@ const FormPanel = ({ formData }) => {
                                                             color="save"
                                                             component="span"
                                                             variant="contained"
+                                                            aria-label={intl.formatMessage({id: 'upload'})}
                                                             disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}
                                                         >
                                                             <FormattedMessage id="upload" />
@@ -303,6 +304,7 @@ const FormPanel = ({ formData }) => {
                                             variant="contained"
                                             color="success"
                                             type="submit"
+                                            aria-label={intl.formatMessage({id: 'submitReply'})}
                                         >
                                             <FormattedMessage id="submitReply" />
                                         </Button>
@@ -320,7 +322,17 @@ const FormPanel = ({ formData }) => {
 
             </form>
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle>
                         <FormattedMessage id="attention"/>
                     </DialogTitle>
@@ -328,7 +340,12 @@ const FormPanel = ({ formData }) => {
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}>OK</Button>
+                        <Button
+                            aria-label={intl.formatMessage({id: 'ok'})}
+                            onClick={() => setIsWarningPopUp(false)}
+                        >
+                            OK
+                        </Button>
                     </DialogActions>
                 </Dialog>
             </div>

src/pages/Proof/Reply_Public/index.js

@@ -84,18 +84,22 @@ const Index = () => {
             <LoadingComponent />
             :
             (
-                <Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column"  justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>
                         </div>
                     </Grid>
                     <Grid item xs={12} width="100%">
-                        <Button title={intl.formatMessage({id: 'back'})} sx={{ mt: 2.5, ml: 3 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/proof/search") }}>
+                        <Button
+                            aria-label={intl.formatMessage({id: 'back'})}
+                            title={intl.formatMessage({id: 'back'})}
+                            sx={{ mt: 2.5, ml: 3 }} style={{ border: '2px solid' }}
+                            variant="outlined" onClick={() => { navigate("/proof/search") }}>
                             <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                         </Button>
                     </Grid>

src/pages/Proof/Search_GLD/DataGrid.js

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import {
     Button,
-    Box
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
@@ -130,21 +129,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }
 
     return (
-        <div style={{ height: '100%', width: '100%' }}>
-            <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
-                <FiDataGrid
-                    rowHeight={80}
-                    rows={rows}
-                    columns={columns}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 5 },
-                        },
-                    }}
-                    onRowDoubleClick={handleRowDoubleClick}
-                    getRowHeight={() => 'auto'}
-                />
-            </Box>
+        <div style={{ width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                customPageSize={10}
+                onRowDoubleClick={handleRowDoubleClick}
+                getRowHeight={() => 'auto'}
+            />
         </div>
     );
 }

src/pages/Proof/Search_GLD/SearchForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete
 } from '@mui/material';
@@ -12,6 +11,8 @@ import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import { Typography } from '../../../../node_modules/@mui/material/index';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -91,14 +92,14 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
         >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2 }} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1 }} width="98%">
 
                     {/*row 1*/}
-                    <CardContent sx={{ px: 2.5, pt: 3 }}>
-                        <Grid item justifyContent="space-between" alignItems="center">
-                            <Typography variant="h5">Search Form</Typography>
-                        </Grid>
-                    </CardContent>
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="pnspsFormHeader" >
+                            Search Form
+                        </Typography>
+                    </Grid>
 
                     {/*row 2*/}
                     <Grid container alignItems={"center"}>
@@ -132,6 +133,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             <Autocomplete
                                 {...register("issueId")}
                                 disablePortal
+                                size="small"
                                 id="issueId"
                                 options={issueCombo}
                                 value={issueSelected}
@@ -155,6 +157,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             <Autocomplete
                                 {...register("gazettGroup")}
                                 disablePortal
+                                size="small"
                                 id="gazettGroup"
                                 options={ComboData.groupTitle}
                                 value={groupSelected}
@@ -229,6 +232,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                 {...register("status")}
                                 disablePortal
                                 id="status"
+                                size="small"
                                 filterOptions={(options) => options}
                                 options={ComboData.proofStatus}
                                 value={status}
@@ -256,6 +260,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         {...register("orgId")}
                                         disablePortal={false}
                                         id="orgId"
+                                        size="small"
                                         options={orgCombo}
                                         value={orgSelected}
                                         inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
@@ -281,32 +286,25 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
-
-                        <Grid item sx={{ ml: 3, mb: 3, mt: 3 }}>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb: 3 }}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 onClick={resetForm}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">Clear</Typography>
+                                >
+                                Clear
                             </Button>
                         </Grid>
 
-                        <Grid item sx={{ ml: 3, mb: 3, mt: 3 }}>
+                        <Grid item sx={{ ml: 3, mb: 3 }}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 type="submit"
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">Submit</Typography>
+                               >
+                                Submit
                             </Button>
                         </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>

src/pages/Proof/Search_GLD/index.js

@@ -92,7 +92,7 @@ const UserSearchPage_Individual = () => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{ minHeight: '85vh', backgroundColor: 'backgroundColor.default' }} direction="column"
+            <Grid container sx={{ backgroundColor: 'backgroundColor.default' }} direction="column"
             >
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
@@ -102,7 +102,7 @@ const UserSearchPage_Individual = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm
                         applySearch={applySearch}
                         orgComboData={orgCombo}

src/pages/Proof/Search_Public/DataGrid.js

@@ -158,11 +158,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 sx={_sx}
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 10 },
-                    },
-                }}
+                customPageSize={10}
                 getRowHeight={() => "auto"}
                 onRowDoubleClick={handleRowDoubleClick}
             />

src/pages/Proof/Search_Public/SearchForm.js

@@ -102,8 +102,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h4">
-                            <FormattedMessage id="search"/>
+                        <Typography variant="pnspsFormHeader">
+                            <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
                 </CardContent>
@@ -276,16 +276,19 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                     <Grid item sx={{ mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
+                            aria-label={intl.formatMessage({id: 'reset'})}
                         >
                             <FormattedMessage id="reset"/>
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
+                    <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
                             type="submit"
+                            aria-label={intl.formatMessage({id: 'submit'})}
                         >
                             <FormattedMessage id="submit"/>
                         </Button>

src/pages/Proof/Search_Public/index.js

@@ -82,9 +82,9 @@ const UserSearchPage_Individual = () => {
             :
             <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
                 <Grid item xs={12}>
-                    <div style={BackgroundHead}>
-                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                    <div style={BackgroundHead} >
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center" >
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="proofRecord"/>
                             </Typography>
                         </Stack>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -132,19 +132,23 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4">
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                             <FormattedMessage id="applyPublicNotice"/>
                         </Typography>
                     </Stack>
                 </div>
             </Grid>
             <Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}>
-                <Button title={intl.formatMessage({id: 'back'})} sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}>
+                <Button
+                    aria-label={intl.formatMessage({id: 'back'})}
+                    title={intl.formatMessage({id: 'back'})}
+                    sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
+                >
                     <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                 </Button>
             </Grid>
             {/* <Grid item xs={12}>
-                    <Typography variant="h5">申請公共啟事</Typography>
+                    <Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>
                 </Grid> */}
             <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
                 <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
@@ -184,13 +188,13 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">
+                                        <Typography variant="pnspsFormParagraphBold">
                                             <FormattedMessage id="targetVol" />:
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={6}>
                                         <RadioGroup
-                                            aria-labelledby="demo-radio-buttons-group-label"
+                                            aria-labelledby="radio-buttons-group-label"
                                             id="issueId"
                                             name="issueId"
                                             defaultValue={issueId}
@@ -205,12 +209,11 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                     </Grid>
                                 </Grid>
                             </Grid>
-
                             <Grid item xs={12} md={12} lg={12}>
                                 <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">
+                                        <Typography variant="pnspsFormParagraphBold">
                                             <FormattedMessage id="draftFile"/> ({intl.formatMessage({id: 'fileSizeWarning'})}):
                                         </Typography>
                                     </Grid>
@@ -227,15 +230,35 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                         />
                                         {attachment.name}
                                     </Grid>
-                                    <Grid item xs={12} md={3} lg={3}>
+                                    {/* <Grid item xs={12} md={3} lg={3}>
+                                        <label htmlFor="uploadFileBtn">
+                                            <Button
+                                                aria-label={intl.formatMessage({id: 'uploadFileBtn'})}
+                                                component="span"
+                                                variant="outlined"
+                                                size="large"
+                                            >{attachment ? intl.formatMessage({id: 'uploadFileBtn'}) : intl.formatMessage({id: 'reUpload'})}</Button>
+                                        </label>
+                                    </Grid> */}
+                                </Grid>
+                            </Grid>
+                            <Grid item xs={12} md={12} lg={12}>
+                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                    <Grid item xs={12} md={3} lg={3}
+                                        sx={{ display: 'flex', alignItems: 'center' }}>
+                                    </Grid>
+                                    <Grid item xs={12} md={6} lg={6} >
                                         <label htmlFor="uploadFileBtn">
                                             <Button
+                                                aria-label={intl.formatMessage({id: 'uploadFileBtn'})}
                                                 component="span"
                                                 variant="outlined"
                                                 size="large"
                                             >{attachment ? intl.formatMessage({id: 'uploadFileBtn'}) : intl.formatMessage({id: 'reUpload'})}</Button>
                                         </label>
                                     </Grid>
+                                    <Grid item xs={12} md={3} lg={3}>
+                                    </Grid>
                                 </Grid>
                             </Grid>
                             {isORGLoggedIn()?
@@ -260,6 +283,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                 <center>
                                     <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                     <Button
+                                        aria-label={intl.formatMessage({id: 'applyPublicNotice'})}
                                         variant="contained"
                                         type="submit"
                                     >
@@ -273,7 +297,17 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                 </Box>
             </Grid>
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle>
                         <FormattedMessage id="attention"/>
                     </DialogTitle>
@@ -281,7 +315,12 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}>OK</Button>
+                        <Button
+                            aria-label={intl.formatMessage({id: 'ok'})}
+                            onClick={() => setIsWarningPopUp(false)}
+                        >
+                            <FormattedMessage id="ok" />
+                        </Button>
                     </DialogActions>
                 </Dialog>
             </div>

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -537,7 +537,17 @@ const ApplicationDetailCard = (
                     </Grid>
                 </form>
                 <div>
-                    <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                    <Dialog
+                        open={isWarningPopUp}
+                        onClose={() => setIsWarningPopUp(false)}
+                        PaperProps={{
+                            sx: {
+                                minWidth: '40vw',
+                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                            }
+                        }}
+                    >
                         <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                         <DialogContent style={{ display: 'flex', }}>
                             <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>

src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js

@@ -262,7 +262,16 @@ const GazetteDetailCard = (
                     </Grid>
                 </form>
                 <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}>
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>

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

@@ -70,11 +70,7 @@ export default function SubmittedTab({ rows }) {
                 <FiDataGrid
                     rows={rows}
                     columns={columns}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 5 },
-                        },
-                    }}
+                    customPageSize={5}
                 />
             </div>
         </>

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

@@ -109,11 +109,7 @@ export default function ProofTab({rows}) {
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
-                    },
-                }}
+                customPageSize={5}
             />
         </div>
     );

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

@@ -52,11 +52,7 @@ export default function StatusHistoryTab({rows}) {
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
-                    },
-                }}
+                customPageSize={5}
             />
         </div>
     );

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -157,6 +157,7 @@ const ApplicationDetailCard = (
                                             || currentApplicationDetailData.status == "paid"
                                             || currentApplicationDetailData.creditor}
                                         startIcon={<EditNoteIcon />}
+                                        aria-label={intl.formatMessage({id: 'payFor'})}
                                     >
                                         <FormattedMessage id="payFor"/>
                                     </Button>
@@ -169,6 +170,7 @@ const ApplicationDetailCard = (
                                 disabled={currentApplicationDetailData.status !== "submitted"}
                                 title={intl.formatMessage({id: 'cancel'})}
                                 startIcon={<CloseIcon />}
+                                aria-label={intl.formatMessage({id: 'cancel'})}
                             >
                                 <FormattedMessage id="cancel"/>
                             </Button>
@@ -188,7 +190,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="applicationId"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -218,7 +220,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="applyStatus"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -234,11 +236,11 @@ const ApplicationDetailCard = (
                                                     <Grid container alignItems={"center"}>
                                                         <Stack direction="row" justifyContent="flex-start" alignItems="center">
                                                             <Grid item xs={12} md={7} lg={7}>
-                                                                <FormLabel><Typography variant="h5">原因:</Typography></FormLabel>
+                                                                <FormLabel><Typography variant="pnspsFormParagraph">原因:</Typography></FormLabel>
                                                             </Grid>
                                                             <Grid item xs={12} md={5} lg={5}>
                                                                 <FormControl variant="outlined" fullWidth disabled>
-                                                                    <Typography id='reason' variant="h5">
+                                                                    <Typography id='reason' variant="pnspsFormParagraph">
                                                                         {currentApplicationDetailData.reason}
                                                                     </Typography>
                                                                 </FormControl>
@@ -257,7 +259,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="applyPerson"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -304,7 +306,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="gazetteCount"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -338,7 +340,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="contactPerson"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -368,7 +370,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="publishDate"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -403,7 +405,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="userContactNumber"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -452,13 +454,13 @@ const ApplicationDetailCard = (
                                             <Grid container alignItems={"center"}>
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel><Typography variant="h5">
+                                                    <FormLabel><Typography variant="pnspsFormParagraph">
                                                         <FormattedMessage id="currencyPrice"/>(HK$):
                                                     </Typography></FormLabel>
                                                 </Grid>
 
                                                 <Grid item xs={12} md={9} lg={9}>
-                                                    <FormLabel><Typography variant="h5">{FormatUtils.currencyFormat(fee)}</Typography></FormLabel>
+                                                    <FormLabel><Typography variant="pnspsFormParagraph">{FormatUtils.currencyFormat(fee)}</Typography></FormLabel>
                                                 </Grid>
                                             </Grid>
                                         </Grid>
@@ -471,7 +473,7 @@ const ApplicationDetailCard = (
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="userFaxNumber"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -522,34 +524,32 @@ const ApplicationDetailCard = (
                                             <Grid container direction="row">
                                                 <Grid item xs={12} sm={12} md={2.5} lg={1.6}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel><Typography variant="h5">
+                                                    <FormLabel><Typography variant="pnspsFormParagraph">
                                                         <FormattedMessage id="draftFile"/>:
                                                     </Typography></FormLabel>
                                                 </Grid>
                                                 <Grid item xs={12} sm={12} md={9} lg={9} >
                                                     <Grid container direction="row" alignItems="center" justifyContent="flex-start">
-                                                        <Grid item xs={12} sm={12} md={9} lg={9} sx={{ wordBreak: 'break-word' , }}>
-                                                            <FormControl variant="outlined" fullWidth  >
-                                                                <Typography
-                                                                    fullWidth
-                                                                    id='fileName'
-                                                                    variant="h5"
-                                                                >
-                                                                    {fileDetail.filename}
-                                                                </Typography>
-                                                            </FormControl>
-                                                        </Grid>
-                                                        <Grid item xs={12} sm={12} md={3} lg={3} >
-                                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                                                            <Button
-                                                                variant="contained"
-                                                                onClick={onDownloadClick()}
-                                                                title={intl.formatMessage({id: 'download'})}
-                                                                color="save"
-                                                                startIcon={<DownloadIcon sx={{alignItems:"center"}}/>}
+                                                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word' , }}>
+                                                            <Typography
+                                                                fullWidth
+                                                                id='fileName'
+                                                                variant="pnspsFormParagraph"
                                                             >
-                                                                <FormattedMessage id="download"/>
-                                                            </Button>
+                                                                {fileDetail.filename}
+                                                            </Typography>
+                                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                                                <Button
+                                                                    sx={{ml:3}}
+                                                                    variant="contained"
+                                                                    onClick={onDownloadClick()}
+                                                                    aria-label={intl.formatMessage({id: 'download'})}
+                                                                    title={intl.formatMessage({id: 'download'})}
+                                                                    color="save"
+                                                                    startIcon={<DownloadIcon sx={{alignItems:"center"}}/>}
+                                                                >
+                                                                    <FormattedMessage id="download"/>
+                                                                </Button>
                                                             </ThemeProvider>
                                                         </Grid>
                                                     </Grid>
@@ -564,10 +564,10 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">Care Of:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="pnspsFormParagraph">Care Of:</Typography></FormLabel>
                                         </Grid>
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <Typography variant="h5">{currentApplicationDetailData.careOf}</Typography>
+                                            <Typography variant="pnspsFormParagraph">{currentApplicationDetailData.careOf}</Typography>
                                         </Grid>
                                     </Grid>
                                 </Grid> : null
@@ -576,12 +576,12 @@ const ApplicationDetailCard = (
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="extraMark"/>:
                                         </Typography></FormLabel>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <Typography variant="h5">{currentApplicationDetailData.remarks}</Typography>
+                                        <Typography variant="pnspsFormParagraph">{currentApplicationDetailData.remarks}</Typography>
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -607,22 +607,40 @@ const ApplicationDetailCard = (
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">
-                                        <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)}
+                                        <FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(fee)}
                                     </Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">
+                                <Button
+                                    onClick={() => setIsPopUp(false)}
+                                    aria-label={intl.formatMessage({id: 'close'})}
+                                >
+                                    <Typography variant="pnspsFormParagraph">
                                     <FormattedMessage id="close"/>
                                 </Typography></Button>
-                                <Button onClick={() => doPayment()}><Typography variant="h5">
+                                <Button
+                                    onClick={() => doPayment()}
+                                    aria-label={intl.formatMessage({id: 'confirm'})}
+                                >
+                                    <Typography variant="pnspsFormParagraph">
                                     <FormattedMessage id="confirm"/>
                                 </Typography></Button>
                             </DialogActions>
                         </Dialog>
                     </div>
                     <div>
-                        <Dialog open={errorPopUp} onClose={() => setErrorPopUp(false)}  >
+                        <Dialog
+                            open={errorPopUp}
+                            onClose={() => setErrorPopUp(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                                }
+                            }}
+                        >
                             <DialogTitle></DialogTitle>
                             <Typography variant="h2" style={{ padding: '16px' }}>行動失敗</Typography>
                             <DialogContent style={{ display: 'flex', }}>
@@ -633,8 +651,11 @@ const ApplicationDetailCard = (
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setErrorPopUp(false)}>
-                                    <Typography variant="h5">
+                                <Button
+                                    onClick={() => setErrorPopUp(false)}
+                                    aria-label={intl.formatMessage({id: 'close'})}
+                                >
+                                    <Typography variant="pnspsFormParagraph">
                                         <FormattedMessage id="close"/>
                                     </Typography></Button>
                             </DialogActions>

src/pages/PublicNotice/Details_Public/StatusChangeDialog.js

@@ -21,15 +21,16 @@ import * as yup from 'yup';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage} from "react-intl";
-
+import {useIntl} from "react-intl";
 
 const StatusChangeDialog = (props) => {
   const [status, setStatus] = useState("");
-  
+  const intl = useIntl();
+
   useEffect(() => {
     console.log(Object.keys(!props.selectedGazetteGroup).length)
     if(props.getStatus === "cancel"){
-      setStatus("取消")
+      setStatus(intl.formatMessage({id: 'cancel'}))
     }
   }, [props.getStatus]);
   
@@ -60,8 +61,8 @@ const StatusChangeDialog = (props) => {
         maxWidth={'xs'}
       >
         <DialogTitle >
-          <Typography variant="h4" color="error">
-            {status}公共啟事
+          <Typography variant="h4">
+            {status} {intl.formatMessage({id: 'publicNotice'})}
           </Typography>
         </DialogTitle>
         <FormikProvider value={formik}>
@@ -69,7 +70,8 @@ const StatusChangeDialog = (props) => {
               <DialogContent>
                 <DialogContentText>
                   <FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}>
-                    <Typography variant="h5">確定{status}公共啟事?</Typography>
+                    <Typography variant="h5">
+                      {intl.formatMessage({id: 'confirmTo'})}{status} {intl.formatMessage({id: 'publicNotice'})}?</Typography>
                   </FormLabel>
                 </DialogContentText>
               </DialogContent>
@@ -82,7 +84,7 @@ const StatusChangeDialog = (props) => {
                 variant="contained"
                 onClick={props.handleClose}
                 autoFocus
-                color="delete"
+                color="cancel"
             >
               <FormattedMessage id="cancel"/>
             </Button>

src/pages/PublicNotice/Details_Public/index.js

@@ -154,7 +154,7 @@ const DashboardDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4">
+            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
               <FormattedMessage id="myPublicNotice"/>
             </Typography>
           </Stack>
@@ -164,7 +164,12 @@ const DashboardDefault = () => {
         <Grid container direction="column" justifyContent="flex-start" alignItems="center">
           <Grid item xs={12} width="75%">
             <Stack direction="row">
-              <Button title={intl.formatMessage({id: 'back'})} sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}>
+              <Button
+                  aria-label={intl.formatMessage({id: 'back'})}
+                  title={intl.formatMessage({id: 'back'})}
+                  sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }}
+                  variant="outlined" onClick={() => { navigate("/publicNotice") }}
+              >
                 <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
               </Button>
               <Typography ml={3} mt={3} variant="h4">{title}</Typography>

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

@@ -72,11 +72,7 @@ export default function SubmittedTab({ rows }) {
                 <FiDataGrid
                     rows={rows}
                     columns={columns}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 5 },
-                        },
-                    }}
+                    customPageSize={5}
                 />
             </div>
         </>

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

@@ -80,11 +80,7 @@ export default function ProofTab({rows}) {
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
-                    },
-                }}
+                customPageSize={5}
             />
         </div>
     );

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

@@ -44,11 +44,7 @@ export default function StatusHistoryTab({rows}) {
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
-                    },
-                }}
+                customPageSize={5}
             />
         </div>
     );

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

@@ -56,11 +56,15 @@ const PublicNotice = ({ proofList, paymentList }) => {
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={
+                                <Tab
+                                    aria-label={intl.formatMessage({id: 'proofRecord'})}
+                                    label={
                                     intl.formatMessage({id: 'proofRecord'}) + "(" + _proofList.length + ") "} value="1"
                                 />
-                                <Tab label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2" />
-                                
+                                <Tab
+                                    aria-label={intl.formatMessage({id: 'paymentHistory'})}
+                                    label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2"
+                                />
                             </TabList>
                         </Box>
                         <TabPanel value="1">

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -80,13 +80,13 @@ export default function BaseGrid({rows}) {
             renderCell: (params) => (
                 isORGLoggedIn()? 
                 <div>
-                  <Typography>Care Of: {params.row.careOf}</Typography>
+                  <Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography>
                   <Typography>
-                      <FormattedMessage id="myRemarks"/>: {params.row.remarks}
+                      <FormattedMessage variant="pnspsNormalText" id="myRemarks"/>: {params.row.remarks}
                   </Typography>
                 </div>:
                 <div>
-                    <Typography>{params.row.remarks}</Typography>
+                    <Typography variant="pnspsNormalText">{params.row.remarks}</Typography>
                 </div>
               )
         },
@@ -106,7 +106,7 @@ export default function BaseGrid({rows}) {
             width: 160,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>
+                return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}>
                     <FormattedMessage id="viewDetail"/>
                 </Button>;
             },
@@ -118,15 +118,11 @@ export default function BaseGrid({rows}) {
     }
 
     return (
-        <div style={{minHeight: 400, width: '100%', padding: 4}}>
+        <div style={{minHeight: 400, height:"100%", width: '100%', padding: 4}}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: {page: 0, pageSize: 10},
-                    },
-                }}
+                customPageSize={10}
                 onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
             />

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -166,12 +166,12 @@ export default function SubmittedTab({ rows }) {
             renderCell: (params) => (
                 isORGLoggedIn() ?
                     <div>
-                        <Typography>Care Of: {params.row.careOf}</Typography>
-                        <Typography>
+                        <Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography>
+                        <Typography variant="pnspsNormalText">
                             <FormattedMessage id="myRemarks"/>: {params.row.remarks}</Typography>
                     </div> :
                     <div>
-                        <Typography>{params.row.remarks}</Typography>
+                        <Typography variant="pnspsNormalText">{params.row.remarks}</Typography>
                     </div>
             )
         },
@@ -202,7 +202,7 @@ export default function SubmittedTab({ rows }) {
             width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>
+                return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}>
                     <FormattedMessage id="viewDetail"/>
                 </Button>;
             },
@@ -230,7 +230,7 @@ export default function SubmittedTab({ rows }) {
             totalAmount += datas[i].fee;
         }
         content.push(<Typography variant="h5">
-            <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(totalAmount)}
+            <FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(totalAmount)}
             <br /><br />
         </Typography>);
         //setAmount(totalAmount);
@@ -307,11 +307,7 @@ export default function SubmittedTab({ rows }) {
                     disableRowSelectionOnClick
                     rows={rowList}
                     columns={columns}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 20 },
-                        },
-                    }}
+                    customPageSize={20}
                     onRowSelectionModelChange={(newSelection) => {
                         setSelectedRowItems(newSelection);
                     }}
@@ -323,6 +319,7 @@ export default function SubmittedTab({ rows }) {
                 <Button
                     color="create"
                     variant="contained"
+                    aria-label={intl.formatMessage({id: 'pay'})}
                     onClick={() => { handlePaymentBtn() }}
                     sx={{mt:2, ml:1}}
                 >
@@ -354,11 +351,13 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsPopUp(false)}>
+                        <Button onClick={() => setIsPopUp(false)} aria-label={intl.formatMessage({id: 'close'})}>
                             <Typography variant="h5">
                                 <FormattedMessage id="close"/>
                             </Typography></Button>
-                        <Button onClick={() => doPayment()}><Typography variant="h5">
+
+                        <Button onClick={() => doPayment()} aria-label={intl.formatMessage({id: 'confirm'})}>
+                            <Typography variant="h5">
                             <FormattedMessage id="confirm"/>
                         </Typography></Button>
                     </DialogActions>
@@ -366,7 +365,17 @@ export default function SubmittedTab({ rows }) {
             </div>
 
             <div>
-                <Dialog open={checkCareOf} onClose={() => setCheckCareOf(false)}  >
+                <Dialog
+                    open={checkCareOf}
+                    onClose={() => setCheckCareOf(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle></DialogTitle>
                     <Typography variant="h2" style={{ padding: '16px' }}>Warning</Typography>
                     <DialogContent style={{ display: 'flex', }}>
@@ -377,11 +386,13 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setCheckCareOf(false)}>
+                        <Button onClick={() => setCheckCareOf(false)} aria-label={intl.formatMessage({id: 'close'})}>
                             <Typography variant="h5">
                                 <FormattedMessage id="close"/>
                             </Typography></Button>
-                        <Button onClick={() => afterWarningPayment()}><Typography variant="h5">
+
+                        <Button onClick={() => afterWarningPayment()} aria-label={intl.formatMessage({id: 'confirm'})}>
+                            <Typography variant="h5">
                             <FormattedMessage id="confirm"/>
                         </Typography></Button>
                     </DialogActions>
@@ -389,7 +400,17 @@ export default function SubmittedTab({ rows }) {
             </div>
 
             <div>
-                <Dialog open={expiryDateErr} onClose={() => setExpiryDateErr(false)}  >
+                <Dialog
+                    open={expiryDateErr}
+                    onClose={() => setExpiryDateErr(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle></DialogTitle>
                     <Typography variant="h2" style={{ padding: '16px' }}>行動失敗</Typography>
                     <DialogContent style={{ display: 'flex', }}>
@@ -400,7 +421,7 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setExpiryDateErr(false)}>
+                        <Button onClick={() => setExpiryDateErr(false)} aria-label={intl.formatMessage({id: 'close'})}>
                             <Typography variant="h5">
                                 <FormattedMessage id="close"/>
                             </Typography></Button>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -64,8 +64,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
                 <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
-                    <Typography variant="pnspsFormTitle" >
-                        <FormattedMessage id="search"/>
+                    <Typography variant="pnspsFormHeader" >
+                        <FormattedMessage id="searchForm"/>
                     </Typography>
                 </Grid>
                 {/*row 2*/}
@@ -75,6 +75,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("appNo")}
                             id='appNo'
+                            aria-label={intl.formatMessage({id: 'applicationId'})}
                             label={intl.formatMessage({id: 'applicationId'})}
                             defaultValue={searchCriteria.appNo}
                             InputLabelProps={{
@@ -89,6 +90,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("dateFrom")}
                             id="dateFrom"
                             type="date"
+                            aria-label={intl.formatMessage({id: 'submitDateFrom'})}
                             label={intl.formatMessage({id: 'submitDateFrom'})}
                             defaultValue={searchCriteria.dateFrom}
                             InputProps={{ inputProps: { max: maxDate } }}
@@ -110,6 +112,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("dateTo")}
                             id="dateTo"
                             type="date"
+                            aria-label={intl.formatMessage({id: 'submitDateTo'})}
                             label={intl.formatMessage({id: 'submitDateTo'})}
                             defaultValue={searchCriteria.dateTo}
                             InputProps={{ inputProps: { min: minDate } }}
@@ -125,6 +128,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                 {...register("careOf")}
                                 id="careOf"
                                 label="Care Of"
+                                aria-label={"Care Of"}
                                 defaultValue={searchCriteria.careOf}
                                 InputLabelProps={{
                                     shrink: true
@@ -139,6 +143,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("contact")}
                             id="contact"
                             label={intl.formatMessage({id: 'contactPerson'})}
+                            aria-label={intl.formatMessage({id: 'contactPerson'})}
                             defaultValue={searchCriteria.contact}
                             InputLabelProps={{
                                 shrink: true
@@ -183,6 +188,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             renderInput={(params) => (
                                 <TextField {...params}
                                     label={intl.formatMessage({id: 'status'})}
+                                    aria-label={intl.formatMessage({id: 'status'})}
                                     InputLabelProps={{
                                         shrink: true
                                     }}
@@ -211,7 +217,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <Grid item sx={{ ml: 3, mr: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
+                            aria-label={intl.formatMessage({id: 'reset'})}
                         >
                             <Typography variant="pnspsButtonText">
                                 <FormattedMessage id="reset"/>
@@ -219,10 +227,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3}}>
+                    <Grid item>
                         <Button
                             variant="contained"
                             type="submit"
+                            aria-label={intl.formatMessage({id: 'search'})}
                         >
                             <Typography variant="pnspsButtonText">
                                 <FormattedMessage id="search"/>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js

@@ -45,7 +45,7 @@ const UserSearchPage_Individual = () => {
     }
 
     return (
-        <Grid container>
+        <Grid container sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
             {/*row 1*/}
             <Grid item xs={12} md={12} lg={12} sx={{mb:-3}}>
                 <SearchForm 
@@ -58,11 +58,14 @@ const UserSearchPage_Individual = () => {
                 <MainCard elevation={0}
                           border={false}
                           content={false}
-                          sx={{width: "-webkit-fill-available"}}
+                          sx={{width: "-webkit-fill-available",height: "100%", minHeight:'100%'}}
                 >
-                    <EventTable
-                        recordList={record}
-                    />
+                    <div style={{height: '100%', width: '100%' }}>
+                        <EventTable
+                            autoHeight
+                            recordList={record}
+                        />
+                    </div>
                 </MainCard>
             </Grid>
 

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -83,13 +83,13 @@ export default function SearchPublicNoticeTable({ recordList }) {
             renderCell: (params) => (
                 isORGLoggedIn()? 
                 <div>
-                  <Typography>Care Of: {params.row.careOf}</Typography>
-                  <Typography>
+                  <Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography>
+                  <Typography variant="pnspsNormalText">
                       <FormattedMessage id="myRemarks"/>: {params.row.remarks}
                   </Typography>
                 </div>:
                 <div>
-                     <Typography>{params.row.remarks}</Typography>
+                     <Typography variant="pnspsNormalText">{params.row.remarks}</Typography>
                 </div>
               )
         },
@@ -109,7 +109,9 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>
+                return <Button onClick={handleDetailClick(params)}
+                               aria-label={intl.formatMessage({id: 'viewDetail'})}
+                >
                     <FormattedMessage id="viewDetail"/>
                 </Button>;
             },
@@ -121,15 +123,11 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }
 
     return (
-        <div style={{ minHeight: 400, width: '100%' }}>
+        <div style={{ minHeight: 400, height: "100%", width: '100%' }}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: { page: 0, pageSize: 20 },
-                    },
-                }}
+                customPageSize={20}
                 onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
             />

src/pages/PublicNotice/ListPanel/index.js

@@ -108,7 +108,7 @@ const PublicNotice = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="myPublicNotice"/>
                             </Typography>
                         </Stack>
@@ -118,7 +118,7 @@ const PublicNotice = () => {
                     <Stack direction="row" justifyContent="flex-end" alignItems="center">
                         <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                         <Box sx={{ mr: { md: "47px" } }}>
-                            <Button variant="contained" onClick={() => { onBtnClick() }}>
+                            <Button aria-label={intl.formatMessage({id: 'applyPublicNotice'})} variant="contained" onClick={() => { onBtnClick() }}>
                                 <FormattedMessage id="applyPublicNotice"/>
                             </Button>
                         </Box>
@@ -129,14 +129,14 @@ const PublicNotice = () => {
 
                 {
                     JSON.parse(localStorage.getItem('userData')).creditor ? (
-                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ minHeight: '75vh', maxWidth: '1%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height:'100%', maxWidth: '100%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
-                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', }}>
+                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY:'auto' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
-                                        <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
-                                        <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
-                                        <Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" />
-                                        <Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
+                                        <Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
+                                        <Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
+                                        <Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" />
+                                        <Tab aria-label={intl.formatMessage({id: 'searchApplyRecord'})} label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">
@@ -166,14 +166,14 @@ const PublicNotice = () => {
                             </TabContext>
                         </Grid>
                     ) : (
-                        <Grid item xs={12} sx={{ minHeight: '75vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sx={{ minHeight: '80vh',height:"100%", maxHeight:'300vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                        <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" />
-                                        <Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" />
-                                        <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" />
-                                        <Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
+                                        <Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" />
+                                        <Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" />
+                                        <Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" />
+                                        <Tab aria-label={intl.formatMessage({id: 'searchApplyRecord'})} label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">

src/pages/PublicNotice/Search_GLD/DataGrid.js

@@ -1,8 +1,7 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button,
-    Box
+    Button
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
@@ -111,20 +110,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }
 
     return (
-        <div style={{ height: '100%', width: '100%' }}>
-            <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
-                <FiDataGrid
-                    rows={rows}
-                    columns={columns}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 10 },
-                        },
-                    }}
-                    getRowHeight={() => 'auto'}
-                    onRowDoubleClick={handleRowDoubleClick}
-                />
-            </Box>
+        <div style={{width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                customPageSize={10}
+                getRowHeight={() => 'auto'}
+                onRowDoubleClick={handleRowDoubleClick}
+            />
         </div>
     );
 }

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -94,7 +94,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
-                        <Typography variant="pnspsFormTitle" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
@@ -237,6 +237,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         disablePortal
                                         id="orgId"
                                         options={orgCombo}
+                                        size="small"
                                         value={orgSelected}
                                         inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
                                         onChange={(event, newValue) => {
@@ -261,8 +262,8 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             <Autocomplete
                                 {...register("issueId")}
                                 disablePortal
-                                id="issueId"
                                 size="small"
+                                id="issueId"
                                 options={issueCombo}
                                 value={issueSelected}
                                 inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
@@ -300,7 +301,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                        <Grid item sx={{ ml: 3 }}>
                             <Button
                                 variant="contained"
                                 onClick={resetForm}
@@ -309,7 +310,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             </Button>
                         </Grid>
 
-                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                        <Grid item sx={{ ml: 3 }}>
                             <Button
                                 variant="contained"
                                 type="submit"

src/pages/PublicNotice/Search_GLD/index.js

@@ -92,7 +92,7 @@ const UserSearchPage_Individual = () => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{ minHeight: '85vh', backgroundColor: 'backgroundColor.default' }} direction="column">
+            <Grid container sx={{ backgroundColor: 'backgroundColor.default' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -101,7 +101,7 @@ const UserSearchPage_Individual = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12} sx={{mb: -4}}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
                     <SearchForm
                         applySearch={applySearch}
                         orgComboData={orgCombo}

src/pages/Setting/SystemSetting/Form.js

@@ -0,0 +1,125 @@
+// material-ui
+import {
+    FormControl,
+    Button,
+    Grid,
+    // InputAdornment, 
+    Typography, FormLabel,
+    OutlinedInput,
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as React from "react";
+
+
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+const Form = ({ selectedItem, onSave }) => {
+    const [data, setData] = React.useState({});
+    const [value, setValue] = React.useState("");
+
+    React.useEffect(() => {
+        //if user data from parent are not null
+        if (selectedItem !== undefined && Object.keys(selectedItem).length > 0) {
+            setData(selectedItem);
+            setValue(selectedItem.value)
+        }
+    }, [selectedItem]);
+
+    return (
+
+        <MainCard elevation={0}
+            border={false}
+            content={false}
+        >
+
+
+            {
+                data?.name ?
+                    <>
+                        <Typography variant="h5" sx={{ mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black" }}>
+                            Update
+                        </Typography>
+
+                        <form>
+                            <Grid container>
+                                <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                                    <Grid container alignItems={"center"}>
+                                        <Grid item xs={2} 
+                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                            <FormLabel>Name:</FormLabel>
+                                        </Grid>
+
+                                        <Grid item xs={8} >
+                                            <Typography>
+                                                {data?.name}
+                                            </Typography>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+
+                                <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                    <Grid container alignItems={"center"}>
+                                        <Grid item xs={2} 
+                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                            <FormLabel >Type:</FormLabel>
+                                        </Grid>
+                                        <Grid item xs={8}>
+                                            <Typography>
+                                                {data?.type}
+                                            </Typography>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+
+                                <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                    <Grid container alignItems={"center"}>
+                                        <Grid item xs={2}
+                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                            <FormLabel>Category:</FormLabel>
+                                        </Grid>
+
+                                        <Grid item xs={8}>
+                                            <Typography>
+                                                {data?.category}
+                                            </Typography>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+
+                                <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                    <Grid container alignItems={"center"}>
+                                        <Grid item xs={2}
+                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                            <FormLabel>Value:</FormLabel>
+                                        </Grid>
+
+                                        <Grid item xs={8}>
+                                            <FormControl variant="outlined" fullWidth required>
+                                                <OutlinedInput
+                                                    fullWidth
+                                                    size="small"
+                                                    value={value}
+                                                    onChange={(event)=>{
+                                                        setValue(event.target.value);
+                                                    }}
+                                                />
+                                            </FormControl>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                            <Button onClick={()=>{onSave({ name: data.name, value:value})}}>Save</Button>
+                        </form>
+                    </>
+                    :
+                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black" }}>
+                        Please select system params.
+                    </Typography>
+
+            }
+
+        </MainCard>
+    );
+};
+
+export default Form;

src/pages/Setting/SystemSetting/Table.js

@@ -0,0 +1,73 @@
+// material-ui
+import {
+    Box,
+    Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as React from "react";
+import { FiDataGrid } from "components/FiDataGrid";
+
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+const Table = ({onRowClick, dataList}) => {
+    const [rows, setRows] = React.useState(dataList);
+
+    React.useEffect(() => {
+        setRows(dataList);
+    }, [dataList]);
+
+    const columns = [
+        {
+            field: 'name',
+            headerName: 'Name',
+            width: 300,
+        },
+        {
+            id: 'type',
+            field: 'type',
+            headerName: 'Type',
+            width: 150,
+            valueGetter: (params) => {
+                return params.row.type
+            }
+        },
+        {
+            id: 'category',
+            field: 'category',
+            headerName: 'Category',
+            width: 150,
+        },
+        {
+            id: 'value',
+            field: 'value',
+            headerName: 'Value',
+            flex: 1
+        },
+    ];
+    return (
+     
+            <MainCard elevation={0}
+                      border={false}
+                      content={false}
+                      height='100%'
+            >
+                <Typography variant="h5" sx={{mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black"}}>
+                    System Params
+                </Typography>
+
+                <div style={{ width: '100%' }}>
+                <Box sx={{ backgroundColor: "#fff", ml: 2 }} height='100%'>
+                    <FiDataGrid
+                        rows={rows}
+                        columns={columns}
+                        customPageSize={10}
+                        getRowHeight={() => 'auto'}
+                        onRowClick={onRowClick}
+                    />
+                </Box>
+            </div>
+            </MainCard>
+    );
+};
+
+export default Table;

src/pages/Setting/SystemSetting/index.js

@@ -0,0 +1,110 @@
+
+import {
+    Grid,
+    Typography,
+    Stack,
+    Box,
+} from '@mui/material';
+import * as React from "react";
+
+import { GET_SYS_PARAMS, } from "utils/ApiPathConst";
+
+import Loadable from 'components/Loadable';
+const Table = Loadable(React.lazy(() => import('./Table')));
+const Form = Loadable(React.lazy(() => import('./Form')));
+
+import { notifyActionSuccess } from 'utils/CommonFunction';
+
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+import * as HttpUtils from "utils/HttpUtils";
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SystemSetting = () => {
+    const [dataList, setDataList] = React.useState([]);
+    const [selectedItem, setSelectedItem] = React.useState({});
+
+    React.useEffect(() => {
+        loadList();
+    }, []);
+
+    const loadList=()=>{
+        HttpUtils.get({
+            url: GET_SYS_PARAMS,
+            onSuccess: (responseData)=>{
+                setDataList(responseData);
+            }
+        });
+    }
+
+    const onRowClick=(param)=>{
+        setSelectedItem(param.row);
+    }
+
+    const onSave=(param)=>{
+        HttpUtils.post({
+            url: GET_SYS_PARAMS+"/update",
+            params:{
+                name: param.name,
+                value: param.value
+            },
+            onSuccess: ()=>{
+                notifyActionSuccess();
+                loadList();
+            }
+        });
+    }
+
+
+    return (
+       
+            <Grid container sx={{ minHeight: '90vh', backgroundColor: 'backgroundColor.default' }} direction="column"
+                justifyContent="flex-start">
+                <>
+                    <Grid item xs={12}>
+                        <div style={BackgroundHead}>
+                            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                                <Typography ml={15} color='#FFF' variant="h4">System Setting</Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+
+                    {/*col 1*/}
+                    <Grid item xs={12} >
+                        <Grid container direction="row" sx={{ p: 2 }} spacing={2} >
+                            <Grid item xs={12} md={8} lg={8} >
+                                <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }} >
+                                    <Table
+                                        dataList={dataList}
+                                        onRowClick={onRowClick}
+                                    />
+                                </Box>
+                            </Grid>
+                            <Grid item xs={12} md={4} lg={4}>
+                                <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}>
+                                    <Form
+                                        selectedItem={selectedItem}
+                                        onSave={onSave}
+                                    />
+                                </Box>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                    {/*col 2*/}
+                </>
+            </Grid>
+    );
+};
+
+export default SystemSetting;

src/pages/User/DetailPage/UserAuthTable.js

@@ -4,10 +4,10 @@ import {
 } from "@mui/x-data-grid";
 import {useEffect, useState} from "react";
 import axios from "axios";
-import {apiPath} from "../../../auth/utils";
+import {apiPath} from "auth/utils";
 //import LoadingComponent from "../extra-pages/LoadingComponent";
 import * as React from "react";
-import {GET_AUTH_LIST} from "../../../utils/ApiPathConst";
+import {GET_AUTH_LIST} from "utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -20,22 +20,18 @@ export default function UserAuthTable({setSelectedRow, userAuth,isNewRecord}) {
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth);
     const _sx = {
-        ml: 3,
-        mb: 3,
-        mr: 3,
-        padding: "4 2 4 2",
         boxShadow: 1,
         border: 1,
         borderColor: '#DDD',
         '& .MuiDataGrid-cell': {
             borderTop: 1,
-            borderBottom: 1,
+            //borderBottom: 1,
             borderColor: "#EEE"
         },
-        '& .MuiDataGrid-footerContainer': {
-            border: 1,
-            borderColor: "#EEE"
-        }
+        // '& .MuiDataGrid-footerContainer': {
+        //     border: 1,
+        //     borderColor: "#EEE"
+        // }
     }
     useEffect(() => {
         axios.get(`${apiPath}${GET_AUTH_LIST}`)

src/pages/User/DetailPage/UserAuthorityCard.js

@@ -49,8 +49,9 @@ const UserAuthorityCard = ({ isCollectData, updateUserAuthList, userData, isNewR
             <MainCard elevation={0}
                 border={false}
                 content={false}
+                sx={{margin: 0}}
             >
-                <Typography variant="h6" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                <Typography variant="h6" sx={{ mt: 2, ml: 3, mr: 1, borderBottom: "1px solid black" }}>
                     User Authority
                 </Typography>
 

src/pages/User/DetailPage/UserGroupCard.js

@@ -23,6 +23,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}
     useEffect(() => {
         //if user data from parent are not null
         if (Object.keys(userData).length > 0 && userData !== undefined) {
+            // console.log(userData.groupIds)
             setCurrentUserData(userData.data);
             setSelectedRow(userData.groupIds);
         }
@@ -48,8 +49,9 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}
             <MainCard elevation={0}
                       border={false}
                       content={false}
+                      sx={{margin: 0}}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black"}}>
+                <Typography variant="h6" sx={{mt: 2, ml: 3, mr: 1, borderBottom: "1px solid black"}}>
                     Group(s)
                 </Typography>
                 <UserGroupTable

src/pages/User/DetailPage/UserGroupTable.js

@@ -4,9 +4,9 @@ import {
 } from "@mui/x-data-grid";
 import {useEffect, useState} from "react";
 import axios from "axios";
-import {apiPath} from "../../../auth/utils";
+import {apiPath} from "auth/utils";
 import * as React from "react";
-import {GET_GROUP_COMBO_PATH} from "../../../utils/ApiPathConst";
+import {GET_GROUP_COMBO_PATH} from "utils/ApiPathConst";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
@@ -19,9 +19,6 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord})
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup);
     
     const _sx = {
-        ml: 3,
-        mb: 3,
-        mr: 3,
         padding: "4 2 4 2",
         boxShadow: 1,
         border: 1,
@@ -41,7 +38,9 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord})
         axios.get(`${apiPath}${GET_GROUP_COMBO_PATH}`)
             .then((response) => {
                 if (response.status === 200) {
+                    // console.log(userGroup)
                     setGroupData(response.data.records);
+                    setCurrentSelectedRow(userGroup);
                 }
             })
             .catch(error => {
@@ -85,7 +84,7 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord})
                     checkboxSelection
                     rowSelectionModel={currentSelectedRow}
                     onRowSelectionModelChange={(ids) => {
-                        console.log(ids);
+                        // console.log(ids);
                         setSelectedRow(ids);
                         setCurrentSelectedRow(ids);
                     }}

src/pages/User/DetailPage/UserInformationCard.js

@@ -67,8 +67,9 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
             <MainCard elevation={0}
                       border={false}
                       content={false}
+                      sx={{margin: 0}}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black"}}>
+                <Typography variant="h6" sx={{ mt: 2, ml: 3, mr: 1, borderBottom: "1px solid black"}}>
                     Information
                 </Typography>
 
@@ -236,10 +237,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                             </Grid>
                         </Grid> */}
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3}}>
                             <Grid container>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                      sx={{ml: 3, mr: 3, mb:3, display: 'flex', alignItems: 'center'}}>
                                     <FormLabel required>Locked:</FormLabel>
                                 </Grid>
 

src/pages/User/DetailPage/index.js

@@ -10,7 +10,7 @@ import { useEffect, useState } from "react";
 import * as React from "react";
 import axios from "axios";
 import { useNavigate, useParams } from "react-router-dom";
-import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER } from "../../../utils/ApiPathConst";
+import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER } from "utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -23,7 +23,7 @@ import {
     getDeletedRecordWithRefList,
     notifyDeleteSuccess,
     notifySaveSuccess,
-} from "../../../utils/CommonFunction";
+} from "utils/CommonFunction";
 import ForwardIcon from '@mui/icons-material/Forward';
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
@@ -221,7 +221,7 @@ const UserMaintainPage = () => {
                 <Grid item xs={12} md={5} lg={5}>
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: '#fff' }}>
+                            <Box xs={12} ml={4} mt={2} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}>
                                 <UserInformationCard
                                     updateUserObject={updateUserObject}
                                     userData={userData}
@@ -231,8 +231,8 @@ const UserMaintainPage = () => {
                             </Box>
                         </Grid>
 
-                        <Grid item xs={12} md={12} lg={12} sx={{ mt: 3 }}>
-                            <Box xs={12} ml={4} mt={2} sx={{ p: 1, borderRadius: '10px', backgroundColor: '#fff' }}>
+                        <Grid item xs={12} md={12} lg={12} sx={{ mt: 0.5 }}>
+                            <Box xs={12} ml={4} mt={2} sx={{borderRadius: '10px', backgroundColor: '#fff' }}>
                                 <UserGroupCard
                                     updateUserGroupList={updateUserGroupList}
                                     userData={userData}
@@ -245,7 +245,7 @@ const UserMaintainPage = () => {
                 </Grid>
                 {/*col 2*/}
                 <Grid item xs={12} md={7} lg={7}>
-                    <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: '#fff' }}>
+                    <Box xs={12} ml={2} mt={2} mr={3} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}>
                         <UserAuthorityCard
                             updateUserAuthList={updateUserAuthList}
                             userData={userData}
@@ -256,7 +256,7 @@ const UserMaintainPage = () => {
                 </Grid>
 
                 {/*bottom button*/}
-                <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"end"} justifyContent="center">
+                <Grid item s={12} md={12} lg={12} sx={{ mt:1, mb:2 }} alignItems={"end"} justifyContent="center">
                     <Grid container maxWidth justifyContent="flex-end">
                         <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -17,6 +17,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
 import {useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -150,49 +152,39 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         <Grid container maxWidth justifyContent="flex-start">
                             {editMode ?
                                 <>
+                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Grid item sx={{ mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             onClick={loadDataFun}
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
+                                            color="cancel"
                                         >
-                                            <Typography variant="h5">Reset & Back</Typography>
+                                            Reset & Back
                                         </Button>
                                     </Grid>
 
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             type="submit"
                                             color="success"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                         >
-                                            <Typography variant="h5">Save</Typography>
+                                            Save
                                         </Button>
                                     </Grid>
+                                </ThemeProvider>
                                 </>
                                 :
                                 <>
                                     <Grid item sx={{ mr: 3 }}>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
-                                            size="large"
                                             variant="contained"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                             onClick={onEditClick}
                                         >
-                                            <Typography variant="h5">Edit</Typography>
+                                            Edit
                                         </Button>
+                                        </ThemeProvider>
                                     </Grid>
                                 </>
                             }
@@ -321,16 +313,14 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                     })}
                                                 </Grid>
                                                 <Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2 ,mb:2}}>
+                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                     <Button
                                                         variant="contained"
-                                                        sx={{
-                                                            textTransform: 'capitalize',
-                                                            alignItems: 'end',
-                                                        }}
                                                         onClick={onVerifiedClick}
                                                     >
-                                                        <Typography variant="h5">Verify</Typography>
+                                                        Verify
                                                     </Button>
+                                                    </ThemeProvider>
                                                 </Grid>
                                             </>
                                     }
@@ -454,31 +444,27 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                 </Grid>
                                                 {locked ?
                                                     <Grid item xs={2} sm={2} md={2} lg={2}  sx={{ml:2}}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
                                                             variant="contained"
                                                             color="success"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doUnlock}
                                                         >
-                                                            <Typography variant="h5">Active</Typography>
+                                                            Active
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                     :
                                                     <Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2}}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
                                                             variant="contained"
                                                             color="error"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doLock}
                                                         >
-                                                            <Typography variant="h5">Lock</Typography>
+                                                            Lock
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                 }
                                             </>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js

@@ -116,7 +116,9 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                 <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                 <Grid item sx={{ mr: 3 }}>
                                         <Button
+                                            aria-label={intl.formatMessage({id: 'back'})}
                                             variant="contained"
+                                            color="cancel"
                                             onClick={loadDataFun}
                                         >
                                             <FormattedMessage id="resetAndBack" />
@@ -125,6 +127,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
 
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
+                                            aria-label={intl.formatMessage({id: 'save'})}
                                             variant="contained"
                                             type="submit"
                                             color="success"
@@ -139,6 +142,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                 <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                 <Grid item sx={{ mr: 3 }}>
                                         <Button
+                                            aria-label={intl.formatMessage({id: 'edit'})}
                                             variant="contained"
                                             onClick={onEditClick}
                                         >
@@ -214,7 +218,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                             <Grid xs={12} sm={12} md={12} lg={4}>
                                 <Grid container alignItems={"center"} sx={{mb:2}}>
                                     <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">
+                                        <Typography variant="pnspsFormParagraphBold">
                                             <FormattedMessage id="idNo" />:
                                         </Typography>
                                     </Grid>

src/pages/User/DetailsPage_Individual/index.js

@@ -120,14 +120,16 @@ const UserMaintainPage_Individual = () => {
         isLoading ?
             <LoadingComponent />
             :
-            <Grid container sx={{ backgroundColor: 'backgroundColor.default', maxWidth:'100%' }}>
+            <Grid container direction="column" sx={{minHeight: '90vh', backgroundColor: isGLDLoggedIn()?'backgroundColor.default':'#ffffff', maxWidth:'100%' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                         {isGLDLoggedIn()?
-                            <Typography ml={15} color='#FFF' variant="h4">Maintain Individual User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                Maintain Individual User
+                            </Typography>
                         :
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                 <FormattedMessage id="userProfile" />
                             </Typography>
                         }
@@ -135,7 +137,10 @@ const UserMaintainPage_Individual = () => {
                     </div>
                 </Grid>
                 <Grid item xs={12}>
-                    <Button title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/indUser") }}>
+                    <Button title="Back"
+                            sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }}
+                            variant="outlined" onClick={() => { navigate(-1) }}
+                    >
                         <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                     </Button>
                 </Grid>

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -18,6 +18,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
 import {useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -196,50 +198,39 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                         <Grid container maxWidth justifyContent="flex-start">
                             {editMode ?
                                 <>
+                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             onClick={loadDataFun}
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
+                                            color="cancel"
                                         >
-                                            <Typography variant="h5">Reset & Back</Typography>
+                                            Reset & Back
                                         </Button>
                                     </Grid>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             type="submit"
                                             color="success"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                         >
-                                            <Typography variant="h5">Save</Typography>
+                                            Save
                                         </Button>
                                     </Grid>
-
+                                </ThemeProvider>
                                 </>
                                 :
                                 <>
 
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
-                                            size="large"
                                             variant="contained"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                             onClick={onEditClick}
                                         >
-                                            <Typography variant="h5">Edit</Typography>
+                                            Edit
                                         </Button>
+                                        </ThemeProvider>
                                     </Grid>
                                 </>
                             }
@@ -380,17 +371,14 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                     })}
                                                 </Grid>
                                                 <Grid item xs={1} md={1} lg={1}>
+                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                     <Button
-                                                        size="large"
                                                         variant="contained"
-                                                        sx={{
-                                                            textTransform: 'capitalize',
-                                                            alignItems: 'end'
-                                                        }}
                                                         onClick={() => { onVerifiedClick() }}
                                                     >
-                                                        <Typography variant="h5">Verify</Typography>
+                                                        Verify
                                                     </Button>
+                                                    </ThemeProvider>
                                                 </Grid>
                                             </>
                                     }
@@ -436,33 +424,27 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
 
                                                 {formik.values.locked ?
                                                     <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
-                                                            size="large"
                                                             variant="contained"
                                                             color="success"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doUnlock}
                                                         >
-                                                            <Typography variant="h5">Active</Typography>
+                                                            Active
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                     :
                                                     <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
-                                                            size="large"
                                                             variant="contained"
                                                             color="error"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end',
-                                                            }}
                                                             onClick={doLock}
                                                         >
-                                                            <Typography variant="h5">Lock</Typography>
+                                                           Lock
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                 }
                                             </>
@@ -478,11 +460,13 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                 <Grid container alignItems={"center"}>
                                     {currentUserData.orgId == null ?
                                         <Grid item lg={2} >
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button variant="contained"
                                                 onClick={createOrgClick}
                                             >
-                                                <Typography variant="h5">Create Organisation</Typography>
+                                               Create Organisation
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         : null
                                     }
@@ -577,25 +561,55 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                 </form>
             }
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">Close</Typography></Button>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Button onClick={() => setIsWarningPopUp(false)}>
+                            Close
+                        </Button>
+                        </ThemeProvider>
                     </DialogActions>
                 </Dialog>
             </div>
             <div>
-                <Dialog open={isConfirmPopUp} onClose={() => setIsConfirmPopUp(false)}  >
+                <Dialog
+                    open={isConfirmPopUp}
+                    onClose={() => setIsConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{confirmText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => { setIsConfirmPopUp(false) }}><Typography variant="h5">Close</Typography></Button>
-                        <Button onClick={() => { confirmAction?.function(); }}><Typography variant="h5">Confirm</Typography></Button>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Button onClick={() => { setIsConfirmPopUp(false) }}>
+                            Close
+                        </Button>
+                        <Button onClick={() => { confirmAction?.function(); }}>
+                            Confirm
+                        </Button>
+                        </ThemeProvider>
                     </DialogActions>
                 </Dialog>
             </div>

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js

@@ -114,6 +114,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                         <Button
                                             variant="contained"
                                             onClick={loadDataFun}
+                                            color="cancel"
                                         >
                                             <FormattedMessage id="resetAndBack" />
 

src/pages/User/DetailsPage_Organization/index.js

@@ -181,14 +181,16 @@ const UserMaintainPage_Organization = () => {
         isLoading ?
             <LoadingComponent />
             :
-            <Grid container sx={{ backgroundColor: "backgroundColor.default" }}>
+            <Grid container sx={{ backgroundColor: isGLDLoggedIn()?'backgroundColor.default':'#ffffff' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                             {isGLDLoggedIn()?
-                                <Typography ml={15} color='#FFF' variant="h4">Maintain Organisation User</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                    Maintain Organisation User
+                                </Typography>
                             :
-                                <Typography ml={15} color='#FFF' variant="h4">
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                     <FormattedMessage id="userProfile" />
                                 </Typography>
                             }
@@ -196,7 +198,7 @@ const UserMaintainPage_Organization = () => {
                     </div>
                 </Grid>
                 <Grid item xs={12}>
-                    <Button title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/orgUser") }}>
+                    <Button title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}>
                         <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                     </Button>
                 </Grid>

src/pages/User/GLDUserProfile/UserInformationCard.js

@@ -0,0 +1,160 @@
+// material-ui
+import {
+    FormControl, 
+    // IconButton,
+    Grid, 
+    // InputAdornment, 
+    Typography, FormLabel,
+    OutlinedInput,
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as React from "react";
+
+import {useEffect, useState} from "react";
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+const UserInformationCard = ({userData}) => {
+    const [currentUserData, setCurrentUserData] = React.useState({});
+    // const [locked, setLocked] = useState(false);
+    const [onReady, setOnReady] = useState(false);
+
+    useEffect(() => {
+        //if user data from parent are not null
+        if (Object.keys(userData).length > 0 && userData !== undefined) {
+            setCurrentUserData(userData.data);
+        }
+    }, [userData]);
+
+    useEffect(() => {
+        //if state data are ready and assign to different field
+        if (Object.keys(userData).length > 0 &&currentUserData !== undefined&&currentUserData.id!==undefined) {
+            // console.log(currentUserData)
+            // setLocked(currentUserData.locked);
+            setOnReady(true);
+        }
+    }, [currentUserData]);
+
+    return (
+        !onReady ?
+            <LoadingComponent/>
+            :
+            <MainCard elevation={0}
+                      border={false}
+                      content={false}
+            >
+                <Typography variant="h5" sx={{mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black"}}>
+                    Information
+                </Typography>
+
+                <form>
+                    <Grid container>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3, mt:3}}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={4} s={4} md={4} lg={4}
+                                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    <FormLabel required>Username:</FormLabel>
+                                </Grid>
+
+                                <Grid item xs={7} s={7} md={7} lg={6}>
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            required
+                                            fullWidth
+                                            size="small"
+                                            // {...register("username",
+                                            //     {
+                                                //     })}
+                                                id='username'
+                                                disabled={true}
+                                                value={currentUserData.username}
+                                        />
+                                    </FormControl>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={4} s={4} md={4} lg={4}
+                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    <FormLabel required >Full Name:</FormLabel>
+                                </Grid>
+
+                                <Grid item xs={7} s={7} md={7} lg={6}>
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            required
+                                            fullWidth
+                                            size="small"
+                                            value= {currentUserData.enName}
+                                            disabled={true}
+                                            // {...register("enName",
+                                            //     {
+                                            //     })}
+                                            id='enName'
+                                        />
+                                    </FormControl>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={4} s={4} md={4} lg={4}
+                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    <FormLabel>Post:</FormLabel>
+                                </Grid>
+
+                                <Grid item xs={7} s={7} md={7} lg={6}>
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            fullWidth
+                                            size="small"
+                                            value= {currentUserData.post}
+                                            disabled={true}
+                                            // {...register("post",
+                                            //     {
+                                            //     })}
+                                            id='post'
+                                        />
+                                    </FormControl>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                            <Grid container alignItems={"center"}>
+                                <Grid item xs={4} s={4} md={4} lg={4}
+                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    <FormLabel required>Email:</FormLabel>
+                                </Grid>
+
+                                <Grid item xs={7} s={7} md={7} lg={6}>
+                                    <FormControl variant="outlined" fullWidth required>
+                                        <OutlinedInput
+                                            fullWidth
+                                            size="small"
+                                            value={currentUserData.emailAddress}
+                                            disabled={true}
+                                            // {...register("emailAddress",
+                                            //     {
+                                            //     })}
+                                            id='emailAddress'
+                                        />
+                                    </FormControl>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                    </Grid>
+
+                </form>
+            </MainCard>
+    );
+};
+
+export default UserInformationCard;