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

src/components/MainCard.js

@@ -62,7 +62,7 @@ const MainCard = forwardRef(
               fontFamily: theme.typography.fontFamily,
               fontSize: '0.75rem'
             },
-            maxWidth: { xs: 700, sm: 900, md: 1000, lg: 1300, xl: 1900 },
+            maxWidth: { xs: 700, sm: 900, md: 1000, lg: 1300, xl: 1850 },
             // minWidth: { xs: 600, sm: 800, md: 900, lg: 1000, xl: 1000 },
             margin: { xs: 2.5, md: 3 },
             // '& > *': {

src/pages/OrganizationDetailPage/OrganizationCard.js

@@ -139,7 +139,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                                     alignItems: 'end'
                                                 }}
                                             >
-                                                Create
+                                                <Typography variant="h5">Create</Typography>
                                             </Button>
                                         </Grid>
                                     </> :
@@ -154,7 +154,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                                     alignItems: 'end'
                                                 }}
                                             >
-                                                Reset & Back
+                                                <Typography variant="h5">Reset & Back</Typography>
                                             </Button>
                                         </Grid>
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
@@ -168,7 +168,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                                     alignItems: 'end'
                                                 }}
                                             >
-                                                Save
+                                                <Typography variant="h5">Save</Typography>
                                             </Button>
                                         </Grid>
                                     </>
@@ -186,7 +186,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                         }}
                                         onClick={onEditClick}
                                     >
-                                        Edit
+                                        <Typography variant="h5">Edit</Typography>
                                     </Button>
                                 </Grid>
                             </>
@@ -200,7 +200,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                     :
                     <Grid container spacing={1}>
                         <Grid item xs={12}>
-                            <Typography variant="h5" sx={{mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                            <Typography variant="h4" sx={{mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                                 Organization Details
                             </Typography>
                         </Grid>

src/pages/OrganizationDetailPage/index.js

@@ -73,7 +73,7 @@ const OrganizationDetailPage = () => {
         isLoading ?
             <LoadingComponent />
             :
-            <Grid container>
+            <Grid container sx={{backgroundColor:"backgroundColor.default"}}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -91,7 +91,7 @@ const OrganizationDetailPage = () => {
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
                                 <InfoCard
                                     userData={formData}
                                     loadDataFun={loadData}

src/pages/OrganizationSearchPage/OrganizationSearchForm.js

@@ -2,7 +2,8 @@
 import {
     Button,
     CardContent,
-    Grid, TextField
+    Grid, TextField,
+    Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import {useForm} from "react-hook-form";
@@ -47,7 +48,7 @@ const OrganizationSearchForm = ({applySearch}) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
+                        <Typography variant="h4">Search Form</Typography>
                     </Grid>
                 </CardContent>
 
@@ -59,6 +60,9 @@ const OrganizationSearchForm = ({applySearch}) => {
                             {...register("brNo")}
                             id='brNo'
                             label="BR No."
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -68,6 +72,9 @@ const OrganizationSearchForm = ({applySearch}) => {
                             {...register("enCompanyName")}
                             id="enCompanyName"
                             label="Name (English)"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -77,6 +84,9 @@ const OrganizationSearchForm = ({applySearch}) => {
                             {...register("chCompanyName")}
                             id="chCompanyName"
                             label="Name (Chinese)"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -95,7 +105,7 @@ const OrganizationSearchForm = ({applySearch}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Clear
+                            <Typography variant="h5">Clear</Typography>
                         </Button>
                     </Grid>
 
@@ -108,7 +118,7 @@ const OrganizationSearchForm = ({applySearch}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Submit
+                            <Typography variant="h5">Submit</Typography>
                         </Button>
                     </Grid>
                 </Grid>

src/pages/OrganizationSearchPage/index.js

@@ -66,7 +66,7 @@ const OrganizationSearchPage = () => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container>
+            <Grid container sx={{backgroundColor:"backgroundColor.default"}}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -159,7 +159,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                 alignItems: 'end'
                                             }}
                                         >
-                                            Reset & Back
+                                            <Typography variant="h5">Reset & Back</Typography>
                                         </Button>
                                     </Grid>
 
@@ -174,7 +174,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                 alignItems: 'end'
                                             }}
                                         >
-                                            Save
+                                            <Typography variant="h5">Save</Typography>
                                         </Button>
                                     </Grid>
                                 </>
@@ -190,7 +190,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                             }}
                                             onClick={onEditClick}
                                         >
-                                            Edit
+                                            <Typography variant="h5">Edit</Typography>
                                         </Button>
                                     </Grid>
                                 </>
@@ -199,7 +199,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         </Grid>
                     </Grid>
                     {/*end top button*/}
-                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                    <Typography variant="h4" 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}}>
@@ -299,10 +299,9 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-                                    Verified:
+                                <Typography variant="h5">Verified:</Typography>
                                 </Grid>
 
-
                                 {
                                     currentUserData.verifiedBy || editMode ?
                                         <Grid item xs={12} md={6} lg={6}>
@@ -331,7 +330,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                     }}
                                                     onClick={onVerifiedClick}
                                                 >
-                                                    Verify
+                                                    <Typography variant="h5">Verify</Typography>
                                                 </Button>
                                             </Grid>
                                         </>
@@ -343,7 +342,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-                                    ID No.:
+                                <Typography variant="h5">ID No.:</Typography>
                                 </Grid>
 
                                 <Grid item xs={12} md={6} lg={6}>
@@ -432,7 +431,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         <Grid item lg={4}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-                                    Status:
+                                <Typography variant="h5">Status:</Typography>
                                 </Grid>
 
                                 {
@@ -454,7 +453,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                 })}
                                             </Grid>
                                             {locked ?
-                                                <Grid item lg={1}>
+                                                <Grid item lg={1} sx={{ml:1}}>
                                                     <Button
                                                         size="large"
                                                         variant="contained"
@@ -465,11 +464,11 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                         }}
                                                         onClick={doUnlock}
                                                     >
