add payment gld & app payment list tab

src/layout/MainLayout/Header/index.js

@@ -83,7 +83,7 @@ function Header(props) {
           <Link className="proof" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Proof</Typography></Link>
         </li>
         <li>
-          <Link className="payment" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Payment</Typography></Link>
+          <Link className="payment" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Payment</Typography></Link>
         </li>
         <li>
           <Link className="client" ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon /></Link>

src/pages/Payment/Details_GLD/DataGrid.js

@@ -0,0 +1,64 @@
+// material-ui
+import {
+    Typography,
+} from '@mui/material';
+
+import * as React from 'react';
+import * as FormatUtils from "utils/FormatUtils"
+import { FiDataGrid } from "components/FiDataGrid";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const [total, setTotal] = React.useState(0);
+
+    React.useEffect(() => {
+        setRows(recordList);
+        let countTotal = 0;
+        recordList.forEach(item => {
+            countTotal+=item.fee;
+        });
+
+        setTotal(countTotal)
+    }, [recordList]);
+
+    const columns = [
+        {
+            id: 'appNo',
+            field: 'appNo',
+            headerName: 'App No.',
+            flex: 1,
+            renderCell: (params) => {
+                let appNo = params.row.appNo;
+                return <div style={{ margin: 4 }}>{appNo}<br/>{params.row.remarks}</div>
+            },
+        },
+        {
+            id: 'fee',
+            field: 'fee',
+            headerName: 'Amount (HK$)',
+            width: 150,
+            valueGetter: (params) => {
+                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
+            }
+        },
+    ];
+
+    return (
+        <div style={{ height: 400, width: '100%' }}>
+
+            <FiDataGrid
+                rowHeight={80}
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
+            />
+
+            <Typography align="right" variant= "h3">Total Amount: <span style={{ color: "blue", fontWeight: "bold", }}> HK$ {FormatUtils.currencyFormat(total)}</span></Typography>
+        </div>
+    );
+}

src/pages/Payment/Details_GLD/PaymentDetails.js

@@ -0,0 +1,151 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    FormLabel,
+} from '@mui/material';
+
+import * as React from "react";
+import * as FormatUtils from "utils/FormatUtils";
+import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
+import Loadable from 'components/Loadable';
+const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+const PaymentDetails = ({ formData, }) => {
+
+    const [data, setData] = React.useState({});
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
+            setData(formData);
+        }
+    }, [formData]);
+
+    React.useEffect(() => {
+        if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
+            setOnReady(data != {});
+        }
+    }, [data]);
+
+
+    return (
+        !onReady ?
+            <LoadingComponent />
+            :
+            <MainCard elevation={0}
+                border={false}
+                content={false}
+            >
+                <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
+                    Payment Details
+                </Typography>
+                <form>
+                    <Grid container>
+                        <Grid item xs={12} md={12} >
+                            <Grid container >
+                                <Grid item xs={3} md={3} sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        Status:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
+                                        {PaymentStatus.getStatus_Eng(data.status)}
+                                    </FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12} md={12}>
+                            <Grid container >
+                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        Trans No.:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        {data.payload?.transactionid}
+                                    </FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12} md={12}>
+                            <Grid container >
+                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        Trans Date:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        {data.transDateStr + " (DD/MM/YYYY)"}
+                                    </FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12} md={12}>
+                            <Grid container >
+                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        Trans Time:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        {data.transTimeStr + " (HH:MI:SS)"}
+                                    </FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12} md={12}>
+                            <Grid container >
+                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        EGIS Ref No.:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        {data.egisRefNo}
+                                    </FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12} md={12}>
+                            <Grid container >
+                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        Payment Amount:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
+                                    </FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12} md={12}>
+                            <Grid container >
+                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        Payment Method:
+                                    </FormLabel>
+                                </Grid>
+                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
+                                    <FormLabel sx={{ color: "#000000" }}>
+                                        {data.payload?.paymentdetail?.subtype ?? (data.payload.paymentdetail.paymentmethod === "01" ? "PPS" : "")}
+                                    </FormLabel>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
+                    </Grid>
+                </form>
+            </MainCard>
+    );
+};
+
+export default PaymentDetails;

