From e2fe3f62d9a44e9824e0f85f1bc7c68548d64444 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Wed, 24 Jan 2024 11:54:08 +0800
Subject: [PATCH] update client search layout

---
 .../SearchPage/OrganizationSearchForm.js      | 203 +++++++------
 src/pages/Organization/SearchPage/index.js    |   2 +-
 src/pages/User/SearchPage/UserSearchForm.js   |  99 +++----
 src/pages/User/SearchPage/index.js            |   2 +-
 .../UserSearchForm_Individual.js              |  42 ++-
 src/pages/User/SearchPage_Individual/index.js |   6 +-
 .../UserSearchForm_Organization.js            | 274 +++++++++---------
 .../User/SearchPage_Organization/index.js     |   2 +-
 .../UserGroupSearchForm.js                    | 140 ++++-----
 src/pages/pnspsUserGroupSearchPage/index.js   |   6 +-
 10 files changed, 379 insertions(+), 397 deletions(-)

diff --git a/src/pages/Organization/SearchPage/OrganizationSearchForm.js b/src/pages/Organization/SearchPage/OrganizationSearchForm.js
index 90f130e..d1d623e 100644
--- a/src/pages/Organization/SearchPage/OrganizationSearchForm.js
+++ b/src/pages/Organization/SearchPage/OrganizationSearchForm.js
@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Typography,
     Autocomplete,
@@ -15,6 +14,8 @@ import * as React from "react";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import * as ComboData from "utils/ComboData";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -62,119 +63,109 @@ const OrganizationSearchForm = ({ applySearch }) => {
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h5">Search Form</Typography>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="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 }}>
-                        <TextField
-                            fullWidth
-                            {...register("brNo")}
-                            id='brNo'
-                            label="BR No."
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("enCompanyName")}
-                            id="enCompanyName"
-                            label="Name (English)"
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("chCompanyName")}
-                            id="chCompanyName"
-                            label="Name (Chinese)"
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3}}>
-                        <Autocomplete
-                                {...register("searchCreditor")}
-                                id="searchCreditor"
-                                size="small"
-                                options={ComboData.CreditorStatus}
-                                value={creditorSelected}
-                                onChange={(event, newValue) => {
-                                    setCreditorSelected(newValue);
+                    {/*row 2*/}
+
+                    <Grid container display="flex" alignItems={"center"}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("brNo")}
+                                id='brNo'
+                                label="BR No."
+                                InputLabelProps={{
+                                    shrink: true
                                 }}
-                                getOptionLabel={(option) => option.label}
-                                renderInput={(params) => (
-                                    <TextField
-                                        {...params}
-                                        label="Status"
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                    />
-                                )}
                             />
-                    </Grid>
-
-                </Grid>
-
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("enCompanyName")}
+                                id="enCompanyName"
+                                label="Name (English)"
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("chCompanyName")}
+                                id="chCompanyName"
+                                label="Name (Chinese)"
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3}}>
+                            <Autocomplete
+                                    {...register("searchCreditor")}
+                                    id="searchCreditor"
+                                    size="small"
+                                    options={ComboData.CreditorStatus}
+                                    value={creditorSelected}
+                                    onChange={(event, newValue) => {
+                                        setCreditorSelected(newValue);
+                                    }}
+                                    getOptionLabel={(option) => option.label}
+                                    renderInput={(params) => (
+                                        <TextField
+                                            {...params}
+                                            label="Status"
+                                            InputLabelProps={{
+                                                shrink: true
+                                            }}
+                                        />
+                                    )}
+                                />
+                        </Grid>
 
-                {/*last row*/}
-                <Grid container maxWidth justifyContent="flex-end">
-
-                <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={doExport}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Export</Typography>
-                        </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Clear</Typography>
-                        </Button>
-                    </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Submit</Typography>
-                        </Button>
+                    {/*last row*/}
+                    <Grid container maxWidth justifyContent="flex-end">
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{mr: 3, mb: 3 }}>
+                            <Button
+                                variant="contained"
+                                onClick={doExport}
+                            >
+                                Export
+                            </Button>
+                        </Grid>
+
+                        <Grid item sx={{ mr: 3, mb: 3}}>
+                            <Button
+                                variant="contained"
+                                onClick={resetForm}
+                            >
+                                Clear
+                            </Button>
+                        </Grid>
+
+                        <Grid item sx={{ mb: 3}}>
+                            <Button
+                                variant="contained"
+                                type="submit"
+                            >
+                                Submit
+                            </Button>
+                        </Grid>
+                        </ThemeProvider>
                     </Grid>
