add applicaiton status table with api

src/pages/gldApplicationDetailPage/ClientDetailCard.js

@@ -23,6 +23,7 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 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";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ClientDetailCard = (
@@ -39,6 +40,7 @@ const ClientDetailCard = (
     const {register, 
         // getValues
     } = useForm()
+    const navigate = useNavigate()
 
     useEffect(() => {
         //if user data from parent are not null
@@ -56,6 +58,13 @@ const ClientDetailCard = (
         }
     }, [currentApplicationDetailData]);
 
+    const handleViewClick = () => () => {
+        console.log(currentApplicationDetailData)
+        currentApplicationDetailData.type == "ORG"?
+        navigate('/orgUser/'+ currentApplicationDetailData.id):
+        navigate('/indUser/'+ currentApplicationDetailData.id);
+    };
+
     // useEffect(() => {
     //     //upload latest data to parent
     //     const values = getValues();
@@ -86,7 +95,7 @@ const ClientDetailCard = (
                             <Button
                                 // size="large"
                                 variant="contained"
-                                // onClick={handleNewUserClick}
+                                onClick={handleViewClick()}
                                 sx={{
                                     textTransform: 'capitalize',
                                     alignItems: 'end',

src/pages/gldApplicationDetailPage/index.js

@@ -102,7 +102,7 @@ const DashboardDefault = () => {
               </Grid>
               <Grid item xs={12}>
                 <Box xs={12} ml={4} mt={3}>
-                  <TabTableDetail />
+                  <TabTableDetail applicationDetailData={applicationDetailData}/>
                 </Box>
               </Grid>
             </Grid>

src/pages/gldApplicationDetailPage/tabTableDetail/BaseGrid.js

@@ -17,13 +17,13 @@ export default function BaseGrid({rows}) {
         {
             id: 'appNo',
             field: 'appNo',
-            headerName: '申請編號',
+            headerName: 'Application No.',
             flex: 1,
         },
         {
             id: 'created',
             field: 'created',
-            headerName: '提交日期',
+            headerName: 'Created',
             flex: 1,
             valueGetter:(params)=>{
                 return DateUtils.datetimeStr(params?.value);
@@ -32,7 +32,7 @@ export default function BaseGrid({rows}) {
         {
             id: 'contactPerson',
             field: 'contactPerson',
-            headerName: '聯絡人',
+            headerName: 'Contact Person',
             flex: 2,
             renderCell: (params) => {
                 let phone = JSON.parse(params.row.contactTelNo);
@@ -58,7 +58,7 @@ export default function BaseGrid({rows}) {
         {
             id: 'remarks',
             field: 'remarks',
-            headerName: '我的備註',
+            headerName: 'remarks',
             flex: 3,
         },
         {

src/pages/gldApplicationDetailPage/tabTableDetail/ProofTab.js

@@ -0,0 +1,76 @@
+// material-ui
+import * as React from 'react';
+import {
+    DataGrid,
+} from "@mui/x-data-grid";
+import {
+    Button
+} from '@mui/material';
+// import * as DateUtils from "utils/DateUtils"
+// import * as StatusUtils from "./PublicNoteStatusUtils";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function ProofTab({rows}) {
+    const [rowModesModel] = React.useState({});
+
+    const columns = [
+        {
+            id: 'proofRef',
+            field: 'proofRef',
+            headerName: 'Proof Ref.',
+            flex: 1,
+        },
+        {
+            id: 'proofSent',
+            field: 'proofSent',
+            headerName: 'Proof Return',
+            flex: 1,
+        },
+        {
+            id: 'proofReturn',
+            field: 'proofReturn',
+            headerName: 'Proof Return',
+            flex: 1,
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+        },
+        {
+            id: 'fee',
+            field: 'fee',
+            headerName: 'Fee (HKD)',
+            flex: 2,
+        },
+        {
+            field: 'detail',
+            type: 'actions',
+            headerName: '',
+            width: 50,
+            cellClassName: 'actions',
+            renderCell: () => {
+                return <Button onClick={()=>{}}>查看詳細</Button>;
+            },
+        }
+    ];
+
+    return (
+        <div style={{height:'20%', width: '100%'}}>
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                editMode="row"
+                rowModesModel={rowModesModel}
+                initialState={{
+                    pagination: {
+                        paginationModel: {page: 0, pageSize: 5},
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                autoHeight = {true}
+            />
+        </div>
+    );
+}

src/pages/gldApplicationDetailPage/tabTableDetail/StatusHistoryTab.js

@@ -0,0 +1,64 @@
+// material-ui
+import * as React from 'react';
+import {
+    DataGrid,
+} from "@mui/x-data-grid";
+// import dayjs from "dayjs";
+// import {
+//     Button
+// } from '@mui/material';
+// import * as DateUtils from "utils/DateUtils"
+import * as StatusUtils from "../../PublicNotice/ListPanel/PublicNoteStatusUtils";
+
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function StatusHistoryTab({rows}) {
+    const [rowModesModel] = React.useState({});
+
+    const columns = [
+        {
+            id: 'created',
+            field: 'created',
+            headerName: 'Date',
+            valueGetter: (params) => {
+                const value = params.value
+                return value[0]+"/"+value[1]+"/"+value[2]+" "+value[3]+":"+value[4]+":"+value[5]
+            },
+            // valueFormatter: (params) => dayjs(params.value).format('DD/MM/YYYY'),
+            flex: 1,
+        },
+        {
+            id: 'createdBy',
+            field: 'createdBy',
+            headerName: 'Changed By',
+            flex: 1,
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            renderCell: (params) => {
+                return [StatusUtils.getStatusEng(params)]
+            },
+        },
+    ];
+
+    return (
+        <div style={{height:'20%', width: '100%'}}>
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                editMode="row"
+                rowModesModel={rowModesModel}
+                initialState={{
+                    pagination: {
+                        paginationModel: {page: 0, pageSize: 5},
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                autoHeight = {true}
+            />
+        </div>
+    );
+}

src/pages/gldApplicationDetailPage/tabTableDetail/TabTable.js

@@ -9,7 +9,7 @@ import {
 
 import { TabPanel, TabContext, TabList } from '@mui/lab';
 import { 
-    // useEffect, 
+    useEffect, 
     useState } from "react";
 // import { useNavigate } from "react-router-dom";
 import * as React from "react";
@@ -19,20 +19,20 @@ import * as React from "react";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const BaseGrid = Loadable(lazy(() => import('./BaseGrid')));
-const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab')));
+const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab')));
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
-// const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab')));
+const ProofTab = Loadable(lazy(() => import('./ProofTab')));
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const PublicNotice = () => {
+const PublicNotice = ({applicationDetailData}) => {
     const [submittedList, ] = useState([]);
     const [inProgressList, ] = useState([]);
-    const [pendingPaymentList, ] = useState([]);
-    const [isLoading,] = useState(false);
+    const [onReady,setOnReady] = useState(false);
     const [selectedTab, setSelectedTab] = useState("1");
     // const navigate = useNavigate();
+    const [statusHistoryList, setStatusHistoryList] = useState([]);
 
 
     // useEffect(() => {
@@ -43,18 +43,20 @@ const PublicNotice = () => {
         window.location.reload(false);
     }
 
-    // const loadData = () => {
-    //     setLoding(true);
-    //     HttpUtils.get({
-    //         url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST_ListByStatus}`,
-    //         onSuccess: function (response) {
-    //             setSubmittedList(response["submitted"]);
-    //             setInProgressList(response["inProgress"]);
-    //             setPendingPaymentList(response["pendingPayment"]);
-    //             setPendingPublishList(response["pendingPublish"]);
-    //         }
-    //     });
-    // };
+    useEffect(() => {
+        //if user data from parent are not null
+        // console.log(applicationDetailData)
+        if (Object.keys(applicationDetailData).length > 0) {
+            setStatusHistoryList(applicationDetailData.statusHistoryList);
+        }
+    }, [applicationDetailData]);
+
+    useEffect(() => {
+        //if state data are ready and assign to different field
+        if (statusHistoryList.length > 0) {
+            setOnReady(true);
+        }
+    }, [statusHistoryList]);
 
     // useEffect(() => {
     //     setLoding(false);
@@ -69,7 +71,7 @@ const PublicNotice = () => {
     // }
 
     return (
-        isLoading ?
+        !onReady ?
             <LoadingComponent />
             :
             <Grid container sx={{minHeight: '40vh'}}>
@@ -78,13 +80,13 @@ const PublicNotice = () => {
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={"已提交(" + submittedList.length + ")"} value="1" />
-                                <Tab label={"處理中(" + inProgressList.length + ")"} value="2" />
-                                <Tab label={"待付款(" + pendingPaymentList.length + ")"} value="3" />
+                                <Tab label={"Proof(" + submittedList.length + ")"} value="1" />
+                                <Tab label={"Payment(" + inProgressList.length + ")"} value="2" />
+                                <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
                             </TabList>
                         </Box>
                         <TabPanel value="1">
-                            <BaseGrid
+                            <ProofTab
                                 rows={submittedList}
                                 reloadFunction={reloadPage}
                             />
@@ -96,8 +98,8 @@ const PublicNotice = () => {
                             />
                         </TabPanel>
                         <TabPanel value="3">
-                            <PendingPaymentTab
-                                rows={pendingPaymentList}
+                            <StatusHistoryTab
+                                rows={statusHistoryList}
                                 reloadFunction={reloadPage}
                             />
                         </TabPanel>