src/pages/Payment/Details_GLD/index.js

@@ -0,0 +1,114 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack,
+    Box
+} from '@mui/material';
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const PaymentDetails = Loadable(React.lazy(() => import('./PaymentDetails')));
+const DataGrid = Loadable(React.lazy(() => import('./DataGrid')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+    const params = useParams();
+    const navigate = useNavigate()
+
+    const [record, setRecord] = React.useState();
+    const [itemList, setItemList] = React.useState([]);
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        loadForm();
+    }, []);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+
+    const loadForm = () => {
+        if (params.id > 0) {
+
+            HttpUtils.get({
+                url: UrlUtils.PAYMENT_LOAD + "/" + params.id,
+                onSuccess: (responseData) => {
+                    if (!responseData.data?.id) {
+                        navigate("/paymentPage/search");
+                    }
+                    responseData.data["transDateStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "DD/MM/YYYY");
+                    responseData.data["transTimeStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "HH:mm:ss");
+                    setItemList(responseData.paymentItemList)
+                    setRecord(responseData.data);
+                }
+            });
+        }
+    }
+
+    return (
+        !onReady ?
+            <LoadingComponent />
+            :
+            (
+                <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                    <Grid item xs={12} width="100%">
+                        <div style={BackgroundHead} width="100%">
+                            <Stack direction="row" height='70px'>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Payment Details</Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
+                        <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
+                            <Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
+                                <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                    <DataGrid
+                                        recordList={itemList}
+                                    />
+                                </Box>
+                            </Grid>
+                            <Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
+                                <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
+                                    <PaymentDetails
+                                        formData={record}
+                                        style={{
+                                            display: "flex",
+                                            height: "100%",
+                                            flex: 1
+                                        }}
+                                    />
+                                </Box>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                    {/*row 2*/}
+                </Grid >
+
+
+            )
+
+
+    );
+};
+
+export default Index;

src/pages/Payment/Search_GLD/DataGrid.js

@@ -0,0 +1,106 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils"
+import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
+import { useNavigate } from "react-router-dom";
+import { FiDataGrid } from "components/FiDataGrid";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const navigate = useNavigate()
+
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
+    React.useEffect(() => {
+        setRows(recordList);
+    }, [recordList]);
+
+    const handleEditClick = (params) => () => {
+        navigate('/paymentPage/details/' + params.row.id);
+    };
+
+    const columns = [
+        {
+            field: 'actions',
+            headerName: 'Trans. No.',
+            flex: 1,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+            },
+        },
+        {
+            id: 'appNos',
+            field: 'appNos',
+            headerName: 'App No.',
+            flex: 1,
+            renderCell: (params) => {
+                let appNo = params.row.appNos;
+                return <div style={{ margin: 4 }}>{appNo}</div>
+            },
+        },
+        {
+            id: 'transDateTime',
+            field: 'transDateTime',
+            headerName: 'Trans. Date',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+        },
+        {
+            field: 'action',
+            headerName: 'Status',
+            width: 150,
+            renderCell: (params) => {
+                return PaymentStatus.getStatus_Cht(params);
+            }
+        },
+        {
+            id: 'payAmount',
+            field: 'payAmount',
+            headerName: 'Amount',
+            width: 150,
+            valueGetter: (params) => {
+                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
+            }
+        },
+    ];
+
+    return (
+        <div style={{ height: 400, width: '100%' }}>
+
+            <FiDataGrid
+                sx={_sx}
+                rowHeight={80}
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
+                onRowDoubleClick={handleEditClick}
+            />
+        </div>
+    );
+}

src/pages/Payment/Search_GLD/SearchForm.js