-                                                        Active
+                                                        <Typography variant="h5">Active</Typography>
                                                     </Button>
                                                 </Grid>
                                                 :
-                                                <Grid item lg={1}>
+                                                <Grid item lg={1} sx={{ml:1}}>
                                                     <Button
                                                         size="large"
                                                         variant="contained"
@@ -480,7 +479,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                         }}
                                                         onClick={doLock}
                                                     >
-                                                        Lock
+                                                        <Typography variant="h5">Lock</Typography>
                                                     </Button>
                                                 </Grid>
                                             }

src/pages/User/DetailsPage_Individual/index.js

@@ -36,9 +36,10 @@ const UserMaintainPage_Individual = () => {
     const [isLoading, setLoding] = React.useState(true);
 
     const _sx = {
-        ml: 3,
+        ml: 6,
+        mr: 6,
         mb: 3,
-        mr: 3,
+        mt: 3,
         padding: "4 2 4 2",
         boxShadow: 1,
         border: 1,
@@ -101,7 +102,7 @@ const UserMaintainPage_Individual = () => {
         isLoading ?
             <LoadingComponent />
             :
-            <Grid container>
+            <Grid container sx={{ minHeight: '90vh', backgroundColor: 'backgroundColor.default' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -116,10 +117,10 @@ const UserMaintainPage_Individual = () => {
                     </Button>
                 </Grid>
                 {/*col 1*/}
-                <Grid item xs={12} >
+                <Grid item xs={12}>
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
                                 <UserInformationCard
                                     formData={formData}
                                     loadDataFun={loadData}
@@ -127,18 +128,19 @@ const UserMaintainPage_Individual = () => {
                             </Box>
                         </Grid>
                         <Grid item xs={12} md={12} lg={12}>
-                            <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" }}>
+                            <Box xs={12} ml={0} mt={-3} mr={11.5} sx={{ p: 1, borderRadius: '10px' }}>
+                                <MainCard elevation={0} border={false} content={false}>
+                                    <Typography variant="h4" sx={{ mt: 4, ml: 6, mb: 2, mr: 6, borderBottom: "1px solid black" }}>
                                         Files
                                     </Typography>
-                                    <FileList sx={_sx}
+                                    <FileList
+                                        sx={_sx}
                                         refId={params.id}
                                         refType={"identification"}
                                     />
-                                </Box>
-                            </MainCard>
-                            <br/>
+                                </MainCard>
+                            </Box>
+                            <br />
                         </Grid>
                     </Grid>
                 </Grid>

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -191,7 +191,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                 alignItems: 'end'
                                             }}
                                         >
-                                            Reset & Back
+                                            <Typography variant="h5">Reset & Back</Typography>
                                         </Button>
                                     </Grid>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
@@ -205,7 +205,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                 alignItems: 'end'
                                             }}
                                         >
-                                            Save
+                                            <Typography variant="h5">Save</Typography>
                                         </Button>
                                     </Grid>
 
@@ -223,7 +223,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                             }}
                                             onClick={onEditClick}
                                         >
-                                            Edit
+                                            <Typography variant="h5">Edit</Typography>
                                         </Button>
                                     </Grid>
                                 </>
@@ -234,7 +234,7 @@ 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" }}>
+                        <Typography variant="h4" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                             Organization User Details
                         </Typography>
                         <Grid container spacing={1}>
@@ -343,7 +343,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                             <Grid item lg={4}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-                                        Verified:
+                                        <Typography variant="h5">Verified:</Typography>
                                     </Grid>
 
                                     {
@@ -374,7 +374,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                         }}
                                                         onClick={() => { onVerifiedClick() }}
                                                     >
