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

src/components/FiDataGrid.js

@@ -110,7 +110,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
                             count={_rows.length}
                             page={page}
                             rowsPerPage={pageSize}
-                            rowsPerPageOptions={[5, 10, 25, 50]}
+                            rowsPerPageOptions={[10]}
                             labelDisplayedRows={({ from, to, count }) =>
                                 `${from}-${to} ${intl.formatMessage({ id: "of" })} ${count}`
                             }

src/pages/DemandNote/Create/SearchForm.js

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

src/pages/DemandNote/Create/index.js

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

src/pages/DemandNote/Search/DataGrid.js

@@ -18,6 +18,8 @@ import { notifyDownloadSuccess } from 'utils/CommonFunction';
 
 import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchDemandNote({ recordList, reloadFun, applySearch }) {
@@ -272,6 +274,7 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
     return (
         <div style={{ height: '100%', width: '100%' }}>
             <Grid container maxWidth justifyContent="flex-start">
+                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <input
                         id="uploadFileBtn"
@@ -295,62 +298,45 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                         <Button
                             component="span"
                             variant="contained"
-                            size="large"
                         >
-                            <Typography variant="h5">Attach DN</Typography>
+                            Attach DN
                         </Button>
                     </label>
                 </Grid>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={findReadyToSend}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Ready Send</Typography>
+                    >
+                        Ready Send
                     </Button>
                 </Grid>
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={() => setSendPopUp(true)}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Send DN</Typography>
+                    >
+                        Send DN
                     </Button>
                 </Grid>
 
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
-                        onClick={() => exportXml()}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Export XML</Typography>
+                        onClick={() => exportXml()}>
+                        Export GDNS
                     </Button>
                 </Grid>
 
                 <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                     <Button
-                        size="large"
                         variant="contained"
                         onClick={() => setConfirmPopUp(true)}
-                        sx={{
-                            textTransform: 'capitalize',
-                            alignItems: 'end'
-                        }}>
-                        <Typography variant="h5">Mark as Paid</Typography>
+                        >
+                        Mark as Paid
                     </Button>
                 </Grid>
+                </ThemeProvider>
             </Grid>
             <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
                 <FiDataGrid

src/pages/DemandNote/Search/SearchForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography
@@ -12,6 +11,8 @@ import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -88,14 +89,12 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
         >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3 }} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1 }} width="98%">
                     {/*row 1*/}
-                    <Grid item xs={12}>
-                        <CardContent sx={{ px: 2.5, pt: 3 }}>
-                            <Grid item justifyContent="space-between" alignItems="center">
-                                <Typography variant="h5">Search Form</Typography>
-                            </Grid>
-                        </CardContent>
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1, ml:3,mb:2.5}}>
+                        <Typography variant="h5" >
+                            Search Form
+                        </Typography>
                     </Grid>
                     {/*row 2*/}
                     <Grid container display="flex" alignItems={"center"}>
@@ -261,28 +260,25 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
 
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
-                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mb:3 }}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 onClick={resetForm}
                                 >
-                                <Typography variant="h5">Clear</Typography>
+                                Clear
                             </Button>
                         </Grid>
 
-                        <Grid item sx={{ ml: 3, mr: 3}}>
+                        <Grid item sx={{ ml: 3, mr: 3, mb:3}}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 type="submit"
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <Typography variant="h5">Submit</Typography>
+                            >
+                                Submit
                             </Button>
                         </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>

src/pages/DemandNote/Search/index.js

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

src/pages/GFMIS/SearchForm.js

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

src/pages/GFMIS/index.js

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

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

src/pages/Organization/SearchPage/index.js

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

src/pages/Payment/Search_GLD/SearchForm.js

@@ -10,6 +10,8 @@ import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as DateUtils from "utils/DateUtils";
 import * as ComboData from "utils/ComboData";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -44,7 +46,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
             >
 
             <form onSubmit={handleSubmit(onSubmit)} >
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: 2.5}} width="98%">
+                <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" >
@@ -148,32 +150,25 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
                 {/*last row*/}
                 <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{ ml: 3, mb: 3}}>
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Reset</Typography>
+                        >
+                            Reset
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <Button
-                            size="large"
                             variant="contained"
                             type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Submit</Typography>
+                        >
+                            Submit
                         </Button>
                     </Grid>
+                    </ThemeProvider>
                 </Grid>
             </form>
         </MainCard>

src/pages/Payment/Search_GLD/index.js

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

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -118,7 +118,7 @@ export default function BaseGrid({rows}) {
     }
 
     return (
-        <div style={{minHeight: 400, width: '100%', padding: 4}}>
+        <div style={{minHeight: 400, height:"100%", width: '100%', padding: 4}}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js

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

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -121,7 +121,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
     }
 
     return (
-        <div style={{ minHeight: 400, width: '100%' }}>
+        <div style={{ minHeight: 400, height: "100%", width: '100%' }}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}

src/pages/PublicNotice/ListPanel/index.js

@@ -129,9 +129,9 @@ const PublicNotice = () => {
 
                 {
                     JSON.parse(localStorage.getItem('userData')).creditor ? (
-                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ minHeight: '75vh', maxWidth: '1%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height:'100%', maxWidth: '1%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
-                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', }}>
+                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY:'auto' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
                                         <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
                                         <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
@@ -166,7 +166,7 @@ const PublicNotice = () => {
                             </TabContext>
                         </Grid>
                     ) : (
-                        <Grid item xs={12} sx={{ minHeight: '75vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sx={{ minHeight: '80vh',height:"100%", maxHeight:'300vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example">

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>

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

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>

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

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>

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

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>

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