update UI

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -13,16 +13,16 @@ const MainCard = Loadable(lazy(() => import('components/MainCard')));
 import { useForm } from "react-hook-form";
 import {
     useEffect,
-    useState
+    useState,
+    lazy
 } from "react";
 
 import Loadable from 'components/Loadable';
 
-import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import * as HttpUtils from "utils/HttpUtils"
 import * as DateUtils from "utils/DateUtils"
-import * as UrlUtils from "utils/ApiPathConst"
+import {CHECK_CREATE_PROOF} from "utils/ApiPathConst"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 
 import DoneIcon from '@mui/icons-material/Done';
@@ -120,7 +120,7 @@ const ApplicationDetailCard = (
     const onProofClick = () => {
         if (applicationDetailData.data.groupNo) {
             HttpUtils.get({
-                url: UrlUtils.CHECK_CREATE_PROOF + "/" + currentApplicationDetailData.id,
+                url: CHECK_CREATE_PROOF + "/" + currentApplicationDetailData.id,
                 onSuccess: function (responeData) {
                     if (responeData.success == true) {
                         window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer");

src/pages/PublicNotice/Details_GLD/ClientDetailCard.js

@@ -13,18 +13,18 @@ import * as React from "react";
 import { useForm } from "react-hook-form";
 import {
     useEffect,
-    useState
+    useState,
+    lazy
 } from "react";
 // import Checkbox from "@mui/material/Checkbox";
 import Loadable from 'components/Loadable';
-import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 //import {useParams} from "react-router-dom";
 import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch';
 import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
 import HighlightOff from '@mui/icons-material/HighlightOff';
-// import {useNavigate} from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
+import { isGrantedAny } from "auth/utils";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ClientDetailCard = (
@@ -36,8 +36,8 @@ const ClientDetailCard = (
 ) => {
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
-    const [brExpiryDate,setBrExpiryDate] = useState("");
-    const [brNo,setBrNo] = useState("");
+    const [brExpiryDate, setBrExpiryDate] = useState("");
+    const [brNo, setBrNo] = useState("");
     const [onReady, setOnReady] = useState(false);
     const [companyName, setCompanyName] = useState({ enCompanyName: "", chCompanyName: "" });
     const { register,
@@ -49,7 +49,7 @@ const ClientDetailCard = (
         //if user data from parent are not null
         if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) {
             setCurrentApplicationDetailData(applicationDetailData.userData);
-            if (applicationDetailData.orgDetail != null){
+            if (applicationDetailData.orgDetail != null) {
                 var orgDetail = applicationDetailData.orgDetail?.data;
                 setBrExpiryDate(DateUtils.dateValue(orgDetail?.brExpiryDate));
                 setBrNo(orgDetail?.brNo);
@@ -58,7 +58,7 @@ const ClientDetailCard = (
                     chCompanyName: orgDetail?.chCompanyName
                 }
                 setCompanyName(companyNameData)
-            }else{
+            } else {
                 var userData = applicationDetailData.userData;
                 setBrExpiryDate(DateUtils.dateValue(userData?.brExpiryDate));
                 setBrNo(userData?.brNo);
@@ -91,7 +91,7 @@ const ClientDetailCard = (
     //         }
     //     }
     // }, [currentApplicationDetailData, orgDetailData]);
-    
+
     useEffect(() => {
         if (brNo != undefined && brNo.length > 0) {
             console.log(brExpiryDate)
@@ -101,11 +101,11 @@ const ClientDetailCard = (
             if (targetDate < currentDate) {
                 alert("The BR is expired.")
             } else {
-                var timeDiff = Math.abs(currentDate.getTime()-targetDate.getTime());
+                var timeDiff = Math.abs(currentDate.getTime() - targetDate.getTime());
                 console.log(timeDiff)
                 var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                 console.log(diffDays)
-                if (diffDays <= 7&&diffDays > 0){
+                if (diffDays <= 7 && diffDays > 0) {
                     alert("The BR is expiring.")
                 }
             }
@@ -144,29 +144,34 @@ const ClientDetailCard = (
                 border={false}
                 content={false}
                 sx={{ xs: "12", md: "7" }}>
-                <Grid container spacing={1} direction="row">
-                    <Grid item xs={12} md={7} >
-                        <Stack
-                            direction="row"
-                            justifyContent="flex-start"
-                            alignItems="center"
-                            spacing={2}
-                            mb={2}
-                        >
-                            <Button
-                                // size="large"
-                                variant="contained"
-                                onClick={handleViewClick()}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end',
-                                }}>
-                                <ContentPasteSearchIcon />
-                                <Typography variant="h5" ml={1} mr={1}> View</Typography>
-                            </Button>
-                        </Stack>
-                    </Grid>
-                </Grid>
+
+                {isGrantedAny(["VIEW_USER", "MAINTAIN_USER"]) ?
+                    <Grid container spacing={1} direction="row">
+                        <Grid item xs={12} md={7} >
+                            <Stack
+                                direction="row"
+                                justifyContent="flex-start"
+                                alignItems="center"
+                                spacing={2}
+                                mb={2}
+                            >
+                                <Button
+                                    // size="large"
+                                    variant="contained"
+                                    onClick={handleViewClick()}
+                                    sx={{
+                                        textTransform: 'capitalize',
+                                        alignItems: 'end',
+                                    }}>
+                                    <ContentPasteSearchIcon />
+                                    <Typography variant="h5" ml={1} mr={1}> View</Typography>
+                                </Button>
+                            </Stack>
+                        </Grid>
+                    </Grid> : <></>
+                }
+
+
                 <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                     Client Details
                 </Typography>
@@ -201,7 +206,7 @@ const ClientDetailCard = (
                                     size="small"
                                     {...register("type",
                                         {
-                                            value: currentApplicationDetailData.type == "ORG" ? "Organisation":"Individual",
+                                            value: currentApplicationDetailData.type == "ORG" ? "Organisation" : "Individual",
                                         })}
                                     id='type'
                                     sx={{

src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js

@@ -1,62 +1,52 @@
 // material-ui
 import {
-    FormControl, 
+    FormControl,
     Button,
-    Grid, 
-    Stack, 
+    Grid,
+    Stack,
     Typography, FormLabel,
     OutlinedInput,
     Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
-import * as React from "react";
-import {useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 import {
     useEffect,
-    useState
-    } from "react";
-// import Checkbox from "@mui/material/Checkbox";
+    useState,
+    lazy
+} from "react";
 import Loadable from 'components/Loadable';
-import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
-//import {useParams} from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
 import EditNoteIcon from '@mui/icons-material/EditNote';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const GazetteDetailCard = (
-    {   applicationDetailData,
+    { applicationDetailData,
         setStatus
-        // isCollectData,
-        // updateUserObject,
-        // isNewRecord
     }
-    ) => {
-    // const params = useParams();
-    // const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
-    const [onReady,setOnReady] = useState(false);
-    const [issueNum,setIssueNum] = useState("");
-    const [issueDate,setIssueDate] = useState("");
-    const [gazetteCode,setGazetteCode] = useState("");
-    const [groupTitle,setGroupTitle] = useState("");
+) => {
+    const [onReady, setOnReady] = useState(false);
+    const [issueNum, setIssueNum] = useState("");
+    const [issueDate, setIssueDate] = useState("");
+    const [gazetteCode, setGazetteCode] = useState("");
+    const [groupTitle, setGroupTitle] = useState("");
     const [verified, setVerified] = useState(null);
     const [currentStatus, setCurrentStatus] = useState({});
 
     const [isWarningPopUp, setIsWarningPopUp] = useState(false);
     const [warningText, setWarningText] = useState("");
 
-    const {register, 
+    const { register,
         // getValues
     } = useForm()
 
     useEffect(() => {
-        //if user data from parent are not null
-        // console.log(applicationDetailData)
         if (Object.keys(applicationDetailData).length > 0) {
             setCurrentStatus(applicationDetailData.data.status);
             setVerified(applicationDetailData.userData.verifiedBy ? true : false);
-            setIssueNum(applicationDetailData.gazetteIssueDetail.volume+"/"+applicationDetailData.gazetteIssueDetail.issueYear
-            +" No. "+applicationDetailData.gazetteIssueDetail.issueNo);
+            setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.issueYear
+                + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
             setGazetteCode(applicationDetailData.data.groupNo)
             console.log(gazetteCode)
@@ -73,7 +63,7 @@ const GazetteDetailCard = (
     }, [issueNum]);
 
     const groupDetailClick = () => () => {
-        if(gazetteCode==null){
+        if (gazetteCode == null) {
             setStatus("genGazetteCode");
             return;
         }
@@ -81,29 +71,18 @@ const GazetteDetailCard = (
         setIsWarningPopUp(true);
     };
 
-    const callback =()=>{
+    const callback = () => {
         setIsWarningPopUp(false);
         setStatus("genGazetteCode");
     }
 
-    // useEffect(() => {
-    //     //upload latest data to parent
-    //     const values = getValues();
-    //     const objectData ={
-    //         ...values,
-    //         locked: locked,
-    //     }
-    //     updateUserObject(objectData);
-    // }, [isCollectData]);
-
-
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
+                border={false}
+                content={false}
             >
                 {verified && currentStatus != "notAccepted" ?
                     <Grid container spacing={4} direction="row">
@@ -119,7 +98,7 @@ const GazetteDetailCard = (
                                     // size="large"
                                     variant="contained"
                                     onClick={groupDetailClick()}
-                                    disabled={applicationDetailData.data.status!="submitted"&&applicationDetailData.data.status!="reviewed"}
+                                    disabled={applicationDetailData.data.status != "submitted" && applicationDetailData.data.status != "reviewed"}
                                     sx={{
                                         textTransform: 'capitalize',
                                         alignItems: 'end'
@@ -130,19 +109,19 @@ const GazetteDetailCard = (
                             </Stack>
                         </Grid>
                     </Grid>
-                :null}
-                <Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
-                        Gazette Details
+                    : null}
+                <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                    Gazette Details
                 </Typography>
                 <form>
                     <Grid container direction="column">
                         <Grid item xs={12} md={12}>
                             <Grid container direction="row" justifyContent="space-between"
                                 alignItems="center">
-                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
                                         </Grid>
 
@@ -168,10 +147,10 @@ const GazetteDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5.5} lg={5.5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
                                         </Grid>
 
@@ -199,11 +178,11 @@ const GazetteDetailCard = (
                                 </Grid>
                             </Grid>
                             <Grid container direction="row" justifyContent="space-between"
-                                alignItems="center" sx={{mb:{lg:-3}}}>
-                                <Grid item xs={12} md={6} lg={6} sx={{mb: 1}}>
+                                alignItems="center" sx={{ mb: { lg: -3 } }}>
+                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
                                         </Grid>
 
@@ -229,10 +208,10 @@ const GazetteDetailCard = (
                                         </Grid>
                                     </Grid>
                                 </Grid>
-                                <Grid item xs={12} md={5.5} lg={5.5} sx={{mb: 1, ml:1}}>
+                                <Grid item xs={12} md={5.5} lg={5.5} sx={{ mb: 1, ml: 1 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={4} lg={4}
-                                            sx={{display: 'flex', alignItems: 'center'}}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel>
                                         </Grid>
 
@@ -263,26 +242,26 @@ const GazetteDetailCard = (
                     </Grid>
                 </form>
                 <div>
-                <Dialog
-                    open={isWarningPopUp}
-                    onClose={() => setIsWarningPopUp(false)}
-                    PaperProps={{
-                        sx: {
-                            minWidth: '40vw',
-                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
-                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
-                        }
-                    }}>
-                    <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
-                    <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">No</Typography></Button>
-                        <Button color="success" onClick={()=>callback()}><Typography variant="h5">Yes</Typography></Button>
-                    </DialogActions>
-                </Dialog>
-            </div>
+                    <Dialog
+                        open={isWarningPopUp}
+                        onClose={() => setIsWarningPopUp(false)}
+                        PaperProps={{
+                            sx: {
+                                minWidth: '40vw',
+                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                            }
+                        }}>
+                        <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
+                        <DialogContent style={{ display: 'flex', }}>
+                            <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">No</Typography></Button>
+                            <Button color="success" onClick={() => callback()}><Typography variant="h5">Yes</Typography></Button>
+                        </DialogActions>
+                    </Dialog>
+                </div>
             </MainCard>
     );
 };

src/pages/PublicNotice/Details_GLD/StatusChangeDialog.js

@@ -6,7 +6,6 @@ import {
 // material-ui
 import {
   Button,
-  // Link,
   Stack,
   Typography,
   Dialog,
@@ -16,9 +15,10 @@ import {
   DialogTitle,
   FormLabel,
   Autocomplete,
-  TextField
+  TextField,
+  Grid
 } from '@mui/material';
-import { Grid } from "../../../../node_modules/@mui/material/index";
+
 import * as ComboData from "utils/ComboData";
 import { useFormik, FormikProvider } from 'formik';
 import * as yup from 'yup';

src/pages/PublicNotice/Details_GLD/index.js

@@ -1,6 +1,7 @@
 import {
   useEffect,
-  useState
+  useState,
+  lazy
 } from "react";
 
 // material-ui
@@ -12,7 +13,6 @@ import {
   Button
 } from '@mui/material';
 import Loadable from 'components/Loadable';
-import { lazy } from 'react';
 import {
   // useNavigate,
   useParams