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

src/pages/pnspsUserDetailPage/UserAuthTable.js

@@ -15,7 +15,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserAuthTable({setSelectedRow, userAuth}) {
+export default function UserAuthTable({setSelectedRow, userAuth,isNewRecord}) {
     const [authData, setAuthData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth);
@@ -35,7 +35,7 @@ export default function UserAuthTable({setSelectedRow, userAuth}) {
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        if (authData.length > 0) {
+        if (authData.length > 0||isNewRecord) {
             setOnReady(true);
         }
     }, [authData]);

src/pages/pnspsUserDetailPage/UserAuthorityCard.js

@@ -16,7 +16,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData}) => {
+const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData,isNewRecord}) => {
     const [currentAuthData, setCurrentAuthData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [selectedRow, setSelectedRow] = useState([]);
@@ -57,6 +57,7 @@ const UserAuthorityCard = ({isCollectData, updateUserAuthList,userData}) => {
                 <UserAuthTable
                     userAuth={userData.authIds}
                     setSelectedRow={setSelectedRow}
+                    isNewRecord={isNewRecord}
                 />
             </MainCard>
     );

src/pages/pnspsUserDetailPage/UserGroupCard.js

@@ -15,7 +15,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => {
+const UserGroupCard = ({isCollectData, updateUserGroupList,userData,isNewRecord}) => {
     const [currentUserData, setCurrentUserData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [selectedRow, setSelectedRow] = useState([]);
@@ -30,7 +30,6 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => {
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        // if (Object.keys(userData).length > 0 &&currentUserData !== undefined) {
         if (Object.keys(userData).length > 0 &&currentUserData !== undefined) {
             setOnReady(true);
         }
@@ -56,6 +55,7 @@ const UserGroupCard = ({isCollectData, updateUserGroupList,userData}) => {
                 <UserGroupTable
                     userGroup={userData.groupIds}
                     setSelectedRow={setSelectedRow}
+                    isNewRecord={isNewRecord}
                 />
             </MainCard>
     );

src/pages/pnspsUserDetailPage/UserGroupTable.js

@@ -13,7 +13,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserGroupTable({setSelectedRow, userGroup}) {
+export default function UserGroupTable({setSelectedRow, userGroup,isNewRecord}) {
     const [groupData, setGroupData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userGroup);
@@ -33,8 +33,7 @@ export default function UserGroupTable({setSelectedRow, userGroup}) {
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        console.log(groupData)
-        if (groupData!== undefined) {
+        if (groupData.length > 0||isNewRecord) {
             setOnReady(true);
         }
     }, [groupData]);

src/pages/pnspsUserDetailPage/UserInformationCard.js

@@ -1,7 +1,10 @@
 // material-ui
 import {
-    FormControl, IconButton,
-    Grid, InputAdornment, Typography, FormLabel,
+    FormControl, 
+    IconButton,
+    Grid, 
+    InputAdornment, 
+    Typography, FormLabel,
     OutlinedInput,
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
@@ -96,40 +99,42 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                                 </Grid>
                             </Grid>
                         </Grid>
+                        {
+                            isNewRecord?
+                            <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                                <Grid container alignItems={"center"}>
+                                    <Grid item xs={4} s={4} md={4} lg={4}
+                                        sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                        <FormLabel required>Password:</FormLabel>
+                                    </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Password:
+                                    <Grid item xs={7} s={7} md={7} lg={6}>
+                                        <FormControl variant="outlined" fullWidth required>
+                                            <OutlinedInput
+                                                fullWidth
+                                                size="small"
+                                                {...register("password")}
+                                                id='password'
+                                                type={showPassword ? 'text' : 'password'}
+                                                disabled = {!isNewRecord}
+                                                endAdornment={
+                                                    <InputAdornment position="end">
+                                                        <IconButton
+                                                            aria-label="toggle password visibility"
+                                                            onClick={handleClickShowPassword}
+                                                            onMouseDown={handleMouseDownPassword}
+                                                            edge="end"
+                                                        >
+                                                            {showPassword ? <VisibilityOff /> : <Visibility />}
+                                                        </IconButton>
+                                                    </InputAdornment>
+                                                }
+                                            />
+                                        </FormControl>
+                                    </Grid>
                                 </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <FormControl variant="outlined" fullWidth required>
-                                        <OutlinedInput
-                                            fullWidth
-                                            size="small"
-                                            {...register("password")}
-                                            id='password'
-                                            type={showPassword ? 'text' : 'password'}
-                                            disabled
-                                            endAdornment={
-                                                <InputAdornment position="end">
-                                                    <IconButton
-                                                        aria-label="toggle password visibility"
-                                                        onClick={handleClickShowPassword}
-                                                        onMouseDown={handleMouseDownPassword}
-                                                        edge="end"
-                                                    >
-                                                        {showPassword ? <VisibilityOff /> : <Visibility />}
-                                                    </IconButton>
-                                                </InputAdornment>
-                                            }
-                                        />
-                                    </FormControl>
-                                </Grid>
-                            </Grid>
-                        </Grid>
+                            </Grid>: null
+                        }
 
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                             <Grid container alignItems={"center"}>

src/pages/pnspsUserDetailPage/index.js

@@ -9,7 +9,7 @@ import {useEffect, useState} from "react";
 import * as React from "react";
 import axios from "axios";
 import {useNavigate,useParams} from "react-router-dom";
-import {GLD_USER_PATH,DELETE_USER} from "../../utils/ApiPathConst";
+import {GLD_USER_PATH,DELETE_USER,POST_ADMIN_USER_REGISTER} from "../../utils/ApiPathConst";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -130,29 +130,58 @@ const UserMaintainPage = () => {
         if(userConfirm && onReady){
             const deletedUserAuth = getDeletedRecordWithRefList(refUserData.authIds,userAuthData);
             const deletedUserGroup = getDeletedRecordWithRefList(refUserData.groupIds,userGroupData);
-            axios.post(`${GLD_USER_PATH}/${params.id}`,
-                {
-                    "enName": editedCustomerData.enName,
-                    "locked": editedCustomerData.locked,
-                    // "password": editedCustomerData.password,
-                    // "phone": editedCustomerData.phone,
-                    "post": editedCustomerData.post,
-                    "emailAddress": editedCustomerData.emailAddress,
-                    "addGroupIds": userGroupData,
-                    "removeGroupIds": deletedUserGroup,
-                    "addAuthIds": userAuthData,
-                    "removeAuthIds": deletedUserAuth,
-                },
-            ).then((response) => {
-                if (response.status === 204) {
-                    // notifySaveSuccess();
-                    navigate('/userSearchview');
-                }
-            })
-                .catch(error => {
-                    console.log(error);
-                    return false;
+            // console.log(userGroupData)
+            // console.log(userAuthData)
+            if( parseInt(params.id) >= -1){
+                axios.post(`${GLD_USER_PATH}/${params.id}`,
+                    {
+                        "enName": editedCustomerData.enName,
+                        "locked": editedCustomerData.locked,
+                        // "password": editedCustomerData.password,
+                        // "phone": editedCustomerData.phone,
+                        "post": editedCustomerData.post,
+                        "emailAddress": editedCustomerData.emailAddress,
+                        "addGroupIds": userGroupData,
+                        "removeGroupIds": deletedUserGroup,
+                        "addAuthIds": userAuthData,
+                        "removeAuthIds": deletedUserAuth,
+                    },
+                ).then((response) => {
+                    if (response.status === 204) {
+                        // notifySaveSuccess();
+                        navigate('/userSearchview');
+                    }
+                })
+                    .catch(error => {
+                        console.log(error);
+                        return false;
+                });
+            }else{
+                axios.post(POST_ADMIN_USER_REGISTER,
+                    {
+                        "username": editedCustomerData.username,
+                        "name": editedCustomerData.username,
+                        "password": editedCustomerData.password,
+                        "enName": editedCustomerData.enName,
+                        "locked": editedCustomerData.locked,
+                        "emailAddress": editedCustomerData.emailAddress,
+                        "post": editedCustomerData.post,
+                        "addGroupIds": userGroupData,
+                        "removeGroupIds": [],
+                        "addAuthIds": userAuthData,
+                        "removeAuthIds": [],
+                    },
+                ).then((response) => {
+                    if (response.status === 200) {
+                        // notifySaveSuccess();
+                        navigate('/userSearchview');
+                    }
+                })
+                    .catch(error => {
+                        console.log(error);
+                        return false;
                 });
+            }
         }
         setUserConfirm(false);
     }, [editedCustomerData,userGroupData,userAuthData]);

src/pages/pnspsUserGroupDetailPage/GroupAuthCard.js

@@ -15,7 +15,7 @@ const GroupAuthTable = Loadable(lazy(() => import('./GroupAuthTable')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData}) => {
+const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData,isNewRecord}) => {
     const [currentAuthData, setCurrentAuthData] = React.useState({});
     const [onReady, setOnReady] = useState(false);
     const [selectedRow, setSelectedRow] = useState([]);
@@ -62,6 +62,7 @@ const GroupAuthCard = ({isCollectData, updateUserAuthList,userGroupData}) => {
                 <GroupAuthTable
                     userAuth={userGroupData.authIds}
                     setSelectedRow={setSelectedRow}
+                    isNewRecord={isNewRecord}
                 />
             </MainCard>
     );

src/pages/pnspsUserGroupDetailPage/GroupAuthTable.js

@@ -15,7 +15,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function GroupAuthTable({setSelectedRow, userAuth}) {
+export default function GroupAuthTable({setSelectedRow, userAuth,isNewRecord}) {
     const [authData, setAuthData] = useState([]);
     const [onReady, setOnReady] = useState(false);
     const [currentSelectedRow, setCurrentSelectedRow] = useState(userAuth);
@@ -35,7 +35,7 @@ export default function GroupAuthTable({setSelectedRow, userAuth}) {
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        if (authData.length > 0) {
+        if (authData.length > 0||isNewRecord) {
             setOnReady(true);
         }
     }, [authData]);

src/pages/pnspsUserGroupDetailPage/UserAddCard.js

@@ -7,7 +7,7 @@ import {
 import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useEffect, useState} from "react";
-import {GET_GROUP_MEMBER_LIST_PATH, GET_USER_COMBO_LIST} from "../../utils/ApiPathConst";
+import {GET_GROUP_MEMBER_LIST_PATH, GET_USER_GLD_COMBO_LIST} from "../../utils/ApiPathConst";
 import axios from "axios";
 import {apiPath} from "../../auth/utils";
 import Autocomplete from "@mui/material/Autocomplete";
@@ -43,7 +43,7 @@ const UserAddCard = ({isCollectData, updateGroupMember,userGroupData,isNewRecord
     }
 
     useEffect(() => {
-        axios.get(`${apiPath}${GET_USER_COMBO_LIST}`)
+        axios.get(`${apiPath}${GET_USER_GLD_COMBO_LIST}`)
             .then((response) => {
                 if (response.status === 200) {
                     setUserComboList(response.data.records);

src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js

@@ -7,9 +7,13 @@ import {
 import MainCard from "../../components/MainCard";
 import {useForm} from "react-hook-form";
 import * as React from "react";
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import {useNavigate} from "react-router";
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserGroupSearchForm = ({applySearch}) => {
+    const navigate = useNavigate();
 
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
@@ -20,6 +24,11 @@ const UserGroupSearchForm = ({applySearch}) => {
         reset();
     }
 
+    const handleNewGroupClick = (id) => {
+        // console.log(id)
+        navigate('/userGroup/'+ id);
+    };
+
     return (
         <MainCard xs={12} md={12} lg={12}
                   border={false}
@@ -56,32 +65,51 @@ const UserGroupSearchForm = ({applySearch}) => {
 
 
                 {/*last row*/}
-                <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                <Grid container direction="row"
+                    justifyContent="space-between"
+                    alignItems="center">
+                       
+                    <Grid item xs={3} md={3} sx={{ml:1, mr:1, mb:3, mt:3}}>
                         <Button
                             size="large"
                             variant="contained"
-                            onClick={resetForm}
+                            onClick={handleNewGroupClick}
                             sx={{
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Clear
+                            <AddCircleOutlineIcon/>
+                            New Group
                         </Button>
                     </Grid>
+                    <Grid item xs={8} md={8} sx={{ml:3, mr:3, mb:3, mt:3}}>
+                        <Grid container >
+                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                                <Button
+                                    size="large"
+                                    variant="contained"
+                                    onClick={resetForm}
+                                    sx={{
+                                        textTransform: 'capitalize',
+                                        alignItems: 'end'
+                                    }}>
+                                    Clear
+                                </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'
-                            }}>
-                            Submit
-                        </Button>
+                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                                <Button
+                                    size="large"
+                                    variant="contained"
+                                    type="submit"
+                                    sx={{
+                                        textTransform: 'capitalize',
+                                        alignItems: 'end'
+                                    }}>
+                                    Search
+                                </Button>
+                            </Grid>
+                        </Grid>
                     </Grid>
                 </Grid>
             </form>

src/pages/pnspsUserGroupSearchPage/index.js

@@ -20,14 +20,15 @@ import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
 const UserGroupSearchForm = Loadable(lazy(() => import('./UserGroupSearchForm')));
 const UserGroupTable = Loadable(lazy(() => import('./UserGroupTable')));
+// import {useNavigate} from "react-router";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserGroupSearchPanel = () => {
-
     const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
+    // const navigate = useNavigate();
 
     useEffect(() => {
         getGroupList();
@@ -66,21 +67,12 @@ const UserGroupSearchPanel = () => {
             :
             <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
                 <Grid item xs={12} md={12} lg={12}>
-                    <Grid container justifyContent="flex-start" alignItems="center">
-                        <Grid item xs={12} height='50px'>
-                            <Stack direction="row" height='100%' justifyContent="flex-start" alignItems="center">
-                                <Typography ml={2} align="center" variant="h5">View User Group</Typography>
+                    <Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}>
+                        <Grid item xs={2} height='50px'>
+                            <Stack direction="row" height='100%' justifyContent="space-between" alignItems="center">
+                                <Typography align="center" variant="h5">View User Group</Typography>
                             </Stack>
                         </Grid>
-                        {/* <Grid item xs={1} sx={{ml: 3, mr: 3}}>
-                            <Button
-                                size="large"
-                                variant="contained"
-                                type="submit"
-                            >
-                                Create
-                            </Button>
-                        </Grid> */}
                     </Grid>
                 </Grid>
 

src/pages/pnspsUserSearchPage/DummyComboRecord.js

@@ -1,77 +0,0 @@
-export const eventType = [
-    {label: '同心', type: 1},
-    {label: '創新', type: 2},
-    {label: '惠民', type: 3},
-    {label: '傳承', type: 3},
-];
-
-export const divisionType = [
-    {key: 1, label: 'Railways Branch', type: 1},
-    {key: 2, label: 'Electricity and Energy Efficiency Branch ', type: 2},
-    {key: 3, label: 'Gas and General Legislation Branch', type: 3},
-    {key: 4, label: 'Engineering Services Branch 1', type: 4},
-    {key: 5, label: 'Engineering Services Branch 2', type: 5},
-    {key: 6, label: 'Engineering Services Branch 3', type: 6},
-];
-
-export const subDivision1 = [
-    {key: 1, label: 'Sub Division 1 of Railways Branch', type: 1},
-    {key: 2, label: 'Sub Division 2 of Railways Branch', type: 2},
-    {key: 3, label: 'Sub Division 3 of Railways Branch', type: 3},
-    {key: 4, label: 'Sub Division 4 of Railways Branch', type: 4},
-];
-
-export const subDivision2 = [
-    {key: 1, label: 'Sub Division 1 of Electricity and Energy Efficiency Branch', type: 1},
-    {key: 2, label: 'Sub Division 2 of Electricity and Energy Efficiency Branch', type: 2},
-    {key: 3, label: 'Sub Division 3 of Electricity and Energy Efficiency Branch', type: 3},
-];
-
-export const subDivision3 = [
-    {key: 1, label: 'Sub Division 1 of Gas and General Legislation Branch', type: 1},
-    {key: 2, label: 'Sub Division 2 of Gas and General Legislation Branch', type: 2},
-    {key: 3, label: 'Sub Division 3 of Gas and General Legislation Branch', type: 3},
-];
-
-export const subDivision4 = [
-    {key: 1, label: 'Sub Division 1 of Engineering Services Branch 1', type: 1},
-    {key: 2, label: 'Sub Division 2 of Engineering Services Branch 1', type: 2},
-    {key: 3, label: 'Sub Division 3 of Engineering Services Branch 1', type: 3},
-    {key: 4, label: 'Sub Division 4 of Engineering Services Branch 1', type: 4},
-];
-
-export const subDivision5 = [
-    {key: 1, label: 'Sub Division 1 of Engineering Services Branch 2', type: 1},
-    {key: 2, label: 'Sub Division 2 of Engineering Services Branch 2', type: 2},
-    {key: 3, label: 'Sub Division 3 of Engineering Services Branch 2', type: 3},
-];
-
-export const subDivision6 = [
-    {key: 1, label: 'Sub Division 1 of Engineering Services Branch 3', type: 1},
-    {key: 2, label: 'Sub Division 2 of Engineering Services Branch 3', type: 2},
-    {key: 3, label: 'Sub Division 3 of Engineering Services Branch 3', type: 3},
-];
-
-export const tableRecord = [
-    {trackingNo: 84564564, name: 'Camera', fat: 40, carbs: 2, protein: 4057},
-    {trackingNo: 98764564, name: 'Laptop', fat: 300, carbs: 0, protein: 180139},
-    {trackingNo: 98756325, name: 'Mobile', fat: 355, carbs: 1, protein: 90989},
-    {trackingNo: 98652366, name: 'Handset', fat: 50, carbs: 1, protein: 10239},
-    {trackingNo: 13286564, name: 'Computer', fat: 100, carbs: 1, protein: 8334},
-    {trackingNo: 86739658, name: 'TV', fat: 99, carbs: 0, protein: 410780},
-    {trackingNo: 13256498, name: 'Keyboard', fat: 125, carbs: 2, protein: 70999},
-    {trackingNo: 98753263, name: 'Mouse', fat: 89, carbs: 2, protein: 10570},
-    {trackingNo: 98753275, name: 'Desktop', fat: 185, carbs: 1, protein: 98063},
-    {trackingNo: 98753291, name: 'Chair', fat: 100, carbs: 0, protein: 14001},
-];
-
-export const tableRecordTemp = [
-    {id:1 ,eventNo: 84564564, eventDate:"2022-03-20" , category: '同心', hrmPlan: 'Visionary Leadership', name: 'HKMA Best Annual Reports Awards - The Electrical and Mechanical Services Department Annual Report 2020/21 - Certificate of Excellence'},
-    {id:2 ,eventNo: 98764564, eventDate:"2022-05-12" , category: '同心', hrmPlan: 'Visionary Leadership', name: 'HKMA Best Annual Reports Awards - The Electrical and Mechanical Services Department Annual Report 2020/21- Best New Entry'},
-    {id:3 ,eventNo: 98756325, eventDate:"2022-06-04" , category: '創新', hrmPlan: 'Visionary Leadership', name: '19th Hong Kong Occupational Safety and Health Award - Gold Award - The Virtual Reality-based Lift Maintenance training programme'},
-    {id:4 ,eventNo: 98652366, eventDate:"2022-08-16" , category: '創新', hrmPlan: 'Visionary Leadership', name: 'BIM Achievement 2022 - BIM Organisations 2022'},
-    {id:5 ,eventNo: 13286564, eventDate:"2022-09-30" , category: '惠民', hrmPlan: 'Visionary Leadership', name: 'Civil Service Outstanding Service Award Scheme 2022 - Excellence in Team Collaboration (Internal Service) - Innovation Facilitator'},
-    {id:6 ,eventNo: 86739658, eventDate:"2022-10-25" , category: '惠民', hrmPlan: 'Visionary Leadership', name: 'Civil Service Outstanding Service Award Scheme 2022 - Excellence in Team Collaboration (Management of Crisis) - E&M 100 - CHT Rescue Team'},
-    {id:7 ,eventNo: 13256498, eventDate:"2022-11-21" , category: '傳承', hrmPlan: 'Visionary Leadership', name: '11th Guangzhou/Hong Kong/Macao/Chengdu Youth Skills Competition - Three TTs from the EMSD got the top three prizes in the Electrical Installations trade of the Hong Kong Region qualifying competition'},
-    {id:8 ,eventNo: 98753263, eventDate:"2022-12-31" , category: '傳承', hrmPlan: 'Visionary Leadership', name: 'VTC 2021 Outstanding Apprentices Scheme - Outstanding Apprentice - Mr. LEE King (TTII)'},
-];

src/pages/pnspsUserSearchPage/UserSearchForm.js

@@ -14,11 +14,14 @@ import {
 
 import Checkbox from "@mui/material/Checkbox";
 import * as React from "react";
-// import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import {useNavigate} from "react-router";
+
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const UserSearchForm = ({applySearch}) => {
+    const navigate = useNavigate();
 
     const [type, setType] = useState([]);
     const [locked, setLocked] = useState(false);
@@ -51,9 +54,10 @@ const UserSearchForm = ({applySearch}) => {
         reset();
     }
 
-    // const handleNewUserClick = (id) => () => {
-    //     navigate('/user/'+ id);
-    // };
+    const handleNewUserClick = (id) => {
+        // console.log(id)
+        navigate('/user/'+ id);
+    };
 
     return (
         <MainCard xs={12} md={12} lg={12}
@@ -132,37 +136,11 @@ const UserSearchForm = ({applySearch}) => {
                 </Grid>
 
                 {/*last row*/}
-                <Grid container maxWidth justifyContent="flex-start" direction="row"  alignItems="center">
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            Clear
-                        </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'
-                            }}>
-                            Submit
-                        </Button>
-                    </Grid>                            
-                    {/* <Grid item sx={{ml:6, mr:6, mb:6, mt:6}}>
-                        <Grid container  direction="row" justifyContent="flex-start" alignItems="center">
-                        </Grid>
-                    </Grid> */}
-                    {/* <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                <Grid container direction="row"
+                    justifyContent="space-between"
+                    alignItems="center">
+                       
+                    <Grid item xs={3} md={3} sx={{ml:1, mr:1, mb:3, mt:3}}>
                         <Button
                             size="large"
                             variant="contained"
@@ -172,9 +150,38 @@ const UserSearchForm = ({applySearch}) => {
                                 alignItems: 'end'
                             }}>
                             <AddCircleOutlineIcon/>
-                            New User 
+                            New User
                         </Button>
-                    </Grid> */}
+                    </Grid>
+                    <Grid item xs={8} md={8} sx={{ml:3, mr:3, mb:3, mt:3}}>
+                        <Grid container >
+                            <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                                <Button
+                                    size="large"
+                                    variant="contained"
+                                    onClick={resetForm}
+                                    sx={{
+                                        textTransform: 'capitalize',
+                                        alignItems: 'end'
+                                    }}>
+                                    Clear
+                                </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'
+                                    }}>
+                                    Search
+                                </Button>
+                            </Grid>
+                        </Grid>
+                    </Grid>
                 </Grid>
             </form>
         </MainCard>

src/pages/pnspsUserSearchPage/index.js

@@ -1,6 +1,9 @@
 // material-ui
 import {
-    Grid, Typography
+    Grid, 
+    Typography,
+    Stack,
+    // Button
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import {useEffect, useState} from "react";
@@ -8,9 +11,6 @@ import axios from "axios";
 import {GLD_USER_PATH} from "../../utils/ApiPathConst";
 import * as React from "react";
 
-// import LoadingComponent from "../extra-pages/LoadingComponent";
-// import SearchForm from "./UserSearchForm";
-// import EventTable from "./UserTable";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
@@ -20,7 +20,6 @@ const EventTable = Loadable(lazy(() => import('./UserTable')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSettingPage = () => {
-
     const [record,setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
@@ -61,10 +60,16 @@ const UserSettingPage = () => {
         !onReady ?
             <LoadingComponent/>
             :
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-            <Grid item xs={12} sx={{mb: -2.25}}>
-                <Typography variant="h5">View User</Typography>
-            </Grid>
+        <Grid container sx={{minHeight: '90vh', paddingTop: '53px'}}>
+            <Grid item xs={12} md={12} lg={12}>
+                    <Grid direction="row" container justifyContent="flex-start" alignItems="center" ml={2}>
+                        <Grid item xs={2} height='50px'>
+                            <Stack direction="row" height='100%' justifyContent="space-between" alignItems="center">
+                                <Typography align="center" variant="h5">View User</Typography>
+                            </Stack>
+                        </Grid>
+                    </Grid>
+                </Grid>
 
             {/*row 1*/}
             <Grid item xs={12} md={12} lg={12}>

src/utils/ApiPathConst.js

@@ -11,6 +11,7 @@ export const GET_GROUP_AUTH_LIST = '/group/auth/combo';
 export const GLD_USER_PATH = apiPath+'/user/gld';
 export const GET_AUTH_LIST = '/user/auth/combo';
 export const GET_USER_COMBO_LIST = '/user/combo';
+export const GET_USER_GLD_COMBO_LIST = '/user/combo/gld';
 export const GET_USER_LOCK = apiPath+'/user/lock';
 export const GET_USER_UNLOCK = apiPath+'/user/unlock';