@@ -0,0 +1,156 @@
+// material-ui
+import {
+    Button,
+    CardContent,
+    Grid, TextField,
+    Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+import * as DateUtils from "utils/DateUtils";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
+
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
+    const { reset, register, handleSubmit } = useForm()
+
+    const onSubmit = (data) => {
+        const temp = {
+            code: data.code,
+            dateFrom: data.dateFrom,
+            dateTo: data.dateTo,
+        };
+        applySearch(temp);
+    };
+
+    function resetForm() {
+        reset();
+    }
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            sx={_sx}
+            >
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                {/*row 1*/}
+                <CardContent sx={{ px: 2.5, pt: 3 }}>
+                    <Grid item justifyContent="space-between" alignItems="center" >
+                        <Typography variant="h4">Search</Typography>
+                    </Grid>
+                </CardContent>
+
+                {/*row 2*/}
+                <Grid container alignItems={"center"}>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("code")}
+                            id='code'
+                            label="App No.:"
+                            defaultValue={searchCriteria.code}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("dateFrom")}
+                            id="dateFrom"
+                            type="date"
+                            label="Trans. Date From"
+                            defaultValue={searchCriteria.dateFrom}
+                            InputProps={{ inputProps: { max: maxDate } }}
+                            onChange={(newValue) => {
+                                setMinDate(DateUtils.dateStr(newValue));
+                            }}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            InputProps={{ inputProps: { min: minDate } }}
+                            onChange={(newValue) => {
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
+                            id="dateTo"
+                            type="date"
+                            label="Trans. Date To"
+                            defaultValue={searchCriteria.dateTo}
+                        />
+                    </Grid>
+
+                </Grid>
+
+
+                {/*last row*/}
+                <Grid container maxWidth justifyContent="flex-end">
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Button
+                            size="large"
+                            variant="contained"
+                            onClick={resetForm}
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            <Typography variant="h5">Reset</Typography>
+                        </Button>
+                    </Grid>
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Button
+                            size="large"
+                            variant="contained"
+                            type="submit"
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            <Typography variant="h5">Submit</Typography>
+                        </Button>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchPublicNoticeForm;

src/pages/Payment/Search_GLD/index.js

@@ -0,0 +1,97 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize:'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+
+    const [record,setRecord] = React.useState([]);
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        dateTo: DateUtils.dateStr(new Date()),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+    React.useEffect(() => {
+        loadGrid();
+    }, [searchCriteria]);
+
+    function loadGrid(){
+        HttpUtils.get({
+            url: UrlUtils.PAYMENT_LIST,
+            params: searchCriteria,
+            onSuccess: function(responseData){
+                setRecord(responseData);
+            }
+        });
+    }
+
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    return (
+        !onReady ?
+            <LoadingComponent/>
+            :
+            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
+                <Grid item xs={12}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">Payment Record</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm 
+                    applySearch={applySearch}
+                    searchCriteria={searchCriteria}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+};
+
+export default Index;

src/pages/PublicNotice/Details_GLD/index.js

@@ -47,6 +47,7 @@ const PublicNoticeDetail_GLD = () => {
   const navigate = useNavigate()
   const [applicationDetailData, setApplicationDetailData] = useState({});
   const [proofList, setProofList] = useState([]);
+  const [paymentList, setPaymentList] = useState([]);
   // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
   const [isLoading, setLoading] = useState(false);
   const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
@@ -115,6 +116,7 @@ const PublicNoticeDetail_GLD = () => {
             setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
             setGroupNo(response.data.data.groupNo);
             setProofList(response.data.proofList);
+            setPaymentList(response.data.paymentList);
             setLoading(false);
           }
         })
@@ -371,6 +373,7 @@ const PublicNoticeDetail_GLD = () => {
                   <TabTableDetail
                     applicationDetailData={applicationDetailData}
                     proofList={proofList}
+                    paymentList={paymentList}
                   />
                 </Box>
                 <br/>

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

@@ -1,84 +0,0 @@
-// material-ui
-import * as React from 'react';
-import {FiDataGrid} from "components/FiDataGrid";
-import {
-    Button
-} from '@mui/material';
-import * as DateUtils from "utils/DateUtils"
-// ==============================|| EVENT TABLE ||============================== //
-
-export default function BaseGrid({rows}) {
-    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%'}}>
-            <FiDataGrid
-                rows={rows}
-                columns={columns}
-                initialState={{
-                    pagination: {
-                        paginationModel: {page: 0, pageSize: 5},
-                    },
-                }}
-            />
-        </div>
-    );
-}

src/pages/PublicNotice/Details_GLD/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: 'Trans. No.',
+            flex: 1,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+            },
+        },
+        {
+            id: 'transDateTime',
+            field: 'transDateTime',
+            headerName: 'Trans. Date',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            renderCell: (params) => {
+                return PaymentStatus.getStatus_Eng(params);
+            }
+        },
+        {
+            id: 'payAmount',
+            field: 'payAmount',
+            headerName: 'Amount',
+            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_GLD/tabTableDetail/PendingPaymentTab.js

@@ -1,135 +0,0 @@
-// material-ui
-import * as React from 'react';
-import {FiDataGrid} from "components/FiDataGrid";
-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%' }}>
-                <FiDataGrid
-                    checkboxSelection
-                    disableRowSelectionOnClick
-                    rows={rows}
-                    columns={columns}
-                    initialState={{
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 5 },
-                        },
-                    }}
-                    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_GLD/tabTableDetail/ProofTab.js