-                                                        Verify
+                                                        <Typography variant="h5">Verify</Typography>
                                                     </Button>
                                                 </Grid>
                                             </>
@@ -397,7 +397,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                             <Grid item lg={4}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-                                        Status:
+                                        <Typography variant="h5">Status:</Typography>
                                     </Grid>
                                     {
                                         editMode ?
@@ -420,7 +420,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                 </Grid>
 
                                                 {formik.values.locked ?
-                                                    <Grid item xs={1} md={1} lg={1}>
+                                                    <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>
                                                         <Button
                                                             size="large"
                                                             variant="contained"
@@ -431,22 +431,22 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                             }}
                                                             onClick={doUnlock}
                                                         >
-                                                            Active
+                                                            <Typography variant="h5">Active</Typography>
                                                         </Button>
                                                     </Grid>
                                                     :
-                                                    <Grid item xs={1} md={1} lg={1}>
+                                                    <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>
                                                         <Button
                                                             size="large"
                                                             variant="contained"
                                                             color="error"
                                                             sx={{
                                                                 textTransform: 'capitalize',
-                                                                alignItems: 'end'
+                                                                alignItems: 'end',
                                                             }}
                                                             onClick={doLock}
                                                         >
-                                                            Lock
+                                                            <Typography variant="h5">Lock</Typography>
                                                         </Button>
                                                     </Grid>
                                                 }
@@ -456,7 +456,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                             </Grid>
                         </Grid>
                     </div>
-                    <br/>
+                    <br />
                     <div style={{ paddingLeft: 24, paddingRight: 24 }}>
                         <Grid container spacing={1} >
                             <Grid item lg={12}>
@@ -466,7 +466,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                             <Button variant="contained"
                                                 onClick={createOrgClick}
                                             >
-                                                Create Organization
+                                                <Typography variant="h5">Create Organization</Typography>
                                             </Button>
                                         </Grid>
                                         : null
@@ -474,7 +474,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                 </Grid>
                             </Grid>
                             <Grid item lg={12} >
-                                <Typography variant="h5" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                                <Typography variant="h4" sx={{ mt: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                                     Organization
                                 </Typography>
                             </Grid>
@@ -556,28 +556,29 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                             </Grid>
                         </Grid>
                     </div>
+                    <br />
                 </form>
             }
             <div>
                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>Warning</DialogTitle>
+                    <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
+                        <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}>Close</Button>
+                        <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">Close</Typography></Button>
                     </DialogActions>
                 </Dialog>
             </div>
             <div>
                 <Dialog open={isConfirmPopUp} onClose={() => setIsConfirmPopUp(false)}  >
-                    <DialogTitle>Confirm</DialogTitle>
+                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h3" style={{ padding: '16px' }}>{confirmText}</Typography>
+                        <Typography variant="h4" style={{ padding: '16px' }}>{confirmText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => { setIsConfirmPopUp(false) }}>Close</Button>
-                        <Button onClick={() => { confirmAction?.function(); }}>Confirm</Button>
+                        <Button onClick={() => { setIsConfirmPopUp(false) }}><Typography variant="h5">Close</Typography></Button>
+                        <Button onClick={() => { confirmAction?.function(); }}><Typography variant="h5">Confirm</Typography></Button>
                     </DialogActions>
                 </Dialog>
             </div>

src/pages/User/DetailsPage_Organization/index.js

