public app add list tab

src/auth/utils.js

@@ -10,7 +10,7 @@ export const hostname = 'localhost';
 const hostPort = '8090';
 export const hostPath = `http://${hostname}:${hostPort}`;
 //export const apiPath = `http://192.168.0.112:8090/api`;
-export const apiPath = `${hostPath}/api`;
+export const apiPath = window.location.hostname.match("localhost")?`${hostPath}/api`:`/api`;
 //export const apiPath = `/api`;
 export const paymentPath = `https://pnspsdev.gld.gov.hk/payment`;
 export const iAmSmartPath = `https://<iAM_Smart_domain>`;

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

@@ -76,7 +76,7 @@ const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => {
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={"Proof(" + (_proofList?.length ? _proofList?.length : 0) + ")"} value="1" />
+                                <Tab label={"Proof(" + _proofList?.length??0 + ")"} value="1" />
                                 <Tab label={"Payment(" + _paymentList.length + ")"} value="2" />
                                 <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
                             </TabList>

src/pages/PublicNotice/Details_Public/index.js

@@ -21,13 +21,14 @@ import axios from "axios";
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCard')));
-// const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable')));
+const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
+const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable')));
 import {
   GET_PUBLIC_NOTICE_APPLY_DETAIL,
   SET_PUBLIC_NOTICE_STATUS_CANCELLED
 } from "utils/ApiPathConst";
 import { useNavigate } from "react-router-dom";
-const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
+
 import ForwardIcon from '@mui/icons-material/Forward';
 import { notifyActionSuccess } from "utils/CommonFunction";
 
@@ -39,7 +40,8 @@ const DashboardDefault = () => {
   const [appNo, setAapNo] = useState("");
   const [gazetteIssue, setGazetteIssue] = useState("");
   const [issueNum, setIssueNum] = useState("");
-  // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
+  const [proofList, setProofList] = useState([]);
+  const [paymentList, setPaymentList] = useState([]);
   const navigate = useNavigate()
 
   //statusWindow
@@ -90,6 +92,8 @@ const DashboardDefault = () => {
             setAapNo(response.data.data.appNo);
             setGazetteIssue(gazetteIssueDetail.year + " Vol " + gazetteIssueDetail.volume);
             setIssueNum(" No. " + gazetteIssueDetail.issueNo);
+            setProofList(response.data.proofList);
+            setPaymentList(response.data.paymentList);
           }
         })
         .catch(error => {
@@ -164,25 +168,23 @@ const DashboardDefault = () => {
               <Typography ml={3} mt={3} variant="h4">{title}</Typography>
             </Stack>
           </Grid>
-          {/* <Grid item xs={12} md={12} > */}
-          {/* <Grid container direction="column" alignItems="center"> */}
           <Grid item width="75%">
             <Box xs={12} mt={3} sx={{ p: 2, border: '0px groove grey', borderRadius: '10px', ..._sx }}>
               <ApplicationDetailCard
                 setStatus={setStatus}
                 applicationDetailData={applicationDetailData}
-              // isCollectData={isCollectData}
-              // isNewRecord={isNewRecord}
               />
             </Box>
           </Grid>
-          {/* <Grid item xs={12} md={12} width="85%">
-                <Box xs={12} mt={3}>
-                  <TabTableDetail applicationDetailData={applicationDetailData}/>
-                </Box>
-              </Grid> */}
-          {/* </Grid> */}
-          {/* </Grid> */}
+          <Grid item width="75%">
+            <Box xs={12} mt={3} sx={{ p: 2, border: '0px groove grey', borderRadius: '10px', ..._sx }}>
+              <TabTableDetail
+                proofList={proofList}
+                paymentList={paymentList}
+              />
+            </Box>
+          </Grid>
+
         </Grid>
 
       </Grid>

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

@@ -1,92 +0,0 @@
-// 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"
-// ==============================|| EVENT TABLE ||============================== //
-
-export default function BaseGrid({rows}) {
-    const [rowModesModel] = React.useState({});
-
-    const columns = [
-        {
-            id: 'appNo',
-            field: 'appNo',
-            headerName: 'Application No.',
-            flex: 1,
-        },
-        {
-            id: 'created',
-            field: 'created',
-            headerName: 'Created',
-            flex: 1,
-            valueGetter:(params)=>{
-                return DateUtils.datetimeStr(params?.value);
-            }
-        },
-        {
-            id: 'contactPerson',
-            field: 'contactPerson',
-            headerName: 'Contact Person',
-            flex: 2,
-            renderCell: (params) => {
-                let phone = JSON.parse(params.row.contactTelNo);
-                let faxNo = JSON.parse(params.row.contactFaxNo);
-
-                let contact = "";
-                if (phone) {
-                    contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
-                }
-
-                if (faxNo) {
-                    if (contact != "")
-                        contact = contact + ", "
-                    contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber
-                }
-
-                return (<>
-                    {params?.value}<br />
-                    {contact}
-                </>);
-            }
-        },
-        {
-            id: 'remarks',
-            field: 'remarks',
-            headerName: 'remarks',
-            flex: 3,
-        },
-        {
-            field: 'actions',
-            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/PublicNotice/Details_Public/tabTableDetail/PaymentTab.js

@@ -0,0 +1,79 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button
+} from '@mui/material';
+import { useNavigate } from "react-router-dom";
+import {FiDataGrid} from "components/FiDataGrid";
+import * as FormatUtils from "utils/FormatUtils"
+import * as DateUtils from "utils/DateUtils"
+import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
+// import * as StatusUtils from "./PublicNoteStatusUtils";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SubmittedTab({ rows }) {
+
+    const navigate = useNavigate()
+
+    const handleEditClick = (params) => () => {
+        navigate('/paymentPage/details/' + params.row.id);
+    };
+
+    const columns = [
+        {
+            field: 'actions',
+            headerName: '付款編號',
+            flex: 1,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+            },
+        },
+        {
+            id: 'transDateTime',
+            field: 'transDateTime',
+            headerName: '付款日期',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: '付款狀況',
+            flex: 1,
+            renderCell: (params) => {
+                return PaymentStatus.getStatus_Cht(params);
+            }
+        },
+        {
+            id: 'payAmount',
+            field: 'payAmount',
+            headerName: '費用',
+            width: 150,
+            valueGetter: (params) => {
+                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
+            }
+        },
+    ];
+
+    return (
+        <>
+            <div style={{ height: 400, width: '100%' }}>
+                <FiDataGrid
+                    rows={rows}
+                    columns={columns}
+                    initialState={{
+                        pagination: {
+                            paginationModel: { page: 0, pageSize: 5 },
+                        },
+                    }}
+                />
+            </div>
+        </>
+    );
+
+
+
+}

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

@@ -1,141 +0,0 @@
-// material-ui
-import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
-import {
-    Stack,
-    Typography,
-    Button,
-    Dialog, DialogTitle, DialogContent, DialogActions
-} from '@mui/material';
-import * as DateUtils from "utils/DateUtils"
-// import * as StatusUtils from "./PublicNoteStatusUtils";
-// ==============================|| EVENT TABLE ||============================== //
-
-export default function SubmittedTab({ rows }) {
-    const [selectedRowItems, setSelectedRowItems] = React.useState([]);
-    const [isPopUp, setIsPopUp] = React.useState(false);
-
-
-    const columns = [
-        {
-            id: 'appNo',
-            field: 'appNo',
-            headerName: '申請編號',
-            flex: 1,
-        },
-        {
-            id: 'created',
-            field: 'created',
-            headerName: '提交日期',
-            flex: 1,
-            valueGetter: (params) => {
-                return DateUtils.datetimeStr(params.value);
-            }
-        },
-        {
-            id: 'contactPerson',
-            field: 'contactPerson',
-            headerName: '聯絡人',
-            flex: 2,
-            renderCell: (params) => {
-                let phone = JSON.parse(params.row.contactTelNo);
-                let faxNo = JSON.parse(params.row.contactFaxNo);
-
-                let contact = "";
-                if (phone) {
-                    contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
-                }
-
-                if (faxNo) {
-                    if (contact != "")
-                        contact = contact + ", "
-                    contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber
-                }
-
-                return (<>
-                    {params?.value}<br />
-                    {contact}
-                </>);
-            }
-        },
-        {
-            id: 'remarks',
-            field: 'remarks',
-            headerName: '我的備註',
-            flex: 3,
-
-        },
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: '',
-            width: 50,
-            cellClassName: 'actions',
-            renderCell: () => {
-                return <Button onClick={() => { }}>查看詳細</Button>;
-            },
-        }
-    ];
-
-    const getWindowContent = () => {
-        var content = [];
-        const datas = rows?.filter((row) =>
-            selectedRowItems.includes(row.id)
-        );
-        for (var i = 0; i < datas?.length; i++) {
-            content.push(<>
-                <Stack direction="row" justifyContent="space-between"><Typography variant="h5">申請編號: {datas[i].appNo}</Typography>({DateUtils.datetimeStr(datas[i].created)})</Stack>
-                備註: {datas[i].remarks}
-                <br /><br />
-            </>);
-        }
-        return content;
-    }
-
-    return (
-        <>
-            <div style={{ height: 400, width: '100%' }}>
-                <DataGrid
-                    checkboxSelection
-                    disableRowSelectionOnClick
-                    rows={rows}
-                    columns={columns}
-                    editMode="row"
-                    rowSelectionModel={selectedRowItems}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 5 },
-                        },
-                    }}
-                    pageSizeOptions={[5, 10]}
-                    autoHeight={true}
-                    onRowSelectionModelChange={(newSelection) => {
-                        setSelectedRowItems(newSelection);
-                    }}
-                />
-                <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
-            </div>
-
-            <div>
-                <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
-                    <DialogTitle></DialogTitle>
-                    <Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography>
-                    <DialogContent style={{ display: 'flex', }}>
-                        <Stack direction="column" justifyContent="space-between">
-                            {getWindowContent()}
-                        </Stack>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => setIsPopUp(false)}>Close</Button>
-                         <Button onClick={() => setIsPopUp(false)}>確認</Button>
-                    </DialogActions>
-                </Dialog>
-            </div>
-        </>
-    );
-
-
-
-}

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