-                    
-
                 </Grid>
             </form>
         </MainCard>
diff --git a/src/pages/Organization/SearchPage/index.js b/src/pages/Organization/SearchPage/index.js
index 770549f..a805885 100644
--- a/src/pages/Organization/SearchPage/index.js
+++ b/src/pages/Organization/SearchPage/index.js
@@ -76,7 +76,7 @@ const OrganizationSearchPage = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}
diff --git a/src/pages/User/SearchPage/UserSearchForm.js b/src/pages/User/SearchPage/UserSearchForm.js
index a2949d7..0b1f1be 100644
--- a/src/pages/User/SearchPage/UserSearchForm.js
+++ b/src/pages/User/SearchPage/UserSearchForm.js
@@ -1,7 +1,7 @@
 // material-uisubDivision
 import {
     Button,
-    CardContent, FormControlLabel,
+    FormControlLabel,
     Grid, TextField,
     Typography
 } from '@mui/material';
@@ -19,6 +19,8 @@ import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import { useNavigate } from "react-router";
 import axios from "axios";
 import { GET_EMAIL_LIST } from 'utils/ApiPathConst';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -76,15 +78,16 @@ const UserSearchForm = ({ applySearch }) => {
             content={false}>
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h5">Search Form (GLD User)</Typography>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Search Form (GLD User)
+                        </Typography>
                     </Grid>
-                </CardContent>
+                    {/*row 2*/}
 
-                {/*row 2*/}
-                <Grid container alignItems={"center"}>
+                    <Grid container display="flex" alignItems={"center"}>
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
@@ -156,56 +159,48 @@ const UserSearchForm = ({ applySearch }) => {
                                     size="small"
                                 />
                             }
-                            label={<Typography variant="h5">Locked</Typography>}
+                            label={<Typography variant="h6">Locked</Typography>}
                         />
                     </Grid>
                 </Grid>
 
-                {/*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 }}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={handleNewUserClick}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <AddCircleOutlineIcon sx={{ mb: 0.5 }} />
-                            <Typography sx={{ ml: 1 }} variant="h5">New User</Typography>
-                        </Button>
-                    </Grid>
-                    <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"
-                                    onClick={resetForm}
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}>
-                                    <Typography variant="h5">Clear</Typography>
-                                </Button>
-                            </Grid>
-
-                            <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
-                                <Button
-                                    size="large"
-                                    variant="contained"
-                                    type="submit"
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}>
-                                    <Typography variant="h5">Search</Typography>
-                                </Button>
+                    {/*last row*/}
+                    <Grid container direction="row"
+                        justifyContent="space-between"
+                        alignItems="center">
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+
+                        <Grid item xs={3} md={3} sx={{ ml: 3,mb: 3 }}>
+                            <Button
+                                variant="contained"
+                                onClick={handleNewUserClick}
+                                startIcon={<AddCircleOutlineIcon/>}
+                            >
+                                New User
+                            </Button>
+                        </Grid>
+                        <Grid item xs={8} md={8}>
+                            <Grid container maxWidth justifyContent="flex-end">
+                                <Grid item sx={{ ml: 3, mr: 3, mb: 3,}}>
+                                    <Button
+                                        variant="contained"
+                                        onClick={resetForm}
+                                    >
+                                       Clear
+                                    </Button>
+                                </Grid>
+
+                                <Grid item sx={{ mb: 3 }}>
+                                    <Button
+                                        variant="contained"
+                                        type="submit"
+                                    >
+                                        Search
+                                    </Button>
+                                </Grid>
                             </Grid>
                         </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>
diff --git a/src/pages/User/SearchPage/index.js b/src/pages/User/SearchPage/index.js
index 09ab603..fba0ad2 100644
--- a/src/pages/User/SearchPage/index.js
+++ b/src/pages/User/SearchPage/index.js
@@ -82,7 +82,7 @@ const UserSettingPage = () => {
                 </Grid>
 
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}
diff --git a/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js b/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
index d89b152..d9ade40 100644
--- a/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
+++ b/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography
@@ -10,6 +9,8 @@ import MainCard from "../../../components/MainCard";
 import { useForm } from "react-hook-form";
 import { useState } from "react";
 import * as React from "react";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -48,15 +49,16 @@ const UserSearchForm_Individual = ({ applySearch }) => {
             content={false}>
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h5">Search Form</Typography>
+                <Grid container sx={{ ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Search Form
+                        </Typography>
                     </Grid>
-                </CardContent>
+                    {/*row 2*/}
 
-                {/*row 2*/}
-                <Grid container alignItems={"center"}>
+                    <Grid container display="flex" alignItems={"center"}>
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
@@ -142,32 +144,26 @@ const UserSearchForm_Individual = ({ applySearch }) => {
 
                 {/*last row*/}
                 <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Clear</Typography>
+                            >
+                            Clear
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <Grid item sx={{ mb: 3}}>
                         <Button
-                            size="large"
                             variant="contained"
                             type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Submit</Typography>
+                            >
+                            Submit
                         </Button>
                     </Grid>
+                    </ThemeProvider>
+                </Grid>
                 </Grid>
             </form>
         </MainCard>
diff --git a/src/pages/User/SearchPage_Individual/index.js b/src/pages/User/SearchPage_Individual/index.js
index 2d9f4f4..131505b 100644
--- a/src/pages/User/SearchPage_Individual/index.js
+++ b/src/pages/User/SearchPage_Individual/index.js
@@ -71,13 +71,15 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">View Individual User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                View Individual User
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>
 
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}
diff --git a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
index 80c37cc..bf3917e 100644
--- a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
+++ b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
@@ -1,7 +1,7 @@
 // material-ui
 import {
     Button,
-    CardContent, Autocomplete,
+    Autocomplete,
     Grid, TextField,
     Typography
 } from '@mui/material';
@@ -10,6 +10,8 @@ import {useForm} from "react-hook-form";
 
 import { useState} from "react";
 import * as React from "react";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -51,151 +53,145 @@ const UserSearchForm_Organization = ({applySearch}) => {
                   border={false}
                   content={false}>
 
-            <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        <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}}>
-                        <TextField
-                            fullWidth
-                            {...register("orgName")}
-                            id="orgName"
-                            label="Org Name"
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <TextField
-                            fullWidth
-                            {...register("brNoStr")}
-                            id="brNoStr"
-                            label="BR No."
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
+            <form onSubmit={handleSubmit(onSubmit)} >
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Search Form
+                        </Typography>
                     </Grid>
+                    {/*row 2*/}
 
+                    <Grid container display="flex" alignItems={"center"}>
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
-                        <TextField
-                            fullWidth
-                            {...register("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}}>
-                        <TextField
-                            fullWidth
-                            {...register("contactPerson")}
-                            id="contactPerson"
-                            label="Name"
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
-
-                    <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}}>
-                        <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"
-                                    size="small"
-                                    options={["All", "Active","Locked","Not verified"]}
-                                    value={accountFilter}   
-                                    onChange={(event, newValue) => {
-                                    if (newValue !== null){
-                                        setAccountFilter(newValue);
-                                    }
-                                }} 
-                                    renderInput={(params) => (
-                                    <TextField {...params}
-                                        label="Status"
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
+                            <TextField
+                                fullWidth
+                                {...register("orgName")}
+                                id="orgName"
+                                label="Org Name"
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                            <TextField
+                                fullWidth
+                                {...register("brNoStr")}
+                                id="brNoStr"
+                                label="BR No."
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                            <TextField
+                                fullWidth
+                                {...register("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}}>
+                            <TextField
+                                fullWidth
+                                {...register("contactPerson")}
+                                id="contactPerson"
+                                label="Name"
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <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}}>
+                            <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"
+                                        size="small"
+                                        options={["All", "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*/}
-                    {/*        fullWidth*/}
-                    {/*        {...register("subDivisionId")}*/}
-                    {/*        id="subDivision"*/}
-                    {/*        label="Sub-Division"*/}
-                    {/*    />*/}
-                    {/*</Grid>*/}
-
-                </Grid>
+                        </Grid>
+                        {/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/}
+                        {/*    <TextField*/}
+                        {/*        fullWidth*/}
+                        {/*        {...register("subDivisionId")}*/}
+                        {/*        id="subDivision"*/}
+                        {/*        label="Sub-Division"*/}
+                        {/*    />*/}
+                        {/*</Grid>*/}
 
-
-                {/*last row*/}
-                <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Clear</Typography>
-                        </Button>
                     </Grid>
 
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Submit</Typography>
-                        </Button>
+
+                    {/*last row*/}
+                    <Grid container maxWidth justifyContent="flex-end">
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ml:3, mr:3, mb:3}}>
+                            <Button
+                                variant="contained"
+                                onClick={resetForm}
+                                >
+                                Clear
+                            </Button>
+                        </Grid>
+
+                        <Grid item sx={{mb:3}}>
+                            <Button
+                                variant="contained"
+                                type="submit"
+                                >
+                                Submit
+                            </Button>
+                        </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>
diff --git a/src/pages/User/SearchPage_Organization/index.js b/src/pages/User/SearchPage_Organization/index.js
index 98f9553..e789caa 100644
--- a/src/pages/User/SearchPage_Organization/index.js
+++ b/src/pages/User/SearchPage_Organization/index.js
@@ -77,7 +77,7 @@ const UserSearchPage_Organization = () => {
                     </div>
                 </Grid>
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <SearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}
diff --git a/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js b/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
index 3b2c1c7..8c8d6fa 100644
--- a/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
+++ b/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Typography
 } from '@mui/material';
@@ -10,6 +9,8 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import { useNavigate } from "react-router";
+import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -37,83 +38,82 @@ const UserGroupSearchForm = ({ applySearch }) => {
         >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h5">Search Form</Typography>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                    {/*row 1*/}
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Search Form
+                        </Typography>
                     </Grid>
-                </CardContent>
+                    {/*row 2*/}
 
-                {/*row 2*/}
-                <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                        <TextField
-                            fullWidth
-                            {...register("name")}
-                            id='userGroupName'
-                            label="User Group Name"
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
-                    </Grid>
+                    <Grid container display="flex" alignItems={"center"}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("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 }}>
-                        <TextField
-                            fullWidth
-                            {...register("description")}
-                            id="userGroupDescription"
-                            label="User Group Description"
-                            InputLabelProps={{
-                                shrink: true
-                            }}
-                        />
+                        <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>
-                </Grid>
 
-                {/*last row*/}
-                <Grid container direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    sx={{ mt: 3 }}
-                >
-                    <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1 }}>
-                        <Button
-                            variant="contained"
-                            onClick={handleNewGroupClick}
-                            startIcon={<AddCircleOutlineIcon sx={{alignItems:"center"}}/>}
-                            >
-                            <Typography variant="h5">New Group</Typography>
-                        </Button>
-                    </Grid>
-                    <Grid item xs={8} md={8} sx={{ ml: 3, mr: 3 }}>
-                        <Grid container maxWidth justifyContent="flex-end">
-                            <Grid item sx={{ ml: 3, mr: 3 }}>
-                                <Button
-                                    size="large"
-                                    variant="contained"
-                                    onClick={resetForm}
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}>
-                                    <Typography variant="h5">Clear</Typography>
-                                </Button>
-                            </Grid>
+                    {/*last row*/}
+                    <Grid container direction="row"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        sx={{ mb: 3 }}
+                    >
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item xs={3} md={3} sx={{ ml: 3}}>
+                            <Button
+                                variant="contained"
+                                onClick={handleNewGroupClick}
+                                startIcon={<AddCircleOutlineIcon sx={{alignItems:"center"}}/>}
+                                >
+                                New Group
+                            </Button>
+                        </Grid>
+                        <Grid item xs={8} md={8}>
+                            <Grid container maxWidth justifyContent="flex-end">
+                                <Grid item sx={{mr:3}}>
+                                    <Button
+                                        variant="contained"
+                                        onClick={resetForm}
+                                    >
+                                        Clear
+                                    </Button>
+                                </Grid>
 
-                            <Grid item sx={{ ml: 3, mr: 3 }}>
-                                <Button
-                                    size="large"
-                                    variant="contained"
-                                    type="submit"
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}>
-                                    <Typography variant="h5">Search</Typography>
-                                </Button>
+                                <Grid item >
+                                    <Button
+                                        variant="contained"
+                                        type="submit"
+                                        sx={{
+                                            textTransform: 'capitalize',
+                                            alignItems: 'end'
+                                        }}>
+                                        Search
+                                    </Button>
+                                </Grid>
                             </Grid>
                         </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>
diff --git a/src/pages/pnspsUserGroupSearchPage/index.js b/src/pages/pnspsUserGroupSearchPage/index.js
index fbde832..c0bb997 100644
--- a/src/pages/pnspsUserGroupSearchPage/index.js
+++ b/src/pages/pnspsUserGroupSearchPage/index.js
@@ -79,13 +79,15 @@ const UserGroupSearchPanel = () => {
                 <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>
+                            <Typography ml={15} color='#FFF' variant="h4">
+                                View User Group
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>
 
                 {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
+                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                     <UserGroupSearchForm applySearch={applySearch} />
                 </Grid>
                 {/*row 2*/}