@@ -41,7 +41,8 @@ const UserMaintainPage_Organization = () => {
     const _sx = {
         ml: 3,
         mb: 3,
-        mr: 3,
+        mt: 3,
+        mr: 6,
         padding: "4 2 4 2",
         boxShadow: 1,
         border: 1,
@@ -128,7 +129,7 @@ const UserMaintainPage_Organization = () => {
         isLoading ?
             <LoadingComponent />
             :
-            <Grid container>
+            <Grid container sx={{ backgroundColor: "backgroundColor.default" }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -146,19 +147,18 @@ const UserMaintainPage_Organization = () => {
                 <Grid item xs={12} >
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
                                 <UserInformationCard
                                     userData={userData}
                                     loadDataFun={loadData}
                                     orgData={orgData}
                                 />
-                                <br/>
                             </Box>
                         </Grid>
                         <Grid item xs={12} md={12} lg={12}>
-                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                            <Box xs={12} ml={0} mt={-3} mr={11.5} sx={{ p: 1, borderRadius: '10px' }}>
                                 <MainCard elevation={0} border={false} content={false}>
-                                    <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 1 }}>
+                                    <Typography variant="h4" sx={{ ml: 3, mt: 3, mb: 2, mr: 6, borderBottom: "1px solid black" }}>
                                         Files
                                     </Typography>
                                     <FileList sx={_sx}
@@ -167,7 +167,7 @@ const UserMaintainPage_Organization = () => {
                                     />
                                 </MainCard>
                             </Box>
-                            <br/>
+                            <br />
                         </Grid>
                     </Grid>
                 </Grid>

src/pages/User/SearchPage/UserSearchForm.js

@@ -165,7 +165,7 @@ const UserSearchForm = ({ applySearch }) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            <AddCircleOutlineIcon />
+                            <AddCircleOutlineIcon sx={{mb:0.5}}/>
                             <Typography sx={{ ml: 1 }} variant="h5">New User</Typography>
                         </Button>
                     </Grid>

src/pages/User/SearchPage/UserTable.js

@@ -9,6 +9,7 @@ import { useTheme } from '@mui/material/styles';
 import Checkbox from '@mui/material/Checkbox';
 import * as UrlUtils from "../../../utils/ApiPathConst";
 import * as HttpUtils from '../../../utils/HttpUtils';
+import { notifyLockSuccess, notifyUnlockSuccess } from 'utils/CommonFunction';
 
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -42,6 +43,7 @@ export default function UserTable({recordList,setChangeLocked}) {
             onSuccess: function(){
                 setRows(recordList);
                 setChangeLocked(true)
+                notifyLockSuccess()
             }
         }); 
     };
@@ -52,6 +54,7 @@ export default function UserTable({recordList,setChangeLocked}) {
             onSuccess: function(){
                 setRows(recordList);
                 setChangeLocked(true)
+                notifyUnlockSuccess()
             }
         }); 
     };

src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js

