fix bug

src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js

@@ -1,5 +1,5 @@
 // material-ui
-import * as React from 'react';
+import {useState, useEffect, useMemo} from 'react';
 import {
     useMediaQuery
 } from '@mui/material';
@@ -17,11 +17,11 @@ export default function SubmittedTab({ appId, setCount }) {
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
-    const [_appId, set_appId] = React.useState({});
-    React.useEffect(() => {
+    const [_appId, set_appId] = useState({});
+    useEffect(() => {
         set_appId(appId);
     }, [appId]);
-    React.useEffect(() => {
+    useEffect(() => {
         set_appId(appId);
     }, []);
 
@@ -73,7 +73,7 @@ export default function SubmittedTab({ appId, setCount }) {
                 <FiDataGrid
                     columns={columns}
                     customPageSize={10}
-                    doLoad={React.useMemo(() => ({
+                    doLoad={useMemo(() => ({
                         url: GET_PUBLIC_NOTICE_APPLY_DETAIL_PAYMENT+"/"+_appId,
                         params: {},
                         callback: function (responseData) {

src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js

@@ -1,5 +1,5 @@
 // material-ui
-import * as React from 'react';
+import {useMemo} from 'react';
 import {
  useMediaQuery,
 } from '@mui/material';
@@ -104,7 +104,7 @@ export default function ProofTab({appId, setCount}) {
             <FiDataGrid
                 columns={columns}
                 customPageSize={10}
-                doLoad={React.useMemo(() => ({
+                doLoad={useMemo(() => ({
                     url: GET_PUBLIC_NOTICE_APPLY_DETAIL_PROOF+"/"+appId,
                     params: {},
                     callback: function (responseData) {

src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js

@@ -1,10 +1,6 @@
 // material-ui
-import * as React from 'react';
+import {useState,useEffect } from 'react';
 import {FiDataGrid} from "components/FiDataGrid";
-// import dayjs from "dayjs";
-// import {
-//     Button
-// } from '@mui/material';
 import * as DateUtils from "utils/DateUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import {useTheme} from "@emotion/react";
@@ -18,11 +14,11 @@ export default function StatusHistoryTab({appId, setCount}) {
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
-    const [_appId, set_appId] = React.useState({});
-    React.useEffect(() => {
+    const [_appId, set_appId] = useState({});
+    useEffect(() => {
         set_appId(appId);
     }, [appId]);
-    React.useEffect(() => {
+    useEffect(() => {
         set_appId(appId);
     }, []);
 

src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js

@@ -8,11 +8,9 @@ import {
 } from '@mui/material';
 
 import { TabPanel, TabContext, TabList } from '@mui/lab';
-import * as React from "react";
-
+import {useState, useEffect, lazy} from "react";
 
 import Loadable from 'components/Loadable';
-import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../../extra-pages/LoadingComponent')));
 const ProofTab = Loadable(lazy(() => import('./ProofTab')));
 const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));
@@ -22,15 +20,11 @@ const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const PublicNotice = ({ appId, proofCount, paymentCount, statusHistoryCount, setProofCount, setPaymentCount, setStatusHistoryCount }) => {
-    // const [_proofCount, setProofCount] = React.useState(proofCount);
-    // const [_paymentCount, setPaymentCount] = React.useState(paymentCount);
-    // const [_statusHistoryCount, setStatusHistoryCount] = React.useState(statusHistoryCount);
-
-    const [onReady, setOnReady] = React.useState(false);
-    const [selectedTab, setSelectedTab] = React.useState("1");
 
+    const [onReady, setOnReady] = useState(false);
+    const [selectedTab, setSelectedTab] = useState("1");
 
-    React.useEffect(() => {
+    useEffect(() => {
         setOnReady(true);
     }, [appId]);
 

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -15,12 +15,12 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 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 * as HttpUtils from "utils/HttpUtils"
@@ -39,24 +39,21 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
 import DownloadIcon from '@mui/icons-material/Download';
 import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
-import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     { applicationDetailData,
         setStatus,
-        // updateUserObject,
-        // isNewRecord
+        fee
     }
 ) => {
     const [isPopUp, setIsPopUp] = useState(false);
     const [errorText, setErrorText] = useState("");
     const [errorPopUp, setErrorPopUp] = useState(false);
-    const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
-    const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
+    const [paymentHoldedErrText, setPaymentHoldedErrText] = useState("");
+    const [paymentHoldedErr, setPaymentHoldedErr] = useState(false);
     // const params = useParams();
     const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
-    const [fee, setFee] = useState(0);
     const [companyName, setCompanyName] = useState({});
     const [fileDetail, setfileDetail] = useState({});
     const [onReady, setOnReady] = useState(false);
@@ -71,26 +68,20 @@ const ApplicationDetailCard = (
     useEffect(() => {
         //if user data from parent are not null
         // console.log(applicationDetailData)
-        if (Object.keys(applicationDetailData).length > 0 && applicationDetailData.data !== null) {
+        if (Object.keys(applicationDetailData)?.length > 0 && applicationDetailData.data !== null) {
             setCurrentApplicationDetailData(applicationDetailData.data);
             setCompanyName(applicationDetailData.companyName);
             setfileDetail(applicationDetailData.fileDetail);
             setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.issueYear
                 + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
-
-            for (let i = 0; i < applicationDetailData.proofList.length; i++) {
-                if (applicationDetailData.proofList[i].action == true) {
-                    setFee(applicationDetailData.proofList[i].fee);
-                }
-            }
         }
     }, [applicationDetailData]);
 
     useEffect(() => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
-        if (Object.keys(currentApplicationDetailData).length > 0) {
+        if (Object.keys(currentApplicationDetailData)?.length > 0) {
             setOnReady(true);
         }
     }, [currentApplicationDetailData]);

src/pages/PublicNotice/Details_Public/index.js

@@ -1,6 +1,7 @@
 import React, {
   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
@@ -31,7 +31,7 @@ import { useNavigate } from "react-router-dom";
 
 import ForwardIcon from '@mui/icons-material/Forward';
 import { notifyActionSuccess } from "utils/CommonFunction";
-import {FormattedMessage, useIntl} from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 // ==============================|| Body - DEFAULT ||============================== //
 
@@ -41,8 +41,6 @@ const DashboardDefault = () => {
   const [appNo, setAapNo] = useState("");
   const [gazetteIssue, setGazetteIssue] = useState("");
   const [issueNum, setIssueNum] = useState("");
-  const [proofList, setProofList] = useState([]);
-  const [paymentList, setPaymentList] = useState([]);
   const navigate = useNavigate()
   const intl = useIntl();
   //statusWindow
@@ -50,6 +48,10 @@ const DashboardDefault = () => {
   const [getStatus, setStatus] = useState("");
   const [statusWindowAccepted, setStatusWindowAccepted] = useState(false);
 
+  const [proofCount, setProofCount] = useState(0);
+  const [paymentCount, setPaymentCount] = useState(0);
+  const [fee, setFee] = useState(0);
+
   const title = appNo + ", " + gazetteIssue + ", " + issueNum
 
   const _sx = {
@@ -92,8 +94,10 @@ const DashboardDefault = () => {
             setAapNo(response.data.data.appNo);
             setGazetteIssue(gazetteIssueDetail.issueYear + " Vol " + gazetteIssueDetail.volume);
             setIssueNum(" No. " + gazetteIssueDetail.issueNo);
-            setProofList(response.data.proofList);
-            setPaymentList(response.data.paymentList);
+
+            setProofCount(response.data.proofCount);
+            setPaymentCount(response.data.paymentCount);
+            setFee(response.data.fee);
           }
         })
         .catch(error => {
@@ -154,21 +158,21 @@ const DashboardDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
-              <FormattedMessage id="myPublicNotice"/>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+              <FormattedMessage id="myPublicNotice" />
             </Typography>
           </Stack>
         </div>
       </Grid>
       <Grid item xs={12} md={12}>
         <Grid container direction="column" justifyContent="flex-start" alignItems="center">
-          <Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}>
+          <Grid item xs={12} width={{ xs: "90%", sm: "90%", md: "60%", lg: "60%" }}>
             <Stack direction="row">
               <Button
-                  aria-label={intl.formatMessage({id: 'back'})}
-                  title={intl.formatMessage({id: 'back'})}
-                  sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }}
-                  variant="outlined" onClick={() => { navigate("/publicNotice") }}
+                aria-label={intl.formatMessage({ id: 'back' })}
+                title={intl.formatMessage({ id: 'back' })}
+                sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }}
+                variant="outlined" onClick={() => { navigate("/publicNotice") }}
               >
                 <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
               </Button>
@@ -176,18 +180,22 @@ const DashboardDefault = () => {
             </Stack>
           </Grid>
           <Grid item width={{ md: "60%", xs: "90%" }}>
-            <Box xs={12} mt={3} sx={{  border: '0px groove grey', borderRadius: '10px', ..._sx }}>
+            <Box xs={12} mt={3} sx={{ border: '0px groove grey', borderRadius: '10px', ..._sx }}>
               <ApplicationDetailCard
                 setStatus={setStatus}
                 applicationDetailData={applicationDetailData}
+                fee={fee}
               />
             </Box>
           </Grid>
-          <Grid item width={{md:"75%"}}>
-            <Box xs={12} mt={3} sx={{  border: '0px groove grey', borderRadius: '10px', ..._sx, mb:2 }}>
+          <Grid item width={{ md: "75%" }}>
+            <Box xs={12} mt={3} sx={{ border: '0px groove grey', borderRadius: '10px', ..._sx, mb: 2 }}>
               <TabTableDetail
-                proofList={proofList}
-                paymentList={paymentList}
+                appId={params.id}
+                proofCount={proofCount}
+                paymentCount={paymentCount}
+                setProofCount={setProofCount}
+                setPaymentCount={setPaymentCount}
               />
             </Box>
           </Grid>

src/pages/PublicNotice/Details_Public/tabTableDetail/PaymentTab.js

@@ -1,5 +1,5 @@
 // material-ui
-import * as React from 'react';
+import {useState, useEffect, useMemo} from 'react';
 import {
      useMediaQuery
 } from '@mui/material';
@@ -10,10 +10,10 @@ import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
 import { clickableLink } from 'utils/CommonFunction';
-// import * as StatusUtils from "./PublicNoteStatusUtils";
+import {GET_PUBLIC_NOTICE_APPLY_DETAIL_PAYMENT } from "utils/ApiPathConst"
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SubmittedTab({ rows }) {
+export default function SubmittedTab({ appId, setCount }) {
 
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
@@ -21,6 +21,14 @@ export default function SubmittedTab({ rows }) {
     
   const { locale } = intl;
 
+  const [_appId, set_appId] = useState({});
+  useEffect(() => {
+      set_appId(appId);
+  }, [appId]);
+  useEffect(() => {
+      set_appId(appId);
+  }, []);
+
     const columns = [
         {
             field: 'actions',
@@ -67,9 +75,15 @@ export default function SubmittedTab({ rows }) {
         <>
             <div style={{ height:'20%', width: '100%' }}>
                 <FiDataGrid
-                    rows={rows}
                     columns={columns}
-                    customPageSize={5}
+                    customPageSize={10}
+                    doLoad={useMemo(() => ({
+                        url: GET_PUBLIC_NOTICE_APPLY_DETAIL_PAYMENT+"/"+_appId,
+                        params: {},
+                        callback: function (responseData) {
+                            setCount(responseData?.count);
+                        }
+                    }), [appId])}
                 />
             </div>
         </>

src/pages/PublicNotice/Details_Public/tabTableDetail/ProofTab.js

@@ -1,5 +1,5 @@
 // material-ui
-import * as React from 'react';
+import {useMemo} from 'react';
 import {
  useMediaQuery,
 } from '@mui/material';
@@ -10,9 +10,10 @@ import * as FormatUtils from "utils/FormatUtils"
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
 import { clickableLink } from 'utils/CommonFunction';
+import {GET_PUBLIC_NOTICE_APPLY_DETAIL_PROOF } from "utils/ApiPathConst"
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function ProofTab({rows}) {
+export default function ProofTab({appId, setCount}) {
     const intl = useIntl();
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
@@ -74,9 +75,15 @@ export default function ProofTab({rows}) {
     return (
         <div style={{height:'20%', width: '100%'}}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
-                customPageSize={5}
+                customPageSize={10}
+                doLoad={useMemo(() => ({
+                    url: GET_PUBLIC_NOTICE_APPLY_DETAIL_PROOF+"/"+appId,
+                    params: {},
+                    callback: function (responseData) {
+                        setCount(responseData?.count);
+                    }
+                }), [appId])}
             />
         </div>
     );

src/pages/PublicNotice/Details_Public/tabTableDetail/StatusHistoryTab.js

@@ -1,22 +1,33 @@
 // material-ui
 import * as React from 'react';
 import {FiDataGrid} from "components/FiDataGrid";
-// import dayjs from "dayjs";
-// import {
-//     Button
-// } from '@mui/material';
 import * as DateUtils from "utils/DateUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
+import {GET_PUBLIC_NOTICE_APPLY_DETAIL_STATUS_HISTORY } from "utils/ApiPathConst"
+
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function StatusHistoryTab({rows}) {
+export default function StatusHistoryTab({appId, setCount}) {
+
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+
+    const [_appId, set_appId] = useState({});
+    useEffect(() => {
+        set_appId(appId);
+    }, [appId]);
+    useEffect(() => {
+        set_appId(appId);
+    }, []);
+
     const columns = [
         {
             id: 'created',
             field: 'created',
             headerName: 'Date',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -26,13 +37,15 @@ export default function StatusHistoryTab({rows}) {
             id: 'createdBy',
             field: 'createdBy',
             headerName: 'Changed By',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'status',
             field: 'status',
             headerName: 'Status',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return [StatusUtils.getStatusEng(params)]
             },
@@ -42,9 +55,15 @@ export default function StatusHistoryTab({rows}) {
     return (
         <div style={{height:'20%', width: '100%'}}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
-                customPageSize={5}
+                customPageSize={10}
+                doLoad={{
+                    url: GET_PUBLIC_NOTICE_APPLY_DETAIL_STATUS_HISTORY+"/"+_appId,
+                    params: {},
+                    callback: function (responseData) {
+                        setCount(responseData?.count);
+                    }
+                }}
             />
         </div>
     );

src/pages/PublicNotice/Details_Public/tabTableDetail/TabTable.js

@@ -8,12 +8,11 @@ import {
 } from '@mui/material';
 
 import { TabPanel, TabContext, TabList } from '@mui/lab';
-import * as React from "react";
+import { useState, useEffect, lazy } from "react";
 
 
 import Loadable from 'components/Loadable';
-import { lazy } from 'react';
-import {useIntl} from "react-intl";
+import { useIntl } from "react-intl";
 const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
 const ProofTab = Loadable(lazy(() => import('./ProofTab')));
 const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));
@@ -21,26 +20,15 @@ const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const PublicNotice = ({ proofList, paymentList }) => {
-    const [_proofList, setProofList] = React.useState([]);
-    const [_paymentList, setPaymentList] = React.useState([]);
-    const [onReady, setOnReady] = React.useState(false);
-    const [selectedTab, setSelectedTab] = React.useState("1");
-    const intl = useIntl();
-
-    const reloadPage = () => {
-        window.location.reload(false);
-    }
+const PublicNotice = ({ appId, proofCount, paymentCount, setProofCount, setPaymentCount }) => {
 
+    const [onReady, setOnReady] = useState(false);
+    const [selectedTab, setSelectedTab] = useState("1");
+    const intl = useIntl();
 
-    React.useEffect(() => {
-        setProofList(proofList);
+    useEffect(() => {
         setOnReady(true);
-    }, [proofList]);
-
-    React.useEffect(() => {
-        setPaymentList(paymentList);
-    }, [paymentList]);
+    }, [appId]);
 
     const handleChange = (event, newValue) => {
         setSelectedTab(newValue);
@@ -57,26 +45,26 @@ const PublicNotice = ({ proofList, paymentList }) => {
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
                                 <Tab
-                                    aria-label={intl.formatMessage({id: 'proofRecord'})}
+                                    aria-label={intl.formatMessage({ id: 'proofRecord' })}
                                     label={
-                                    intl.formatMessage({id: 'proofRecord'}) + " (" + _proofList.length + ") "} value="1"
+                                        intl.formatMessage({ id: 'proofRecord' }) + " (" + proofCount + ") "} value="1"
                                 />
                                 <Tab
-                                    aria-label={intl.formatMessage({id: 'paymentHistory'})}
-                                    label={ intl.formatMessage({id: 'paymentHistory'}) +" (" + _paymentList.length + ") "} value="2"
+                                    aria-label={intl.formatMessage({ id: 'paymentHistory' })}
+                                    label={intl.formatMessage({ id: 'paymentHistory' }) + " (" + paymentCount + ") "} value="2"
                                 />
                             </TabList>
                         </Box>
                         <TabPanel value="1">
                             <ProofTab
-                                rows={_proofList}
-                                reloadFunction={reloadPage}
+                                setCount={setProofCount}
+                                appId={appId}
                             />
                         </TabPanel>
                         <TabPanel value="2">
                             <PaymentTab
-                                rows={_paymentList}
-                                reloadFunction={reloadPage}
+                                setCount={setPaymentCount}
+                                appId={appId}
                             />
                         </TabPanel>
                     </TabContext>