update ui

src/pages/PublicNoticeDetail_GLD/index.js

@@ -43,6 +43,7 @@ const PublicNoticeDetail_GLD = () => {
   const params = useParams();
   // const navigate = useNavigate()
   const [applicationDetailData, setApplicationDetailData] = useState({});
+  const [proofList, setProofList] = useState([]);
   // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
   const [isLoading, setLoading] = useState(false);
   const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
@@ -83,7 +84,7 @@ const PublicNoticeDetail_GLD = () => {
   const title = groupNo != null ? ("Application / " + appNo + ", " + gazetteIssue + ", " + issueNum + " , " + groupNo) : ("Application / " + appNo + ", " + gazetteIssue + ", " + issueNum)
 
   useEffect(() => {
-    loadApplicationDetail()
+    loadApplicationDetail();
   }, []);
 
   // useEffect(() => {
@@ -110,6 +111,7 @@ const PublicNoticeDetail_GLD = () => {
             setIssueNum(" No. " + gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
             setGroupNo(response.data.data.groupNo);
+            setProofList(response.data.proofList);
             setLoading(false);
           }
         })
@@ -171,9 +173,9 @@ const PublicNoticeDetail_GLD = () => {
         onComplatedClick()
       } else if (getStatus == "withdraw") {
         onWithdrawnClick()
-      } else if (getStatus == "notAccepted"){
+      } else if (getStatus == "notAccepted") {
         onNotAcceptClick(getReason);
-      } else if (getStatus == "resubmit"){
+      } else if (getStatus == "resubmit") {
         onReSubmitClick();
       }
     }
@@ -266,8 +268,8 @@ const PublicNoticeDetail_GLD = () => {
   };
 
   useEffect(() => {
-    const status = applicationDetailData.data!=undefined?applicationDetailData.data.status:""
-    if(status === "submitted" && params.id > 0 && getUploadStatus){
+    const status = applicationDetailData.data != undefined ? applicationDetailData.data.status : ""
+    if (status === "submitted" && params.id > 0 && getUploadStatus) {
       axios.get(`${SET_PUBLIC_NOTICE_STATUS_REVIEWED}/${params.id}`)
         .then((response) => {
           if (response.status === 204) {
@@ -279,7 +281,7 @@ const PublicNoticeDetail_GLD = () => {
           console.log(error);
           return false;
         });
-    }else{
+    } else {
       setUploadStatus(false);
     }
   }, [getUploadStatus]);
@@ -346,7 +348,10 @@ const PublicNoticeDetail_GLD = () => {
               </Grid>
               <Grid item xs={12} md={10}>
                 <Box xs={12} ml={4} mt={3}>
-                  <TabTableDetail applicationDetailData={applicationDetailData} />
+                  <TabTableDetail
+                    applicationDetailData={applicationDetailData}
+                    proofList={proofList}
+                  />
                 </Box>
               </Grid>
             </Grid>

src/pages/PublicNoticeDetail_GLD/tabTableDetail/ProofTab.js

@@ -1,54 +1,53 @@
 // material-ui
 import * as React from 'react';
+import * as DateUtils from "utils/DateUtils";
 import {FiDataGrid} from "components/FiDataGrid";
-import {
-    Button
-} from '@mui/material';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
 
+    function currencyFormat(num) {
+        return num.toLocaleString('en-US', {
+            minimumFractionDigits: 2 
+          });
+    }
+
+
     const columns = [
         {
-            id: 'proofRef',
-            field: 'proofRef',
-            headerName: 'Proof Ref.',
+           
+            id: 'refNo',
+            field: 'refNo',
+            headerName: 'Proof No.',
             flex: 1,
         },
         {
-            id: 'proofSent',
-            field: 'proofSent',
-            headerName: 'Proof Return',
+            id: 'created',
+            field: 'created',
+            headerName: 'Proof Date',
             flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
         },
         {
-            id: 'proofReturn',
-            field: 'proofReturn',
-            headerName: 'Proof Return',
-            flex: 1,
-        },
-        {
-            id: 'status',
-            field: 'status',
-            headerName: 'Status',
+            id: 'replyDate',
+            field: 'replyDate',
+            headerName: 'Confirmed/Return Date',
             flex: 1,
+            valueGetter: (params) => {
+                return params?.value?DateUtils.datetimeStr(params?.value):"";
+            }
         },
         {
             id: 'fee',
             field: 'fee',
-            headerName: 'Fee (HKD)',
-            flex: 2,
+            headerName: 'Fee',
+            flex: 1,
+            valueGetter: (params) => {
+                return (params?.value)?"$ "+currencyFormat(params?.value):"";
+            }
         },
-        {
-            field: 'detail',
-            type: 'actions',
-            headerName: '',
-            width: 50,
-            cellClassName: 'actions',
-            renderCell: () => {
-                return <Button onClick={()=>{}}>查看詳細</Button>;
-            },
-        }
     ];
 
     return (

src/pages/PublicNoticeDetail_GLD/tabTableDetail/TabTable.js

@@ -21,31 +21,28 @@ const ProofTab = Loadable(lazy(() => import('./ProofTab')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const PublicNotice = ({applicationDetailData}) => {
-    const [submittedList, ] = React.useState([]);
-    const [inProgressList, ] = React.useState([]);
+const PublicNotice = ({applicationDetailData, proofList}) => {
+    const [_proofList, setProofList] = React.useState([]);
+    const [inProgressList,] = React.useState([]);
     const [onReady,setOnReady] = React.useState(false);
     const [selectedTab, setSelectedTab] = React.useState("1");
     // const navigate = useNavigate();
     const [statusHistoryList, setStatusHistoryList] = React.useState([]);
 
-
-    // useEffect(() => {
-    //     loadData();
-    // }, []);
-
     const reloadPage = () => {
         window.location.reload(false);
     }
 
     React.useEffect(() => {
-        //if user data from parent are not null
-        // console.log(applicationDetailData)
         if (Object.keys(applicationDetailData).length > 0) {
             setStatusHistoryList(applicationDetailData.statusHistoryList);
         }
     }, [applicationDetailData]);
 
+    React.useEffect(() => {
+        setProofList(proofList);
+    }, [proofList]);
+
     React.useEffect(() => {
         //if state data are ready and assign to different field
         if (statusHistoryList.length > 0) {
@@ -75,14 +72,14 @@ const PublicNotice = ({applicationDetailData}) => {
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={"Proof(" + submittedList.length + ")"} value="1" />
+                                <Tab label={"Proof(" + (_proofList?.length?_proofList?.length:0) + ")"} value="1" />
                                 <Tab label={"Payment(" + inProgressList.length + ")"} value="2" />
                                 <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
                             </TabList>
                         </Box>
                         <TabPanel value="1">
                             <ProofTab
-                                rows={submittedList}
+                                rows={_proofList}
                                 reloadFunction={reloadPage}
                             />
                         </TabPanel>