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

# Conflicts:
#	src/routes/PublicUserRoutes.js

src/components/cards/AuthFooter.js

@@ -50,8 +50,9 @@ const AuthFooter = () => {
                       W3C WAI Web Content Accessibility Guidelines 2.0"/>
           </a>
           <a href="https://www.brandhk.gov.hk/zh-hk"
-            title="">
-            <img src={bhkLogo} alt="logo" height="32" width="88" />
+            title="Brand Hong Kong">
+            <img src={bhkLogo} alt="logo" height="32" width="88" 
+            />
           </a>
         </Stack>
     </Container>

src/pages/OrganizationDetailPage/OrganizationCard.js

@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid, Button, Checkbox,FormControlLabel
+    Grid, Button, Checkbox, FormControlLabel, Typography
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
 import MainCard from "../../components/MainCard";
@@ -129,7 +129,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                             <>
                                 {createMode ?
                                     <>
-                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                        <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
                                                 size="large"
                                                 variant="contained"
@@ -144,7 +144,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                         </Grid>
                                     </> :
                                     <>
-                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                        <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
                                                 size="large"
                                                 variant="contained"
@@ -176,7 +176,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                             </>
                             :
                             <>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
+                                <Grid item sx={{ ml: 0, mr: 3 }}>
                                     <Button
                                         size="large"
                                         variant="contained"
@@ -195,11 +195,15 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                 </Grid>
                 {/*top*/}
 
-                {!onReady?
-                <LoadingComponent />
-                :
+                {!onReady ?
+                    <LoadingComponent />
+                    :
                     <Grid container spacing={1}>
-
+                        <Grid item xs={12}>
+                            <Typography variant="h5" sx={{mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                                Organization Details
+                            </Typography>
+                        </Grid>
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
                                 label: FieldUtils.notNullFieldLabel("BR No.:"),
@@ -214,8 +218,8 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                 control={<Checkbox checked={formik.values.creditor} />}
                                 label="is Creditor"
                                 name="creditor"
-                                onChange={()=>{
-                                    formik.setFieldValue("creditor",!formik.values.creditor);
+                                onChange={() => {
+                                    formik.setFieldValue("creditor", !formik.values.creditor);
                                 }}
                                 disabled={!editMode && !createMode}
                             />
@@ -233,84 +237,84 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getTextField({
-                            label: "Name (Ch):",
-                            valueName: "chCompanyName",
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getTextField({
+                                label: "Name (Ch):",
+                                valueName: "chCompanyName",
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getDateField({
-                            label: FieldUtils.notNullFieldLabel("Expiry Date:"),
-                            valueName: "brExpiryDate",
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getDateField({
+                                label: FieldUtils.notNullFieldLabel("Expiry Date:"),
+                                valueName: "brExpiryDate",
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getTextField({
-                            label: FieldUtils.notNullFieldLabel("Contact Person:"),
-                            valueName: "contactPerson",
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getTextField({
+                                label: FieldUtils.notNullFieldLabel("Contact Person:"),
+                                valueName: "contactPerson",
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getPhoneField({
-                            label: FieldUtils.notNullFieldLabel("Contact Tel:"),
-                            valueName: {
-                                code: "tel_countryCode",
-                                num: "phoneNumber"
-                            },
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getPhoneField({
+                                label: FieldUtils.notNullFieldLabel("Contact Tel:"),
+                                valueName: {
+                                    code: "tel_countryCode",
+                                    num: "phoneNumber"
+                                },
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getPhoneField({
-                            label: "Fax No:",
-                            valueName: {
-                                code: "fax_countryCode",
-                                num: "faxNumber"
-                            },
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getPhoneField({
+                                label: "Fax No:",
+                                valueName: {
+                                    code: "fax_countryCode",
+                                    num: "faxNumber"
+                                },
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getComboField({
-                            label: FieldUtils.notNullFieldLabel("Country:"),
-                            valueName: "country",
-                            disabled: (!editMode && !createMode),
-                            dataList: ComboData.country,
-                            form: formik
-                        })}
+                            {FieldUtils.getComboField({
+                                label: FieldUtils.notNullFieldLabel("Country:"),
+                                valueName: "country",
+                                disabled: (!editMode && !createMode),
+                                dataList: ComboData.country,
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={4} >
-                        {FieldUtils.getComboField({
-                            label: FieldUtils.notNullFieldLabel("District:"),
-                            valueName: "district",
-                            disabled: (!editMode && !createMode),
-                            dataList: ComboData.district,
-                            form: formik
-                        })}
+                            {FieldUtils.getComboField({
+                                label: FieldUtils.notNullFieldLabel("District:"),
+                                valueName: "district",
+                                disabled: (!editMode && !createMode),
+                                dataList: ComboData.district,
+                                form: formik
+                            })}
                         </Grid>
 
 
                         <Grid item lg={4} >
-                        {FieldUtils.getAddressField({
-                            label: FieldUtils.notNullFieldLabel("Address:"),
-                            valueName: ["addressLine1", "addressLine2", "addressLine3"],
-                            disabled: (!editMode && !createMode),
-                            form: formik
-                        })}
+                            {FieldUtils.getAddressField({
+                                label: FieldUtils.notNullFieldLabel("Address:"),
+                                valueName: ["addressLine1", "addressLine2", "addressLine3"],
+                                disabled: (!editMode && !createMode),
+                                form: formik
+                            })}
                         </Grid>
 
                         <Grid item lg={12} ></Grid>

src/pages/OrganizationDetailPage/index.js

@@ -1,9 +1,9 @@
 // material-ui
-import {Grid, Typography} from '@mui/material';
-import {useEffect, useState} from "react";
+import { Grid, Typography, Stack, Box, Button } from '@mui/material';
+import { useEffect, useState } from "react";
 import * as React from "react";
 import * as HttpUtils from "../../utils/HttpUtils";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
 import * as UrlUtils from "../../utils/ApiPathConst";
 import * as DateUtils from "../../utils/DateUtils";
 
@@ -11,41 +11,53 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const InfoCard = Loadable(lazy(() => import('./OrganizationCard')));
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
-
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import { useNavigate } from 'react-router-dom';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const OrganizationDetailPage = () => {
     const params = useParams();
-    const [formData, setFormData]  = useState({})
+    const [formData, setFormData] = useState({})
     const [isLoading, setLoding] = useState(true);
+    const navigate = useNavigate();
 
-
-    useEffect(()=>{
+    useEffect(() => {
         console.log(formData);
         loadData();
-    },[]);
+    }, []);
 
-    const loadData = ()=>{
+    const loadData = () => {
         setLoding(true);
-        if(params.id>0){        
+        if (params.id > 0) {
             HttpUtils.get({
-                url: UrlUtils.GET_ORG_PATH+"/"+params.id,
-                onSuccess: function(response){
+                url: UrlUtils.GET_ORG_PATH + "/" + params.id,
+                onSuccess: function (response) {
                     response.data["country"] = response.data.addressTemp?.country;
                     response.data["district"] = 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;
-                    
+
                     response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
                     response.data["tel_countryCode"] = response.data.contactTel?.countryCode;
 
                     response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                     response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
 
-                    response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate): "";
+                    response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
                     setFormData(response.data)
                 }
             });
@@ -54,28 +66,40 @@ const OrganizationDetailPage = () => {
 
 
     useEffect(() => {
-       setLoding(false);
+        setLoding(false);
     }, [formData]);
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5" >Organization Details</Typography>
+            <Grid container>
+                <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 Organization</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/org") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <InfoCard
-                                userData={formData}
-                                loadDataFun={loadData}
-                                id={params.id}
-                            />
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <InfoCard
+                                    userData={formData}
+                                    loadDataFun={loadData}
+                                    id={params.id}
+                                />
+                            </Box>
+                            <br />
                         </Grid>
-
                     </Grid>
                 </Grid>
                 {/*col 2*/}

src/pages/OrganizationSearchPage/index.js

@@ -1,10 +1,10 @@
 // material-ui
 import {
-    Grid, Typography
+    Grid, Typography, Stack
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import * as UrlUtils from "../../utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "../../utils/HttpUtils";
@@ -17,12 +17,22 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./OrganizationSearchForm')));
 const EventTable = Loadable(lazy(() => import('./OrganizationTable')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const OrganizationSearchPage = () => {
 
-    const [record,setRecord] = useState([]);
+    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
 
@@ -38,11 +48,11 @@ const OrganizationSearchPage = () => {
         getUserList();
     }, [searchCriteria]);
 
-    function getUserList(){
+    function getUserList() {
         HttpUtils.get({
             url: UrlUtils.GET_ORG_PATH,
             params: searchCriteria,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 setRecord(responseData);
             }
         });
@@ -54,29 +64,32 @@ const OrganizationSearchPage = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            <Grid item xs={12} sx={{mb: -2.25}}>
-                <Typography variant="h5">View Organization</Typography>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">View Organization</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm applySearch={applySearch} />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
             </Grid>
-
-            {/*row 1*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <SearchForm applySearch={applySearch}/>
-            </Grid>
-            {/*row 2*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <MainCard elevation={0}
-                          border={false}
-                          content={false}
-                >
-                    <EventTable
-                        recordList={record}
-                    />
-                </MainCard>
-            </Grid>
-        </Grid>
     );
 };
 

src/pages/Payment/FPS/AckPage.js

@@ -0,0 +1,223 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack,
+    // Button,
+    FormLabel,
+} from '@mui/material';
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+// import { useNavigate } from "react-router-dom";
+// import FpsIcon from "assets/images/icons/fps.svg";
+import { useLocation } from 'react-router-dom';
+import {paymentPath} from "auth/utils";
+// import {poll} from "utils/Utils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const AckPage = () => {
+    // const navigate = useNavigate()
+    const location = useLocation();
+
+    const [paymentData, setPaymentData] = React.useState({});
+    const [transactionData, setTransactionData] = React.useState({});
+    const [transactionDate, setTransactionDate] = React.useState("");
+    const [transactionTime, setTransactionTime] = React.useState("");
+    const [onReady, setOnReady] = React.useState(false);
+    const paymentStatusApi = "/api/payment/status/";
+    const [paymentid, setPaymentid] = React.useState("");
+
+    React.useEffect(() => {
+       
+        if(location.state != undefined){
+            console.log(location.state)
+            setPaymentData(location.state)
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if(Object.keys(transactionData).length > 0 ){
+            setOnReady(true);
+        }
+    }, [transactionData]);
+
+    React.useEffect(() => {
+        if (Object.keys(paymentData).length > 0){
+            const dateTime = paymentData.transactionDateTime;
+            const date = new Date(dateTime);
+            const trnDate = date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear();
+            const trnTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
+            setTransactionDate(trnDate)
+            setTransactionTime(trnTime)
+            setPaymentid(paymentData.paymentid)
+        }
+        // setTransactionData(
+        //     {
+        //         "amount": 999.99,
+        //         "currencycode": "HKD",
+        //         "paymentdetail": {
+        //             "attemptno": 1,
+        //             "channel": "MobileWallet",
+        //             "paymentid": "C202310268000681",
+        //             "paymentmethod": "04",
+        //             "result": {
+        //                 "canretry": "Y",
+        //                 "description": "CANC - Cancelled by user or Payment Server.",
+        //                 "paymentstatuscode": "CANC",
+        //                 "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"
+        //             },
+        //             "subtype": "FPS",
+        //             "time": "2023-10-26T09:02:17Z[UTC]"
+        //         },
+        //         "transactionid": "20231026170103921"
+        //     }
+        // )
+        HttpUtils.post({
+            url: paymentPath+paymentStatusApi+paymentid,
+            params:{
+                "apprefid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,   
+            },
+            onSuccess: function(responseData){
+                setTransactionData(responseData)
+            }
+        });
+    }, [paymentData]);
+
+    return (
+        !onReady ?
+            <LoadingComponent />
+            :
+            (
+                <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 }}>公共啟事：FPS付款</Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} >
+                        <Grid container justifyContent="flex-start" alignItems="center" >
+                            <center>
+                                <Grid item xs={12} md={12} >
+
+                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    Your application and payment have been received
+                                    </Typography>
+
+                                    <Grid container>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                    Transaction Reference No:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                Transaction Date:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {transactionDate+" (DD/MM/YYYY)"}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                Transaction Time:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {transactionTime+" (HH:MI:SS)"}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                EGIS Reference No:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {transactionData.transactionid}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                Payment Amount
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {"HK$ "+transactionData.amount}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                        <Grid item xs={12} md={12}>
+                                            <Grid container >
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                Payment Method:
+                                                </FormLabel>
+                                            </Grid>
+                                            <Grid item>
+                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
+                                                {transactionData.paymentdetail.subtype}
+                                                </FormLabel>
+                                            </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </center>
+                        </Grid>
+                    </Grid>
+                    {/*row 2*/}
+                </Grid >
+            )
+
+
+    );
+};
+
+export default AckPage;

src/pages/Payment/FPS/FPS.js

@@ -38,13 +38,13 @@ const Index = () => {
     const [paymentid, setPaymentid] = React.useState("");
     const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");
     const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState("");
-    // const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
+    const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
     // const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
     // const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD
     // const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing
-    // const loadPaymentUrl = "/api/payment/wallet/fps";
+    const loadPaymentUrl = "/api/payment/wallet/fps";
     const cancelPaymentUrl = "/api/payment/cancelpayment";
-    // const paymentStatusApi = "/api/payment/status/";
+    const paymentStatusApi = "/api/payment/status/";
     // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
     // const receiverUrl = "/noti-api/payment/payment-notification";
     
@@ -56,13 +56,8 @@ const Index = () => {
         setFpsqrcodeimgbase64("")
         if(location.state != undefined){
             setPaymentData(location.state)
+            loadForm();
         }
-        loadForm();
-        currentTimer.current = setInterval(() => {
-            getPaymentStatus();
-            setTime((prevTime) => prevTime + 1);
-        }, 500);
-        return () => clearInterval(currentTimer.current);
     }, []);
 
     React.useEffect(() => {
@@ -71,85 +66,106 @@ const Index = () => {
 
 
     const loadForm = () => {
-        const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
-        const convertedDateString = timeoutdatetime.replace("[UTC]", "");
-        setFpsmerchanttimeoutdatetime(convertedDateString)
-        setPaymentid("C202310268000681")
-        
-        // HttpUtils.post({
-        //     url: paymentPath+loadPaymentUrl,
-        //     params:{
-        //         "transactionid": paymentData.transactionid,
-        //         "webtoken": paymentData.webtoken,
-        //         "paymentmethod":"04,BCFP,FPS",
-        //         "order": { 
-        //             "totalamount":paymentData.amount,
-        //             "currency":"HKD",
-        //             "orderdetail": 
-        //             [ 
-        //                 { 
-        //                     "itemid": "1",
-        //                     "qty":"1",
-        //                     "unitprice":paymentData.amount,
-        //                     "amount":paymentData.amount
-        //                 },
-        //             ]
-        //         },
-        //         // "locale":"<locale>",
-        //         // "eserviceid":"<eserviceid>"
-        //     },
-        //     onSuccess: function(responseData){
-        //         /*
-        //             {
-        //                 "paymentid": "<paymentid>",
-        //                 "paymentstatus": "<paymentstatus>",
-        //                 "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
-        //                 "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
-        //                 "fpsqrcodeurl": "<fpsqrcodeurl>"
-        //             }
-        //         */
-        //        setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
-        //        setPaymentid(responseData.paymentid);
-        //        setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
-        //        setPaymentstatuscode(responseData.paymentstatuscode);
-        //     //    const parsedUrl = new URL(responseData.fpsqrcodeurl);
-        //     //    const fpsqrcodeurl = parsedUrl.pathname;
-        //     //    const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback='
-        //     //                     + encodeURIComponent(paymentPath + payment.config.fpscallbackPage);
-        //     //    setFpsqrcodeurl(openPASGUrl)
-        //     }
-        // });
+        // const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
+        // const convertedDateString = timeoutdatetime.replace("[UTC]", "");
+        // setFpsmerchanttimeoutdatetime(convertedDateString)
+        // setPaymentid("C202310268000681")
+        // setPaymentstatuscode("APPR")
+        HttpUtils.post({
+            url: paymentPath+loadPaymentUrl,
+            params:{
+                "transactionid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,
+                "paymentmethod":"04,BCFP,FPS",
+                "order": { 
+                    "totalamount":paymentData.amount,
+                    "currency":"HKD",
+                    "orderdetail": 
+                    [ 
+                        { 
+                            "itemid": "1",
+                            "qty":"1",
+                            "unitprice":paymentData.amount,
+                            "amount":paymentData.amount
+                        },
+                    ]
+                },
+                // "locale":"<locale>",
+                // "eserviceid":"<eserviceid>"
+            },
+            onSuccess: function(responseData){
+                /*
+                    {
+                        "paymentid": "<paymentid>",
+                        "paymentstatus": "<paymentstatus>",
+                        "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
+                        "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
+                        "fpsqrcodeurl": "<fpsqrcodeurl>"
+                    }
+                */
+               setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
+               setPaymentid(responseData.paymentid);
+
+               const timeoutdatetime = responseData.fpsmerchanttimeoutdatetime
+               const convertedDateString = timeoutdatetime.replace("[UTC]", "");
+               setFpsmerchanttimeoutdatetime(convertedDateString)
+               
+               setPaymentstatuscode(responseData.paymentstatuscode);
+            //    const parsedUrl = new URL(responseData.fpsqrcodeurl);
+            //    const fpsqrcodeurl = parsedUrl.pathname;
+            //    const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback='
+            //                     + encodeURIComponent(paymentPath + payment.config.fpscallbackPage);
+            //    setFpsqrcodeurl(openPASGUrl)
+            }
+        });
+        currentTimer.current = setInterval(() => {
+            setTime((prevTime) => prevTime + 1);
+        }, 1000);
+        return () => clearInterval(currentTimer.current);
     }
 
     const getPaymentStatus = () => {
-        
-        // HttpUtils.post({
-        //     url: paymentPath+paymentStatusApi+paymentid,
-        //     params:{
-        //         "apprefid": paymentData.transactionid,
-        //         "webtoken": paymentData.webtoken,   
-        //     },
-        //     onSuccess: function(responseData){
-        //         const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
-        //         if (paymentstatuscode === 'APPR') {
-        //             const timestamp = '?t=' + Date.now();
-        //             window.top.location.href = paymentPath + payment.config.ackPagePath + timestamp;
-        //         } else if (paymentstatuscode === 'CANC') {
-        //             window.top.location.href = paymentPath + payment.config.indexPagePath;
-        //         } else {
-        //             window.top.location.href = paymentPath + payment.config.errPagePath;
-        //         }
-        //     },
-        //     onError: function(){
-        //         cancelPayment()
-        //         clearInterval(currentTimer.current);
+        console.log(paymentstatuscode)
+        // if (paymentstatuscode != "" && paymentstatuscode != "INPR" ){
+        //     if (paymentstatuscode === 'APPR') {
+        //         const timestamp = Date.now();
+        //         navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} });
+        //     } else if (paymentstatuscode === 'CANC') {
+        //         navigate('/payment');
+        //     } else {
+        //         alert("error")
         //     }
-        // });
+        // }
+        
+        HttpUtils.post({
+            url: paymentPath+paymentStatusApi+paymentid,
+            params:{
+                "apprefid": paymentData.transactionid,
+                "webtoken": paymentData.webtoken,   
+            },
+            onSuccess: function(responseData){
+                const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
+                if (paymentstatuscode === 'APPR') {
+                    const timestamp = Date.now();
+                    navigate('/payment/fps/ackpage', {state:{transactionDateTime:timestamp,transactionid:"",webtoken:"", paymentid:paymentid} });
+                } else if (paymentstatuscode === 'CANC') {
+                    window.top.location.href = paymentPath + payment.config.indexPagePath;
+                } else {
+                    window.top.location.href = paymentPath + payment.config.errPagePath;
+                }
+            },
+            onError: function(){
+                cancelPayment()
+                clearInterval(currentTimer.current);
+            }
+        });
     };
     
     React.useEffect(() => {
         const timeOutDate = new Date(fpsmerchanttimeoutdatetime);
         const currentTime = new Date;
+        console.log(time)
+        getPaymentStatus();
         if (timeOutDate.getTime()<currentTime.getTime()){
             console.log("stop");
             clearInterval(currentTimer.current);
@@ -170,35 +186,6 @@ const Index = () => {
         });       
     }
 
-    // const getPayload = ()=>{
-    //     HttpUtils.get({
-    //         url: payloadUrl+"<paymenttoken>",
-    //         onSuccess: function(responseData){
-    //     /* 
-    //         {
-    //             "payload": "<payload>"
-    //         }
-
-    //     */
-    //         }
-    //     });       
-    // }
-
-    // const getReceiver = ()=>{
-    //     HttpUtils.get({
-    //         url: receiverUrl+"<paymenttoken>",
-    //         onSuccess: function(responseData){
-    //     /* 
-    //         {
-    //             "payload": "<payload>"
-    //         }
-
-    //     */
-    //         }
-    //     });       
-    // }
-
-
     return (
         !onReady ?
             <LoadingComponent />

src/pages/Payment/index.js

@@ -90,187 +90,187 @@ const Index = () => {
     }, [confirmPayment]);
     
     const getAvailablePayment = () => {
-        const responseData = {
-            "availablepaymentmethods": [
-                {
-                    "active": "Y",
-                    "code": "04,BCFP,FPS",
-                    "pointstonote": [
-                        {
-                            "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
-                            "order": 10,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
-                            "order": 11,
-                            "type": "INFO"
-                        }
-                    ],
-                    "subtype": "FPS"
-                },
-                {
-                    "active": "Y",
-                    "code": "02,BCMP,CreditCard",
-                    "pointstonote": [
-                        {
-                            "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
-                            "order": 10,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
-                            "order": 11,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Merchant Name is applicable to credit card payment method only.",
-                            "order": 40,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
-                            "order": 41,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
-                            "order": 42,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
-                            "order": 43,
-                            "type": "INFO"
-                        }
-                    ],
-                    "subtype": "CreditCard",
-                    "supportedcard": [
-                        "JCB",
-                        "MasterCard",
-                        "Visa"
-                    ]
-                },
-                {
-                    "active": "Y",
-                    "code": "03,BCMP,CreditCard",
-                    "pointstonote": [
-                        {
-                            "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
-                            "order": 10,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
-                            "order": 11,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Merchant Name is applicable to credit card payment method only.",
-                            "order": 40,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
-                            "order": 41,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
-                            "order": 42,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
-                            "order": 43,
-                            "type": "INFO"
-                        }
-                    ],
-                    "subtype": "CreditCard",
-                    "supportedcard": [
-                        "UnionPay"
-                    ]
-                },
-                {
-                    "active": "Y",
-                    "code": "01,PPSB,PPS",
-                    "pointstonote": [
-                        {
-                            "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
-                            "order": 10,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
-                            "order": 11,
-                            "type": "INFO"
-                        },
-                        {
-                            "content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ",
-                            "order": 21,
-                            "type": "INFO"
-                        }
-                    ],
-                    "subtype": "PPS"
-                }
-            ]
-        };
-        let availableMethods = responseData.availablepaymentmethods;
-        setAvailableMethods(availableMethods);
-        if (availableMethods.length>0){
-            availableMethods.forEach((method)=>{
-                if(method.subtype === "FPS" ){
-                    setFPSStatus(method)
-                }else if (method.subtype === "CreditCard"){
-                    method.supportedcard.forEach((supportedcard)=>{
-                        if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
-                            setCreditCardStatus(method)
-                        } else {
-                            if (supportedcard === "UnionPay"){
-                                setUnionPayStatus(method)
-                            }
-                        }
-                    })
-                }else if (method.subtype === "PPS" ){
-                    setPPSStatus(method)
-                }
-            });
-        }
-
-        // HttpUtils.post({
-        //     url: paymentPath+getAvailablePaymentUrl,
-        //     params: {
-        //         // "locale": local.zh,;
-        //         "amount": totalAmount,
-        //         // "eserviceids": [
-        //         //     "<eserviceid>", "<eserviceid>"
-        //         // ],
-        //         "preferpaymentmethods": preferpaymentmethods
-        //     },
-        //     onSuccess: (responseData)=>{
-        //         let availableMethods = responseData.availablepaymentmethods;
-        //         setAvailableMethods(availableMethods);
-        //         if (availableMethods.length>0){
-        //             availableMethods.forEach((method)=>{
-        //                 if(method.subtype === "FPS" ){
-        //                     setFPSStatus(method)
-        //                 }else if (method.subtype === "CreditCard"){
-        //                     method.supportedcard.forEach((supportedcard)=>{
-        //                         if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
-        //                             setCreditCardStatus(method)
-        //                         } else {
-        //                             if (supportedcard === "UnionPay"){
-        //                                 setUnionPayStatus(method)
-        //                             }
-        //                         }
-        //                     })
-        //                 }else if (method.subtype === "PPS" ){
-        //                     setPPSStatus(method)
+        // const responseData = {
+        //     "availablepaymentmethods": [
+        //         {
+        //             "active": "Y",
+        //             "code": "04,BCFP,FPS",
+        //             "pointstonote": [
+        //                 {
+        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
+        //                     "order": 10,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
+        //                     "order": 11,
+        //                     "type": "INFO"
+        //                 }
+        //             ],
+        //             "subtype": "FPS"
+        //         },
+        //         {
+        //             "active": "Y",
+        //             "code": "02,BCMP,CreditCard",
+        //             "pointstonote": [
+        //                 {
+        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
+        //                     "order": 10,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
+        //                     "order": 11,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Merchant Name is applicable to credit card payment method only.",
+        //                     "order": 40,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
+        //                     "order": 41,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
+        //                     "order": 42,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
+        //                     "order": 43,
+        //                     "type": "INFO"
         //                 }
-        //             });
+        //             ],
+        //             "subtype": "CreditCard",
+        //             "supportedcard": [
+        //                 "JCB",
+        //                 "MasterCard",
+        //                 "Visa"
+        //             ]
+        //         },
+        //         {
+        //             "active": "Y",
+        //             "code": "03,BCMP,CreditCard",
+        //             "pointstonote": [
+        //                 {
+        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
+        //                     "order": 10,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
+        //                     "order": 11,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Merchant Name is applicable to credit card payment method only.",
+        //                     "order": 40,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
+        //                     "order": 41,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
+        //                     "order": 42,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
+        //                     "order": 43,
+        //                     "type": "INFO"
+        //                 }
+        //             ],
+        //             "subtype": "CreditCard",
+        //             "supportedcard": [
+        //                 "UnionPay"
+        //             ]
+        //         },
+        //         {
+        //             "active": "Y",
+        //             "code": "01,PPSB,PPS",
+        //             "pointstonote": [
+        //                 {
+        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
+        //                     "order": 10,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
+        //                     "order": 11,
+        //                     "type": "INFO"
+        //                 },
+        //                 {
+        //                     "content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ",
+        //                     "order": 21,
+        //                     "type": "INFO"
+        //                 }
+        //             ],
+        //             "subtype": "PPS"
         //         }
-        //     }
-        // });
+        //     ]
+        // };
+        // let availableMethods = responseData.availablepaymentmethods;
+        // setAvailableMethods(availableMethods);
+        // if (availableMethods.length>0){
+        //     availableMethods.forEach((method)=>{
+        //         if(method.subtype === "FPS" ){
+        //             setFPSStatus(method)
+        //         }else if (method.subtype === "CreditCard"){
+        //             method.supportedcard.forEach((supportedcard)=>{
+        //                 if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
+        //                     setCreditCardStatus(method)
+        //                 } else {
+        //                     if (supportedcard === "UnionPay"){
+        //                         setUnionPayStatus(method)
+        //                     }
+        //                 }
+        //             })
+        //         }else if (method.subtype === "PPS" ){
+        //             setPPSStatus(method)
+        //         }
+        //     });
+        // }
+
+        HttpUtils.post({
+            url: paymentPath+getAvailablePaymentUrl,
+            params: {
+                // "locale": local.zh,;
+                "amount": totalAmount,
+                // "eserviceids": [
+                //     "<eserviceid>", "<eserviceid>"
+                // ],
+                "preferpaymentmethods": preferpaymentmethods
+            },
+            onSuccess: (responseData)=>{
+                let availableMethods = responseData.availablepaymentmethods;
+                setAvailableMethods(availableMethods);
+                if (availableMethods.length>0){
+                    availableMethods.forEach((method)=>{
+                        if(method.subtype === "FPS" ){
+                            setFPSStatus(method)
+                        }else if (method.subtype === "CreditCard"){
+                            method.supportedcard.forEach((supportedcard)=>{
+                                if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
+                                    setCreditCardStatus(method)
+                                } else {
+                                    if (supportedcard === "UnionPay"){
+                                        setUnionPayStatus(method)
+                                    }
+                                }
+                            })
+                        }else if (method.subtype === "PPS" ){
+                            setPPSStatus(method)
+                        }
+                    });
+                }
+            }
+        });
     }
 
     const getTransactionId = () => {

src/pages/Proof/Create_FromApp/ApplicationDetails.js

@@ -5,6 +5,7 @@ import {
     Stack,
     TextField,
     FormLabel,
+    Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -12,12 +13,12 @@ import { useFormik } from 'formik';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({formData}) => {
+const SearchPublicNoticeForm = ({ formData }) => {
 
     const [data, setData] = React.useState({});
 
     React.useEffect(() => {
-        if(formData)
+        if (formData)
             setData(formData);
     }, [formData]);
 
@@ -58,7 +59,9 @@ const SearchPublicNoticeForm = ({formData}) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Application Details
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Application Details
+                        </Typography>
                     </Grid>
                 </CardContent>
 

src/pages/Proof/Create_FromApp/GazetteDetails.js

@@ -4,6 +4,7 @@ import {
     CardContent,
     FormLabel,
     TextField,
+    Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -60,7 +61,9 @@ const GazetteDetails = ({ formData }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Gazette Details
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Gazette Details
+                        </Typography>
                     </Grid>
                 </CardContent>
 

src/pages/Proof/Create_FromApp/ProofForm.js

@@ -162,7 +162,9 @@ const FormPanel = ({ formData }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Proof
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Proof
+                        </Typography>
                     </Grid>
                 </CardContent>
 

src/pages/Proof/Create_FromApp/index.js

@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid,
+    Grid, Box, Stack, Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as UrlUtils from "utils/ApiPathConst";
@@ -14,7 +14,17 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails')));
 const GazetteDetails = Loadable(React.lazy(() => import('./GazetteDetails')));
 const ProofForm = Loadable(React.lazy(() => import('./ProofForm')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
@@ -44,7 +54,7 @@ const Index = () => {
                     responseData.data["faxNumber"] = JSON.parse(responseData.data.contactFaxNo).faxNumber;
                     responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;
 
-                    responseData.data["issueNoStr"] = responseData.data.issueVolume+"/"+responseData.data.issueYear+" No. "+responseData.data.issueNo
+                    responseData.data["issueNoStr"] = responseData.data.issueVolume + "/" + responseData.data.issueYear + " No. " + responseData.data.issueNo
                     responseData.data["issueDate"] = DateUtils.dateStr(responseData.data.issueDate);
 
                     responseData.data["groupType"] = responseData.data.groupNo.charAt(0);
@@ -58,44 +68,66 @@ const Index = () => {
         !onReady ?
             <LoadingComponent />
             :
+
             <Grid container sx={{ minHeight: '85vh', backgroundColor: '#eee' }} direction="column" spacing={1} >
-                {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
-                    <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}>
-                        <Grid item xs={12} md={12} lg={8}>
-                            <ApplicationDetails
-                                formData={record}
-                                style={{
-                                    display: "flex",
-                                    height: "100%",
-                                    flex: 1
-                                }}
-                            />
+                <MainCard
+                    elevation={0}
+                    border={false}
+                    content={false}>
+                        <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 Proof</Typography>
+                    </Stack>
+                </div>
+            </Grid>
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} lg={12}>
+                        <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}>
+                            <Grid item xs={12} md={12} lg={8}>
+                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                    <ApplicationDetails
+                                        formData={record}
+                                        style={{
+                                            display: "flex",
+                                            height: "100%",
+                                            flex: 1
+                                        }}
+                                    />
+                                </Box>
+                            </Grid>
+                            <Grid item xs={12} md={12} lg={4} >
+                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                    <GazetteDetails
+                                        formData={record}
+                                        style={{
+                                            display: "flex",
+                                            height: "100%",
+                                            flex: 1
+                                        }}
+                                    />
+                                </Box>
+                            </Grid>
                         </Grid>
-                        <Grid item xs={12} md={12} lg={4} >
-                            <GazetteDetails
+                    </Grid>
+                    {/*row 2*/}
+                    <Grid item xs={12} md={12} lg={12}>
+                        <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                        >
+                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+
+                            <ProofForm
                                 formData={record}
-                                style={{
-                                    display: "flex",
-                                    height: "100%",
-                                    flex: 1
-                                }}
                             />
-                        </Grid>
+                            </Box>
+                            <br/>
+                        </MainCard>
                     </Grid>
-                </Grid>
-                {/*row 2*/}
-                <Grid item xs={12} md={12} lg={12}>
-                    <MainCard elevation={0}
-                        border={false}
-                        content={false}
-                    >
-                        <ProofForm
-                            formData={record}
-                        />
-                    </MainCard>
-                </Grid>
+                </MainCard>
             </Grid>
+
     );
 };
 

src/pages/Proof/Reply_GLD/ApplicationDetails.js

@@ -16,7 +16,7 @@ const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import FileList from "components/FileList"
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const ApplicationDetailCard = ({ formData, }) => {
+const ApplicationDetailCard = ({ formData, setBackButtonPos }) => {
 
     const params = useParams();
 
@@ -63,10 +63,14 @@ const ApplicationDetailCard = ({ formData, }) => {
             minimumFractionDigits: 2
         });
     }
-
+    
+    React.useEffect(()=>{
+        if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 2}px`)
+    },[document.getElementById("applicationDetailsMainCard")])
 
     return (
-        <MainCard elevation={0}
+        <MainCard
+            id={"applicationDetailsMainCard"}
             border={false}
             content={false}
         >

src/pages/Proof/Reply_GLD/index.js

@@ -3,7 +3,8 @@ import {
     Grid,
     Typography,
     Stack,
-    Box
+    Box,
+    Button
 } from '@mui/material';
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
@@ -11,6 +12,7 @@ import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
 import { useParams } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
 
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
@@ -36,11 +38,11 @@ const Index = () => {
     const [record, setRecord] = React.useState();
     const [onReady, setOnReady] = React.useState(false);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         loadForm();
     }, []);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         setOnReady(true);
     }, [record]);
 
@@ -80,6 +82,26 @@ const Index = () => {
         return Array(+(zero > 0 && zero)).join("0") + num;
     }
 
+    // calculate back button position
+
+    // const applicationDetailsRef = React.useCallback(node => {
+    //     if (node === null) {
+    //         return
+    //     } else {
+    //         setBackButtonLeftPos(`${node.getBoundingClientRect()?.left}px`)
+    //     }
+    // })
+
+    const [backButtonPos, setBackButtonPos] = React.useState()
+    const backButtonRef = React.useRef()
+    React.useLayoutEffect(()=>{
+        // console.log(applicationDetailsRef.current?.getBoundingClientRect())
+        if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}`
+    },[backButtonPos])
+
+    // React.useEffect(()=>{
+    //     if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonLeftPos}`
+    // }, [backButtonLeftPos])
 
     return (
         !onReady ?
@@ -94,13 +116,20 @@ const Index = () => {
                                 </Stack>
                             </div>
                         </Grid>
+                        <Grid item xs={12} width="100%">
+                            <Button ref={backButtonRef} sx={{ml: backButtonPos, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/proof/search")}}>
+                                <KeyboardBackspaceOutlinedIcon/>
+                                <Typography variant="h4">Back</Typography>
+                            </Button>
+                        </Grid>
                         {/*row 1*/}
                         <Grid item xs={12} md={12} >
                             <Grid container justifyContent="flex-start" alignItems="center" >
                                 <center>
                                     <Grid item xs={12} md={12} sx={{ pt: 2 }}>
-                                        <Box xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
+                                        <Box  xs={12} md={12} sx={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}>
                                             <ApplicationDetails
+                                                setBackButtonPos={setBackButtonPos}
                                                 formData={record}
                                                 style={{
                                                     display: "flex",

src/pages/PublicNotice/Details_GLD/index.js

@@ -8,7 +8,8 @@ import {
   Grid,
   Typography,
   Stack,
-  Box
+  Box,
+  Button
 } from '@mui/material';
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -36,13 +37,14 @@ import {
 const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
 import * as DateUtils from "utils/DateUtils";
 import { notifyActionSuccess, notifySaveSuccess } from "utils/CommonFunction";
-
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import { useNavigate } from "react-router-dom";
 
 // ==============================|| Body - DEFAULT ||============================== //
 
 const PublicNoticeDetail_GLD = () => {
   const params = useParams();
-  // const navigate = useNavigate()
+  const navigate = useNavigate()
   const [applicationDetailData, setApplicationDetailData] = useState({});
   const [proofList, setProofList] = useState([]);
   // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
@@ -319,6 +321,12 @@ const PublicNoticeDetail_GLD = () => {
           </Stack>
         </div>
       </Grid>
+      <Grid item xs={12}>
+          <Button sx={{ml:3.5, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/application/search")}}>
+            <KeyboardBackspaceOutlinedIcon/>
+            <Typography variant="h4">Back</Typography>
+          </Button>
+      </Grid>
       <Grid item xs={12} >
         <Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
           <Typography ml={4} mt={3} variant="h4">{title}</Typography>
@@ -357,12 +365,13 @@ const PublicNoticeDetail_GLD = () => {
                 </Box>
               </Grid>
               <Grid item xs={12} md={10}>
-                <Box xs={12} ml={4} mt={3}>
+                <Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
                   <TabTableDetail
                     applicationDetailData={applicationDetailData}
                     proofList={proofList}
                   />
                 </Box>
+                <br/>
               </Grid>
             </Grid>
           </Grid>

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

@@ -21,10 +21,10 @@ const ProofTab = Loadable(lazy(() => import('./ProofTab')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const PublicNotice = ({applicationDetailData, proofList}) => {
+const PublicNotice = ({ applicationDetailData, proofList }) => {
     const [_proofList, setProofList] = React.useState([]);
     const [inProgressList,] = React.useState([]);
-    const [onReady,setOnReady] = React.useState(false);
+    const [onReady, setOnReady] = React.useState(false);
     const [selectedTab, setSelectedTab] = React.useState("1");
     // const navigate = useNavigate();
     const [statusHistoryList, setStatusHistoryList] = React.useState([]);
@@ -66,13 +66,13 @@ const PublicNotice = ({applicationDetailData, proofList}) => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '40vh'}}>
+            <Grid container sx={{ minHeight: '40vh' }}>
                 {/*col 2*/}
                 <Grid item xs={12}>
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={"Proof(" + (_proofList?.length?_proofList?.length:0) + ")"} value="1" />
+                                <Tab label={"Proof(" + (_proofList?.length ? _proofList?.length : 0) + ")"} value="1" />
                                 <Tab label={"Payment(" + inProgressList.length + ")"} value="2" />
                                 <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
                             </TabList>

src/pages/User/DetailPage/UserAuthTable.js

@@ -19,7 +19,24 @@ export default function UserAuthTable({setSelectedRow, userAuth,isNewRecord}) {
     const [authData, setAuthData] = useState([]);
     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,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
     useEffect(() => {
         axios.get(`${apiPath}${GET_AUTH_LIST}`)
             .then((response) => {
@@ -78,6 +95,7 @@ export default function UserAuthTable({setSelectedRow, userAuth,isNewRecord}) {
                         setCurrentSelectedRow(ids);
                     }}
                     autoHeight
+                    sx={_sx}
                 />
             </div>
     );

src/pages/User/DetailPage/UserAuthorityCard.js

@@ -4,7 +4,7 @@ import {
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import * as React from "react";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -16,7 +16,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewRecord}) => {
+const UserAuthorityCard = ({ isCollectData, updateUserAuthList, userData, isNewRecord }) => {
     const [currentAuthData, setCurrentAuthData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [selectedRow, setSelectedRow] = useState([]);
@@ -44,13 +44,13 @@ const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewReco
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3}}>
+                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                     User Authority
                 </Typography>
 
@@ -59,6 +59,7 @@ const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewReco
                     setSelectedRow={setSelectedRow}
                     isNewRecord={isNewRecord}
                 />
+                <br/>
             </MainCard>
     );
 };

src/pages/User/DetailPage/UserGroupCard.js

@@ -49,7 +49,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}
                       border={false}
                       content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3}}>
+                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black"}}>
                     Group(s)
                 </Typography>
                 <UserGroupTable
@@ -57,6 +57,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}
                     setSelectedRow={setSelectedRow}
                     isNewRecord={isNewRecord}
                 />
+                <br/>
             </MainCard>
     );
 };

src/pages/User/DetailPage/UserGroupTable.js

@@ -17,6 +17,25 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord})
     const [groupData, setGroupData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup);
+    
+    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,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
     useEffect(() => {
         axios.get(`${apiPath}${GET_GROUP_COMBO_PATH}`)
@@ -71,6 +90,7 @@ export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord})
                         setCurrentSelectedRow(ids);
                     }}
                     autoHeight
+                    sx={_sx}
                 />
             </div>
     );

src/pages/User/DetailPage/UserInformationCard.js

@@ -68,17 +68,16 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                       border={false}
                       content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
+                <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}}>
+                        <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'}}>
+                                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                     <FormLabel required>Username:</FormLabel>
                                 </Grid>
 

src/pages/User/DetailPage/index.js

@@ -1,15 +1,16 @@
 // material-ui
 import {
     Button,
-    Grid, 
+    Grid,
     Typography,
-    Stack
+    Stack,
+    Box,
 } from '@mui/material';
-import {useEffect, useState} from "react";
+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 { useNavigate, useParams } from "react-router-dom";
+import { GLD_USER_PATH, DELETE_USER, POST_ADMIN_USER_REGISTER } from "../../../utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -23,7 +24,18 @@ import {
     notifyDeleteSuccess,
     notifySaveSuccess,
 } from "../../../utils/CommonFunction";
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -34,8 +46,8 @@ const UserMaintainPage = () => {
     const [onReady, setOnReady] = useState(false);
     const [isCollectData, setIsCollectData] = useState(false);
     const [editedCustomerData, setEditedCustomerData] = useState({});
-    const [userGroupData,setUserGroupData] = useState([]);
-    const [userAuthData,setUserAuthData] = useState([]);
+    const [userGroupData, setUserGroupData] = useState([]);
+    const [userAuthData, setUserAuthData] = useState([]);
     const [userConfirm, setUserConfirm] = useState(false);
     const [isNewRecord, setIsNewRecord] = useState(false);
     const [refUserData, setRefUserData] = React.useState({});
@@ -45,11 +57,11 @@ const UserMaintainPage = () => {
         setEditedCustomerData(userData);
     }
 
-    function updateUserGroupList(userGroupData){
+    function updateUserGroupList(userGroupData) {
         setUserGroupData(userGroupData);
     }
 
-    function updateUserAuthList(userAuthData){
+    function updateUserAuthList(userAuthData) {
         setUserAuthData(userAuthData);
     }
 
@@ -68,7 +80,7 @@ const UserMaintainPage = () => {
         setIsWindowOpen(true);
     };
 
-    function deleteData(){
+    function deleteData() {
         axios.delete(`${DELETE_USER}/${params.id}`,
         )
             .then((response) => {
@@ -83,10 +95,10 @@ const UserMaintainPage = () => {
                 return false;
             });
     }
-// ==============================|| DELETE WINDOW RELATED ||============================== //
+    // ==============================|| DELETE WINDOW RELATED ||============================== //
 
     useEffect(() => {
-        if(params.id > 0 ){
+        if (params.id > 0) {
             axios.get(`${GLD_USER_PATH}/${params.id}`)
                 .then((response) => {
                     if (response.status === 200) {
@@ -99,7 +111,7 @@ const UserMaintainPage = () => {
                     return false;
                 });
         }
-        else{
+        else {
             setUserData(
                 {
                     "authIds": [],
@@ -123,18 +135,18 @@ const UserMaintainPage = () => {
         if (Object.keys(userData).length > 0 && userData !== undefined) {
             setOnReady(true);
         }
-        else if(isNewRecord){
+        else if (isNewRecord) {
             setOnReady(true);
         }
     }, [userData]);
 
     useEffect(() => {
-        if(userConfirm && onReady){
-            const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds,userAuthData);
-            const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds,userGroupData);
+        if (userConfirm && onReady) {
+            const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds, userAuthData);
+            const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds, userGroupData);
             // console.log(userGroupData)
             // console.log(userAuthData)
-            if( parseInt(params.id) >= -1){
+            if (parseInt(params.id) >= -1) {
                 axios.post(`${GLD_USER_PATH}/${params.id}`,
                     {
                         "enName": editedCustomerData.enName,
@@ -157,8 +169,8 @@ const UserMaintainPage = () => {
                     .catch(error => {
                         console.log(error);
                         return false;
-                });
-            }else{
+                    });
+            } else {
                 axios.post(POST_ADMIN_USER_REGISTER,
                     {
                         "username": editedCustomerData.username,
@@ -182,58 +194,72 @@ const UserMaintainPage = () => {
                     .catch(error => {
                         console.log(error);
                         return false;
-                });
+                    });
             }
         }
         setUserConfirm(false);
-    }, [editedCustomerData,userGroupData,userAuthData]);
+    }, [editedCustomerData, userGroupData, userAuthData]);
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '90vh'}}>
-                <Grid item xs={12} height='60px'>
-                    <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
-                        <Typography variant="h5">Maintain User</Typography>
-                    </Stack>
+            <Grid container sx={{ minHeight: '90vh' }}>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">{isNewRecord ? "Create GLD User" : "Maintain GLD User"}</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/userSearchview") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} md={5} lg={5}>
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <UserInformationCard
-                                updateUserObject={updateUserObject}
-                                userData={userData}
-                                isCollectData={isCollectData}
-                                isNewRecord={isNewRecord}
-                            />
+                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserInformationCard
+                                    updateUserObject={updateUserObject}
+                                    userData={userData}
+                                    isCollectData={isCollectData}
+                                    isNewRecord={isNewRecord}
+                                />
+                            </Box>
                         </Grid>
 
-                        <Grid item xs={12} md={12} lg={12} sx={{mt: 3}}>
-                            <UserGroupCard
-                                updateUserGroupList={updateUserGroupList}
-                                userData={userData}
-                                isCollectData={isCollectData}
-                                isNewRecord={isNewRecord}
-                            />
+                        <Grid item xs={12} md={12} lg={12} sx={{ mt: 3 }}>
+                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserGroupCard
+                                    updateUserGroupList={updateUserGroupList}
+                                    userData={userData}
+                                    isCollectData={isCollectData}
+                                    isNewRecord={isNewRecord}
+                                />
+                            </Box>
                         </Grid>
                     </Grid>
                 </Grid>
                 {/*col 2*/}
                 <Grid item xs={12} md={7} lg={7}>
-                    <UserAuthorityCard
-                        updateUserAuthList={updateUserAuthList}
-                        userData={userData}
-                        isCollectData={isCollectData}
-                        isNewRecord={isNewRecord}
-                    />
+                    <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                        <UserAuthorityCard
+                            updateUserAuthList={updateUserAuthList}
+                            userData={userData}
+                            isCollectData={isCollectData}
+                            isNewRecord={isNewRecord}
+                        />
+                    </Box>
                 </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={{ mb: 3 }} alignItems={"end"} justifyContent="center">
                     <Grid container maxWidth justifyContent="flex-end">
-                        <Grid item sx={{ml:3, mr:3, mb:3}}>
+                        <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -255,7 +281,7 @@ const UserMaintainPage = () => {
                             />
                         </Grid>
 
-                        <Grid item sx={{ml: 3, mr: 3}}>
+                        <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid, Button
+    Grid, Button, Typography
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import * as React from "react";
@@ -142,8 +142,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
             {!onReady ?
                 <LoadingComponent />
                 :
-                <form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>
-
+                <form onSubmit={formik.handleSubmit} style={{ padding: 12 }}>
                     {/*top button*/}
                     <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
                         <Grid container maxWidth justifyContent="flex-start">
@@ -200,9 +199,10 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         </Grid>
                     </Grid>
                     {/*end top button*/}
-
-                    <Grid container spacing={1}>
-
+                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                        Individual User Details
+                    </Typography>
+                    <Grid container spacing={1} sx={{ mt: 3, ml: 3, mb: 2, mr: 3}}>
                         <Grid item lg={4}>
                             {FieldUtils.getTextField({
                                 label: "Username:",

src/pages/User/DetailsPage_Individual/index.js

@@ -1,15 +1,27 @@
 // material-ui
 import * as React from "react";
 
-import {Grid, Typography} from '@mui/material';
+import { Grid, Typography, Button, Stack, Box } from '@mui/material';
 import FileList from "../../../components/FileList"
 import MainCard from "../../../components/MainCard";
 import * as HttpUtils from "../../../utils/HttpUtils";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
 import * as UrlUtils from "../../../utils/ApiPathConst";
 import * as DateUtils from '../../../utils/DateUtils';
-
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 import Loadable from 'components/Loadable';
+import { useNavigate } from "react-router-dom";
 const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
 const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));
 
@@ -19,42 +31,61 @@ const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationC
 
 const UserMaintainPage_Individual = () => {
     const params = useParams();
-    const [formData, setFormData]  = React.useState({})
+    const navigate = useNavigate();
+    const [formData, setFormData] = React.useState({})
     const [isLoading, setLoding] = React.useState(true);
 
+    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,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
-    React.useEffect(()=>{
+    React.useEffect(() => {
         loadData();
-    },[]);
+    }, []);
 
-    const loadData = ()=>{
+    const loadData = () => {
         setLoding(true);
         HttpUtils.get({
             url: `${UrlUtils.GET_IND_USER_PATH}/${params.id}`,
-            onSuccess: function(response){
+            onSuccess: function (response) {
                 response.data["address"] = JSON.parse(response.data["address"]);
                 response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
                 response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
 
                 let createDate = DateUtils.datetimeStr(response.data.created);
-                let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy;
+                let modifiedBy = DateUtils.datetimeStr(response.data.modified) + ", " + response.data.modifiedBy;
                 response.data["createDate"] = createDate;
                 response.data["modifieDate"] = modifiedBy;
-                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verified";
-        
+                response.data["verifiedStatus"] = response.data.verifiedBy ? DateUtils.datetimeStr(response.data.verifiedDate) + ", " + response.data.verifiedByName : "Not verified";
+
                 response.data["country"] = response.data.address?.country;
                 response.data["district"] = response.data.address?.district;
                 response.data["addressLine1"] = response.data.address?.addressLine1;
                 response.data["addressLine2"] = response.data.address?.addressLine2;
                 response.data["addressLine3"] = response.data.address?.addressLine3;
-        
+
                 response.data["phoneNumber"] = response.data.mobileNumber?.phoneNumber;
                 response.data["tel_countryCode"] = response.data.mobileNumber?.countryCode;
-        
+
                 response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                 response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
-        
-                response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLogin):"";
+
+                response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLogin) : "";
 
                 setFormData(response.data);
             }
@@ -63,37 +94,52 @@ const UserMaintainPage_Individual = () => {
 
 
     React.useEffect(() => {
-       setLoding(false);
+        setLoding(false);
     }, [formData]);
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Individual User Details</Typography>
+            <Grid container>
+                <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 Individual User</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/indUser") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <UserInformationCard
-                                formData={formData}
-                                loadDataFun={loadData}
-                            />
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserInformationCard
+                                    formData={formData}
+                                    loadDataFun={loadData}
+                                />
+                            </Box>
                         </Grid>
                         <Grid item xs={12} md={12} lg={12}>
-                        <MainCard elevation={0} border={false} content={false}>
-                        <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
-                            Files
-                        </Typography>
-                            <FileList sx={{mt: 3, ml: 3, mb: 1}}
-                                refId={params.id}
-                                refType={"identification"}
-                            />
-                        </MainCard>
-                    </Grid>
+                            <MainCard elevation={0} border={false} content={false}>
+                                <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }} style={{ padding: 12 }}>
+                                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                                        Files
+                                    </Typography>
+                                    <FileList sx={_sx}
+                                        refId={params.id}
+                                        refType={"identification"}
+                                    />
+                                </Box>
+                            </MainCard>
+                            <br/>
+                        </Grid>
                     </Grid>
                 </Grid>
                 {/*col 2*/}

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -165,22 +165,20 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
         setIsConfirmPopUp(true);
     };
 
-
     return (
         <MainCard elevation={0}
             border={false}
             content={false}
         >
 
-            {!onReady?
-            <LoadingComponent />
-            :
+            {!onReady ?
+                <LoadingComponent />
+                :
                 <form onSubmit={formik.handleSubmit}>
 
                     {/*top button*/}
-                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
+                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3, mt: 2 }} alignItems={"start"} justifyContent="center">
                         <Grid container maxWidth justifyContent="flex-start">
-
                             {editMode ?
                                 <>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
@@ -236,6 +234,9 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                     </Grid>
                     {/*end top button*/}
                     <div style={{ paddingLeft: 24, paddingRight: 24 }}>
+                        <Typography variant="h5" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                            Organization User Details
+                        </Typography>
                         <Grid container spacing={1}>
                             <Grid item lg={4}>
                                 {FieldUtils.getTextField({
@@ -312,8 +313,8 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                         );
                                         return displayOptions;
                                     },
-                                    getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? 
-                                        <div>BR No.: {item["brNo"]}<div>Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}</div><div>Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}</div></div>: "") 
+                                    getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ?
+                                        <div>BR No.: {item["brNo"]}<div>Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}</div><div>Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}</div></div> : "")
                                         : "",
                                     isOptionEqualToValue: (option, newValue, setValue, setInputValue) => {
                                         if (option.id == newValue || option.id == newValue.id) {
@@ -324,7 +325,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                         return option == newValue || option.id == newValue.id;
                                     },
                                     onInputChange: (event, newValue, setInputValue) => {
-                                        if (newValue !== "[object Object]" ) {
+                                        if (newValue !== "[object Object]") {
                                             setInputValue(newValue);
                                         }
                                     },
@@ -449,28 +450,18 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                         </Button>
                                                     </Grid>
                                                 }
-
                                             </>
                                     }
-
-
-
                                 </Grid>
                             </Grid>
                         </Grid>
-
                     </div>
+                    <br/>
                     <div style={{ paddingLeft: 24, paddingRight: 24 }}>
                         <Grid container spacing={1} >
-
-                            <Grid item lg={12} >
+                            <Grid item lg={12}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item lg={1} >
-                                        <Typography variant="h5" sx={{ display: 'flex', alignItems: 'center' }}>
-                                            Organization
-                                        </Typography>
-                                    </Grid>
-                                    {currentUserData.orgId==null?
+                                    {currentUserData.orgId == null ?
                                         <Grid item lg={2} >
                                             <Button variant="contained"
                                                 onClick={createOrgClick}
@@ -478,11 +469,15 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                 Create Organization
                                             </Button>
                                         </Grid>
-                                        :null
+                                        : null
                                     }
                                 </Grid>
                             </Grid>
-
+                            <Grid item lg={12} >
+                                <Typography variant="h5" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                                    Organization
+                                </Typography>
+                            </Grid>
                             <Grid item lg={4}>
                                 {FieldUtils.getTextField({
                                     label: "Org.Name (English):",
@@ -587,7 +582,6 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                 </Dialog>
             </div>
         </MainCard>
-
     );
 };
 

src/pages/User/DetailsPage_Organization/index.js

@@ -1,10 +1,10 @@
 // material-ui
-import {Grid, Typography} from '@mui/material';
-import {useEffect, useState} from "react";
+import { Grid, Typography, Stack, Box, Button } from '@mui/material';
+import { useEffect, useState } from "react";
 import * as React from "react";
 //import axios from "axios";
 import * as HttpUtils from "../../../utils/HttpUtils";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
 import FileList from "../../../components/FileList"
 import MainCard from "../../../components/MainCard";
 import * as UrlUtils from "../../../utils/ApiPathConst";
@@ -14,74 +14,105 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Organization')));
-
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import { useNavigate } from 'react-router-dom';
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const UserMaintainPage_Organization = () => {
     const params = useParams();
-    const [userData, setUserData]  = useState({})
-    const [orgData, setOrgData]  = useState({})
+    const navigate = useNavigate();
+    const [userData, setUserData] = useState({})
+    const [orgData, setOrgData] = useState({})
     const [isLoading, setLoding] = useState(true);
 
+    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,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
-    useEffect(()=>{
+    useEffect(() => {
         // console.log(userData);
         loadData();
-    },[]);
+    }, []);
 
     // const reloadPage=()=>{
     //     window.location.reload(false);
     // }
 
-    const loadData = ()=>{
+    const loadData = () => {
         setLoding(true);
         HttpUtils.get({
             url: `${UrlUtils.GET_ORG_USER_PATH}/${params.id}`,
-            onSuccess: function(response){
+            onSuccess: function (response) {
                 console.log(response)
-                if(response.data.orgId !=null){
+                if (response.data.orgId != null) {
                     response.data["addressBus"] = response.orgDetail.data["addressTemp"];
                     response.data["contactTel"] = response.orgDetail.data["contactTel"];
                     response.data["faxNo"] = response.orgDetail.data["faxNo"];
 
-                    response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate?DateUtils.dateStr(response.orgDetail.data.brExpiryDate):"";
+                    response.data["brExpiryDate"] = response.orgDetail.data.brExpiryDate ? DateUtils.dateStr(response.orgDetail.data.brExpiryDate) : "";
                     response.data["brNo"] = response.orgDetail.data.brNo;
                     response.data["enCompanyName"] = response.orgDetail.data.enCompanyName;
                     response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
                     response.data["chCompanyName"] = response.orgDetail.data.chCompanyName;
-                }else{
+                } else {
                     response.data["addressBus"] = JSON.parse(response.data["addressBus"]);
                     response.data["contactTel"] = JSON.parse(response.data["contactTel"]);
                     response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
 
-                    response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
+                    response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
                 }
 
                 let createDate = DateUtils.datetimeStr(response.data.created);
-                let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy;
+                let modifiedBy = DateUtils.datetimeStr(response.data.modified) + ", " + response.data.modifiedBy;
                 response.data["createDate"] = createDate;
                 response.data["modifieDate"] = modifiedBy;
-                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verified";
-        
-                response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLoginDate):"";
-        
+                response.data["verifiedStatus"] = response.data.verifiedBy ? DateUtils.datetimeStr(response.data.verifiedDate) + ", " + response.data.verifiedByName : "Not verified";
+
+                response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLoginDate) : "";
+
                 response.data["country"] = response.data.addressBus?.country;
                 response.data["district"] = response.data.addressBus?.district;
                 response.data["addressLine1"] = response.data.addressBus?.addressLine1;
                 response.data["addressLine2"] = response.data.addressBus?.addressLine2;
                 response.data["addressLine3"] = response.data.addressBus?.addressLine3;
-        
+
                 response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
                 response.data["tel_countryCode"] = response.data.contactTel?.countryCode;
-        
+
                 response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                 response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
-        
+
                 //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
 
-                
+
                 setUserData(response.data);
                 setOrgData(response.orgList);
             }
@@ -90,37 +121,53 @@ const UserMaintainPage_Organization = () => {
 
 
     useEffect(() => {
-       setLoding(false);
+        setLoding(false);
     }, [userData]);
 
     return (
         isLoading ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">Organization User Details</Typography>
+            <Grid container>
+                <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 Organization User</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/orgUser") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <UserInformationCard
-                                userData={userData}
-                                loadDataFun={loadData}
-                                orgData={orgData}
-                            />
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserInformationCard
+                                    userData={userData}
+                                    loadDataFun={loadData}
+                                    orgData={orgData}
+                                />
+                                <br/>
+                            </Box>
                         </Grid>
                         <Grid item xs={12} md={12} lg={12}>
-                            <MainCard elevation={0} border={false} content={false}>
-                            <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
-                                Files
-                            </Typography>
-                                <FileList sx={{mt: 3, ml: 3, mb: 1}}
-                                    refId={params.id}
-                                    refType={"identification"}
-                                />
-                            </MainCard>
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <MainCard elevation={0} border={false} content={false}>
+                                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 1 }}>
+                                        Files
+                                    </Typography>
+                                    <FileList sx={_sx}
+                                        refId={params.id}
+                                        refType={"identification"}
+                                    />
+                                </MainCard>
+                            </Box>
+                            <br/>
                         </Grid>
                     </Grid>
                 </Grid>

src/pages/User/SearchPage/UserSearchForm.js

@@ -6,21 +6,22 @@ import {
     Typography
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
-import {useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 
 import {
     // useEffect,
-    useState} from "react";
+    useState
+} from "react";
 
 import Checkbox from "@mui/material/Checkbox";
 import * as React from "react";
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import {useNavigate} from "react-router";
+import { useNavigate } from "react-router";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserSearchForm = ({applySearch}) => {
+const UserSearchForm = ({ applySearch }) => {
     const navigate = useNavigate();
 
     const [type, setType] = useState([]);
@@ -32,7 +33,7 @@ const UserSearchForm = ({applySearch}) => {
 
         let typeArray = [];
 
-        for(let i =0; i < type.length; i++){
+        for (let i = 0; i < type.length; i++) {
             typeArray.push(type[i].label);
         }
 
@@ -48,21 +49,22 @@ const UserSearchForm = ({applySearch}) => {
     };
 
 
-    function resetForm(){
+    function resetForm() {
         setType([]);
         setLocked(false);
         reset();
     }
 
-    const handleNewUserClick = (id) => {
+    const handleNewUserClick = () => {
         // console.log(id)
-        navigate('/user/'+ id);
+        navigate('/user/-1');
+        // navigate('/user/' + id);
     };
 
     return (
         <MainCard xs={12} md={12} lg={12}
-                  border={false}
-                  content={false}>
+            border={false}
+            content={false}>
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
@@ -74,7 +76,7 @@ const UserSearchForm = ({applySearch}) => {
 
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("userName")}
@@ -83,7 +85,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("fullenName")}
@@ -92,7 +94,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("post")}
@@ -101,7 +103,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("email")}
@@ -110,7 +112,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("phone")}
@@ -119,7 +121,7 @@ const UserSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <FormControlLabel
                             control={
                                 <Checkbox
@@ -139,8 +141,7 @@ const UserSearchForm = ({applySearch}) => {
                 <Grid container direction="row"
                     justifyContent="space-between"
                     alignItems="center">
-                       
-                    <Grid item xs={3} md={3} sx={{ml:1, mr:1, mb:3, mt:3}}>
+                    <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
                         <Button
                             size="large"
                             variant="contained"
@@ -149,13 +150,13 @@ const UserSearchForm = ({applySearch}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            <AddCircleOutlineIcon/>
+                            <AddCircleOutlineIcon />
                             New User
                         </Button>
                     </Grid>
-                    <Grid item xs={8} md={8} sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Grid container >
-                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                    <Grid item xs={8} md={8} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Grid container maxWidth justifyContent="flex-end">
+                            <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                                 <Button
                                     size="large"
                                     variant="contained"
@@ -168,7 +169,7 @@ const UserSearchForm = ({applySearch}) => {
                                 </Button>
                             </Grid>
 
-                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                            <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                                 <Button
                                     size="large"
                                     variant="contained"

src/pages/User/SearchPage/index.js

@@ -16,7 +16,17 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./UserSearchForm')));
 const EventTable = Loadable(lazy(() => import('./UserTable')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSettingPage = () => {
@@ -25,15 +35,17 @@ const UserSettingPage = () => {
     const [onReady, setOnReady] = useState(false);
     const [changelocked, setChangeLocked] = React.useState(false);
 
-    useEffect(() => {
+    React.useLayoutEffect(() => {
         getUserList();
     }, [changelocked]);
 
     useEffect(() => {
-        setOnReady(true);
+        if (record.length > 0) {
+            setOnReady(true);
+        }
     }, [record]);
 
-    useEffect(() => {
+    React.useLayoutEffect(() => {
         getUserList();
     }, [searchCriteria]);
 
@@ -60,16 +72,14 @@ const UserSettingPage = () => {
         !onReady ?
             <LoadingComponent/>
             :
-        <Grid container sx={{minHeight: '90vh'}}>
-            <Grid item xs={12} md={12} lg={12}>
-                    <Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}>
-                        <Grid item xs={2} height='50px'>
-                            <Stack direction="row" height='100%' justifyContent="space-between" alignItems="center">
-                                <Typography align="center" variant="h5">View User</Typography>
-                            </Stack>
-                        </Grid>
-                    </Grid>
-                </Grid>
+        <Grid container sx={{minHeight: '90vh'}} 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">View GLD User</Typography>
+                    </Stack>
+                </div>
+            </Grid>
 
             {/*row 1*/}
             <Grid item xs={12} md={12} lg={12}>

src/pages/User/SearchPage_Individual/index.js

@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid, Typography
+    Grid, Typography, Stack
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import {useEffect, useState} from "react";
@@ -18,7 +18,17 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Individual')));
 const EventTable = Loadable(lazy(() => import('./UserTable_Individual')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Individual = () => {
@@ -57,10 +67,14 @@ const UserSearchPage_Individual = () => {
         !onReady ?
             <LoadingComponent/>
             :
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            <Grid item xs={12} sx={{mb: -2.25}}>
-                <Typography variant="h5">View Individual User</Typography>
-            </Grid>
+        <Grid container>
+        <Grid item xs={12}>
+        <div style={BackgroundHead}>
+            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                <Typography ml={15} color='#FFF' variant="h4">View Individual User</Typography>
+            </Stack>
+        </div>
+    </Grid>
 
             {/*row 1*/}
             <Grid item xs={12} md={12} lg={12}>

src/pages/User/SearchPage_Organization/index.js

@@ -1,9 +1,9 @@
 // material-ui
 import {
-    Grid, Typography
+    Grid, Typography, Stack
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 //import axios from "axios";
 //import {apiPath} from "../../auth/utils";
 import * as UrlUtils from "../../../utils/ApiPathConst";
@@ -18,13 +18,23 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Organization')));
 const EventTable = Loadable(lazy(() => import('./UserTable_Organization')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Organization = () => {
 
-    const [record,setRecord] = useState([]);
+    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
 
@@ -40,11 +50,11 @@ const UserSearchPage_Organization = () => {
         getUserList();
     }, [searchCriteria]);
 
-    function getUserList(){
+    function getUserList() {
         HttpUtils.get({
             url: UrlUtils.GET_ORG_USER_PATH,
             params: searchCriteria,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 setRecord(responseData);
             }
         });
@@ -56,31 +66,34 @@ const UserSearchPage_Organization = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            <Grid item xs={12} sx={{mb: -2.25}}>
-                <Typography variant="h5">View Organization User</Typography>
-            </Grid>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">View Organization User</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm applySearch={applySearch} />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
 
-            {/*row 1*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <SearchForm applySearch={applySearch}/>
-            </Grid>
-            {/*row 2*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <MainCard elevation={0}
-                          border={false}
-                          content={false}
-                >
-                    <EventTable
-                        recordList={record}
-                    />
-                </MainCard>
             </Grid>
 
-        </Grid>
-
     );
 };
 

src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js

@@ -14,7 +14,6 @@ const GroupAuthTable = Loadable(lazy(() => import('./GroupAuthTable')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-
 const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRecord}) => {
     const [currentAuthData, setCurrentAuthData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
@@ -55,7 +54,7 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRec
                       border={false}
                       content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3}}>
+                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                     User Authority
                 </Typography>
 

src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js

@@ -20,6 +20,25 @@ export default function GroupAuthTable({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,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
     useEffect(() => {
         axios.get(`${apiPath}${GET_GROUP_AUTH_LIST}`)
             .then((response) => {
@@ -77,7 +96,8 @@ export default function GroupAuthTable({setSelectedRow, userAuth,isNewRecord}) {
                         setSelectedRow(ids);
                         setCurrentSelectedRow(ids);
                     }}
-                    autoHeight 
+                    autoHeight
+                    sx={_sx}
                 />
             </div>
     );

src/pages/pnspsUserGroupDetailPage/UserAddCard.js

@@ -6,12 +6,12 @@ import {
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import * as React from "react";
-import {useEffect, useState} from "react";
-import {GET_GROUP_MEMBER_LIST_PATH, GET_USER_GLD_COMBO_LIST} from "../../utils/ApiPathConst";
+import { useEffect, useState } from "react";
+import { GET_GROUP_MEMBER_LIST_PATH, GET_USER_GLD_COMBO_LIST } from "../../utils/ApiPathConst";
 import axios from "axios";
-import {apiPath} from "../../auth/utils";
+import { apiPath } from "../../auth/utils";
 import Autocomplete from "@mui/material/Autocomplete";
-import {getIdList} from "../../utils/CommonFunction";
+import { getIdList } from "../../utils/CommonFunction";
 
 //import LoadingComponent from "../extra-pages/LoadingComponent";
 //import UserAddTable from "./UserAddTable";
@@ -23,7 +23,7 @@ const UserAddTable = Loadable(lazy(() => import('./UserAddTable')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord}) => {
+const UserAddCard = ({ isCollectData, updateGroupMember, userGroupData, isNewRecord }) => {
     const [currentUserData, setCurrentUserData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [groupUserData, setGroupUserData] = useState([]);
@@ -31,10 +31,10 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
     const [selectedUser, setSelectedUser] = useState(null);
     const [deletedList, setDeletedList] = useState([]);
 
-    function updateUserList (){
+    function updateUserList() {
         const idList = getIdList(groupUserData);
-        if(selectedUser!==null){
-            if(!idList.includes(selectedUser.id)){
+        if (selectedUser !== null) {
+            if (!idList.includes(selectedUser.id)) {
                 const userList = [...groupUserData, selectedUser];
                 setGroupUserData(userList);
                 console.log(userList);
@@ -64,11 +64,11 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        if(isNewRecord){
+        if (isNewRecord) {
             setOnReady(true);
         }
-        else{
-            if (Object.keys(userGroupData).length > 0 &&currentUserData !== undefined) {
+        else {
+            if (Object.keys(userGroupData).length > 0 && currentUserData !== undefined) {
                 axios.get(`${apiPath}${GET_GROUP_MEMBER_LIST_PATH}?id=${userGroupData.data.id}`)
                     .then((response) => {
                         if (response.status === 200) {
@@ -87,27 +87,27 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
     useEffect(() => {
         //upload latest data to parent
         updateGroupMember({
-            "currentList" : groupUserData,
-            "deletedList" : deletedList
+            "currentList": groupUserData,
+            "deletedList": deletedList
         });
     }, [isCollectData]);
 
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3}}>
+                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                     User(s)
                 </Typography>
-                <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mt: 2}}>
+                <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mt: 2 }}>
                     <Grid container alignItems={"center"}>
                         <Grid item xs={3} s={3} md={2} lg={2}
-                              sx={{display: 'flex', alignItems: 'center'}}>
+                            sx={{ display: 'flex', alignItems: 'center' }}>
                             User:
                         </Grid>
                         <Grid item xs={6} s={5} md={5} lg={5}>
@@ -123,7 +123,7 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
                                 renderInput={(params) => <TextField {...params} />}
                             />
                         </Grid>
-                        <Grid item xs={3} s={3} md={4} lg={4} sx={{ml: 3}}>
+                        <Grid item xs={3} s={3} md={4} lg={4} sx={{ ml: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -139,12 +139,15 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
                         </Grid>
                     </Grid>
                 </Grid>
-
-                <UserAddTable
-                    setGroupUserData={setGroupUserData}
-                    setDeletedList={setDeletedList}
-                    userList={groupUserData}
-                />
+                <Grid container>
+                    <Grid item xs={12} sx={{mt:3}}>
+                        <UserAddTable
+                            setGroupUserData={setGroupUserData}
+                            setDeletedList={setDeletedList}
+                            userList={groupUserData}
+                        />
+                    </Grid>
+                </Grid>
             </MainCard>
     );
 };

src/pages/pnspsUserGroupDetailPage/UserAddTable.js

@@ -18,6 +18,24 @@ export default function UserAddTable({setGroupUserData, userList,setDeletedList}
     const [groupData, setGroupData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [localDeletedList, setLocalDeletedList] = React.useState([]);
+    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,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
     useEffect(() => {
         setGroupData(userList);
@@ -95,6 +113,7 @@ export default function UserAddTable({setGroupUserData, userList,setDeletedList}
                     pageSizeOptions={[3, 5]}
                     pageSize={20}
                     autoHeight={true}
+                    sx={_sx}
                 />
             </div>
     );

src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js

@@ -4,8 +4,8 @@ import {
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import * as React from "react";
-import {useForm} from "react-hook-form";
-import {useEffect, useState} from "react";
+import { useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
 //import LoadingComponent from "../extra-pages/LoadingComponent";
 //import {useParams} from "react-router-dom";
 import Loadable from 'components/Loadable';
@@ -14,11 +14,11 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) => {
+const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData }) => {
     //const params = useParams();
     const [currentUserGroupData, setCurrentUserGroupData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
-    const {register, getValues} = useForm()
+    const { register, getValues } = useForm()
 
     useEffect(() => {
         //if user data from parent are not null
@@ -29,7 +29,7 @@ const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) =>
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        if (Object.keys(userGroupData).length > 0 &&currentUserGroupData !== undefined) {
+        if (Object.keys(userGroupData).length > 0 && currentUserGroupData !== undefined) {
             setOnReady(true);
         }
     }, [currentUserGroupData]);
@@ -37,7 +37,7 @@ const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) =>
     useEffect(() => {
         //upload latest data to parent
         const values = getValues();
-        const objectData ={
+        const objectData = {
             ...values,
         }
         updateGroupObject(objectData);
@@ -46,22 +46,22 @@ const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) =>
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
-                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
+                <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}}>
+                        <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'}}>
+                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                     User Group Name:
                                 </Grid>
 
@@ -79,10 +79,10 @@ const UserGroupInfoCard = ({isCollectData, updateGroupObject,userGroupData}) =>
                             </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, mb: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, mb:3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ ml: 3, mr: 3, mb: 3, display: 'flex', alignItems: 'center' }}>
                                     User Group Description:
                                 </Grid>
 

src/pages/pnspsUserGroupDetailPage/index.js

@@ -1,13 +1,13 @@
 // material-ui
 import {
     Button,
-    Grid, Typography
+    Grid, Typography, Stack, Box
 } from '@mui/material';
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import * as React from "react";
 import axios from "axios";
-import {apiPath} from "../../auth/utils";
-import {useParams} from "react-router-dom";
+import { apiPath } from "../../auth/utils";
+import { useParams } from "react-router-dom";
 import {
     GeneralConfirmWindow,
     getDeletedRecordWithRefList,
@@ -16,7 +16,7 @@ import {
     // notifyDeleteSuccess,
     notifySaveSuccess
 } from "../../utils/CommonFunction";
-import {POST_AND_UPDATE_USER_GROUP,GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
+import { POST_AND_UPDATE_USER_GROUP, GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -24,9 +24,19 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard')));
 const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard')));
 const UserAddCard = Loadable(lazy(() => import('./UserAddCard')));
-import {useNavigate} from "react-router";
-
+import { useNavigate } from "react-router";
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -37,8 +47,8 @@ const UserMaintainPage = () => {
     const [onReady, setOnReady] = useState(false);
     const [isCollectData, setIsCollectData] = useState(false);
     const [editedGroupData, setEditedGroupData] = useState({});
-    const [userGroupData,setUserGroupData] = useState([]);
-    const [userAuthData,setUserAuthData] = useState([]);
+    const [userGroupData, setUserGroupData] = useState([]);
+    const [userAuthData, setUserAuthData] = useState([]);
     const [userConfirm, setUserConfirm] = useState(false);
     const [groupMember, setGroupMember] = useState([]);
     const [isNewRecord, setIsNewRecord] = useState(false);
@@ -54,7 +64,7 @@ const UserMaintainPage = () => {
         setIsWindowOpen(true);
     };
 
-    function deleteData(){
+    function deleteData() {
         axios.delete(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`,
         )
             .then((response) => {
@@ -74,12 +84,12 @@ const UserMaintainPage = () => {
         setEditedGroupData(groupData);
     }
 
-    function updateGroupMember(groupMember){
+    function updateGroupMember(groupMember) {
         setGroupMember(groupMember.currentList);
         setDeletedUserList(groupMember.deletedList);
     }
 
-    function updateUserAuthList(userAuthData){
+    function updateUserAuthList(userAuthData) {
         setUserAuthData(userAuthData.currentList);
         setDeletedAuthList(userAuthData.deletedList);
     }
@@ -90,7 +100,7 @@ const UserMaintainPage = () => {
     }
 
     useEffect(() => {
-        if(params.id > 0 ){
+        if (params.id > 0) {
             axios.get(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`)
                 .then((response) => {
                     if (response.status === 200) {
@@ -102,7 +112,7 @@ const UserMaintainPage = () => {
                     return false;
                 });
         }
-        else{
+        else {
             //new record case
             setUserGroupData(
                 {
@@ -120,19 +130,19 @@ const UserMaintainPage = () => {
         if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) {
             setOnReady(true);
         }
-        else if(isNewRecord){
+        else if (isNewRecord) {
             setOnReady(true);
         }
     }, [userGroupData]);
 
     useEffect(() => {
-        if(userConfirm && onReady){
+        if (userConfirm && onReady) {
             //avoid delete and add user at the same time
             let finalDeletedUserList = getDeletedRecordWithRefList(deletedUserList, getIdList(groupMember));
             console.log(finalDeletedUserList)
             axios.post(POST_AND_UPDATE_USER_GROUP,
                 {
-                    "id": parseInt(params.id) !== -1? parseInt(params.id) : null,
+                    "id": parseInt(params.id) !== -1 ? parseInt(params.id) : null,
                     "name": editedGroupData.userGroupName,
                     "description": editedGroupData.description,
                     "addUserIds": getIdList(groupMember),
@@ -153,52 +163,68 @@ const UserMaintainPage = () => {
                 });
         }
         setUserConfirm(false);
-    }, [editedGroupData,userGroupData,userAuthData]);
+    }, [editedGroupData, userGroupData, userAuthData]);
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{mb: -2.25}}>
-                    <Typography variant="h5">{isNewRecord? "Create User Group" : "Maintain User Group"}</Typography>
+            <Grid container>
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">{isNewRecord ? "Create User Group" : "Maintain User Group"}</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                <Grid item xs={12}>
+                    <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/usergroupSearchview") }}>
+                        <KeyboardBackspaceOutlinedIcon />
+                        <Typography variant="h4">Back</Typography>
+                    </Button>
                 </Grid>
                 {/*col 1*/}
                 <Grid item xs={12} md={5} lg={5}>
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <UserGroupInfoCard
-                                updateGroupObject={updateGroupObject}
-                                userGroupData={userGroupData}
-                                isCollectData={isCollectData}
-                                isNewRecord={isNewRecord}
-                            />
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserGroupInfoCard
+                                    updateGroupObject={updateGroupObject}
+                                    userGroupData={userGroupData}
+                                    isCollectData={isCollectData}
+                                    isNewRecord={isNewRecord}
+                                />
+                            </Box>
                         </Grid>
 
-                        <Grid item xs={12} md={12} lg={12} sx={{mt:3}}>
-                            <UserAddCard
-                                updateGroupMember={updateGroupMember}
-                                userGroupData={userGroupData}
-                                isCollectData={isCollectData}
-                                isNewRecord={isNewRecord}
-                            />
+                        <Grid item xs={12} md={12} lg={12} sx={{ mt: 3 }}>
+                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                <UserAddCard
+                                    updateGroupMember={updateGroupMember}
+                                    userGroupData={userGroupData}
+                                    isCollectData={isCollectData}
+                                    isNewRecord={isNewRecord}
+                                />
+                            </Box>
                         </Grid>
                     </Grid>
                 </Grid>
                 {/*col 2*/}
                 <Grid item xs={12} md={7} lg={7}>
-                    <GroupAuthCard
-                        updateUserAuthList={updateUserAuthList}
-                        userGroupData={userGroupData}
-                        isCollectData={isCollectData}
-                        isNewRecord={isNewRecord}
-                    />
+                    <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                        <GroupAuthCard
+                            updateUserAuthList={updateUserAuthList}
+                            userGroupData={userGroupData}
+                            isCollectData={isCollectData}
+                            isNewRecord={isNewRecord}
+                        />
+                    </Box>
                 </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={{ mb: 3 }} alignItems={"end"} justifyContent="center">
                     <Grid container maxWidth justifyContent="flex-end">
-                        <Grid item sx={{ml:3, mr:3, mb:3}}>
+                        <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"
@@ -220,7 +246,7 @@ const UserMaintainPage = () => {
                             />
                         </Grid>
 
-                        <Grid item sx={{ml: 3, mr: 3}}>
+                        <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button
                                 size="large"
                                 variant="contained"

src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js

@@ -63,13 +63,11 @@ const UserGroupSearchForm = ({applySearch}) => {
                     </Grid>
                 </Grid>
 
-
                 {/*last row*/}
                 <Grid container direction="row"
                     justifyContent="space-between"
                     alignItems="center">
-                       
-                    <Grid item xs={3} md={3} sx={{ml:1, mr:1, mb:3, mt:3}}>
+                    <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
                         <Button
                             size="large"
                             variant="contained"
@@ -83,7 +81,7 @@ const UserGroupSearchForm = ({applySearch}) => {
                         </Button>
                     </Grid>
                     <Grid item xs={8} md={8} sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Grid container >
+                        <Grid container maxWidth justifyContent="flex-end">
                             <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
                                 <Button
                                     size="large"

src/pages/pnspsUserGroupSearchPage/index.js

@@ -6,10 +6,10 @@ import {
     Grid, Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import axios from "axios";
-import {apiPath} from "../../auth/utils";
-import {GET_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
+import { apiPath } from "../../auth/utils";
+import { GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";
 import * as React from "react";
 
 //import LoadingComponent from "../extra-pages/LoadingComponent";
@@ -21,7 +21,17 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 const UserGroupSearchForm = Loadable(lazy(() => import('./UserGroupSearchForm')));
 const UserGroupTable = Loadable(lazy(() => import('./UserGroupTable')));
 // import {useNavigate} from "react-router";
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserGroupSearchPanel = () => {
@@ -44,7 +54,7 @@ const UserGroupSearchPanel = () => {
 
     function getGroupList() {
         axios.get(`${apiPath}${GET_GROUP_LIST_PATH}`,
-            {params: searchCriteria}
+            { params: searchCriteria }
         )
             .then((response) => {
                 if (response.status === 200) {
@@ -63,28 +73,26 @@ const UserGroupSearchPanel = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
-                <Grid item xs={12} md={12} lg={12}>
-                    <Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}>
-                        <Grid item xs={2} height='50px'>
-                            <Stack direction="row" height='100%' justifyContent="space-between" alignItems="center">
-                                <Typography align="center" variant="h5">View User Group</Typography>
-                            </Stack>
-                        </Grid>
-                    </Grid>
+            <Grid container sx={{ minHeight: '90vh'}} 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">View User Group</Typography>
+                        </Stack>
+                    </div>
                 </Grid>
 
                 {/*row 1*/}
                 <Grid item xs={12} md={12} lg={12}>
-                    <UserGroupSearchForm applySearch={applySearch}/>
+                    <UserGroupSearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}
                 <Grid item xs={12} md={12} lg={12}>
                     <MainCard elevation={0}
-                              border={false}
-                              content={false}
+                        border={false}
+                        content={false}
                     >
                         <UserGroupTable
                             recordList={record}

src/routes/PublicUserRoutes.js

@@ -16,6 +16,8 @@ const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_Public')));
 const ProofPayment = Loadable(lazy(() => import('pages/Proof/Payment')));
 const Payment_Multi = Loadable(lazy(() => import('pages/Payment')));
 const Payment_FPS = Loadable(lazy(() => import('pages/Payment/FPS')));
+const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback')));
+const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPage')));
 const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card')));
 const Payment_Success = Loadable(lazy(() => import('pages/Payment/PaymentSuccess')));
 
@@ -80,6 +82,14 @@ const PublicDashboard = {
           path: 'payment/success',
           element: <Payment_Success/>
         },
+        {
+          path: 'payment/fps/fpscallback',
+          element: <Payment_FPS_CallBack/>
+        },
+        {
+          path: 'payment/fps/ackpage',
+          element: <Payment_FPS_Ackpage/>
+        },
       ]
     },
   ]