@@ -1,73 +1,81 @@
 // material-ui
 import * as React from 'react';
 import {
-    DataGrid,
-} from "@mui/x-data-grid";
-import {
-    Button
+    Button,
 } from '@mui/material';
+import { useNavigate } from "react-router-dom";
+import * as DateUtils from "utils/DateUtils";
+import * as ProofStatus from "utils/statusUtils/ProofStatus";
+import {FiDataGrid} from "components/FiDataGrid";
+import * as FormatUtils from "utils/FormatUtils"
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
-    const [rowModesModel] = React.useState({});
+
+    const navigate = useNavigate()
+
+    const handleEditClick = (params) => () => {
+        navigate('/proof/reply/' + params.row.id);
+    };
 
     const columns = [
         {
-            id: 'proofRef',
-            field: 'proofRef',
-            headerName: 'Proof Ref.',
-            flex: 1,
+           
+            field: 'actions',
+            headerName: '校對編號',
+            width: 200,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+            },
         },
         {
-            id: 'proofSent',
-            field: 'proofSent',
-            headerName: 'Proof Return',
+            id: 'actions',
+            headerName: '狀態',
             flex: 1,
+            renderCell: (params) => {
+                return ProofStatus.getStatus_Cht(params);
+            },
         },
         {
-            id: 'proofReturn',
-            field: 'proofReturn',
-            headerName: 'Proof Return',
+            id: 'created',
+            field: 'created',
+            headerName: '校對日期',
             flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
         },
         {
-            id: 'status',
-            field: 'status',
-            headerName: 'Status',
+            id: 'replyDate',
+            field: 'replyDate',
+            headerName: '回覆日期',
             flex: 1,
+            valueGetter: (params) => {
+                return params?.value?DateUtils.datetimeStr(params?.value):"";
+            }
         },
         {
             id: 'fee',
             field: 'fee',
-            headerName: 'Fee (HKD)',
-            flex: 2,
+            headerName: '費用',
+            flex: 1,
+            valueGetter: (params) => {
+                return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):"";
+            }
         },