@@ -1,21 +1,41 @@
 // material-ui
 import * as React from 'react';
+import {
+    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 navigate = useNavigate()
 
+    const handleEditClick = (params) => () => {
+        navigate('/proof/reply/' + params.row.id);
+    };
 
     const columns = [
         {
            
-            id: 'refNo',
-            field: 'refNo',
+            field: 'actions',
             headerName: 'Proof No.',
+            width: 200,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+            },
+        },
+        {
+            id: 'actions',
+            headerName: 'Status',
             flex: 1,
+            renderCell: (params) => {
+                return ProofStatus.getStatus_Eng(params);
+            },
         },
         {
             id: 'created',

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

@@ -13,17 +13,17 @@ import * as React from "react";
 
 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 ProofTab = Loadable(lazy(() => import('./ProofTab')));
+const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const PublicNotice = ({ applicationDetailData, proofList }) => {
+const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => {
     const [_proofList, setProofList] = React.useState([]);
-    const [inProgressList,] = React.useState([]);
+    const [_paymentList, setPaymentList] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
     const [selectedTab, setSelectedTab] = React.useState("1");
     // const navigate = useNavigate();
@@ -43,6 +43,10 @@ const PublicNotice = ({ applicationDetailData, proofList }) => {
         setProofList(proofList);
     }, [proofList]);
 
+    React.useEffect(() => {
+        setPaymentList(paymentList);
+    }, [paymentList]);
+
     React.useEffect(() => {
         //if state data are ready and assign to different field
         if (statusHistoryList.length > 0) {
@@ -73,7 +77,7 @@ const PublicNotice = ({ applicationDetailData, proofList }) => {
                         <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={"Payment(" + inProgressList.length + ")"} value="2" />
+                                <Tab label={"Payment(" + _paymentList.length + ")"} value="2" />
                                 <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
                             </TabList>
                         </Box>
@@ -84,8 +88,8 @@ const PublicNotice = ({ applicationDetailData, proofList }) => {
                             />
                         </TabPanel>
                         <TabPanel value="2">
-                            <BaseGrid
-                                rows={inProgressList}
+                            <PaymentTab
+                                rows={_paymentList}
                                 reloadFunction={reloadPage}
                             />
                         </TabPanel>

src/routes/GLDUserRoutes.js

@@ -12,6 +12,8 @@ const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_
 const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_GLD')));
 const ProofCreate_FromApp = Loadable(lazy(() => import('pages/Proof/Create_FromApp')));
 const ProofReply_GLD = Loadable(lazy(() => import('pages/Proof/Reply_GLD')));
+const PaymentSearch_GLD = Loadable(lazy(() => import('pages/Payment/Search_GLD')));
+const PaymentDetails_GLD = Loadable(lazy(() => import('pages/Payment/Details_GLD')));
 // ==============================|| MAIN ROUTING ||============================== //
 
 const GLDUserRoutes = {
@@ -48,6 +50,14 @@ const GLDUserRoutes = {
         {
           path: '/proof/reply/:id',
           element: <ProofReply_GLD/>
+        },
+        {
+          path: '/paymentPage/search',
+          element: <PaymentSearch_GLD/>
+        },
+        {
+          path: '/paymentPage/details/:id',
+          element: <PaymentDetails_GLD/>
         }
       ]
     },