@@ -3,16 +3,17 @@ import {
     Button,
     CardContent,
     Grid, TextField,
-    Autocomplete
+    Autocomplete,
+    Typography
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
-import {useForm} from "react-hook-form";
-import { useState} from "react";
+import { useForm } from "react-hook-form";
+import { useState } from "react";
 import * as React from "react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserSearchForm_Individual = ({applySearch}) => {
+const UserSearchForm_Individual = ({ applySearch }) => {
 
     const [type, setType] = useState([]);
     const [accountFilter, setAccountFilter] = useState("Active");
@@ -22,7 +23,7 @@ const UserSearchForm_Individual = ({applySearch}) => {
 
         let typeArray = [];
 
-        for(let i =0; i < type.length; i++){
+        for (let i = 0; i < type.length; i++) {
             typeArray.push(type[i].label);
         }
 
@@ -36,80 +37,95 @@ const UserSearchForm_Individual = ({applySearch}) => {
         applySearch(temp);
     };
 
-    function resetForm(){
+    function resetForm() {
         setType([]);
         reset();
     }
 
     return (
         <MainCard xs={12} md={12} lg={12}
-                  border={false}
-                  content={false}>
+            border={false}
+            content={false}>
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
+                        <Typography variant="h5">Search Form</Typography>
                     </Grid>
                 </CardContent>
 
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("userName")}
                             id='userName'
                             label="Username"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("fullenName")}
                             id="fullenName"
                             label="Full Name"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("email")}
                             id="email"
                             label="Email"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("phone")}
                             id="phone"
                             label="Phone"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                                 <Autocomplete
-                                  {...register("accountFilter")}
-                                    disablePortal
-                                    id="accountFilter"
-                                    options={["Active","Locked","Not verified"]}
-                                    value={accountFilter}   
-                                    onChange={(event, newValue) => {
-                                    if (newValue !== null){
-                                        setAccountFilter(newValue);
-                                    }
-                                }} 
-                                    renderInput={(params) => (
-                                    <TextField {...params}
-                                        label="Status" 
-                                    />
-                                    )}
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Autocomplete
+                            {...register("accountFilter")}
+                            disablePortal
+                            id="accountFilter"
+                            options={["Active", "Locked", "Not verified"]}
+                            value={accountFilter}
+                            onChange={(event, newValue) => {
+                                if (newValue !== null) {
+                                    setAccountFilter(newValue);
+                                }
+                            }}
+                            renderInput={(params) => (
+                                <TextField {...params}
+                                    label="Status"
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
                                 />
+                            )}
+                        />
                     </Grid>
                     {/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/}
                     {/*    <TextField*/}
@@ -126,7 +142,7 @@ const UserSearchForm_Individual = ({applySearch}) => {
                 {/*last row*/}
                 <Grid container maxWidth justifyContent="flex-end">
 
-                    <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"
@@ -135,11 +151,11 @@ const UserSearchForm_Individual = ({applySearch}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Clear
+                            <Typography variant="h5">Clear</Typography>
                         </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"
@@ -148,7 +164,7 @@ const UserSearchForm_Individual = ({applySearch}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Submit
+                            <Typography variant="h5">Submit</Typography>
                         </Button>
                     </Grid>
                 </Grid>

src/pages/User/SearchPage_Individual/index.js

@@ -3,10 +3,10 @@ import {
     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 {GET_IND_USER_PATH} from "../../../utils/ApiPathConst";
+import { GET_IND_USER_PATH } from "../../../utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "../../../utils/HttpUtils";
 
@@ -24,7 +24,7 @@ const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
     height: '100%',
-    backgroundSize:'contain',
+    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
@@ -33,7 +33,7 @@ const BackgroundHead = {
 
 const UserSearchPage_Individual = () => {
 
-    const [record,setRecord] = useState([]);
+    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
 
@@ -49,11 +49,11 @@ const UserSearchPage_Individual = () => {
         getUserList();
     }, [searchCriteria]);
 
-    function getUserList(){
+    function getUserList() {
         HttpUtils.get({
             url: GET_IND_USER_PATH,
             params: searchCriteria,
-            onSuccess: function(responseData){
+            onSuccess: function (responseData) {
                 setRecord(responseData);
             }
         });
@@ -65,34 +65,34 @@ const UserSearchPage_Individual = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-        <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>
+            <Grid container sx={{ minHeight: '90vh', backgroundColor: "backgroundColor.default" }} direction="column">
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">View Individual 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>
+            </Grid>
 
     );
 };

src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js

@@ -2,7 +2,8 @@
 import {
     Button,
     CardContent, Autocomplete,
-    Grid, TextField
+    Grid, TextField,
+    Typography
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import {useForm} from "react-hook-form";
@@ -54,7 +55,7 @@ const UserSearchForm_Organization = ({applySearch}) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
+                        <Typography variant="h5">Search Form</Typography>
                     </Grid>
                 </CardContent>
 
@@ -67,6 +68,9 @@ const UserSearchForm_Organization = ({applySearch}) => {
                             {...register("orgName")}
                             id="orgName"
                             label="Org Name"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -76,6 +80,9 @@ const UserSearchForm_Organization = ({applySearch}) => {
                             {...register("brNoStr")}
                             id="brNoStr"
                             label="BR No."
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -85,6 +92,9 @@ const UserSearchForm_Organization = ({applySearch}) => {
                             {...register("userName")}
                             id='userName'
                             label="Username"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -94,6 +104,9 @@ const UserSearchForm_Organization = ({applySearch}) => {
                             {...register("contactPerson")}
                             id="contactPerson"
                             label="Name"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -103,6 +116,9 @@ const UserSearchForm_Organization = ({applySearch}) => {
                             {...register("email")}
                             id="email"
                             label="Email"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -112,6 +128,9 @@ const UserSearchForm_Organization = ({applySearch}) => {
                             {...register("phone")}
                             id="phone"
                             label="Phone"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -129,7 +148,10 @@ const UserSearchForm_Organization = ({applySearch}) => {
                                 }} 
                                     renderInput={(params) => (
                                     <TextField {...params}
-                                        label="Status" 
+                                        label="Status"
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
                                     />
                                     )}
                                 />
@@ -158,7 +180,7 @@ const UserSearchForm_Organization = ({applySearch}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Clear
+                            <Typography variant="h5">Clear</Typography>
                         </Button>
                     </Grid>
 
@@ -171,7 +193,7 @@ const UserSearchForm_Organization = ({applySearch}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Submit
+                            <Typography variant="h5">Submit</Typography>
                         </Button>
                     </Grid>
                 </Grid>

src/pages/User/SearchPage_Organization/index.js

@@ -68,7 +68,7 @@ const UserSearchPage_Organization = () => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container>
+            <Grid container sx={{backgroundColor:"backgroundColor.default"}}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -91,7 +91,6 @@ const UserSearchPage_Organization = () => {
                         />
                     </MainCard>
                 </Grid>
-
             </Grid>
 
     );

src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js

@@ -54,7 +54,7 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRec
                       border={false}
                       content={false}
             >
-                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                <Typography variant="h4" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                     User Authority
                 </Typography>
 

src/pages/pnspsUserGroupDetailPage/UserAddCard.js

@@ -101,14 +101,14 @@ const UserAddCard = ({ isCollectData, updateGroupMember, userGroupData, isNewRec
                 border={false}
                 content={false}
             >
-                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                <Typography variant="h4" 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 container alignItems={"center"}>
                         <Grid item xs={3} s={3} md={2} lg={2}
                             sx={{ display: 'flex', alignItems: 'center' }}>
-                            User:
+                            <Typography variant="h5">User:</Typography>
                         </Grid>
                         <Grid item xs={6} s={5} md={5} lg={5}>
                             <Autocomplete
@@ -134,13 +134,13 @@ const UserAddCard = ({ isCollectData, updateGroupMember, userGroupData, isNewRec
                                 }}
                                 onClick={updateUserList}
                             >
-                                Add
+                            <Typography variant="h5">Add</Typography>
                             </Button>
                         </Grid>
                     </Grid>
                 </Grid>
                 <Grid container>
-                    <Grid item xs={12} sx={{mt:3}}>
+                    <Grid item xs={12} sx={{mt:2}}>
                         <UserAddTable
                             setGroupUserData={setGroupUserData}
                             setDeletedList={setDeletedList}

src/pages/pnspsUserGroupDetailPage/UserGroupInfoCard.js

@@ -52,17 +52,17 @@ const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData })
                 border={false}
                 content={false}
             >
-                <Typography variant="h5" sx={{ mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black" }}>
+                <Typography variant="h4" sx={{ mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black" }}>
                     Information
                 </Typography>
 
                 <form>
                     <Grid container>
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 2 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
-                                    User Group Name:
+                                    sx={{ mr: 3, display: 'flex', alignItems: 'center' }}>
+                                    <Typography variant="h5">User Group Name:</Typography>
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>
@@ -82,8 +82,8 @@ const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData })
                         <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' }}>
-                                    User Group Description:
+                                    sx={{ mr: 3, display: 'flex', alignItems: 'center' }}>
+                                    <Typography variant="h5">User Group Description:</Typography>
                                 </Grid>
 
                                 <Grid item xs={7} s={7} md={7} lg={6}>

src/pages/pnspsUserGroupDetailPage/index.js

@@ -169,7 +169,7 @@ const UserMaintainPage = () => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container>
+            <Grid container sx={{ backgroundColor: "backgroundColor.default" }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -187,7 +187,7 @@ const UserMaintainPage = () => {
                 <Grid item xs={12} md={5} lg={5}>
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
                                 <UserGroupInfoCard
                                     updateGroupObject={updateGroupObject}
                                     userGroupData={userGroupData}
@@ -198,7 +198,7 @@ const UserMaintainPage = () => {
                         </Grid>
 
                         <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' }}>
+                            <Box xs={12} ml={0} mt={-5} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
                                 <UserAddCard
                                     updateGroupMember={updateGroupMember}
                                     userGroupData={userGroupData}
@@ -211,7 +211,7 @@ const UserMaintainPage = () => {
                 </Grid>
                 {/*col 2*/}
                 <Grid item xs={12} md={7} lg={7}>
-                    <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                    <Box xs={12} ml={-2} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
                         <GroupAuthCard
                             updateUserAuthList={updateUserAuthList}
                             userGroupData={userGroupData}
@@ -235,7 +235,7 @@ const UserMaintainPage = () => {
                                 disabled={isNewRecord}
                                 onClick={handleDeleteClick}
                             >
-                                Delete User Group
+                                <Typography variant="h5">Delete User Group</Typography>
                             </Button>
                             <GeneralConfirmWindow
                                 isWindowOpen={isWindowOpen}
@@ -257,7 +257,7 @@ const UserMaintainPage = () => {
                                 }}
                                 onClick={submitData}
                             >
-                                Save
+                                <Typography variant="h5">Save</Typography>
                             </Button>
                         </Grid>
                     </Grid>

src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js

@@ -3,16 +3,17 @@ import {
     Button,
     CardContent,
     Grid, TextField,
+    Typography
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
-import {useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 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 UserGroupSearchForm = ({applySearch}) => {
+const UserGroupSearchForm = ({ applySearch }) => {
     const navigate = useNavigate();
 
     const { reset, register, handleSubmit } = useForm()
@@ -20,45 +21,52 @@ const UserGroupSearchForm = ({applySearch}) => {
         applySearch(data);
     };
 
-    function resetForm(){
+    function resetForm() {
         reset();
     }
 
     const handleNewGroupClick = (id) => {
         // console.log(id)
-        navigate('/userGroup/'+ id);
+        navigate('/userGroup/' + id);
     };
 
     return (
         <MainCard xs={12} md={12} lg={12}
-                  border={false}
-                  content={false}>
+            border={false}
+            content={false}
+        >
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
+                        <Typography variant="h4">Search Form</Typography>
                     </Grid>
                 </CardContent>
 
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("name")}
                             id='userGroupName'
                             label="User Group Name"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("description")}
                             id="userGroupDescription"
                             label="User Group Description"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
                 </Grid>
@@ -66,23 +74,25 @@ const UserGroupSearchForm = ({applySearch}) => {
                 {/*last row*/}
                 <Grid container direction="row"
                     justifyContent="space-between"
-                    alignItems="center">
-                    <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
+                    alignItems="center"
+                    sx={{ mt: 3 }}
+                >
+                    <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1 }}>
                         <Button
                             size="large"
                             variant="contained"
                             onClick={handleNewGroupClick}
                             sx={{
                                 textTransform: 'capitalize',
-                                alignItems: 'end'
+                                alignItems: 'end',
                             }}>
-                            <AddCircleOutlineIcon/>
-                            New Group
+                            <AddCircleOutlineIcon sx={{ mr: 1, mb: 0.5 }} />
+                            <Typography variant="h5">New Group</Typography>
                         </Button>
                     </Grid>
-                    <Grid item xs={8} md={8} sx={{ml:3, mr:3, mb:3, mt:3}}>
+                    <Grid item xs={8} md={8} sx={{ ml: 3, mr: 3 }}>
                         <Grid container maxWidth justifyContent="flex-end">
-                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                            <Grid item sx={{ ml: 3, mr: 3 }}>
                                 <Button
                                     size="large"
                                     variant="contained"
@@ -91,11 +101,11 @@ const UserGroupSearchForm = ({applySearch}) => {
                                         textTransform: 'capitalize',
                                         alignItems: 'end'
                                     }}>
-                                    Clear
+                                    <Typography variant="h5">Clear</Typography>
                                 </Button>
                             </Grid>
 
-                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                            <Grid item sx={{ ml: 3, mr: 3 }}>
                                 <Button
                                     size="large"
                                     variant="contained"
@@ -104,7 +114,7 @@ const UserGroupSearchForm = ({applySearch}) => {
                                         textTransform: 'capitalize',
                                         alignItems: 'end'
                                     }}>
-                                    Search
+                                    <Typography variant="h5">Search</Typography>
                                 </Button>
                             </Grid>
                         </Grid>

src/pages/pnspsUserGroupSearchPage/index.js

@@ -75,7 +75,7 @@ const UserGroupSearchPanel = () => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{ minHeight: '90vh'}} direction="column">
+            <Grid container sx={{ minHeight: '90vh', backgroundColor: "backgroundColor.default"}} direction="column">
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">

src/themes/overrides/Checkbox.js

@@ -1,11 +1,18 @@
 // ==============================|| OVERRIDES - CHECKBOX ||============================== //
 
 export default function Checkbox(theme) {
+  
+  const checkboxSize = "2rem"
+
   return {
     MuiCheckbox: {
       styleOverrides: {
         root: {
-          color: theme.palette.secondary[300]
+          color: theme.palette.secondary[300],
+          svg: {
+            width: checkboxSize,
+            height: checkboxSize,
+          }
         }
       }
     }

src/themes/overrides/DataGrid.js

@@ -6,6 +6,7 @@ export default function DataGrid() {
     const cellHeaderFontSize = "1.1rem"
     const selectedNumberFontSize = "1.2rem"
     const actionIconSize = "2rem"
+    const actionCellIconSize = "1.7rem"
 
     const cellFontWeight = 600
     const cellFooterFontWeight = 600
@@ -16,7 +17,6 @@ export default function DataGrid() {
         MuiDataGrid: {
             styleOverrides: {
                 root: {
-                    // fontSize: "3rem"
                     '& .MuiDataGrid-cell': {
                         fontSize: cellFontSize,
                         fontWeight: cellFontWeight
@@ -50,6 +50,14 @@ export default function DataGrid() {
                             height: actionIconSize,
                         }
                     },
+                    '& .MuiDataGrid-actionsCell': {
+                        fontSize: cellFooterFontSize,
+                        fontWeight: cellFooterFontWeight,
+                        svg: {
+                            width: actionCellIconSize,
+                            height: actionCellIconSize,
+                        },
+                    },
                     '& .MuiDataGrid-rowCount': {
                         fontSize: cellFooterFontSize,
                         fontWeight: cellFooterFontWeight

src/themes/overrides/FormControlLabel.js

@@ -0,0 +1,19 @@
+// ==============================|| OVERRIDES - FORMCONTROLLABEL ||============================== //
+
+export default function FormControlLabel() {
+    const fontSize = "1.275rem"
+    const fontWeight = 600
+
+    return {
+        MuiFormControlLabel: {
+            styleOverrides: {
+                root: {
+                    "& .MuiFormControlLabel-label": {
+                        fontSize: fontSize,
+                        fontWeight: fontWeight,
+                    },
+                },
+            }
+        }
+    };
+}

src/themes/overrides/index.js

@@ -19,6 +19,7 @@ import Tabs from './Tabs';
 import Typography from './Typography';
 import Textfield from './Textfield';
 import DataGrid from './DataGrid';
+import FormControlLabel from './FormControlLabel';
 
 // ==============================|| OVERRIDES - MAIN ||============================== //
 
@@ -30,6 +31,7 @@ export default function ComponentsOverrides(theme) {
     Checkbox(theme),
     Chip(theme),
     DataGrid(),
+    FormControlLabel(),
     IconButton(theme),
     InputLabel(theme),
     LinearProgress(),

src/utils/CommonFunction.js

@@ -113,6 +113,18 @@ export const notifyLockSuccess = () => {
     theme: "light",
 })};
 
+export const notifyUnlockSuccess = () => {
+    toast.success('Unlock success!', {
+    position: "bottom-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    theme: "light",
+})};
+
 export const notifyActiveSuccess = () => {
     toast.success('Active success!', {
     position: "bottom-right",

src/utils/FieldUtils.js

@@ -1,6 +1,6 @@
 
 import {
-    Grid, TextField, Stack
+    Grid, TextField, Stack, Typography
 } from '@mui/material';
 
 import Combo from "./Combo";
@@ -13,7 +13,7 @@ export const notNullFieldLabel = (label) => {
 export const getDateField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-            {label}
+            <Typography variant="h5">{label}</Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
             {initField({
@@ -30,7 +30,7 @@ export const getTextField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
-            {label}
+            <Typography variant="h5">{label}</Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
             {initField({
@@ -47,7 +47,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
-            {label}
+            <Typography variant="h5">{label}</Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
             {initField({
@@ -79,7 +79,7 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
-            {label}
+            <Typography variant="h5">{label}</Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
             <Stack direction="row">
@@ -88,7 +88,7 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => {
                     valueName: valueName.code,
                     form: form,
                     disabled: disabled,
-                    width: '25%'
+                    width: '35%'
                 })}
                 {initField({
                     type: "tel",
@@ -103,59 +103,61 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => {
 
 
 export const getAddressField = ({ label, valueName, form, disabled }) => {
-    return  <Grid container alignItems={"top"}>
-            <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'top' }}>
-                <Grid item lg={12} sx={{ alignItems: 'center' }}>{label}</Grid>
+    return <Grid container alignItems={"top"}>
+        <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'top' }}>
+            <Grid item lg={12} sx={{ alignItems: 'center' }}>
+                <Typography variant="h5">{label}</Typography>
             </Grid>
-            <Grid item xs={12} md={6} lg={6}>
-                <Grid item lg={12}>
-                    {initField({
-                        type: "text",
-                        valueName: valueName[0],
-                        form: form,
-                        disabled: disabled
-                    })}
-                </Grid>
-                <Grid item lg={12}>
-                    {initField({
-                        type: "text",
-                        valueName: valueName[1],
-                        form: form,
-                        disabled: disabled
-                    })}
-                </Grid>
-                <Grid item lg={12}>
-                    {initField({
-                        type: "text",
-                        valueName: valueName[2],
-                        form: form,
-                        disabled: disabled
-                    })}
-                </Grid>
+        </Grid>
+        <Grid item xs={12} md={6} lg={6}>
+            <Grid item lg={12}>
+                {initField({
+                    type: "text",
+                    valueName: valueName[0],
+                    form: form,
+                    disabled: disabled
+                })}
+            </Grid>
+            <Grid item lg={12}>
+                {initField({
+                    type: "text",
+                    valueName: valueName[1],
+                    form: form,
+                    disabled: disabled
+                })}
+            </Grid>
+            <Grid item lg={12}>
+                {initField({
+                    type: "text",
+                    valueName: valueName[2],
+                    form: form,
+                    disabled: disabled
+                })}
             </Grid>
-        </Grid>;
+        </Grid>
+    </Grid>;
 }
 
 export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
     return <Grid container alignItems={"center"}>
-            <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-                {label}
-            </Grid>
-            <Grid item xs={12} md={6} lg={6}>
-                <Combo
-                    valueName={valueName}
-                    disabled={disabled}
-                    dataList={dataList}
-                    form={form}
-                    filterOptions={filterOptions}
-                    getOptionLabel={getOptionLabel}
-                    onInputChange={onInputChange}
-                    onChange={onChange}
-                    {...props}
-                />
-               
-            </Grid>
-        </Grid>;
+        <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
+        <Typography variant="h5">{label}</Typography>
+        </Grid>
+        <Grid item xs={12} md={6} lg={6}>
+            <Combo
+                valueName={valueName}
+                disabled={disabled}
+                dataList={dataList}
+                form={form}
+                filterOptions={filterOptions}
+                getOptionLabel={getOptionLabel}
+                onInputChange={onInputChange}
+                onChange={onChange}
+                {...props}
+            />
+
+        </Grid>
+    </Grid>;
 }
 
 export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps, width, ...props }) => {