-        {
-            field: 'detail',
-            type: 'actions',
-            headerName: '',
-            width: 50,
-            cellClassName: 'actions',
-            renderCell: () => {
-                return <Button onClick={()=>{}}>查看詳細</Button>;
-            },
-        }
     ];
 
     return (
         <div style={{height:'20%', width: '100%'}}>
-            <DataGrid
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight = {true}
             />
         </div>
     );

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

@@ -1,27 +1,26 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
-
+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";
 
 // ==============================|| 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,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+            
         },
         {
             id: 'createdBy',
@@ -42,18 +41,14 @@ export default function StatusHistoryTab({rows}) {
 
     return (
         <div style={{height:'20%', width: '100%'}}>
-            <DataGrid
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight = {true}
             />
         </div>
     );

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

@@ -8,98 +8,67 @@ import {
 } from '@mui/material';
 
 import { TabPanel, TabContext, TabList } from '@mui/lab';
-import { 
-    useEffect, 
-    useState } from "react";
-// import { useNavigate } from "react-router-dom";
 import * as React from "react";
-// import * as HttpUtils from "../../../utils/HttpUtils";
-// import * as UrlUtils from "../../../utils/ApiPathConst";
+
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
-const BaseGrid = Loadable(lazy(() => import('./BaseGrid')));
-const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab')));
-const LoadingComponent = Loadable(lazy(() => import('../../../extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
 const ProofTab = Loadable(lazy(() => import('./ProofTab')));
+const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const PublicNotice = ({applicationDetailData}) => {
-    const [submittedList, ] = useState([]);
-    const [inProgressList, ] = useState([]);
-    const [onReady,setOnReady] = useState(false);
-    const [selectedTab, setSelectedTab] = useState("1");
-    // const navigate = useNavigate();
-    const [statusHistoryList, setStatusHistoryList] = useState([]);
-
+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");
 
-    // useEffect(() => {
-    //     loadData();
-    // }, []);
 
     const reloadPage = () => {
         window.location.reload(false);
     }
 
-    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]);
+    React.useEffect(() => {
+        setProofList(proofList);
+        setOnReady(true);
+    }, [proofList]);
 
-    // useEffect(() => {
-    //     setLoding(false);
-    // }, [submittedList]);
+    React.useEffect(() => {
+        setPaymentList(paymentList);
+    }, [paymentList]);
 
     const handleChange = (event, newValue) => {
         setSelectedTab(newValue);
     }
 
-    // const onBtnClick = () => {
-    //     navigate('/publicNotice/apply')
-    // }
-
     return (
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{minHeight: '40vh'}}>
+            <Grid container sx={{ minHeight: '40vh', p:2}}>
                 {/*col 2*/}
                 <Grid item xs={12}>
                     <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={"Payment(" + inProgressList.length + ")"} value="2" />
-                                <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
+                                <Tab label={"校對記錄(" + _proofList.length + ")"} value="1" />
+                                <Tab label={"付款記錄(" + _paymentList.length + ")"} value="2" />
+                                
                             </TabList>
                         </Box>
                         <TabPanel value="1">
                             <ProofTab
-                                rows={submittedList}
+                                rows={_proofList}
                                 reloadFunction={reloadPage}
                             />
                         </TabPanel>
                         <TabPanel value="2">
-                            <BaseGrid
-                                rows={inProgressList}
-                                reloadFunction={reloadPage}
-                            />
-                        </TabPanel>
-                        <TabPanel value="3">
-                            <StatusHistoryTab
-                                rows={statusHistoryList}
+                            <PaymentTab
+                                rows={_paymentList}
                                 reloadFunction={reloadPage}
                             />
                         </TabPanel>