Update UI

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/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>

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,18 @@ 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 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 +46,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 +63,7 @@ const UserMaintainPage = () => {
         setIsWindowOpen(true);
     };
 
-    function deleteData(){
+    function deleteData() {
         axios.delete(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`,
         )
             .then((response) => {
@@ -74,12 +83,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 +99,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 +111,7 @@ const UserMaintainPage = () => {
                     return false;
                 });
         }
-        else{
+        else {
             //new record case
             setUserGroupData(
                 {
@@ -120,19 +129,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 +162,62 @@ 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>
                 {/*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 +239,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}